Free HTML CSS JS · Pixel-Perfect · Working Autocomplete · Keyboard Navigation · Material Icons · Responsive · Portfolio-Ready
The Coodeverse Google Homepage Clone 2025 is a free pixel-perfect HTML CSS JS recreation of the Google search homepage featuring a working autocomplete dropdown with Array.filter(), full keyboard navigation (ArrowUp, ArrowDown, Enter, Escape), Google Material Icons for search and mic, Roboto font, responsive layout with CSS Flexbox, hover and focus box-shadow transitions, and outside-click close using e.target.closest(). Built with pure vanilla HTML CSS JavaScript — no frameworks. Perfect for portfolios and frontend job interviews. 100% free.
Pure HTML + CSS + Vanilla JavaScript — no frameworks. This pixel-perfect Google Clone teaches Array.filter() autocomplete, keyboard navigation with ArrowUp/Down, e.target.closest() outside-click, classList.toggle() active states, CSS pill input with box-shadow transitions, and Google Material Icons. Perfect for portfolio projects and frontend job interviews.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Google</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<style>
body { margin:0; font-family:'Roboto',Arial,sans-serif; color:#202124; background:#fff; display:flex; flex-direction:column; height:100vh; }
a { color:#3c4043; text-decoration:none; opacity:0.6; padding:0 12px; font-size:14px; line-height:36px; }
a:hover { opacity:0.87; text-decoration:underline; }
header { display:flex; justify-content:flex-end; align-items:center; padding:11px 24px; font-size:14px; }
.apps-icon { width:32px; height:32px; margin-left:16px; color:#5f6368; cursor:pointer; display:flex; justify-content:center; align-items:center; border-radius:50%; }
.apps-icon:hover { background-color:#f8f9fa; }
.material-icons.md-24 { font-size:24px; }
.avatar { width:32px; height:32px; margin-left:16px; border-radius:50%; background-image:url("https://www.gstatic.com/images/branding/product/1x/avatar_circle_blue_512dp.png"); background-size:cover; background-position:center; cursor:pointer; }
main { flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; }
.logo-img { width:272px; height:92px; margin-bottom:24px; cursor:pointer; }
.search-wrapper { position:relative; width:584px; max-width:90vw; }
input#q { width:100%; height:44px; padding:0 52px; font-size:16px; border-radius:24px; border:1px solid #dfe1e5; box-shadow:none; outline:none; transition:box-shadow 0.2s ease-in-out; color:#202124; }
input#q:hover { box-shadow:0 1px 6px rgb(32 33 36/28%); }
input#q:focus { box-shadow:0 1px 6px rgb(32 33 36/28%); border-color:#4285f4; }
.search-icon, .mic-icon { position:absolute; top:12px; font-size:20px; color:#9aa0a6; }
.search-icon { left:16px; user-select:none; }
.mic-icon { right:16px; cursor:pointer; }
.mic-icon:hover { color:#202124; }
ul.suggestions { position:absolute; top:44px; left:0; right:0; background:#fff; box-shadow:0 4px 6px rgb(32 33 36/28%); border-radius:0 0 24px 24px; max-height:400px; overflow-y:auto; margin:0; padding:0; list-style:none; opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity 0.13s,transform 0.13s,visibility 0.13s; z-index:1000; }
ul.suggestions.show { opacity:1; visibility:visible; transform:translateY(0); }
ul.suggestions li { padding:11px 20px 11px 52px; font-size:16px; color:#202124; cursor:pointer; position:relative; }
ul.suggestions li:hover, ul.suggestions li.active { background-color:#f8f9fa; }
ul.suggestions li::before { content:'search'; font-family:'Material Icons'; position:absolute; left:20px; color:#9aa0a6; font-size:20px; top:50%; transform:translateY(-50%); user-select:none; }
.buttons { margin-top:32px; }
.buttons button { background-color:#f8f9fa; border:1px solid #f8f9fa; color:#3c4043; font-size:14px; line-height:27px; padding:0 16px; height:36px; margin:0 4px; border-radius:4px; cursor:pointer; user-select:none; transition:box-shadow 0.1s,background-color 0.1s,border-color 0.1s; }
.buttons button:hover { background-color:#f1f3f4; border-color:#dadce0; box-shadow:0 1px 1px rgb(0 0 0/0.1); }
footer { background-color:#f2f2f2; border-top:1px solid #dadce0; font-size:14px; line-height:40px; color:#70757a; }
.footer-inner { max-width:960px; margin:0 auto; padding:0 24px; display:flex; justify-content:space-between; flex-wrap:wrap; }
.footer-inner div { display:flex; margin:8px 0; }
.footer-inner a { color:#70757a; margin:0 12px; white-space:nowrap; cursor:pointer; }
.footer-inner a:hover { text-decoration:underline; }
@media (max-width:640px) { .logo-img { width:200px; height:auto; } .search-wrapper { width:100%; padding:0 16px; } header { padding:11px 16px; } .footer-inner { justify-content:center; padding:0 16px; } }
</style>
</head>
<body>
<header>
<a href="#">Gmail</a>
<a href="#">Images</a>
<div class="apps-icon" aria-label="Google apps" tabindex="0"><span class="material-icons md-24">apps</span></div>
<div class="avatar" aria-label="Google Account" tabindex="0"></div>
</header>
<main>
<img class="logo-img" id="logo" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google" />
<div class="search-wrapper">
<span class="material-icons search-icon">search</span>
<input type="text" id="q" autocomplete="off" aria-label="Search" aria-expanded="false" aria-autocomplete="list" aria-controls="suggestions" />
<span class="material-icons mic-icon" role="button" aria-label="Search by voice" tabindex="0">mic</span>
<ul class="suggestions" id="suggestions" role="listbox" aria-label="Search suggestions"></ul>
</div>
<div class="buttons">
<button id="search-btn">Google Search</button>
<button id="lucky-btn">I'm Feeling Lucky</button>
</div>
</main>
<footer>
<div class="footer-inner">
<div><a href="#">Advertising</a><a href="#">Business</a><a href="#">How Search works</a></div>
<div><a href="#">Privacy</a><a href="#">Terms</a><a href="#">Settings</a></div>
</div>
</footer>
<script>
const sampleSuggestions = ["CoodeVerse","CoodeVerse Compiler","CoodeVerse C#","CoodeVerse C++","CoodeVerse Python","CoodeVerse JavaScript","CoodeVerse HTML CSS"];
const input=document.getElementById("q"), sugg=document.getElementById("suggestions"), logo=document.getElementById("logo");
let index=-1;
function render(){
const val=input.value.trim().toLowerCase(); sugg.innerHTML="";
if(!val){sugg.classList.remove("show");input.setAttribute("aria-expanded","false");return;}
const matches=sampleSuggestions.filter(s=>s.toLowerCase().includes(val)).slice(0,10);
matches.forEach(s=>{
const li=document.createElement("li"); li.textContent=s; li.tabIndex=-1; li.role="option";
li.onclick=()=>{input.value=s;sugg.classList.remove("show");input.setAttribute("aria-expanded","false");input.focus();};
sugg.appendChild(li);
});
if(matches.length){sugg.classList.add("show");input.setAttribute("aria-expanded","true");index=-1;}
else{sugg.classList.remove("show");input.setAttribute("aria-expanded","false");}
}
input.addEventListener("input",render);
input.addEventListener("keydown",e=>{
const items=sugg.querySelectorAll("li");
if(e.key==="ArrowDown"){e.preventDefault();index=index<items.length-1?index+1:0;items.forEach((el,i)=>el.classList.toggle("active",i===index));}
else if(e.key==="ArrowUp"){e.preventDefault();index=index>0?index-1:items.length-1;items.forEach((el,i)=>el.classList.toggle("active",i===index));}
else if(e.key==="Enter"){e.preventDefault();if(index>=0){input.value=items[index].textContent;sugg.classList.remove("show");input.setAttribute("aria-expanded","false");}}
else if(e.key==="Escape"){sugg.classList.remove("show");input.setAttribute("aria-expanded","false");index=-1;}
});
document.getElementById("search-btn").onclick=()=>console.log("Search:",input.value);
document.getElementById("lucky-btn").onclick=()=>console.log("Lucky:",sampleSuggestions[Math.floor(Math.random()*sampleSuggestions.length)]);
logo.onclick=()=>{input.value="";sugg.classList.remove("show");input.setAttribute("aria-expanded","false");input.focus();};
document.addEventListener("click",e=>{if(!e.target.closest(".search-wrapper")){sugg.classList.remove("show");input.setAttribute("aria-expanded","false");}});
</script>
</body>
</html>
border-radius:24px; height:44px; padding:0 52px), search and mic icons positioned absolute, and a ul.suggestions dropdown. Add Google Search + Feeling Lucky buttons (background:#f8f9fa; border-radius:4px). Build footer with flex link rows. Add JavaScript autocomplete. The Coodeverse Google Clone is a complete free working example.ul.suggestions absolutely positioned below input. (2) input.addEventListener('input', render). (3) Filter: const matches = suggestions.filter(s => s.toLowerCase().includes(val)).slice(0, 10). (4) Create li elements with document.createElement('li'). (5) Show: sugg.classList.add('show'). (6) On click: input.value = s; hide(). (7) Outside close: document.addEventListener('click', e => { if (!e.target.closest('.search-wrapper')) hide(); }).let index = -1. On keydown: ArrowDown → index = index < items.length - 1 ? index + 1 : 0; ArrowUp → index = index > 0 ? index - 1 : items.length - 1; toggle .active class with items.forEach((el,i) => el.classList.toggle('active', i === index)); Enter → set input.value if index >= 0; Escape → hide and reset index.width:584px; height:44px; padding:0 52px; font-size:16px; border-radius:24px; border:1px solid #dfe1e5; outline:none; font-family:'Roboto',sans-serif. Hover: box-shadow:0 1px 6px rgb(32 33 36/28%). Focus: same box-shadow + border-color:#4285f4. Icons: position:absolute; top:12px; color:#9aa0a6. The Coodeverse Google Clone replicates this exactly.document.addEventListener('click', (e) => { if (!e.target.closest('.search-wrapper')) { dropdown.classList.remove('show'); } }). The e.target.closest('.search-wrapper') returns null if the click was outside the wrapper, triggering the hide. This pattern works because click events bubble up from target to document.Autocomplete · Keyboard Nav · Material Icons · Responsive · ARIA · No Frameworks · Portfolio-Ready · Free Forever
Trusted by 50,000+ developers worldwide · Coodeverse · Free Forever