Search

Create A Profile Card Design Using HTML & CSS


A profile card contains basic information about the user. It is the best way to get a summary of the user. So it's important that Profile Card is represented in a good manner.


You would always want a profile card to be shown in such a way that it tells another person all information about you.


So, here is how you can create a simple UI for Profile Card using only HTML & CSS.


The source code is given below.


HTML CODE

 <div class="card">
 <div class="card-header">
 <div class="card-cover">
 </div>
 <img class="card-avatar" src="https://www.freewalldownload.com/hd-wallpapers-download/
        ashton-kutcher-hollywood-actor-background-image-download.jpg" alt="avatar" />
 <h1 class="card-name">Walden Schmidt</h1>
 <h2 class="card-jobtitle">Web Developer</h2>
 </div>
 <div class="card-main">
 <div class="card-section">
 <div class="card-content">
 <div class="card-subtitle">ABOUT</div>
 <p class="card-desc">Prolific, full stack web developer with a passion for metrics and beating former "best-yets."
Passionate about building world class web applications.
 </p>
 </div>
 <div class="card-social">
 <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
 <a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
 <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
 <a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
 </div>
 </div>
 </div>
 </div>

CSS CODE

* {
 box-sizing: border-box;
}
body {
 color: #2b2c48;
 font-family: "Jost", sans-serif;
 background-image: url(https://images.unsplash.com/photo-1508615039623-a25605d2b022?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80);
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
 background-attachment: fixed;
 min-height: 100vh;
 display: flex;
 flex-wrap: wrap;
 padding: 20px;
}
.card {
 max-width: 340px;
 margin: auto;
 overflow-y: auto;
 position: relative;
 z-index: 1;
 overflow-x: hidden;
 background-color: rgba(255, 255, 255, 1);
 display: flex;
 transition: 0.3s;
 flex-direction: column;
 border-radius: 10px;
 box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.2);
}
.card-header {
 position: relative;
 display: flex;
 height: 200px;
 flex-shrink: 0;
 width: 100%;
 transition: 0.3s;
}

.card-cover {
 width: 100%;
 height: 100%;
 position: absolute;
 height: 160px;
 top: -20%;
 left: 0;
 will-change: top;
 background-size: cover;
 background-position: center;
 filter: blur(30px);
 transform: scale(1.2);
 transition: 0.5s;
 background-image: url(https://www.freewalldownload.com/hd-wallpapers-download/ashton-kutcher-hollywood-actor-background-image-download.jpg);
}
.card-avatar {
 width: 100px;
 height: 100px;
 box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
 border-radius: 50%;
 object-position: center;
 object-fit: cover;
 position: absolute;
 bottom: 0;
 left: 50%;
 transform: translateX(-50%) translateY(-64px);
}
.card-name {
 position: absolute;
 bottom: 0;
 font-size: 22px;
 font-weight: 700;
 text-align: center;
 white-space: nowrap;
 transform: translateY(-10px) translateX(-50%);
 left: 50%;
}
.card-jobtitle {
 position: absolute;
 bottom: 0;
 font-size: 11px;
 white-space: nowrap;
 font-weight: 500;
 opacity: 0.7;
 text-transform: uppercase;
 letter-spacing: 1.5px;
 margin: 0;
 left: 50%;
 transform: translateX(-50%) translateY(-7px);
}
.card-main {
 position: relative;
 flex: 1;
 display: flex;
 padding-top: 10px;
 flex-direction: column;
}
.card-subtitle {
 font-weight: 700;
 font-size: 13px;
 margin-bottom: 8px;
}
.card-content {
 padding: 20px;
}
.card-desc {
 line-height: 1.6;
 color: #636b6f;
 font-size: 14px;
 margin: 0;
 font-weight: 400;
 font-family: "DM Sans", sans-serif;
}
.card-social {
 display: flex;
 align-items: center;
 padding: 0 20px;
 margin-bottom: 30px;
}
.card-social a {
 color: #8797a1;
 height: 32px;
 width: 32px;
 border-radius: 50%;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 transition: 0.3s;
 background-color: rgba(93, 133, 193, 0.05);
 border-radius: 50%;
 margin-right: 10px;
}
.card-social a:hover {
 background-color: #636b6f;
}

Check out the Github repository here.


Follow on social media for regular updates.

Facebook: @webTechnologyGuide

Instagram: @web_technology_guide

Twitter: @WebTechnologyG1

LinkedIn: Web Technology Guide

12 views0 comments

Recent Posts

See All

Subscribe Form

© Web Technology Guide.