diff --git a/README.md b/README.md index 76a718b0a..82f6ff2fe 100644 --- 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 index 0dddc3dbb..7a24b8f43 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,7 @@ + Trilha de CSS - DIO @@ -55,4 +56,4 @@

Evolua e encare novos desafios profissionais

Acesse dio.me e se cadastre agora

- \ No newline at end of file + diff --git a/styles.css b/styles.css new file mode 100644 index 000000000..7db44df1e --- /dev/null +++ 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; +}