Build a Snap Website-JS Tutorial-php.cn

Build a Snap Website

Introduction

Hello, developers! I’m excited to present my latest project: aSnap 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

TheSnap Websiteis 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 websitein a web browser.
Explore the contentby interacting with the dropdown menus and hovering over elements.
View the responsive designby 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:

     Snap    
    
  Features 
 Company 
 Careers
 About
 
  Login
  
 
 
   Make 
 remote work
 Get your team in sync, no matter your location. Streamline processes, create team rituals, and watch productivity soar.
       
 
   
 
  Made with ❤️ by Abhishek Gurjar

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 = `  Todo List
  Calendar
  Reminders
  Planning
 `; 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 = ` History
 Our Team
 Blog
 `; 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!