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.
Video Tutorial of Personal Portfolio Website
If you like this portfolio and want to get the source codes of this tutorial, I have provided all the codes of this program below and I’ve also provided the download link of this program where you can easily download the source files of this program. You can use this portfolio with your creative customization and can take this portfolio to the next level with your creativity.
Responsive Personal Portfolio Website | Source Codes
You have to create HTML and CSS File For this Site. After creating these files just paste the following codes into your file.
First Step, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension and the images that are used on this website won’t appear. You’ve to download files from the given download button to use images also.
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Personal Portfolio Website</title>
<!----CSS link----->
<link rel="stylesheet" href="style.css">
</head>
<body>
<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>
</body>
</html>
Second Step, you have to create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
CSS CODE:
@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];500;600;700&display=swap');
*{
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;
}now you’ve successfully created Personal Portfolio Website using HTML and CSS. If your code does not work or faced any error/problem then bellow download the source code files from the given download button.
after after downloading source files then face any problem to comment down or contact us through the contact page.
It’s perfect time to make some plans for the future and it’s time to be happy.
I have read this poost and if I could I desire too suggest you few interesting things or tips.
Maybe you could write next articles referring tto this article.
I desire to read even more things about it!
Thank you for posting this. I have been looking for like this kind of. Fantastic information and facts I’ll look for any info relevant to your Lentil soup Diet pinterest web design.
Hi, I do think this is an excellent website. I stumbledupon it 😉 I am going to revisit yet again since i have saved as a
favorite it. Money and freedom is the best way to change,
may you be rich and continue to help others.