Home
css
frontend

Portfolio Landing Page using HTML and CSS

 


Hello readers, today, in this blog, you'll learn to create a landing page for your portfolio website. This page has been designed using HTML and CSS only and this is quite sure that a design of something like this is surely going to give a firm look to your fully functional portfolio website.

A personal Portfolio Website is used to describe various details about you and your work. It is very important to build a good portfolio for a better career. Just like your Resume it showcase your knowledge and achievements but in more detailed and interactive manner.

Checkout the video below to take a glimpse about how actually it this page looks like.


Video Preview of Portfolio Landing Page


In this video you have seen how actually this design looks. I hope you have found this useful so let's proceed towards it's development.

If you have liked the tutorial and want the source code then I have provided the download button to download all relative files of source code and other assets in the end of this tutorial. You may click on the download button and get all files.


You might like these:

Portfolio Landing Page [Source Codes]

To create this landing page you'll have to create two files with name index.html and style.css file. After this copy and paste codes from below to these files.
Note that images won't appear right now because they are currently not in your system. If you want to use images also then you'll have to download them using the download button in the end of this tutorial.

  • Copy the below code in index.html file. Remember you've to create the file with .html extension.


<!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>Portfolio Landing Page</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
    <div class="hero">
        <nav>
            <div class="logo"><a href="#">Portfo<span>lio.</span></a></div>
            <ul>
                <li><a href="#">HOME</a></li>
                <li><a href="#">ABOUT</a></li>
                <li><a href="#">PORTFOLIO</a></li>
                <li><a href="#">SERVICES</a></li>
                <li><a href="#">HIRE ME</a></li>
            </ul>
        </nav>
        <div class="detel">
            <h1>I'M Satish <span>Shahi</span></h1>
            <p>I am a web developer, blogger and UI designer.<br>And this is my official Portfolio Website to showcase my works. </p>
            <a href="#">Download CV</a>
        </div>
        <div class="images">
            <img src="images/shape_1.png" class="shape">
            <img src="images/boy.png" class="girl">
        </div>

        <div class="social">
           <a href="#"><i class="fab fa-dribbble fa-xs"></i></a>
           <a href="#"><i class="fab fa-instagram fa-xs"></i></a>
           <a href="#"><i class="fab fa-behance fa-xs"></i></a>
        </div>
    </div>
</body>
</html>

  • Then copy the below code into style.css file. Remember the extension is .css.
*{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

body{
    background-color: #19191a;
}

.hero{
    position: relative;
    width: 100%;
    height: 100vh;
    position: relative;
}

nav{
    display: flex;
    width: 84%;
    margin: auto;
    padding: 20px 0;
    align-items: center;
    justify-content: space-between;
}

.hero .logo a{
    color: #fff;
    font-size: 35px;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;

}

nav ul li {
    display: inline-block;
    list-style: none;
    margin: 10px 20px;
}

nav ul li a{
    text-decoration: none;
    color: rgb(241, 240, 240);
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
}

nav ul li a:hover{
    color: rgb(46, 184, 131);
}

.detel{
    margin-left: 8%;
    margin-top: 15%;
}

.detel h1{
    font-size: 50px;
    color: #dfdfdf;
    margin-bottom: 20px;
    font-family: 'Montserrat', sans-serif;
}

span{
    color: #00A87D;
    font-family: 'Montserrat', sans-serif;
    
}

.detel p{
    color: rgb(121, 118, 118);
    line-height: 22px;
    font-family: 'Montserrat', sans-serif;
}

.detel a{
    background: #008665;
    padding: 10px 18px;
    text-decoration: none;
    font-weight: bold;
    color: #fff;
    display: inline-block;
    margin: 30px 0;
    border-radius: 6px;
    opacity: 0.8;
    font-family: 'Montserrat', sans-serif;
}
.detel a:hover{
    opacity: 1;
}

.images{
    width: 45%;
    height: 80%;
    position: absolute;
    bottom: 0;
    right: 100px;
}

.images img{
    height: 100%;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    transition: bottom 1s, left 1s;
}

.images:hover .shape{
    bottom: 40px;
}

.images:hover .girl{
    left: 45%;
}

.social{
    margin-left: 8%;
    margin-top: 100px;
}

.social a{
    font-size: 30px;
    color: rgb(255, 255, 255);
    margin-right: 20px;
}

.social a:hover{
    color: #00A87D;
}


That's it, save these two files and view the result by double clicking the index.html file. It is important to note that images won's show up because you'll have to download them first or you may replace them with your own. All you need to do is just change the value of src attribute of image tag with your image location.

Below is the download button to download all assets along with source codes. If you face any problem then ask in the comment box.✌
Labels : #css ,#frontend ,#html ,#web dev ,

Post a Comment