From 2f2ebfdeba91aa6d0a6500d0990034707f47b8d1 Mon Sep 17 00:00:00 2001 From: "guirozmesquita@gmail.com" Date: Wed, 21 Sep 2022 12:03:50 -0400 Subject: [PATCH] template finalizado --- exercicio1/index.html | 1 + exercicio1/style.css | 20 ++++++++++++++++++++ exercicio2/style.css | 11 ++++++++++- exercicio3/style.css | 9 +++++++-- fixacao/index.html | 2 +- fixacao/style.css | 36 ++++++++++++++++++++++++++++++++++++ 6 files changed, 75 insertions(+), 4 deletions(-) diff --git a/exercicio1/index.html b/exercicio1/index.html index fc775a9..bdebd67 100644 --- a/exercicio1/index.html +++ b/exercicio1/index.html @@ -4,6 +4,7 @@ + CSS - prática guiada 1 diff --git a/exercicio1/style.css b/exercicio1/style.css index e69de29..3abc19d 100644 --- a/exercicio1/style.css +++ b/exercicio1/style.css @@ -0,0 +1,20 @@ +#titulo-importante{ + background-color: blue; + color: white; +} + +.sub-titulo{ + background-color: yellow; +} + +section{ + background-color: green; +} + +h3, h4{ + color: white; +} + +.titulo-pouco-importante{ + background-color: black; +} \ No newline at end of file diff --git a/exercicio2/style.css b/exercicio2/style.css index a3b7f1e..cf740c6 100644 --- a/exercicio2/style.css +++ b/exercicio2/style.css @@ -1,22 +1,31 @@ .longe-bordas{ background-color: #FFA6A9; + margin: 20px; } .afastado{ background-color: #77C0ED; + margin: 60px; + display: block; } .alto{ background-color: #C3E887; + height:300px; } .largo{ background-color: #FFE396; + width: 500px; } .bordado{ background-color: #AF9BCC; + border: 1px solid black; + padding: 20px; + display: block; + margin-top: 2px; } .sumido{ - + display: none; } \ No newline at end of file diff --git a/exercicio3/style.css b/exercicio3/style.css index 10c8270..89ff7aa 100644 --- a/exercicio3/style.css +++ b/exercicio3/style.css @@ -2,14 +2,19 @@ padding: 0; margin: 0; } + header{ } +main{ + font-family: helvetica; +} + section{ float: left; /*float é uma propriedade que permite deixar elementos à direita ou à esquerda da tela. Não costuma ser usado. Aqui, é usado apenas para ilustrar diferenças.*/ - width: 840px; + width: 60%; padding: 40px; } @@ -17,7 +22,7 @@ aside{ float:right; /*float é uma propriedade que permite deixar elementos à direita ou à esquerda da tela. Não costuma ser usado. Aqui, é usado apenas para ilustrar diferenças.*/ padding: 20px; - width: 340px; + width: 20%; } article{ diff --git a/fixacao/index.html b/fixacao/index.html index 32dd50d..0597be0 100644 --- a/fixacao/index.html +++ b/fixacao/index.html @@ -44,7 +44,7 @@

Que Horas Ela Volta? (2015) — Netflix e Globoplay

Hoje Eu Quero Voltar Sozinho (2014) — Netflix

-

Nesse longa do diretos Daniel Ribeiro, Leonardo é um adolescente cego que precisa Nesse longa do diretor Daniel Ribeiro, Leonardo é um adolescente cego que precisa driblar a superproteção de sua mãe para conquistar sua independência enquanto a chegada de Gabriel em seu colégio desperta nele novos sentimentos. Também vale a pena conferir, viu?

diff --git a/fixacao/style.css b/fixacao/style.css index e69de29..2d65f1e 100644 --- a/fixacao/style.css +++ b/fixacao/style.css @@ -0,0 +1,36 @@ +*{ + margin: 0; + padding: 0; +} + +header{ + background-color: orange; + border-bottom: 1px solid black; + font-family: arial; + height: 40px; + padding: 10px; + color: white; +} + +footer{ + background-color: black; + height: 40px; + padding: 10px; + color: white; +} + +main{ + margin: 15px; + padding: 20px 30px; + width: 90vw; + height: 80vh; + font-family: helvetica; +} + +article{ + margin: 25px 0; +} + +.destaque{ + color: orange; +} \ No newline at end of file