Build a Snap Website-JS Tutorial-php.cn

Build a Snap Website

Introduction

Hello, developers! I’m excited to present my latest project: a Snap Website. This project is perfect for those who want to build a modern, responsive website with an intuitive design and interactive features using HTML, CSS, and JavaScript. It’s a great way to enhance your frontend development skills while creating a visually appealing and functional web page.

Project Overview

The Snap Website is a single-page website designed to showcase a product or service with a clean and professional layout. This project demonstrates how to create a responsive and interactive web page that looks great on any device.

Features

Responsive Design: The website is fully responsive, ensuring it looks great on both desktop and mobile devices.
Interactive Elements: Includes dropdown menus and hover effects to enhance user interaction.
Modern Aesthetics: Styled with a modern look, using sleek fonts and minimalistic design principles.

Technologies Used

HTML: Provides the structure for the Snap Website.
CSS: Styles the website to ensure it is visually appealing and user-friendly.
JavaScript: Adds interactivity to the website, such as dropdown menus and hover effects.

Project Structure

Here’s an overview of the project structure:

Snap-Website/
├── index.html
├── style.css
└── script.js

Copy after login

index.html: Contains the HTML structure for the Snap Website.
style.css: Includes CSS styles to create a modern and responsive design.
script.js: Manages the interactive elements like dropdown menus.

Installation

To get started with the project, follow these steps:

Clone the repository:

git clone https://github.com/abhishekgurjar-in/Snap-Website.git

Copy after login

Open the project directory:
```
cd Snap-Website
```
Copy after login
Run the project:
- Open the index.html file in a web browser to view the Snap Website.

Usage

Open the website in a web browser.
Explore the content by interacting with the dropdown menus and hovering over elements.
View the responsive design by resizing the browser window or opening the website on different devices.

Code Explanation

HTML

The index.html file defines the structure of the Snap Website, including navigation, content sections, and interactive elements. Here’s a snippet:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>Snap</title>
  <link href="https://fonts.googleapis.com/css?family=Epilogue:100,200,300,regular,500,600,700,800,900,100italic,200italic,300italic,italic,500italic,600italic,700italic,800italic,900italic" rel="stylesheet" />
  <link rel="stylesheet" href="style.css">
  <script src="./script.js" defer></script>
</head>
<body>
  <div class="container">
    <nav>
      <div class="logo"><img src="./images/logo.svg" alt="Build a Snap Website"></div>
      <div class="header">
        <p class="featuresDropdown">Features <span><img src="./images/icon-arrow-down.svg" alt="Arrow Down"></span></p>
        <p class="companyDropdown">Company <span><img src="./images/icon-arrow-down.svg" alt="Arrow Down"></span></p>
        <p>Careers</p>
        <p>About</p>
      </div>
      <div class="login">
        <p>Login</p>
        <button>Register</button>
      </div>
    </nav>
    <div class="dropdown"></div>
    <div class="box">
      <div class="left-box">
        <h1>Make <br> remote work</h1>
        <p>Get your team in sync, no matter your location. Streamline processes, 
          create team rituals, and watch productivity soar.</p>
        <button>Learn more</button>
        <div class="client-image">
          <img src="./images/client-databiz.svg" alt="Databiz">
          <img src="./images/client-audiophile.svg" alt="Audiophile">
          <img src="./images/client-meet.svg" alt="Meet">
          <img src="./images/client-maker.svg" alt="Maker">
        </div>
      </div>
      <div class="right-box">
        <img src="./images/image-hero-desktop.png" alt="Hero Image">
      </div>
    </div>
    <div class="footer">
      <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
  </div>
</body>
</html>

Copy after login

CSS

The style.css file styles the Snap Website, making it attractive and easy to use. Below are some key styles:

* {
  box-sizing: border-box;
}

body {
  font-family: Epilogue;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 1440px;
  margin: auto;
}

nav {
  margin: 20px;
  width: 88%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
}

.logo img {
  width: 90px;
}

.header {
  display: flex;
  gap: 20px;
}

.login {
  display: flex;
  align-items: center;
  gap: 20px;
}

.login button {
  background-color: rgb(255, 255, 255);
  border-radius: 15px;
  padding-inline: 14px;
  padding-block: 8px;
  color: gray;
  border: 1px solid gray;
  cursor: pointer;
}

.login button:hover {
  color: black;
}

nav p {
  color: gray;
  cursor: pointer;
}

