Hello friends, in this article I am going to show you how to create a personal portfolio website using HTML and CSS. You Easily Create This Personal Portfolio Website Using HTML By Follow These Tutorials And Steps. You will Build This Awesome Personal Portfolio Website By Just Following This Video Tutorial Or These Steps Which I Given Bellow. In addition, common HTML and CSS programming codes have been used. It is designed in a completely modern way.
Some information about this personal portfolio website
This website, which uses beautiful colors and modern programming code, has gained the best of beauty. On this Portfolio site, there are navigation bar with a logo on the left side, 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, button and some social links. And the right side have blob image with girl image. when the mouse hover on the image animation will be shown.
Watch the video tutorial to create a personal portfolio website
If you want to learn how to make it completely, you can watch the video tutorial below. Here I have shown how I made this design step by step completely beautifully. So you can learn how to make this website beautiful. This is a youtube video. If you can learn something from the video or if the video seems helpful to you, you must like and subscribe to the video. As a result, I get motivated to create other new designs.
Hopefully, the above video tutorial has helped you to create this personal portfolio website. If you like the video tutorial, be sure to like the video and comment on it so I can encourage you to create new designs.
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>Portfolio Landing Page</title>
<!----CSS link----->
<link rel="stylesheet" href="style.css">
<!----Fontawesome CDN Link----->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
</head>
<body>
<div class="hero">
<nav>
<img src="./img/logo1.png" class="logo">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
</ul>
<a href="#" class="btn">Hire Me</a>
</nav>
<div class="info">
<h1>I am <span>Cathy Pearl</span></h1>
<h1>I'm a UI & UX Designer</h1>
<p>Welcome to my officail Portfolio Website Where I put all<br> my work related to my designs and many more.</p>
<a href="#" class="btn">Download CV</a>
</div>
<div class="img-box">
<img src="./img/back.png" class="back-img">
<img src="./img/11.png" class="man-img">
</div>
<div class="social">
<a href="#"><i class="fab fa-facebook-square"></i></a>
<a href="#"><i class="fab fa-dribbble"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></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;
}
.hero{
width: 100%;
height: 100vh;
background: #edf2fc;
font-family: 'Poppins', sans-serif;
position: relative;
}
nav{
width: 84%;
margin: auto;
padding: 20px 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo{
width: 150px;
cursor: pointer;
}
nav ul li{
display: inline-block;
list-style: none;
margin: 10px 20px;
}
nav ul li a{
text-decoration: none;
color: #606163;
}
nav ul li a:hover{
color: #ff4321;
}
.btn{
background: #ff4321;
border-radius: 5px;
padding: 10px 18px;
text-decoration: none;
color: #fff;
display: inline-block;
border: 1px solid transparent;
transition: all 0.4s ease;
}
.btn:hover{
background: transparent;
color: #ff4321;
border: 1px solid #ff4321;
}
.info{
margin-left: 8%;
margin-top: 10%;
}
.info h1{
font-size: 40px;
color: #444242;
}
.info h1 span{
color: #ff4321;
}
.info p{
color: #606163;
line-height: 22px;
margin-top: 10px;
margin-bottom: 30px;
}
.img-box{
width: 45%;
height: 80%;
position: absolute;
bottom: 0;
right: 100px;
}
.img-box img{
height: 100%;
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
transition: bottom 1s, left 1s;
}
.img-box:hover .back-img{
bottom: 40px;
}
.img-box:hover .man-img{
left: 54%;
}
.social{
margin-left: 8%;
margin-top: 25px;
}
.social a{
font-size: 28px;
color: #606163;
margin-right: 20px;
}
.social a:hover{
color: #ff4321;
}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.
