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..40d33f0 100644 --- a/exercicio2/style.css +++ b/exercicio2/style.css @@ -1,22 +1,32 @@ -.longe-bordas{ - background-color: #FFA6A9; - } +.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 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..713c22f 100644 --- a/exercicio3/style.css +++ b/exercicio3/style.css @@ -6,18 +6,26 @@ 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: 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{ 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