diff --git a/exercicio1/index.html b/exercicio1/index.html index fc775a9..a6bccc6 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..6a5db6d 100644 --- a/exercicio1/style.css +++ b/exercicio1/style.css @@ -0,0 +1,23 @@ +/* pd usar header / se usar o id #titulo-importante / h1 */ +header{ + background-color: blue; + color: white; +} +/* se vier de class, tem q usar .e o nome */ + +.sub-titulo{ + background-color: yellow; +} + +section{ + background-color: green; +} + +.titulo-secao{ + color: white; +} + +.titulo-pouco-importante{ + background-color: black; + color: white; +} \ No newline at end of file diff --git a/exercicio2/style.css b/exercicio2/style.css index a3b7f1e..6cac8cc 100644 --- a/exercicio2/style.css +++ b/exercicio2/style.css @@ -1,22 +1,42 @@ .longe-bordas{ background-color: #FFA6A9; + padding: 10px 10px 10px 10px; + /* pd usar dessa forma tb: + padding-right: 10px; + padding-left: 10px; + padding-top: 10px; + padding-bottom: 10px; */ } .afastado{ background-color: #77C0ED; + margin: 15px 30px 20px 20px; + /* margin-right: 15px; + margin-left: 30px; + margin-top: 20px; + margin-bottom: 20px; */ } .alto{ background-color: #C3E887; + margin-bottom: 300px; + } .largo{ background-color: #FFE396; + /* Aumentar a largura. */ + width: 500px; } .bordado{ background-color: #AF9BCC; + border: 5px solid black; + /* border-bottom: 1px solid black; + border-top: 1px solid black; + border-right: 1px solid black; + border-left: 1px solid black; */ } .sumido{ - + display: none; } \ No newline at end of file diff --git a/exercicio3/index.html b/exercicio3/index.html index 4b830e6..3b455fc 100644 --- a/exercicio3/index.html +++ b/exercicio3/index.html @@ -6,6 +6,10 @@ CSS - prática guiada 3 + + + + @@ -18,7 +22,7 @@

A coleção completa de manuais do Super Nintendo

Acervo digital conta com 1.757 livretos que acompanharam os jogos lançados para o console da empresa japonesa.

+ src="https://www.nexojornal.com.br/incoming/imagens/super-mario.jpg/alternates/LANDSCAPE_640/super-mario.jpg" width="550" height="250" />

Lançado em 1990, o Super Nintendo foi um dos videogames mais populares da história. Foram 49 milhões de consoles vendidos no mundo todo entre sua chegada ao mercado e o fim da produção em 2003. diff --git a/exercicio3/style.css b/exercicio3/style.css index 10c8270..c94a997 100644 --- a/exercicio3/style.css +++ b/exercicio3/style.css @@ -1,25 +1,45 @@ *{ + /* usando * e abrindo chave pd alterar toda a letra da pagina */ + font-family: 'Roboto', sans-serif; + /* Tem que sempre resetar o CSS usando padding: 0 e margin: 0, e box-sizing: border-box*/ padding: 0; margin: 0; + box-sizing: border-box; } header{ - + color: brown; + margin-bottom: 20px; +} +main{ + /* font-family: usando o tipo de letra helvetica, caso n exista usa a sans-serif */ + font-family: 'Helvetica', sans-serif; +} +h2{ + margin-bottom: 3%; } - 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; + font-size: 70%; + width: 550px; + padding: 2px; + /* width: 65.625vw; + padding: 3.125vw; */ + /* vw e porcentagem é a mesma coisa. */ } 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; + font-size: 70%; + margin-top: 6%; + margin-right: 5%; + padding: 10px; width: 340px; + border: 3px solid black; } article{ - margin: 10px 0; + color: cadetblue; + margin: 10px; } \ No newline at end of file diff --git a/fixacao/style.css b/fixacao/style.css index e69de29..bf70b61 100644 --- a/fixacao/style.css +++ b/fixacao/style.css @@ -0,0 +1,40 @@ +*{ + /* Tem que sempre resetar o CSS usando padding: 0 e margin: 0, e box-sizing: border-box*/ + padding: 0; + margin: 0; + box-sizing: border-box; + } + +header{ + margin-bottom: 10px; + padding: 10px 10px 10px 10px; + background-color: orange; + color: white; + border-bottom: 3px solid black; +} +h2{ + font-family: Arial; +} +p{ + font-family: Helvetica; +} +main{ + /* quando usa so 1 tipo margin: 15px vai 15px pra todos os lados */ + margin: 15px; + padding: 20px 20px 30px 30px; + width: 90vw; + height: 80vh; +} +article{ + /* quando usa 2 igual margin: 25px e 0 o 25 vai pra cima e pra baixo e o 0 para os lados */ + margin: 25px 0; +} +.destaque{ + color: orange; +} +footer{ + margin-top: 50px; + padding: 10px; + background-color: black; + color: white; +} \ No newline at end of file