How to Create a Portfolio Website using HTML CSS and JavaScript ?

Last Updated : 01 Dec, 2023

In this article, we are going to design and build a portfolio website from scratch using HTML, CSS, and JavaScript. A portfolio website is a website that represents you online on the web pages. It contains different sections like Introduction to Yourself, About You, Your Services, Your Contact Details, and Your Portfolio. We are going to build all of the sections with an interactive and attractive web design that attracts more visitors using HTML, CSS, and JavaScript.

Preview Image:

Preview Image of portfolio website

Approach:

The below defined steps can be utilised to build and design a portfolio website:

In the first step, we will create a folder with the project name and create the HTML, CSS, JavaScript files, Images folder and a separate file for the responsive CSS if required.
Now, use the different HTML tags like section, header, nav, meta, title, head, div, input, img etc to structure the web page.
Style the different components and the elements of HTML responsively to make the page attractive for every device using CSS.
Make use of the media queries to define the responsive styles and to adjust the width of the containers.
Use JavaScript to toggle the on click to the hamburger menu for small width devices to navigate through the page.

Example: The below example will explain you how to design and build a portfolio website using HTML, CSS, and JavaScript responsively for every device:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <title>My Portfolio</title> 
    <link rel="stylesheet" 
          href= 
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
          integrity= 
"sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
             crossorigin="anonymous" referrerpolicy="no-referrer" /> 
    <link rel="stylesheet" href="style.css"> 
    <link rel="stylesheet" href="responsive.css"> 
</head> 
  
