→ Bishnu Thapa
→ Google Search Page Clone

Google Search Page Clone

This Example is contributed by Bishnu Thapa, on 14-Mar-2025. It is responsive. similar terms for this example are SearchBar,Search Field,Search,find,copy,simulation,copy,dummy,miniature,like

Search Bar Clone Mockup Navigation

Author Bishnu Thapa

Fork Fullscreen

<div class="google-search-container">
  <header class="header">
    <nav class="nav-links">
      <a href="#" class="nav-link">Gmail</a>
      <a href="#" class="nav-link">Images</a>
      <div class="menu-icon">
        <div class="menu-dots"></div>
      </div>
      <div class="profile-icon">BT</div>
    </nav>
  </header>

<main class="main-content">
    <div class="logo-container">
      <div class="google-logo">
        <span class="blue">G</span>
        <span class="red">o</span>
        <span class="yellow">o</span>
        <span class="blue">g</span>
        <span class="green">l</span>
        <span class="red">e</span>
      </div>
    </div>
    
    <div class="search-container">
      <div class="search-box">
        <div class="search-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
        </div>
        <input type="text" class="search-input" aria-label="Search">
        <div class="voice-search-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#4285f4" d="M12 15c1.66 0 3-1.31 3-2.97V5.97C15 4.31 13.66 3 12 3S9 4.31 9 5.97v6.06c0 1.66 1.34 2.97 3 2.97z"/><path fill="#34a853" d="M11 18.08h2V22h-2z"/><path fill="#fbbc05" d="M7.05 16.87c-1.27-1.33-2.05-2.83-2.05-4.87h2c0 1.45 0.56 2.42 1.47 3.38v0.32l-1.15 1.18z"/><path fill="#ea4335" d="M12 16.93a4.97 5.25 0 0 1-3.54-1.55l-1.41 1.49c1.26 1.34 3.02 2.13 4.95 2.13 3.87 0 6.99-2.92 6.99-7h-1.99c0 2.92-2.24 4.93-5 4.93z"/></svg>
        </div>
        <div class="camera-search-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#4285f4" d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/><path fill="#4285f4" d="M20 5h-3.17l-1.24-1.35c-.37-.41-.91-.65-1.47-.65H9.88c-.56 0-1.1.24-1.48.65L7.17 5H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 14H4V7h4.05l1.83-2h4.24l1.83 2H20v12z"/></svg>
        </div>
      </div>
      
      <div class="search-buttons">
        <button type="button" class="search-button">Google Search</button>
        <button type="button" class="search-button">I'm Feeling Lucky</button>
      </div>
    </div>
    
    <div class="language-options">
      <p>Google offered in: <a href="#">English</a> <a href="#">Español</a> <a href="#">Français</a> <a href="#">中文</a></p>
    </div>
  </main>

<footer class="footer">
    <div class="footer-top">
      <p>United States</p>
    </div>
    <div class="footer-bottom">
      <div class="footer-left">
        <a href="#">About</a>
        <a href="#">Advertising</a>
        <a href="#">Business</a>
        <a href="#">How Search works</a>
      </div>
      <div class="footer-right">
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
        <a href="#">Settings</a>
      </div>
    </div>
  </footer>
</div>

Related Examples

Google Search Page Clone

Author:
MD. Tayyub

4 months ago
Continue with google button design
A professionally styled Google authentication button with the Google logo for seamless integration into any web application's login/signup flow.

Author:
Cleo Claren

4 months ago
Responsive Search Input with Icon Animation
A clean, responsive search input field with animated icon and focus effects for enhanced user experience on websites and applications.

Author:
Alex Morgan

3 months ago
Google Login Button Example

Author:
Anonymous

1 month ago
Responsive Search Bar with Animated Effects

Author:
Anonymous

3 months ago
Responsive Search Bar with Button
A responsive search bar with an integrated button for enhanced user experience. Perfect for websites, applications, and dashboards.

Author:
Melissa Chen

2 months ago
Search Bar Component
A responsive and accessible search bar component built with HTML, CSS, and JavaScript. Ideal for integrating search functionality into any web project.

Author:
Alisha Patel

4 months ago
Sign in form with continue with google button

Author:
Anonymous

4 months ago
Footer with App Download Buttons and Branding
A professional website footer featuring app download buttons, brand logo, sitemap links, and social media connections for enhanced user engagement.

Author:
Janna Pineda

3 months ago
Contact Form with Map Integration
A comprehensive contact form with integrated map for businesses looking to connect with their customers.

Author:
Marcus Hendricks

3 months ago
Minimalist Search Box
This simple search bar component provides a clean and minimalist design for user input.

Author:
Anonymous

4 months ago
Responsive Navigation Bar with Dropdown Menu
A responsive navigation bar featuring dropdown menus, search functionality, and mobile-friendly toggle for seamless website navigation across all devices.

Author:
Aiden Mercer

3 months ago

Didn't find component you were looking for?

Search from 500+ components