├── assets
    ├── img
    │   ├── logo.png
    │   ├── menu.png
    │   ├── banner.png
    │   ├── google-mic.png
    │   ├── quadrados.jpeg
    │   ├── GoogleClone.png
    │   ├── Menu-itens
    │   │   ├── meet.png
    │   │   ├── gmail.png
    │   │   ├── youtube.png
    │   │   ├── google-maps.png
    │   │   ├── google-play.png
    │   │   └── google-drive.png
    │   └── google-search.jpg
    ├── js
    │   └── script.js
    └── css
    │   └── style.css
├── README.md
└── index.html


/assets/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/melissapalhano/google-clone/HEAD/assets/img/logo.png


--------------------------------------------------------------------------------
/assets/img/menu.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/melissapalhano/google-clone/HEAD/assets/img/menu.png


--------------------------------------------------------------------------------
/assets/img/banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/melissapalhano/google-clone/HEAD/assets/img/banner.png


--------------------------------------------------------------------------------
/assets/img/google-mic.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/melissapalhano/google-clone/HEAD/assets/img/google-mic.png


--------------------------------------------------------------------------------
/assets/img/quadrados.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/melissapalhano/google-clone/HEAD/assets/img/quadrados.jpeg


--------------------------------------------------------------------------------
/assets/img/GoogleClone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/melissapalhano/google-clone/HEAD/assets/img/GoogleClone.png


--------------------------------------------------------------------------------
/assets/img/Menu-itens/meet.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/melissapalhano/google-clone/HEAD/assets/img/Menu-itens/meet.png


--------------------------------------------------------------------------------
/assets/img/google-search.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/melissapalhano/google-clone/HEAD/assets/img/google-search.jpg


--------------------------------------------------------------------------------
/assets/img/Menu-itens/gmail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/melissapalhano/google-clone/HEAD/assets/img/Menu-itens/gmail.png


--------------------------------------------------------------------------------
/assets/img/Menu-itens/youtube.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/melissapalhano/google-clone/HEAD/assets/img/Menu-itens/youtube.png


--------------------------------------------------------------------------------
/assets/img/Menu-itens/google-maps.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/melissapalhano/google-clone/HEAD/assets/img/Menu-itens/google-maps.png


--------------------------------------------------------------------------------
/assets/img/Menu-itens/google-play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/melissapalhano/google-clone/HEAD/assets/img/Menu-itens/google-play.png


--------------------------------------------------------------------------------
/assets/img/Menu-itens/google-drive.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/melissapalhano/google-clone/HEAD/assets/img/Menu-itens/google-drive.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <p align="center">
 2 | <img src="https://github.com/melpalhano/GoogleClone/blob/main/assets/img/GoogleClone.png" width="800" height="400"/>
 3 | </p>
 4 | 
 5 | <br>
 6 | <p align="center">
 7 | <a href="https://melpalhano.github.io/GoogleClone/" align="center"><img src="https://i.imgur.com/abgYAhj.png" alt="cliqueAqui"  width="210"></a>
 8 | </p>
 9 | <br>
10 | 
11 | 


--------------------------------------------------------------------------------
/assets/js/script.js:
--------------------------------------------------------------------------------
1 | const input = document.getElementById("search");
2 |       if (screen.width >= 820) {
3 |         document.querySelector("#footer-left").innerHTML =
4 |           '<li><a href="https://www.google.com/search/howsearchworks">Como funciona a busca</a></li><li><a href="https://about.google/">Sobre o Google</a></li><li><a href="https://ads.google.com">Publicidade</a></li><li><a href="https://smallbusiness.withgoogle.com/">Negócios</a></li>';
5 |       }
6 | 


