digitalinnovationone · bryansilvacm · Sep 17, 2025 · Sep 17, 2025 · Sep 17, 2025 · Sep 17, 2025
diff --git a/README.md b/README.md
@@ -1,22 +1,8 @@
 # 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.
+Com muita satisfação digo que concluí o primeiro desafio da trilha css do bootcamp Ri Happy - Front-end do Zero #2. 
+O objetivo era estilizar a página HTML com as folhas de estilo CSS, seguindo o protótipo no figma.
+[Link do Figma](https://www.figma.com/file/3PiokoJj9IhGDnNiWAJbz7/DIO---Desafio-01?node-id=2%3A6) 
 
-[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.
+Realizei o desafio com muita dedicação e comprometimento para que o resultado ficasse o mais fiel possível ao design inicial.
+Para visualizar a página estilizada por mim. [Clique aqui](https://bryansilvacm.github.io/trilha-css-desafio-01/) 
diff --git a/index.html b/index.html
@@ -4,6 +4,7 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="styles.css">
   <title>Trilha de CSS - DIO</title>
 </head>
 <body>
@@ -55,4 +56,4 @@ <h2>Evolua e encare novos desafios profissionais</h2>
     <p>Acesse <a href="https://dio.me">dio.me</a> e se cadastre agora</p>
   </footer>
 </body>
-</html>
+</html>
diff --git a/styles.css b/styles.css
@@ -0,0 +1,184 @@
+*{
+	padding:0;
+	margin:0;
+    font-family: 'Raleway', sans-serif;
+}
+body{
+	background-color:black;
+}
+header{
+	background-image: linear-gradient(rgba(0, 0, 0, .6), rgba(49, 168, 221, .2), rgba(0, 0, 0, .6)), url("https://github.com/bryansilvacm/trilha-css-desafio-01/blob/main/assets/images/banner.png?raw=true");
+	background-size: cover;
+    	background-repeat: no-repeat;
+    	height: 600px;
+    	padding-top: 60px;
+    	border-bottom: 1px solid #33A8DB80;
+	display:flex;
+	flex-direction:column;
+	align-items:center;
+	text-align:center;
+
+}
+.banner-content{
+	width:37.5rem;
+}
+.logo {
+	margin:auto;
+}
+.logo img{
+	background-color: rgba(0, 0, 0, .2);
+	border-radius:50%;
+	width:260px;
+	height:230px;
+	padding:16px;
+	margin:auto;
+}
+
+header h1{
+	color:transparent;
+	text-transform:uppercase;
+	background: -webkit-linear-gradient(#33A8DB, #1472B7);
+	-webkit-background-clip:text;
+	font-size:2.5rem;
+	font-weight:900;
+	text-align:center;
+}
+.banner-content p{
+	color:white;
+	font-size:1.25rem;
+	font-weight:400;
+	margin:16px 0 24px;
+	text-content:center;
+}
+
+.banner-content button{
+	color:#31A8DD;
+	background:transparent;
+	border-image:linear-gradient(#33A8DB, #1472B7);
+	border-image-slice:10;
+	padding:16px 32px;
+	width:326px;
+	height:57px;
+	font-size:16px;
+	text-transform:uppercase;
+	font-weight:900;
+}
+
+main{
+	text-align:center;
+	color:#ffffff;
+}
+#course-content{
+	margin:auto;
+	width:792px;
+	height:325px;
+	padding:2rem 2rem 8rem 2rem;
+	display:flex;
+	flex-direction:column;
+	gap:1rem;
+}
+
+#course-content h2{
+	font-weight:700;
+	color:#33A8DB;
+	font-size:2rem;
+}
+
+#course-content h2 p{
+	font-size:1rem;
+	font-weight:400;
+	text-align:center;
+}
+.module{
+	width:535px;
+	height:51px;
+	border:solid #33A8DB 1px;
+	padding:16px 127px 16px 127 px;
+	margin:1rem auto;
+	display:flex;
+	align-items:center;
+	justify-content:center;
+	background-color:#252525;
+	border-radius:2rem;
+
+}
+.module span{
+	color:#33A8DB;
+	margin-right:2px;
+}
+
+#transform-world{
+	height:370px;
+	background-image:url("https://github.com/bryansilvacm/trilha-css-desafio-01/blob/main/assets/images/woman-code.png?raw=true");
+	background-repeat:no-repeat;
+	background-size:cover;
+	border-top:1px #33A8DB solid;
+	border-bottom:1px #33A8DB solid;
+	display:flex;	
+	flex-direction:column;
+	justify-content:center;
+	background-attachment:fixed;
+
+}
+
+#transform-world p{
+	max-width:260px;
+
+	font-weight:900;
+	font-size:2.32rem;
+	margin-left:9rem;
+	text-transform:lowercase;
+	text-shadow:2px 3px  #33A8DB;
+	text-align:left;
+
+}
+#professional-challenges{
+	display:flex;
+	flex-direction:column;
+	gap:2rem;
+	border-bottom:1px #33A8DB solid;
+
+}
+
+#professional-challenges h2{
+	width:736px;
+	text-transform:uppercase;
+	font-weight:700;
+	font-size:2rem;
+	color:#33A8DB;
+	margin:4rem auto;
+}
+
+#professional-challenges img{	
+	width:659px;
+	height:429px;
+	margin:auto;
+}
+#professional-challenges p{
+	width:750px;
+	font-weight:400;
+	font-size:1rem;
+	color:#ffffff;
+	margin:1rem auto 5rem auto;
+}
+
+footer{
+	height:130px;
+	display:flex;
+	flex-direction:column;
+	justify-content:center;
+	align-items:center;
+	padding-bottom:2rem;
+	background:linear-gradient(to bottom, #33A8DB00, #33A8DB33);
+}
+footer img{
+	margin:2rem auto 1rem auto;
+}
+footer p{
+	text-align:center;
+	color:#ffffff;
+}
+footer a{
+	text-decoration:none;
+	color:#33A8DB;
+}