diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..84254a0
Binary files /dev/null and b/.DS_Store differ
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;
+}