DEV Community

loading...
Cover image for Personal Portfolio Website using HTML & CSS

Personal Portfolio Website using HTML & CSS

freelancer soyel
・2 min read

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="./img/logo.png" class="logo">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Service</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <a href="#" 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="#" 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;
}

Discussion (1)

Collapse
joelbonetr profile image
JoelBonetR • Edited

Nice simple starter template to begin with!

I did a CSS & HTML (plus a simple js script) portfolio the past year, take a look at it if you want
joelbonetr.com/

And also to the article I wrote about where I covered all step by step:
dev.to/joelbonetr/building-an-effi...

:D