Welcome back Coders. Hope you all are doing good. Today in this article we are going to learn how to create this responsive personal portfolio website using just html, css and javascript. If you have not read our previous articles where we have built Responsive Start up Website and Responsive Agency Website, Please read those articles too, we have learnt a lot while building those websites.
Note : You can download all the Images and entire source code by clicking on the download button at the bottom of this article.
What is a Portfolio Website?
A Personal portfolio website is mostly used to showcase your skills and all the projects you have done. For example, I am a frontend web developer and I can create a portfolio website and tell me about myself, and show the whole world that I have developed these projects. You can also add your contact details where people can contact you if they want to hire you.
Having a portfolio website can help a recruiter know more about you. The people having their portfolio website tends to get the job then the people who do not have.
So, today in this article we are going to learn how to create this amazing portfolio website. You can either use this website or you can just build this website to practice.
What we will be Building in this article ?
- Responsive Header / Navigation Section
- Responsive Home / Hero Section
- Responsive Portfolio Section
- Custom Scroll bar
- Responsive Resume Section
- Responsive About Me Section
- Responsive Clients Testimonial Section
- Responsive My Services Section
- Responsive Blogs Section
- Responsive Contact Section
- Responsive Footer Section
So that’s a lot to build right? Don’t worry I am going to guide you through each and everything. I have provided both step by step video tutorial as well as this article to help you build this Responsive Portfolio website. So lets get started.
Build Responsive Portfolio Website using HTML, CSS and JavaScript | Video Tutorial
If you are a complete beginner or if you are having trouble understanding this article then this video is for you. In the video I have built and explained each and everything step by step. Consider watching the video tutorial if you are a beginner.
Responsive Portfolio Website using HTML, CSS and JavaScript | Free Source Code
Project Setup :
As usual, we will start by importing everything that is required.
Creating Files : We will need three files. index.html, styles.css & script.js
Google Font Icons : We will be using Icons from the Google Font Icons. They provide a huge list of icons which we can use in our website. In order to use those icons in our project, we need to head over to Google font Icons. There inside developer guide, you will find a link tag which we should copy and paste it inside the header section of our website.
IonIcons : We will also be using Icons from IonIcons. Head over to ionic.io/ionicons. Inside usage you will find two script tags. Copy them and paste inside the body section of our website.
That’s it for the imports. Inside the css file we will clear out the default margin and padding applied by the browser and set the font family. And then we will add our custom scrollbar.We will also set some utility classes which will be used many times in the project. And also declare some css variables. Refer the code below.
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" />
<title>Portfolio Website</title>
<!-- google font icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<!-- local css file -->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<!-- ion icons import -->
<script
type="module"
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<!-- local js file -->
<script src="script.js"></script>
</body>
</html>
styles.css
* {
font-family: 'Segoe UI', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
border: none;
text-decoration: none;
text-transform: capitalize;
transition: 0.2s linear;
}
/* css variables */
:root {
--white: #fff;
--dark-gray: #ababab;
--light-gray: #808080;
--dark-bg: #222222;
--light-bg: #333333;
--yellow: #bac964;
--box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}
html {
font-size: 62.5%;
overflow-x: hidden;
scroll-behavior: smooth;
scroll-padding-top: 6rem;
}
html::-webkit-scrollbar {
width: 1rem;
}
html::-webkit-scrollbar-track {
background: var(--white);
}
html::-webkit-scrollbar-thumb {
background: var(--light-bg);
}
body {
background-color: var(--dark-bg);
}
section {
padding: 5rem 9%;
}
.heading {
color: var(--white);
font-size: 3rem;
font-weight: 200;
text-align: center;
padding-bottom: 4rem;
}
.heading span {
font-weight: 700;
}
.btn {
background-color: var(--yellow);
font-size: 1.7rem;
padding: 1rem 2rem;
border-radius: 2rem;
color: var(--white);
text-transform: uppercase;
margin-right: 1rem;
display: inline-block;
margin-top: 1rem;
}
Building Responsive Home Section :
As usual, we will keep the home section very simple. It is going to have the parallax effect on the background image. It will contain a hero text with the name. And then we will style it accordingly.
index.html
<!-- home section starts -->
<section class="home" id="home">
<h1 class="hero-text">
hello, i'm <br />
<span>john doe</span>
</h1>
<p>this is my resume</p>
</section>
<!-- home section ends -->
styles.css
/* home */
.home {
height: 100vh;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('images/hero-image.jpeg');
filter: grayscale(100%);
background-size: cover;
background-position: center;
background-attachment: fixed;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
.home .hero-text {
font-size: 7rem;
color: var(--white);
font-weight: 200;
line-height: 1.2;
}
.home .hero-text span {
font-weight: 800;
}
.home p {
color: var(--dark-gray);
font-size: 1.5rem;
margin-top: 2rem;
text-transform: uppercase;
letter-spacing: 0.3rem;
}
/* home */
Building Responsive Header Section :
Header section will have 5 anchor links, each linking to other sections of the website. Header will also have a menu icon from the google fonts, we will style but, will set it to display none. Thats because we dont want it display on desktop screens. We want to display on tablet screens and below.
Header section is also going to have an active class which will add through javascript when the user scrolld down. The active class will make the header background turn to white.
index.html
<!-- header section starts -->
<header class="header">
<a><i class="menu material-icons"> menu </i></a>
<nav class="navbar">
<a href="#">home</a>
<a href="#portfolio">portfolio</a>
<a href="#resume">resume</a>
<a href="#about">about</a>
<a href="#contact">contact</a>
</nav>
</header>
<!-- header section ends -->
styles.css
/* header */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 5rem 9%;
z-index: 100;
}
.header.active {
background-color: var(--white);
padding: 3rem 9%;
}
.header.active .navbar a {
color: var(--dark-bg);
}
.header.active .navbar a:hover {
color: var(--yellow);
}
.header.active .menu {
color: var(--dark-bg);
}
.header .navbar {
display: flex;
align-items: center;
justify-content: center;
}
.header .navbar a {
font-size: 1.5rem;
color: var(--white);
padding: 0 2rem;
letter-spacing: 0.3rem;
font-weight: 300;
text-transform: uppercase;
}
.header .menu {
font-size: 2.5rem;
color: var(--white);
cursor: pointer;
text-align: left;
display: none;
}
/* header */
script.js
document.onscroll = () => {
if (window.scrollY > 0) {
document.querySelector('.header').classList.add('active');
} else {
document.querySelector('.header').classList.remove('active');
}
};
document.onload = () => {
if (window.scrollY > 0) {
document.querySelector('.header').classList.add('active');
} else {
document.querySelector('.header').classList.remove('active');
}
};
Building Responsive Portfolio Section :
For the portfolio section we will use grid to create responsive columns. For the large screen we will have three columns and will reduce the number of columns as our screen gets smaller. When we hover on the image we will make the image scale up and make the content appear from bottom.
index.html
<!-- portfolio section starts -->
<section class="portfolio" id="portfolio">
<h1 class="heading">featured <span>portfolio</span></h1>
<div class="box-container">
<div class="box">
<div class="image">
<img src="images/portfolio-1.jpeg" alt="" />
<div class="content">
<h2>project #1</h2>
</div>
</div>
</div>
<div class="box">
<div class="image">
<img src="images/portfolio-2.jpeg" alt="" />
<div class="content">
<h2>project #2</h2>
</div>
</div>
</div>
<div class="box">
<div class="image">
<img src="images/portfolio-3.jpeg" alt="" />
<div class="content">
<h2>project #3</h2>
</div>
</div>
</div>
<div class="box">
<div class="image">
<img src="images/portfolio-4.jpeg" alt="" />
<div class="content">
<h2>project #4</h2>
</div>
</div>
</div>
<div class="box">
<div class="image">
<img src="images/portfolio-5.jpeg" alt="" />
<div class="content">
<h2>project #5</h2>
</div>
</div>
</div>
<div class="box">
<div class="image">
<img src="images/portfolio-6.jpeg" alt="" />
<div class="content">
<h2>project #6</h2>
</div>
</div>
</div>
</div>
</section>
<!-- portfolio section ends -->
styles.css
/* portfolio */
.portfolio .box-container .box .image {
height: 30rem;
overflow: hidden;
position: relative;
}
.portfolio .box-container .box .image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.portfolio .box-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap: 4rem;
}
.portfolio .box-container .box {
background-color: var(--light-bg);
padding: 1rem;
box-shadow: var(--box-shadow);
}
.portfolio .box-container .box:hover .image img {
transform: scale(1.2);
}
.portfolio .box-container .box .image .content {
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-color: var(--light-bg);
padding: 1rem;
display: flex;
align-items: center;
justify-content: center;
transform: translateY(100%);
}
.portfolio .box-container .box .image .content h2 {
font-size: 2rem;
color: var(--white);
letter-spacing: 0.1rem;
text-transform: uppercase;
}
.portfolio .box-container .box:hover .image .content {
transform: translateY(0);
}
/* portfolio */
Building Responsive Resume Section :
Again we will use the power of grid to create two columns. One for the education and one for the experience.
index.html
<!-- resume section starts -->
<section class="resume" id="resume">
<h1 class="heading">my <span>resume</span></h1>
<div class="col-container">
<div class="col">
<h2>education</h2>
<div class="box">
<span><i class="material-icons"> calendar_today </i> Jan 2019 - Jan 2020</span>
<h3>masters in computer science</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam ut perferendis quas
tenetur adipisci sunt!
</p>
<p class="university">new york university</p>
</div>
<div class="box">
<span><i class="material-icons"> calendar_today </i> Jan 2020 - Jan 2021</span>
<h3>masters in computer science</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam ut perferendis quas
tenetur adipisci sunt!
</p>
<p class="university">new york university</p>
</div>
<div class="box">
<span><i class="material-icons"> calendar_today </i> Jan 2021 - Jan 2022</span>
<h3>masters in computer science</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam ut perferendis quas
tenetur adipisci sunt!
</p>
<p class="university">new york university</p>
</div>
<div class="box">
<span><i class="material-icons"> calendar_today </i> Jan 2022 - present</span>
<h3>masters in computer science</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam ut perferendis quas
tenetur adipisci sunt!
</p>
<p class="university">new york university</p>
</div>
</div>
<div class="col">
<h2>experience</h2>
<div class="box">
<span><i class="material-icons"> calendar_today </i> Jan 2019 - Jan 2020</span>
<h3>lead software developer</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam ut perferendis quas
tenetur adipisci sunt!
</p>
<p class="university">new york university</p>
</div>
<div class="box">
<span><i class="material-icons"> calendar_today </i> Jan 2020 - Jan 2021</span>
<h3>lead software developer</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam ut perferendis quas
tenetur adipisci sunt!
</p>
<p class="university">new york university</p>
</div>
<div class="box">
<span><i class="material-icons"> calendar_today </i> Jan 2021 - Jan 2022</span>
<h3>lead software developer</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam ut perferendis quas
tenetur adipisci sunt!
</p>
<p class="university">new york university</p>
</div>
<div class="box">
<span><i class="material-icons"> calendar_today </i> Jan 2022 - present</span>
<h3>lead software developer</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam ut perferendis quas
tenetur adipisci sunt!
</p>
<p class="university">new york university</p>
</div>
</div>
</div>
</section>
<!-- resume section ends -->
styles.css
/* resume */
.resume .col-container .col .box {
background-color: var(--light-bg);
padding: 2.5rem;
margin: 2rem 0;
box-shadow: var(--box-shadow);
}
.resume .col-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap: 4rem;
}
.resume .col-container .col h2 {
font-size: 2.5rem;
color: var(--white);
font-weight: 200;
padding-bottom: 2rem;
}
.resume .col-container .col .box span {
color: var(--white);
font-size: 1.7rem;
display: flex;
align-items: center;
}
.resume .col-container .col .box span i {
padding-right: 0.5rem;
font-size: 1.7rem;
}
.resume .col-container .col .box h3 {
color: var(--yellow);
font-size: 2rem;
margin-top: 1rem;
font-weight: 400;
}
.resume .col-container .col .box p {
font-size: 1.7rem;
color: var(--dark-gray);
margin-top: 1rem;
line-height: 1.5;
text-transform: none;
}
.resume .col-container .col .box .university {
color: var(--light-gray);
text-transform: capitalize;
}
/* resume */
Building Responsive About Section :
About section will have two columns, one for the image and one for the content. Using grid we can create columns easily.
index.html
<!-- about section starts -->
<section class="about" id="about">
<div class="box-container">
<div class="box">
<div class="image">
<img src="images/hero-image.jpeg" alt="" />
</div>
</div>
<div class="box">
<h1 class="heading">about <span>me</span></h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto quibusdam illum
repellat aperiam ratione quidem voluptatem quod, non modi sequi debitis quas tenetur atque
voluptas rem quo alias nesciunt. Similique?
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda harum sed laboriosam modi
maiores numquam?
</p>
<a href="#" class="btn">hire me</a>
<a href="#" class="btn">download cv</a>
</div>
</div>
</section>
<!-- about section ends -->
styles.css
/* about */
.about .box-container .box .image {
height: 100%;
overflow: hidden;
}
.about .box-container .box .image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.about .box-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap: 4rem;
}
.about .box-container .box p {
color: var(--dark-gray);
margin-bottom: 2rem;
font-size: 1.7rem;
letter-spacing: 0.1rem;
line-height: 1.5;
text-transform: none;
}
/* about */
Building Responsive Client Testimonial Section :
We will build client testimonial section with three people, meaning we need three responsive columns. So lets use grid.
index.html
<!-- clients section starts -->
<section class="clients" id="clients">
<h1 class="heading">client <span>testimonial</span></h1>
<div class="box-container">
<div class="box">
<div class="image">
<img src="images/person_1.jpg" alt="" />
</div>
<div class="content">
<p>
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae, earum incidunt est
voluptates quisquam aut temporibus ea neque."
</p>
<p>- ethan, CEO <span>XYZ Inc</span></p>
</div>
</div>
<div class="box">
<div class="image">
<img src="images/person_2.jpg" alt="" />
</div>
<div class="content">
<p>
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae, earum incidunt est
voluptates quisquam aut temporibus ea neque."
</p>
<p>- ethan, CEO <span>XYZ Inc</span></p>
</div>
</div>
<div class="box">
<div class="image">
<img src="images/person_3.jpg" alt="" />
</div>
<div class="content">
<p>
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae, earum incidunt est
voluptates quisquam aut temporibus ea neque."
</p>
<p>- ethan, CEO <span>XYZ Inc</span></p>
</div>
</div>
</div>
</section>
<!-- clients section ends -->
styles.css
/* clients */
.clients .box-container .box .image {
width: 12rem;
height: 12rem;
overflow: hidden;
margin: 0 auto;
}
.clients .box-container .box .image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.clients .box-container .box {
text-align: center;
background-color: var(--light-bg);
padding: 2.5rem;
box-shadow: var(--box-shadow);
}
.clients .box-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap: 4rem;
}
.clients .box-container .box .content {
margin-top: 2rem;
}
.clients .box-container .box .content p:nth-child(1) {
font-size: 1.7rem;
color: var(--dark-gray);
margin-bottom: 2rem;
line-height: 1.5;
letter-spacing: 0.1rem;
text-transform: none;
}
.clients .box-container .box .content p:nth-child(2) {
font-style: italic;
font-size: 1.5rem;
color: var(--light-gray);
}
.clients .box-container .box .content p:nth-child(2) span {
color: var(--yellow);
font-style: normal;
}
/* clients */
Building Responsive Services Section :
For the services section we will be using icons from the google font icons. Refer the code below to import the required icon. Again we will use grid to create three responsive columns. Will also add hover effect on the button.
index.html
<!-- services section starts -->
<section class="services" id="services">
<h1 class="heading">my <span>services</span></h1>
<div class="box-container">
<div class="box">
<i class="icon material-icons"> grid_view </i>
<h2>web design</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis debitis expedita
cupiditate quisquam voluptas minima doloribus sed quidem! Soluta, aliquid.
</p>
<a href="#" class="btn-2">learn more <i class="material-icons"> navigate_next </i></a>
</div>
<div class="box">
<i class="icon material-icons"> smart_display </i>
<h2>video editing</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis debitis expedita
cupiditate quisquam voluptas minima doloribus sed quidem! Soluta, aliquid.
</p>
<a href="#" class="btn-2">learn more <i class="material-icons"> navigate_next </i></a>
</div>
<div class="box">
<i class="icon material-icons"> poll </i>
<h2>search engine optimization</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis debitis expedita
cupiditate quisquam voluptas minima doloribus sed quidem! Soluta, aliquid.
</p>
<a href="#" class="btn-2">learn more <i class="material-icons"> navigate_next </i></a>
</div>
</div>
</section>
<!-- services section ends -->
styles.css
/* services */
.services .box-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap: 4rem;
}
.services .box-container .box {
background-color: var(--light-bg);
padding: 2.5rem;
text-align: center;
box-shadow: var(--box-shadow);
}
.services .box-container .box .icon {
font-size: 4rem;
color: var(--light-bg);
background-color: var(--yellow);
padding: 2.5rem;
border-radius: 50%;
margin-bottom: 2rem;
}
.services .box-container .box h2 {
font-size: 2rem;
color: var(--white);
font-weight: 400;
margin-bottom: 2rem;
}
.services .box-container .box p {
font-size: 1.7rem;
color: var(--dark-gray);
margin-bottom: 2rem;
line-height: 1.5;
text-transform: none;
letter-spacing: 0.1rem;
}
.services .box-container .box .btn-2 {
font-size: 1.7rem;
color: var(--yellow);
display: flex;
justify-content: center;
}
.services .box-container .box .btn-2:hover i {
padding-left: 1.5rem;
}
/* services */
Building Responsive Blogs Section :
Blogs section will also have three responsive columns. At this time you might have observed the power of grid.
index.html
<!-- blogs section starts -->
<section class="blogs" id="blogs">
<h1 class="heading">my <span>blogs</span></h1>
<div class="box-container">
<div class="box">
<div class="image">
<img src="images/post-1.jpeg" alt="" />
</div>
<div class="content">
<h2>creative product designer</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tenetur doloribus ipsam
voluptatem hic. Vitae, maxime.
</p>
<span><i class="material-icons"> calendar_today </i> Jan 9, 2022</span>
<span><i class="material-icons"> chat_bubble_outline </i> 5 comments</span>
</div>
</div>
<div class="box">
<div class="image">
<img src="images/post-2.jpeg" alt="" />
</div>
<div class="content">
<h2>creative product designer</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tenetur doloribus ipsam
voluptatem hic. Vitae, maxime.
</p>
<span><i class="material-icons"> calendar_today </i> Jan 9, 2022</span>
<span><i class="material-icons"> chat_bubble_outline </i> 5 comments</span>
</div>
</div>
<div class="box">
<div class="image">
<img src="images/post-3.jpeg" alt="" />
</div>
<div class="content">
<h2>creative product designer</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tenetur doloribus ipsam
voluptatem hic. Vitae, maxime.
</p>
<span><i class="material-icons"> calendar_today </i> Jan 9, 2022</span>
<span><i class="material-icons"> chat_bubble_outline </i> 5 comments</span>
</div>
</div>
</div>
</section>
<!-- blogs section ends -->
styles.css
/* blogs */
.blogs .box-container .box .image {
height: 30rem;
overflow: hidden;
}
.blogs .box-container .box .image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.blogs .box-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap: 4rem;
}
.blogs .box-container .box {
background-color: var(--light-bg);
}
.blogs .box-container .box .content {
padding: 2.5rem;
}
.blogs .box-container .box .content h2 {
font-size: 2rem;
color: var(--white);
font-weight: 400;
margin-bottom: 2rem;
}
.blogs .box-container .box .content p {
color: var(--dark-gray);
margin-bottom: 2rem;
font-size: 1.7rem;
}
.blogs .box-container .box .content span {
font-size: 1.5rem;
color: var(--light-gray);
margin-right: 2rem;
}
.blogs .box-container .box .content span i {
font-size: 1.7rem;
vertical-align: -0.3rem;
}
.blogs .box-container .box .content span:hover {
color: var(--yellow);
cursor: pointer;
}
/* blogs */
Building Responsive Contact Section :
Our contact section will have one column for the form and another column for the contact information.
index.html
<!-- contact section starts -->
<section class="contact" id="contact">
<h1 class="heading">get <span>in touch</span></h1>
<div class="col-container">
<div class="col">
<h2>get in touch</h2>
<input type="text" placeholder="your name" />
<input type="email" placeholder="your email" />
<input type="text" placeholder="your phone" />
<textarea name="" placeholder="write a message" id="" cols="30" rows="10"></textarea>
<a href="#" class="btn">send message</a>
</div>
<div class="col">
<h2>my contact details</h2>
<p>email</p>
<span>site@gmail.com</span>
<br />
<br />
<p>phone</p>
<span>+30 976 1234 3434</span>
<br />
<br />
<p>fax</p>
<span>+30 976 1234 3434</span>
<br />
<br />
<p>address</p>
<span>
san francisco, CA <br />
4th floor 8 lower <br />
san francisco street, m1 50f
</span>
</div>
</div>
</section>
<!-- contact section ends -->
styles.css
/* contact */
.contact .col-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
gap: 6rem;
}
.contact .col-container .col h2 {
font-size: 2.5rem;
color: var(--white);
font-weight: 200;
padding-bottom: 5rem;
}
.contact .col-container .col input,
.contact .col-container .col textarea {
background-color: var(--light-bg);
width: 100%;
padding: 1rem 2rem;
border-radius: 0.5rem;
font-size: 1.7rem;
color: var(--dark-gray);
margin: 0.5rem 0;
resize: vertical;
}
.contact .col-container .col p {
font-size: 1.7rem;
color: var(--yellow);
text-transform: uppercase;
letter-spacing: 0.1rem;
}
.contact .col-container .col span {
font-size: 1.5rem;
color: var(--dark-gray);
letter-spacing: 0.1rem;
}
/* contact */
Building Responsive Footer Section :
Lets keep our footer simple. We will use icons from the icon icons. Refer the code below to import those required icons.
index.html
<!-- footer section starts -->
<section class="footer" id="footer">
<div class="socials">
<ion-icon name="logo-google"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
<ion-icon name="logo-youtube"></ion-icon>
<ion-icon name="logo-linkedin"></ion-icon>
</div>
<p>desinged and developed by future coders</p>
</section>
<!-- footer section ends -->
styles.css
/* footer */
.footer {
border-top: 0.2rem solid var(--light-bg);
text-align: center;
}
.footer .socials ion-icon {
font-size: 2.5rem;
color: var(--yellow);
background-color: var(--light-bg);
border-radius: 50%;
padding: 1rem;
margin: 0 1rem;
cursor: pointer;
}
.footer p {
font-size: 1.7rem;
color: var(--dark-gray);
margin-top: 3rem;
}
/* footer */
Creating Responsive Mobile Navigation & Making the Website Responsive :
Since we have used grid throughout our project. By Default the website will be responsive but still lets fix some things. First lets start by building Responsive mobile navigation.
styles.css
/* media queries */
@media (max-width: 1200px) {
.header {
padding: 3rem 2rem;
}
.header.active {
padding: 2rem;
}
section {
padding: 3rem 2rem;
}
}
@media (max-width: 991px) {
html {
font-size: 60%;
}
}
@media (max-width: 768px) {
.header .menu {
display: block;
}
.header .navbar {
position: fixed;
top: 6rem;
left: 0;
right: 0;
background-color: var(--white);
display: flex;
flex-direction: column;
align-items: center;
transform: translateX(100%);
}
.header .navbar.show {
transform: translateX(0);
}
.header .navbar a {
color: var(--dark-bg);
margin: 0;
font-size: 2rem;
margin: 2rem 0;
}
}
@media (max-width: 450px) {
html {
font-size: 55%;
}
.home .hero-text {
font-size: 6rem;
}
}
/* media queries */
script.js
const navbar = document.querySelector('.header .navbar');
const menuButton = document.querySelector('.header .menu');
menuButton.addEventListener('click', () => {
navbar.classList.toggle('show');
});
document.onscroll = () => {
navbar.classList.remove('show');
if (window.scrollY > 0) {
document.querySelector('.header').classList.add('active');
} else {
document.querySelector('.header').classList.remove('active');
}
};
document.onload = () => {
if (window.scrollY > 0) {
document.querySelector('.header').classList.add('active');
} else {
document.querySelector('.header').classList.remove('active');
}
};
That’s it. Hope you enjoyed while building this website. If you have any doubts feel free to ask them in the comment section below.
Download Source Code of Responsive Personal Portfolio Website built using pure HTML, CSS and JavaScript
