Want to build a sleek, minimalist landing page like Google’s search engine home page using HTML5 and CSS3?
You’re in the right place.
In this guide I’ll walk you through the full process—structure, styling, responsiveness, accessibility, best practices, and complete source code—so you can clone the UI (for learning or portfolio purposes) and understand how to build clean, modern web pages.
When users search online, the first thing they often see is Google’s iconic search page: simple, intuitive, and spatially balanced. By recreating that landing-page style, you sharpen your HTML/CSS fundamentals, practice semantic markup, responsive layout, and modern styling techniques.
This article gives you everything you need—from markup to CSS, tips to accessibility—to build a landing page UI clone of Google’s search page.
Create a folder, e.g., google-clone, and inside it:
google-clone/
├ index.html
└ style.css
Link style.css from index.html.
Set your code editor (e.g., Visual Studio Code), and use live preview or browser refresh to test.
Use semantic elements for clarity, accessibility and SEO. Example skeleton:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Google Clone</title> <link rel="stylesheet" href="style.css"> </head> <body> <header>…navigation links…</header> <main>…logo + search form…</main> <footer>…links and bottom bar…</footer> </body> </html>
Breaking it down:
<header>: Contains nav links (e.g., Gmail, Images)<main>: The central block—logo, search input, buttons<footer>: Footer area with links (Privacy, Terms etc)<header class="site-header">
<nav class="topnav">
<ul>
<li><a href="#">Gmail</a></li>
<li><a href="#">Images</a></li>
<li><button aria-label="Apps">☰</button></li>
<li><button class="signin">Sign In</button></li>
</ul>
</nav>
</header>
<main class="site-main">
<div class="logo">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
alt="Google logo" width="272" height="92">
</div>
<form class="search-form" role="search" aria-label="Google search form">
<input type="text" name="q" aria-label="Search" placeholder="Search Google or type a URL">
<div class="buttons">
<button type="submit">Google Search</button>
<button type="button">I’m Feeling Lucky</button>
</div>
</form>
</main>
<footer class="site-footer">
<nav class="footnav">
<ul>
<li><a href="#">Advertising</a></li>
<li><a href="#">Business</a></li>
<li><a href="#">How Search works</a></li>
</ul>
<ul>
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Settings</a></li>
</ul>
</nav>
</footer>
This gives you a clean, semantic base. Having proper aria-labels, roles, alt text helps accessibility and is good for SEO.
In style.css, start with resets and base typography:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
color: #202124;
line-height: 1.4;
min-height: 100vh;
display: flex;
flex-direction: column;
}
a {
text-decoration: none;
color: inherit;
}
button {
font: inherit;
cursor: pointer;
}
.site-header .topnav ul {
list-style: none;
display: flex;
justify-content: flex-end;
gap: 1.2rem;
padding: 1rem 2rem;
}
.site-header .topnav ul li a,
.site-header .topnav ul li button {
color: rgba(0, 0, 0, 0.87);
font-size: 0.9rem;
background: none;
border: none;
}
.site-header .topnav ul li button.signin {
border: 1px solid #1a73e8;
background: #1a73e8;
color: #fff;
padding: 6px 12px;
border-radius: 4px;
}
.site-header .topnav ul li button.signin:hover,
.site-header .topnav ul li a:hover {
text-decoration: underline;
opacity: 0.85;
}
Center content vertically + horizontally. Using Flexbox:
.site-main {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1rem;
}
.logo img {
display: block;
margin-bottom: 20px;
}
.search-form {
width: 100%;
max-width: 600px;
}
.search-form input[type="text"] {
width: 100%;
padding: 14px 20px;
font-size: 1rem;
border: 1px solid #dfe1e5;
border-radius: 24px;
outline: none;
transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.search-form input[type="text"]:focus {
border-color: #1a73e8;
box-shadow: 0 1px 6px rgba(32,33,36,0.28);
}
.search-form .buttons {
margin-top: 20px;
display: flex;
gap: 10px;
justify-content: center;
}
.search-form .buttons button {
padding: 10px 20px;
font-size: 0.9rem;
background: #f8f9fa;
border: 1px solid #f8f9fa;
border-radius: 4px;
color: #3c4043;
}
.search-form .buttons button:hover {
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
border-color: #c6c6c6;
}
.site-footer {
background: #f2f2f2;
padding: 1rem 2rem;
font-size: 0.8rem;
color: #70757a;
}
.footnav {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
}
.footnav ul {
list-style: none;
display: flex;
gap: 1rem;
}
.footnav ul li a:hover {
text-decoration: underline;
}
#202124, links #1a73e8, subtle grays for backgrounds.rem/em for scalable typography.max-width and center alignment for main content so it doesn’t stretch too wide on large screens.As shown above: using display: flex; align-items: center; justify-content: center; flex-direction: column. This ensures the logo + search form sits centered vertically and horizontally.
@media (max-width: 600px) {
.search-form .buttons {
flex-direction: column;
}
.search-form .buttons button {
width: 100%;
}
.site-header .topnav ul {
justify-content: center;
padding: 0.5rem 1rem;
}
}
This makes the layout adapt: buttons stack on mobile, navigation links centre, padding reduces.
You could use CSS Grid for the main layout, but for this simple UI, Flexbox is sufficient and simpler.
Using <header>, <main>, <footer> helps screen-readers, improves document structure, and supports SEO. The article from Medium emphasises this.
aria-label="Search".role="search" (optional but helpful).alt="Google logo".<title> and proper <meta name="viewport">.lang="en" attribute on <html>.width and height attributes on images to prevent layout shift.meta tags properly.Here is full example code you can copy, run in your editor, and tweak.
index.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Google Clone</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="site-header">
<nav class="topnav">
<ul>
<li><a href="#">Gmail</a></li>
<li><a href="#">Images</a></li>
<li><button aria-label="Google Apps">☰</button></li>
<li><button class="signin">Sign In</button></li>
</ul>
</nav>
</header>
<main class="site-main">
<div class="logo">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
alt="Google logo"
width="272" height="92">
</div>
<form class="search-form" role="search" aria-label="Google search form">
<input type="text" name="q" aria-label="Search" placeholder="Search Google or type a URL">
<div class="buttons">
<button type="submit">Google Search</button>
<button type="button">I’m Feeling Lucky</button>
</div>
</form>
</main>
<footer class="site-footer">
<nav class="footnav">
<ul>
<li><a href="#">Advertising</a></li>
<li><a href="#">Business</a></li>
<li><a href="#">How Search works</a></li>
</ul>
<ul>
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Settings</a></li>
</ul>
</nav>
</footer>
</body>
</html>
style.css/* Reset & base styles */* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
color: #202124;
line-height: 1.4;
min-height: 100vh;
display: flex;
flex-direction: column;
}
a {
text-decoration: none;
color: inherit;
}
button {
font: inherit;
cursor: pointer;
}
/* Header / navigation */.site-header .topnav ul {
list-style: none;
display: flex;
justify-content: flex-end;
gap: 1.2rem;
padding: 1rem 2rem;
}
.site-header .topnav ul li a,
.site-header .topnav ul li button {
color: rgba(0, 0, 0, 0.87);
font-size: 0.9rem;
background: none;
border: none;
}
.site-header .topnav ul li button.signin {
border: 1px solid #1a73e8;
background: #1a73e8;
color: #fff;
padding: 6px 12px;
border-radius: 4px;
}
.site-header .topnav ul li a:hover,
.site-header .topnav ul li button.signin:hover {
text-decoration: underline;
opacity: 0.85;
}
/* Main section */.site-main {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1rem;
}
.logo img {
display: block;
margin-bottom: 20px;
}
.search-form {
width: 100%;
max-width: 600px;
}
.search-form input[type="text"] {
width: 100%;
padding: 14px 20px;
font-size: 1rem;
border: 1px solid #dfe1e5;
border-radius: 24px;
outline: none;
transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.search-form input[type="text"]:focus {
border-color: #1a73e8;
box-shadow: 0 1px 6px rgba(32,33,36,0.28);
}
.search-form .buttons {
margin-top: 20px;
display: flex;
gap: 10px;
justify-content: center;
}
.search-form .buttons button {
padding: 10px 20px;
font-size: 0.9rem;
background: #f8f9fa;
border: 1px solid #f8f9fa;
border-radius: 4px;
color: #3c4043;
}
.search-form .buttons button:hover {
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
border-color: #c6c6c6;
}
/* Footer */.site-footer {
background: #f2f2f2;
padding: 1rem 2rem;
font-size: 0.8rem;
color: #70757a;
}
.footnav {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
}
.footnav ul {
list-style: none;
display: flex;
gap: 1rem;
}
.footnav ul li a:hover {
text-decoration: underline;
}
/* Responsiveness */@media (max-width: 600px) {
.search-form .buttons {
flex-direction: column;
}
.search-form .buttons button {
width: 100%;
}
.site-header .topnav ul {
justify-content: center;
padding: 0.5rem 1rem;
}
}
You can copy these files locally, open index.html in your browser, and you’ll have a functional, responsive UI clone of Google’s search page (UI only—no backend search functionality).
Here are ways you can extend the clone and deepen your learning:
prefers-color-scheme./results.html that mimics Google’s search-results layout (left nav, results list, side panel). Repository example: google-homepage-clone (GitHub) built by another dev.max-width (e.g., 600px) and center with margin: 0 auto.height: 100vh or flex: 1 and html/body height set appropriately. Example fix from StackOverflow: set html, body { height: 100%; margin: 0; } section { height: 100vh; }.flex-direction: column and full width.Q1. Can I use this clone commercially?
A: This tutorial is for learning and portfolio use. If you replicate a brand like Google’s page in full for commercial production, you must watch branding/licensing considerations. But practicing UI clones is entirely fine.
Q2. Do I need JavaScript for this UI?
A: For basic UI clone you don’t. The code provided is pure HTML5 + CSS3. If you want search functionality or dynamic behaviour (suggestions, voice input), then you’d add JS—but that’s beyond basic clone.
Q3. Why use semantic HTML tags like <main>, <header>?
A: These improve readability, maintainability, accessibility (screen-readers) and help search engines understand page structure—supporting E-E-A-T (Experience, Expertise, Authoritativeness, Trust).
Q4. How can I make the search page mobile-friendly?
A: Use responsive design: Flexbox, media queries, sensible max-widths, stack columns on small screens, ensure tap-targets (buttons) are large enough, and test across devices. The example code includes a media query for max-width 600px.
Q5. Can I incorporate CSS Grid instead of Flexbox?
A: Yes. CSS Grid is powerful, especially for more complex layouts. But for this simple centered layout, Flexbox is sufficient—and simpler for beginners.
Cloning the Google search engine landing page UI using HTML5 and CSS3 is an excellent exercise that helps you build strong front-end fundamentals. You get to practise semantic markup, responsive layout, accessibility, clean styling, and best practices around SEO and performance.
By following the steps above—from folder setup, semantic HTML structure, CSS styling, responsiveness, accessibility, through to full source code—you’ll end up with a high-quality UI clone. Then you can customise, extend, or adapt it for your own projects.
Once you’re comfortable with this, try adding search suggestions, result pages, animations, or even a full theme variation. Each step deepens your skill set.
Happy coding! If you run into any issues while building this, feel free to ask—I’d be glad to help.
Google Chrome has dominated web browsing for over a decade with 71.77% global market share.…
Perplexity just made its AI-powered browser, Comet, completely free for everyone on October 2, 2025.…
You've probably heard about ChatGPT Atlas, OpenAI's new AI-powered browser that launched on October 21,…
Perplexity Comet became free for everyone on October 2, 2025, bringing research-focused AI browsing to…
ChatGPT Atlas launched on October 21, 2025, but it's only available on macOS. If you're…
Two AI browsers just entered the ring in October 2025, and they're both fighting for…