Update README.md

README.md

@@ -1,2 +1,110 @@
-# projeto-alurabooks
-
+<h1 align="center"> Projeto Alura Books </h1>
+
+<p align="center">  </p>
+
+<div align="center">
+
+  <a href="https://github.com/coelhoalexandre/projeto-portfolio-alura/blob/main/LICENSE" target="_blank"><img src="https://img.shields.io/badge/License-MIT-yellow.svg" alt="License: MIT"></a> <img src="https://img.shields.io/badge/Em_Progresso-blue.svg" alt="Em Progresso">
+
+</div>
+
+## Sumário
+
+- [Sobre o Projeto](#sobre-o-projeto)
+- [Objetivos do Projeto](#objetivos-do-projeto)
+- [Funcionalidades do Projeto](#funcionalidades-do-projeto)
+- [Tecnologias Utilizadas](#tecnolgias-utilizadas)
+  - [Front-end](#front-end)
+  - [Back-end](#back-end)
+  - [Implementação](#implementação)
+- [Processo de Desenvolvimento](#processo-de-desenvolvimento)
+  - [(Roteiro / Diario) de desenvolvimento](#roteiro--diario-de-desenvolvimento)
+  - [Layout Mobile](#layout-mobile)
+  - [Layout Web](#layout-web)
+  - [Modelo Conceitual](#modelo-conceitual)
+- [Contribuição](#contribuição)
+- [Autor](#autores)
+
+## Sobre o Projeto
+
+Esse projeto foi feito com a instrução de [**Mônica Hillman**](https://github.com/MonicaHillman), bacharela em Tecnologias Digitais e instrutora da Alura.
+
+Em um [curso](https://cursos.alura.com.br/course/html-css-responsividade-mobile-first) ela ensina a identificar elementos e estilos através do **Figma** usando **HTML&CSS**. Seu principal objetivo nesse curso é ensinar a construir um site com responsividade **Mobile First**.
+
+## Objetivos do Projeto
+
+- Entender como interpretar um prótotipo de site no Figma;
+- Conhecer e aprender a usar a abordagem Mobile First;
+
+## Funcionalidades do Projeto
+
+- **Botão Categorias(Desktop)/Menu Hamburguer(Mobile):** Ao ser clicado surge 5 opções de categorias; <br><img src="https://github.com/coelhoalexandre/projetos-alura/blob/main/imagens/alurabook-categorias.png" alt="Aba de Categorias aberta do AluraBooks">
+- **Botões Laterais do Carrosel:** Ao ser clicado move o carrossel na direção oposta;
+- **Arrastar o Carrosel com Mouse/Dedo:** Ao arrastar o carrossel se move.
+<img src="https://github.com/coelhoalexandre/projetos-alura/blob/main/imagens/alurabook-carrossel.png" alt="Carrossel do AluraBooks">
+
+## Tecnolgias Utilizadas
+
+1. HTML
+2. CSS
+3. SwiperJS
+
+### Front-end
+
+1. 
+2.
+3.
+
+### Back-end
+
+1.
+2.
+3.
+
+### Implementação
+
+1.
+2.
+3.
+
+## Processo de Desenvolvimento 
+
+### (Roteiro / Diario) de desenvolvimento
+
+- Link externo para aba projetos, ou um lugar onde esteja todo relato de desenvolvimento
+
+### Layout Mobile
+
+- Imagens
+
+### Layout Web
+
+- Imagens
+
+### Modelo Conceitual
+
+- Imagens
+
+## Contribuição
+
+- Por que contribuir?
+- Quem contribuiu?
+- Como contribui?
+
+## Autor(es)
+
+- Nome(s), redes e forma de contato. 
+- Talvez um breve resumo sobre cada um.
+
+Meu nome é **Alexandre Coelho**, sou autor deste ReadMe e estudante de Desenvolvimento Web. [Falar sobre meu papel no projeto, seu eu fiz tudo ou só modifiquei.
+
+Logo abaixo estão os meus principais links, fique a vontade de acessar o que mais lhe interessar:
+
+<br>
+
+<div align="center">
+
+<a href = "https://www.frontendmentor.io/profile/coelhoalexandre" target="_blank"><img src="https://img.shields.io/badge/Frontend_Mentor-black?style=for-the-badge&logo=frontendmentor&logoColor=aqua" alt="FrontEnd Mentor Badge"> ou <a href = "https://www.frontendmentor.io/profile/coelhoalexandre" target="_blank"><img src="https://img.shields.io/badge/Frontend_Mentor-white?style=for-the-badge&logo=frontendmentor&logoColor=blue" alt="FrontEnd Mentor Badge">
+<a href = "https://github.com/coelhoalexandre"><img src="https://img.shields.io/badge/GitHub-%23333?style=for-the-badge&logo=github&logoColor=white" alt="GitHub Badge"></a>
+<a href="https://www.linkedin.com/in/-coelhoalexandre/" target="_blank"><img src="https://img.shields.io/badge/-LinkedIn-%230077B5?style=for-the-badge&logo=linkedin&logoColor=white" alt="LinkedIn Badge"></a>
+<a href = "mailto:alexandrecoelhocontato@gmail.com" target="_blank"><img src="https://img.shields.io/badge/-Gmail-critical?style=for-the-badge&logo=gmail&logoColor=white" target="_blank" alt="Gmail Badge"></a>