<body> 
    <!-- Navbar header section -->
    <header class="header"> 
        <nav class="navbar"> 
            <div class="logo"> 
                <h2 class="logo-heading">Emrit Diyal</h2> 
            </div> 
            <div class="hamburger" id="hamburger"> 
                <i class="fas fa-bars hamburger-icon"></i> 
                <i class="fas fa-times cross-icon"></i> 
            </div> 
            <div class="menu"> 
                <ul class="menu-list"> 
                    <li class="menu-list-items"> 
                        <a class="links" href="#home"> 
                              Home 
                          </a> 
                    </li> 
                    <li class="menu-list-items"> 
                        <a class="links" href="#portfolio"> 
                              Portfolio 
                          </a> 
                    </li> 
                    <li class="menu-list-items"> 
                        <a class="links" href="#about"> 
                              About 
                          </a> 
                    </li> 
                    <li class="menu-list-items"> 
                        <a class="links" href="#services"> 
                              Services 
                          </a> 
                    </li> 
                    <li class="menu-list-items"> 
                        <a class="links" href="#contact"> 
                              Contact Me 
                          </a> 
                    </li> 
                </ul> 
            </div> 
        </nav> 
    </header> 
  
    <!-- Main hero banner -->
    <section id="home" class="hero"> 
        <div class="intro"> 
            <div class="headings"> 
                <h3 class="greet-heading">Hello, I'm</h3> 
                <h1 class="my-heading">Emrit Diyal</h1> 
                <h4 class="sub-heading"> 
                    A Software Engineer with 3 years of Experience. 
                </h4> 
            </div> 
            <div class="intro-buttons"> 
                <button class="btn common-btn">Hire Me</button> 
                <button class="btn ghost-btn">Get Resume</button> 
            </div> 
        </div> 
    </section> 
  
    <!-- Portfolio Section -->
    <section class="portfolio" id="portfolio"> 
        <div class="portfolio-heading"> 
            <h1 class="my-heading text-center">Featured Portfolio</h1> 
        </div> 
        <div class="portfolio-content"> 
            <div class="my-row"> 
                <div class="my-col"> 
                    <div class="my-card port-card"> 
                        <div class="image"> 
                            <img src="./Images/designImage2.avif" 
                                 alt="Web Design Image"> 
                        </div> 
                        <h3 class="greet-heading blue-text">Web Design</h3> 
                        <p class="small-para blue-text">Designing</p> 
                    </div> 
                </div> 
                <div class="my-col"> 
                    <div class="my-card port-card"> 
                        <div class="image"> 
                            <img src="./Images/webDevelopment2.avif" 
                                 alt="Web Development Image"> 
                        </div> 
                        <h3 class="greet-heading blue-text"> 
                              Web Development 
                          </h3> 
                        <p class="small-para blue-text">Development</p> 
                    </div> 
                </div> 
                <div class="my-col"> 
                    <div class="my-card port-card"> 
                        <div class="image"> 
                            <img src="./Images/SEOImage2.avif" alt="SEO Image"> 
                        </div> 
                        <h3 class="greet-heading blue-text">SEO</h3> 
                        <p class="small-para blue-text">Optimization</p> 
                    </div> 
                </div> 
            </div> 
            <div class="my-row"> 
                <div class="my-col"> 
                    <div class="my-card port-card"> 
                        <div class="image"> 
                            <img src="./Images/contentImage2.avif" 
                                 alt="Content Writting Image"> 
                        </div> 
                        <h3 class="greet-heading blue-text"> 
                              Content Writing 
                          </h3> 
                        <p class="small-para blue-text">Writing</p> 
                    </div> 
                </div> 
                <div class="my-col"> 
                    <div class="my-card port-card"> 
                        <div class="image"> 
                            <img src="./Images/wordpressImage2.avif" 
                                 alt="Wordpress Image"> 
                        </div> 
                        <h3 class="greet-heading blue-text"> 
                              WordPress Dev 
                          </h3> 
                        <p class="small-para blue-text"> 
                              Content Management System 
                          </p> 
                    </div> 
                </div> 
                <div class="my-col"> 
                    <div class="my-card port-card"> 
                        <div class="image"> 
                            <img src="./Images/videoEditing2.avif" 
                                 alt="Video Editing Image"> 
                        </div> 
                        <h3 class="greet-heading blue-text"> 
                              Video Editing 
                          </h3> 
                        <p class="small-para blue-text">Editing</p> 
                    </div> 
                </div> 
            </div> 
        </div> 
    </section> 
  
    <!-- About Section -->
    <section id="about" class="about"> 
        <div class="about-text"> 
            <h1 class="my-heading">About Me</h1> 
            <p class="lead-para"> 
                GeeksforGeeks is a leading platform  
                  that provides computer science 
                resources and coding challenges for  
                  programmers and technology 
                enthusiasts, along with interview  
                  and exam preparations for upcoming 
                aspirants. With a strong emphasis on  
                  enhancing coding skills and knowledge, 
                it has become a trusted destination  
                  for over 12 million plus registered 
                users worldwide. The platform offers  
                  a vast collection of tutorials, practice 
                problems, interview tutorials, articles,  
                  and courses, covering various domains 
                of computer science. 
            </p> 
            <p> 
                Our exceptional mentors hailing from top  
                  colleges & organizations have the 
                ability to guide you on a journey from  
                  the humble beginnings of coding to 
                the pinnacle of expertise. Under their  
                  guidance watch your skills flourish 
                as we lay the foundation and help you  
                  conquer the world of coding. 
            </p> 
        </div> 
        <div class="about-image"> 
            <img src="./Images/heroImg2.avif" alt="About Image"> 
        </div> 
    </section> 
  
    <!-- Services Section -->
    <section class="services" id="services"> 
        <div class="services-heading"> 
            <h1 class="my-heading text-center">My Services</h1> 
        </div> 
        <div class="services-content"> 
            <div class="my-row"> 
                <div class="my-col"> 
                    <div class="my-card"> 
                        <div class="icon"> 
                            <i class="fas fa-paint-brush"></i> 
                        </div> 
                        <h3 class="greet-heading blue-text">Web Design</h3> 
                        <p class="small-para"> 
                            Web development refers to the creating,  
                              building, and maintaining 
                            of websites. It includes aspects such as  
                              web design, web publishing, 
                            web programming, and database management.  
                              It is the creation of an 
                            application that works over the internet  
                              i.e. websites. 
                        </p> 
                        <p class="small-para"> 
                            Web development refers to the creating,  
                              building, and maintaining 
                            of websites. It includes aspects such as  
                              web design, web publishing, 
                            web programming, and database management.  
                              It is the creation of an 
                            application that works over the internet  
                              i.e. websites. 
                        </p> 
                    </div> 
                </div> 
                <div class="my-col"> 
                    <div class="my-card"> 
                        <div class="icon"> 
                            <i class="fa-solid fa-code"></i> 
                        </div> 
                        <h3 class="greet-heading blue-text"> 
                              Web Development 
                          </h3> 
                        <p class="small-para"> 
                            Web development refers to the creating,  
                              building, and maintaining 
                            of websites. It includes aspects such as  
                              web design, web publishing, 
                            web programming, and database management.  
                              It is the creation of an 
                            application that works over the internet  
                              i.e. websites. 
                        </p> 
                        <p class="small-para"> 
                            Web development refers to the creating,  
                              building, and maintaining 
                            of websites. It includes aspects such as  
                              web design, web publishing, 
                            web programming, and database management.  
                              It is the creation of an 
                            application that works over the internet  
                              i.e. websites. 
                        </p> 
                    </div> 
                </div> 
                <div class="my-col"> 
                    <div class="my-card"> 
                        <div class="icon"> 
                            <i class="fas fa-chart-line"></i> 
                        </div> 
                        <h3 class="greet-heading blue-text">SEO</h3> 
                        <p class="small-para"> 
                            Web development refers to the creating,  
                              building, and maintaining 
                            of websites. It includes aspects such as  
                              web design, web publishing, 
                            web programming, and database management.  
                              It is the creation of an 
                            application that works over the internet  
                              i.e. websites. 
                        </p> 
                        <p class="small-para"> 
                            Web development refers to the creating,  
                              building, and maintaining 
                            of websites. It includes aspects such as  
                              web design, web publishing, 
                            web programming, and database management.  
                              It is the creation of an 
                            application that works over the internet  
                              i.e. websites. 
                        </p> 
                    </div> 
                </div> 
            </div> 
            <div class="my-row"> 
                <div class="my-col"> 
                    <div class="my-card"> 
                        <div class="icon"> 
                            <i class="fas fa-quote-left"></i> 
                        </div> 
                        <h3 class="greet-heading blue-text"> 
                              Content Writting 
                          </h3> 
                        <p class="small-para"> 
                            Web development refers to the creating,  
                              building, and maintaining of websites.  
                              It includes aspects such as web design,  
                              web publishing, web programming, and  
                              database management. It is the creation  
                              of an application that works over the  
                              internet i.e. websites. 
                        </p> 
                        <p class="small-para"> 
                            Web development refers to the creating,  
                              building, and maintaining of websites.  
                              It includes aspects such as web design,  
                              web publishing, web programming, and  
                              database management. It is the creation of an 
                            application that works over the internet i.e.  
                              websites. 
                        </p> 
                    </div> 
                </div> 
                <div class="my-col"> 
                    <div class="my-card"> 
                        <div class="icon"> 
                            <i class="fab fa-wordpress-simple"></i> 
                        </div> 
                        <h3 class="greet-heading blue-text"> 
                              WordPress Dev 
                          </h3> 
                        <p class="small-para"> 
                            Web development refers to the creating,  
                              building, and maintaining of websites.  
                              It includes aspects such as web design,  
                              web publishing, web programming, and  
                              database management. It is the creation  
                              of an application that works over the  
                              internet i.e. websites. 
                        </p> 
                        <p class="small-para"> 
                            Web development refers to the creating,  
                              building, and maintaining 
                            of websites. It includes aspects such as  
                              web design, web publishing, 
                            web programming, and database management.  
                              It is the creation of an 
                            application that works over the internet  
                              i.e. websites. 
                        </p> 
                    </div> 
                </div> 
                <div class="my-col"> 
                    <div class="my-card"> 
                        <div class="icon"> 
                            <i class="fas fa-video"></i> 
                        </div> 
                        <h3 class="greet-heading blue-text"> 
                              Video Editing 
                          </h3> 
                        <p class="small-para"> 
                            Web development refers to the creating,  
                              building, and maintaining 
                            of websites. It includes aspects such as  
                              web design, web publishing, 
                            web programming, and database management.  
                              It is the creation of an 
                            application that works over the internet  
                              i.e. websites. 
                        </p> 
                        <p class="small-para"> 
                            Web development refers to the creating,  
                              building, and maintaining 
                            of websites. It includes aspects such as  
                              web design, web publishing, 
                            web programming, and database management.  
                              It is the creation of an 
                            application that works over the internet  
                              i.e. websites. 
                        </p> 
                    </div> 
                </div> 
            </div> 
        </div> 
    </section> 
  
    <!-- Contact me section -->
    <section class="contact" id="contact"> 
        <div class="contact-heading"> 
            <h1 class="my-heading text-center">Contact Me</h1> 
        </div> 
        <div class="contact-content"> 
            <div class="contact-form-container"> 
                <h1 class="greet-heading">Get In Touch</h1> 
                <form class="contact-form"> 
                    <input class="form-controls" type="text" 
                           placeholder="Your Name"> 
                    <input class="form-controls" type="text" 
                           placeholder="Your Email"> 
                    <input class="form-controls" type="text" 
                           placeholder="Your Phone"> 
                    <textarea class="form-controls" 
                              placeholder="Write your message" 
                              name="message" id="" cols="30"
                              rows="10"> 
                      </textarea> 
                    <input class="form-btn btn common-btn" 
                           type="submit" value="Send Message"> 
                </form> 
            </div> 
            <div class="contact-details"> 
                <h1 class="greet-heading">My Contact Details</h1> 
                <div class="details"> 
                    <h5 class="contact-heading">EMAIL</h5> 
                    <p class="contact-text">example@gmail.com</p> 
                </div> 
                <div class="details"> 
                    <h5 class="contact-heading">PHONE</h5> 
                    <p class="contact-text">+91 0123456789</p> 
                </div> 
                <div class="details"> 
                    <h5 class="contact-heading">FAX</h5> 
                    <p class="contact-text">+91 0123456789</p> 
                </div> 
                <div class="details"> 
                    <h5 class="contact-heading">ADDRESS</h5> 
                    <p class="contact-text">San Francisco, CA</p> 
                    <p>4th Floor8 Lower</p> 
                    <p>San Francisco street, M1 50F</p> 
                </div> 
            </div> 
        </div> 
    </section> 
  
    <!-- Footer section -->
    <footer class="footer"> 
        <div class="footer-content text-center"> 
            <h4> 
                Copyright © 2023 All rights reserved | 
                This portfolio website template is created  
                  by GeeksforGeeks. 
            </h4> 
            <div class="social-links"> 
                <div class="footer-menu"> 
                    <ul class="footer-menu-list"> 
                        <li class="footer-list-items"> 
                            <a class="footer-links" href="#"> 
                                <i class="fab fa-facebook-f"></i> 
                            </a> 
                        </li> 
                        <li class="footer-list-items"> 
                            <a class="footer-links" href="#"> 
                                <i class="fab fa-twitter"></i> 
                            </a> 
                        </li> 
                        <li class="footer-list-items"> 
                            <a class="footer-links" href="#"> 
                                <i class="fab fa-instagram"></i> 
                            </a> 
                        </li> 
                        <li class="footer-list-items"> 
                            <a class="footer-links" href="#"> 
                                <i class="fab fa-linkedin-in"></i> 
                            </a> 
                        </li> 
                    </ul> 
                </div> 
            </div> 
        </div> 
    </footer> 
  
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/js/all.min.js"
        integrity= 
