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 +

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

Homem lendo depoimentos em um tablet

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.

@@ -55,4 +59,4 @@

Evolua e encare novos desafios profissionais

Acesse dio.me e se cadastre agora

- \ No newline at end of file +