Hello Friends, today in this blog you’ll learn how to create CSS profile card UI design using only HTML & CSS3.
Creating CSS Cards is a great practice to improve your skills because when creating CSS cards you’ve to use some of the main parts of CSS like CSS Positioning, Flexbox or Grid, Layout design and some more…So if you’re a beginner then make sure to create these type of amazing CSS cards to level up your HTML & CSS skills.
Video Tutorial of CSS Card UI Design
In the video you’ve seen that we create a beautiful CSS Profile card using simple CSS. Even if you’re a beginner and don’t know so much CSS then after watching our tutorial you can easily create these type of CSS cards.
So, enjoy the tutorial & learn something new today 🙂
CSS Profile Card UI Design [ SOURCE CODE ]
First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
<html>
<head>
<title> Profile Card Hover Effect </title>
</head>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div class="container">
<div class="card">
<div class="top"></div>
<div class="image">
<img src="1.png">
</div>
<div class="text">
<h3>Coding Master</h3>
<p>Web Developer</p>
</div>
<div class="follow">
<h2 class="heading1">165K</h2>
<h2 class="heading2">0</h2>
</div>
<div class="para">
<p class="p1">Followers</p>
<p class="p2">Following</p>
</div>
<button class="push">
<span class="btn">Follow Us</span>
</button>
</div>
</div>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
body {
margin: 0;
padding: 0;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: sans-serif;
background: #fff;
display: flex;
}
.container {
width: 1200px;
display: grid;
}
.container .card {
position: relative;
width: 370px;
height: 470px;
margin: 0 auto;
background: #fff;
border-radius: 30px;
box-shadow: 2px 3px 35px -7px rgba(0,0,0,.52);
}
.card .top {
width: auto;
height: 80px;
background-color: #51c2d5;
position: relative;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}
.image {
width: 90px;
height: 90px;
border-radius: 50%;
background-color: #fff;
margin-left: 140px;
margin-top: -40px;
position: relative;
box-shadow: 2px 3px 35px -7px rgba(0,0,0,.52);
}
img {
width: 80px;
height: 80px;
margin-left: 5px;
margin-top: 5px;
}
.text {
text-align: center;
font-family: sans-serif;
}
h3 {
text-transform: uppercase;
font-size: 23px;
color: #51c2d5;
font-weight: 800;
}
p {
font-size: 17px;
margin-top: -15px;
color: #5b5b5b;
font-weight: 600;
}
.follow {
margin: 35px 35px 20px 35px;
}
.follow h2 {
display: inline;
font-family: sans-serif;
color: #5b5b5b;
font-size: 35px;
text-align: center;
}
.heading1 {
margin: 21px;
}
.heading2 {
margin: 70px 1px 10px 83px;
padding: 1px;
}
.para {
margin: 5px;
}
.para p {
display: inline;
text-transform: uppercase;
font-weight: 800;
font-family: sans-serif;
color: #51c2d5;
font-size: 18px;
}
.p1 {
margin: 2px;
padding: 33px;
}
.push {
background: #51c2d5;
border-radius: 12px;
border: none;
margin: 50px auto 50px 80px;
text-align: center;
outline: none;
padding: 0;
cursor: pointer;
outline-offset: 5px;
}
.btn {
display: block;
padding: 12px 42px;
border-radius: 12px;
font-size: 1.2rem;
background: #8ad9e7;
color: #3d3b3b;
border: none;
outline: none;
text-transform: uppercase;
font-weight: 800;
transform: translateY(-6px);
}
.push:active .btn {
border: none;
outline: none;
transform: translateY(-2px);
}SUBSCRIBE TO OUR YOUTUBE CHANNEL FOR MORE SUCH AMAZING TUTORIALS !!!
- 7 JavaScript Tips and Tricks you must Know! - October 18, 2022
- How to Manage State with Zustand in React - October 13, 2022
- CSS Image Gradient Hover Effect - August 28, 2021
0 Comments