From c9731f123e0b715a1b2c26f775abd533a67f7eff Mon Sep 17 00:00:00 2001 From: karineveppo Date: Wed, 21 Sep 2022 12:18:43 -0300 Subject: [PATCH] exerccicios-template --- exercicio1/index.html | 2 ++ exercicio1/style.css | 18 ++++++++++++++++++ exercicio2/style.css | 11 +++++++++-- exercicio3/style.css | 9 +++++++-- fixacao/style.css | 33 +++++++++++++++++++++++++++++++++ 5 files changed, 69 insertions(+), 4 deletions(-) diff --git a/exercicio1/index.html b/exercicio1/index.html index fc775a9..6efbf4c 100644 --- a/exercicio1/index.html +++ b/exercicio1/index.html @@ -5,6 +5,8 @@ CSS - prática guiada 1 + + diff --git a/exercicio1/style.css b/exercicio1/style.css index e69de29..760b1a1 100644 --- a/exercicio1/style.css +++ b/exercicio1/style.css @@ -0,0 +1,18 @@ +header { + background-color: blue; +} +#titulo-importante, h3, h4 { + color:white +} + +h2 { + background-color: yellow; +} + +section { + background-color: green; +} + +footer { + background-color: black; +} \ No newline at end of file diff --git a/exercicio2/style.css b/exercicio2/style.css index a3b7f1e..bc5498d 100644 --- a/exercicio2/style.css +++ b/exercicio2/style.css @@ -1,22 +1,29 @@ .longe-bordas{ background-color: #FFA6A9; + margin: 20px; } .afastado{ background-color: #77C0ED; + margin: 200px; } .alto{ background-color: #C3E887; + height: 300px; } .largo{ background-color: #FFE396; + width: 500px; } .bordado{ background-color: #AF9BCC; + border: 1px dashed black; } .sumido{ - - } \ No newline at end of file + display: none; + + + } \ No newline at end of file diff --git a/exercicio3/style.css b/exercicio3/style.css index 10c8270..c496b87 100644 --- a/exercicio3/style.css +++ b/exercicio3/style.css @@ -4,20 +4,25 @@ } 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: 42vw; padding: 40px; + } 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: 17vw; } article{ diff --git a/fixacao/style.css b/fixacao/style.css index e69de29..e4ce459 100644 --- a/fixacao/style.css +++ b/fixacao/style.css @@ -0,0 +1,33 @@ +header{ + height: 40px; + padding: 10px; + background-color: orange; + color: white; + border-bottom: 1px solid black; +} +footer{ + height: 40px; + padding: 10px; + background-color: black; + color: white; +} +main{ + margin:15px; + padding: 20px 30px; + width: 90vw; + height: 80vw; +} +article{ + margin: 25px 0; +} +h2{ + font-family: "Arial"; +} +p{ + font-family: "Helvetica"; +} +.destaque{ + color: orange; + +} +