https://github.com/devmagno/ui-clone-google

🔎 Clone da página inicial do Google com HTML5 e CSS3.
https://github.com/devmagno/ui-clone-google

bem-css css3 devmagno html5 mobile-first ui-clone

Last synced: 9 days ago
JSON representation

🔎 Clone da página inicial do Google com HTML5 e CSS3.

• Host: GitHub
• URL: https://github.com/devmagno/ui-clone-google
• Owner: devMagno
• License: mit
• Created: 2020-10-27T00:00:29.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2020-10-30T23:48:04.000Z (over 5 years ago)
• Last Synced: 2025-10-05T04:31:34.460Z (7 months ago)
• Topics: bem-css, css3, devmagno, html5, mobile-first, ui-clone
• Language: CSS
• Homepage: https://devmagno.github.io/ui-clone-google/
• Size: 122 KB
• Stars: 3
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# UI Clone: Google 🔎







## 📖 Sobre   

O projeto UI Clone da página inicial do Google foi desenvolvido durante um tutorial da [Rocketseat](https://www.youtube.com/c/RocketSeat/videos) (projeto original por [Guilherme Rodz](https://github.com/guilhermerodz)) para fins de estudo. O projeto foi desenvolvido utilizando a abordagem **mobile first** para criação do layout, juntamente com a utilização de **media queries** para um design responsivo, além da **metodologia [BEM](https://medium.com/trainingcenter/bem-em-5min-f5c80fd23439)** (Block Element Modifier) para nomeação das classes em CSS. Decidi ir um pouco além do design proposto para garantir que ficasse mais semelhante à página do Google: melhorei a responsividade na versão desktop, adicionei interações de hover, alterei as imagens, alterei os estilos da barra de pesquisa e adicionei os botões de pesquisa.

---

## 🚀 Tecnologias e ferramentas utilizadas

 - **HTML5**

 - **CSS3**

---

## 🖥️ Demonstração

[![UI Clone: Google](https://i.imgur.com/8VQiThZ.png "Clique para acessar o projeto")](https://devmagno.github.io/ui-clone-google/ "Clique para acessar o projeto")   

Você pode acessar o projeto clicando [aqui](https://devmagno.github.io/ui-clone-google/).

---

## 🔧 Como executar o projeto

```bash

# Clone o repositório

git clone https://github.com/devMagno/ui-clone-google

# Entre no diretório

cd ui-clone-google

```

Depois disso, utilize uma ferramenta como o [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) para criar um servidor local e executar o projeto.

---

## 📝 Licença

O projeto está sob a licença MIT. Para saber mais, acesse o arquivo [LICENSE](https://github.com/devMagno/ui-clone-google/blob/main/LICENSE).

---

**Desenvolvido com ❤️ por [Guilherme Magno](https://github.com/devmagno/).**