スナップ Web サイトを構築する-jsチュートリアル-php.cn

スナップ Web サイトを構築する

WBOY

リリース： 2024-08-31 06:33:39

オリジナル

1125 人が閲覧しました

Build a Snap Website

導入

開発者の皆さん、こんにちは！私の最新プロジェクトであるスナップウェブサイトをご紹介できることを嬉しく思います。このプロジェクトは、HTML、CSS、JavaScript を使用して、直感的なデザインとインタラクティブな機能を備えた最新の応答性の高い Web サイトを構築したい人に最適です。これは、視覚的に魅力的で機能的な Web ページを作成しながら、フロントエンド開発スキルを向上させる優れた方法です。

プロジェクト概要

スナップ Web サイト は、すっきりとしたプロフェッショナルなレイアウトで製品やサービスを紹介するように設計された単一ページの Web サイトです。このプロジェクトでは、どのデバイスでも見栄えの良い、レスポンシブでインタラクティブな Web ページを作成する方法を示します。

特徴

レスポンシブデザイン: Web サイトは完全にレスポンシブで、デスクトップとモバイルデバイスの両方で見栄えが良くなります。
インタラクティブな要素: ユーザーインタラクションを強化するドロップダウンメニューとホバー効果が含まれています。
モダンな美学: 洗練されたフォントとミニマルなデザイン原則を使用し、モダンな外観でスタイル付けされています。

使用されている技術

HTML: Snap Web サイトの構造を提供します。
CSS: Web サイトを視覚的に魅力的で使いやすいスタイルに設定します。
JavaScript: ドロップダウンメニューやホバー効果などの対話機能を Web サイトに追加します。

プロジェクトの構造

プロジェクト構造の概要は次のとおりです:

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

ログイン後にコピー

index.html: Snap Web サイトの HTML 構造が含まれています。
style.css: モダンでレスポンシブなデザインを作成するための CSS スタイルが含まれています。
script.js: ドロップダウンメニューなどのインタラクティブな要素を管理します。

インストール

プロジェクトを開始するには、次の手順に従います:

リポジトリのクローンを作成します:
```
git clone https://github.com/abhishekgurjar-in/Snap-Website.git
```
ログイン後にコピー
プロジェクトディレクトリを開きます:
```
cd Snap-Website
```
ログイン後にコピー
プロジェクトを実行します:
- Web ブラウザでindex.html ファイルを開いて、Snap Web サイトを表示します。

使用法

Web ブラウザで Web サイトを開きます。
コンテンツを探索します。ドロップダウンメニューを操作し、要素の上にマウスを移動します。
ブラウザウィンドウのサイズを変更するか、別のデバイスで Web サイトを開いて、レスポンシブデザインを表示します。

コードの説明

HTML

index.html ファイルは、ナビゲーション、コンテンツセクション、インタラクティブ要素など、Snap Web サイトの構造を定義します。スニペットは次のとおりです:

<!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="スナップ Web サイトを構築する"></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>

ログイン後にコピー

CSS

style.css ファイルは、Snap Web サイトのスタイルを設定し、魅力的で使いやすいものにします。以下にいくつかの主要なスタイルを示します:

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

script.js ファイルには、ドロップダウンメニューとインタラクティブ要素のロジックが含まれています。スニペットは次のとおりです:

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

ログイン後にコピー

ライブデモ

ここで Snap Website プロジェクトのライブデモをチェックできます。

結論

Snap Web サイトの構築は貴重な学習経験であり、応答性の高いインタラクティブな Web ページを作成するスキルを向上させることができました。このプロジェクトは、最新の Web デザインと開発の優れた例であり、独自のレスポンシブ Web サイトを作成するきっかけとなることを願っています。コーディングを楽しんでください!

クレジット

このプロジェクトは、Web 開発における私の継続的な学習の一環として開発されました。

著者