Hello Viewers, today in this post, you’ll learn How To Make Profile Card Using HTML and CSS.
This Post is about making a Profile Card using only HTML & CSS.
To create this project ( Profile card using only HTML & CSS). First, you need to create two Files one HTML File and another one is CSS File.
First, create an HTML file with the name of index.html and paste the given code in your HTML file.
<!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>Product Card UI - AMIT TUTORIAL</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="card">
<figure>
<img src="/images/t-shirt.jpg" alt="">
</figure>
<section class="details">
<div class="min-details">
<h1>AELOMART <span>Men's Cotton Full Sleeve T Shirt</span></h1>
<h1 class="price">RS. 499</h1>
</div>
<div class="options">
<div class="options-size">
<h1>sizes</h1>
<ul>
<li>xs</li>
<li>s</li>
<li>m</li>
<li>l</li>
<li>xl</li>
</ul>
</div>
<div class="options-colors">
<h1>colors</h1>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<a href="#" class="btn">add to cart</a>
</section>
</div>
</body>
</html>
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body{
display: flex;
align-items: center;
min-height: 100vh;
justify-content: center;
font-family: sans-serif;
background-color: #fff;
}
h1{
font-size: 1.2rem;
text-transform: capitalize;
}
.card{
position: relative;
border-radius: 5px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
height: 500px;
overflow: hidden;
width: 400px;
}
.card > figure{
width: 90%;
margin: 20px auto 0 auto;
}
.card > figure > img{
width: 100%;
}
.details{
background-color: #fff;
border-radius: 10px;
padding: 20px;
position: absolute;
top: 85%;
width: 100%;
transition: box-shadow .3s ease-in-out,
top .3s ease-in-out;
}
.card:hover .details{
box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.3);
top: 40%;
}
.details > .min-details,
.details > .options,
.details > .options > .options-size,
.details>.options>.options-colors{
margin-bottom: 20px;
}
.details > .min-details{
display: flex;
justify-content: space-between;
}
.details > .min-details >h1>span{
color: #7b7b7b;
display: block;
font-size: .9rem;
font-weight: 400;
}
.details > .options h1{
margin-bottom: 5px;
}
.details> .options ul{
list-style-type: none;
display: flex;
}
.details> .options ul li{
border-radius: 50%;
cursor: pointer;
height: 30px;
line-height: 30px;
margin-right: 5px;
text-align: center;
width: 30px;
}
.options-size > ul > li{
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: .7rem;
font-weight: 900;
text-transform: uppercase;
transition: background-color .3s ease-in-out;
}
.options-size > ul > li:hover{
background-color: #192a56;
}
.options-size > ul > li{
border: none;
}
.options-colors > ul > li:nth-child(1){
background-color: #ff1;
}
.options-colors > ul > li:nth-child(2){
background-color: #000;
}
.options-colors > ul > li:nth-child(3){
background-color: #fb0000;
}
.options-colors > ul > li:nth-child(4){
background-color: #ff69b4;
}
.options-colors > ul > li:nth-child(5){
background-color: #192a56;
}
.btn{
background-color: #192a56;
border-radius: 5px;
display: block;
color: #fff;
padding: 10px;
text-align: center;
text-decoration: none;
text-transform: capitalize;
width: 100%;
transition: box-shadow .3s ease-in-out,
transform .3s ease-in-out;
}
.btn:hover{
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
transform: translateY(-2px);
}
That’s all in this post, you’ve successfully created Profile card using only HTML. If your code does not work or you’ve faced any problem then comment down your problem.
If you’re feeling difficult to understand what I am saying in this post. You can watch a full video tutorial on this project(How To Make Profile Card Using HTML and CSS).
Download Source Code:
