Creative Profile Page Design - Using CSS and HTML

Hello Everyone,

As you can see above pic is my new creative profile demo.

You can also make this using simple HTML and CSS within 10 - 12 mins. No Problem if you have no idea about Web design or any kind of programming language, This tutorial is very basic that you can also try and learn something from it.

For this You need to create two files,

1. index.html (for HTML coding)

2. style.css (for Applying styles and designing)

Now for html file write down below code.

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="font/css/font-awesome.css">
<div class="row">
        <div class="pic_base">
            <img src="robert.png" width=200 id="profile_pic" alt="">
            <div class="icon_base">
                <a href="#">
                    <i class="fa fa-pencil fa-2x" id="edit"></i>
                </a>
            </div>
        </div>
        <div class="content_base">
            <h1 id="title">Robert Downy Jr.</h1>
            <h2 id="profession">Actor</h2>
            <p id="content">
    Robert John Downey Jr. is an American actor. His career has included critical and popular success in his youth, followed by a period of substance abuse and legal troubles, and a resurgence of commercial success in middle age.
                <br><br>
            <strong>Born:</strong> 4 April 1965 (age 51 years), Manhattan, New York City, New York, United States
            <br><br>
            <strong>Upcoming movies:</strong> Spider-Man: Homecoming, Avengers: Infinity War, Untitled Avengers film
        </p>
        <br>
        <ul class="social">
            <li> <a href="#"><i class="fa fa-2x fa-twitter"></i></a> </li>
            <li> <a href="#"><i class="fa fa-2x fa-facebook"> </i></a></li>
            <li> <a href="#"><i class="fa fa-2x fa-instagram"> </i></a></li>
        </ul>
        </div>
</div>

In style.css Write down below Code:

@import url('https://fonts.googleapis.com/css?family=Oswald');
 @import url('https://fonts.googleapis.com/css?family=Merriweather');
 @import url('https://fonts.googleapis.com/css?family=Bitter');
 @import url('https://fonts.googleapis.com/css?family=Exo+2');
.row {
    height: 600px;
    background-color: #2ecc71;
    width: 700px;
    margin-left: 200px;
}
.pic_base{
    height: 30%;
    background-color: #34495e;
    background: url('iron.jpg');
    background-size: cover;
}
.icon_base{
    background-color: #d35400;
    height: 50px;
    width: 50px;
    padding: 2px;
    position: absolute;
    margin-left: 630px;
    margin-top: 150px;
    align-items: center;
    border-radius: 100%;
}
#edit{
    color: white;
    margin-left: 10px;
    margin-top: 8px;
}

#profile_pic{
    border-radius: 100%;
    border: 2px solid #34495e;
    box-shadow: 0 2px 2px black;
    box-sizing: border-box;
    position: absolute;
    margin-top: 40px;
    margin-left: 20px;
}
#title {
    position: absolute;
    font-family: verdana;
    margin-left: 360px;
    margin-top: 10px;
    color: #ecf0f1;
    font-family: 'Merriweather', serif;
}
#profession{
    position: absolute;
    margin-left: 360px;
    margin-top: 70px;
    font-weight: bold;
    font-family: 'Bitter', serif;

}
#content{
    padding-top: 120px;
    padding-left: 10px;
    font-family: 'Exo 2', sans-serif;"
}
.social{
    list-style: none;
    position: absolute;
    bottom: 70px;
    align-items: center;
    margin-left: 30px;
}
.social li {
    display: inline;
    padding: 20px;
    margin-left: -30px;
    padding-left: 130px;
    align-items: center;
    color: white;

}
.social li a{
    color: white;
}
.social li a:hover{
    color: blue;
    transform: scale(1,1.5);
}

For Download FontAwesome Icon :

http://fontawesome.io/get-started/
http://fontawesome.io/icons/

For Google Fonts :

https://fonts.google.com/

For Flat UI color :

https://flatuicolors.com/

For Demo Watch this Video

You can Download the Code here:

Download

• Tweet
• Share
• Share
• Share
• Share

Sign up here with your email