Profile Card using HTML CSS

Designing Turtorial

PROFILE CARD

HTML CSS

HTML
    
        <div class="container">

    <div class="container-card">

      <img src="Profile.jpg" alt="profile image" class="card-img">

      

    <h3>Joy</h3>

    <p>Joy is a Front End Web Developer <br>He works in a big It company and he have 5+ years of work experience</p>

    <br>

    <center>

<a href="#" class="fa fa-facebook"></a>  

<a href="#" class="fa fa-twitter"></a>  

<a href="#" class="fa fa-google"></a>  

<a href="#" class="fa fa-instagram"></a>  

</center>

    </div>

  </div>

  

      

    

    

      
CSS

    
      
      body{

  background:white;

}

.container{

  background: #1b1936;

  width: 230px;

  height: 300px;

}

.container-card{

  background-image:url('/Background.jpg');

  background-size:100%;

  background-position: top fixed;

  background-repeat: no-repeat;

}

.card-img{

  border-radius: 50%;

  border: solid;

  height: 100px;

  width:100px;

  border-width: 6px;

  border-color: #1b1936;

  margin-top:60px;

  margin-left:7px;

}

h3{

  color: white;

  margin-left:20px;

  margin-top:-3px;

}

p{

  color: white;

  margin-left: 5px;

  margin-right:5px;

  font-size:3px;

}

.container-card a{

  color: white;

  text-decoration: none;

}