Hello friends, today in this blog you will learn how to create google search app using html and CSS, I have shared an amazing google search app with the help of html and CSS which you can easily create.
As you may know that google search app is known as google web and google. google search app is a web search sold by google, its main purpose is to search the text in a document.
As you can see in this image, it is a google search app which has a search field and search voice icon along with input field. I have used only html and CSS to create this search app. Neumorphism with this image Button is also designed
This search app is designed only for the purpose of design, this search app has no function and for integration, it has been designed only with the help of html or CSS.
If you are having difficulties in understanding this, app can see this search app full tutorial of design video whose video is given below.
Video Tutorial of Google Search App Design
I am sure you must have liked this google search app as you saw in this video. It is designed with an improved CSS. This means that html and CSS were used to create this google search app. is
If you are a beginner in this and you have knowledge of html and CSS then you can easily create this type of google search app. I mean to say that after you get the source code of this search app, you can make it a different layer.
Google Search App Design Source Codes
First of all know about html code of Google search app, took a div inside body tag whose class name is wrapper, another div is taken inside this class name whose class name is mobile and inside this mobile also four more div Those whose class names are given icon icon-2 google and icon-button have a p tag of class icon called paragraph and three i tags which i is used here for a link to the font icon inside which the class The icon is displayed by typing the name as if there are three i tags whose class name is fa fa-battery-full it is written for battery icon fa fa-wifi this class is for wifi icon and fa fa- The signal class is done for the signl that you see in the image above.Two i tags are taken inside the class name icon-2, with the class name fa fa-bars and fa fa-ellipsis-v right-ell written inside google class, six span tag is taken for the text Has been written inside the word google and a form tag has been taken under this span tag, whose class name search-form and method has been posted.
The input button and span tag are taken inside the form, type text and the class name is search-input, inside the input button, the tag is named class named search-button and an i tag is used inside it.
The class whose name is fa fa-search This name has been used for the search icon, the class is also given inside the tag span, voice-icon is given, inside which an img tag is taken, it is used for linking the image. is
Nine div tag has been taken inside class icon-button, whose class name is given button-icons and all these have been taken i tag inside which class name is given, class name is for icon which you image I see icon button is created
Know about the css of Google search app First of all * margin and padding is zeroed and box-size border is boxed, after that the class wrapper is also given width height and background-color and font-family Given, other tags on it are also styled in the same way.
If you like this Google search app, you can easily get the source code of this search app. In which two code files have been given, in which one html code file and the other css code file is given, copy these two files and paste them in your file, which will help you to create this type of design.
HTML CODE FILE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="searchapp.css" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<div class="wrapper">
<div class="mobile">
<div class="icon">
<p class="time">
21:05</p>
<i class="fa fa-battery-full"></i>
<i class="fa fa-wifi"></i>
<i class="fa fa-signal"></i>
</div>
<div class="icon-2">
<i class="fa fa-bars"></i>
<i class="fa fa-ellipsis-v right-ell"></i>
</div>
<div class="google">
<span class="g">G</span>
<span class="o">o</span>
<span class="o-2">o</span>
<span class="g">g</span>
<span class="l">l</span>
<span class="e">e</span>
<form class="search-form" method="POST">
<input type="text" value="" placeholder="Search Google or Type a URL" class="search-input">
<button class="search-button">
<i class="fa fa-search"></i>
</button>
<span class="voice-icon"><img src="image/voiceicon.png"></span>
</form>
</div>
<div class="icon-button">
<div class="button-icons">
<i class="fa fa-fighter-jet"></i>
<p>
Flight</p>
</div>
<div class="button-icons">
<i class="fa fa-twitter"></i>
<p>
Twitter</p>
</div>
<div class="button-icons">
<i class="fa fa-subway"></i>
<p>
Flight</p>
</div>
<div class="button-icons">
<i class="fa fa-taxi"></i>
<p>
Taxi</p>
</div>
<div class="button-icons">
<i class="fa fa-android"></i>
<p>
Android</p>
</div>
<div class="button-icons">
<i class="fa fa-envelope"></i>
<p>
Gmail</p>
</div>
<div class="button-icons">
<i class="fa fa-hotel"></i>
<p>
Hotels</p>
</div>
<div class="button-icons">
<i class="fa fa-calendar"></i>
<p>
Events</p>
</div>
<div class="button-icons more">
<i class="fa fa-plus"></i>
<p>
More</p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS CODE FILE :
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
width: 100%;
height: 100vh;
background-color: #F2F3F7;
float: left;
font-family: 'Crimson Text', 'Times New Roman', serif;
}
.mobile {
width: 22%;
height: 600px;
background-color: #f2f3f7;
margin: 50px auto;
border-radius: 20px;
overflow: hidden;
box-shadow: -2px -2px 4px 0px #ffffff, 50px 50px 50px 0px rgba(0, 0, 0, .25);
}
.icon {
width: 90%;
margin: auto;
}
.icon p {
font-size: 12px;
font-weight: 800;
color: #5a6674;
position: absolute;
margin-top: 10px;
}
.icon i {
float: right;
font-size: 12px;
color: #5a6674;
font-weight: 800;
padding: 10px 2px 0 0;
}
.icon-2 {
width: 90%;
margin: 40px auto;
}
.icon-2 i {
font-size: 20px;
color: #5a6674;
font-weight: 400;
}
.right-ell {
float: right;
margin: 5px 4% 0 0;
}
.google {
width: 90%;
margin: auto;
text-align: center;
font-size: 50px;
font-weight: 700;
letter-spacing: -6px;
}
.g {
color: #3677F1;
}
.o {
color: #E6362B;
}
.o-2 {
color: #F6AD03;
}
.l {
color: #3BA456;
}
.e {
color: #E63428;
}
.search-form {
position: relative;
width: 100%;
height: 40px;
border-radius: 40px;
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
margin-top: 20px;
background: rgb(253, 252, 252);
background-image: -webkit-linear-gradient(top, #f8f8f8, #f1f1ff);
transition: all .3s ease;
}
.search-form:hover {
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
}
.search-input {
position: absolute;
left: 35px;
font-size: 14px;
background: none;
color: #5a6674;
width: 80%;
height: 40px;
border: none;
appearance: none;
outline: none;
background: transparent;
}
.search-button {
position: absolute;
left: 10px;
top: 8px;
font-size: 18px;
height: 20px;
width: 10px;
padding: 0;
margin: 0;
color: #5a6674;
border: none;
background: none;
outline: none !important;
cursor: pointer;
}
.voice-icon {
position: relative;
display: inline-block;
cursor: pointer;
}
.voice-icon img {
position: absolute;
bottom: 18px;
left: 125px;
width: 25px;
height: 25px;
position: absolute;
cursor: pointer;
}
.icon-button {
width: 90%;
margin: 10px auto;
}
.button-icons {
width: 50px;
height: 50px;
float: left;
border-radius: 50%;
margin: 20px 4%;
text-align: center;
line-height: 50px;
background: #F2F3F7;
cursor: pointer;
transition: 0.3s ease;
box-shadow:
-8px -8px 20px 0px #fff9,
-6px -6px 6px 0px #fff9,
8px 8px 20px 0px #0001,
5px 5px 6px 0px #0001,
inset 0px 0px 0px 0px #fff9,
inset 0px 0px 0px 0px #0001,
inset 0px 0px 0px 0px #fff9,
inset 0px 0px 0px 0px #0001;
position: relative;
}
.button-icons:active {
box-shadow: 0px 0px 0px 0px #fff9,
0px 0px 0px 0px #fff9,
0px 0px 0px 0px #0001,
0px 0px 0px 0px #0001,
inset -8px -8px 20px 0px #fff9,
inset -5px -5px 6px 0px #fff9,
inset 8px 8px 20px 0px #0003,
inset 5px 5px 6px 0px #0001;
}
.button-icons i {
font-size: 20px;
color: #097EFF;
}
.more {
width: 18%;
height: 50px;
margin: 15px 40%;
}
.more i {
color: #FD8416;
font-size: 20px;
line-height: 50px;
}
.button-icons p {
position: absolute;
font-size: 13px;
color: #5a6674;
font-weight: 600;
top: 40px;
left: 13px;
}
Post a Comment