Skip to content
Snippets Groups Projects
Commit aec3f780 authored by Fadhil Imam Kurnia's avatar Fadhil Imam Kurnia
Browse files

Styling order page

parent 121d964d
Branches
1 merge request!4Order
Hide whitespace changes
Inline Side-by-side
public/style.css
+ 64
− 4
View file @ aec3f780
...@@ -7,7 +7,7 @@ body { ...@@ -7,7 +7,7 @@ body {
.container { .container {
width: 80%; width: 80%;
max-width: 1200px; max-width: 700px;
margin: 50px auto; margin: 50px auto;
background-color: white; background-color: white;
padding: 20px; padding: 20px;
...@@ -70,7 +70,7 @@ body { ...@@ -70,7 +70,7 @@ body {
.btn { .btn {
border-radius: 5px; border-radius: 5px;
border: 1px solid black; border: 1px solid black;
padding:5px 15px; padding: 5px 15px;
color: black; color: black;
text-decoration: none; text-decoration: none;
font-size: medium; font-size: medium;
...@@ -101,8 +101,8 @@ body { ...@@ -101,8 +101,8 @@ body {
.tab { .tab {
outline: 1px solid #004D40; outline: 1px solid #004D40;
padding-top: 10px; padding-top: 15px;
padding-bottom: 10px; padding-bottom: 15px;
font-weight: 900; font-weight: 900;
color: black; color: black;
text-decoration: none; text-decoration: none;
...@@ -216,4 +216,64 @@ table, th, td { ...@@ -216,4 +216,64 @@ table, th, td {
width: 17px; width: 17px;
height: 17px; height: 17px;
content: ""; content: "";
}
/* ------------------------- ORDER -------------------------*/
.small-circle {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #c2c2c2;
font-size: large;
vertical-align: middle;
margin: 0;
}
.page-tab {
width: 180px;
height: 50px;
border: 1px solid black;
margin: 0 auto;
display: table;
box-sizing: border-box;
vertical-align: middle;
}
.page-tab.selected {
background-color: #fffead;
}
.page-tab > .page-tab-image {
float: left;
width: 30%;
height:100%;
text-align: center;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
}
.page-tab >.page-tab-image >.circle {
border-radius: 50%;
width: 40px;
height: 40px;
margin: auto;
background-color: #c2c2c2;
padding: auto;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.page-tab > .page-tab-content {
float: right;
width: 70%;
height:100%;
display: inline-block;
display: flex;
flex-direction: column;
justify-content: center;
} }
\ No newline at end of file
src/view/order.php
+ 58
− 14
View file @ aec3f780
...@@ -4,21 +4,65 @@ ...@@ -4,21 +4,65 @@
<link rel="stylesheet" type="text/css" href="/style.css"> <link rel="stylesheet" type="text/css" href="/style.css">
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-3"><span class="logo"></span></div> <div class="col-3"><span class="logo"></span></div>
<div class="col-3 text-right"> <div class="col-3 text-right">
<p> <p>
Hi, <b><?=$user->username?></b> !<br> Hi, <b><?=$user->username?></b> !<br>
<a href="/">Logout</a> <a href="/">Logout</a>
</p> </p>
</div>
</div>
<div class="row">
<a class="col-2 tab text-center active" href="/main/order?u=<?=$id?>">ORDER</a>
<a class="col-2 tab text-center" href="/main/hostory?u=<?=$id?>">HISTORY</a>
<a class="col-2 tab text-center" href="/main/profil?u=<?=$id?>">MY PROFILE</a>
</div>
<div class="row">
<div class="col-6"><h1>MAKE AN ORDER</h1></div>
</div>
<div class="row">
<div class="col-2">
<div class="page-tab selected">
<div class="page-tab-image">
<div class="circle">1</div>
</div>
<div class="page-tab-content">
Select Destination
</div>
</div>
</div>
<div class="col-2">
<div class="page-tab">
<div class="page-tab-image">
<div class="circle">2</div>
</div>
<div class="page-tab-content">
Select a Driver
</div>
</div>
</div>
<div class="col-2">
<div class="page-tab">
<div class="page-tab-image">
<div class="circle">3</div>
</div>
<div class="page-tab-content">
Complete your order
</div>
</div>
</div>
</div>
<br>
<div>
Ini konten order
</div> </div>
</div> </div>
<div class="row">
<a class="col-2 tab text-center active" href="/main/order?u=<?=$id?>">ORDER</a> <script type="text/javascript">
<a class="col-2 tab text-center" href="/main/hostory?u=<?=$id?>">HISTORY</a>
<a class="col-2 tab text-center" href="/main/profil?u=<?=$id?>">MY PROFILE</a> </script>
</div>
</div>
</body> </body>
</html> </html>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment