Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
No results found
Show changes
Commits on Source (1)
Hide whitespace changes
Inline Side-by-side
src/complete-order/css/stylesheet.css 0 → 100644
View file @ 1b485feb
.header-box {
border: 1px solid black;
padding: 10px 10px 10px 10px;
font-size: 30px;
font-family: sans-serif;
text-align: center;
flex: 1;
}
.header-box:first-child {
background-color: #244224;
color: white;
}
.container {
display: flex;
flex-direction: row;
margin-top: 10px;
}
.step-container {
display: flex;
flex-direction: row;
}
.step-box:first-child {
margin-left: 0;
}
.step-box:last-child {
background-color: #fbff96;
}
.step-box {
flex: 1;
display: flex;
flex-direction: row;
text-align: center;
border: 1px solid black;
margin-left: 40px;
}
.round-num {
text-align: center;
line-height: 40px;
background-color: grey;
border-radius: 50%;
width: 40px;
height: 40px;
margin: 5px 5px 5px 5px;
}
.step-box p {
flex: 1;
}
.driver-pic {
height: 120px;
width: 120px;
border-radius: 50%;
border: 4px solid black;
}
.driver-container {
text-align: center;
}
.compl-button {
float: right;
background-color: #7ecc20;
border-radius: 8px;
border: 1px solid black;
font-size: 20px;
width: 130px;
text-align: center;
margin: 20px;
}
.page-header {
display: flex;
flex-direction: row;
flex: 1;
}
.user-info {
flex: 1;
text-align: right;
}
.page-header div p {
margin: 0 0 5px 0;
}
.company-name {
font-size: 35px;
}
.company-name span {
color: red;
font-weight: bold;
}
.company-name span:first-child {
color: green;
}
.company-tagline {
color: green;
}
.user-name span {
font-weight: bold;
}
.logout {
text-decoration: underline;
color: blue;
}
.driver-username {
font-weight: bold;
font-size: 20px;
}
textarea {
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
margin-bottom: 0;
resize: none;
}
.rating-container {
width: 200px; /*can be in percentage also.*/
height: auto;
margin: 0 auto 10px;
display: flex;
flex-direction: row;
}
.rating {
flex: 1;
text-align: center;
border: 1px solid black;
height: 20px;
width: 20px;
margin-left: 20px;
}
.rating:first-child {
margin-left: 0;
}
src/complete-order/img/rattata.png 0 → 100644
View file @ 1b485feb
src/complete-order/img/rattata.png

37.5 KiB

src/complete-order/index.html 0 → 100644
View file @ 1b485feb
<!DOCTYPE HTML>
<html>
<head>
<title>Complete order</title>
<link type="text/css" rel="stylesheet" href="css/stylesheet.css"/>
</head>
<body>
<div class="page-header">
<div class="company-info">
<p class="company-name"><span>PR</span>-<span>OJEK</span></p>
<p class="company-tagline">wushh.. wush.. wush.. ngeeeeng...</p>
</div>
<div class="user-info">
<p class="user-name">Hi, <span>pikapikapikachu</span> !</p>
<p class="logout">Logout</p></div>
</div>
<div class="container">
<div class="header-box">ORDER</div>
<div class="header-box">HISTORY</div>
<div class="header-box">MY PROFILE </div>
</div>
<h1>MAKE AN ORDER</h1>
<div class="step-container">
<div class="step-box">
<div class="round-num">1</div>
<p>Select Destination</p>
</div>
<div class="step-box">
<div class="round-num">2</div>
<p>Select a Driver</p>
</div>
<div class="step-box">
<div class="round-num">3</div>
<p>Complete your order</p>
</div>
</div>
<h2>HOW WAS IT?</h2>
<div class="driver-container">
<img class="driver-pic" src="img/rattata.png"/>
<p class="driver-username">@bombarattata</p>
<p class="driver-fullname">Bomba-rattata Ttatatatta</p>
<div class="rating-container">
<div class="rating"></div>
<div class="rating"></div>
<div class="rating"></div>
<div class="rating"></div>
<div class="rating"></div>
</div>
<textarea placeholder="Your comment..."></textarea>>
</div>
<div class="compl-button">COMPLETE ORDER</div>
</body>
</html>