--------------------------------------------------------------------------------
/assets/css/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   padding: 0;
  3 |   margin: 0;
  4 |   box-sizing: border-box;
  5 | }
  6 | 
  7 | html {
  8 |   font-size: 62.5%;
  9 |   font-family: Arial, sans-serif;
 10 | }
 11 | 
 12 | header {
 13 |   margin: 6px;
 14 |   display: flex;
 15 | }
 16 | 
 17 | nav {
 18 |   display: flex;
 19 |   margin-left: auto;
 20 | }
 21 | 
 22 | ul {
 23 |   display: flex;
 24 | }
 25 | 
 26 | li {
 27 |   list-style: none;
 28 | }
 29 | 
 30 | a {
 31 |   font-size: 1.4rem;
 32 |   text-decoration: none;
 33 |   color: #000000;
 34 | }
 35 | 
 36 | a:hover {
 37 |   text-decoration: underline;
 38 | }
 39 | 
 40 | nav img {
 41 |   height: 24px;
 42 |   width: 24px;
 43 | }
 44 | /* MENU */
 45 | 
 46 | #menu-label {
 47 |   cursor: pointer;
 48 | }
 49 | #check-menu {
 50 |   display: none;
 51 | }
 52 | #menu-itens {
 53 |   margin: 15px 0px 0px 0px;
 54 |   background: white;
 55 |   position: absolute;
 56 |   border-radius: 5px;
 57 |   flex-wrap: wrap;
 58 |   display: none;
 59 |   width: 250px;
 60 |   right: 0px;
 61 | }
 62 | #check-menu:checked + #menu-itens {
 63 |   justify-content: center;
 64 |   align-items: center;
 65 |   display: flex;
 66 |   padding: 5px;
 67 |   gap: 10px;
 68 | }
 69 | .item-menu a {
 70 |   flex-direction: column;
 71 |   margin: 0px !important;
 72 |   align-items: center;
 73 |   border-radius: 4px;
 74 |   cursor: pointer;
 75 |   flex: 1 1 auto;
 76 |   display: flex;
 77 |   padding: 10px;
 78 | }
 79 | .item-menu:hover {
 80 |   background: #1f80ff1f;
 81 | }
 82 | .item-menu span {
 83 |   margin: 5px 0px 0px 0px;
 84 |   font-size: 1em;
 85 | }
 86 | .item-menu img {
 87 |   height: auto;
 88 |   width: 38px;
 89 | }
 90 | #more-menu:hover {
 91 |   background: transparent;
 92 | }
 93 | #more-menu span {
 94 |   border: 1px solid #dadce0;
 95 |   margin: 16px 0 20px 0;
 96 |   border-radius: 4px;
 97 |   padding: 10px 24px;
 98 |   max-width: 150px;
 99 |   color: #1a73e8;
