## 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 ``` - **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: 1. **Clone the repository**: ```bash git clone https://github.com/abhishekgurjar-in/Snap-Website.git ``` 2. **Open the project directory**: ```bash cd Snap-Website ``` 3. **Run the project**: - Open the `index.html` file in a web browser to view the Snap Website. ## Usage 1. **Open the website** in a web browser. 2. **Explore the content** by interacting with the dropdown menus and hovering over elements. 3. **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: ```html Snap

Make
remote work

Get your team in sync, no matter your location. Streamline processes, create team rituals, and watch productivity soar.

``` ### CSS The `style.css` file styles the Snap Website, making it attractive and easy to use. Below are some key styles: ```css * { 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; } } ``` ### JavaScript The `script.js` file contains the logic for the dropdown menus and interactive elements. Here’s a snippet: ```javascript 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 }); ``` ## Live Demo You can check out the live demo of the Snap Website project [here](https://abhishekgurjar-in.github.io/Snap-Website/). ## 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! ## Credits This project was developed as part of my continuous learning journey in web development. ## Author - **Abhishek Gurjar** - [GitHub Profile](https://github.com/abhishekgurjar-in)

Make remote work

Make
remote work

snapwebsite

Build a Snap Website

Join Our Newsletter. No Spam, Only the good stuff.