diff --git a/src/complete-order.html b/src/complete-order.html index aecb22c0a8f4227e02264d7ea741453401f3f325..3efe9cd36083c45f0324afcca26da49ffab89378 100644 --- a/src/complete-order.html +++ b/src/complete-order.html @@ -1,59 +1,93 @@ -<!DOCTYPE HTML> +<!DOCTYPE html> + <html> <head> - <title>Complete order</title> - <link type="text/css" rel="stylesheet" href="css/stylesheet.css"/> + <title>Complete Order</title> + <link rel="stylesheet" href="css/fan2.css"/> </head> <body> + <div class="card mcenter"> - <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 class="rowflex"> + <div class="flexone"> + <div> + <span class="font-header" style="color: green;">PR</span> + - + <span class="font-header" style="color: red;">OJEK</span> + </div> + <div style="color: green;"> + wushh... wushh... ngeeeeeeenggg... + </div> + </div> + <div class="mtop10 flexone textright"> + <span>Hi, </span> + <span id="username">pikapikachu</span> + <br /> + <a href="#">Logout</a> + </div> + </div> + + <div class="mtop10 rowflex"> + <div class="flexone box font-header selected-navbar">ORDER</div> + <div class="flexone box font-header">HISTORY</div> + <div class="flexone box font-header">MY PROFILE</div> </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 class="mtop10"> + <span class="font-title flexone">MAKE AN ORDER</span> </div> - <div class="step-box"> - <div class="round-num">2</div> - <p>Select a Driver</p> + + <div class="mtop10 rowflex"> + <div class="rowflex order-step flexone box font-order"> + <div class="number mr20 lh40"> + 1 + </div> + <div class="lh40"> + Select Destination + </div> + </div> + <div class="rowflex order-step flexone box font-order"> + <div class="number mr20 lh40"> + 2 + </div> + <div class="lh40"> + Select a Driver + </div> + </div> + <div class="rowflex order-step flexone box font-order selected-order"> + <div class="number mr20 lh40"> + 3 + </div> + <div class="lh40"> + Complete your order + </div> + </div> </div> - <div class="step-box"> - <div class="round-num">3</div> - <p>Complete your order</p> + + <h2>HOW WAS IT ?</h2> + <div class="mtop30 textcenter" > + <img class="mtop10 profilepic" src="img/foto-profil.jpg" /> + <div class="mtop10" id="username"> + @pikapikachu + </div> + <div class="mtop10" id="fullname"> + Pikachu Smith + </div> + <div class="mtop10" style="font-size: 30px;"> + <span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span> + </div> + <textarea class="mtop10" style="height: 40px; width: 100%;"placeholder="Your comment..."></textarea> + </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 class="mtop10 button float-right"> + Complete Order </div> - <textarea placeholder="Your comment..."></textarea>> + + </div> - <div class="compl-button">COMPLETE ORDER</div> </body> </html> diff --git a/src/order-ojek.html b/src/order-ojek.html index 28c57a05ebc7537c6aaee3bd8bb71924d6cba6cb..002928b71b2728c7cc8ae1c3aaa61ca15be5582e 100644 --- a/src/order-ojek.html +++ b/src/order-ojek.html @@ -1,60 +1,100 @@ -<!DOCTYPE HTML> +<!DOCTYPE html> + <html> <head> - <title>Order ojek</title> - <link type="text/css" rel="stylesheet" href="css/stylesheet3.css"/> + <title>Order Ojek</title> + <link rel="stylesheet" href="css/fan2.css"/> </head> <body> + <div class="card mcenter"> - <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 class="rowflex"> + <div class="flexone"> + <div> + <span class="font-header" style="color: green;">PR</span> + - + <span class="font-header" style="color: red;">OJEK</span> + </div> + <div style="color: green;"> + wushh... wushh... ngeeeeeeenggg... + </div> + </div> + <div class="mtop10 flexone textright"> + <span>Hi, </span> + <span id="username">pikapikachu</span> + <br /> + <a href="#">Logout</a> + </div> + </div> + + <div class="mtop10 rowflex"> + <div class="flexone box font-header selected-navbar">ORDER</div> + <div class="flexone box font-header">HISTORY</div> + <div class="flexone box font-header">MY PROFILE</div> </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 class="mtop10"> + <span class="font-title flexone">MAKE AN ORDER</span> </div> - <div class="step-box"> - <div class="round-num">2</div> - <p>Select a Driver</p> + + <div class="mtop10 rowflex"> + <div class="rowflex order-step flexone box font-order"> + <div class="number mr20 lh40"> + 1 + </div> + <div class="lh40"> + Select Destination + </div> + </div> + <div class="rowflex order-step flexone box font-order selected-order"> + <div class="number mr20 lh40"> + 2 + </div> + <div class="lh40"> + Select a Driver + </div> + </div> + <div class="rowflex order-step flexone box font-order"> + <div class="number mr20 lh40"> + 3 + </div> + <div class="lh40"> + Complete your order + </div> + </div> </div> - <div class="step-box"> - <div class="round-num">3</div> - <p>Complete your order</p> + + <div class="rowflex mtop30"> + <div class="labels mlauto"> + Picking Point + </div> + <input class="mrauto" placeholder=" insert picking point"/> </div> - </div> + <div class="rowflex mtop10"> + <div class="labels mlauto"> + Destination + </div> + <input class="mrauto" placeholder=" insert destination"/> + </div> + - <div class="dest-input"> - <p>Picking point</p> - <input placeholder=" insert picking point"></input> - </div> - <div class="dest-input"> - <p>Destination</p> - <input placeholder=" insert destination"></input> - </div> - <div class="dest-input"> - <p>Preferred Driver</p> - <input placeholder=" (optional)"></input> - </div> - <div class="next-button">NEXT</div> + <div class="rowflex mtop10"> + <div class="labels mlauto"> + Preferred Driver + </div> + <input class="mrauto" placeholder=" optional"/> + </div> + <div class="mtop50 button mcenter"> + Complete Order + </div> + + + </div> </body> </html>