100 |   font-size: 1em;
101 | }
102 | #more-menu a {
103 |   margin: 0px !important;
104 |   text-decoration: none;
105 | }
106 | 
107 | /* END Menu */
108 | 
109 | #nav-imgs,
110 | #nav-texts {
111 |   margin: 10px;
112 |   display: flex;
113 | }
114 | 
115 | #nav-imgs a,
116 | #nav-texts a {
117 |   margin-left: 20px;
118 |   text-align: center;
119 | }
120 | 
121 | #nav-texts {
122 |   padding-top: 4px;
123 | }
124 | 
125 | main {
126 |   margin-top: 20vh;
127 | }
128 | 
129 | #banner {
130 |   display: flex;
131 |   justify-content: center;
132 | }
133 | 
134 | #banner img {
135 |   min-width: 272px;
136 |   max-width: 272px;
137 |   min-height: 92px;
138 |   max-height: 92px;
139 |   margin-bottom: 25px;
140 |   line-height: 92px;
141 | }
142 | 
143 | .search-box {
144 |   display: flex;
145 |   width: 80vw;
146 |   max-width: 600px;
147 |   margin: auto;
148 |   padding: 9.5px;
149 |   border-radius: 20px;
150 |   border: 1px #dadce0 solid;
151 | }
152 | 
153 | .search-box input {
154 |   align-self: stretch;
155 |   outline: none;
156 |   border: 0;
157 |   margin-left: 10px;
158 |   margin-right: 10px;
159 |   font-size: 1.6rem;
160 |   width: 100%;
161 | }
162 | 
163 | #mic-icon {
164 |   margin-left: auto;
165 | }
166 | 
167 | .search-box input {
168 |   border: none;
169 | }
170 | 
171 | .buttons {
172 |   display: flex;
173 |   justify-content: center;
174 | }
175 | 
176 | button {
177 |   border-radius: 5px;
178 |   border-color: #f8f9fa;
179 |   background-color: #f8f9fa;
180 |   color: #000000;
181 |   font-size: 1.5rem;
182 |   padding: 10px;
183 |   margin: 8px;
184 | }
185 | 
186 | button:hover {
187 |   border: #dadce0 solid 2px;
188 | }
189 | 
190 | main img {
191 |   height: 24px;
192 | }
193 | 
194 | footer {
195 |   display: flex;
196 |   background-color: #f2f2f2;
197 |   border-top: 0.5px solid #dadce0;
198 |   position: absolute;
199 |   bottom: 0;
200 |   width: 100%;
201 | }
202 | 
203 | #footer-direita {
204 |   margin-left: auto;
205 | }
206 | 
207 | #footer-esquerda {
208 |   margin-right: auto;
209 | }
210 | 
211 | footer li {
212 |   margin: 15px;
213 | }
214 | 
215 | footer a {
216 |   color: #6f6f6f;
217 | }
218 | 
219 | @media (max-width: 759px) {
220 |   footer {
221 |     display: flex;
222 |     flex-direction: column;
223 |   }
224 | 
225 |   #footer-direita {
226 |     margin-right: auto;
227 |     margin-left: auto;
228 |   }
229 | 
230 |   #footer-esquerda {
231 |     margin-right: auto;
232 |     margin-left: auto;
233 |   }
234 | }
235 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="pt-br">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8" />
  6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8 |   <link rel="shortcut icon" href="./assets/img/logo.png" type="image/x-icon" />
  9 |   <link rel="stylesheet" href="./assets/css/style.css" />
 10 |   <title>Made by Melissa</title>
 11 |   <meta name="descricao" content="Pesquise as informações do mundo, incluindo páginas da web, imagens, vídeos e muito mais. O Google Clone tem muitos recursos especiais para ajudá-lo a encontrar exatamente o que procura." />
 12 |   <meta itemprop="nome" content="Google Clone" />
 13 |   <meta itemprop="descricao" content="Pesquise as informações do mundo, incluindo páginas da web, imagens, vídeos e muito mais. O Google Clone tem muitos recursos especiais para ajudá-lo a encontrar exatamente o que procura." />
 14 |   <meta property="og:url" content="http://google.scidroid.me" />
 15 |   <meta property="og:type" content="website" />
 16 |   <meta property="og:title" content="Google Clone" />
 17 |   <meta property="og:descricao" content="Pesquise as informações do mundo, incluindo páginas da web, imagens, vídeos e muito mais. O Google Clone tem muitos recursos especiais para ajudá-lo a encontrar exatamente o que procura." />
 18 |   <meta name="twitter:card" content="summary_large_image" />
 19 |   <meta name="twitter:title" content="Google Clone" />
 20 |   <meta name="twitter:descricao" content="Pesquise as informações do mundo, incluindo páginas da web, imagens, vídeos e muito mais. O Google Clone tem muitos recursos especiais para ajudá-lo a encontrar exatamente o que procura." />
 21 | </head>
 22 | 
 23 | 
 24 | <body>
 25 |   <header>
 26 |     <nav>
 27 |       <ul id="nav-texts">
 28 |         <li><a href="https://mail.google.com/mail/?authuser=0&ogbl">Gmail</a></li>
 29 |         <li><a href="https://www.google.com.br/imghp?hl=en&authuser=0&ogbl">Imagens</a></li>
 30 |       </ul>
 31 |       <ul id="nav-imgs">
 32 |         <li>
 33 |           <label for="check-menu" id="menu-label"><img class="nav-img" src="./assets/img/menu.png" alt="menu" />
 34 |           </label>
 35 |           <input type="checkbox" id="check-menu">
 36 |           <div id="menu-itens">
 37 |             <div class="item-menu">
 38 |               <a href="https://mail.google.com/mail/?tab=rm&authuser=0">
 39 |                 <img src="./assets/img/Menu-itens/gmail.png" alt="Google-Gmail-icon">
 40 |                 <span>Gmail</span>
 41 |               </a>
 42 |             </div>
 43 |             <div class="item-menu">
 44 |               <a href="https://drive.google.com/?tab=ro&authuser=0">
 45 |                 <img src="./assets/img/Menu-itens/google-drive.png" alt="Google-Drive-icon">
 46 |                 <span>Drive</span>
 47 |               </a>
 48 |             </div>
 49 |             <div class="item-menu">
 50 |               <a href="https://maps.google.com.br/maps?hl=pt-BR&tab=rl&authuser=0">
 51 |                 <img src="./assets/img/Menu-itens/google-maps.png" alt="Google-Maps-icon">
 52 |                 <span>Maps</span>
 53 |               </a>
 54 |             </div>
 55 |             <div class="item-menu">
 56 |               <a href="https://play.google.com/?hl=pt-BR&tab=r8&authuser=0">
 57 |                 <img src="./assets/img/Menu-itens/google-play.png" alt="Google-Play-icon">
 58 |                 <span>Play</span>
 59 |               </a>
 60 |             </div>
 61 |             <div class="item-menu">
 62 |               <a href="https://www.youtube.com/?gl=BR&tab=r1&authuser=0">
 63 |                 <img src="./assets/img/Menu-itens/youtube.png" alt="Google-Youtube-icon">
 64 |                 <span>Youtube</span>
 65 |               </a>
 66 |             </div>
 67 |             <div class="item-menu">
 68 |               <a href="https://meet.google.com/?hs=197&pli=1&authuser=0">
 69 |                 <img src="./assets/img/Menu-itens/meet.png" alt="Google-Meet-icon">
 70 |                 <span>Meet</span>
 71 |               </a>
 72 |             </div>
 73 |             <div class="item-menu" id="more-menu">
 74 |               <a href="https://www.google.com.br/intl/pt-BR/about/products?tab=rh"><span>Mais Do google</span></a>
 75 |             </div>
 76 |           </div>
 77 |         </li>
 78 |         <li>
 79 |           <a href="https://myaccount.google.com/"><img class="nav-img" src="./assets/img/logo.png" alt="user" /></a>
 80 |         </li>
 81 |       </ul>
 82 |     </nav>
 83 |   </header>
 84 | 
 85 | 
 86 |   <main>
 87 |     <figure id="banner">
 88 |       <img src="./assets/img/banner.png" alt="google banner" />
 89 |     </figure>
 90 |     <form id="f1" action="https://www.google.com/search" method="GET">
 91 |       <label class="search-box" for="search">
 92 |         <img src="./assets/img/google-search.jpg" alt="search" />
 93 |         <input type="text" name="q" id="search" placeholder="Google Search" />
 94 |         <img id="mic-icon" onclick="alert('Isto não funciona;)');" src="./assets/img/google-mic.png
 95 |             " alt="pesquisar com microfone" />
 96 |       </label>
 97 |       <div class="buttons">
 98 |         <button type="submit" id="searchBtn">
 99 |           Pesquisa Google
