profile card using html and css

3 minute read

code 👇🏻

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/a2fa536777.js" crossorigin="anonymous"></script>
<title>Profile card</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&display=swap');
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background: #151515;
      font-family: 'Montserrat', sans-serif;
    }

/*---------------menu icon----------------*/

    .container {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 300px;
      height: 420px;
      box-shadow: 5px 5px 5px rgba(5, 5, 5, 0.8), -4px -4px 5px rgba(200, 200, 200, 0.1);
    }

    .menu-icon {
      margin: 1em 1em 0 1em;
    }

    .menu {
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      width: 2em;
      height: 2em;
    }

    .menu-icon1 {
      float: left;
      color: rgba(206, 208, 225, 0.9);
    }

    .menu-icon2 {
      float: right;
      color: rgba(206, 208, 225, 0.9);
    }

    .menu-icon::after {
      content: '';
      display: block;
      clear: both;
    }

    .menu:hover {
      box-shadow: inset 3px 3px 3px rgba(5, 5, 5, 0.8), inset -3px -3px 3px rgba(100, 100, 100, 0.2);
    }

/*--------------profile img----------------*/

    .img-box {
      display: block;
      width: 6em;
      height: 6em;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      box-shadow: inset 2px 2px 2px rgba(5, 5, 5, 0.8), inset -2px -2px 2px rgba(100, 100, 100, 0.2);
    }

    .img-box img {
      width: 5em;
      height: 5em;
      border-radius: 50%;
      box-shadow: 2px 2px 2px rgba(5, 5, 5, 0.8), -2px -2px 2px rgba(100, 100, 100, 0.2);
    }
    .name {
      text-align: center;
      letter-spacing: 0.2rem;
      font-variant: small-caps;
      font-weight: 700;
      font-size: 1.1rem;
      color: rgba(206, 208, 225, 0.8);
      margin: 0.5em 0 0.1em 0;
    }

    .profession {
      color: rgba(57, 59, 72, 0.9);
      text-align: center;
    }

    /*-----------social icons-------------*/

    .social-box {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 1em 0 0 0;
    }
    .social {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0.5em 0.6em;
      border-radius: 50%;
      color: rgba(206, 208, 225, 0.5);
      box-shadow: 2px 2px 3px rgba(5, 5, 5, 0.8), -2px -2px 3px rgba(100, 100, 100, 0.1);
      padding: 0.6em;
    }

    .social:hover {
      box-shadow: inset 2px 2px 3px rgba(5, 5, 5, 0.9), inset -2px -2px 3px rgba(100, 100, 100, 0.3);
      transform: scale(1.1);
    }
    .social:hover .facebook {
      color: blue;
    }
    .social:hover .twitter {
      color: gold;
    }
    .social:hover .telegram {
      color: cyan;
    }
    .social:hover .youtube {
      color: red;
    }


    /*-----------button container------------*/

    .btn-container {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 1.7em;
    }
    .btn {
      display: inline-block;
      padding: 0.6em 1.2em;
      text-align: center;
      letter-spacing: 0.1rem;
      color: rgba(206, 208, 225, 0.6);
      font-variant: small-caps;
      font-weight: 500;
      box-shadow: 3px 3px 5px rgba(5, 5, 5, 0.8), -3px -3px 5px rgba(100, 100, 100, 0.1);
    }
    .btn2 {
      margin-left: 1em;
    }
    .btn:hover {
      box-shadow: inset 3px 3px 5px rgba(5, 5, 5, 0.8), inset -3px -3px 5px rgba(100, 100, 100, 0.1);
    }
    .btn1:hover {
      color: deepskyblue;
    }
    .btn2:hover {
      color: crimson;
    }

    /*-----------React box--------------*/

    .react-box {
      margin-top: 1.8em;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .react {
      display: inline-block;
      margin: 0.5em 1em;
      padding: 0.3em;
    }
    .react i {
      color: rgba(206, 208, 225, 0.6);
    }
    .react span {
      margin-left: 0.3em;
      color: rgba(206, 208, 225, 0.6);
    }
    .react:hover .fa-heart{
      color: red;
    }
    .react:hover .fa-comment {
      color: gold;
    }
    .react:hover .fa-share {
      color: blue;
    }

</style>

<body>
<div class="container">
    
    <div class="menu-icon">
      <div class="menu menu-icon1">
        <i class="fa-sharp fa-solid fa-arrow-left "></i>
      </div>
      <div class=" menu menu-icon2">
        <i class="fa-solid fa-ellipsis-vertical"></i>
      </div>
    </div>

    

    <div class="img-box">
      <img src="https://i.postimg.cc/MTTpfTFs/redxcyber1.jpg" alt="">
    </div>
    <p class="name">Redxcyber</p>
    <p class="profession">Developer & security</p>


    


    <div class="social-box">

      <div class="social">
        <i class="fa-brands fa-facebook facebook"></i>
      </div>
      <div class="social">
        <i class="fa-brands fa-telegram telegram"></i>
      </div>
      <div class="social">
        <i class="fa-brands fa-twitter twitter"></i>
      </div>
      <div class="social">
        <i class="fa-brands fa-youtube youtube"></i>
      </div>

    </div>


    

    <div class="btn-container">
      <div class="btn btn1">
        <p>Message</p>
      </div>
      <div class="btn btn2">
        <p>Subscribe</p>
      </div>
    </div>

    

    <div class="react-box">

      <div class="react">
        <i class="fa-solid fa-heart"></i> <span>1.2k</span>
      </div>
      <div class="react">
        <i class="fa-solid fa-comment"></i><span>600</span>
      </div>
      <div class="react">
        <i class="fa-solid fa-share"></i><span>400</span>
      </div>

    </div>

</body>

</html>

profile card using html and css

code 👇🏻

You may like these posts