Responsive profile Card Using HTML AND CSS

 In this Blog you will get the Source Code of Responsive Profile Card .


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta name="viewport
content="width=device-width, initial-scale=1.0">
    <link 
href="https://fonts.googleapis.com/css2?
family=Poppins&display=swaprel="stylesheet">
    <title>Document</title>
    <script src="https://kit.fontawesome.com/a076d05399.js">
</script>
</head>
<body>
<div class="wrapper">
    <div class="container">
    <div class="logo">
        <img src="person1.jpeg">
        <div class="text">John Smith</div>
    </div>
  <div class="text1">
      <h1>CEO</h1>

      <p>
          
        <pre>
Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Perferendis, aspernatur 
adipisicing elit. Perferendis, aspernatur
Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Perferendis, aspernatur.
        </pre>
     </p>
     
       
  </div>
  <div class="socialmedia">
      <i class="fab fa-facebook"></i>
      <i class="fab fa-twitter"></i>
      <i class="fab fa-instagram"></i>
  </div>
  </div>

  <!-- Second one -->
  <div class="container">
    <div class="logo">
        <img src="person3.jpg">
        <div class="text">Melina Rai</div>
    </div>
  <div class="text1">
      <h1>Project Manager</h1>

      <p>
          
        <pre>
Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Perferendis, aspernatur 
adipisicing elit. Perferendis, aspernatur
Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Perferendis, aspernatur.
        </pre>
     </p>
     
       
  </div>
  <div class="socialmedia">
      <i class="fab fa-facebook"></i>
      <i class="fab fa-twitter"></i>
      <i class="fab fa-instagram"></i>
  </div>
  </div>

  <!-- Third one -->
  <div class="container">
    <div class="logo">
        <img src="person.jpg">
        <div class="text">Subash Neupane</div>
    </div>
  <div class="text1">
      <h1>Developer</h1>

      <p>
          
        <pre>
Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Perferendis, aspernatur 
adipisicing elit. Perferendis, aspernatur
Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Perferendis, aspernatur.
        </pre>
     </p>
     
       
  </div>
  <div class="socialmedia">
      <i class="fab fa-facebook"></i>
      <i class="fab fa-twitter"></i>
      <i class="fab fa-instagram"></i>
  </div>
  </div>
</div>

    
</body>
<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "poppins",sans-serif;}

        body{
           
            height:100vh;
            background-color: gray;
        }
        .wrapper{
            display: flex;
            justify-content: center;
            align-items: center;
            height:100vh;
            flex-wrap: wrap;
            
            
        }
       
        .container{
            width:350px;
            background-color: whitesmoke;
            height:550px;
            margin:60px 10px;
            /* margin:60px 0px; */
        }
      .logo{
          width:310px;
          height:270px;
          position: relative;
          
      }
      .logo img{
          width:100%;
          /* object-fit:cover; */
          height:100%;
          transform: translate(23px,-25px);
          filter: drop-shadow(40px 40px 60px rgba(0,0,0,0.6));
      
      }
      .text{
          position: absolute;
        bottom:40px;
        left:40px;
        font-size: 1.2rem;
        color:navy;
      }
      .text1 h1{
          text-align: center;
          color: red;

      }

p{
 
  
   width:100%;
   margin-top:10px;
   
}
pre{
    color:gray;
    padding-left:10px;
}

    

        
        
      .socialmedia{
          text-align: center;
          margin-top:40px;
      }
      i.fab{
          padding:10px;
      }
      .fa-facebook{
          color:#3b5999;
      }
      .fa-twitter{
color: #55acee;
      }
      .fa-instagram{
color:#e4405f
      }
</style>
</html>

Post a Comment

0 Comments