In this blogspost you will learn How to Create your Personal Portfolio website using HTML CSS. As you kanow I already published Responsive Portfolio website in my previous Blogs. I have created a Header section, Navigation bar, About section, Services section, Contact us and other. Now lates get start,
Think of your portfolio website as your online showcase. It's where people go to see the amazing things you've done. Whether it's taking stunning photos, crafting beautiful designs, or both, your website is your stage to shine. Having a great portfolio site isn't just about showing off; it's about making a fantastic first impression. Creating your personal portfolio website with HTML and CSS is like creating a digital canvas for your creativity. The source code we're sharing is your paintbrush. We're excited to see what you come up with.
Create your Personal Portfolio website using HTML CSS | source code
I have provided all the source code of this portfolio and all the images that i have used in this project. You can directly download all source code files from the given Download Button.
To create this website ( personal website) you need to create two files Html Css . After create these files just copied and pasted the following source code.
1. index.html: This is the main HTML file that holds the structure of your website.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio website using HTML CSS | Bijan's Blogs</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<div class="logo">
<a href="#">
<img src="/imgs/logo1.png" alt="Logo">
</a>
</div>
<ul class="nav-links">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<section id="home">
<div class="home-content">
<h1>Hello, I'm janne</h1>
<p>I believe that every image should tell a story, evoke
emotions, and leave a lasting impression.</p>
<div class="btn">
<a href="#about" class="cta-button">About Me</a>
<a href="#contact" class="cta-button">Contact Me</a>
</div>
</div>
</section>
</header>
<section id="about">
<div class="about-content">
<h2 class="section-title">About Me</h2>
<div class="about-container">
<div class="about-text">
<p>Hello Dear! I'm Janne, a passionate photographer and
designer. I have a keen eye for capturing moments
and a creative mind that loves crafting beautiful
visuals.</p>
<p>With a background in both photography and design, I
bring a unique blend of skills to my work. I believe
that every image should tell a story, evoke
emotions, and leave a lasting impression.</p>
</div>
<div class="about-image">
<img src="/imgs/hero.jpg" alt="About Me Image">
</div>
</div>
</div>
</section>
<section id="services">
<div class="services-content">
<h2 class="section-title">My Services</h2>
<div class="services-container">
<div class="service-item">
<div class="service-icon">
<img src="/imgs/service-1.avif" alt="Service Icon">
</div>
<h3>Photography</h3>
<p> Let me tell your story through captivating images
that you'll cherish for a lifetime.</p>
</div>
<div class="service-item">
<div class="service-icon">
<img src="/imgs/service-2.avif" alt="Service Icon">
</div>
<h3>Graphic Design</h3>
<p>Let's collaborate to bring your vision to life and
create designs that stand out in a crowded digital
world.</p>
</div>
<div class="service-item">
<div class="service-icon">
<img src="/imgs/service-3.avif" alt="Service Icon">
</div>
<h3>Photo Editing</h3>
<p> Let me transform your visuals into stunning works of
art that shine with creativity and professionalism.</p>
</div>
</div>
</div>
</section>
<section id="contact">
<div class="contact-form">
<h2 class="section-title">Contact Me</h2>
<div class="contact-container">
<div class="contact-img">
<img src="/imgs/contact.jpg" alt="contact">
</div>
<form>
<label for="name">Name</label>
<input type="text" id="name" placeholder="Your Name"
required>
<label for="email">Email</label>
<input type="email" id="email" placeholder="Your Email"
required>
<label for="message">Message</label>
<textarea id="message"
placeholder="What in your mind..." rows="4" required></textarea>
<button type="submit">Send</button>
</form>
</div>
</div>
</section>
<footer>
<p>© 2023 Janne. All rights reserved.</p>
</footer>
</body>
</html>
2. styles.css: This is the main CSS file where you define the styling for your website.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
#about,
#services,
#contact {
background-color: #fff;
padding: 40px 0;
}
h2 {
font-size: 24px;
font-weight: 700;
}
.section-title {
position: relative;
display: inline-block;
}
.section-title::after {
content: "";
position: absolute;
bottom: -4px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 3px;
background-color: #f39c12;
}
header {
background-image: url('/imgs/background.jpg');
background-size: cover;
background-position: center;
height: 100vh;
width: 100%;
backdrop-filter: blur(10px);
color: #fff;
padding: .3rem 2rem;
}
nav {
max-width: 100%;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo a img {
height: 60px;
}
.nav-links {
list-style: none;
display: flex;
}
.nav-links li {
margin-right: 20px;
padding: 0 8px;
border-radius: 20px;
color: #ffff;
border: 1px solid;
transition: color .5s;
}
.nav-links a {
color: #fff;
text-decoration: none;
transition: color 0.5s;
}
.nav-links a:hover,
.nav-links li:hover {
color: #e39a24;
}
section {
padding: 3rem 0;
max-width: 960px;
margin: 0 auto;
}
#home {
width: 40%;
color: #fff;
text-align: center;
padding: 80px 0;
}
.home-content h1 {
font-size: 2.5rem;
margin: 10px 0;
}
.home-content p {
font-size: 1.2rem;
margin: 20px 0;
}
.btn {
display: flex;
width: 40%;
position: absolute;
bottom: 220px;
justify-content: center;
}
.cta-button {
background-color: #f39c12;
color: #fff;
height: 35px;
width: 25%;
align-items: center;
justify-content: center;
display: flex;
text-decoration: none;
border-radius: 5px;
margin: 0 14px;
font-weight: bold;
transition: background-color 0.3s;
}
.cta-button:hover {
background-color: #e67e22;
}
.about-content {
text-align: center;
}
.about-container {
display: flex;
max-width: 960px;
margin-top: 40px;
}
.about-text {
flex: 1;
padding: 0 20px;
text-align: left;
}
.about-image {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.about-image img {
max-width: 100%;
height: 170px;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
.services-content {
text-align: center;
}
.services-container {
display: flex;
justify-content: center;
margin-top: 40px;
}
.service-item {
width: 340px;
padding: 8px 12px;
margin: 0 20px;
text-align: center;
border: 1px solid #ddd;
border-radius: 10px;
transition: transform 0.3s, box-shadow 0.3s;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
}
.service-item p {
padding: 0 12px;
font-size: 12p;
}
.service-icon img {
max-width: 80px;
height: auto;
margin-bottom: 10px;
}
.service-item:hover {
transform: translateY(-5px);
}
.contact-form {
text-align: center;
}
.contact-container {
display: flex;
max-width: 960px;
margin-top: 40px;
}
.contact-img {
flex: 1;
display: flex;
align-items: center;
}
.contact-img img {
max-width: 100%;
height: 290px;
border-radius: 10px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
form {
width: 340px;
padding: 14px 26px;
margin: 0 70px;
border: 1px solid #ddd;
border-radius: 10px;
transition: transform 0.3s, box-shadow 0.3s;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
form label {
display: block;
text-align: start;
margin-bottom: 5px;
}
form input[type="text"],
form input[type="email"],
form textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
form button {
width: 100%;
background-color: #f39c12;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
form button:hover {
background-color: #e67e22;
}
footer {
text-align: center;
padding: 1rem 0;
background-color: #333;
color: #fff;
}
@media (max-width: 768px) {
nav {
flex-direction: column;
align-items: flex-start;
}
.nav-links {
margin-top: 10px;
}
}
Feel free to copy and paste the above code into their respective files, or you can download the code just one click. With this straightforward file structure and ready-to-use code, You successfully cereate your Personal Portfolio Website using HTML CSS. If you have any queries related with this feel free to asked me in a comment section.