https://github.com/henriqueotogami/instagram-clone-initial-interface

Aula da Digital Innovation One, utilizando apenas HTML5 e CSS3. Clone somente da interface de autenticação do Instagram.
https://github.com/henriqueotogami/instagram-clone-initial-interface

css3 digital-innovation-one dio html5 instagram-clone

Last synced: 10 days ago
JSON representation

Aula da Digital Innovation One, utilizando apenas HTML5 e CSS3. Clone somente da interface de autenticação do Instagram.

• Host: GitHub
• URL: https://github.com/henriqueotogami/instagram-clone-initial-interface
• Owner: henriqueotogami
• License: mit
• Created: 2020-08-22T07:29:20.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-31T02:38:22.000Z (almost 2 years ago)
• Last Synced: 2024-11-05T23:39:11.397Z (about 2 months ago)
• Topics: css3, digital-innovation-one, dio, html5, instagram-clone
• Language: CSS
• Homepage:
• Size: 3.06 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Clone da Interface de Autenticação do Instagram

## [Gabriela Pinheiro](https://www.github.com/SpruceGabriela/)

### Aula: Coding Lab PRO - Digital Innovation One

##### [Meu perfil na plataforma da Digital Innovation One (clique aqui).](https://web.digitalinnovation.one/users/henrique_map)

### Tecnologias: HTML5 e CSS3 

#### Data: 22/08/2020

#### Descrição:

#### Essa aula foi feita no final de semana (22 e 23/08/2020) em que a Digital Innovation One liberou todo oconteúdo da versão PRO da plataforma para todos os estudantes. Eu não poderia ter perdido uma oportunidade dessa.

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

## Autodesafio

### Data: 26/08/2020

### Metas:

- [x] Dark theme;

- [x] Minimalista;

- [x] Sugestão de nova fonte;

- [x] Apenas uma página web;

- [x] Responsividade.

### Resultados:

Desktop: 1350px X 655px



Mobile: 375px X 677px



### Aprendizado:

#### HTML5

- [x] Utilização do [fonts.googleapis.com](https://fonts.googleapis.com) no arquivo index.html;

- [x] Utilzação da fonte Dancing Script (cursiva, handwriting);

#### CSS3

- [x] Utilização da pseudo classe ":nth-child()";

- [x] Utilização de flex-box;

- [x] Utilização de containers.

### Créditos:

- [x] Utilização da imagem dos smartphones[Instagram (clique aqui)](https://www.instagram.com/static/images/homepage/home-phones.png/43cc71bb1b43.png);

- [x] Utilização da imagem da timeline do feed [Instagram (clique aqui)](https://www.instagram.com/static/images/homepage/screenshot1.jpg/d6bf0c928b5a.jpg);

- [x] Utilização do ícone do logo [Instagram (clique aqui)](https://www.instagram.com/static/images/ico/favicon-192.png/68d99ba29cc8.png);

- [x] Utilização do nome escrito [Pinpng (clique aqui)](https://www.pinpng.com/picture/TbJwbo_instagram-logo-black-and-ahite-instagram-word-logo/);

- [x] Utilização do ícone Memoji [Apple - sem link externo];

- [x] Utilização do ícone da Apple Store [Instagram (clique aqui)](https://www.instagram.com/static/images/appstore-install-badges/badge_ios_portuguese-brazilian-pt_br.png/68006a2bb372.png);

- [x] Utilização do ícone da Play Store [Instagram (clique aqui)](https://www.instagram.com/static/images/appstore-install-badges/badge_android_portuguese_brazilian-pt_BR.png/2f2a0c05b2f3.png);

- [x] Utilização do template do Apple Macbook Pro [Pinclipart (clique aqui)](https://www.pinclipart.com/maxpin/imTRmh/);

- [x] Utilização do template do Apple Iphone 6 [PNGFuel (clique aqui)](https://www.pngfuel.com/free-png/zyske).

## Desenvolvido por Henrique Matheus Alves Pereira