diff --git a/README.md b/README.md
index 76a718b0..1a46f086 100644
--- a/README.md
+++ b/README.md
@@ -1,22 +1,2 @@
-# Desafio 01: Criando sua primeira Landing Page com HTML e CSS
-
-Bem vindo(a) ao primeiro desafio da Trilha de CSS da DIO! Nela, você vai construir sua primeira Landing Page com HTML e CSS, colocando em prática os fundamentos do CSS,
-as propriedades básicas da linguagem de estilização, além de trabalhar com as unidades de medidas relativas e absolutas que aprendemos ao longo da trilha.
-
-[Clique aqui](https://micheleambrosio.github.io/dio-trilha-css-desafio-01/) para acessar o resultado final da Landing Page criada a partir do desafio!
-
-![image](https://user-images.githubusercontent.com/55519539/183538055-6cce606c-7d1d-4d15-a4be-ffeb5b37c956.png)
-
-Para você realizar o desafio, basta fazer um **fork** para o seu GitHub e começar a mexer no projeto.
-Dentro da pasta *main*, você vai encontrar todas as imagens e o arquivo HTML, contendo a estrutura básica da sua página, faltando apenas
-realizar a estilização da sua página. É necessário que você faça toda a parte responsável por interligar sua página HTML com suas folhas
-de estilo para que o resultado da estilização funcione.
-
-[Link do Figma](https://www.figma.com/file/3PiokoJj9IhGDnNiWAJbz7/DIO---Desafio-01?node-id=2%3A6) contendo o protótipo do desafio para
-que você possa se basear.
-
-*Observações: para aplicar os textos em gradiente, utilize a propriedade CSS background-clip, porém, para funcionar em alguns navegadores,
-é necessário utilizar a propriedade -webkit-background-clip: text;*
-
-Caso tenha alguma dúvida, ou queira comparar o resultado do desafio que você fez, nós temos o site finalizado na branch *final*. Basta alterar a branch do projeto
-utilizando o comando `git checkout final` no seu terminal.
+# trilha-css-desafio-01
+Primeiro desafio da Trilha de CSS: construindo uma landing page do curso com HTML e CSS.
diff --git a/trilha.desafio/README.md b/trilha.desafio/README.md
new file mode 100644
index 00000000..76a718b0
--- /dev/null
+++ b/trilha.desafio/README.md
@@ -0,0 +1,22 @@
+# Desafio 01: Criando sua primeira Landing Page com HTML e CSS
+
+Bem vindo(a) ao primeiro desafio da Trilha de CSS da DIO! Nela, você vai construir sua primeira Landing Page com HTML e CSS, colocando em prática os fundamentos do CSS,
+as propriedades básicas da linguagem de estilização, além de trabalhar com as unidades de medidas relativas e absolutas que aprendemos ao longo da trilha.
+
+[Clique aqui](https://micheleambrosio.github.io/dio-trilha-css-desafio-01/) para acessar o resultado final da Landing Page criada a partir do desafio!
+
+![image](https://user-images.githubusercontent.com/55519539/183538055-6cce606c-7d1d-4d15-a4be-ffeb5b37c956.png)
+
+Para você realizar o desafio, basta fazer um **fork** para o seu GitHub e começar a mexer no projeto.
+Dentro da pasta *main*, você vai encontrar todas as imagens e o arquivo HTML, contendo a estrutura básica da sua página, faltando apenas
+realizar a estilização da sua página. É necessário que você faça toda a parte responsável por interligar sua página HTML com suas folhas
+de estilo para que o resultado da estilização funcione.
+
+[Link do Figma](https://www.figma.com/file/3PiokoJj9IhGDnNiWAJbz7/DIO---Desafio-01?node-id=2%3A6) contendo o protótipo do desafio para
+que você possa se basear.
+
+*Observações: para aplicar os textos em gradiente, utilize a propriedade CSS background-clip, porém, para funcionar em alguns navegadores,
+é necessário utilizar a propriedade -webkit-background-clip: text;*
+
+Caso tenha alguma dúvida, ou queira comparar o resultado do desafio que você fez, nós temos o site finalizado na branch *final*. Basta alterar a branch do projeto
+utilizando o comando `git checkout final` no seu terminal.
diff --git a/trilha.desafio/assets/images/banner.png b/trilha.desafio/assets/images/banner.png
new file mode 100644
index 00000000..2adb6585
Binary files /dev/null and b/trilha.desafio/assets/images/banner.png differ
diff --git a/trilha.desafio/assets/images/dio-logo.png b/trilha.desafio/assets/images/dio-logo.png
new file mode 100644
index 00000000..49af1114
Binary files /dev/null and b/trilha.desafio/assets/images/dio-logo.png differ
diff --git a/trilha.desafio/assets/images/logo.png b/trilha.desafio/assets/images/logo.png
new file mode 100644
index 00000000..7b67c504
Binary files /dev/null and b/trilha.desafio/assets/images/logo.png differ
diff --git a/trilha.desafio/assets/images/professional-challenges.png b/trilha.desafio/assets/images/professional-challenges.png
new file mode 100644
index 00000000..cd8468b5
Binary files /dev/null and b/trilha.desafio/assets/images/professional-challenges.png differ
diff --git a/trilha.desafio/assets/images/woman-code.png b/trilha.desafio/assets/images/woman-code.png
new file mode 100644
index 00000000..d51eb7c3
Binary files /dev/null and b/trilha.desafio/assets/images/woman-code.png differ
diff --git a/trilha.desafio/desafio-01.css b/trilha.desafio/desafio-01.css
new file mode 100644
index 00000000..a11af0fb
--- /dev/null
+++ b/trilha.desafio/desafio-01.css
@@ -0,0 +1,224 @@
+
+
+@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;1,100&display=swap');
+
+.logo-container {
+ width: 268px;
+ height: 268px;
+ background: rgba(0, 0, 0, 0.20);
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin: auto
+
+}
+
+.logo {
+ width: 100%;
+ height: 80%;
+}
+
+.banner-content {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ align-items: center;
+ color: white;
+}
+
+.banner {
+ background-image: linear-gradient(rgba(0, 0, 0, .6), rgba(49, 168, 221, .2), rgba(0, 0, 0, .6)), url(../assets/images/banner.png);
+ background-size: cover;
+ background-repeat: no-repeat;
+ height: 600px;
+ padding-top: 60px;
+ border-bottom: 1px solid #33A8DB80;
+}
+
+.banner h1 {
+ font-size: 2.5rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ color: transparent;
+ background: -webkit-linear-gradient(#33A8DB, #1472B7);
+ background-clip: text;
+ -webkit-background-clip: text;
+ font-family: 'Raleway', sans-serif;
+ box-sizing: border-box;
+ margin-top: 1.5px;
+}
+
+
+h1 {
+ display: block;
+ font-size: 2em;
+ margin-block-start: 0.67em;
+ margin-block-end: 0.67em;
+ margin-inline-start: 0px;
+ margin-inline-end: 0px;
+ font-weight: bold;
+}
+
+body {
+background-color: #000;
+}
+
+.banner p {
+ display: block;
+ margin-block-start: 1em;
+ margin-block-end: 1em;
+ margin-inline-start: 0px;
+ margin-inline-end: 0px;
+ color: white;
+ width: 600px;
+ margin: auto;
+ text-align: center;
+ font-size: 1.37rem;
+ transform: translatey(-20px);
+}
+
+.banner .banner-content button {
+color: #31A8DD;
+font-size: 1rem;
+font-weight: bold;
+padding: 16px 32px;
+text-transform: uppercase;
+letter-spacing: 4px;
+background-color: transparent;
+border-image: linear-gradient(#3BA1CD, #1572B7);
+border-image-slice: 10;
+border-radius: 30px;
+transform: translatey(-10px);
+}
+
+ * {
+ font-family: 'Raleway', sans-serif;
+ box-sizing: border-box;
+ margin: 0;
+ }
+
+
+
+#course-content {
+ width: 800px;
+ text-align: center;
+ margin: 100px auto ;
+ height: 330px;
+}
+
+
+#transform-world p {
+ font-weight: 900;
+ font-size: 2.5rem;
+ text-transform: lowercase;
+ max-width: 250px;
+ text-shadow: 3px 2px #33A8DB;
+ color: white;
+}
+
+
+#transform-world {
+background-image: url(../assets/images/woman-code.png);
+flex-shrink: 0;
+background-size: cover;
+background-attachment: fixed;
+background-position: center;
+border-top: 1px solid #33A8DB80;
+border-bottom: 1px solid #33A8DB80;
+padding: 200px;
+}
+
+
+#course-content p {
+text-align: center;
+transform: translatey(-10px);
+height: 50px;
+}
+
+h2 {
+ font-size: 2rem;
+ color: #33A8DB;
+ font-weight: bold;
+ letter-spacing: 4px;
+ text-transform: uppercase;
+ margin-bottom: 24px;
+ display: block;
+ text-align: center;
+ transform: translatey(-20px);
+
+}
+
+
+.dio-logo {
+background-image: url(../assets/images/dio-logo.png);
+
+
+
+}
+
+footer p {
+ transform: translatey(-1px);
+}
+
+.modules-list {
+text-align: center;
+transform: translatey(17px);
+}
+
+.modules-list .module {
+ color: white;
+ width: 530px;
+ margin: 0 auto 24px;
+ border: 1px solid #33A8DB;
+ background-color: #252525;
+ padding: 16px;
+ border-radius: 100px;
+ box-shadow: inset -5px 6px 8px rgba(0, 0, 0, .7)
+}
+
+#course-content .modules-list .module span {
+ color: #33A8DB; }
+
+#professional-challenges h2 {
+ color: #33A8DB;
+ text-align: center;
+ font-family: Raleway;
+ font-size: 32px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: normal;
+ letter-spacing: 6.08px;
+
+}
+
+#professional-challenges {
+transform: translateY(120px);
+}
+
+#professional-challenges img {
+background-image: url(../assets/images/professional-challenges.png)
+lightgray 50% / cover no-repeat;
+background-size: cover;
+transform: translateX(50%);
+}
+
+#professional-challenges p {
+transform: translateY(-1px);
+transform: translateY(50px);
+color: #FFF;
+text-align: center;
+font-family: Raleway;
+font-size: 16px;
+font-style: normal;
+font-weight: 400;
+line-height: normal;
+}
+
+footer {
+ padding: 60px 0;
+ text-align: center;
+ background-image: linear-gradient(rgba(50, 168, 219, .0), rgba(50, 168, 219, .2));
+ border-top: 1px solid #33A8DB80;
+ transform: translateY(300px);
+}
diff --git a/index.html b/trilha.desafio/index.html
similarity index 71%
rename from index.html
rename to trilha.desafio/index.html
index 0dddc3db..3c0ba369 100644
--- a/index.html
+++ b/trilha.desafio/index.html
@@ -5,23 +5,26 @@
Trilha de CSS - DIO
+
-
-
+
+
+
-
-
Trilha de CSS da DIO
-
A nova Trilha de CSS da DIO está disponível. Acesse já e aprenda do zero como desenvolver sites profissionais.
-
+
+
Trilha de CSS da DIO
+
A nova Trilha de CSS da DIO está disponível. Acesse já e aprenda do zero como desenvolver sites profissionais.
+
+
O que vou aprender?
- Temos 3 módulos recheados de conteúdos do básico ao avançado para que você aprenda a
+ Temos 3 módulos recheados de conteúdos do básico ao avançado para que você aprenda a
desenvolver sites profissionais utilizando somente HTML e CSS: sem nenhuma biblioteca ou framework a mais.
@@ -36,17 +39,18 @@
O que vou aprender?
+
TRANSFORME O MUNDO COM A GENTE
+
Evolua e encare novos desafios profissionais
Junte-se ao nosso ecossistema e transforme o mundo com a gente! Todos os dias dezenas de empresas
- acessam a nossa plataforma em busca dos talentos mais criativos, dinâmicos e colaborativos,
- além do conhecimento técnico.
- A nossa missão é te preparar para que você conecte-se com as melhores oportunidades.
+ acessam a nossa plataforma em busca dos talentos mais criativos, dinâmicos e colaborativos,
+ além do conhecimento técnico. A nossa missão é te preparar para que você conecte-se com as melhores oportunidades.