Responsive Portfolio Website Using HTML CSS & JavaScript
Hello guys! In this post, I have shared a complete source code of a responsive portfolio website made using HTML, CSS, and JavaScript. Also, I have shared a video tutorial of the portfolio website.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS file -->
<link rel="stylesheet" href="css/style.css">
<!-- Favicon -->
<link rel="shortcut icon" href="img/profile.jpg" type="image/x-icon">
<!-- Fontawesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>John Roe</title>
</head>
<body>
<!-- Website Layout -->
<ul class="website_container">
<!-- Global Menu -->
<div id="global_menu_button_container">
<p class="site_title">John Roe</p>
<i class="fa fa-bars" id="global_menu_button"></i>
</div>
<ul id="global_menu_items">
<div>
<i class="fa fa-close" id="global_menu_close_button"></i>
<li><a href="/"><i class="fa fa-home"></i> About</a></li>
<li><a href="resume.html"><i class="fas fa-file-alt"></i> Resume</a></li>
<li><a href="blogs.html"><i class="fas fa-pen-nib"></i> Blogs</a></li>
<li><a href="services.html"><i class="fas fa-cog"></i> Services</a></li>
<li><a href="contact.html"><i class="fas fa-phone-square"></i> Contact</a></li>
</div>
</ul>
<!--x Global Menu x-->
<!-- sidebar -->
<div class="sidebar_container">
<!-- Sidebar Image -->
<div class="image">
<img src="img/profile.jpg" alt="John Roe">
<div class="right_image_box"></div>
<div class="left_image_box"></div>
</div>
<!-- sidebar Content -->
<div class="sidebar_content">
<!-- Long name can be applied so easily -->
<h1>John Roe</h1>
<p>Website Designer</p>
<!-- Social Medias -->
<div class="social_media">
<a href="https://facebook.com/alivecoder"><i class="fab fa-facebook"></i></a>
<a href="https://github.com/alivecoder0"><i class="fab fa-github"></i></a>
<a href="https://instagram.com/alivecoder"><i class="fab fa-instagram"></i></a>
</div>
</div>
<!-- Sidebar Buttom Menu -->
<div class="sidebar_buttom_menu" id="sidebar_buttom_menu">
<i class="fa fa-bars" id="sidebar_menu_icon"></i>
</div>
<!-- Sidebar Navigation -->
<ul class="sidebar_navigation" id="sidebar_navigation">
<li><a href="/" class="active">About</a></li>
<li><a href="resume.html">Resume</a></li>
<li><a href="blogs.html">Blogs</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<!-- content -->
<div class="content_container">
<!-- About Page -->
<div class="about_page">
<h2 class="title">About <span>Me</span></h2>
<hr class="line">
<div class="about_content">
<p class="about_text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi numquam,
porro dolore aut, explicabo eius voluptates vitae fuga, minus quaerat dolor. Autem id iure at
illum in cumque, quasi esse. Lorem, ipsum dolor sit amet consectetur adipisicing elit. In
quaerat error tempora incidunt rem voluptas accusamus perspiciatis itaque exercitationem
voluptatem?</p>
</div>
<div class="about_profile">
<ul class="left_profile">
<li><span class="profile_title">Date of Birth</span><span>July 3, 2000</span></li>
<li><span class="profile_title">Gender</span><span>Male</span></li>
<li><span class="profile_title">Age</span><span>20 Years Old</span></li>
<li><span class="profile_title">Maritial Status</span><span>Unmarried</span></li>
<li><span class="profile_title">Nationality</span><span>Nepali</span></li>
<li><span class="profile_title">Religion</span><span>Hindu</span></li>
</ul>
<ul class="right_profile">
<li><span class="profile_title">Profession</span><span>Web Designer</span></li>
<li><span class="profile_title">Address</span><span>Jhapa, Nepal</span></li>
<li><span class="profile_title">Contact</span><span>+977 9800000000</span></li>
<li><span class="profile_title">Email</span><span>email@gmail.com</span></li>
<li><span class="profile_title">Website</span><span>mywebsite.com</span></li>
<li><span class="profile_title">Freelance</span><span>Available</span></li>
</ul>
</div>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
contact.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS file -->
<link rel="stylesheet" href="css/style.css">
<!-- Favicon -->
<link rel="shortcut icon" href="img/profile.jpg" type="image/x-icon">
<!-- Fontawesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>John Roe</title>
</head>
<body>
<!-- Website Layout -->
<div class="website_container">
<!-- Global Menu -->
<div id="global_menu_button_container">
<p class="site_title">John Roe</p>
<i class="fa fa-bars" id="global_menu_button"></i>
</div>
<ul id="global_menu_items">
<div>
<i class="fa fa-close" id="global_menu_close_button"></i>
<li><a href="/"><i class="fa fa-home"></i> About</a></li>
<li><a href="resume.html"><i class="fas fa-file-alt"></i> Resume</a></li>
<li><a href="blogs.html"><i class="fas fa-pen-nib"></i> Blogs</a></li>
<li><a href="services.html"><i class="fas fa-cog"></i> Services</a></li>
<li><a href="contact.html"><i class="fas fa-phone-square"></i> Contact</a></li>
</div>
</ul>
<!--x Global Menu x-->
<!-- sidebar -->
<div class="sidebar_container">
<!-- Sidebar Image -->
<div class="image">
<img src="img/profile.jpg" alt="John Roe">
<div class="right_image_box"></div>
<div class="left_image_box"></div>
</div>
<!-- sidebar Content -->
<div class="sidebar_content">
<!-- Long name can be applied so easily -->
<h1>John Roe</h1>
<p>Website Designer</p>
<!-- Social Medias -->
<div class="social_media">
<a href="https://facebook.com/alivecoder"><i class="fab fa-facebook"></i></a>
<a href="https://github.com/alivecoder0"><i class="fab fa-github"></i></a>
<a href="https://instagram.com/alivecoder"><i class="fab fa-instagram"></i></a>
</div>
</div>
<!-- Sidebar Buttom Menu -->
<div class="sidebar_buttom_menu" id="sidebar_buttom_menu">
<i class="fa fa-bars" id="sidebar_menu_icon"></i>
</div>
<!-- Sidebar Navigation -->
<ul class="sidebar_navigation" id="sidebar_navigation">
<li><a href="/">About</a></li>
<li><a href="resume.html">Resume</a></li>
<li><a href="blogs.html">Blogs</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html" class="active">Contact</a></li>
</ul>
</div>
<!-- content -->
<div class="content_container">
<!-- Contact Page -->
<div class="contact_page">
<h2 class="title">Contact <span>Me</span></h2>
<hr class="line">
<div class="contact_container">
<form action="post">
<div class="form_name_row">
<div class="left_form_row">
<label>First Name</label>
<input type="text" required placeholder="Enter First Name">
</div>
<div class="right_form_row">
<label>Last Name</label>
<input type="text" required placeholder="Enter Last Name">
</div>
</div>
<label>Email</label>
<input type="email" name="" id="" required placeholder="Enter Email">
<label>Phone Number</label>
<input type="text" name="" id="" required placeholder="Enter Phone Number">
<label>Subject</label>
<input type="text" name="" id="" required placeholder="Enter Subject">
<label>Message</label>
<textarea name="" id="" cols="30" rows="10" required placeholder="Enter Message"></textarea>
<input type="submit" value="Send" id="send_button">
</form>
</div>
</div>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
blogs.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS file -->
<link rel="stylesheet" href="css/style.css">
<!-- Favicon -->
<link rel="shortcut icon" href="img/profile.jpg" type="image/x-icon">
<!-- Fontawesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>John Roe</title>
</head>
<body>
<!-- Website Layout -->
<div class="website_container">
<!-- Global Menu -->
<div id="global_menu_button_container">
<p class="site_title">John Roe</p>
<i class="fa fa-bars" id="global_menu_button"></i>
</div>
<ul id="global_menu_items">
<div>
<i class="fa fa-close" id="global_menu_close_button"></i>
<li><a href="/"><i class="fa fa-home"></i> About</a></li>
<li><a href="resume.html"><i class="fas fa-file-alt"></i> Resume</a></li>
<li><a href="blogs.html"><i class="fas fa-pen-nib"></i> Blogs</a></li>
<li><a href="services.html"><i class="fas fa-cog"></i> Services</a></li>
<li><a href="contact.html"><i class="fas fa-phone-square"></i> Contact</a></li>
</div>
</ul>
<!--x Global Menu x-->
<!-- sidebar -->
<div class="sidebar_container">
<!-- Sidebar Image -->
<div class="image">
<img src="img/profile.jpg" alt="John Roe">
<div class="right_image_box"></div>
<div class="left_image_box"></div>
</div>
<!-- sidebar Content -->
<div class="sidebar_content">
<!-- Long name can be applied so easily -->
<h1>John Roe</h1>
<p>Website Designer</p>
<!-- Social Medias -->
<div class="social_media">
<a href="https://facebook.com/alivecoder"><i class="fab fa-facebook"></i></a>
<a href="https://github.com/alivecoder0"><i class="fab fa-github"></i></a>
<a href="https://instagram.com/alivecoder"><i class="fab fa-instagram"></i></a>
</div>
</div>
<!-- Sidebar Buttom Menu -->
<div class="sidebar_buttom_menu" id="sidebar_buttom_menu">
<i class="fa fa-bars" id="sidebar_menu_icon"></i>
</div>
<!-- Sidebar Navigation -->
<ul class="sidebar_navigation" id="sidebar_navigation">
<li><a href="/">About</a></li>
<li><a href="resume.html">Resume</a></li>
<li><a href="blogs.html" class="active">Blogs</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<!-- content -->
<div class="content_container">
<!-- Blogs Page -->
<div class="blogs_page">
<h2 class="title">My <span>Blogs</span></h2>
<hr class="line">
<div class="blogs_container">
<!-- Single Blog -->
<div class="blog_box">
<h2 class="blog_title">This is the Title of my first blog</h2>
<p class="blog_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus explicabo
consequuntur esse? Soluta molestias vitae, obcaecati libero ullam cupiditate amet temporibus
repudiandae voluptatem delectus vero dicta ducimus dolor similique nisi.</p>
<img src="img/blog1.jpg" alt="Blog 1" class="blog_image">
<p class="blog_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus explicabo
consequuntur esse? Soluta molestias vitae, obcaecati libero ullam cupiditate amet temporibus
repudiandae voluptatem delectus vero dicta ducimus dolor similique nisi.</p>
</div>
<!-- Single Blog -->
<div class="blog_box">
<h2 class="blog_title">This is the Title of my second blog</h2>
<p class="blog_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus explicabo
consequuntur esse? Soluta molestias vitae, obcaecati libero ullam cupiditate amet temporibus
repudiandae voluptatem delectus vero dicta ducimus dolor similique nisi.</p>
<img src="img/blog2.jpg" alt="Blog 2" class="blog_image">
<p class="blog_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus explicabo
consequuntur esse? Soluta molestias vitae, obcaecati libero ullam cupiditate amet temporibus
repudiandae voluptatem delectus vero dicta ducimus dolor similique nisi.</p>
</div>
<!-- Single Blog -->
<div class="blog_box">
<h2 class="blog_title">This is the Title of my third blog</h2>
<p class="blog_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus explicabo
consequuntur esse? Soluta molestias vitae, obcaecati libero ullam cupiditate amet temporibus
repudiandae voluptatem delectus vero dicta ducimus dolor similique nisi.</p>
<img src="img/blog3.jpg" alt="Blog 3" class="blog_image">
<p class="blog_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus explicabo
consequuntur esse? Soluta molestias vitae, obcaecati libero ullam cupiditate amet temporibus
repudiandae voluptatem delectus vero dicta ducimus dolor similique nisi.</p>
</div>
</div>
</div>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
resume.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS file -->
<link rel="stylesheet" href="css/style.css">
<!-- Favicon -->
<link rel="shortcut icon" href="img/profile.jpg" type="image/x-icon">
<!-- Fontawesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>John Roe</title>
</head>
<body>
<!-- Website Layout -->
<div class="website_container">
<!-- Global Menu -->
<div id="global_menu_button_container">
<p class="site_title">John Roe</p>
<i class="fa fa-bars" id="global_menu_button"></i>
</div>
<ul id="global_menu_items">
<div>
<i class="fa fa-close" id="global_menu_close_button"></i>
<li><a href="/"><i class="fa fa-home"></i> About</a></li>
<li><a href="resume.html"><i class="fas fa-file-alt"></i> Resume</a></li>
<li><a href="blogs.html"><i class="fas fa-pen-nib"></i> Blogs</a></li>
<li><a href="services.html"><i class="fas fa-cog"></i> Services</a></li>
<li><a href="contact.html"><i class="fas fa-phone-square"></i> Contact</a></li>
</div>
</ul>
<!--x Global Menu x-->
<!-- sidebar -->
<div class="sidebar_container">
<!-- Sidebar Image -->
<div class="image">
<img src="img/profile.jpg" alt="John Roe">
<div class="right_image_box"></div>
<div class="left_image_box"></div>
</div>
<!-- sidebar Content -->
<div class="sidebar_content">
<!-- Long name can be applied so easily -->
<h1>John Roe</h1>
<p>Website Designer</p>
<!-- Social Medias -->
<div class="social_media">
<a href="https://facebook.com/alivecoder"><i class="fab fa-facebook"></i></a>
<a href="https://github.com/alivecoder0"><i class="fab fa-github"></i></a>
<a href="https://instagram.com/alivecoder"><i class="fab fa-instagram"></i></a>
</div>
</div>
<!-- Sidebar Buttom Menu -->
<div class="sidebar_buttom_menu" id="sidebar_buttom_menu">
<i class="fa fa-bars" id="sidebar_menu_icon"></i>
</div>
<!-- Sidebar Navigation -->
<ul class="sidebar_navigation" id="sidebar_navigation">
<li><a href="/">About</a></li>
<li><a href="resume.html" class="active">Resume</a></li>
<li><a href="blogs.html">Blogs</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<!-- content -->
<div class="content_container">
<!-- Resume Page -->
<div class="resume_page">
<h2 class="title">My <span>Resume</span></h2>
<hr class="line">
<div class="resume_container">
<!-- Experience container -->
<div class="left_resume">
<h2 class="resume_title"><i class="fa fa-suitcase"></i> Experience</h2>
<div class="resume_box">
<span class="resume_date">2019-Present</span>
<p class="resume_box_title">Art Director</p>
<p class="resume_conpany">Google Inc</p>
<p class="resume_text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt,
doloremque.</p>
</div>
<div class="resume_box">
<span class="resume_date">2016-2019</span>
<p class="resume_box_title">Developer</p>
<p class="resume_conpany">Microsoft</p>
<p class="resume_text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt,
doloremque.</p>
</div>
<div class="resume_box">
<span class="resume_date">2014-2016</span>
<p class="resume_box_title">Designer</p>
<p class="resume_conpany">AliveCoder</p>
<p class="resume_text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt,
doloremque.</p>
</div>
</div>
<!-- Education Container -->
<div class="right_resume">
<h2 class="resume_title"><i class="fas fa-book-open"></i> Education</h2>
<div class="resume_box">
<span class="resume_date">2017-Present</span>
<p class="resume_box_title">Information Technology</p>
<p class="resume_conpany">Gomendra College</p>
<p class="resume_text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt,
doloremque.</p>
</div>
<div class="resume_box">
<span class="resume_date">2015-2017</span>
<p class="resume_box_title">Computer Scince</p>
<p class="resume_conpany">Amity College</p>
<p class="resume_text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt,
doloremque.</p>
</div>
<div class="resume_box">
<span class="resume_date">2014-2015</span>
<p class="resume_box_title">Prgramming</p>
<p class="resume_conpany">AliveCoder Institue</p>
<p class="resume_text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt,
doloremque.</p>
</div>
</div>
</div>
<h2 class="title">My <span>Skills</span></h2>
<hr class="line">
<!-- Skill Container -->
<div class="resume_container">
<div class="left_resume">
<h2 class="resume_title"><i class="fas fa-pencil-ruler"></i> Design</h2>
<div class="skill_box">
<h2 class="skill_title">Wordpress</h2>
<div class="skill_line_container">
<div class="skill_line" style="width: 80%;"></div>
</div>
</div>
<div class="skill_box">
<h2 class="skill_title">Photoshop</h2>
<div class="skill_line_container">
<div class="skill_line" style="width: 70%;"></div>
</div>
</div>
<div class="skill_box">
<h2 class="skill_title">Figma</h2>
<div class="skill_line_container">
<div class="skill_line" style="width: 60%;"></div>
</div>
</div>
</div>
<div class="right_resume">
<h2 class="resume_title"><i class="fas fa-code"></i> Coding</h2>
<div class="skill_box">
<h2 class="skill_title">C#</h2>
<div class="skill_line_container">
<div class="skill_line" style="width: 90%;"></div>
</div>
</div>
<div class="skill_box">
<h2 class="skill_title">C/C++</h2>
<div class="skill_line_container">
<div class="skill_line" style="width: 80%;"></div>
</div>
</div>
<div class="skill_box">
<h2 class="skill_title">HTML/CSS/JS</h2>
<div class="skill_line_container">
<div class="skill_line" style="width: 70%;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
service.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS file -->
<link rel="stylesheet" href="css/style.css">
<!-- Favicon -->
<link rel="shortcut icon" href="img/profile.jpg" type="image/x-icon">
<!-- Fontawesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>John Roe</title>
</head>
<body>
<!-- Website Layout -->
<div class="website_container">
<!-- Global Menu -->
<div id="global_menu_button_container">
<p class="site_title">John Roe</p>
<i class="fa fa-bars" id="global_menu_button"></i>
</div>
<ul id="global_menu_items">
<div>
<i class="fa fa-close" id="global_menu_close_button"></i>
<li><a href="/"><i class="fa fa-home"></i> About</a></li>
<li><a href="resume.html"><i class="fas fa-file-alt"></i> Resume</a></li>
<li><a href="blogs.html"><i class="fas fa-pen-nib"></i> Blogs</a></li>
<li><a href="services.html"><i class="fas fa-cog"></i> Services</a></li>
<li><a href="contact.html"><i class="fas fa-phone-square"></i> Contact</a></li>
</div>
</ul>
<!--x Global Menu x-->
<!-- sidebar -->
<div class="sidebar_container">
<!-- Sidebar Image -->
<div class="image">
<img src="img/profile.jpg" alt="John Roe">
<div class="right_image_box"></div>
<div class="left_image_box"></div>
</div>
<!-- sidebar Content -->
<div class="sidebar_content">
<!-- Long name can be applied so easily -->
<h1>John Roe</h1>
<p>Website Designer</p>
<!-- Social Medias -->
<div class="social_media">
<a href="https://facebook.com/alivecoder"><i class="fab fa-facebook"></i></a>
<a href="https://github.com/alivecoder0"><i class="fab fa-github"></i></a>
<a href="https://instagram.com/alivecoder"><i class="fab fa-instagram"></i></a>
</div>
</div>
<!-- Sidebar Buttom Menu -->
<div class="sidebar_buttom_menu" id="sidebar_buttom_menu">
<i class="fa fa-bars" id="sidebar_menu_icon"></i>
</div>
<!-- Sidebar Navigation -->
<ul class="sidebar_navigation" id="sidebar_navigation">
<li><a href="/">About</a></li>
<li><a href="resume.html">Resume</a></li>
<li><a href="blogs.html">Blogs</a></li>
<li><a href="services.html" class="active">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<!-- content -->
<div class="content_container">
<!-- Services Page -->
<div class="services_page">
<h2 class="title">My <span>Services</span></h2>
<hr class="line">
<!-- Services Row -->
<div class="services_container">
<div class="services_box">
<i class="fas fa-tablet-alt"></i>
<h3 class="services_title">App Development</h3>
<p class="services_text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aspernatur,
nobis. Lorem ipsum dolor sit amet. </p>
</div>
<div class="services_box">
<i class="fas fa-globe"></i>
<h3 class="services_title">Website Development</h3>
<p class="services_text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aspernatur,
nobis. Lorem ipsum dolor sit amet. </p>
</div>
</div>
<div class="services_container">
<div class="services_box">
<i class="fas fa-pencil-ruler"></i>
<h3 class="services_title">Web Design</h3>
<p class="services_text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aspernatur,
nobis. Lorem ipsum dolor sit amet. </p>
</div>
<div class="services_box">
<i class="fas fa-drafting-compass"></i>
<h3 class="services_title">Logo Desing</h3>
<p class="services_text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aspernatur,
nobis. Lorem ipsum dolor sit amet. </p>
</div>
</div>
<div class="services_container">
<div class="services_box">
<i class="fab fa-figma"></i>
<h3 class="services_title">Figma Desing</h3>
<p class="services_text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aspernatur,
nobis. Lorem ipsum dolor sit amet. </p>
</div>
<div class="services_box">
<i class="fas fa-search-location"></i>
<h3 class="services_title">SEO/Marketing</h3>
<p class="services_text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aspernatur,
nobis. Lorem ipsum dolor sit amet. </p>
</div>
</div>
</div>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
style.css
/* Google Font */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
/* CSS Reset */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
scroll-behavior: smooth;
font-family: "Poppins", sans-serif;
}
/* CSS Variables */
:root {
--brand-color: #00bfa6;
--linear-back: Linear-gradient(
180deg,
rgba(34, 193, 195, 1) 0%,
rgba(0, 191, 92, 1) 100%
);
}
a {
text-decoration: none;
color: black;
}
li {
list-style: none;
}
/* CSS in Body */
body {
height: 100vh;
width: 100vw;
background: var(--linear-back);
display: flex;
align-items: center;
justify-content: center;
}
.website_container {
width: 80%;
height: 80%;
display: flex;
padding: 1rem;
position: relative;
}
/* Sidebar */
.website_container .sidebar_container {
width: 35%;
height: 100%;
background-color: white;
margin-right: 1rem;
border-radius: 0.5rem;
overflow: hidden;
position: relative;
}
.sidebar_container .image {
height: 50%;
width: 100%;
position: relative;
}
.sidebar_container .image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
.sidebar_container .image .right_image_box {
width: 70%;
height: 100px;
background-color: white;
position: absolute;
bottom: -3.5rem;
left: -3rem;
transform: rotate(16deg);
}
.sidebar_container .image .left_image_box {
width: 70%;
height: 100px;
background-color: white;
position: absolute;
bottom: -3.5rem;
right: -3rem;
transform: rotate(-16deg);
}
.sidebar_container .sidebar_content {
position: absolute;
width: 100%;
margin-top: 2rem;
text-align: center;
padding: 0.4rem;
}
.sidebar_container .sidebar_content h1 {
color: black;
font-size: 2rem;
font-weight: 600;
}
.sidebar_container .sidebar_content p {
color: var(--brand-color);
font-size: 1rem;
text-transform: uppercase;
font-weight: 700;
}
.sidebar_container .sidebar_content .social_media {
margin-top: 1rem;
}
.sidebar_container .sidebar_content .social_media a {
font-size: 1.8rem;
margin: 0.4rem;
color: black;
}
.sidebar_container .sidebar_content .social_media a:hover {
color: var(--brand-color);
transition: 0.3s;
}
.sidebar_container .sidebar_buttom_menu {
position: absolute;
border-top: 0.2rem solid var(--brand-color);
width: 100%;
font-size: 1.6rem;
left: 0;
bottom: 0;
text-align: center;
cursor: pointer;
z-index: 3;
}
.sidebar_container .sidebar_buttom_menu:hover {
color: var(--brand-color);
transition: 0.3s;
}
/* Sidebar Navigation */
.sidebar_container .sidebar_navigation {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background-color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 2rem;
z-index: 2;
transition: left 0.3s;
}
.sidebar_container .sidebar_navigation li {
margin: 0.3rem 0;
}
.sidebar_container .sidebar_navigation li a:hover,
.sidebar_container .sidebar_navigation .active {
color: var(--brand-color);
transition: 0.3s;
font-weight: bold;
}
/* Content */
.website_container .content_container {
width: 100%;
height: 100%;
background-color: white;
border-radius: 0.5rem;
padding: 1rem;
overflow-y: scroll;
}
.content_container::-webkit-scrollbar {
width: 0.2rem;
}
.content_container::-webkit-scrollbar-thumb {
width: 0.2rem;
background-color: gray;
border-radius: 0.2rem;
}
/* About Page */
.title {
font-size: 1.6rem;
text-transform: uppercase;
}
.title span {
color: var(--brand-color);
}
.line {
width: 4rem;
border-top: 0.35rem solid black;
border-radius: 0.5rem;
}
.about_page .about_content {
margin-top: 1.2rem;
padding: 0.4rem;
margin-bottom: 0.5rem;
}
.about_page .about_content p {
font-size: 1rem;
text-align: justify;
}
.about_profile {
display: flex;
justify-content: space-between;
padding: 0.4rem;
}
.about_profile .left_profile {
width: 46%;
}
.about_profile .left_profile li {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0.3rem 0;
font-size: 1rem;
}
.about_profile .right_profile {
width: 46%;
}
.about_profile .right_profile li {
display: flex;
justify-content: space-between;
margin: 0.3rem 0;
align-items: center;
font-size: 1rem;
}
li .profile_title {
padding: 0.4rem;
background-color: var(--brand-color);
color: white;
border-radius: 0.3rem;
}
/* Resume Page */
.resume_page .resume_container {
margin: 1.2rem 0;
display: flex;
}
.left_resume {
width: 100%;
padding: 0.6rem;
border-right: 0.2rem solid var(--brand-color);
}
.right_resume {
width: 100%;
padding: 0.6rem;
}
.resume_title {
font-size: 1.2rem;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 1rem;
}
.resume_title i {
color: var(--brand-color);
}
.resume_box {
margin: 1.5rem 0;
}
.resume_box .resume_date {
font-size: 1rem;
border: 0.1rem solid var(--brand-color);
padding: 0.1rem 0.2rem;
color: var(--brand-color);
}
.resume_box .resume_box_title {
margin-top: 0.5rem;
font-size: 1.2rem;
font-weight: 500;
}
.resume_box .resume_company {
font-size: 1rem;
}
.resume_box .resume_text {
font-size: 1rem;
font-weight: 300;
}
/* Skills Container */
.skill_box .skill_title {
font-size: 1.2rem;
font-weight: 500;
}
.skill_box {
margin: 1rem 0;
}
.skill_box .skill_line_container {
height: 0.8rem;
width: 100%;
background-color: lightgray;
border-radius: 0.4rem;
overflow: hidden;
}
.skill_box .skill_line {
background-color: var(--brand-color);
height: 0.8rem;
}
/* Blogs Page */
.blogs_page .blogs_container {
margin: 0.4rem;
}
.blog_box {
margin-top: 1.2rem;
border: 0.1rem solid var(--brand-color);
padding: 0.5rem;
border-radius: 0.4rem;
}
.blog_box .blog_title {
font-size: 1.6rem;
text-transform: uppercase;
font-weight: 600;
}
.blog_box .blog_text {
margin: 0.4rem 0;
font-size: 1rem;
font-weight: 400;
text-align: justify;
}
.blog_box .blog_image {
width: 100%;
height: auto;
}
/* Services Page */
.services_page .services_container {
margin: 1.2rem 0.4rem 0.4rem 0.4rem;
display: flex;
}
.services_page .services_container .services_box {
width: 50%;
margin: 0.6rem;
border: 0.1rem solid var(--brand-color);
border-radius: 0.4rem;
padding: 0.6rem;
text-align: center;
cursor: pointer;
}
.services_page .services_container .services_box:hover {
background-color: var(--brand-color);
transition: 0.3s;
}
.services_page .services_container .services_box:hover i,
.services_page .services_container .services_box:hover .services_title {
color: white;
transition: 0.3s;
}
.services_box i {
color: var(--brand-color);
font-size: 1.5rem;
margin: 0.3rem 0;
}
.services_box .services_title {
font-size: 1.2rem;
text-transform: uppercase;
color: var(--brand-color);
margin: 0.4rem 0;
}
.services_box .services_text {
font-size: 1rem;
font-weight: 400;
}
/* Contact Page */
.contact_page .contact_container {
margin: 1.2rem 0.4rem;
}
.contact_container form .form_name_row {
display: flex;
justify-content: space-between;
}
.contact_container form .form_name_row .left_form_row {
width: 47%;
}
.contact_container form .form_name_row .right_form_row {
width: 47%;
}
.contact_container form label {
display: block;
font-size: 1rem;
margin-top: 0.8rem;
margin-left: 0.2rem;
}
.contact_container form input {
width: 100%;
font-size: 1rem;
padding: 0.3rem;
border: none;
outline: none;
background-color: lightgray;
border-radius: 0.4rem;
}
.contact_container form input:focus {
border: 0.2rem solid var(--brand-color);
transition: 0.3s;
}
.contact_container form textarea {
width: 100%;
font-size: 1rem;
padding: 0.3rem;
border: none;
outline: none;
background-color: lightgray;
border-radius: 0.4rem;
height: 6rem;
resize: none;
}
.contact_container form #send_button {
background-color: var(--brand-color);
margin-top: 0.6rem;
color: white;
font-weight: bold;
cursor: pointer;
}
.contact_container form #send_button:hover {
opacity: 0.8;
transition: 0.3s;
}
/* Global Menu CSS */
#global_menu_button_container {
position: absolute;
left: -3rem;
display: none;
margin-top: 0.1rem;
}
#global_menu_button_container #global_menu_button {
background-color: white;
font-size: 2rem;
padding: 0.8rem;
border-radius: 0.4rem;
cursor: pointer;
}
#global_menu_button_container #global_menu_button:hover {
color: var(--brand-color);
transition: 0.3s;
}
#global_menu_button_container p {
color: var(--brand-color);
font-size: 1.4rem;
font-weight: bold;
display: none;
}
#global_menu_items {
position: fixed;
left: -120%;
/* left: 0; */
top: 0;
background-color: white;
width: 40%;
height: 100vh;
z-index: 10;
display: flex;
justify-content: center;
transition: left 0.3s;
}
#global_menu_items div {
width: 80%;
margin-top: 4rem;
}
#global_menu_items li {
margin: 1rem 0;
}
#global_menu_items a {
display: block;
width: 100%;
padding: 0.4rem 0.2rem;
border-bottom: 0.1rem solid var(--brand-color);
font-size: 1.4rem;
}
#global_menu_items a:hover {
color: var(--brand-color);
transition: 0.3s;
}
#global_menu_items #global_menu_close_button {
position: absolute;
right: -3.3rem;
top: 0;
font-size: 2.6rem;
background-color: white;
padding: 0.6rem 0.8rem;
cursor: pointer;
}
#global_menu_items #global_menu_close_button:hover {
color: var(--brand-color);
transition: 0.3s;
}
/* Making Responsive */
@media screen and (max-width: 1200px) {
.website_container {
width: 92%;
height: 92%;
}
}
@media screen and (max-width: 1000px) {
body {
height: auto;
}
.website_container {
flex-direction: column;
width: 70%;
}
.website_container .sidebar_container {
width: 100%;
height: 80vh;
margin-bottom: 1rem;
}
.about_profile {
flex-direction: column;
}
.about_profile .left_profile {
width: 100%;
}
.about_profile .right_profile {
width: 100%;
}
#global_menu_button_container {
display: block;
}
}
@media screen and (max-width: 800px) {
.website_container {
margin-top: 10vh;
}
.resume_page .resume_container {
flex-direction: column;
}
.left_resume {
border-right: none;
border-bottom: 0.2rem solid var(--brand-color);
}
.services_page .services_container {
flex-direction: column;
margin: 0;
}
.services_page .services_container .services_box {
width: 100%;
margin: 0.6rem 0;
}
.contact_container form .form_name_row {
flex-direction: column;
}
.contact_container form .form_name_row .left_form_row {
width: 100%;
}
.contact_container form .form_name_row .right_form_row {
width: 100%;
}
#global_menu_button_container {
position: fixed;
top: -0.1rem;
left: 0;
z-index: 5;
width: 100%;
background-color: white;
height: 10vh;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 1rem;
}
#global_menu_button_container #global_menu_button {
color: black;
background-color: transparent;
padding: 0.2rem;
font-size: 1.6rem;
}
#global_menu_button_container p {
display: block;
}
#global_menu_items {
width: 100%;
}
#global_menu_items #global_menu_close_button {
left: 0;
text-align: center;
background-color: lightgray;
}
}
@media screen and (max-width: 680px) {
.website_container {
height: 100%;
width: 100%;
}
}
script.js
let sidebar_navigation = document.getElementById('sidebar_navigation');
let sidebar_navigation_bottom = document.getElementById('sidebar_buttom_menu');
sidebar_navigation_bottom.addEventListener('click', function () {
if (sidebar_navigation.style.left == "" || sidebar_navigation.style.left == "-100%") {
sidebar_navigation.style.left = "0"
document.getElementById('sidebar_menu_icon').classList.add('fa-close');
}
else {
sidebar_navigation.style.left = "-100%"
document.getElementById('sidebar_menu_icon').classList.remove('fa-close');
}
})
let global_menu_buttom = document.getElementById('global_menu_button')
let global_navigation = document.getElementById('global_menu_items')
let global_close_buttom = document.getElementById('global_menu_close_button')
global_menu_buttom.addEventListener('click', function () {
global_navigation.style.left = "0";
})
global_close_buttom.addEventListener('click', function () {
global_navigation.style.left = "-120%";
})
Final Words
Hope you like this post "Responsive Portfolio Website Using HTML CSS & JavaScript". Don't forget to share this post on social media. If you have any questions or suggestions then leave a comment below. Thanks for visiting,