<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Clone Google</title>
</head>
<style>
* {
margin: 0;
padding: 0;
font-family: arial,sans-serif ;
box-sizing: border-box;
}
a[href*="#"] {
text-decoration: none;
}
.container {
width: 100%;
display: flex;
justify-content: center;
min-height: 92px;
}
nav {
display: flex;
height: 50px;
width: 100%;
justify-content: right;
align-items: center;
}
nav a {
padding: 10px 10px 0 0;
line-height: 24px;
font-size: 14px;
color: rgba(0,0,0,0.87);
}
nav a:hover {
text-decoration: underline;
}
a .btn{
width: 35px;
height: 35px;
}
section img{
margin: 0px 0 30px 0;
}
img[src*='https'] {
width: 272px;
height: 92px;
}
.pesquisa {
display: flex;
justify-content: center;
width: 100%;
}
.pesquisa div {
width: 582px;
height: 44px;
border: 1px solid;
border-radius: 30px;
border: 1px solid #dfe1e5;
background: #fff;
}
.pesquisa div:hover {
box-shadow: 1px 1px 1px #c0c2c5;
}
input {
width: 447px;
height: 34px;
border: none;
margin: 3px 3px 3px 5px;
font-size: 16px;
}
input:focus {
box-shadow: 0 0 0 0;
outline: 0;
}
.bi-search {
margin: 10px 0 0 15px;
cursor: default;
}
svg {
margin: 3px 5px 0 15px;
cursor: pointer;
}
.button {
display: flex;
justify-content: center;
}
button {
width: 142px;
height: 36px;
margin: 20px 33px 0 0;
border: 1px solid #f8f9fa;
transition: .3s;
cursor: pointer;
background: #f8f9fa;
border-radius: 5px;
font-size: 14px;
}
button:hover{
box-shadow: 1px 1px 1px #c0c2c5;;
}
section .vazio {
min-height:200px;
border: transparent;
box-shadow: 1px 0px 2px #dadce0;
}
.text {
padding: 15px 30px;
border-bottom: 1px solid #dadce0;
font-size: 15px;
color: rgba(0,0,0,.54);
}
footer {
display: flex;
justify-content: space-between;
.row-1,
.row-2 {
margin: 20px;
font-size: 15px;
}
.row-1 a,
.row-2 a {
padding: 0 20px 0 20px;
color: rgba(0,0,0,.54);
}
.row-1 a:hover,
.row-2 a:hover {
text-decoration: underline;
}
</style>
<body>
<header>
<div class="container">
<nav>
<a href="#">Gmail</a>
<a href="#">Imagens</a>
<a href="#" class="btn"><img src="img/botaoapps.png"
alt="apps"></a>
<a href="#" class="btn"><img src="img/perfil.png"
alt="perfil"></a>
</nav>
</div>
<section>
<div class="container">
<img
src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_c
olor_272x92dp.png" alt="logo">
</div>
<div class="pesquisa">
<div>
<svg xmlns="http://www.w3.org/2000/svg"
width="16" height="16" fill="currentColor" class="bi bi-search"
viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-
1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-
1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0
5.5 5.5 0 0 1 11 0z"/>
</svg>
<input type="text">
<svg xmlns="http://www.w3.org/2000/svg"
width="16" height="16" fill="currentColor" class="bi bi-keyboard-fill"
viewBox="0 0 16 16">
<path d="M0 6a2 2 0 0 1 2-2h12a2 2 0 0
1 2 2v5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-
2V6zm13 .25v.5c0 .138.112.25.25.25h.5a.25.25 0 0 0 .25-.25v-.5a.25.25
0 0 0-.25-.25h-.5a.25.25 0 0 0-.25.25zM2.25 8a.25.25 0 0 0-.25.25v.5c0
.138.112.25.25.25h.5A.25.25 0 0 0 3 8.75v-.5A.25.25 0 0 0 2.75
8h-.5zM4 8.25v.5c0 .138.112.25.25.25h.5A.25.25 0 0 0 5 8.75v-.5A.25.25
0 0 0 4.75 8h-.5a.25.25 0 0 0-.25.25zM6.25 8a.25.25 0 0
0-.25.25v.5c0 .138.112.25.25.25h.5A.25.25 0 0 0 7 8.75v-.5A.25.25 0 0
0 6.75 8h-.5zM8 8.25v.5c0 .138.112.25.25.25h.5A.25.25 0 0 0 9
8.75v-.5A.25.25 0 0 0 8.75 8h-.5a.25.25 0 0 0-.25.25zM13.25 8a.25.25 0
0 0-.25.25v.5c0 .138.112.25.25.25h.5a.25.25 0 0 0 .25-.25v-.5a.25.25 0
0 0-.25-.25h-.5zm0 2a.25.25 0 0
0-.25.25v.5c0 .138.112.25.25.25h.5a.25.25 0 0 0 .25-.25v-.5a.25.25 0 0
0-.25-.25h-.5zm-3-2a.25.25 0 0
0-.25.25v.5c0 .138.112.25.25.25h1.5a.25.25 0 0 0 .25-.25v-.5a.25.25 0
0 0-.25-.25h-1.5zm.75 2.25v.5c0 .138.112.25.25.25h.5a.25.25 0 0
0 .25-.25v-.5a.25.25 0 0 0-.25-.25h-.5a.25.25 0 0 0-.25.25zM11.25
6a.25.25 0 0 0-.25.25v.5c0 .138.112.25.25.25h.5a.25.25 0 0
0 .25-.25v-.5a.25.25 0 0 0-.25-.25h-.5zM9
6.25v.5c0 .138.112.25.25.25h.5a.25.25 0 0 0 .25-.25v-.5A.25.25 0 0 0
9.75 6h-.5a.25.25 0 0 0-.25.25zM7.25 6a.25.25 0 0
0-.25.25v.5c0 .138.112.25.25.25h.5A.25.25 0 0 0 8 6.75v-.5A.25.25 0 0
0 7.75 6h-.5zM5 6.25v.5c0 .138.112.25.25.25h.5A.25.25 0 0 0 6
6.75v-.5A.25.25 0 0 0 5.75 6h-.5a.25.25 0 0 0-.25.25zM2.25 6a.25.25 0
0 0-.25.25v.5c0 .138.112.25.25.25h1.5A.25.25 0 0 0 4 6.75v-.5A.25.25 0
0 0 3.75 6h-1.5zM2 10.25v.5c0 .138.112.25.25.25h.5a.25.25 0 0
0 .25-.25v-.5a.25.25 0 0 0-.25-.25h-.5a.25.25 0 0 0-.25.25zM4.25
10a.25.25 0 0 0-.25.25v.5c0 .138.112.25.25.25h5.5a.25.25 0 0
0 .25-.25v-.5a.25.25 0 0 0-.25-.25h-5.5z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg"
width="16" height="16" fill="currentColor" class="bi bi-mic-fill"
viewBox="0 0 16 16">
<path d="M5 3a3 3 0 0 1 6 0v5a3 3 0 0
1-6 0V3z"/>
<path d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4
0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-
7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5z"/>
</svg>
</div>
</div>
<div class="button">
<button>Pesquisa Google</button>
<button>Estou com sorte</button>
</div>
</section>
</header>
<section>
<div class="vazio">1</div>
<div class="text">Brasil</div>
</section>
<footer>
<div class="row-1">
<a href="#">Sobre</a>
<a href="#">Publicidade</a>
<a href="#">Negócios</a>
<a href="#">Como funciona a Pesquisa</a>
</div>
<div class="row-2">
<a href="#">Privacidade</a>
<a href="#">Termos</a>
<a href="#">Configurações</a>
</div>
</footer>
</body>
</html>
