Profile Card

 

Profile Card

HTML

<img class="img" src="https://images.unsplash.com/photo-1579546929662

-711aa81148cf?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8Z3JhZGllbnR8ZW58MHx8MHx8&

ixlib=rb-1.2.1&w=1000&q=80">

<div class="container">

<img class="logo" src="https://images-na.ssl-images-amazon.com/

images/I/31P9WzMG-4L.png">

<h1>CODEZ</h1>

<p class="para">hi i am juneid, and i am the owner of this

youtube channel..</p>

<i id="fafa" class="fa fa-facebook"></i>

<i id="fafa" class="fa fa-twitter"></i>

<i id="fafa" class="fa fa-instagram"></i>

<i id="fafa" class="fa fa-linkedin"></i>

</div>

    

CSS

<style>

*{

box-sizing: border-box;

}

body{

margin: 0;

padding: 0;

background-color: whitesmoke;

text-align: center;

}

.logo{

width: 200px;

height: 200px;

margin-top: 50px;

border-radius: 60%;

cursor: pointer;

}

.logo:hover{

border: 2px solid gray;

}

.container{

background-color: rgba(99, 70, 167, 0.329);

text-align: center;

margin-left: 500px;

margin-right: 500px;

margin-top: 90px;

border-radius: 20px;

position: absolute;

}

.para{

padding: 0px 10px 12px 10px;

}

#fafa{

width: 50px;

height: 20px;

font-size: 30px;

border-radius: 50%;

margin-bottom: 50px;

cursor: pointer;

}

#fafa:hover{

color: teal;

}

.img{

position: absolute;

background-repeat: no-repeat;

z-index: -1;

left: 0;

top: 0;

width: 100%;

height: 100%;

}

</style>

Font-Awesome

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/

font-awesome/4.7.0/css/font-awesome.min.css">