"sha512-uKQ39gEGiyUJl4AI6L+ekBdGKpGw4xJ55+xyJG7YFlJokPNYegn9KwQ3P8A7aFQAUtUsAQHep+d/lrGqrbPIDQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"> 
      </script> 
    <script src="script.js"></script> 
</body> 
  
</html>

CSS

/* Styles defined for the desktop or the bigger screen devices*/
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); 
  
body { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: 'Poppins', sans-serif; 
} 
  
/* Header Navbar Styles */
.navbar { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    position: fixed; 
    top: 0; 
    width: 100%; 
    background-image: linear-gradient(90deg, #74D7BB, #53C8B6, #35A99C); 
    background-color: transparent; 
} 
  
.logo { 
    padding: 0 5rem; 
} 
  
.logo .logo-heading { 
    color: #fff; 
} 
  
.menu { 
    padding: 0 5rem; 
} 
  
.hamburger { 
    display: none; 
    color: #fff; 
    font-size: 25px; 
} 
  
.cross-icon { 
    display: none; 
} 
  
.menu .menu-list { 
    display: flex; 
    list-style: none; 
} 
  
.menu-list .menu-list-items { 
    padding: 0.5rem 1rem; 
} 
  
@media screen and (min-width: 856px) and (max-width: 1024px) { 
    .menu-list .menu-list-items { 
        padding: 0.5rem 0.3rem; 
    } 
} 
  
/* Main Hero Section Styles */
.hero { 
    background-image: url('./Images/heroImg3.avif'); 
    background-repeat: no-repeat; 
    background-size: 100% 100%; 
    width: 100%; 
    height: 100vh; 
    display: flex; 
    align-items: center; 
    justify-content: start; 
    margin: 4.8rem 0; 
} 
  
.hero .intro { 
    text-align: center; 
    margin: 0 5rem; 
} 
  
.hero .intro-buttons { 
    margin: 2rem 0; 
    display: flex; 
    align-items: center; 
    justify-content: space-evenly; 
} 
  
/* About section styles */
.about { 
    display: flex; 
    align-items: center; 
    background-image: linear-gradient(45deg, #363D73, #2794B3); 
    justify-content: space-between; 
    width: 100%; 
} 
  
.about .about-text { 
    width: 450px; 
    color: #fff; 
    padding: 5rem 1rem 5rem 5rem; 
} 
  
.about .about-image img { 
    height: 400px; 
    width: 450px; 
    padding: 5rem 5rem 5rem 1rem; 
} 
  
/* Portfolio section styles */
.portfolio { 
    margin: 4.8rem 0; 
    padding: 0 5rem; 
} 
  
.port-card { 
    padding: 0 !important; 
    background: none !important; 
    border: 2px solid #000; 
} 
  
.port-card .image { 
    width: 100%; 
} 
  
.port-card .image img { 
    height: 200px; 
    width: 100%; 
    border-top-right-radius: 20px; 
    border-top-left-radius: 20px; 
} 
  
/* Services section styles */
.services { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-direction: column; 
    margin: 4.8rem 0; 
    padding: 0 5rem; 
} 
  
.my-row { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    margin: 2rem 0; 
} 
  
.my-row .my-col { 
    text-align: center; 
    width: 30%; 
} 
  
.my-card { 
    text-align: center; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    border-radius: 20px; 
    background-image: linear-gradient(#74D7BB, #53C8B6, #35A99C); 
    padding: 1rem; 
} 
  
.icon { 
    height: 100px; 
    width: 100px; 
    border-radius: 50%; 
    background-color: #363D73; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 
  
.icon svg { 
    font-size: 30px; 
    color: #fff; 
} 
  
/* Contact section styles */
.contact { 
    padding: 0 5rem; 
} 
  
.contact-content { 
    display: flex; 
    margin: 3rem 0; 
    justify-content: space-between; 
} 
  
.contact-form-container { 
    width: 50%; 
} 
  
.contact-form { 
    display: flex; 
    flex-direction: column; 
} 
  
.contact-form .form-controls { 
    width: 80%; 
    padding: 10px 0; 
    margin: 1.67rem 0; 
} 
  
.contact-form .form-btn { 
    width: 83%; 
} 
  
.contact-details { 
    width: 50%; 
} 
  
/* Footer Styles */
.footer { 
    background-color: #000; 
    color: #fff; 
    padding: 2rem; 
} 
  
.footer-list-items { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    height: 50px; 
    width: 50px; 
    margin: 1rem 1rem 0 1rem; 
    border-radius: 50%; 
    background-color: #53C8B6; 
} 
  
.footer-links { 
    font-size: 24px; 
    color: #fff; 
    text-decoration: none; 
} 
  
.social-links { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 
  
.footer-menu { 
    padding: 0 5rem; 
} 
  
.footer-menu .footer-menu-list { 
    display: flex; 
    list-style: none; 
} 
  
  
  
  
  
  
/* utility classes */
.greet-heading { 
    font-size: 1.3rem; 
    font-weight: lighter; 
    margin: 0; 
    letter-spacing: 1px; 
} 
  
.my-heading { 
    font-size: 2.5rem; 
    margin: 0; 
} 
  
.sub-heading { 
    margin: 0; 
    font-size: 0.8rem; 
    color: #ccc; 
    font-weight: lighter; 
} 
  
.links:hover { 
    border-bottom: 2px solid #fff; 
} 
  
.links { 
    border-bottom: 2px solid transparent; 
    transition: all 0.25s; 
    padding: 5px; 
    text-decoration: none; 
    color: #fff; 
} 
  
.btn { 
    padding: 10px 20px; 
    border-radius: 5px; 
    cursor: pointer; 
    letter-spacing: 1px; 
    border: none; 
} 
  
.common-btn { 
    background-color: #35A99C; 
    color: #fff; 
    border: 2px solid #35A99C; 
    transition: all 0.25s; 
} 
  
.common-btn:hover { 
    background-color: #fff; 
    color: #35A99C; 
    border: 2px solid #35A99C; 
    outline: none; 
} 
  
.ghost-btn { 
    background-color: #fff; 
    color: #35A99C; 
    border: 2px solid #35A99C; 
    outline: none; 
} 
  
.ghost-btn:hover { 
    background-color: #35A99C; 
    color: #fff; 
    transition: all 0.25s; 
    border: 2px solid #35A99C; 
} 
  
.heading-span { 
    font-weight: bolder; 
} 
  
.text-center { 
    text-align: center; 
} 
  
.small-para { 
    font-size: 14px; 
    color: #fff; 
} 
  
.white-text { 
    color: #fff; 
} 
  
.blue-text { 
    color: #363D73; 
}

CSS

/* Responsive CSS file styles defined for smaller width devices */
/* CSS for tablet devices */
@media screen and (min-width: 576px) and (max-width: 820px) { 
    .logo { 
        padding: 0 3rem; 
    } 
  
    .hamburger { 
        display: block; 
        padding: 0 3rem; 
    } 
  
    .menu { 
        position: absolute; 
        right: 0; 
        padding: 0 3rem; 
        top: 75px; 
        background-image: linear-gradient(180deg, #74D7BB, #53C8B6, #35A99C); 
        display: none; 
        transition: all 0.25s; 
    } 
  
    .menu .menu-list { 
        flex-direction: column; 
    } 
  
    .portfolio { 
        padding: 0; 
    } 
  
    .about { 
        flex-direction: column; 
    } 
  
    .about .about-text { 
        padding: 2rem; 
    } 
  
    .about .about-image img { 
        padding: 2rem; 
    } 
  
    .services { 
        padding: 0; 
    } 
  
    .my-row { 
        gap: 10px; 
    } 
  
    .my-row .my-col { 
        text-align: center; 
        width: 35%; 
    } 
  
} 
  
  
/* CSS for mobile devices */
@media screen and (min-width: 280px) and (max-width: 576px) { 
    .hero { 
        justify-content: center; 
        color: #fff; 
        background-image: radial-gradient(circle, rgb(15 14 14 / 30%), rgb(102 96 96 / 40%), rgb(163 160 160 / 16%)), url('./Images/heroImg3.avif') 
    } 
  
    .sub-heading { 
        color: #fff9f9cc; 
    } 
  
    .hero .intro-buttons { 
        gap: 20px; 
    } 
  
    .btn { 
        padding: 10px 30px; 
    } 
  
    .logo { 
        padding: 0 2rem; 
    } 
  
    .menu { 
        position: absolute; 
        right: 0; 
        padding: 0 2rem; 
        top: 75px; 
        background-image: linear-gradient(180deg, #35A99C, #53C8B6, #74D7BB); 
        display: none; 
        transition: all 0.25s; 
    } 
  
    .menu .menu-list { 
        flex-direction: column; 
    } 
  
    .hamburger { 
        display: block; 
        padding: 0 2rem; 
    } 
  
    .portfolio { 
        padding: 0; 
    } 
  
    .about { 
        flex-direction: column; 
    } 
  
    .about .about-text { 
        width: 90%; 
        padding: 1rem; 
    } 
  
    .about .about-image img { 
        width: 90%; 
        padding: 1rem; 
    } 
  
    .services { 
        padding: 0; 
    } 
  
    .my-row { 
        display: flex; 
        align-items: center; 
        justify-content: space-between; 
        flex-direction: column; 
        margin: 2rem 0; 
        gap: 1rem; 
    } 
  
    .my-row .my-col { 
        text-align: center; 
        width: 100%; 
    } 
  
    .contact { 
        padding: 0; 
    } 
  
    .contact-content { 
        flex-direction: column; 
        align-items: center; 
        gap: 2rem; 
    } 
  
    .contact-form-container { 
        width: 80%; 
    } 
  
    .contact-form .form-controls { 
        width: 100%; 
    } 
  
    .contact-form .form-btn { 
        width: 100%; 
    } 
  
    .contact-details { 
        width: 80%; 
    } 
  
    .footer-menu { 
        padding: 0 2rem; 
    } 
  
    .footer-list-items { 
        margin: 0; 
    } 
}

Javascript

const hamburger = document.getElementById('hamburger'); 
const menu = document.querySelector('.menu'); 
  
hamburger.addEventListener('click', function () { 
    const hamIcon = this.querySelector('.hamburger-icon'); 
    const crossIcon = this.querySelector('.cross-icon'); 
    if (hamIcon.style.display === "none") { 
        hamIcon.style.display = "inline-block"
        menu.style.display = "none"
        crossIcon.style.display = "none"
    } 
    else { 
        crossIcon.style.display = "inline-block"
        hamIcon.style.display = "none"
        menu.style.display = "block"
    } 
});