New Web Design ~ In this project, we will build Order List Web Design Using HTML & CSS only. You Will Learn Many Things through this project web project:
- a web browser
- a text editor
- a desire to build things
Prerequisite: Basic knowledge of some front-end technologies like HTML, CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Order List</title>
<!-- fonts -->
<link href="https://fonts.googleapis.com/css2?family=DM+Sans&family=Poppins:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="order-list-container">
<ul>
<li>
<div class="detail">
<span class="price">$500</span>
<span class="delivery-detail">By Adam. Delivery by Jul 29, 2023</span>
</div>
<div class="status success">Accepted</div>
</li>
<li>
<div class="detail">
<span class="price">$300</span>
<span class="delivery-detail">By Ram. Delivery by May 5, 2023</span>
</div>
<div class="status unsuccess">Rejected</div>
</li>
<li>
<div class="detail">
<span class="price">$600</span>
<span class="delivery-detail">By Hari. No Delivery date set</span>
</div>
<div class="status"></div>
</li>
<li>
<div class="detail">
<span class="price">$300</span>
<span class="delivery-detail">By Ram. Delivery by May 5, 2023</span>
</div>
<div class="status unsuccess">Rejected</div>
</li>
<li>
<div class="detail">
<span class="price">$450</span>
<span class="delivery-detail">By James. Delivery by June 12, 2023</span>
</div>
<div class="status success">Accepted</div>
</li>
</ul>
</div>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
.container{
display: flex;
justify-content: center;
align-items: center;
height:100vh;
}
.order-list-container{
height:500px;
width:450px;
box-shadow:0px 0px 3px 0.5px rgb(0,0,0,0.16);
overflow: hidden;
}
.order-list-container ul{
height:100%;
}
.order-list-container ul li{
list-style:none;
height:calc(100%/5);
border-bottom:1.5px solid rgb(236, 236, 236);
padding:5%;
box-sizing: border-box;
display: flex;
justify-content:space-between;
align-items: center;
}
.order-list-container ul li span{
display: block;
font-family:poppins;
}
.order-list-container ul li .price{
font-size:1.3rem;
font-weight:bolder;
color:#5146e5;
}
.order-list-container ul li .delivery-detail{
color:#707985;
font-size:0.9rem;
}
.order-list-container ul li .status{
padding:2%;
box-sizing: border-box;
font-family:dm sans;
font-size:0.9rem;
font-weight:bolder;
border-radius:65px;
}
.order-list-container ul li .success{
background-color:#d1fae5;
color:#1c6e55;
}
.order-list-container ul li .unsuccess{
background-color:#fddede;
color:#991b1b;
}