Startup - Amazing Profile Card UI Design Using Only HTML and CSS.zip
400kb
<!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 =======================-->
<title>Abhishek Raj</title>
<!--=================== Favicon =====================-->
<link rel="shortcut icon" href="/Abhishek_Raj.png" type="image/x-icon" />
<!--=================== CSS =========================-->
<link rel="stylesheet" href="/style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
/>
</head>
<body>
<!--=================== CARD ========================-->
<div class="card">
<!--=================== IMG =====================-->
<img src="/Abhishek_Raj.png" alt="" />
<!--=================== TITLE ===================-->
<h1>Abhishek Raj</h1>
<div class="title">Student</div>
<!--=================== SOCIAL ICON =============-->
<div class="icon">
<a href=""><i class="fa-brands fa-youtube"></i></a>
<a href=""><i class="fa-brands fa-facebook"></i></a>
<a href=""><i class="fa-brands fa-instagram"></i></a>
<a href=""><i class="fa-solid fa-envelope"></i></a>
<a href=""><i class="fa-solid fa-globe"></i></a>
</div>
<!--=================== BUTTON ==================-->
<div class="button">Contact</div>
</div>
</body>
</html>
/*====================== BODY ============================*/
body {
background-color: #e7e9eb;
text-align: center;
}
/*====================== CARD ============================*/
.card {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 360px;
background-color: white;
box-shadow: 4px 4px 2px #a6a6a7;
}
/*====================== IMG =============================*/
.card img {
width: 100%;
background-color: black;
}
/*====================== TITLE ===========================*/
.card h1:hover {
color: red;
}
.card .title {
color: grey;
font-size: 18px;
}
.card .title:hover {
color: blue;
}
/*====================== SOCIAL ICON =====================*/
.card .icon {
margin: 24px 0;
font-size: 24px;
}
.card .icon a {
text-decoration: none;
color: black;
padding: 10px;
}
.card .icon a:hover {
color: blue;
}
/*====================== BUTTON ==========================*/
.card .button {
background-color: black;
color: white;
font-size: 22px;
padding: 8px;
cursor: pointer;
}
.card .button:hover {
background-color: aqua;
color: black;
}
/*====================== MEDIA QUERIES ===================*/
@media screen and (max-width: 360px) {
.card {
width: 100%;
}
}
Startup - Amazing Profile Card UI Design Using Only HTML and CSS.zip
400kb
Final - Amazing Profile Card UI Design Using Only HTML and CSS.zip
400kb