Profile Page Design in HTML and CSS With Source Code
Hello developers, In this article we are going to Create a Profile Page Design in HTML and CSS. This Profile Page design is a very interactive, impressive, and important project which is an Awesome profile card with detailed functionality.
What is a profile card?
Learners, let me explain what is profile card is. In our language, it could be like a visiting card that encloses only a few social links and an about section. This is not a Resume or CV but nothing smaller than that. With the help of social links, we are able to know more, because we all know nowadays social presence matters. learner, we are going to design it by ourselves, so just join me on this blog and make sure your finger is free for scrolling down.
50+ HTML, CSS & JavaScript Projects With Source Code
I hope you have got an idea about the project.
Let’s have a look at our project.
| Code by | FrankieDoodie |
| Project Download | Link Available Below |
| Language used | HTML and CSS |
| External link / Dependencies | Yes |
| Responsive | Yes |
Simple Portfolio Website Using Html And Css With Source Code
HTML Code For Profile Page Design
Here I’m not going to add a structure to the HTML file from scratch, I will just paste the body part, it is so because the body is the main part of our designing a browser.
Restaurant Website Using HTML and CSS
So, let’s count what is in the HTML part:-
- First, we have a container that will enclose all other parts of the whether project.
- Then we have 3card with similar functionality as images with content that is replicated in all three cards
Go through the below code and run it in your IDE or where you used to design just HTML without CSS styling.
<div class="container">
<div class="row">
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
<div class="our-team">
<div class="picture">
<img class="img-fluid" src="https://picsum.photos/130/130?image=1027">
</div>
<div class="team-content">
<h3 class="name">Michele Miller</h3>
<h4 class="title">Web Developer</h4>
</div>
<ul class="social">
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-facebook" aria-hidden="true"></a></li>
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-twitter" aria-hidden="true"></a></li>
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-google-plus" aria-hidden="true"></a></li>
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-linkedin" aria-hidden="true"></a></li>
</ul>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
<div class="our-team">
<div class="picture">
<img class="img-fluid" src="https://picsum.photos/130/130?image=839">
</div>
<div class="team-content">
<h3 class="name">Patricia Knott</h3>
<h4 class="title">Web Developer</h4>
</div>
<ul class="social">
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-facebook" aria-hidden="true"></a></li>
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-twitter" aria-hidden="true"></a></li>
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-google-plus" aria-hidden="true"></a></li>
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-linkedin" aria-hidden="true"></a></li>
</ul>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
<div class="our-team">
<div class="picture">
<img class="img-fluid" src="https://picsum.photos/130/130?image=856">
</div>
<div class="team-content">
<h3 class="name">Justin Ramos</h3>
<h4 class="title">Web Developer</h4>
</div>
<ul class="social">
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-facebook" aria-hidden="true"></a></li>
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-twitter" aria-hidden="true"></a></li>
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-google-plus" aria-hidden="true"></a></li>
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-linkedin" aria-hidden="true"></a></li>
</ul>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
<div class="our-team">
<div class="picture">
<img class="img-fluid" src="https://picsum.photos/130/130?image=836">
</div>
<div class="team-content">
<h3 class="name">Mary Huntley</h3>
<h4 class="title">Web Developer</h4>
</div>
<ul class="social">
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-facebook" aria-hidden="true"></a></li>
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-twitter" aria-hidden="true"></a></li>
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-google-plus" aria-hidden="true"></a></li>
<li><a href="https://codepen.io/collection/XdWJOQ/" class="fa fa-linkedin" aria-hidden="true"></a></li>
</ul>
</div>
</div>
</div>
</div>CSS Code For Profile Page Design
The Below code will analyze you more. So just add in your HTML half-complete file and wait to watch some magic.
body {
font-family: tahoma;
height: 100vh;
background-image: url(https://picsum.photos/g/3000/2000);
background-size: cover;
background-position: center;
display: flex;
align-items: center;
}
.our-team {
padding: 30px 0 40px;
margin-bottom: 30px;
background-color: #f7f5ec;
text-align: center;
overflow: hidden;
position: relative;
}
.our-team .picture {
display: inline-block;
height: 130px;
width: 130px;
margin-bottom: 50px;
z-index: 1;
position: relative;
}
.our-team .picture::before {
content: "";
width: 100%;
height: 0;
border-radius: 50%;
background-color: #1369ce;
position: absolute;
bottom: 135%;
right: 0;
left: 0;
opacity: 0.9;
transform: scale(3);
transition: all 0.3s linear 0s;
}
.our-team:hover .picture::before {
height: 100%;
}
.our-team .picture::after {
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #1369ce;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.our-team .picture img {
width: 100%;
height: auto;
border-radius: 50%;
transform: scale(1);
transition: all 0.9s ease 0s;
}
.our-team:hover .picture img {
box-shadow: 0 0 0 14px #f7f5ec;
transform: scale(0.7);
}
.our-team .title {
display: block;
font-size: 15px;
color: #4e5052;
text-transform: capitalize;
}
.our-team .social {
width: 100%;
padding: 0;
margin: 0;
background-color: #1369ce;
position: absolute;
bottom: -100px;
left: 0;
transition: all 0.5s ease 0s;
}
.our-team:hover .social {
bottom: 0;
}
.our-team .social li {
display: inline-block;
}
.our-team .social li a {
display: block;
padding: 10px;
font-size: 17px;
color: white;
transition: all 0.3s ease 0s;
text-decoration: none;
}
.our-team .social li a:hover {
color: #1369ce;
background-color: #f7f5ec;
}
Through this blog, We have learned how we can design an Awesome profile card, Now I’m looking for your reviews.
So, How was the blog, Learners?
Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
If you want a more crisp blog like this then please check our Blog sites CodewithRandom. keep tuned with us because every day you will learn something new here.
I hope that I’m able to make you understand this topic and you have learned something new from this blog. If you faced any difficulty feel free to drop a comment down your problems and if you liked it, please show your love in the comment section. This fills bloggers’ hearts with enthusiasm for writing more new blogs.
You can follow me on Instagram
Written by @Ankit Kumar
Code by @FrankieDoodie
SOME FAQS RELATED TO” profile page using html and css”
Which code editor do you use for this Profile Card coding?
I personally recommend using VS Code Studio, it’s straightforward and easy to use.
is this project responsive or not?
Yes! this is a responsive project
Do you use any external links to create this project?
Yes!
