Erstellen Sie eine Snap-Website-js-Tutorial-php.cn

Build a Snap Website

Einführung

Hallo Entwickler! Ich freue mich, mein neuestes Projekt vorstellen zu können: eine Snap-Website. Dieses Projekt ist perfekt für diejenigen, die eine moderne, reaktionsfähige Website mit intuitivem Design und interaktiven Funktionen mithilfe von HTML, CSS und JavaScript erstellen möchten. Dies ist eine großartige Möglichkeit, Ihre Frontend-Entwicklungsfähigkeiten zu verbessern und gleichzeitig eine optisch ansprechende und funktionale Webseite zu erstellen.

Projektübersicht

Die Snap-Website ist eine einseitige Website, die darauf ausgelegt ist, ein Produkt oder eine Dienstleistung mit einem klaren und professionellen Layout zu präsentieren. Dieses Projekt zeigt, wie man eine responsive und interaktive Webseite erstellt, die auf jedem Gerät gut aussieht.

Merkmale

Responsives Design: Die Website ist vollständig responsiv, sodass sie sowohl auf Desktop- als auch auf Mobilgeräten gut aussieht.
Interaktive Elemente: Enthält Dropdown-Menüs und Hover-Effekte zur Verbesserung der Benutzerinteraktion.
Moderne Ästhetik: Mit einem modernen Look gestylt, mit eleganten Schriftarten und minimalistischen Designprinzipien.

Verwendete Technologien

HTML: Stellt die Struktur für die Snap-Website bereit.
CSS: Gestaltet die Website so, dass sie optisch ansprechend und benutzerfreundlich ist.
JavaScript: Fügt der Website Interaktivität hinzu, z. B. Dropdown-Menüs und Hover-Effekte.

Projektstruktur

Hier ein Überblick über die Projektstruktur:

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

Nach dem Login kopieren

index.html: Enthält die HTML-Struktur für die Snap-Website.
style.css: Enthält CSS-Stile, um ein modernes und ansprechendes Design zu erstellen.
script.js: Verwaltet die interaktiven Elemente wie Dropdown-Menüs.

Installation

Um mit dem Projekt zu beginnen, befolgen Sie diese Schritte:

Klonen Sie das Repository:

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

Nach dem Login kopieren

Öffnen Sie das Projektverzeichnis:
```
cd Snap-Website
```
Nach dem Login kopieren
Führen Sie das Projekt aus:
- Öffnen Sie die Datei index.html in einem Webbrowser, um die Snap-Website anzuzeigen.

Verwendung

Öffnen Sie die Website in einem Webbrowser.
Erkunden Sie den Inhalt, indem Sie mit den Dropdown-Menüs interagieren und mit der Maus über Elemente fahren.
Sehen Sie sich das responsive Design an, indem Sie die Größe des Browserfensters ändern oder die Website auf verschiedenen Geräten öffnen.

Code-Erklärung

HTML

Die Datei index.html definiert die Struktur der Snap-Website, einschließlich Navigation, Inhaltsabschnitten und interaktiven Elementen. Hier ist ein Ausschnitt:

<!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="Erstellen Sie eine 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>

Nach dem Login kopieren

CSS

Die style.css-Datei gestaltet die Snap-Website und macht sie attraktiv und benutzerfreundlich. Nachfolgend sind einige wichtige Stile aufgeführt:

* {
  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;
  }
}

Nach dem Login kopieren

JavaScript

Die Datei script.js enthält die Logik für die Dropdown-Menüs und interaktiven Elemente. Hier ist ein Ausschnitt:

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
});

Nach dem Login kopieren

Live-Demo

Sie können sich hier die Live-Demo des Snap-Website-Projekts ansehen.

Abschluss

Der Aufbau der Snap-Website war eine wertvolle Lernerfahrung, die es mir ermöglichte, meine Fähigkeiten bei der Erstellung responsiver und interaktiver Webseiten zu verbessern. Dieses Projekt ist ein großartiges Beispiel für modernes Webdesign und -entwicklung und ich hoffe, es inspiriert Sie dazu, Ihre eigenen responsiven Websites zu erstellen. Viel Spaß beim Codieren!

Credits

Dieses Projekt wurde als Teil meiner kontinuierlichen Lernreise in der Webentwicklung entwickelt.

Autor

Abhishek Gurjar
- GitHub-Profil

Das obige ist der detaillierte Inhalt vonErstellen Sie eine Snap-Website. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!