loading...
Cover image for Make Profile Card With Dark Mode Using HTML and CSS

Make Profile Card With Dark Mode Using HTML and CSS

backlinkn profile image backlinkn ・6 min read

In this article, I will tell you how to create a profile card using only HTML and CSS code. A profile card is basically a form where you can organize all your personal information. For example, if you are an engineer or a developer, you can use a profile card if you want to show your customer all the information about you, your experience, your knowledge, etc. Here you can basically arrange your name, your picture, some information about you, links to your social media account, etc., very nicely arranged here. I basically came up with an awesome profile work design here which is made up of two themes. In this case, you can use two types of themes Dark and Light using a switch.

Alt Text





Some information about this profile card

  • I made it using two types of themes which are very beautiful and professional.
  • I only used HTML and CSS programming code to make it. As a result, you can easily understand and add to your own project.
  • In this profile card, you can share all the information about yourself such as pictures, names, descriptions, links to social media platforms, and much more.

Hope you like this design and you are totally interested in making it.

You can watch the live demo of this card by clicking on the demo button above. You can also download all the required source code for free by clicking on the download button.

Make this card by following the procedure below

Hopefully, you can learn how to make it from the tutorial below. And this tutorial will teach you how to make this profile card completely.

create top icons

The following codes have been used to create top icons. As you can see in the demo above I have used some icons above. I have used the following code to create those icons.

<div class="top-icons">
        <i class="fa fa-long-arrow-alt-left"></i>
        <i class="fa fa-ellipsis-v"></i>
        <i class="fa fa-heart"></i>
    </div>
Enter fullscreen mode Exit fullscreen mode
.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;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

Add pictures, names, descriptions

The following codes are mainly used to give pictures, names, descriptions on the profile card. Here are the two types of code HTML and CSS. Also, a button below has been used. The following codes have helped to use this button.

<div class="profile">
        <img src="https://images.unsplash.com/photo-1484186139897-d5fc6b908812?ixlib=rb-0.3.5&s=9358d797b2e1370884aa51b0ab94f706&auto=format&fit=crop&w=200&q=80%20500w" class="thumbnail">
        <div class="check"><i class="fas fa-check"></i></div>
        <h3 class="name">Beverly Little</h3>
        <p class="title">Javascript Developer</p>
        <p class="description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque aliquam aliquid porro!</p>
        <button type="button" class="btn">Hire Me</button>
    </div>
Enter fullscreen mode Exit fullscreen mode
.wrapper .profile {
  margin-top: 2.2em;
  position: relative;
}
.wrapper .profile:after {
  width: 100%;
  height: 1px;
  content: ' ';
  display: block;
  margin-top: 1.3em;
  background: #E9EFF6;
}
.wrapper .profile .check {
  position: absolute;
  right: 5em;
  bottom: 12.7em;
}                                                                                                                     /*wrapper .profile .description {color: #080911;font-size: 14px;font-weight: 300;text-align: centermargin-bottom: 1.3em;.wrapper .profile .btn {color: #ff;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(#C90A6D), to(#FF48A0));background: linear-gradient(to bottom right, #C90A6D, #FF48A0)}*/
.wrapper .profile .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(#C90A6D), to(#FF48A0));
  background: linear-gradient(to bottom right, #C90A6D, #FF48A0);
}
.wrapper .profile .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 .profile .name {
  color: #2D354A;
  font-size: 24px;
  font-weight: 600;
  text-align: center;
}                                                                                                                     /*wrapper .profile .description {color: #080911;font-size: 14px;font-weight: 300;text-align: centermargin-bottom: 1.3em;.wrapper .profile .btn {color: #ff;width: 130px;height: 42px;outline: none;border: none;display: block;cursor: pointer;font-weigh ttom, from(#C90A6D), to(#FF48A0));background: linear-gradient(to bottom right, #C90A6D, #FF48A0)}*/
.wrapper .profile .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 .profile .description {
  color: #080911;
  font-size: 14px;
  font-weight: 300;
  text-align: center;
  margin-bottom: 1.3em;
}
.wrapper .profile .btn {
  color: #fff;
  width: 130px;
  height: 42px;
  outline: none;
  border: none;
  display: block;
  cursor: pointer;
  font-weight: 300;
  margin-left: auto;
  margin-right: auto;                                                                                                                     /* -align: centermargin-bottom: 1.3em;.wrapper .profile .btn {color: #ff;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(#C90A6D), to(#FF48A0));background: linear-gradient(to bottom right, #C90A6D, #FF48A0)}*/
  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(#C90A6D), to(#FF48A0));
  background: linear-gradient(to bottom right, #C90A6D, #FF48A0);
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

Add social media platforms

The following codes are social media platforms and have been used to provide all the information on that platform. I have basically given here the name of social media and the opportunity to show how many followers there are on social media. You can add links to your social media here.

<div class="social-icons">
        <div class="icon">
            <a href="/"><i class="fa  fa-dribbble"></i></a>
            <h4>12.8k</h4>
            <p>Followers</p>
        </div>

        <div class="icon">
            <a href="#"><i class="fa  fa-behance"></i></a>
            <h4>12.8k</h4>
            <p>Followers</p>
        </div>

        <div class="icon">
            <a href="#"><i class="fa fa-twitter"></i></a>
            <h4>12.8k</h4>
            <p>Followers</p>
        </div>
    </div>
Enter fullscreen mode Exit fullscreen mode
.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 .profile .description {color: #080911;font-size: 14px;font-weight: 300;text-align: centermargin-bottom: 1.3em;.wrapper .profile .btn {color: #ff;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(#C90A6D), to(#FF48A0));background: linear-gradient(to bottom right, #C90A6D, #FF48A0)}*/
.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: -webkit-gradient(linear, left top, right bottom, from(#6452E9), to(#639FF9));
  background: linear-gradient(to bottom right, #6452E9, #639FF9);
}                                                                                                                     /* profile .btn {color: #ff;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(#C90A6D), to(#FF48A0));background: linear-gradient(to bottom right, #C90A6D, #FF48A0)}*/
.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;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

Hope you understand the above code and know how I made it. If you have any problem in making this profile card, you can definitely let me know by commenting. I will help you completely.

            If you like this profile card, you must like it.
Enter fullscreen mode Exit fullscreen mode

Discussion

pic
Editor guide