Primeiro commit

.gitignore

@@ -0,0 +1,14 @@
+### Firebase ###
+.idea
+**/node_modules/*
+**/.firebaserc
+
+### Firebase Patch ###
+.runtimeconfig.json
+.firebase/
+
+##AceleraDEV Files
+output.json
+stdout.txt
+
+# End of https://www.gitignore.io/api/firebase

README.md

@@ -0,0 +1,49 @@
+# Mobile First: Instagram
+
+## Objetivo:
+Desenvolver uma versão **mobile first** do Instagram utilizando apenas **HTML5** e **CSS3**.
+
+> **Preview:**
+> [Instagram Codenation](https://aceleradev-react.netlify.com/aula-02/public)
+
+## Tópicos:
+Neste desafio, você vai praticar os seus conhecimentos em: 
+- **HTML5**;
+- **CSS3**;
+- **[Metodologia BEM CSS](http://getbem.com/naming/)**.
+
+> **Observações:**
+> - As imagens estão disponíveis na pasta **assets**;
+> - As imagens de cada personagem estão dentro de sua respectiva pasta, por exemplo: **`assets/profiles/black-panther/`**;
+> - A imagem de perfil dos personagens é identificada por **`nome_do_personagem-profile.jpg`**;
+> - O site deve ser **Mobile First**;
+> - **Não utilize** frameworks CSS como Bootstrap, Foundation e afins.
+
+## Requisitos:
+* **[Node v13.8.0](https://nodejs.org/en/)** - ou superior, instalado em seu computador;
+* **[Live Server](https://www.npmjs.com/package/live-server)**.
+​  
+> O Live server é um módulo NPM que permite servir localmente páginas HTML, sem a necessidade de instalar plugins adicionais no navegador, ou em seu editor.
+> 
+> Uma vez que o **nodejs** esteja instalado em seu computador, abra o terminal e execute o seguinte comando:
+> **`npm install -g live-server`**  
+> 
+> Após a instalação, você deverá navegar até o diretório contendo seus arquivos HTML e executar o comando:
+> **`live-server ./[nome-da-pasta ou arquivo html]`**
+
+
+## Dicas:
+* Utilize as tags semânticas do HTML5 onde julgar necessário;
+* Você pode fazer o download do [Normalize CSS](https://necolas.github.io/normalize.css/) e utilizá-lo no projeto para **"normalizar/resetar"** os estilos padrão dos navegadores;
+* Inspecione os elementos do preview do [Instagram Codenation](https://aceleradev-react.netlify.com/aula-02/public/) e descubra como alguns efeitos foram executados.
+* [Guia BEM CSS](http://getbem.com/naming/)
+* [Guia Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/)
+* [Guia HTML5](https://www.w3c.br/pub/Cursos/CursoHTML5/html5-web.pdf)
+* [Guia CSS3](https://www.w3c.br/pub/Materiais/PublicacoesW3C/guia-css-w3cbr.pdf)
+
+## Screenshots de Referência
+### Versão Mobile:
+![](https://codenation-challenges.s3-us-west-1.amazonaws.com/react-12/screenshot-aula-02-mobile.jpg)
+
+### Versão Desktop:
+![](https://codenation-challenges.s3-us-west-1.amazonaws.com/react-12/screenshot-aula-02-desktop.jpg)

public/css/main.css

@@ -0,0 +1,227 @@
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap");
+
+*,
+*:after,
+*:before {
+	box-sizing: border-box;
+}
+
+html {
+	font-size: 10px;
+}
+
+body {
+	padding-top: 56px;
+	font-family: "Open Sans", sans-serif;
+	background-color: #fafafa;
+	color: #000;
+}
+
+a {
+	text-decoration: none;
+	color: #000;
+	font-weight: bold;
+}
+
+button {
+	background-color: transparent;
+	border: none;
+	box-shadow: none;
+	outline: none;
+}
+
+.container {
+	width: 100%;
+	margin: 0 auto;
+}
+
+@media screen and (min-width: 728px) {
+	.container {
+		width: 728px;
+	}
+}
+
+.topbar {
+	backface-visibility: hidden;
+	background-color: white;
+	left: 0;
+	padding: 8px 16px;
+	position: fixed;
+	top: 0;
+	width: 100%;
+	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
+}
+
+.topbar .container {
+	display: flex;
+	justify-content: space-between;
+}
+
+.topbar__logo {
+	display: inline-block;
+	height: 40px;
+}
+
+.topbar__logo img {
+	height: 100%;
+}
+
+.topbar__icon {
+	font-size: 1.6rem;
+}
+
+.user__thumb {
+	display: flex;
+	border-radius: 100%;
+	overflow: hidden;
+}
+
+.user__thumb__wrapper {
+	border-radius: 100%;
+	border: 2px solid white;
+	display: inline-block;
+	overflow: hidden;
+}
+
+.user__thumb img {
+	height: 100%;
+	width: 100%;
+}
+
+.user__thumb--hasNew {
+	background: linear-gradient(45deg, rgba(245, 160, 77, 1) 0%, rgba(160, 15, 139, 1) 100%);
+}
+
+.stories {
+	overflow-x: hidden;
+	overflow-y: auto;
+	width: 100%;
+	padding: 16px 0;
+}
+
+.stories__container {
+	align-items: center;
+	display: flex;
+	justify-content: flex-start;
+	width: 100%;
+}
+
+.stories .user__thumb {
+	width: 78px;
+	height: 78px;
+	margin: 0 8px;
+	justify-content: center;
+	align-items: center;
+}
+
+.stories .user__thumb__wrapper {
+	height: 72px;
+	width: 72px;
+}
+
+.feed {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	padding: 16px;
+}
+
+@media screen and (min-width: 728px) {
+	.feed {
+		padding: 16px 0;
+	}
+}
+
+.post {
+	background-color: white;
+	border-radius: 10px;
+	border: 1px solid rgba(0, 0, 0, 0.1);
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+	margin-bottom: 30px;
+}
+
+.post__header {
+	align-items: center;
+	display: flex;
+	justify-content: space-between;
+	padding: 8px;
+}
+
+.post__header .user {
+	display: flex;
+	align-items: center;
+}
+
+.post__header .user__thumb {
+	height: 40px;
+	margin-right: 8px;
+	width: 40px;
+}
+
+.post__header .user__name {
+	color: black;
+	font-size: 1.2rem;
+	font-weight: bold;
+	text-decoration: none;
+}
+
+.post__context {
+	font-size: 1.4rem;
+}
+
+.post__figure {
+	overflow: hidden;
+	margin: 0;
+	height: auto;
+	width: 100%;
+}
+
+.post__figure img {
+	width: 100%;
+}
+
+.post__controls {
+	width: 100%;
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+	padding: 4px 0;
+}
+
+.post__control {
+	font-size: 2.4rem;
+	margin: 0 8px;
+}
+
+.post__control:hover {
+	color: #e42323;
+}
+
+.post__control:last-of-type {
+	justify-self: flex-end;
+	margin-left: auto;
+}
+
+.post__status {
+	display: flex;
+	padding: 8px;
+	background-color: rgba(0, 0, 0, 0.05);
+}
+
+.post__status .user {
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+}
+
+.post__status .user span {
+	font-size: 1.2rem;
+}
+
+.post__status .user__thumb {
+	height: 30px;
+	width: 30px;
+	margin-right: 8px;
+}