2022-10-12 00:23:11 +00:00
27 changed files with 991 additions and 65 deletions
--- a/README-template.md
+++ b/README-template.md
@ -0,0 +1,91 @@
+# challenge-landing-page
+
+
+
+## Getting started
+
+To make it easy for you to get started with GitLab, here's a list of recommended next steps.
+
+Already a pro? Just edit this README.md and make it your own. Want to make it easy? [Use the template at the bottom](#editing-this-readme)!
+
+## Add your files
+
+- [ ] [Create](https://gitlab.com/-/experiment/new_project_readme_content:a980a0e1508cd91a06bf888abbfadab2?https://docs.gitlab.com/ee/user/project/repository/web_editor.html#create-a-file) or [upload](https://gitlab.com/-/experiment/new_project_readme_content:a980a0e1508cd91a06bf888abbfadab2?https://docs.gitlab.com/ee/user/project/repository/web_editor.html#upload-a-file) files
+- [ ] [Add files using the command line](https://gitlab.com/-/experiment/new_project_readme_content:a980a0e1508cd91a06bf888abbfadab2?https://docs.gitlab.com/ee/gitlab-basics/add-file.html#add-a-file-using-the-command-line) or push an existing Git repository with the following command:
+
+```
+cd existing_repo
+git remote add origin https://gitlab.com/m3-academy/fase-01/challenge-landing-page.git
+git branch -M main
+git push -uf origin main
+```
+
+## Integrate with your tools
+
+- [ ] [Set up project integrations](https://gitlab.com/-/experiment/new_project_readme_content:a980a0e1508cd91a06bf888abbfadab2?https://docs.gitlab.com/ee/user/project/integrations/)
+
+## Collaborate with your team
+
+- [ ] [Invite team members and collaborators](https://gitlab.com/-/experiment/new_project_readme_content:a980a0e1508cd91a06bf888abbfadab2?https://docs.gitlab.com/ee/user/project/members/)
+- [ ] [Create a new merge request](https://gitlab.com/-/experiment/new_project_readme_content:a980a0e1508cd91a06bf888abbfadab2?https://docs.gitlab.com/ee/user/project/merge_requests/creating_merge_requests.html)
+- [ ] [Automatically close issues from merge requests](https://gitlab.com/-/experiment/new_project_readme_content:a980a0e1508cd91a06bf888abbfadab2?https://docs.gitlab.com/ee/user/project/issues/managing_issues.html#closing-issues-automatically)
+- [ ] [Automatically merge when pipeline succeeds](https://gitlab.com/-/experiment/new_project_readme_content:a980a0e1508cd91a06bf888abbfadab2?https://docs.gitlab.com/ee/user/project/merge_requests/merge_when_pipeline_succeeds.html)
+
+## Test and Deploy
+
+Use the built-in continuous integration in GitLab.
+
+- [ ] [Get started with GitLab CI/CD](https://gitlab.com/-/experiment/new_project_readme_content:a980a0e1508cd91a06bf888abbfadab2?https://docs.gitlab.com/ee/ci/quick_start/index.html)
+- [ ] [Analyze your code for known vulnerabilities with Static Application Security Testing(SAST)](https://gitlab.com/-/experiment/new_project_readme_content:a980a0e1508cd91a06bf888abbfadab2?https://docs.gitlab.com/ee/user/application_security/sast/)
+- [ ] [Deploy to Kubernetes, Amazon EC2, or Amazon ECS using Auto Deploy](https://gitlab.com/-/experiment/new_project_readme_content:a980a0e1508cd91a06bf888abbfadab2?https://docs.gitlab.com/ee/topics/autodevops/requirements.html)
+- [ ] [Use pull-based deployments for improved Kubernetes management](https://gitlab.com/-/experiment/new_project_readme_content:a980a0e1508cd91a06bf888abbfadab2?https://docs.gitlab.com/ee/user/clusters/agent/)
+
+***
+
+# Editing this README
+
+When you're ready to make this README your own, just edit this file and use the handy template below (or feel free to structure it however you want - this is just a starting point!).  Thank you to [makeareadme.com](https://gitlab.com/-/experiment/new_project_readme_content:a980a0e1508cd91a06bf888abbfadab2?https://www.makeareadme.com/) for this template.
+
+## Suggestions for a good README
+Every project is different, so consider which of these sections apply to yours. The sections used in the template are suggestions for most open source projects. Also keep in mind that while a README can be too long and detailed, too long is better than too short. If you think your README is too long, consider utilizing another form of documentation rather than cutting out information.
+
+## Name
+Choose a self-explaining name for your project.
+
+## Description
+Let people know what your project can do specifically. Provide context and add a link to any reference visitors might be unfamiliar with. A list of Features or a Background subsection can also be added here. If there are alternatives to your project, this is a good place to list differentiating factors.
+
+## Badges
+On some READMEs, you may see small images that convey metadata, such as whether or not all the tests are passing for the project. You can use Shields to add some to your README. Many services also have instructions for adding a badge.
+
+## Visuals
+Depending on what you are making, it can be a good idea to include screenshots or even a video (you'll frequently see GIFs rather than actual videos). Tools like ttygif can help, but check out Asciinema for a more sophisticated method.
+
+## Installation
+Within a particular ecosystem, there may be a common way of installing things, such as using Yarn, NuGet, or Homebrew. However, consider the possibility that whoever is reading your README is a novice and would like more guidance. Listing specific steps helps remove ambiguity and gets people to using your project as quickly as possible. If it only runs in a specific context like a particular programming language version or operating system or has dependencies that have to be installed manually, also add a Requirements subsection.
+
+## Usage
+Use examples liberally, and show the expected output if you can. It's helpful to have inline the smallest example of usage that you can demonstrate, while providing links to more sophisticated examples if they are too long to reasonably include in the README.
+
+## Support
+Tell people where they can go to for help. It can be any combination of an issue tracker, a chat room, an email address, etc.
+
+## Roadmap
+If you have ideas for releases in the future, it is a good idea to list them in the README.
+
+## Contributing
+State if you are open to contributions and what your requirements are for accepting them.
+
+For people who want to make changes to your project, it's helpful to have some documentation on how to get started. Perhaps there is a script that they should run or some environment variables that they need to set. Make these steps explicit. These instructions could also be useful to your future self.
+
+You can also document commands to lint the code or run tests. These steps help to ensure high code quality and reduce the likelihood that the changes inadvertently break something. Having instructions for running tests is especially helpful if it requires external setup, such as starting a Selenium server for testing in a browser.
+
+## Authors and acknowledgment
+Show your appreciation to those who have contributed to the project.
+
+## License
+For open source projects, say how it is licensed.
+
+## Project status
+If you have run out of energy or time for your project, put a note at the top of the README saying that development has slowed down or stopped completely. Someone may choose to fork your project or volunteer to step in as a maintainer or owner, allowing your project to keep going. You can also make an explicit request for maintainers.
+
--- a/README.md
+++ b/README.md
@ -1,91 +1,179 @@
-# challenge-landing-page
+# M3 Amazing Landing page | Challenge 1 - M3Academy
+
+Projeto criado e planejado pela M3Academy, com o intuito de mostrar nossas capacidades, e fazer a gente conhecer o seu ambiente de desenvolvimento, para trabalho em equipe, tendo versionamento de código, responsabilidade, prazo de entrega, boas práticas, demostranto o seu ambiente de trabalho em equipe e desenvolvimento em grupo.
+
+## Contents
+
+|Contents                                                                |Available |
+|------------------------------------------------------------------------|----------|
+|[👀 Overview 👀](#overview)                                            |Yes       |
+|[🎯 The challenge 🎯](#the-challenge)                                  |Yes       |
+|[📽️ Visuals 📽️](#visuals)                                              |Yes       |
+|[🧪 Links para Demos 🧪](#links)                                       |Yes       |
+|[👟 My process 👟](#my-process)                                        |Yes       |
+|[📖 What I Learned 📖](#what-i-learned)                                |Yes       |
+|[🏗️ Technologies 🏗️](#technologies)                                    |Yes       |
+|[🏭 Continuous Development 🏭](#continuous-development)                |Yes       |
+|📦 Resources 📦                                                         |Not       |
+|[📥 Installation 📥](#installation)                                    |Yes       |
+|🕹️ Usage 🕹️                                                             |Yes       |
+|[💙 Support 💙](#support)                                              |Yes       |
+|[💙 Contributing 💙](#contributing)                                    |Yes       |
+|[✍️ Author ✍️](#author)                                                  |Yes       |
+|[📞 Contact 📞](#contact)                                              |Yes       |
+|[🎊 Acknowledgment 🎊](#acknowledgment)                                |Yes       |
+|                                                                        |          |
+## 👀 Overview
+
+### 🎯 The Challenge
+
+**DATA ENTREGA**: 13/10/2022 - Antecipado
+
+A branch que será corrigida será a branch principal (main ou master), então, após terminar o desenvolvimento do desafio, faça o pull request das branchs para a branch principal (main ou master). Se não estiver tudo na branch correta, não será considerado.
+
+Os Requisitos cobrados serão:
+
+- [x] Repositório PRIVADO no gitTea;
+- [x] NÃO DEVE ser usado javaScript no desenvolvimento;
+- [x] Quantidade de commits feitos deve ser maior que 10;
+- [x] HTML e CSS devem considerar a performance da pagina (código limpo, sem repetições desnecessárias)
+- [x] Entrega deve ser feita conforme é informado no vídeo - no local de entrega DESTE desafio, você irá colocar a URL do SEU repositório com TODA a Landingpage desenvolvida (o professor que for corrigir irá fazer o clone do seu repositório para corrigir) e irá aguardar a nota e o link da tabela de correção com os erros cometidos e dicas de como ajustar. TRABALHOS ENTREGUES POR EMAIL NÃO SERÃO ACEITOS. CONFIRA O SEU REPOSITÓRIO ANTES DE ENTREGAR, faça o clone novamente e confira se tudo está correto.
+
+Avisos:
+
+- Repositórios VAZIOS terão nota ZERO e o aluno poderá ser eliminado imediatamente do treinamento (no dia seguinte a data de entrega será conferido cada repositório).
+#### Developer Challenge
+
+- [x] Semântica do HTML;
+- [x] Uso de Conventional Commits e GitFlow para fazer as branchs e os commits;
+- [x] Layout deve ser igual ao do figma fornecido acima e deve ser feito por completo;
+- [x] CSS com uso de media query (pode fazer uso de SASS se tiver familiaridade);
+- [x] A pagina deve se adaptar a TODOS os tamanhos de tela (telas maiores que 2500px, desktop (entre 2500 e 1025px), tablet e mobile (1024px até 280px - Galaxy Fold - Chrome) - DICA: usem medidas em porcentagem quando necessário.
+
+[<<< TOP](#contents)
+
+## 📽 Visuals
+
+### 📽 Screenshot
+
+![Image](./docs/images/screenshot.png)
+
+[<<< TOP](#contents)
+
+### 🧪 Links
+
+- URL da solução: [LINK](sss)
+- Demostrativo da solução: [LINK](sss)
+
+[<<< TOP](#contents)
+
+## 👟 My process
+
+### 🏗 Technologies
+
+- HTML
+- CSS
+
+[<<< TOP](#contents)
+
+### 📖 What I Learned
+
+Eu aprendi, a ajudar pessoas com problemas de progamação, gostei bastante do meu desenvolvimento, ajudar quem precisa e gratificante, meu desenvolvimento foi tranquilo acredito que esse é somente o aquecimento, creio que ainda tenho muito a aprender, todos contéudos da M3 Academy são um dos melhores que eu já conheci, acredito que aprenderei muitos conhecimentos novos. Estou ansioso para mais contéudos.
+
+[<<< TOP](#contents)
+
+### 🏭 Continuous development
+
+Quero revisar o que aprendi ao longo do tempo, conhecer como uma empresa realmente funciona, sempre criei projetos sozinhos digo que a melhor experiencia em auxiliar pessoas e ajuda-las é algo muito bonito visto que sempre fui sozinho somente eu e minhas músicas, apesar de estar a um tempo na área de programação acredito que ainda terei muito o que aprender.
+
+[<<< TOP](#contents)


+## 📥 Installation
+Requisitos:

-## Getting started
+- Baixar o VSCode (Visual Studio Code). (Recomendado)
+- Git (Versionamento de código). (Obrigatorio)

-To make it easy for you to get started with GitLab, here's a list of recommended next steps.
+### 📥 VSCODE

-Already a pro? Just edit this README.md and make it your own. Want to make it easy? [Use the template at the bottom](#editing-this-readme)!
+O VSCode(Visual Studio Code) é um IDE (Integrated Development Environment) Ambiente de Desenvolvimento Integrado,
+Este ambiente proposto pelo software VSCode, E muito importante para desenvolvedores das mais diferenciadas áres, como Desenvolvimento Web, Desenvolvimento de software, etc.

-## Add your files
+Baixe de Acordo com seu SO (Sistema Operacional).

- [ ] [Create](https://gitlab.com/-/experiment/new_project_readme_content:a980a0e1508cd91a06bf888abbfadab2?https://docs.gitlab.com/ee/user/project/repository/web_editor.html#create-a-file) or [upload](https://gitlab.com/-/experiment/new_project_readme_content:a980a0e1508cd91a06bf888abbfadab2?https://docs.gitlab.com/ee/user/project/repository/web_editor.html#upload-a-file) files
- [ ] [Add files using the command line](https://gitlab.com/-/experiment/new_project_readme_content:a980a0e1508cd91a06bf888abbfadab2?https://docs.gitlab.com/ee/gitlab-basics/add-file.html#add-a-file-using-the-command-line) or push an existing Git repository with the following command:
+Como Instalar o VSCode.
+- [Site Oficial](https://code.visualstudio.com/)

-```
-cd existing_repo
-git remote add origin https://gitlab.com/m3-academy/fase-01/challenge-landing-page.git
-git branch -M main
-git push -uf origin main
+![VSCODE Screenshot Site Oficial](./docs/images/vscode-official-home.png)
+
+AVISO: Não baixe o software de sites estrangeiros, baixe direto do site oficial.
+### 📥 Git
+
+O Git é um sistema de versionamento de código que deve ser utilizado para clonagem de repositorios, sendo assim o Git tem que estar instalado no computador de clonagem no repositorio.
+
+Baixe de Acordo com seu SO (Sistema Operacional).
+
+Como Instalar o Git.
+
+- [Site Oficial](https://git-scm.com/)
+
+![GIT Screenshot Site Oficial](./docs/images/git-official-home.png)
+
+AVISO: Não baixe o software de sites estrangeiros, baixe direto do site oficial
+
+### 📥 Extensions
+
+No VSCode temos varias extenções para ajudar em nosso desenvolvimento do dia a dia, No caso citaremos algumas.
+
+- [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
+  - Extenção para desenvolvimento Web, que permite a criação de um "servidor" para ambiente de desenvolvimento  permitindo a manutenção dos elementos da páginas e testes de classes, cores, tamanhos, etc. Ela também comtribui com agilidade para o desenvolvimeto web pertimitindo uma economia de tempo. (Uso Opcional)
+
+- [Material Icon](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)
+ - Essa extenção ajuda a torna mais legiveis os arquivos e pastas do projeto (Uso Opcional)
+
+## 🕹️ Usage
+
+`Windows` / `Mac` / `Linux`
+
+Abra seu `cmd`/`bash`/`shell` copie e cole o código abaixo no seu `cmd`/`bash`/`shell`.
+
+```shell
+  git clone https://gitea.ecommercetools.com.br/HenriqueSantosSantana/m3-amazing-landing-page.git
+  cd challenge-landing-page-henrique-santos-santana/
+  code .
 ```

-## Integrate with your tools
+AVISO: Git deve estar instalado na máquina junto com o VSCODE, caso sua IDE não for o VSCODE vá diretamente por meio de seu `cmd`/`bash`/`shell` manualmente, ou utilize a interface para chegar a pasta que foi clonado o repositorio, e entre dentro do projeto.

- [ ] [Set up project integrations](https://gitlab.com/-/experiment/new_project_readme_content:a980a0e1508cd91a06bf888abbfadab2?https://docs.gitlab.com/ee/user/project/integrations/)
+Caso tenha baixado as extenções no VSCODE, somente clique no arquivo index.html, ira abrir um menu abaixo do seu mouse, clique na opção `Open with Live Server`. Após clicar você será redirecionado para o seu navegador padrão com o projeto aberto.

-## Collaborate with your team
+![Open with Live Server](./docs/images/vscode-open-menu-liveserver.png)

- [ ] [Invite team members and collaborators](https://gitlab.com/-/experiment/new_project_readme_content:a980a0e1508cd91a06bf888abbfadab2?https://docs.gitlab.com/ee/user/project/members/)
- [ ] [Create a new merge request](https://gitlab.com/-/experiment/new_project_readme_content:a980a0e1508cd91a06bf888abbfadab2?https://docs.gitlab.com/ee/user/project/merge_requests/creating_merge_requests.html)
- [ ] [Automatically close issues from merge requests](https://gitlab.com/-/experiment/new_project_readme_content:a980a0e1508cd91a06bf888abbfadab2?https://docs.gitlab.com/ee/user/project/issues/managing_issues.html#closing-issues-automatically)
- [ ] [Automatically merge when pipeline succeeds](https://gitlab.com/-/experiment/new_project_readme_content:a980a0e1508cd91a06bf888abbfadab2?https://docs.gitlab.com/ee/user/project/merge_requests/merge_when_pipeline_succeeds.html)
+## 💙 Support

-## Test and Deploy
+Estou a qualquer momento disponivel, para tirar suas duvidas sobre o desafio somente me chame no discord :3

-Use the built-in continuous integration in GitLab.
+## 💙 Contributing

- [ ] [Get started with GitLab CI/CD](https://gitlab.com/-/experiment/new_project_readme_content:a980a0e1508cd91a06bf888abbfadab2?https://docs.gitlab.com/ee/ci/quick_start/index.html)
- [ ] [Analyze your code for known vulnerabilities with Static Application Security Testing(SAST)](https://gitlab.com/-/experiment/new_project_readme_content:a980a0e1508cd91a06bf888abbfadab2?https://docs.gitlab.com/ee/user/application_security/sast/)
- [ ] [Deploy to Kubernetes, Amazon EC2, or Amazon ECS using Auto Deploy](https://gitlab.com/-/experiment/new_project_readme_content:a980a0e1508cd91a06bf888abbfadab2?https://docs.gitlab.com/ee/topics/autodevops/requirements.html)
- [ ] [Use pull-based deployments for improved Kubernetes management](https://gitlab.com/-/experiment/new_project_readme_content:a980a0e1508cd91a06bf888abbfadab2?https://docs.gitlab.com/ee/user/clusters/agent/)
+Está disponivel para contribuições

-***
+## ✍ Author

-# Editing this README
+- GitHub : [Henrique Santos Santana](https://github.com/HenriqueSSan/)
+- Linkedin : [Henrique Santos Santana](https://linkedin.com/in/henrique-santos-santana)

-When you're ready to make this README your own, just edit this file and use the handy template below (or feel free to structure it however you want - this is just a starting point!).  Thank you to [makeareadme.com](https://gitlab.com/-/experiment/new_project_readme_content:a980a0e1508cd91a06bf888abbfadab2?https://www.makeareadme.com/) for this template.
+[<<< TOP](#contents)

-## Suggestions for a good README
-Every project is different, so consider which of these sections apply to yours. The sections used in the template are suggestions for most open source projects. Also keep in mind that while a README can be too long and detailed, too long is better than too short. If you think your README is too long, consider utilizing another form of documentation rather than cutting out information.
+## 📞 Contact

-## Name
-Choose a self-explaining name for your project.
+- Email: [hsstudentwork@gmail.com](https://mail.to:hsstudentwork@gmail.com)

-## Description
-Let people know what your project can do specifically. Provide context and add a link to any reference visitors might be unfamiliar with. A list of Features or a Background subsection can also be added here. If there are alternatives to your project, this is a good place to list differentiating factors.
+[<<< TOP](#contents)

-## Badges
-On some READMEs, you may see small images that convey metadata, such as whether or not all the tests are passing for the project. You can use Shields to add some to your README. Many services also have instructions for adding a badge.
+## 🎊 Acknowledgment

-## Visuals
-Depending on what you are making, it can be a good idea to include screenshots or even a video (you'll frequently see GIFs rather than actual videos). Tools like ttygif can help, but check out Asciinema for a more sophisticated method.
+Agradecimentos a Minha familia por me apoiarem, Obrigado a M3Academy, Caroline .V Moran e Marcia Leal por me selecionarem para algo tão grande 💙.

-## Installation
-Within a particular ecosystem, there may be a common way of installing things, such as using Yarn, NuGet, or Homebrew. However, consider the possibility that whoever is reading your README is a novice and would like more guidance. Listing specific steps helps remove ambiguity and gets people to using your project as quickly as possible. If it only runs in a specific context like a particular programming language version or operating system or has dependencies that have to be installed manually, also add a Requirements subsection.
-
-## Usage
-Use examples liberally, and show the expected output if you can. It's helpful to have inline the smallest example of usage that you can demonstrate, while providing links to more sophisticated examples if they are too long to reasonably include in the README.
-
-## Support
-Tell people where they can go to for help. It can be any combination of an issue tracker, a chat room, an email address, etc.
-
-## Roadmap
-If you have ideas for releases in the future, it is a good idea to list them in the README.
-
-## Contributing
-State if you are open to contributions and what your requirements are for accepting them.
-
-For people who want to make changes to your project, it's helpful to have some documentation on how to get started. Perhaps there is a script that they should run or some environment variables that they need to set. Make these steps explicit. These instructions could also be useful to your future self.
-
-You can also document commands to lint the code or run tests. These steps help to ensure high code quality and reduce the likelihood that the changes inadvertently break something. Having instructions for running tests is especially helpful if it requires external setup, such as starting a Selenium server for testing in a browser.
-
-## Authors and acknowledgment
-Show your appreciation to those who have contributed to the project.
-
-## License
-For open source projects, say how it is licensed.
-
-## Project status
-If you have run out of energy or time for your project, put a note at the top of the README saying that development has slowed down or stopped completely. Someone may choose to fork your project or volunteer to step in as a maintainer or owner, allowing your project to keep going. You can also make an explicit request for maintainers.
+[<<< TOP](#contents)

--- a/assets/css/main.css
+++ b/assets/css/main.css
@ -0,0 +1,421 @@
+/* Mas legível quais tags eu declarei com propriedades padrão */
+
+/* reset all tags */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+/* Mas organização de cores, estilos, fonts, espaçamentos,etc. isso é um arquivo de configuração*/
+:root {
+  --clr-black: #000;
+  --clr-gray-100: #BDBDBD;
+
+  --bg-clr-black: #000;
+  --bg-clr-gray: #E0E0E0;
+  --bg-clr-white: #fff;
+
+  --body-family: "Inter", Arial, Helvetica, sans-serif;
+  --title-family: "Inter", Arial, Helvetica, sans-serif;
+
+  /*----------------------*\
+  =   Volatile Variables   =
+  \*----------------------*/
+  --hs-flow-space: 1rem;
+  --hs-grid-space: 1rem;
+  --hs-flex-space: 1rem;
+}
+
+/* font styles for all body tags */
+
+body * {
+  font-family: var(--body-family);
+}
+
+
+/* font styles for page titles */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.title {
+  font-family: var(--title-family);
+}
+
+/* a metodologia que vou usar será CUBE CSS <3*/
+
+/* started styles */
+
+/*--------*\
+=  HEADER  =
+\*--------*/
+.l-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 1.875rem 1rem;
+}
+
+.header-logo {
+  display: flex;
+}
+
+/*-------------*\
+=  MAIN BANNER  =
+\*-------------*/
+.main-banner-image {
+  width: 100%;
+  height: auto;
+}
+
+/*-------------*\
+=  INFORMATION  =
+\*-------------*/
+.information {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 4rem;
+  padding: 4.625rem 1.875rem 90px;
+}
+
+.information-texts {
+  text-align: center;
+}
+
+.information-subtitle,
+.information-description {
+  line-height: 1.5rem;
+}
+
+.information-subtitle {
+  font-weight: 400;
+}
+
+.information-title {
+  font-weight: 500;
+  line-height: 3rem;
+}
+
+/*----------*\
+=  SERVICES  =
+\*----------*/
+.services {
+  padding-bottom: 5.625rem;
+}
+
+.services-container {
+  --hs-flex-space: 1.25rem;
+  --hs-flow-space: 1.75rem;
+
+  padding: 0 1.625rem;
+}
+
+.services-container,
+.card {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.card {
+  flex-direction: column;
+  width: 100%;
+  min-height: 288px;
+  padding: 2.25rem 1.625rem 1.75rem;
+}
+
+.card-image {
+  width: 34.5%;
+  height: auto;
+  min-width: 103px;
+}
+
+/*---------*\
+=  GALLERY  =
+\*---------*/
+.gallery {
+  --hs-grid-space: 1.5rem 0.875rem;
+
+  padding: 0 1.5rem;
+  margin-bottom: 7rem;
+}
+
+.gallery-container {
+  position: relative;
+  grid-template-columns: repeat(2, 1fr);
+  justify-content: center;
+  transform: translateY(2rem);
+}
+
+.gallery-image,
+.gallery-image img {
+  width: 100%;
+}
+
+
+.gallery-image-3 {
+  grid-column: 1/2 span;
+}
+
+/*----------*\
+=  FEATURES  =
+\*----------*/
+.features {
+  padding: 0 1.5rem;
+}
+
+.features-container {
+  --hs-flex-space: 1rem;
+
+  flex-direction: column;
+  width: 100%;
+  padding-bottom: 6rem;
+  margin: 0;
+}
+
+.features .card {
+  width: 100%;
+  min-height: 332px;
+}
+
+/*------*\
+=  BLOG  =
+\*------*/
+.blog {
+  --hs-flex-space: 3.125rem;
+
+  width: 100%;
+  padding-bottom: 5.5rem;
+}
+
+.blog-images-image {
+  width: 100%;
+}
+
+.blog-article {
+  padding: 0 1.5rem;
+}
+
+.blog-title {
+  font-weight: 500;
+  font-size: 1.5rem;
+}
+
+/*--------*\
+=  FOOTER  =
+\*--------*/
+.footer {
+  flex-direction: column;
+  padding: 2.375rem 0;
+}
+
+/*CUBE CSS styles*/
+
+/*-------------*\
+=  COMPOSITION  =
+\*-------------*/
+.flow *+* {
+  margin-top: var(--hs-flow-space);
+}
+
+.grid-box {
+  display: grid;
+  gap: var(--hs-grid-space);
+}
+
+.flex-box {
+  display: flex;
+  gap: var(--hs-flex-space);
+}
+
+.flex-box[data-type="reversed"] {
+  flex-direction: column-reverse;
+}
+
+/*-------*\
+=  UTILS  =
+\*-------*/
+.center {
+  align-items: center;
+  justify-content: center;
+}
+
+.text-upper {
+  text-transform: uppercase;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.box-shadow {
+  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+}
+
+.clr-gray-100 {
+  color: var(--clr-gray-100);
+}
+
+.bg-clr-black {
+  background-color: var(--bg-clr-black);
+}
+
+.bg-clr-gray {
+  background-color: var(--bg-clr-gray);
+}
+
+/*---------------*\
+=  MEDIA QUERIES  =
+\*---------------*/
+@media only screen and (max-width: 1024px) {
+  .services-container {
+    flex-direction: column;
+  }
+
+  .image-mobile {
+    display: flex;
+  }
+
+  .image-desktop {
+    display: none;
+  }
+}
+
+/*--------------------------------------*\
+=  MEDIA QUERIES LARGE DEVICES 1025px >  =
+\*--------------------------------------*/
+@media screen and (min-width:1025px) {
+
+  .features,
+  .gallery {
+    padding: 0 4.5rem;
+  }
+
+  .information-texts,
+  .services,
+  .blog-article,
+  .blog-images {
+    margin: 0 auto;
+  }
+
+  .information {
+    padding: 4.675rem 0 9.875rem;
+    gap: 4.675rem;
+  }
+
+  .information-texts {
+    width: 40.5%;
+    text-align: initial;
+  }
+
+  .information-title,
+  .information-subtitle {
+    text-align: center;
+  }
+
+  .information-title {
+    font-size: 200%;
+    margin-bottom: 1.75rem;
+  }
+
+  .information-subtitle {
+    line-height: 2rem;
+  }
+
+  .information-image {
+    width: 17%;
+    height: auto;
+  }
+
+  .information-image img {
+    width: 100%;
+  }
+
+  .services {
+    width: 57%;
+  }
+
+  .services-container {
+    padding: 0;
+  }
+
+  .services .card {
+    width: 34%;
+  }
+
+  .gallery {
+    --hs-grid-space: 2.5rem;
+  }
+
+  .gallery-container {
+    grid-template-columns: repeat(3, 1fr);
+    transform: translateY(4rem);
+  }
+
+  .gallery-image {
+    min-height: 530px;
+  }
+
+  .gallery-image-3 {
+    grid-column: auto;
+  }
+
+  .features-container {
+    flex-direction: row;
+    padding-bottom: 6.75rem;
+  }
+
+  .card-image {
+    width: 29%;
+    height: auto;
+  }
+
+  .blog {
+    padding-bottom: 7.25rem;
+  }
+
+  .blog-title {
+    font-size: 2rem;
+  }
+
+  .blog-images-image {
+    margin: 0;
+  }
+
+  .blog .flex-box[data-type="reversed"] {
+    flex-direction: column;
+  }
+
+  .blog-article {
+    width: 30.5%;
+  }
+
+  .blog-description {
+    line-height: 1.5rem;
+  }
+
+  .blog-images {
+    width: 71%;
+    height: auto;
+  }
+
+  .image-mobile {
+    display: none;
+  }
+
+  .image-desktop {
+    display: flex;
+  }
+}
--- a/assets/images/blog-desktop.jpg
+++ b/assets/images/blog-desktop.jpg
--- a/assets/images/blog-mobile.jpg
+++ b/assets/images/blog-mobile.jpg
--- a/assets/images/facebook-logo.svg
+++ b/assets/images/facebook-logo.svg
@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.9993 0.0049936L14.887 0C11.3905 0 9.13087 2.31828 9.13087 5.90643V8.62969H6.00163C5.73123 8.62969 5.51226 8.84891 5.51226 9.11932V13.065C5.51226 13.3354 5.73148 13.5544 6.00163 13.5544H9.13087V23.5106C9.13087 23.781 9.34984 24 9.62025 24H13.703C13.9734 24 14.1924 23.7808 14.1924 23.5106V13.5544H17.8512C18.1216 13.5544 18.3406 13.3354 18.3406 13.065L18.3421 9.11932C18.3421 8.98948 18.2904 8.86514 18.1988 8.77326C18.1071 8.68138 17.9823 8.62969 17.8525 8.62969H14.1924V6.32115C14.1924 5.21157 14.4568 4.64829 15.9022 4.64829L17.9988 4.64755C18.2689 4.64755 18.4879 4.42833 18.4879 4.15817V0.494367C18.4879 0.224462 18.2692 0.00549296 17.9993 0.0049936Z" fill="white"/>
+</svg>
--- a/assets/images/full-logo.svg
+++ b/assets/images/full-logo.svg
--- a/assets/images/gallery-1.jpg
+++ b/assets/images/gallery-1.jpg
--- a/assets/images/gallery-2.jpg
+++ b/assets/images/gallery-2.jpg
--- a/assets/images/gallery-3.jpg
+++ b/assets/images/gallery-3.jpg
--- a/assets/images/handle-coin.svg
+++ b/assets/images/handle-coin.svg
@ -0,0 +1,6 @@
+<svg width="102" height="103" viewBox="0 0 102 103" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M71.4307 52.972C81.8615 52.972 90.3174 44.4332 90.3174 33.9001C90.3174 23.367 81.8615 14.8282 71.4307 14.8282C60.9998 14.8282 52.5439 23.367 52.5439 33.9001C52.5439 44.4332 60.9998 52.972 71.4307 52.972Z" fill="#0336DB"/>
+<path d="M71.4307 63.8353C87.7768 63.8353 101.075 50.4065 101.075 33.9003C101.075 17.3939 87.7768 3.96512 71.4307 3.96512C55.0846 3.96512 41.7861 17.3939 41.7861 33.9003C41.7861 50.4065 55.0846 63.8353 71.4307 63.8353ZM71.4307 7.98856C85.5796 7.98856 97.0909 19.6125 97.0909 33.9003C97.0909 48.1879 85.5798 59.8118 71.4307 59.8118C57.2818 59.8118 45.7705 48.1879 45.7705 33.9003C45.7705 19.6125 57.2816 7.98856 71.4307 7.98856Z" fill="black"/>
+<path d="M68.085 38.9238C67.3947 38.0586 66.1408 37.9224 65.2837 38.6193C64.4269 39.3163 64.292 40.5827 64.9821 41.4479C66.0804 42.8246 67.6548 43.6067 69.2231 43.9815C69.3066 45.0149 70.1636 45.8272 71.2085 45.8272C72.204 45.8272 73.029 45.09 73.177 44.1265C75.9828 43.6208 77.9517 41.7344 78.2746 39.1662C78.6499 36.1831 76.7336 33.3222 73.6147 32.2089C73.4726 32.1582 73.3348 32.1087 73.2007 32.0602V28.1845C73.3666 28.2913 73.4904 28.408 73.5689 28.5206C74.2004 29.4301 75.4429 29.6504 76.344 29.0119C77.2446 28.3738 77.4624 27.1191 76.8303 26.2096C76.1057 25.1665 74.8403 24.2815 73.1995 23.917C73.164 22.8373 72.2863 21.9731 71.2085 21.9731C70.1082 21.9731 69.2163 22.8737 69.2163 23.9848V24.0522C69.094 24.0846 68.9709 24.1194 68.847 24.1572C66.7556 24.7935 65.1774 26.8388 65.009 29.1314C64.8417 31.4097 66.0358 33.3858 68.2031 34.4178C68.4394 34.5304 68.7846 34.6777 69.2161 34.8513V39.7555C68.7593 39.5479 68.3625 39.2717 68.085 38.9238ZM74.3219 38.6593C74.2478 39.2485 73.8527 39.6985 73.2007 39.9653V36.4707C74.0759 37.0916 74.4086 37.9713 74.3219 38.6593ZM68.9828 29.4289C69.0018 29.1694 69.087 28.9123 69.2165 28.6878V30.261C69.0362 30.025 68.9591 29.749 68.9828 29.4289Z" fill="white"/>
+<path d="M101.992 72.3911C101.887 69.9491 100.766 67.8492 98.8342 66.4786C95.6513 64.2197 91.3553 64.612 88.6187 67.4111C88.531 67.5008 88.4517 67.5986 88.3822 67.7034L84.0117 74.2787C82.7881 71.3623 79.9453 69.3136 76.6424 69.3136L45.1993 69.2922H45.198C44.721 69.2922 44.2602 69.4648 43.8988 69.7789L36.0217 76.6221H30.2733V74.854C30.2733 73.743 29.3812 72.8423 28.2811 72.8423H19.5095V72.5671C19.5095 71.456 18.6174 70.5554 17.5173 70.5554H1.99219C0.891902 70.5554 0 71.456 0 72.5671V96.1601C0 97.2712 0.891902 98.1719 1.99219 98.1719H17.5173C18.6174 98.1719 19.5095 97.2712 19.5095 96.1601V95.8849H28.2809C29.381 95.8849 30.2731 94.9843 30.2731 93.8732V92.0156H36.8786L42.846 98.4034C43.2227 98.8066 43.747 99.0347 44.2951 99.0347C44.3045 99.0347 44.3138 99.0347 44.3232 99.0345L85.4646 98.4517C86.1065 98.4426 86.7048 98.1218 87.0715 97.5899L100.143 78.6347C100.152 78.6228 100.16 78.6107 100.168 78.5988C101.433 76.6766 102.081 74.472 101.992 72.3911ZM15.5251 94.1484H3.98438V74.5788H15.5251V94.1484ZM26.2887 91.8617H19.5095V76.8657H26.2887V91.8617ZM96.8612 76.3538L84.3863 94.4433L45.1434 94.9992L39.1875 88.6236C38.811 88.2207 38.2869 87.9924 37.7384 87.9924H30.2733V80.6456H36.7608C37.2378 80.6456 37.6986 80.473 38.0599 80.1589L45.9365 73.3163L76.6411 73.3372C78.8617 73.3372 80.6685 75.1952 80.6685 77.4791C80.6685 79.7628 78.8619 81.6206 76.6411 81.6206C76.6359 81.6206 76.6307 81.6208 76.6255 81.6208H59.4449C58.8982 81.6208 58.3755 81.8478 57.9992 82.2485L53.808 86.7125C53.051 87.5188 53.0846 88.792 53.8831 89.5565C54.2684 89.9252 54.7612 90.1083 55.2533 90.1083C55.7811 90.1083 56.3078 89.8979 56.6995 89.4806L60.3013 85.6443L80.1927 85.6451H80.1933C80.8571 85.6451 81.4775 85.3111 81.8474 84.7545L91.5757 70.119C92.9429 68.8324 95.0052 68.6787 96.5432 69.7706C98.6193 71.2438 98.275 74.1936 96.8612 76.3538Z" fill="black"/>
+</svg>
--- a/assets/images/information-image.png
+++ b/assets/images/information-image.png
--- a/assets/images/instagram-logo.svg
+++ b/assets/images/instagram-logo.svg
@ -0,0 +1,5 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.3766 0H6.62295C2.97106 0 0 3.095 0 6.89906V18.1008C0 21.905 2.97106 24.9999 6.62295 24.9999H17.3766C21.0288 24.9999 23.9999 21.9049 23.9999 18.1008V6.89906C24 3.095 21.0288 0 17.3766 0ZM21.8706 18.1008C21.8706 20.6819 19.8547 22.7817 17.3768 22.7817H6.62295C4.1452 22.7819 2.12938 20.6819 2.12938 18.1008V6.89906C2.12938 4.31806 4.1452 2.21811 6.62295 2.21811H17.3766C19.8545 2.21811 21.8705 4.31806 21.8705 6.89906V18.1008H21.8706Z" fill="white"/>
+<path d="M11.9999 6.05847C8.58992 6.05847 5.81576 8.94822 5.81576 12.5003C5.81576 16.0522 8.58992 18.9418 11.9999 18.9418C15.4099 18.9418 18.1841 16.0522 18.1841 12.5003C18.1841 8.94822 15.4099 6.05847 11.9999 6.05847ZM11.9999 16.7236C9.7642 16.7236 7.94514 14.829 7.94514 12.5002C7.94514 10.1711 9.76406 8.27643 11.9999 8.27643C14.2358 8.27643 16.0547 10.1711 16.0547 12.5002C16.0547 14.829 14.2356 16.7236 11.9999 16.7236Z" fill="white"/>
+<path d="M18.4435 4.17761C18.0333 4.17761 17.6303 4.35062 17.3405 4.65377C17.0494 4.95543 16.882 5.37539 16.882 5.80422C16.882 6.23173 17.0495 6.65154 17.3405 6.95468C17.6301 7.25635 18.0333 7.43084 18.4435 7.43084C18.8552 7.43084 19.2569 7.25635 19.548 6.95468C19.839 6.65154 20.0051 6.23158 20.0051 5.80422C20.0051 5.37539 19.839 4.95543 19.548 4.65377C19.2584 4.35062 18.8552 4.17761 18.4435 4.17761Z" fill="white"/>
+</svg>
--- a/assets/images/laptop.svg
+++ b/assets/images/laptop.svg
@ -0,0 +1,14 @@
+<svg width="104" height="104" viewBox="0 0 104 104" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_59_1008)">
+<path d="M45.8327 62.512V43.6035C45.8327 42.4816 44.9233 41.5722 43.8015 41.5722H38.1581V40.5101C38.1581 36.7803 35.1077 33.7456 31.3585 33.7456C27.6092 33.7456 24.559 36.7801 24.559 40.5101V41.5722H18.95C17.8281 41.5722 16.9187 42.4816 16.9187 43.6035V62.512C16.9187 66.0242 19.7761 68.8816 23.2883 68.8816H39.4633C42.9754 68.8816 45.8327 66.0242 45.8327 62.512ZM28.6217 40.5103C28.6217 39.0204 29.8496 37.8083 31.3587 37.8083C32.8679 37.8083 34.0958 39.0204 34.0958 40.5103V41.5724H28.6217V40.5103ZM20.9812 62.512V45.6347H24.5592V47.67C24.5592 48.7917 25.4686 49.7013 26.5905 49.7013C27.7124 49.7013 28.6217 48.7917 28.6217 47.67V45.6347H34.0958V47.67C34.0958 48.7917 35.0052 49.7013 36.127 49.7013C37.2489 49.7013 38.1583 48.7917 38.1583 47.67V45.6347H41.7704V62.512C41.7704 63.7841 40.7355 64.8191 39.4635 64.8191H23.2883C22.0161 64.8191 20.9812 63.7841 20.9812 62.512Z" fill="black"/>
+<path d="M101.969 75.9619H100.063V17.3906C100.063 12.8268 96.3499 9.11383 91.7861 9.11383H12.2139C7.65009 9.11383 3.93717 12.8268 3.93717 17.3906V75.9619H2.03125C0.909391 75.9619 0 76.8715 0 77.9931V85.5912C0 90.7165 4.16955 94.8862 9.2948 94.8862H94.705C99.8302 94.8862 104 90.7167 104 85.5912V77.9931C104 76.8713 103.091 75.9619 101.969 75.9619ZM12.2139 13.1763H91.7861C94.1098 13.1763 96.0003 15.0668 96.0003 17.3906V23.0448H7.99967V17.3906C7.99967 15.0668 9.89016 13.1763 12.2139 13.1763ZM7.99967 27.1073H96.0003V75.9619H66.7028C65.5809 75.9619 64.6715 76.8715 64.6715 77.9931C64.6715 79.2905 63.6161 80.3459 62.3187 80.3459H41.6812C40.3839 80.3459 39.3285 79.2905 39.3285 77.9931C39.3285 76.8715 38.4191 75.9619 37.2972 75.9619H7.99967V27.1073ZM99.9375 85.5912C99.9375 88.4764 97.5902 90.8237 94.7052 90.8237H9.2948C6.40961 90.8237 4.0625 88.4764 4.0625 85.5912V80.0244H35.5954C36.4471 82.5691 38.8533 84.4084 41.681 84.4084H62.3187C65.1465 84.4084 67.5529 82.5691 68.4044 80.0244H99.9375V85.5912Z" fill="black"/>
+<path d="M50.859 19.902H53.1409C54.2628 19.902 55.1722 18.9924 55.1722 17.8708C55.1722 16.7491 54.2628 15.8395 53.1409 15.8395H50.859C49.7372 15.8395 48.8278 16.7491 48.8278 17.8708C48.8278 18.9924 49.7372 19.902 50.859 19.902Z" fill="black"/>
+<path d="M55.3624 55.2268H87.9032V65.4397H55.3624V55.2268Z" fill="#0336DB"/>
+<path d="M55.3624 37.4568H87.9032V47.6698H55.3624V37.4568Z" fill="#0336DB"/>
+</g>
+<defs>
+<clipPath id="clip0_59_1008">
+<rect width="104" height="104" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/assets/images/main-banner-desktop.jpg
+++ b/assets/images/main-banner-desktop.jpg
--- a/assets/images/main-banner-mobile.jpg
+++ b/assets/images/main-banner-mobile.jpg
--- a/assets/images/money.svg
+++ b/assets/images/money.svg
@ -0,0 +1,14 @@
+<svg width="104" height="104" viewBox="0 0 104 104" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_59_990)">
+<path d="M103.987 22.5075C103.985 19.1036 101.215 16.3332 97.8102 16.3317L15.7284 16.3236H15.7255C14.077 16.3236 12.5271 16.9655 11.3616 18.131C10.1955 19.2972 9.55358 20.8478 9.55419 22.4974L9.5552 26.032L6.17419 26.0316H6.17134C4.52278 26.0316 2.97273 26.6734 1.80741 27.839C0.641266 29.0055 -0.000608942 30.5562 4.33492e-07 32.2057L0.0134067 81.4924C0.0146254 84.8964 2.78505 87.6668 6.18983 87.6682L88.2716 87.6761H88.2745C89.923 87.6761 91.4729 87.0343 92.6384 85.8687C93.8046 84.7026 94.4464 83.1519 94.4458 81.5024L94.4448 77.9678L97.8258 77.968H97.8287C99.4772 77.968 101.027 77.3261 102.193 76.1606C103.359 74.9944 104.001 73.4438 104 71.7942L103.987 22.5075ZM89.7656 82.9961C89.3673 83.3945 88.8377 83.6136 88.2743 83.6136C88.2737 83.6134 88.273 83.6134 88.2726 83.6136L6.19084 83.6057C5.02511 83.6051 4.07631 82.6565 4.07591 81.491L4.0625 32.2043C4.0623 31.6405 4.28167 31.1103 4.68 30.7118C5.07833 30.3134 5.60788 30.0943 6.17216 30.0943H6.17317L88.2548 30.1022C89.4205 30.1028 90.3693 31.0516 90.3697 32.2169L90.3831 81.5036C90.3833 82.0674 90.1641 82.5976 89.7656 82.9961ZM99.32 73.288C98.9217 73.6863 98.3921 73.9055 97.8279 73.9055H97.8268L94.4436 73.9053L94.4322 32.2157C94.431 28.8117 91.6604 26.0411 88.2558 26.0399L13.6177 26.0326L13.6167 22.4962C13.6165 21.9323 13.8359 21.4021 14.2342 21.0036C14.6325 20.6053 15.1621 20.3861 15.7263 20.3861H15.7272L97.809 20.394C98.9747 20.3946 99.9235 21.3432 99.9239 22.5088L99.9375 71.7954C99.9377 72.3593 99.7183 72.8895 99.32 73.288Z" fill="black"/>
+<path d="M78.2518 76.5467C78.2508 73.7487 80.518 71.4814 83.3159 71.4826L83.3104 42.2304C80.5124 42.2294 78.2432 39.9603 78.2422 37.1622H16.1941C16.1951 39.9603 13.9278 42.2276 11.1299 42.2263L11.1354 71.4785C13.9335 71.4796 16.2026 73.7487 16.2036 76.5467H78.2518Z" fill="#0336DB"/>
+<path d="M72.2577 54.9495H65.6194C64.4975 54.9495 63.5881 55.8591 63.5881 56.9808C63.5881 58.1024 64.4975 59.012 65.6194 59.012H72.2577C73.3796 59.012 74.289 58.1024 74.289 56.9808C74.289 55.8589 73.3796 54.9495 72.2577 54.9495Z" fill="white"/>
+<path d="M29.1089 54.9495H22.4706C21.3487 54.9495 20.4393 55.8591 20.4393 56.9808C20.4393 58.1024 21.3487 59.012 22.4706 59.012H29.1089C30.2308 59.012 31.1401 58.1024 31.1401 56.9808C31.1401 55.8589 30.2308 54.9495 29.1089 54.9495Z" fill="white"/>
+<path d="M51.7563 60.5843C52.5408 60.5843 53.1161 60.7407 53.4821 61.0535C53.8482 61.3664 54.0313 61.8357 54.0313 62.4614C54.0313 63.7475 53.2729 64.3906 51.7563 64.3906H42.6828C41.1662 64.3906 40.4079 63.7475 40.4079 62.4614C40.4079 61.8357 40.5909 61.3664 40.957 61.0535C41.3231 60.7407 41.8983 60.5843 42.6828 60.5843H44.8008V51.1726L42.7089 52.3979C42.4126 52.5717 42.1075 52.6587 41.7937 52.6587C41.3056 52.6587 40.8872 52.4501 40.5386 52.0329C40.1899 51.5984 40.0156 51.1205 40.0156 50.599C40.0156 49.8864 40.3207 49.3476 40.9308 48.9826L45.1146 46.558C45.8816 46.1235 46.6051 45.9062 47.2849 45.9062C47.9822 45.9062 48.5401 46.1148 48.9584 46.532C49.3942 46.9491 49.6121 47.514 49.6121 48.2266V60.5843H51.7563Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_59_990">
+<rect width="104" height="104" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/assets/images/phone-notificated.svg
+++ b/assets/images/phone-notificated.svg
@ -0,0 +1,6 @@
+<svg width="86" height="104" viewBox="0 0 86 104" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M62.8503 69.9237C62.1676 69.9237 61.492 69.8935 60.8245 69.8346V83.7216H4.66959V17.1732H60.8245V28.4152C61.492 28.3562 62.1676 28.326 62.8503 28.326C63.5329 28.326 64.2085 28.3562 64.876 28.4152V9.77092C64.876 4.38323 60.4883 0 55.095 0H10.3991C5.00586 0 0.618164 4.38323 0.618164 9.77092V94.2108C0.618164 99.6086 4.99755 104 10.3807 104H55.1135C60.4966 104 64.876 99.6086 64.876 94.2108V69.8346C64.2087 69.8937 63.5329 69.9237 62.8503 69.9237V69.9237ZM4.66959 9.77092C4.66959 6.62309 7.23981 4.0625 10.3991 4.0625H55.095C58.2543 4.0625 60.8245 6.62309 60.8245 9.77092V13.1107H4.66959V9.77092ZM60.8245 94.2108C60.8245 97.3686 58.2626 99.9375 55.1135 99.9375H10.3807C7.23171 99.9375 4.66959 97.3686 4.66959 94.2108V87.7841H60.8245V94.2108Z" fill="black"/>
+<path d="M31.3966 95.8921H34.0975C35.2163 95.8921 36.1232 94.9825 36.1232 93.8608C36.1232 92.739 35.2163 91.8296 34.0975 91.8296H31.3966C30.2778 91.8296 29.3709 92.739 29.3709 93.8608C29.3709 94.9825 30.2778 95.8921 31.3966 95.8921Z" fill="black"/>
+<path d="M62.8502 26.2947C50.2758 26.2947 40.0824 36.5162 40.0824 49.125C40.0824 54.1306 41.689 58.7596 44.4132 62.5225L40.0824 71.2623L52.6667 69.5496C55.731 71.0887 59.1897 71.955 62.8502 71.955C75.4246 71.955 85.6182 61.7335 85.6182 49.125C85.6182 36.5164 75.4246 26.2947 62.8502 26.2947V26.2947Z" fill="#0336DB"/>
+<path d="M65.0226 55.0342H64.8759V47.5356H65.0226C66.1414 47.5356 67.0483 46.6261 67.0483 45.5044C67.0483 44.3827 66.1414 43.4731 65.0226 43.4731H60.6781C59.5593 43.4731 58.6523 44.3827 58.6523 45.5044C58.6523 46.6261 59.5593 47.5356 60.6781 47.5356H60.8247V55.0342H60.6781C59.5593 55.0342 58.6523 55.9438 58.6523 57.0655C58.6523 58.1871 59.5593 59.0967 60.6781 59.0967H65.0226C66.1414 59.0967 67.0483 58.1871 67.0483 57.0655C67.0483 55.9438 66.1414 55.0342 65.0226 55.0342Z" fill="white"/>
+</svg>
--- a/assets/images/shop.svg
+++ b/assets/images/shop.svg
@ -0,0 +1,13 @@
+<svg width="103" height="103" viewBox="0 0 103 103" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_59_964)">
+<path d="M73.2652 54.4426H96.068V75.7642H73.2652V54.4426Z" fill="#0336DB"/>
+<path d="M6.93198 54.4426H29.7348V75.7642H6.93198V54.4426Z" fill="#0336DB"/>
+<path d="M40.8369 54.4426H62.1631V89.3342H40.8369V54.4426Z" fill="#0336DB"/>
+<path d="M95.3669 10.9888H7.63306C3.42415 10.9888 0 14.4131 0 18.6219V33.3092C0 37.012 1.97169 40.2627 4.92026 42.067V89.9995C4.92026 91.1105 5.82091 92.0112 6.93198 92.0112H96.068C97.1791 92.0112 98.0797 91.1105 98.0797 89.9995V42.067C101.028 40.2627 103 37.012 103 33.3092V18.6219C103 14.4131 99.5757 10.9888 95.3669 10.9888ZM82.4805 33.3092C82.4805 36.7479 79.683 39.5453 76.2441 39.5453C72.8053 39.5453 70.0078 36.7479 70.0078 33.3092V15.0122H82.4805V33.3092ZM65.9844 33.3092C65.9844 36.7479 63.1869 39.5453 59.748 39.5453C56.3092 39.5453 53.5117 36.7479 53.5117 33.3092V15.0122H65.9844V33.3092ZM49.4883 33.3092C49.4883 36.7479 46.6908 39.5453 43.252 39.5453C39.8131 39.5453 37.0156 36.7479 37.0156 33.3092V15.0122H49.4883V33.3092ZM32.9922 33.3092C32.9922 36.7479 30.1947 39.5453 26.7559 39.5453C23.317 39.5453 20.5195 36.7479 20.5195 33.3092V15.0122H32.9922V33.3092ZM4.02344 18.6219C4.02344 16.6315 5.64287 15.0122 7.63306 15.0122H16.4961V33.3092C16.4961 36.7479 13.6986 39.5453 10.2598 39.5453C6.82093 39.5453 4.02344 36.7479 4.02344 33.3092V18.6219ZM94.0563 87.9877H8.9437V43.4849C9.37461 43.5402 9.81397 43.569 10.2598 43.569C13.6362 43.569 16.6371 41.9294 18.5078 39.4047C20.3785 41.9294 23.3794 43.569 26.7559 43.569C30.1323 43.569 33.1332 41.9294 35.0039 39.4047C36.8746 41.9294 39.8755 43.569 43.252 43.569C46.6284 43.569 49.6293 41.9294 51.5 39.4047C53.3707 41.9294 56.3716 43.569 59.748 43.569C63.1245 43.569 66.1254 41.9294 67.9961 39.4047C69.8668 41.9294 72.8677 43.569 76.2441 43.569C79.6206 43.569 82.6215 41.9294 84.4922 39.4047C86.3629 41.9294 89.3638 43.569 92.7402 43.569C93.186 43.569 93.6254 43.5404 94.0563 43.4849V87.9877ZM98.9766 33.3092C98.9766 36.7479 96.1791 39.5453 92.7402 39.5453C89.3014 39.5453 86.5039 36.7479 86.5039 33.3092V15.0122H95.3669C97.3573 15.0122 98.9766 16.6315 98.9766 18.6219V33.3092Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_59_964">
+<rect width="103" height="103" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/assets/images/shopping-bag.svg
+++ b/assets/images/shopping-bag.svg
@ -0,0 +1,12 @@
+<svg width="102" height="103" viewBox="0 0 102 103" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_59_952)">
+<path d="M63.7912 95.3056H18.2303V26.7631H28.9V37.1243C28.9 38.2353 29.7919 39.136 30.8922 39.136C31.9923 39.136 32.8844 38.2353 32.8844 37.1243V26.7631H60.2063V37.1243C60.2063 38.2353 61.0984 39.136 62.1984 39.136C63.2985 39.136 64.1906 38.2353 64.1906 37.1243V26.7631H74.5273V48.0779H78.5117V24.7514C78.5117 23.6403 77.6196 22.7397 76.5195 22.7397H64.1906V17.7287C64.1906 7.95313 56.2751 0 46.5454 0C44.3154 0 42.1805 0.417834 40.2145 1.17967C38.2484 0.417834 36.1135 0 33.8835 0C24.1536 0 16.2381 7.95313 16.2381 17.7287V22.7395H3.90923C2.80914 22.7395 1.91704 23.6401 1.91704 24.7512V89.7613C1.91704 95.0368 6.17415 99.3288 11.4068 99.3288H69.8044C67.8365 98.2564 65.7517 96.925 63.7912 95.3056ZM46.5454 4.02344C54.0781 4.02344 60.2063 10.1717 60.2063 17.7287V22.7395H51.5287V17.7287C51.5287 12.2528 49.045 7.34901 45.1501 4.09425C45.6089 4.04758 46.0745 4.02344 46.5454 4.02344ZM40.2145 5.58614C44.5682 7.8801 47.5445 12.4624 47.5445 17.7289V22.7397H32.8844V17.7287C32.8844 12.4622 35.8607 7.8801 40.2145 5.58614ZM20.2225 17.7287C20.2225 10.1717 26.3508 4.02344 33.8835 4.02344C34.3544 4.02344 34.8198 4.04738 35.2786 4.09445C31.3837 7.34901 28.8998 12.253 28.8998 17.7289V22.7397H20.2223V17.7287H20.2225ZM14.2459 95.3056H11.4068C8.37113 95.3056 5.90142 92.8185 5.90142 89.7615V26.7631H14.2459V95.3056Z" fill="black"/>
+<path d="M93.7992 54.7375C87.7766 54.7375 82.5819 51.191 80.165 46.0659H73.082C70.6651 51.1908 65.4705 54.7375 59.4479 54.7375C57.2051 54.7375 55.0772 54.2452 53.1641 53.3635V78.4196C53.1641 96.7462 76.6235 103 76.6235 103C76.6235 103 100.083 96.7462 100.083 78.4196V53.3635C98.1698 54.2452 96.0418 54.7375 93.7992 54.7375Z" fill="#0336DB"/>
+<path d="M75.8531 81.6054C75.328 81.6054 74.8228 81.3957 74.4487 81.0201L70.1192 76.673C69.3389 75.8895 69.3353 74.6158 70.1113 73.828C70.8868 73.0401 72.1483 73.0364 72.9286 73.82L75.7249 76.6276L82.99 67.9301C83.6996 67.0807 84.9563 66.9733 85.7972 67.6895C86.6383 68.4059 86.745 69.6751 86.0354 70.5244L77.3762 80.891C77.0172 81.3207 76.4968 81.579 75.9406 81.6035C75.9113 81.6047 75.8824 81.6054 75.8531 81.6054Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_59_952">
+<rect width="102" height="103" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/assets/images/simple-logo.svg
+++ b/assets/images/simple-logo.svg
--- a/assets/images/youtube-logo.svg
+++ b/assets/images/youtube-logo.svg
@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.98 5.34C22.329 4.182 21.6225 3.969 20.184 3.888C18.747 3.7905 15.1335 3.75 12.003 3.75C8.8665 3.75 5.2515 3.7905 3.816 3.8865C2.3805 3.969 1.6725 4.1805 1.0155 5.34C0.345 6.4965 0 8.4885 0 11.9955C0 11.9985 0 12 0 12C0 12.003 0 12.0045 0 12.0045V12.0075C0 15.4995 0.345 17.5065 1.0155 18.651C1.6725 19.809 2.379 20.019 3.8145 20.1165C5.2515 20.2005 8.8665 20.25 12.003 20.25C15.1335 20.25 18.747 20.2005 20.1855 20.118C21.624 20.0205 22.3305 19.8105 22.9815 18.6525C23.658 17.508 24 15.501 24 12.009C24 12.009 24 12.0045 24 12.0015C24 12.0015 24 11.9985 24 11.997C24 8.4885 23.658 6.4965 22.98 5.34ZM9 16.5V7.5L16.5 12L9 16.5Z" fill="white"/>
+</svg>
--- a/docs/images/git-official-home.png
+++ b/docs/images/git-official-home.png
--- a/docs/images/screenshot.png
+++ b/docs/images/screenshot.png
--- a/docs/images/vscode-official-home.png
+++ b/docs/images/vscode-official-home.png
--- a/docs/images/vscode-open-menu-liveserver.png
+++ b/docs/images/vscode-open-menu-liveserver.png
--- a/index.html
+++ b/index.html
@ -0,0 +1,232 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="author" content="Henrique Santos Santana" />
+    <meta
+      name="description"
+      content="Isto é a descrição da página para ajudar SEO(Search Engineer Optimization)"
+    />
+    <meta
+      name="keywords"
+      content="challenge, m3-academy, landing page, HTML, CSS, development, frontend, desafio, desenvolvimento"
+    />
+
+    <!--===== FAVICON =====-->
+    <link rel="shortcut icon" href="./assets/images/simple-logo.svg" type="image/svg+xml" />
+
+    <!--===== GOOGLE FONTS =====-->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
+      rel="stylesheet"
+    />
+
+    <!--===== STYLES =====-->
+    <link rel="stylesheet" href="./assets/css/main.css" type="text/css" />
+
+    <title>M3 Amazing Landing page | Challenge 1</title>
+  </head>
+  <body>
+    <!--=============== Header ===============-->
+    <header class="l-header bg-clr-black">
+      <a class="l-header-logo" href="/" title="Homepage link">
+        <img class="header-logo-image" src="./assets/images/full-logo.svg" alt="" />
+      </a>
+    </header>
+
+    <!--=============== Main Banner ===============-->
+    <figure class="main-banner">
+      <img
+        class="main-banner-image image-desktop"
+        src="./assets/images/main-banner-desktop.jpg"
+        alt="Um desktop aberto em um software de ambiente de desenvolvimento"
+      />
+      <img
+        class="main-banner-image image-mobile"
+        src="./assets/images/main-banner-mobile.jpg"
+        alt="Um desktop aberto em um software de ambiente de desenvolvimento"
+      />
+    </figure>
+
+    <!--=============== Information ===============-->
+    <section class="information">
+      <div class="information-texts">
+        <h2 class="information-subtitle text-upper">Lorem ipusm</h2>
+        <h1 class="information-title text-upper">Dolor sit amet</h1>
+        <p class="information-description">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui
+          fringilla interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit.
+          Nulla suscipit magna dui.
+        </p>
+      </div>
+      <figure class="information-image">
+        <img
+          src="./assets/images/information-image.png"
+          alt="três computadores juntos conectados por setas"
+        />
+      </figure>
+    </section>
+
+    <!--=============== Services ===============-->
+    <section class="services">
+      <div class="services-container flex-box">
+        <figure class="card flow box-shadow">
+          <img src="./assets/images/shop.svg" alt="shop" class="card-image" />
+          <figcaption class="card-description text-center">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui
+            fringilla interdum.
+          </figcaption>
+        </figure>
+
+        <figure class="card flow box-shadow">
+          <img src="./assets/images/shopping-bag.svg" alt="shopping bag" class="card-image" />
+          <figcaption class="card-description text-center">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui
+            fringilla interdum.
+          </figcaption>
+        </figure>
+
+        <figure class="card flow box-shadow">
+          <img src="./assets/images/handle-coin.svg" alt="handle coin" class="card-image" />
+          <figcaption class="card-description text-center">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui
+            fringilla interdum.
+          </figcaption>
+        </figure>
+      </div>
+    </section>
+
+    <!--=============== Gallery ===============-->
+    <div class="gallery bg-clr-gray">
+      <div class="gallery-container grid-box">
+        <figure class="gallery-image gallery-image-1">
+          <img
+            src="./assets/images/gallery-1.jpg"
+            alt="notebook em mistura de cores vermelho,roxo,ciano, com fundo preto, visto de frente"
+          />
+        </figure>
+
+        <figure class="gallery-image gallery-image-2">
+          <img
+            src="./assets/images/gallery-2.jpg"
+            alt="notebook em mistura de cores em vermelho,roxo,branco, com reflexo de cores, visto de cima"
+          />
+        </figure>
+
+        <figure class="gallery-image gallery-image-3">
+          <img
+            src="./assets/images/gallery-3.jpg"
+            alt="notebook em cores vibrantes de tonalidades vermelhas laranja, vermelho, amarelo, visto de lateral"
+          />
+        </figure>
+      </div>
+    </div>
+
+    <!--=============== Features ===============-->
+    <section class="features">
+      <div class="features-container flex-box center">
+        <figure class="card flow box-shadow">
+          <img class="card-image" src="./assets/images/money.svg" alt="Dinheiro" />
+          <figcaption class="card-description text-center">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui
+            fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
+            euismod enim non dui fringilla interdum.
+          </figcaption>
+        </figure>
+        <figure class="card flow box-shadow">
+          <img
+            class="card-image"
+            src="./assets/images/handle-coin.svg"
+            alt="Mão estendida com uma moeda"
+          />
+          <figcaption class="card-description text-center">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui
+            fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
+            euismod enim non dui fringilla interdum.
+          </figcaption>
+        </figure>
+        <figure class="card flow box-shadow">
+          <img
+            class="card-image"
+            src="./assets/images/laptop.svg"
+            alt="Um laptop aberto em umas de suas páginas do seu ecommerce"
+          />
+          <figcaption class="card-description text-center">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui
+            fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
+            euismod enim non dui fringilla interdum.
+          </figcaption>
+        </figure>
+        <figure class="card flow box-shadow">
+          <img
+            class="card-image"
+            src="./assets/images/phone-notificated.svg"
+            alt="Um celular que contém suas notificações"
+          />
+          <figcaption class="card-description text-center">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui
+            fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
+            euismod enim non dui fringilla interdum.
+          </figcaption>
+        </figure>
+      </div>
+    </section>
+
+    <!--=============== Blog ===============-->
+
+    <section class="blog">
+      <div class="blog-container flex-box" data-type="reversed">
+        <article class="blog-article flow">
+          <h2 class="blog-title text-center">Lorem ipsum dolor sit amet</h2>
+          <p class="blog-description text-center">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non
+            libero faucibus interdum. In eget tincidunt ipsum. Quisque a tellus at lectus blandit
+            tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis
+            venenatis. Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.
+          </p>
+        </article>
+
+        <figure class="blog-images">
+          <img
+            class="blog-images-image image-desktop"
+            src="./assets/images/blog-desktop.jpg"
+            alt="fundo borado com um oculos em destaque refletindo uma tela de programação"
+          />
+          <img
+            class="blog-images-image image-mobile"
+            src="./assets/images/blog-mobile.jpg"
+            alt="fundo borado com um oculos em destaque refletindo uma tela de programação"
+          />
+        </figure>
+      </div>
+    </section>
+
+    <!--=============== Footer ===============-->
+    <footer class="footer flex-box center bg-clr-black">
+      <ul class="footer-socials flex-box center">
+        <li>
+          <a target="_blank" href="https://www.instagram.com/m3.ecommerce/" title="Instagram da M3">
+            <img src="./assets/images/instagram-logo.svg" alt="Instagram da M3" />
+          </a>
+        </li>
+        <li>
+          <a target="_blank" href="https://www.facebook.com/digitalm3/" title="Facebook da M3">
+            <img src="./assets/images/facebook-logo.svg" alt="Facebook da M3" />
+          </a>
+        </li>
+        <li>
+          <a target="_blank" href="https://www.youtube.com/channel/UCW4o86gZG_ceA8CmHltXeXA" title="Youtube da M3">
+            <img src="./assets/images/youtube-logo.svg" alt="Youtube da M3" />
+          </a>
+        </li>
+      </ul>
+      <p class="text-center text-upper clr-gray-100">
+        Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00
+      </p>
+    </footer>
+  </body>
+</html>