Atualização: correção d12 - folha de estilo

RobinsonConstantino · Mar 17, 2024 · b54f548 · b54f548
1 parent 95d06ae
commit b54f548
Show file tree

Hide file tree

Showing 2 changed files with 156 additions and 66 deletions.
diff --git a/módulo03/d012/estilo/style.css b/módulo03/d012/estilo/style.css
@@ -0,0 +1,72 @@
+@charset "UTF-8";
+
+* {
+  margin: 0px;
+  padding: 0px;
+}
+
+html,
+body {
+  min-height: 100vh;
+  background-color: tomato;
+  color: white;
+}
+
+header {
+  background-color: black;
+  color: white;
+  text-align: center;
+}
+
+header > h1 {
+  padding: 25px;
+  font-variant: small-caps; /* todas as letras maiúsculas, mas as primeiras maiores que o resto */
+  /*text-transform: uppercase;*/ /*todas as letras do mesmo tamanho maiúsculas*/
+}
+
+header > P {
+  padding-bottom: 25px;
+}
+
+header a,
+footer a {
+  color: white;
+  text-decoration: none;
+  font-weight: bolder;
+}
+
+header a:hover,
+footer a:hover {
+  font-weight: normal;
+  color: blue;
+  text-decoration: underline;
+}
+
+section {
+  padding-top: 10vh;
+  padding-bottom: 10vh;
+  padding-left: 30px;
+  line-height: 2em;
+}
+
+section.normal {
+  background-color: white;
+  color: black;
+}
+
+section.imagem > p {
+  width: 400px;
+  background-color: rgba(0, 0, 0, 0.53);
+}
+
+section.imagem {
+  background-color: rgba(0, 0, 0, 0.381);
+  color: white;
+}
+
+footer {
+  background-color: black;
+  color: white;
+  text-align: center;
+  padding: 8px;
+}
diff --git a/módulo03/d012/index.html b/módulo03/d012/index.html
@@ -3,6 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+				<link rel="shortcut icon" href="correcao-desafio12/imagens/favicon.ico" type="image/x-icon">
+				<link rel="stylesheet" href="estilo/style.css">
     <title>Cordel Moderno</title>
   </head>
   <body>
@@ -19,71 +21,87 @@ <h1>Cordel Moderno</h1>
       </p>
     </header>
 
-    <pre>
-					Estou ficando cansado
-					Da tal tecnologia
-					Só se fala por e-mail
-					Mensagem curta e fria
-					Twitter e Facebook
-					Antes que eu caduque
-					Vou dizer tudo em poesia.
-
-					//---
-
-					Não é mais como era antes
-					É tudo abreviado
-					"Você" só tem duas letras
-					O "O" e o "E" foi riscado
-					Para declarar o amor
-					Basta botar uma flor
-					E um coração desenhado.
-
-					//---
-
-					Arroba agora não pesa
-					É parte de um endereço
-					Ponto final nem se usa
-					Ou vai até no começo
-					Agora é .com
-					Se o saite é muito bom
-					Ele vale um alto preço.
-
-					Pra piorar a liguagem
-					O emoticom é um risco
-					Tem símbolo para tudo
-					Ponto e vírgula e um asterisco
-					Um beijo significa
-					Pra entender como fica
-					Decifre esse rabisco.
-
-					//---
-
-					Tenho saudade das cartas
-					Escritas com a própria mão
-					Mandava no mês de Junho
-					Só chegava no Verão
-					Mas matava a saudade
-					Era texto de verdade
-					Nas linhas do coração.
-
-					//---
-
-					Agora, escrevo e envio
-					Chegando na mesma hora
-					Mas quando vou prosear
-					A pessoa foi embora
-					Abriu outro aplicativo
-					O mundo ficou cativo
-					Da tecnologia do agora.
-
-					Felizmente, pra orar
-					Não precisa de internet
-					Deus escuta todo mundo
-					Se quiser, faça esse teste
-					Dois pontos são dois joelhos
-					Seus lábios são aparelhos
-					Deixe que Deus interprete.
-				</pre>
+    <section class="normal">
+      <p>
+        Estou ficando cansado<br />
+        Da tal tecnologia<br />
+        Só se fala por e-mail<br />
+        Mensagem curta e fria<br />
+        Twitter e Facebook<br />
+        Antes que eu caduque<br />
+        Vou dizer tudo em poesia.<br>
+      </p>
+    </section>
+
+    <section class="imagem">
+      <p>
+        Não é mais como era antes<br />
+        É tudo abreviado<br />
+        "Você" só tem duas letras<br />
+        O "O" e o "E" foi riscado<br />
+        Para declarar o amor<br />
+        Basta botar uma flor<br />
+        E um coração desenhado.<br>
+      </p>
+    </section>
+
+    <section class="normal">
+
+        <p>
+									Arroba agora não pesa<br />
+									É parte de um endereço<br />
+									Ponto final nem se usa<br />
+									Ou vai até no começo<br />
+									Agora é .com<br />
+									Se o saite é muito bom<br />
+									Ele vale um alto preço.<br>
+								</p>
+
+							 <p>
+									Pra piorar a liguagem<br />
+									O emoticom é um risco<br />
+									Tem símbolo para tudo<br />
+									Ponto e vírgula e um asterisco<br />
+									Um beijo significa<br />
+									Pra entender como fica<br />
+									Decifre esse rabisco.<br>
+								</p>
+
+				</section>
+
+    <section class="imagem">
+      <p>
+        Tenho saudade das cartas<br />
+        Escritas com a própria mão<br />
+        Mandava no mês de Junho<br />
+        Só chegava no Verão<br />
+        Mas matava a saudade<br />
+        Era texto de verdade<br />
+        Nas linhas do coração.<br>
+      </p>
+    </section>
+
+    <section class="normal">
+							<p>
+								Agora, escrevo e envio<br />
+								Chegando na mesma hora<br />
+								Mas quando vou prosear<br />
+								A pessoa foi embora<br />
+								Abriu outro aplicativo<br />
+								O mundo ficou cativo<br />
+								Da tecnologia do agora.<br>
+							</p> 
+
+							<p>
+								Felizmente, pra orar<br />
+								Não precisa de internet<br />
+								Deus escuta todo mundo<br />
+								Se quiser, faça esse teste<br />
+								Dois pontos são dois joelhos<br />
+								Seus lábios são aparelhos<br />
+								Deixe que Deus interprete.<br>
+							</p>
+
     <footer>
       &copy; Site criado por
       <a href="https://github.com/RobinsonConstantino" target="_blank"
@@ -95,7 +113,7 @@ <h1>Cordel Moderno</h1>
           src="correcao-desafio12/imagens/10p.jpg"
           width="15px"
           alt="link" /></a
-      >. Todos os direitos reservados
+      > . Todos os direitos reservados
     </footer>
   </body>
 </html>