Hallo Entwickler! Ich freue mich, mein neuestes Projekt vorstellen zu können: eineSnap-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.
DieSnap-Websiteist 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.
Hier ein Überblick über die Projektstruktur:
Snap-Website/ ├── index.html ├── style.css └── script.js
Um mit dem Projekt zu beginnen, befolgen Sie diese Schritte:
Klonen Sie das Repository:
git clone https://github.com/abhishekgurjar-in/Snap-Website.git
Öffnen Sie das Projektverzeichnis:
cd Snap-Website
Führen Sie das Projekt aus:
Die Datei index.html definiert die Struktur der Snap-Website, einschließlich Navigation, Inhaltsabschnitten und interaktiven Elementen. Hier ist ein Ausschnitt:
Snap Make
remote workGet your team in sync, no matter your location. Streamline processes, create team rituals, and watch productivity soar.
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; } }
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 = ` 
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 });
Sie können sich hier die Live-Demo des Snap-Website-Projekts ansehen.
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!
Dieses Projekt wurde als Teil meiner kontinuierlichen Lernreise in der Webentwicklung entwickelt.
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!
