diff --git a/assets/style.css b/assets/style.css new file mode 100644 index 000000000..ab29b149a --- /dev/null +++ b/assets/style.css @@ -0,0 +1,164 @@ +*{ + font-family: 'Raleway', sans-serif; + box-sizing: border-box; + margin: 0; + +} + +body{ + background-color: black; +} + +.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 .logo{ + background-color: rgba(0, 0, 0, .2); + height: 260px; + margin: auto; + width: 260px; + border-radius: 50%; + padding: 16px; + margin-bottom: 16px; +} + +.banner h1 { + font-size: 2.5rem; + font-weight: 900; + text-transform: uppercase; + color: transparent; + background: -webkit-linear-gradient(#33A8DB, #1472B7) ; + background-clip: text; + -webkit-background-clip: text; + margin-bottom: 0.67em; +} + +.banner p{ + font-size: 20px; + margin-bottom: 24px; +} +.banner .banner-content{ + color: white; + width: 600px; + text-align: center; + margin: auto; +} + +.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; +} + +#course-content{ + width: 800px ; + text-align: center; + + margin-bottom: 24px; + +} + +section{ + margin: 100px auto +} + +h2{ + font-size:2rem; + color: #33A8DB; + margin-bottom: 30px; + text-transform: uppercase; + font-weight: bold; + letter-spacing: 4px; +} +#course-content p { + color: white; + text-transform: none; + +} + + +#course-content +.modules-list{ + margin: 24px 0; +} + + +#course-content +.modules-list .module{ + color: white; + width: 530px; + margin: 0 auto 24px; + border: 1px solid #33A8DB; + border-radius: 100px; + padding: 16px; + background-color: #252525; + box-shadow: inset -5px 6px 8px rgba(0, 0, 0, .7) ; + +} + +#course-content .modules-list .module span{ + color: #33A8DB; +} + +#transform-world{ + height: 560px; + background-size: cover; + background-image: url(../assets/images/woman-code.png); + background-attachment: fixed; + border-top: 1px solid #33A8DB; + border-bottom: 1px solid #33A8DB; + padding: 200px; +} + +#transform-world p { + font-weight: 900; + color: white; + font-size: 2.5rem; + text-transform: lowercase; + max-width: 250px; + text-shadow: 3px 2px #33A8DB; +} + +#professional-challenges{ + text-align: center; + width: 800px; +} + +#professional-challenges h2 { + font-size: 2rem; + letter-spacing: 4px; + color: #33A8DB; + text-transform: uppercase; + margin-bottom: 24px; + font-weight: bolder; + +} + +p { + color: white; + +} + + +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 #33A8DB; +} \ No newline at end of file diff --git a/index.html b/index.html index 0dddc3dbb..e78d2433c 100644 --- a/index.html +++ b/index.html @@ -1,58 +1,59 @@ - - - - - - - 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 - desenvolver sites profissionais utilizando somente HTML e CSS: sem nenhuma biblioteca ou framework a mais. -

-
-
- Módulo 01: primeiros passos com CSS -
-
- Módulo 02: trabalhando com layouts no CSS -
-
- Módulo 03: refinando os estilos CSS das nossas páginas -
-
-
-
-

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. -

-
-
- - + + + + + + + + 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 + desenvolver sites profissionais utilizando somente HTML e CSS: sem nenhuma biblioteca ou framework a mais. +

+
+
+ Módulo 01: primeiros passos com CSS +
+
+ Módulo 02: trabalhando com layouts no CSS +
+
+ Módulo 03: refinando os estilos CSS das nossas páginas +
+
+
+
+

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. +

+
+
+ + \ No newline at end of file