100 |         </button>
101 |         <button id="lucky" onclick="alert('Isto não funciona;)');">
102 |           Estou com sorte
103 |         </button>
104 |     </form>
105 |     </div>
106 |   </main>
107 |   <footer>
108 |     <ul id="footer-esquerda">
109 |       <li><a href="https://about.google/?utm_source=google-BR&utm_medium=referral&utm_campaign=hp-footer&fg=1">Sobre</a>
110 |       </li>
111 |       <li><a href="https://ads.google.com/intl/pt-BR_br/home/?subid=ww-ww-et-g-awa-a-g_hpafoot1_1!o2&utm_source=google.com&utm_medium=referral&utm_campaign=google_hpafooter&fg=1">Publicidade</a>
112 |       </li>
113 |       <li><a href="https://smallbusiness.withgoogle.com/">Negócios</a></li>
114 |       <li><a href="https://www.google.com/search/howsearchworks/?fg=1">Como funciona a Pesquisa</a></li>
115 |     </ul>
116 |     <ul id="footer-direita">
117 |       <li><a href="https://policies.google.com/privacy?hl=pt-BR&fg=1">Privacidade</a></li>
118 |       <li><a href="https://policies.google.com/terms?hl=pt-BR&fg=1">Termos</a></li>
119 |       <li><a href="">Configurações</a></li>
120 |     </ul>
121 |   </footer>
122 | 
123 |   <script src="assets/js/script.js"></script>
124 | 
125 | </body>
126 | 
127 | </html>


--------------------------------------------------------------------------------