Learn how to create a direct clone of Google's search results page using pure CSS. Follow our step-by-step guide and master CSS techniques for custom web design.
Table of Contents
A blog article on how to create your own clone of Google's search engine results page using only CSS. While this project might seem daunting, it actually makes a lot of sense as well. It was created using pure CSS and doesn't require any programming skills - great for novice programmers or those without experience.
Google's search results page is one of the most recognizable web pages on the internet. Have you ever wondered how to recreate this page on your own website? In this tutorial, we'll show you how to create a direct clone of Google's search results page using pure CSS.
Let's start making an amazing clone of Google's search engine results page using HTML and Pure CSS step by step.
Join My Telegram Channel to Download the Project.
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our Google search result page.
After creating the files just paste the following below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
This is the basic structure of our Google search result page using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the Google search result page is in place, the next step is to add styling to the Google search result page using CSS. CSS allows us to control the visual appearance of the page, including things like layout, color, and typography.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our Google search result page. We will also add some padding and margin properties to ensure that everything looks correct.
This will give our Google search result page an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
/* My Notes => */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=PT+Sans:wght@700&display=swap");
@font-face {
font-family: "ps-bold";
src: url(../fonts/ps-bold.ttf);
}
:root {
--gray-i: #71757a;
}
* {
padding: 0;
margin: 0;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: 62.5%;
/* 1rem => 10px */
}
body {
font-size: 16px;
/* Default Font Size => 16px */
font-family: "Open Sans", sans-serif;
margin: 0;
padding: 0;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow-x: hidden;
}
@media only screen and (max-width: 1000px) {
.right-sidebar {
display: none !important;
}
.sub-result-container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
margin: 1.5rem 0 !important;
}
.sub-result-item {
font-size: 0.85em;
display: block !important;
width: 100% !important;
margin: 1rem 0 !important;
border-top: 0.5px solid #dfe1e5;
padding: 1.2rem 0.5rem;
margin: 0 !important;
}
.sub-result-item p {
display: none !important;
}
.material-icons-outlined.chevron_right {
right: -1.5rem !important;
}
.sub-result-container__articles {
padding-right: 0 !important;
}
.sub-result-container__article {
width: 32% !important;
}
main {
width: 100% !important;
padding: 1.2rem 3rem !important;
}
.arrow-triangle-icon {
display: none !important;
}
.bottom-header nav {
width: 100vw !important;
margin-left: 1.2rem !important;
margin-right: 1.2rem !important;
}
.top-footer,
.bottom-footer {
padding-left: 1.2rem !important;
padding-right: 1.2rem !important;
}
header {
position: relative;
padding-top: 7.5rem !important;
}
header nav {
overflow-x: scroll !important;
}
header .menu-bar-icon {
display: inline-block !important;
position: absolute;
top: 2.1rem;
}
header #google-logo {
position: absolute;
top: 2rem;
left: 56%;
transform: translateX(-50%);
}
header #google-logo img {
padding-top: 0.2rem;
left: 50%;
}
header .top-header__right-sec {
position: absolute;
top: 2rem;
right: 1.5rem;
}
header .search-container {
width: 94vw !important;
}
}
@media only screen and (max-width: 400px) {
header .search-container {
width: 90vw !important;
}
}
header {
padding: 2.5rem 2rem 0;
}
header .top-header {
display: flex;
justify-content: space-between;
height: fit-content;
}
header .top-header__left-sec {
display: flex;
align-items: center;
}
header .top-header__left-sec a {
text-decoration: none;
}
header .top-header__left-sec .menu-bar-icon {
display: none;
margin-right: 1rem;
color: var(--gray-i);
padding: 0.5rem;
}
header .top-header__left-sec #google-logo {
display: flex;
}
header .top-header__left-sec #google-logo img {
height: 4rem;
width: 50%;
object-fit: contain;
}
header .top-header__left-sec .search-container {
width: 45vw;
height: 4.6rem;
padding: 1rem;
padding-left: 2rem;
border-radius: 10rem;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 0.2em 7px rgba(0, 0, 0, 0.17);
}
header .top-header__left-sec .search-container:hover {
box-shadow: 0 0.2em 7px rgba(0, 0, 0, 0.17), 0 -0.05em 6px rgba(0, 0, 0, 0.1);
}
header .top-header__left-sec .search-container span,
header .top-header__left-sec .search-container i {
color: var(--gray-i);
}
header .top-header__left-sec .search-container .search-container__left-sec {
display: flex;
justify-content: flex-start;
align-items: center;
width: 100%;
height: 100%;
}
header .top-header__left-sec .search-container .search-container__left-sec #inp--searchbox {
width: 100%;
font-family: "Noto Sans", sans-serif;
font-size: 0.95em;
border: none;
margin: 0;
padding: 0;
}
header .top-header__left-sec .search-container .search-container__left-sec #inp--searchbox:focus {
outline: none;
}
header .top-header__left-sec .search-container .search-container__left-sec input[type=search]::-webkit-search-cancel-button {
display: none;
}
header .top-header__left-sec .search-container .search-container__left-sec .search-container__left-sec--srch-icon {
display: none;
font-size: 1.3em;
opacity: 0.8;
margin-right: 0.75rem;
margin-left: -0.9rem;
}
header .top-header__left-sec .search-container .search-container__right-sec {
display: flex;
}
header .top-header__left-sec .search-container .search-container__right-sec * {
margin: 0 0.25em;
cursor: pointer;
}
header .top-header__left-sec .search-container .search-container__right-sec :first-child {
border-right: 0.8px solid #dfe1e5;
padding-right: 0.4em;
margin-right: 0.25em;
}
header .top-header__left-sec .search-container .search-container__right-sec :nth-child(2) {
color: #d6aa34;
}
header .top-header__left-sec .search-container .search-container__right-sec :last-child {
color: #7198f5;
}
header .top-header__left-sec .search-container:focus-within .search-container__left-sec--srch-icon {
display: block;
}
header .top-header__right-sec {
display: flex;
align-items: center;
}
header .top-header__right-sec .top-header__right-sec--apps {
width: 4rem;
height: 4rem;
border-radius: 100%;
margin-right: 1.3rem;
display: flex;
justify-content: center;
align-items: center;
padding: 0.7rem;
fill: #585a5c;
}
.dots{
font-size: 18px !important;
color: #606368;
}
header .top-header__right-sec .top-header__right-sec--user-acc {
width: 4rem;
height: 4rem;
overflow: hidden;
border-radius: 100%;
}
header .top-header__right-sec .top-header__right-sec--user-acc img {
width: 100%;
}
header .top-header__right-sec > :hover {
box-shadow: 0 0 0 4px rgba(200, 200, 200, 0.3);
cursor: pointer;
background-color: rgba(200, 200, 200, 0.3);
}
header .bottom-header {
margin: auto -2rem;
margin-top: 2.5rem;
border-bottom: 0.5px solid rgba(200, 200, 200, 0.5);
}
header .bottom-header nav {
width: 45vw;
margin-left: 12.5vw;
display: flex;
justify-content: space-between;
overflow: hidden;
text-overflow: ellipsis;
}
header .bottom-header nav li {
list-style-type: none;
margin-right: 1em;
padding: 0.7rem 0.5rem;
}
header .bottom-header nav li .material-icons,
header .bottom-header nav li .material-icons-outlined {
font-size: 18px;
}
header .bottom-header nav li a {
display: flex;
color: #606368;
text-decoration: none;
align-items: center;
font-size: 0.9em;
justify-content: center;
}
header .bottom-header nav li a :first-child {
margin-right: 0.3em;
}
header .bottom-header nav .bottom-header__left-sec {
margin-right: 5rem;
}
header .bottom-header nav .bottom-header__left-sec ul {
display: flex;
}
header .bottom-header nav .bottom-header__right-sec ul {
display: flex;
}
header .bottom-header nav .active-page {
border-bottom: 4px solid #3b6de6;
}
main {
display: flex;
flex-direction: row;
width: 85%;
max-width: 1920px;
font-family: "Roboto", sans-serif;
padding: 1rem 10vw 3rem 12.5vw;
}
main .right-sidebar {
margin: 5rem 0 0 5rem;
color: #4e5156;
width: 130rem;
height: fit-content;
border: 0.5px solid #dfe1e5;
border-radius: 1rem;
display: flex;
flex-direction: column;
overflow: hidden;
}
main .right-sidebar a {
color: #2900aa;
}
main .right-sidebar a:hover {
text-decoration: underline;
}
main .right-sidebar > * {
padding: 1.5rem;
}
main .right-sidebar > *:nth-child(1),
main .right-sidebar > *:nth-child(2) {
border-bottom: 0.5px solid #dfe1e5;
}
main .right-sidebar .h2-inline-block {
display: inline-block;
}
main .right-sidebar .h2-inline-block + a {
color: #71757a;
padding-top: 0.7rem;
}
main .right-sidebar .right-sidebar__top-sec {
font-family: sans-serif;
display: flex;
flex-direction: row;
}
main .right-sidebar .right-sidebar__top-sec .right-sidebar__top-sec--left-heading {
width: 60%;
line-height: 0.9;
margin-top: 1rem;
}
main .right-sidebar .right-sidebar__top-sec .right-sidebar__top-sec--left-heading h1 {
font-weight: 500;
color: #000;
margin-bottom: 1.25rem;
}
main .right-sidebar .right-sidebar__top-sec .right-sidebar__top-sec--right-image {
width: 14rem;
height: 13rem;
}
main .right-sidebar .right-sidebar__top-sec .right-sidebar__top-sec--right-image img {
width: 100%;
object-fit: cover;
}
main .right-sidebar .right-sidebar__sub-top-sec {
display: flex;
align-items: center;
}
main .right-sidebar .right-sidebar__sub-top-sec span {
margin-right: 2rem;
}
main .right-sidebar .right-sidebar__main-sec {
line-height: 1.5;
font-size: 0.9em;
}
main .right-sidebar .right-sidebar__main-sec strong {
color: #000;
}
main .right-sidebar .right-sidebar__sub-bottom-sec,
main .right-sidebar .right-sidebar__bottom-sec {
position: relative;
overflow-x: auto;
font-size: 0.8em;
}
main .right-sidebar .right-sidebar__sub-bottom-sec h2,
main .right-sidebar .right-sidebar__bottom-sec h2 {
font-weight: 400;
color: #000;
}
main .right-sidebar .right-sidebar__sub-bottom-sec .profiles-items-container,
main .right-sidebar .right-sidebar__bottom-sec .profiles-items-container {
display: flex;
justify-content: space-between;
}
main .right-sidebar .right-sidebar__sub-bottom-sec .profiles-item a,
main .right-sidebar .right-sidebar__bottom-sec .profiles-item a {
display: flex;
line-height: 1.5;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 1rem;
}
main .right-sidebar .right-sidebar__sub-bottom-sec .profiles-item a img,
main .right-sidebar .right-sidebar__bottom-sec .profiles-item a img {
width: 4rem;
border-radius: 5px;
}
main .right-sidebar .right-sidebar__sub-bottom-sec .profiles-item-x a,
main .right-sidebar .right-sidebar__bottom-sec .profiles-item-x a {
padding-left: 0;
}
main .right-sidebar .right-sidebar__sub-bottom-sec .profiles-item-x a img,
main .right-sidebar .right-sidebar__bottom-sec .profiles-item-x a img {
width: 6.5rem;
background-color: #f7f7f7;
}
main .right-sidebar .right-sidebar__sub-bottom-sec .profiles-item-x:last-child a,
main .right-sidebar .right-sidebar__bottom-sec .profiles-item-x:last-child a {
padding-right: 0;
}
main .search-delay {
font-size: 0.85em;
color: var(--gray-i);
}
main a {
text-decoration: none;
}
main .result-item {
margin: 2.5rem 0;
}
main .result-item h3 {
font-weight: 400;
font-size: 1.25em;
}
main .result-item h3:hover {
text-decoration: underline;
}
main .result-item .result-item-link {
font-size: 0.9em;
display: flex;
margin-bottom: 5px;
}
main .result-item .result-item-link a {
vertical-align: 6.5px;
color: #202124;
margin-right: 10px;
}
main .result-item .result-item-link .arrow-triangle-icon.material-icons {
color: var(--gray-i);
position: relative;
top: 1px;
cursor: pointer;
}
main .result-item p {
color: #4e5156;
font-size: 0.8em;
line-height: 1.55;
}
main .result-item .sub-result-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 1.5rem 1rem 1.5rem -0.75rem;
}
main .result-item .sub-result-item {
display: inline-block;
width: 35%;
margin: 1rem 3.2rem 1rem 2rem;
}
main .result-item .sub-result-container__articles {
padding-right: 3rem;
position: relative;
margin: 1.5rem 0 2rem;
color: #1c1c1d;
display: flex;
justify-content: space-between;
}
main .result-item .sub-result-container__articles .sub-result-container__article {
width: 31%;
height: 24rem;
padding: 1rem;
border: 0.5px solid #dfe1e5;
border-radius: 1rem;
overflow-y: auto;
}
main .result-item .sub-result-container__articles .sub-result-container__article time {
padding-bottom: 1rem;
position: absolute;
bottom: 0;
font-size: 0.6em;
}
main .result-item .sub-result-container__articles .sub-result-container__article time span {
color: #868a8e;
}
main .result-item .sub-result-container__articles .material-icons-outlined {
background-color: rgba(255, 255, 255, 0.7);
border-radius: 50%;
width: 3.5rem;
height: 3.5rem;
display: flex;
justify-content: center;
align-items: center;
color: var(--gray-i);
cursor: pointer;
position: absolute;
top: 50%;
transform: translateY(-50%);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
main .result-item .sub-result-container__articles .material-icons-outlined:hover {
background-color: white;
}
main .result-item .sub-result-container__articles .chevron_left {
left: -1.5rem;
}
main .result-item .sub-result-container__articles .chevron_right {
right: 1.5rem;
}
main .pages-nav {
margin: 2.75rem auto 0;
}
main .pages-nav table {
margin: auto;
}
main .pages-nav table td {
font-size: 1em;
text-align: center;
}
main .pages-nav table tr:first-child {
font-family: "ps-bold", sans-serif;
letter-spacing: -3px;
}
main .pages-nav table tr:first-child td {
font-size: 2em;
padding-bottom: 0.2em;
}
main .pages-nav table tr:first-child td:first-child,
main .pages-nav table tr:first-child td:nth-last-child(4) {
color: #5580f2;
}
main .pages-nav table tr:first-child td:nth-child(2) a,
main .pages-nav table tr:first-child td:nth-last-child(2) {
color: #e13d3a;
}
main .pages-nav table tr:first-child td:nth-last-child(3) {
color: #43ab54;
}
main .pages-nav table tr:first-child td a {
color: #f5be20;
}
main .pages-nav table tr:first-child td:last-child a {
color: #5580f2;
}
main .pages-nav table tr:last-child a {
color: #5580f2;
}
main .pages-nav table tr:last-child a:hover {
text-decoration: underline;
}
footer {
background-color: #f2f2f2;
color: #6f6f6f;
font-weight: 500;
font-size: 0.9em;
}
footer a {
text-decoration: none;
color: inherit;
}
footer a:hover {
color: #3c4043;
}
footer .top-footer-container {
border-bottom: 1px solid;
border-bottom: 0.5px solid rgba(200, 200, 200, 0.6);
}
footer .top-footer {
padding: 1.6rem 0 1rem;
padding-left: 12.5vw;
}
footer .top-footer .material-icons {
font-size: 0.8em;
}
footer .top-footer span:first-child {
border-right: 0.1px solid rgba(200, 200, 200, 0.6);
padding: 0.5rem 1.5rem 0.5rem 0;
}
footer .top-footer span:nth-child(2) {
padding: 0.5rem 0 0.5rem 1.5rem;
}
footer .top-footer span:nth-child(3) {
font-weight: bold;
color: #3c4043;
}
footer .bottom-footer {
padding: 1rem 0 1.6rem;
padding-left: 12.5vw;
}
footer .bottom-footer ul {
display: flex;
}
footer .bottom-footer ul li {
margin-right: 2.5rem;
list-style-type: none;
} Final Output:
Conclusion:
In this tutorial, we've shown you how to create your own direct clone of Google's search results page using only CSS. By following our step-by-step guide, you've learned CSS techniques that you can use to create custom search results pages for your own website. Whether you're a front-end developer or a web designer, you can use the skills you've learned in this tutorial to enhance your web design projects. We hope you found this tutorial helpful and informative.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
Tags: google, search results, css, clone, css techniques, google search results styling, custom web design, front-end development, web design
End of the article