nav p:hover {
  color: black;
}

.box {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  margin: 70px;
}

.left-box {
  width: 50%;
}

.left-box h1 {
  font-size: 90px;
}

.left-box p {
  font-size: 17px;
}

.left-box button {
  font-size: 22px;
  margin-top: 100px;
  padding: 12px;
  background-color: black;
  color: white;
  border-radius: 19px;
  cursor: pointer;
}

.left-box button:hover {
  background-color: white;
  color: black;
}

.right-box img {
  width: 50%;
  max-width: 480px;
}

.client-image {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 80px;
}

.feature-dropdown {
  position: fixed;
  background-color: white;
  width: 170px;
  left: 425px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: gray;
  box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.3);
}

.feature-dropdown p:hover {
  color: black;
  cursor: pointer;
}

.company-dropdown {
  position: fixed;
  width: 140px;
  left: 580px;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: gray;
  box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.3);
}

.company-dropdown p:hover {
  color: black;
  cursor: pointer;
}

.footer {
  margin: 30px;
  text-align: center;
}

@media (max-width: 800px) {
  .box {
    flex-direction: column;
    align-items: center;
    gap: 100px;
  }

  nav {
    align-items: flex-start;
    gap: 50px;
  }

  .header {
    flex-direction: column;
  }

  .client-image {
    flex-direction: column;
    gap: 80px;
  }
}

Copy after login

JavaScript

The script.js file contains the logic for the dropdown menus and interactive elements. Here’s a snippet:

const featuresDropdown = document.getElementsByClassName("featuresDropdown")[0];
const companyDropdown = document.getElementsByClassName("companyDropdown")[0];
const dropdown = document.getElementsByClassName("dropdown")[0];

featuresDropdown.addEventListener("mouseover", () => {
    const featureDiv = document.createElement('div');
    featureDiv.classList.add("feature-dropdown");
    featureDiv.innerHTML = `
        <p><span><img src="./images/icon-todo.svg" alt=""></span>   Todo List</p>
        <p><span><img src="./images/icon-calendar.svg" alt=""></span>   Calendar</p>
        <p><span><img src="./images/icon-reminders.svg" alt=""></span>   Reminders</p>
        <p><span><img src="./images/icon-planning.svg" alt=""></span>   Planning</p>
    `;
    dropdown.innerHTML = '';  // Clear any previous dropdown content
    dropdown.appendChild(featureDiv);
    dropdown.style.display = 'block';  // Show the dropdown
});

companyDropdown.addEventListener("mouseover", () => {
    const companyDiv = document.createElement('div');
    companyDiv.classList.add("company-dropdown");
    companyDiv.innerHTML = `
        <p>History</p>
        <p>Our Team</p>
        <p>Blog</p>
    `;
    dropdown.innerHTML = '';  // Clear any previous dropdown content
    dropdown.appendChild(companyDiv);
    dropdown.style.display = 'block';  // Show the dropdown
});

// To handle mouseout to hide dropdowns
featuresDropdown.addEventListener("mouseout", () => {
    setTimeout(() => {
        if (!dropdown.matches(':hover') && !featuresDropdown.matches(':hover')) {
            dropdown.style.display = 'none';
        }
    }, 100);  // Timeout to ensure the mouseover event on the dropdown itself is registered
});

companyDropdown.addEventListener("mouseout", () => {
    setTimeout(() => {
        if (!dropdown.matches(':hover') && !companyDropdown.matches(':hover')) {
            dropdown.style.display = 'none';
        }
    }, 100);  // Timeout to ensure the mouseover event on the dropdown itself is registered
});

dropdown.addEventListener("mouseout", () => {
    setTimeout(() => {
        if (!dropdown.matches(':hover') && !featuresDropdown.matches(':hover') && !companyDropdown.matches(':hover')) {
            dropdown.style.display = 'none';
        }
    }, 100);  // Timeout to ensure the mouseover event on the dropdown itself is registered
});

dropdown.addEventListener("mouseover", () => {
    dropdown.style.display = 'block';  // Keep the dropdown visible while hovering over it
});

Copy after login

Live Demo

You can check out the live demo of the Snap Website project here.

Conclusion

Building the Snap Website was a valuable learning experience, allowing me to enhance my skills in creating responsive and interactive web pages. This project is a great example of modern web design and development, and I hope it inspires you to create your own responsive websites. Happy coding!