Student ID Card Student Card is the interesting Project for a beginners in CSS. Using HTMl and CSS Learn create the best UI/UX Design. Through this you will learn flexbox, position and styling.
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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="card">
<div class="title">
<h1>St.Xavier's Deonia</h1>
<p>Birtamode 8 Jhapa, Nepal</p>
</div>
<div class="image">
<div class="outer">
<div class="inner">
<img src="https://s3.amazonaws.com/media.egl.ame/5903_business_formalt.jpg" alt="">
</div>
</div>
</div>
<div class="name">
John Edgar
</div>
<div class="details">
<div class="col">
<ul type="none">
<li>Class : XII</li>
<li>Faculty : Science</li>
<li>Roll No : 702</li>
<li>Reg. No : SA008702</li>
<li>Contact No : 987654321</li>
</ul>
</div>
<div class="col">
<img src="school-logo.png" alt="">
</div>
</div>
</div>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
body{
background-color:#16213E;
}
.container{
display: flex;
justify-content: center;
align-items: center;
height:100vh;
}
.card{
width:400px;
height:500px;
border-radius:12px;
background-color:#0F3460;
padding-top:2%;
overflow: hidden;
cursor: pointer;
}
.card .title h1{
font-family:Gilroy;
color:white;
font-size:2rem;
text-align:center;
padding:2%;
}
.card .title p{
font-family:Open Sans;
color:white;
text-align: center;
}
.card .image{
display: flex;
justify-content: center;
margin-top:5%;
align-items: center;
}
.card .image .outer{
background-color:#E94560;
height:140px;
width:140px;
border-radius:50%;
display: flex;
justify-content: center;
align-items: center;
}
.card .image .inner{
height:120px;
width:120px;
overflow:hidden;
border-radius:50%;
}
.card .image .inner img{
width:100%;
}
.card .name{
color:white;
text-align: center;
font-family:Gilroy;
font-size:1.5rem;
font-weight:bold;
margin-top:2%;
}
.card .details{
background-color:#E94560;
height:28%;
margin-top:10%;
border-top-left-radius:75px;
padding:7%;
color:white;
font-family:Open Sans;
display: flex;
align-items: center;
justify-content: center;
border-top:5px solid white;
}
.card .details .col{
width:50%;
}
.card .details .col img{
width:50%;
}
.card .details .col:last-child{
display: flex;
justify-content: center;
align-items: center;
}
.card .details li{
margin-top:2%;
font-size:0.9rem;
}