In this post, I am going to design web design portfolio using pure HTML and CSS. You can download complete source code to click one below download button.
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Google Font -->
<link href='https://fonts.googleapis.com/css?family=Open Sans' rel='stylesheet'>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!--Begin Navbar-->
<div id="header">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="pt-1">
<h2>Muddsar Qayyum</h2>
</div>
</div>
<div class="col-lg-6" id="right_side">
<nav class="navbar navbar-expand">
<ul class="navbar-nav">
<li>
<a href="#" class="nav-link text-nowrap">
<span><i class="fa fa-home"></i></span>
Home</a>
</li>
<li>
<a href="#skill" class="nav-link text-nowrap">
<span><i class="fa fa-code"></i></span>
Skills</a>
</li>
<li>
<a href="#work" class="nav-link text-nowrap">
<span><i class="fa fa-history"></i></span>
Work History</a>
</li>
<li>
<a href="#contact" class="nav-link text-nowrap">
<span><i class="fa fa-phone"></i></span>
Contact Me</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<!--End Navbar-->
<!-- Begin about section -->
<div id="about_section">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div>
<img src="images/profile.png">
</div>
</div>
<div class="col-lg-6" id="right_side">
<div>
<h2 class="text-center">i'm Web Designer</h2>
<span></span>
</div>
</div>
</div>
</div>
</div>
<!-- End about section -->
<!-- Begin skill section -->
<div id="skill"></div>
<div id="skill_section">
<div class="container">
<div class="row">
<div class="col-9 text-center m-auto">
<h2>Skills</h2>
<p>Here are my expertise</p>
<div class="progress bg-white">
<div class="progress-bar progress_bar_color html">
HTML (90%)
</div>
</div>
<div class="progress bg-white">
<div class="progress-bar progress_bar_color css">
CSS (85%)
</div>
</div>
<div class="progress bg-white">
<div class="progress-bar progress_bar_color bootstrap">
Bootstrap (80%)
</div>
</div>
<div class="progress bg-white">
<div class="progress-bar progress_bar_color wordpress">
WordPress (70%)
</div>
</div>
<div class="progress bg-white">
<div class="progress-bar progress_bar_color codeigniter">
Codeigniter (60%)
</div>
</div>
<div class="progress bg-white">
<div class="progress-bar progress_bar_color js">
JavaScript (45%)
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End skill section -->
<!-- Begin work history section -->
<div id="work"></div>
<div id="work_history">
<div class="container">
<div class="row">
<div class="col-8 text-center m-auto">
<h2>Work History</h2>
<p>I'm working as a freelancer and here are some samples of my previous work</p>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<div id="carousel_id" class="carousel slide" data-bs-ride="carousel" data-bs-interval="999999999">
<ol class="carousel-indicators">
<li data-bs-target="#carousel_id" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carousel_id" data-bs-slide-to="1"></li>
<li data-bs-target="#carousel_id" data-bs-slide-to="2"></li>
<li data-bs-target="#carousel_id" data-bs-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/work/1.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Homepage</h5>
</div>
</div>
<div class="carousel-item">
<img src="images/work/2.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Shop Page</h5>
</div>
</div>
<div class="carousel-item">
<img src="images/work/3.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Payment Page</h5>
</div>
</div>
<div class="carousel-item">
<img src="images/work/4.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>History Page</h5>
</div>
</div>
</div>
<a class="carousel-control-prev"
href="#carousel_id" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next"
href="#carousel_id" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">
Next</span>
</a>
</div>
<div class="text-center pt-2">
<h5>Design of Article shopping website</h5>
</div>
</div>
<div class="col-md-6 mb-3">
<div id="carousel_id2" class="carousel slide" data-bs-ride="carousel" data-bs-interval="999999999">
<ol class="carousel-indicators">
<li data-bs-target="#carousel_id2" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carousel_id2" data-bs-slide-to="1"></li>
<li data-bs-target="#carousel_id2" data-bs-slide-to="2"></li>
<li data-bs-target="#carousel_id2" data-bs-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/work/01.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Homepage</h5>
</div>
</div>
<div class="carousel-item">
<img src="images/work/02.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Login Page</h5>
</div>
</div>
<div class="carousel-item">
<img src="images/work/03.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Registration Page</h5>
</div>
</div>
<div class="carousel-item">
<img src="images/work/04.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>User Dashboard</h5>
</div>
</div>
<div class="carousel-item">
<img src="images/work/06.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>User Dashboard</h5>
</div>
</div>
<div class="carousel-item">
<img src="images/work/05.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>User Profile</h5>
</div>
</div>
</div>
<a class="carousel-control-prev"
href="#carousel_id2" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next"
href="#carousel_id2" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">
Next</span>
</a>
</div>
<div class="text-center pt-2">
<h5>Blog Web Application in Codeigniter</h5>
</div>
</div>
</div>
</div>
</div>
<!-- End work history section -->
<!-- contact section begin -->
<div id="contact"></div>
<div id="contact_section">
<div class="container">
<div class="text-center">
<h2>Contact Me</h2>
<p>Feel free and drop your query</p>
</div>
<div class="row">
<div class="col-md-4 m-auto">
<div>
<h5>Location</h5>
<p>City Abbaspur, Azad Kashmir, Pakistan</p>
</div>
<div>
<h6>Mobile</h6>
<p><a href="tel:+923485603534" class="text-dark">+923485603534</a></p>
</div>
<div>
<h6>Email</h6>
<p><a href="mailto:maduwebtech@gmail.com" class="text-dark">maduwebtech@gmail.com</a></p>
</div>
</div>
<div class="col-md-6 m-auto">
<div>
<h5 class="text-center">Leave your Message</h5>
</div>
<form>
<div class="mb-2">
<input type="text" name="" placeholder="Your name" class="form-control" required="">
</div>
<div class="mb-2">
<input type="email" name="" placeholder="Your email" class="form-control" required="">
</div>
<div class="mb-2">
<textarea class="form-control" rows="5" placeholder="Type message..."></textarea>
</div>
<div class="mb-2">
<input type="submit" name="" class="btn btn-primary btn-sm col-12" value="Send Message">
</div>
</form>
</div>
</div>
</div>
</div>
<!-- begin footer-->
<div class="container-fluid contact">
<div class="row">
<div class="col-12 d-flex flex-column align-items-center">
<div class="navbar-expand">
<ul class="navbar-nav" id="social_icons">
<li><a href="https://www.facebook.com/muddsarchughtai" class="nav-link"><i class="fa fa-facebook"></i></a></li>
<li><a href="https://youtube.com/c/MaduWebTech" class="nav-link"><i class="fa fa-youtube"></i></a></li>
<li><a href="https://www.instagram.com/muddsar_qayyum" class="nav-link"><i class="fa fa-instagram"></i></a></li>
<li><a href="https://twitter.com/Muddsar__Qayyum" class="nav-link"><i class="fa fa-twitter"></i></a></li>
</ul>
</div>
<div class="text-center">
<p>Copyright © 2021 | Designed by MaduWebTech</p>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>CSS
*{margin: 0;padding: 0;box-sizing: border-box;font-family: Arial;}
html{
font-size: 100%;
}
.col-9 {
flex: 0 0 auto;
width: 90% !important;
}
#header{
background-color: #fff;
width: 100%;
position: sticky;
top: 0;
}
#header h2{
padding-left: 15px;
color: navy;
}
#header #right_side li a{
color: black;
padding-left: 15px;
padding-right: 15px;
font-weight: bold;
transition: transform 1.5s;
}
#header #right_side li a:hover{
color: navy;
transform: scale(1.1);
}
/*Header section end*/
/*Begin about section*/
#about_section{
padding-top: 40px;
padding-bottom: 40px;
background-image: linear-gradient(#5BA4EF,#9867CE);
}
#about_section img{
height: 350px;
width: 350px;
border:1px solid grey;
padding: 5px;
background-color: #fefefe;
opacity: 0.8;
border-radius: 50%;
box-shadow: 2px 2px 3px blue;
transition: transform 1s;
}
#about_section img:hover{
transform: scale(0.9);
cursor: zoom-in;
}
#about_section #right_side{
align-self: center;
background-color: #fff;
border:1px solid grey;
box-shadow: 2px 2px 3px blue;
}
#about_section #right_side h1{
align-items: center;
}
/*Skill Section*/
#skill_section{
padding-top: 40px;
padding-bottom: 40px;
background-color: #eee;
}
#skill_section h2{
font-weight: bold;
}
#skill_section .progress{
margin-bottom: 16px;
height: 1.5rem;
font-size: 1rem;
}
#skill_section .html{
width: 90%;
background-image: linear-gradient(black,red);
font-family: all;
font-weight: bold;
}
#skill_section .css{
width: 85%;
background-image: linear-gradient(hotpink,orange);
font-family: all;
font-weight: bold;
}
#skill_section .bootstrap{
width: 80%;
background-image: linear-gradient(orange,black);
font-family: all;
font-weight: bold;
}
#skill_section .wordpress{
width: 70%;
background-image: linear-gradient(navy,black);
font-family: all;
font-weight: bold;
}
#skill_section .codeigniter{
width: 60%;
background-image: linear-gradient(tan,red);
font-family: all;
font-weight: bold;
}
#skill_section .js{
width: 50%;
background-image: linear-gradient(grey,green);
font-family: all;
font-weight: bold;
}
/*Work history*/
#work_history{
padding-top: 40px;
padding-bottom: 40px;
background-color: #eee;
}
#work_history h2{
font-weight: bold;
}
.carousel-inner{
border-radius: 10px;
background-color: black;
box-shadow: 2px 2px 3px black;
}
.carousel-item img{
border-radius: 10px;
opacity: 0.5;
}
/*begin contact*/
#contact_section{
padding-top: 40px;
padding-bottom: 40px;
background-color: #eee;
}
#contact_section h2{
font-weight: bold;
}
/*Footer begin*/
.contact{
background-color: black;
color: #999999;
}
#social_icons li a i{
color:#999999;
}
/*Media Queries*/
@media (max-width: 768px){
html{font-size: 85%;}
#about_section{
padding-top: 20px;
padding-bottom: 20px;
}
#about_section img{
display: flex;
margin: auto;
height: 250px;
width: 250px;
}
#about_section #right_side{
margin-top: 10px;
}
#about_section{
padding-top: 40px;
padding-bottom: 40px;
}
#skill_section{
margin-top: 20px;
margin-bottom: 20px;
}
}
@media (min-width: 769px) and (max-width: 992px){
html{font-size: 95%;}
#about_section{
padding-top: 20px;
padding-bottom: 20px;
}
#about_section img{
display: flex;
margin: auto;
height: 300px;
width: 300px;
}
#about_section #right_side{
margin-top: 10px;
}
#skill_section{
margin-top: 20px;
margin-bottom: 20px;
}
}
@media (max-width: 430px){
html{font-size: 70%}
}
@media (max-width: 370px){
html{font-size: 60%}
}
@media (max-width: 333px){
html{font-size: 45%}
}Media Images: Download
Download Complete Project:
