Hello Dear Friends, Today In this Post, You will learn How to create a Responsive Profile Card UI Design Using HTML & CSS. Earlier I have shared a Create Social Media Buttons Hover Effect Only HTML CSS. and now it’s time for Responsive Profile Card UI Design.

Are you looking for an HTML, CSS profile card design, If yes then in this post I am going to share a hand-picked CSS Profile Card Design for you? You can use these HTML, CSS Profile Card Design in your next web-based projects.

In this tutorial, we will take a look at how to create a responsive profile card for a website with seeing less, using HTML CSS. this profile page can be used for social websites, e-commerce websites, or any other website with a profile page needed. This is a cool way to embed your profile on websites.

This card may mostly be used for music and entertainment blogger’s as they can show their tweets, followers, and follow on their blog. This Twitter profile card is built using CSS and HTML code. You just need to change the profile pic, the total number of tweets, followers, and following in the HTML code, This is a simple version 1 twitter card.

In this project, we are going to create a Profile card using HTML, and CSS only. We will create the Twitter Profile card screen and Twitter wall, where you can show your name and profile details also retweet and like the tweets. However, since we are not using any server and database, nothing will persist. As soon as you reload the page, everything will be lost.

The main purpose of this article is to show you how to create a front end using client-side scripting. We will use only HTML & CSS to create our project. Let’s get started.

User profile design example using HTML and CSS. this is the user profile best design. sample user profile page design. design user profile page HTML CSS. user profile web design inspiration. user profile page UI design. in this profile design we are display images, names, addresses, send messages button, social media icons, emails, mobile no, and three different tab lines basic detail, educational detail, and portfolio.

Play Video

We allow you to free snippets of user profile UI design, you can download the full code of user profile page design template layout. Here in this post, I will give you an example of a profile page design HTML CSS snippet and you will get simple code of HTML, CSS.

In the user profile page design code snippet, I give you three tab with HTML, CSS, you can easily get code of user profile page design. A Profile Card shows the success of a site’s People ability’s and the statement that comments on how good someone or something is.

Profile Card help to convince interested users that you’re worth their trust. By strategically website testimonials are placing on a dedicated ‘Testimonials’ page. there is one box or card on the webpage there is a quote, name, job, and stars rating of that person.

This Card section is fully responsive to any devices like mobiles and tablets. On the PC, these boxes are shown in a horizontal line but on mobile devices, these boxes are shown vertically.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program. In the video, you have seen the Profile Card and I hope you’ve understood the basic codes behind creating this program.

As you know, this is a pure CSS program that means only HTML & CSS are used to create this program. If you’re a beginner, you can also create this type of Profile Card bo. To make this section or boxes responsive I used CSS flexbox and @media properties.

If you like this program, and you want to use this on your websites, projects, and wherever you want then you have to do some basic changes on codes according to your website layout or this is enough good for you and you don’t need to change then you don’t need to change anything.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Responsive Profile Card UI Design using HTML5 | CSS3</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <input id="slider" class="customSlider" type="checkbox">
    <label for="slider"></label> 
    <div class="wrapper">
        <div class="top-icons">
            <i class="fas fa-long-arrow-alt-left"></i>
            <i class="fas fa-ellipsis-v"></i>
            <i class="far fa-heart"></i>
        </div>
    
        <div class="profile">
            <img decoding="async" src="images/p-1.jpg" class="thumbnail">
            <div class="check"><i class="fas fa-check"></i></div>
            <h3 class="name">Hannah Roy</h3>
            <p class="title">Front-End Developer</p>
            <p class="description">A front-end web developer is responsible for implementing visual elements that users.</p>
            <button type="button" class="btn">Hire Me</button>
        </div>
    
        <div class="social-icons">
            <div class="icon">
                <a href="/"><i class="fab fa-instagram"></i></a>
                <h4>98.5k</h4>
                <p>Followers</p>
            </div>
    
            <div class="icon">
                <a href="#"><i class="fab fa-facebook-f"></i></a>
                <h4>44.5k</h4>
                <p>Followers</p>
            </div>
    
            <div class="icon">
                <a href="#"><i class="fab fa-youtube"></i></a>
                <h4>100k</h4>
                <p>Followers</p>
            </div>
        </div>
    </div>

</body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
} 
body {
  width: 100%;
  height: 100vh;
  display: -webkit-box;
  display: flex;
  position: relative;
  background: #eeeeec;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-pack: center;
          justify-content: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 100%;
}

