From c6c15979703ab0e21874635b850cbab5be2c5e55 Mon Sep 17 00:00:00 2001 From: raissanfg <99144281+raissanfg@users.noreply.github.com> Date: Wed, 4 Oct 2023 10:15:20 -0500 Subject: [PATCH 1/3] exercicio-1-feito --- exercicio1/index.html | 1 + exercicio1/style.css | 21 +++++++++++++++++++++ exercicio2/index.html | 1 + exercicio2/style.css | 1 + exercicio3/index.html | 1 + exercicio3/style.css | 4 ++++ fixacao/style.css | 3 +++ 7 files changed, 32 insertions(+) diff --git a/exercicio1/index.html b/exercicio1/index.html index 8f6a6bb..6d10cf4 100644 --- a/exercicio1/index.html +++ b/exercicio1/index.html @@ -4,6 +4,7 @@ + CSS I - Prática Guiada 1 diff --git a/exercicio1/style.css b/exercicio1/style.css index e69de29..4053879 100644 --- a/exercicio1/style.css +++ b/exercicio1/style.css @@ -0,0 +1,21 @@ +header { + color: white; + background-color: blue; +} + +.sub-titulo{ + background-color: yellow; +} + +section{ + background-color: green; +} + +.titulo-secao{ + color: white; +} + +.titulo-pouco-importante{ + color: white; + background-color: black; +} \ No newline at end of file diff --git a/exercicio2/index.html b/exercicio2/index.html index a384b6d..804aa40 100644 --- a/exercicio2/index.html +++ b/exercicio2/index.html @@ -4,6 +4,7 @@ + CSS I - Prática Guiada 2 diff --git a/exercicio2/style.css b/exercicio2/style.css index a3b7f1e..ce05fd4 100644 --- a/exercicio2/style.css +++ b/exercicio2/style.css @@ -1,5 +1,6 @@ .longe-bordas{ background-color: #FFA6A9; + padding: 15px; } .afastado{ diff --git a/exercicio3/index.html b/exercicio3/index.html index c8ddb22..0f9ccc9 100644 --- a/exercicio3/index.html +++ b/exercicio3/index.html @@ -4,6 +4,7 @@ + CSS I - Prática Guiada 3 diff --git a/exercicio3/style.css b/exercicio3/style.css index 10c8270..c8b47c9 100644 --- a/exercicio3/style.css +++ b/exercicio3/style.css @@ -6,6 +6,10 @@ 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.*/ diff --git a/fixacao/style.css b/fixacao/style.css index e69de29..8b5df5c 100644 --- a/fixacao/style.css +++ b/fixacao/style.css @@ -0,0 +1,3 @@ +main { + font-family: helvetica; +} \ No newline at end of file From 7aee64c7be165c505316fdeca329bef6ef220a60 Mon Sep 17 00:00:00 2001 From: raissanfg <99144281+raissanfg@users.noreply.github.com> Date: Wed, 4 Oct 2023 11:14:55 -0500 Subject: [PATCH 2/3] exercicio-2-feito --- exercicio2/style.css | 51 ++++++++++++++++++++++++++------------------ 1 file changed, 30 insertions(+), 21 deletions(-) diff --git a/exercicio2/style.css b/exercicio2/style.css index ce05fd4..40d33f0 100644 --- a/exercicio2/style.css +++ b/exercicio2/style.css @@ -1,23 +1,32 @@ -.longe-bordas{ - background-color: #FFA6A9; - padding: 15px; - } +.longe-bordas { + background-color: #FFA6A9; + padding: 10px; +} + +.afastado { + background-color: #77C0ED; + margin: 85px; +} + +.alto { + height: 300px; + background-color: #C3E887; - .afastado{ - background-color: #77C0ED; - } - .alto{ - background-color: #C3E887; - } - - .largo{ +} + +.largo { + width: 500px; + margin-top: 20px; background-color: #FFE396; - } - - .bordado{ - background-color: #AF9BCC; - } - - .sumido{ - - } \ No newline at end of file + +} + +.bordado { + background-color: #AF9BCC; + border: 3px dotted black; + +} + +.sumido { + display: none; +} \ No newline at end of file From 2ead3526c1271c0ff4647874ddee2b05caf8f356 Mon Sep 17 00:00:00 2001 From: raissanfg <99144281+raissanfg@users.noreply.github.com> Date: Wed, 4 Oct 2023 12:09:21 -0500 Subject: [PATCH 3/3] exercicio-3-feito --- exercicio3/style.css | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/exercicio3/style.css b/exercicio3/style.css index c8b47c9..713c22f 100644 --- a/exercicio3/style.css +++ b/exercicio3/style.css @@ -13,15 +13,19 @@ main{ 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; - padding: 40px; + width: 60vw; + padding: 5vh; } 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; + padding: 2.3vw; + width: 25vw; +} + +img { + width: 95% } article{