Bina Laman Web Snap

pengenalan

Helo, pembangun! Saya teruja untuk membentangkan projek terbaharu saya: Tapak Web Snap. Projek ini sesuai untuk mereka yang ingin membina tapak web yang moden dan responsif dengan reka bentuk intuitif dan ciri interaktif menggunakan HTML, CSS dan JavaScript. Ini cara yang bagus untuk meningkatkan kemahiran pembangunan bahagian hadapan anda sambil mencipta halaman web yang menarik dan berfungsi secara visual.

Gambaran Keseluruhan Projek

Tapak Web Snap ialah tapak web satu halaman yang direka untuk mempamerkan produk atau perkhidmatan dengan reka letak yang bersih dan profesional. Projek ini menunjukkan cara membuat halaman web responsif dan interaktif yang kelihatan hebat pada mana-mana peranti.

Ciri-ciri

• Reka Bentuk Responsif: Tapak web responsif sepenuhnya, memastikan ia kelihatan hebat pada kedua-dua peranti desktop dan mudah alih.
• Elemen Interaktif: Termasuk menu lungsur turun dan kesan tuding untuk meningkatkan interaksi pengguna.
• Estetika Moden: Digayakan dengan rupa moden, menggunakan fon anggun dan prinsip reka bentuk minimalis.

Teknologi yang Digunakan

• HTML: Menyediakan struktur untuk Tapak Web Snap.
• CSS: Menggayakan tapak web untuk memastikan ia menarik secara visual dan mesra pengguna.
• JavaScript: Menambahkan interaktiviti pada tapak web, seperti menu lungsur turun dan kesan tuding.

Struktur Projek

Berikut ialah gambaran keseluruhan struktur projek:

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

• index.html: Mengandungi struktur HTML untuk Tapak Web Snap.
• style.css: Termasuk gaya CSS untuk mencipta reka bentuk moden dan responsif.
• script.js: Mengurus elemen interaktif seperti menu lungsur turun.

Pemasangan

Untuk memulakan projek, ikut langkah berikut:

1. Klon repositori:
   

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

2. Buka direktori projek:
   

   cd Snap-Website
   

3. Jalankan projek:

   • Buka fail index.html dalam pelayar web untuk melihat Tapak Web Snap.

Penggunaan

1. Buka tapak web dalam penyemak imbas web.
2. Teroka kandungan dengan berinteraksi dengan menu lungsur turun dan melayang di atas elemen.
3. Lihat reka bentuk responsif dengan mengubah saiz tetingkap penyemak imbas atau membuka tapak web pada peranti yang berbeza.

Penerangan Kod

HTML

Fail index.html mentakrifkan struktur Tapak Web Snap, termasuk navigasi, bahagian kandungan dan elemen interaktif. Berikut adalah coretan:

  <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>


  <div class="container">
    <nav>
      <div class="logo"><img src="./images/logo.svg" alt="Bina Laman Web Snap"></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>

CSS

Fail style.css menggayakan Tapak Web Snap, menjadikannya menarik dan mudah digunakan. Di bawah ialah beberapa gaya utama:

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

Fail script.js mengandungi logik untuk menu lungsur turun dan elemen interaktif. Berikut adalah coretan:

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

Demo Langsung

Anda boleh melihat demo langsung projek Tapak Web Snap di sini.

Kesimpulan

Membina Laman Web Snap ialah pengalaman pembelajaran yang berharga, membolehkan saya meningkatkan kemahiran saya dalam mencipta halaman web yang responsif dan interaktif. Projek ini ialah contoh hebat reka bentuk dan pembangunan web moden, dan saya harap ia memberi inspirasi kepada anda untuk mencipta tapak web responsif anda sendiri. Selamat mengekod!

Kredit

Projek ini dibangunkan sebagai sebahagian daripada perjalanan pembelajaran berterusan saya dalam pembangunan web.

Pengarang

• Abhishek Gurjar
  • Profil GitHub

Atas ialah kandungan terperinci Bina Laman Web Snap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!