labenuexercicios · Gabrielgarg · Dec 14, 2022
diff --git a/exercicio1/index.html b/exercicio1/index.html
@@ -5,6 +5,7 @@
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS - prática guiada 1</title>
+   <link rel="stylesheet" href="./style.css">
 </head>
 
 <body>

diff --git 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;
+}
diff --git 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;
   }
diff --git a/exercicio3/index.html b/exercicio3/index.html
@@ -6,6 +6,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>CSS - prática guiada 3</title>
   <link rel="stylesheet" href="style.css">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
+
 </head>
 
 <body>
@@ -18,7 +22,7 @@ <h2>A coleção completa de manuais do Super Nintendo</h2>
       <h3>Acervo digital conta com 1.757 livretos que acompanharam os jogos lançados para o console da empresa japonesa.
       </h3>
       <img
-        src="https://www.nexojornal.com.br/incoming/imagens/super-mario.jpg/alternates/LANDSCAPE_640/super-mario.jpg" />
+        src="https://www.nexojornal.com.br/incoming/imagens/super-mario.jpg/alternates/LANDSCAPE_640/super-mario.jpg" width="550" height="250" />
       <p>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
@@ -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;
 }
diff --git 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;
+}