Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
October 13, 2021 09:52 am GMT

Creating a cool profile card

Hello guys,
today i will be showing how I created this cool profile card, let's get started..


Create a workspace

   cd /Desktop   mkdir profile_card   cd profile_card   touch index.html   touch style.css

cd /Desktop: is use to change directory to the desktop

mkdir profile_card: this command is use to create a folder called ptofile_card.

cd profile_card: the command is use to navigate inside the profile_card folder.

touch index.html: create a index.html file inside the profile_card folder.

touch style.css: create a style.css file inside the profile_card folder.

create profile card

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-          Compatible"           content=" IE=edge">         <meta name="viewport"          content="width=device-          width, initial-scale=1.0">    <title>Profile page</title>    <link rel="stylesheet" href="style.css"></head><body>    <div class="profile-block">        <div class="cover-img">            <img src="c.png" alt="cover-photo">        </div>        <div class="profile-image-box">            <img src="a.jpg" alt="profile picture">        </div>        <span>Ayebidun Ezekiel</span>        <p>Full_stack Developer</p>        <div class="more">            <button type="button" >Portfolio</button>        </div>    </div></body></html>

styling our profile card

*{    width: 100%;    margin: 0;    padding: 0;}.profile-block{    top: 20%;    left: 15%;    width: 250px;    position: absolute;    border-radius: 5px;    box-shadow: 0px 0px 4px 0px #5c75b1;}.cover-img{    width: 100%;    height: 150px;}.cover-img img{    width: 100%;    height: 100%;    background-size: cover;    background-position: center;    background-repeat:no-repeat;    border-top-right-radius: 5px;    border-top-left-radius: 5px;}.profile-image-box {    top: 80px;    left: 65px;    width: 100px;    height: 100px;    border-radius: 50%;    position: absolute;    border: solid 7px #4d6cb2;    box-shadow: 0px 0px 4px 0px #5c75b1;}.profile-image-box img{    width: 100%;    height: 100%;    border-radius: 50%;}.profile-block span{    font-size: 25px;    font-weight: bold;    margin-top: 50px;    position: absolute;    text-align: center;    font-family: 'franklin gothic medium', 'arial narrow', arial, sans-serif;}.profile-block p{    margin-top: 80px;    text-align: center;    font-weight: lighter;}.more{    text-align: center;}.more button{    width: 150px;    height: 30px;    border: none;    margin-top: 40px;    color: #ffffff;    font-weight: bold;    margin-bottom: 50px;    background-color: #5c75b7;}%

Original Link:

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To