🧑‍💼Profile Card | html & CSS✨

#html #css #beginners #webdev

Create a 🧑‍💼Profile Card using HTML & CSS, step-by-step from scratch.

Markup

<!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="/img/Avatar.jpg" alt="">
    <h1 class="name">Sarah Smith</h1>
    <p class="country">UK</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

@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: #28223f;
  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 rgba(0,0,0,0.75);
}

.personal{
  background-color: #231e39;
  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: #1f1a36;
  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 #272240;
  padding: .4rem;
  border-radius: 0.2rem;
 margin: 0.2rem 0.1rem;
}