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 Validation</title>
<link rel="shortcut icon" href="https://cdn-icons-png.flaticon.com/512/1603/1603859.png" type="image/x-icon">
<!-- linking css -->
<link rel="stylesheet" href="style.css">
<!-- fonts -->
<link href="https://fonts.googleapis.com/css2?family=DM+Sans&family=Poppins:wght@400;500&display=swap"
rel="stylesheet">
<!-- icons -->
<script src="https://kit.fontawesome.com/04158e9780.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="validation-card">
<div class="header">
<button class="dismiss-btn"><i class="fa-regular fa-circle-xmark"></i></button>
<div class="tick-icon"><i class="fa-solid fa-check"></i></div>
<div class="title">Order validated</div>
</div>
<div class="text">Thank you for your purchase. your package will be delivered within 2 days of your purchase
</div>
<div class="buttons">
<button>History</button>
<button>Track my package</button>
</div>
</div>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
.container{
display:flex;
justify-content: center;
align-items: center;
height:100vh;
background-color:#212121;
}
.validation-card{
height:380px;
width:400px;
box-shadow:0px 0px 5px 0.3px rgb(0,0,0,0.2);
background-color:white;
border-radius:12px;
position: relative;
overflow: hidden;
padding:2%;
box-sizing: border-box;
display: flex;
justify-content:space-between;
flex-direction: column;
align-items: center;
}
.validation-card .header{
display: flex;
align-items: center;
flex-direction: column;
}
.validation-card .dismiss-btn{
position:absolute;
top:0%;
right:0%;
}
.validation-card .dismiss-btn{
background-color:transparent;
border:none;
font-size:2rem;
padding:2%;
box-sizing: border-box;
cursor: pointer;
color:grey;
}
.validation-card .tick-icon{
height:60px;
width:60px;
border-radius:50%;
display:flex;
justify-content: center;
align-items: center;
background-color:#e2feee;
font-size:1.5rem;
}
.validation-card .title{
font-family:poppins;
margin-top:4%;
font-weight:bolder;
color:#066341;
font-size:1.5rem;
}
.validation-card .text{
font-family:dm sans;
text-align: center;
font-size:1.2rem;
margin-top:2%;
}
.validation-card .buttons{
display: flex;
flex-direction: column;
width:100%;
height:113px;
justify-content:space-between;
}
.validation-card .buttons button{
height:50px;
width:100%;
font-family:dm sans;
font-size:1rem;
background-color:transparent;
border:1.5px solid grey;
border-radius:5px;
cursor: pointer;
}
.validation-card .buttons button:first-child{
border:none;
background-color:#1aa06d;
color:white;
}