Personal Portfolio Website using HTML & CSS




Hello Viewers, today we are going to Learn How To Make Personal Website Using HTML And CSS. You Easily Create This Personal Portfolio Website Using HTML By Follow These Tutorials And Steps. You’ll Build This Awesome Personal Portfolio Website By Just Following This Video Tutorial Or These Steps Which I Given Bellow.

On this Portfolio site, there are navigation bar with a logo on the left side, some navigation links are on the middle side and right side button. Next Step, On the left side of this site, there are texts which are about the author’s name, profession, and a button labeled as “Download CV” as you can see in the image.

You can copy the codes from the given boxes or download the code files from the given link but I recommend you to download the source code files instead of copying codes. Click here to download code files

HTML CODE:

<div class="hero">
    <nav>
        <img src="https://dev.to/mirsoyel/./img/logo.png" class="logo">
        <ul>
            <li><a href="https://dev.to/mirsoyel/#">Home</a></li>
            <li><a href="https://dev.to/mirsoyel/#">About</a></li>
            <li><a href="https://dev.to/mirsoyel/#">Service</a></li>
            <li><a href="https://dev.to/mirsoyel/#">Portfolio</a></li>
            <li><a href="https://dev.to/mirsoyel/#">Blog</a></li>
            <li><a href="https://dev.to/mirsoyel/#">Contact</a></li>
        </ul>
        <a href="https://dev.to/mirsoyel/#" class="btn">Buy Now</a>
    </nav>

    <div class="content">
        <span class="title">Freelance Web Developer</span>
        <h1>Hello, I’m <span>Fatima</span></h1>
        <p>I’m working on a professional, visually sophisticated and technologically proficient, responsive and multi-functional React Template Imroz.</p>
        <a href="https://dev.to/mirsoyel/#" class="btn">Download CV</a>
    </div>
</div>
Enter fullscreen mode

Exit fullscreen mode

CSS CODE:

*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: ‘Poppins’, sans-serif;
}
a{
text-decoration: none;
}
.hero{
width: 100%;
height: 100vh;
background: url(img/bg1.jpg);
background-size: cover;
}
nav{
display: flex;
align-items: center;
justify-content: space-between;
padding: 30px 100px;
}
.logo{
max-height: 60px;
}
nav ul li{
list-style: none;
display: inline-block;
padding: 10px 20px;
}
nav ul li a{
color: #1d1d24;
position: relative;
padding: 5px 0;
}
nav ul li a:hover{
color: #fd4766;
}
nav ul li a:after{
content: “”;
position: absolute;
left: 0;
width: 0;
height: 3px;
background: #fd4766;
transition: .3s;
bottom: 0;
}
nav ul li a:hover:after{
width: 100%;
}
.btn{
color: #fff;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 2px;
padding: 16px 40px;
border-radius: 500px;
display: inline-block;
font-weight: 500;
transition: all .4s ease-in-out;
background-size: 152% 100%;
background: #fd4766;
border: 2px solid #fd4766;
}
.btn:hover{
background: transparent;
border-color: #fd4766;
color: #fd4766;
}
.content{
position: absolute;
top: 35%;
left: 8%;
}
.content .title{
color: #1f1f25;
font-size: 15px;
text-transform: uppercase;
letter-spacing: 4px;
display: inline-block;
margin-bottom: 20px;
background: linear-gradient(120deg, #1c99fe 20.69%, #7644ff 50.19%,#fd4766 79.69%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.content h1{
color: #1f1f25;
font-size: 75px;
font-weight: 900;
line-height: 90px;
text-transform: inherit;
width: 70%;
}
.content h1 span{
color: #fd4766;
}
.content p{
width: 55%;
color: #757575;
margin-top: 25px;
margin-bottom: 30px;
}



Abu Sayed is the Best Web, Game, XR and Blockchain Developer in Bangladesh. Don't forget to Checkout his Latest Projects.


Checkout more Articles on Sayed.CYou

#Personal #Portfolio #Website #HTML #CSS