Cookies Consent

This website uses cookies to ensure you get the best experience on our website.

Learn More
Home
css
frontend

Profile Card Using HTML & CSS

3 min read

 



How to create a profile card using HTML and CSS

Hello Everyone 👋 Welcome to My New Blog. Today we'll create a profile card using HTML and CSS only. 😍

I am Aaditya, sharing interesting projects and codes daily. You can follow me up on my Instagram handle @_foxstack_

Where can we use it?

This profile card can be used in the Portfolio website or on any website where one user is interested in seeing the profile of another user.


Preview of Project:



Now let's proceed towards development of the project. You can open the project in codepen also.


HTML (index.html):


 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Profile Card | HTML CSS</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
</head>

<body>

  <section>

    <div class="personal">
      <span class="pro">Pro</span>
      <img src="https://media.istockphoto.com/photos/portrait-of-adorable-young-happy-boy-picture-id158879321?k=20&m=158879321&s=612x612&w=0&h=mW2I6tRWButtAx2FcxDKcRQFJMT8Lx32LubLUcYm6o0=" alt="">
      <h1 class="name">Your Name</h1>
      <p class="country">IND</p>
      <p class="stack">Full Stack Developer</p>
      <button class="primary">Message</button>
      <button class="secondary">Following</button>

      <div class="social">
        <a href="#"><i class="fa-brands fa-linkedin-in"></i></a>
        <a href="#"><i class="fa-brands fa-twitter"></i></a>
        <a href="#"><i class="fa-brands fa-instagram"></i></a>
        <a href="#"><i class="fa-brands fa-github"></i></a>
        <a href="#"><i class="fa-brands fa-youtube"></i></a>
      </div>

    </div>

    <div class="skills">
      <h2>Skills</h2>
      <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>React</li>
        <li>NodeJS</li>
        <li>Express</li>
        <li>Mongodb</li>
      </ul>
    </div>

  </section>

</body>

</html>


CSS (style.css):



  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap');

*{
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body{
  font: 'Poppins', sans-serif;
  background-color: black;
  display: flex;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
  min-height: 100vh;
  color: #b3b8cd;
}

section{
  width: 30rem;
  position: absolute;
  box-shadow: 2px 10px 20px -10px rgb(89, 89, 89,0.75);
}

.personal{
  background-color: #262626;
  padding: 2.5rem 0 1.5rem 0;
  text-align: center;
}

.personal .name{
  margin-top: 1.3rem;
}

.personal .country{
  font-size: 1.3rem;
  margin: 0.2rem;
}

.personal .stack{
  font-size: 1.6rem;
  margin-top: 1.5rem;
}

.personal button{
  border: 1px solid #03bfcb;
  padding: 0.8rem 1.8rem;
  border-radius: 0.3rem;
  font-size: 1.3rem;
  cursor: pointer;
  margin: 0.5rem;
}

.personal button.primary{
  background-color: #03bfcb;
  color: #231e39;
}

.personal button.secondary{
  background-color: transparent;
  color: #02899c;
}

.personal .pro{
  background-color: #febb0b;
  color: #231e39;
  border-radius: 0.2rem;
  font-size: 1.4rem;
  padding: 0.1rem 0.8rem;
  position: absolute;
  top: 1rem;
  left: 2rem;
}

.personal img{
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  border: 0.2rem solid #03bfcb;
}

.social i{
  font-size: 1.8rem;
  margin: 1rem 0.4rem;
  color: #b3b8cd;
  transition: color 0.5s
}

.fa-linkedin-in:hover{
  color: #0a66c2;
}

.fa-twitter:hover{
  color: #1da1f2;
}

.fa-instagram:hover{
  color: #c32aa3;
}

.fa-github:hover{
  color: #171515;
}

.fa-youtube:hover{
  color: #ff0000;
}



.skills{
  background-color: 	#0d0d0d;
  padding: 1.6rem 1rem;
}

.skills h2{
  text-transform: uppercase;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.skills ul li{
  display: inline-block;
  list-style-type: none;
  font-size: 1.2rem;
  border: 2px solid black;
  padding: .4rem;
  border-radius: 0.2rem;
 margin: 0.2rem 0.1rem;
}
Labels : #css ,#frontend ,#html ,#web dev ,

Post a Comment