.customSlider {
  opacity: 0;
  display: none;
}
.customSlider + label {
  position: relative;
  top: 35px;
  left: 15px;
  cursor: pointer;
}
.customSlider + label:before, 
.customSlider + label:after {
  background: #FFFFFF;
  position: absolute;
  content: '';
}
.customSlider + label:before {
  top: -90px;
  left: -60px;
  width: 80px;
  height: 40px;
  background: #ccc;
  border-radius: 20px;
  -webkit-transition: background .75s;
  transition: background .75s;
}
.customSlider + label:after {
  height: 34px;
  width: 34px;
  top: -87px;
  left: -55px;
  border-radius: 50%;
  -webkit-transition: all .5s;
  transition: all .5s;
}
.customSlider:checked + label:after {
  height: 34px;
  width: 34px;
  top: -87px;
  left: -19px;
  border-radius: 50%;
}
.customSlider:checked ~ .wrapper {
  color: #fff;
  -webkit-transition: background .6s ease;
  transition: background .6s ease;
  background: #31394D;
}
.customSlider:checked ~ .wrapper .top-icons i {
  color: #fff;
}
.customSlider:checked ~ .wrapper .user .name {
  color: #FDFEFF;
}
.customSlider:checked ~ .wrapper .user .title {
  color: #7C8097;
}
.customSlider:checked ~ .wrapper .user .description {
  color: #FDFEFF;
}
.customSlider:checked ~ .wrapper .icon h4 {
  color: #FFFFFF;
}
.customSlider:checked ~ .wrapper .icon p {
  color: #666B7D;
}

.wrapper {
  width: 320px;
  height: 540px;
  background: #FDFEFF;
  -webkit-transition: background .6s ease;
  transition: background .6s ease;
  border-radius: 10px;
  padding: 20px 20px 20px 20px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
}
.wrapper .top-icons i {
  color: #080911;
}
.wrapper .top-icons i:nth-of-type(1) {
  float: left;
}
.wrapper .top-icons i:nth-of-type(2) {
  float: right;
}
.wrapper .top-icons i:nth-of-type(3) {
  float: right;
  padding-right: .8em;
}
.wrapper .user {
  margin-top: 2.2em;
  position: relative;
}
.wrapper .user:after {
  width: 100%;
  height: 1px;
  content: ' ';
  display: block;
  margin-top: 1.3em;
  background: #E9EFF6;
}
.wrapper .user .check {
  position: absolute;
  right: 5em;
  bottom: 12.7em;
}
.wrapper .user .check i {
  color: #fff;
  width: 20px;
  height: 20px;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  border-radius: 100%;
  background: -webkit-gradient(linear, left top, right bottom, from(#6452E9), to(#639FF9));
background: linear-gradient(to bottom right, #6452E9, #639FF9);
}
.wrapper .user .thumbnail {
  width: 124px;
  height: 124px;
  display: -webkit-box;
  display: flex;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5em;
  border-radius: 100%;
  box-shadow: 0 13px 26px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.2);
}
.wrapper .user .name {
  color: #2D354A;
  font-size: 24px;
  font-weight: 600;
  text-align: center;
}
.wrapper .user .title {
  color: #7C8097;
  font-size: .75em;
  font-weight: 300;
  text-align: center;
  padding-top: .5em;
  padding-bottom: .7em;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.wrapper .user .description {
  color: #080911;
  font-size: 14px;
  font-weight: 300;
  text-align: center;
  margin-bottom: 1.3em;
}
.wrapper .user .btn {
  color: #fff;
  width: 130px;
  height: 42px;
  outline: none;
  border: none;
  display: block;
  cursor: pointer;
  font-weight: 300;
  margin-left: auto;
  margin-right: auto;
  border-radius: 70px;
  box-shadow: 0 13px 26px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.16);
  background: -webkit-gradient(linear, left top, right bottom, from(#6452E9), to(#639FF9));
    background: linear-gradient(to bottom right, #6452E9, #639FF9);
}
.wrapper .social-icons {
  display: -webkit-box;
  display: flex;
  margin-top: 1.2em;
  -webkit-box-pack: justify;
          justify-content: space-between;
}
.wrapper .social-icons .icon {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
}
.wrapper .social-icons .icon a {
  color: #fff;
  width: 60px;
  height: 60px;
  font-size: 28px;
  line-height: 60px;
  text-align: center;
  border-radius: 30px;
  box-shadow: 0 13px 26px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.2);
}
.wrapper .social-icons .icon:nth-of-type(1) a {
  background: -webkit-gradient(linear, left top, right bottom, from(#C90A6D), to(#FF48A0));
  background: linear-gradient(to bottom right, #C90A6D, #FF48A0);
}
.wrapper .social-icons .icon:nth-of-type(2) a {
  background: -webkit-gradient(linear, left top, right bottom, from(#5E5AEC), to(#3F9EFC));
  background: linear-gradient(to bottom right, #5E5AEC, #3F9EFC);
}
.wrapper .social-icons .icon:nth-of-type(3) a {
  background: #f85032;
  background: -webkit-linear-gradient(to right, #e73827, #f85032);  
  background: linear-gradient(to right, #e73827, #f85032);
}
.wrapper .social-icons .icon h4 {
  color: #080911;
  font-size: 1em;
  margin-top: 1.3em;
  margin-bottom: .2em;
}
.wrapper .social-icons .icon p {
  color: #666B7D;
  font-size: 12px;
}

Responsive Profile Card UI Design Using HTML & CSS.

HTML

CSS

Leave a Reply Cancel reply

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-3)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-2)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-1)

How To Make Form Validation Using JavaScript

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-3)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-2)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-1)

How To Make Form Validation Using JavaScript