desafio concluido

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.

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.

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);
+}

index.html → trilha.desafio/index.html

@@ -5,23 +5,26 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Trilha de CSS - DIO</title>
+  <link rel="stylesheet" href="../trilha.desafio/desafio-01.css"/>
 </head>
 <body>
   <header class="banner">
-    <div class="banner-content">
-      <div class="logo">
+    <div class="logo">
+        <div class="banner-content">
+          <div class="logo-container">
         <img src="assets/images/logo.png" title="Logotipo Trilha de CSS DIO" alt="Logotipo Trilha de CSS DIO">
-      </div>
-      <h1>Trilha de CSS da DIO</h1>
-      <p>A nova Trilha de CSS da DIO está disponível. Acesse já e aprenda do zero como desenvolver sites profissionais.</p>
-      <button>Quero me inscrever</button>
+          </div>
+        <h1>Trilha de CSS da DIO</h1>
+        <p>A nova Trilha de CSS da DIO está disponível. Acesse já e aprenda do zero como desenvolver sites profissionais.</p>
+        <button>Quero me inscrever</button>
     </div>
+  </div>
   </header>
   <main>
     <section id="course-content">
       <h2>O que vou aprender?</h2>
       <p>
-        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 <br> 
         desenvolver sites profissionais utilizando somente HTML e CSS: sem nenhuma biblioteca ou framework a mais.
       </p>
       <div class="modules-list">
@@ -36,17 +39,18 @@ <h2>O que vou aprender?</h2>
         </div>
       </div>
     </section>
+    <section id="transform-world-1">
     <section id="transform-world">
       <p>TRANSFORME O MUNDO COM A GENTE</p>
     </section>
+  </section>
     <section id="professional-challenges">
       <h2>Evolua e encare novos desafios profissionais</h2>
       <img src="assets/images/professional-challenges.png" title="Homem lendo depoimentos em um tablet" alt="Homem lendo depoimentos em um tablet">
       <p>
         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.
+          <br>acessam a nossa plataforma em busca dos talentos mais criativos, dinâmicos e colaborativos,
+        além do <br> conhecimento técnico. A nossa missão é te preparar para que você conecte-se com as melhores <br> oportunidades.
       </p>
     </section>
   </main>
@@ -55,4 +59,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>