diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/exercicio1/index.html b/exercicio1/index.html index fc775a9..76e259d 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..af174af 100644 --- a/exercicio1/style.css +++ b/exercicio1/style.css @@ -0,0 +1,22 @@ +#titulo-importante{ + background-color: blue; + color: white; +} +.sub-titulo{ + background-color: darkgoldenrod; + color: black; + +} +section{ + background-color: green; + color: black + +} +.titulo-secao { + + color:black; +} +.titulo-poco-importante { + background-color: black; + color: white; +} diff --git a/exercicio2/style.css b/exercicio2/style.css index a3b7f1e..c424f0d 100644 --- a/exercicio2/style.css +++ b/exercicio2/style.css @@ -1,22 +1,35 @@ .longe-bordas{ background-color: #FFA6A9; + display: block; + margin: 100px; + } .afastado{ background-color: #77C0ED; + margin: 50px 0; + display: block; + color: black; } .alto{ background-color: #C3E887; + height: 300px; + color: black; } .largo{ background-color: #FFE396; + width: 500px; + padding: 32px; + color: black } .bordado{ background-color: #AF9BCC; + border: 2px solid 5px black; } .sumido{ + display: none; } \ No newline at end of file diff --git a/exercicio3/index.html b/exercicio3/index.html index 4b830e6..04abe2b 100644 --- a/exercicio3/index.html +++ b/exercicio3/index.html @@ -6,6 +6,8 @@ CSS - prática guiada 3 + + diff --git a/exercicio3/style.css b/exercicio3/style.css index 10c8270..efeb338 100644 --- a/exercicio3/style.css +++ b/exercicio3/style.css @@ -1,23 +1,29 @@ *{ padding: 0; margin: 0; + color:chocolate; + box-sizing: border-box; } header{ + color: chocolate; } +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: 65.6vw; + padding: 3.1vw; } 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: 1.5vw; + width: 26.5vw; } article{ diff --git a/fixacao/style.css b/fixacao/style.css index e69de29..fde78d4 100644 --- a/fixacao/style.css +++ b/fixacao/style.css @@ -0,0 +1,42 @@ +header{ + height: 10vh; + padding: 15px 10px; + background-color: orange; + color: white; + border: bottom 1px; + +} +footer{ + height: 10vh; + padding: 10px 10px; + background-color: black; + color: white; +} +main{ + margin: 15px 15px; + padding: 20px 30px; + height: 110vh; + width: 90vw; + background-color: darkolivegreen; +} +article{ + margin: 15px 0px; +} +.destaque{ + color: orange; +} +h1 { + + font-family: Arial; +} +h2{ + font-family: Arial; +} +.p{ + font-family: Helvetica; +} +body{ + background-color: blueviolet; + + +}