From 4c356972fe5d0907fbeb04f1d8cb7b5cc0762839 Mon Sep 17 00:00:00 2001 From: Lucas Breia Date: Tue, 13 Dec 2022 11:43:54 -0300 Subject: [PATCH] =?UTF-8?q?exerc=C3=ADcios=20finalizados?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .DS_Store | Bin 0 -> 6148 bytes exercicio1/index.html | 1 + exercicio1/style.css | 27 ++++++++++++++++++++++++++ exercicio2/style.css | 21 +++++++++++++++++---- exercicio3/style.css | 23 +++++++++++++++------- fixacao/style.css | 43 ++++++++++++++++++++++++++++++++++++++++++ 6 files changed, 104 insertions(+), 11 deletions(-) create mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..84254a0d402e5a912280128c9ba5edd18d55b3a1 GIT binary patch literal 6148 zcmeHKO;6iE5S@jzaX^)FC=wSWOT8kRCZ!ePVnR4@=ml5hK&#ZoX=~MZQ9cM#6v=1! zFm{e^qRTb?>vu}2H-a7l@-SrZYYLAi^M0Fza;Ea_O6myLG*&o=F zv@lPZF-|EZc1;-DnNz?i@SiKdYj=fubP4a9wJYoQFw>`TrepN;=CB9f`fd!-d``2( zx%m@LJRY3Ob8h4FEFBCRjXSlpTzT}k>Q%i}??d=SkHcX!91Yr0|AcFAwa()EIEvq; zy>YkxbYJJgD9w9)Lr9YzQr;h@d7{T{J<5}T;fA)ut9i9VD16a(!iHObUCPu_uD}aE)M|hRutxpJzJ%jDF_M%W2JOrZ$lG zJDpplajWzRd+sGg`2Ql(r4jkp{XAkRdqMOs&8nnOjgII5?{J6S0JrFjl9Ec_N-Ckc z@FwrGx4Q5%brW<7I0gPz0p1^cIAb7KSTtJ)3UdVjR?ut=F@G*F#}^C)3ybK1DN6-f zs*)>)vUIfjk{1XT7A>8WTt1XMS;-AWnWtlX-=vcYEV|Mu;1rluVA)pdeEuK&`u;yl zay6%bQ(&PKP?b*DX=6%qwmz5~pS3>xBb<%%3X6trwaT4&AZj8 literal 0 HcmV?d00001 diff --git a/exercicio1/index.html b/exercicio1/index.html index fc775a9..9f5aa7f 100644 --- a/exercicio1/index.html +++ b/exercicio1/index.html @@ -5,6 +5,7 @@ CSS - prática guiada 1 + diff --git a/exercicio1/style.css b/exercicio1/style.css index e69de29..88f11c0 100644 --- a/exercicio1/style.css +++ b/exercicio1/style.css @@ -0,0 +1,27 @@ +/* Trabalhando com ID - Ususamos a # (tralha) antes do id. */ +#titulo-importante{ + background-color: blue; + color: white; +} + +/* Trabalhando com Tags - Colocamos direto o nome da tag. */ +h2{ + background-color: yellow; +} + +section{ + background-color: green; +} + +footer{ + background-color: black; +} + +/* Trabalhando com Classes - Usamos o . (ponto) antes de cada classe. */ +.titulo-secao{ + color: white; +} + +.titulo-pouco-importante{ + color: white; +} \ No newline at end of file diff --git a/exercicio2/style.css b/exercicio2/style.css index a3b7f1e..8be3419 100644 --- a/exercicio2/style.css +++ b/exercicio2/style.css @@ -1,22 +1,35 @@ +/* Afastando das bordas usando padding. */ .longe-bordas{ background-color: #FFA6A9; + padding: 0 50px; } - + + /* Afastando de outros elementos usando o margin */ .afastado{ background-color: #77C0ED; + margin: 0 20px; } + + /* Deixando o elemento alto com height (altura) */ .alto{ background-color: #C3E887; + height: 300px; } + /* Deixando o elemento largo com width (largura) */ .largo{ - background-color: #FFE396; + background-color: #FFE396; + width: 500px; } + /* Colocando borda usando o border */ .bordado{ background-color: #AF9BCC; + border: 1px solid black; } + /* Sumindo com o elemento usando display: none; */ .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..09ee1af 100644 --- a/exercicio3/style.css +++ b/exercicio3/style.css @@ -2,24 +2,33 @@ 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; - padding: 40px; + width: 60vw; + padding: 1rem; + background-color: brown; + color: white } aside{ - float:right; + 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: 5%; + width: 25%; + background-color: blue; + color: white } article{ - margin: 10px 0; -} \ No newline at end of file + margin: 1rem 0; +} diff --git a/fixacao/style.css b/fixacao/style.css index e69de29..a7ad52c 100644 --- a/fixacao/style.css +++ b/fixacao/style.css @@ -0,0 +1,43 @@ +*{ + margin: 0; + padding: 0; +} + +header{ + height: 40px; + padding: 10px; + background-color: orange; + color: white; + border-bottom: 5px solid black; +} + +main{ + margin: 15px; + padding: 20px 30px; + width: 90vw; + height: 80vh; + +} + +article{ + margin: 25px; +} + +h2{ + font-family: Arial; +} + +p{ + font-family: Helvetica; +} + +.destaque{ + color: orange; +} + +footer{ + height: 40px; + padding: 10px; + background-color: black; + color: white; +}