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

導入

開発者の皆さん、こんにちは！私の最新プロジェクトであるスナップ ウェブサイトをご紹介できることを嬉しく思います。このプロジェクトは、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: ドロップダウン メニューなどのインタラクティブな要素を管理します。

インストール

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

1. リポジトリのクローンを作成します:
   

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

2. プロジェクト ディレクトリを開きます:
   

   cd Snap-Website
   

3. プロジェクトを実行します:

   • Web ブラウザでindex.html ファイルを開いて、Snap Web サイトを表示します。

使用法

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

コードの説明

HTML

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

  <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="スナップ 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>

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 開発における私の継続的な学習の一環として開発されました。

著者

• アビシェク・グルジャル
  GitHub プロフィール

以上がスナップ Web サイトを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。