Google homepage design HTML and CSS code

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Google</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f2f2f2;
    }

.container {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      text-align: center;
    }

.logo {
      margin-top: 100px;
    }

.search-container {
      margin-top: 30px;
    }

#searchInput {
      width: 60%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 16px;
    }

button {
      padding: 10px 20px;
      background-color: #4285f4;
      border: none;
      border-radius: 5px;
      color: #fff;
      font-size: 16px;
      cursor: pointer;
    }

button:hover {
      background-color: #357ae8;
    }

.links {
      margin-top: 30px;
      display: flex;
      justify-content: center;
    }

.links a {
      margin: 0 10px;
      font-size: 14px;
      color: #555;
      text-decoration: none;
    }

.footer {
      margin-top: 50px;
      font-size: 14px;
      color: #555;
    }
  </style>
</head>
<body>
  <div class="container">
    <img alt="Google Logo" class="logo" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
    <div class="search-container">
      <form id="searchForm">
        <input type="text" id="searchInput" placeholder="Search Google...">
        <button type="submit">Search</button>
      </form>
    </div>
    <div class="links">
      <a href="#">About</a>
      <a href="#">Store</a>
      <a href="#">Gmail</a>
      <a href="#">Images</a>
    </div>
  </div>
  <div class="footer">
    <p>© 2024 Google</p>
  </div>
  <script>
    document.getElementById('searchForm').addEventListener('submit', function(event) {
      event.preventDefault();
      var query = document.getElementById('searchInput').value;
      if (query.trim() !== '') {
        window.location.href = 'https://www.google.com/search?q=' + encodeURIComponent(query);
      }
    });
  </script>
</body>
</html>

Google homepage design HTML and CSS code

You may like these posts :

Write Your Comment