labenuexercicios · lkarat · Jun 27, 2024 · Jul 3, 2024
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 I - Prática Guiada 1</title>
+   <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 
 <body>

diff --git a/exercicio1/style.css b/exercicio1/style.css
@@ -0,0 +1,38 @@
+*{
+   margin: 0px;
+   padding: 0px;
+}
+
+
+
+h1 { 
+    background-color: blue;
+    color: aliceblue;
+}
+#titulo-importante {
+background-color: blueviolet;
+
+}
+
+
+.sub-titulo {
+   background-color: yellow;
+}
+section {
+    background-color: green;
+    border: 10px solid black;
+    margin: 50px;
+}
+.titulo-secao {
+    color: aliceblue;
+    font-weight: bold
+}
+.texto-generico {
+    font-weight: bold
+}
+.titulo-pouco-importante {
+    background-color: black;
+    color: aliceblue
+
+}
+
diff --git a/exercicio2/index.html b/exercicio2/index.html
@@ -5,6 +5,7 @@
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title> CSS I - Prática Guiada 2</title>
+   <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 
 <body>

diff --git a/exercicio2/style.css b/exercicio2/style.css
@@ -1,22 +1,42 @@
+*{
+  margin: 0;
+  padding: 0;
+}
+
 .longe-bordas{
     background-color: #FFA6A9;
+    padding: 10px;
+    display: block;
+
+
   }
 
   .afastado{
     background-color: #77C0ED;
+    margin: 40px;
+    display: block;
+
+
+
   }
   .alto{
     background-color: #C3E887;
+    height: 300px;
+
+
   }
 
   .largo{
   background-color: #FFE396;
+  width: 500px;
   }
 
   .bordado{
     background-color: #AF9BCC;
+    border: 1px dotted black;
+    display: block;
   }
 
   .sumido{
-
+   display: none;
   }
diff --git a/exercicio3/index.html b/exercicio3/index.html
@@ -5,6 +5,7 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>CSS I - Prática Guiada 3</title>
+  <link rel="stylesheet" type="text/CSS" href="./style.css">
 </head>
 
 <body>
@@ -13,11 +14,11 @@ <h1>Jornal Labenu</h1>
   </header>
   <main>
     <section>
-      <h2>A coleção completa de manuais do Super Nintendo</h2>
+      <h2>SECTION AQUI 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.estadao.com.br/resizer/v2/BSRFGPQARVI7ZHFPKHOT4RBE54.jpg?quality=80&auth=0fb141aba7938edf2932f0dafbc63165c3151231df494465528ad86ffa466ad9&width=768&height=542&focal=0,0" />
       <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.
 
@@ -27,7 +28,7 @@ <h3>Acervo digital conta com 1.757 livretos que acompanharam os jogos lançados
         formato PDF, disponível para download gratuito.</p>
     </section>
     <aside>
-      <h2>Leia mais</h2>
+      <h2>AQUI COMEÇA ASIDE Leia mais</h2>
       <article>
         <h3>Um documentário totalmente gravado em realidade virtual</h3>
         <h5>por Kelly Ribeiro</h5>

diff --git a/exercicio3/style.css b/exercicio3/style.css
@@ -1,25 +1,47 @@
+html {
+font-size: 10px;
+
+}
+
 *{
   padding: 0;
   margin: 0;
 }
 header{
 
+}
+main {
+font-family: Helvetica;
+width: 100vw;
+background-color: blueviolet;
+padding: 0px;
+font-size: 20px;
+
 }
 
 section{
-  float: left;
+  /* 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;
+  max-width: 70vw;
+  padding: 0px;
+  min-height: 60vh;
+  background-color: aqua;
+  font-size: 2rem;
+}
+
+img {
+width: 60%;
+
 }
 
 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;
+  width: 600px;
+  background-color: burlywood;
 }
 
 article{
   margin: 10px 0;
-}
+}