To the index.html file, add the following.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"/> <title>Portfolio</title> </head> <body> <header> <nav> <img src="https://cdn-icons-png.flaticon.com/512/826/826904.png" width="50" /> <i id="menu" class="fa-solid fa-bars fa-2xl"></i> <div id="items"> <a href="/index.html">Home</a> <a href="#projects">Projects</a> <a href="#contact">Contact</a> </div> </nav> <div> <h1>Your Name.</h1> <hr /> <h3>Web Developer</h3> <p>A short web developer description.</p> <div> <a href="https://twitter.com/LincCodes"><i class="fa-brands fa-twitter fa-2xl"></i></a> <a href="https://www.instagram.com/linccodes/"><i class="fa-brands fa-instagram fa-2xl"></i></a> </div> </div> </header> <section class="sec1" id="projects"> <h2>Projects</h2> <hr /> <p>The projects you have built.</p> <div> <div> <img src="https://images.pexels.com/photos/1591060/pexels-photo-1591060.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" /> <p>Lorem ipsum dolor sit amet.</p> </div> <div> <img src="https://images.pexels.com/photos/326501/pexels-photo-326501.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=940" /> <p>Lorem ipsum dolor sit amet.</p> </div> <div> <img src="https://images.pexels.com/photos/270637/pexels-photo-270637.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=940" /> <p>Lorem ipsum dolor sit amet.</p> </div> </div> </section> <section class="sec2" id="contact"> <h2>Contact</h2> <hr /> <p>Feel free to reach out to me.</p> <div> <a href="https://twitter.com/LincCodes"><i class="fa-brands fa-twitter fa-2xl"></i></a> <a href="https://www.instagram.com/linccodes/"><i class="fa-brands fa-instagram fa-2xl"></i></a> </div> </section> <footer> <p>Copyright @ 2022 - Linc</p> </footer> <script src="script.js"></script> </body> </html>
The code might look complex but it isn’t. The code is actually broken down into 4 parts, the header, two sections and a footer.
To the style.css file, add the following.
@import url("https://fonts.googleapis.com/css2?family=Poppins&family=Redressed&family=Rubik&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins&family=Redressed&family=Rubik&display=swap"); * { padding: 0; margin: 0; box-sizing: border-box; font-family: "Rubik", sans-serif; color: #fff; } h1, h2, h3 { font-family: "Redressed", cursive; text-align: center; padding: 10px 0; } p { text-align: center; padding: 0 0 20px 0; } ::-webkit-scrollbar { width: 0; } body { background-color: #000428; width: 100%; } hr { background-color: rgb(255, 92, 92); width: 200px; height: 4px; border: 0; margin-bottom: 10px; } header { min-height: 100vh; background-image: url("https://images.pexels.com/photos/3165335/pexels-photo-3165335.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"); background-size: cover; background-position: center; opacity: 0.9; } nav { display: flex; justify-content: space-between; align-items: center; padding: 20px; } a { padding: 10px; } a:hover { color: skyblue; } nav > div > a { text-decoration: none; font-size: 1.25rem; display: block; text-align: center; } nav > div > a:hover { border: 0; background-color: skyblue; color: #000; } nav > div { display: none; } header > div { min-height: 70vh; padding: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; } section { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; } .sec1 { background: linear-gradient(to top, #000428, #01427a); } .sec2 { background: linear-gradient(to bottom, #000428, #01427a); } .sec1 > div { display: grid; grid-template-columns: 1fr; padding: 30px; } .sec1 > div > div { padding: 10px 0; } .sec1 > div > div > img { width: 100%; } footer { padding: 30px; background-color: #000428; display: flex; justify-content: center; align-items: center; } .show { display: block !important; position: fixed; top: 0px; right: 0px; padding: 20px; background-color: #000428; opacity: 0.8; width: 70%; height: 100vh; } @media screen and (min-width: 600px) { nav > div > a { display: inline; } h1 { font-size: 3em; } h2 { font-size: 2em; } h3, p { font-size: 1.25em; } nav > #menu { display: none; } nav > div { display: inline; } .sec1 > div { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } } @media screen and (min-width: 800px) { h1 { font-size: 4em; } h2 { font-size: 3em; } h3, p { font-size: 1.5em; } nav > #menu { display: none; } nav > div > a { display: inline; } .sec1 > div { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; } }
Again, one is free to style it to their liking, the @import url() is used to import a font family into the webpage and the @media screen and (min-width: 0px) is a media query used to make the webpage responsive.
To the script.js file, add the following.
const menu = document.querySelector("#menu"); const items = document.querySelector("#items"); const body = document.querySelector("body"); menu.addEventListener("click", show); items.addEventListener("click", hide); body.addEventListener("click", hide, true); function show() { items.classList.add("show"); } function hide() { items.classList.remove("show"); }
The code above selects the div tags with an id of “menu”, items and the body tag and shows and hides the navigation menu on click but adding and removing a class that has display value “none”, check the above CSS style for more info.