site

JOSDUARTT3 · Nov 30, 2024 · 22baa67 · 22baa67
1 parent d6b04bd
commit 22baa67
Show file tree

Hide file tree

Showing 2 changed files with 127 additions and 58 deletions.
diff --git a/desafios/desafio12/index.html b/desafios/desafio12/index.html
@@ -1,88 +1,101 @@
 <!DOCTYPE html>
 <html lang="pt-pt">
 <head>
+    <link rel="stylesheet" href="style.css">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Cordel moderno</tle>
+    <title>Cordel moderno</title>
 </head>
 <body>
 <header>
 
             <h1>Cordel Moderno</h1>
-            <a href="https://www.recantodasletras.com.br/poesias/3186743]">Por Milton Duarte</a>
+            <p><a href="https://www.recantodasletras.com.br/poesias/3186743]">Por Milton Duarte</a> </p>
 
 </header>
 
-<section>
-    Estou ficando cansado
-    Da tal tecnologia
-    Só se fala por e-mail
-    Mensagem curta e fria
-    Twitter e Facebook
-    Antes que eu caduque
+<section class="normal">
+    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.
 </section>
 
-<section>
+<section class="img">
 
-
-    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.
-</section>
+  <p>
+
+      Não é mais como era antes <br>
+      É tudo abreviado <br>
+      "Você" só tem duas letras <br>
+      O "O" e o "E" foi riscado
+      Para declarar o amor <br>
+      Basta botar uma flor <br>
+      E um coração desenhado.
+  </p>
+</section >
 
-<section>
-    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.
+<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.
+    </p>
 
-    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.
+    <p>
+        Pra piorar a liguagem <br>
+        O emoticom é um risco <br>
+        Tem símbolo para tudo <br>
+        Ponto e vírgula e um  <br>asterisco <br>
+        Um beijo significa <br>
+        Pra entender como fica <br>
+        Decifre esse rabisco.
+    </p>
 </section>
 
 
 
-<section>
-    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.
+<section class="img">
+    <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.
+    </p>
 </section>
 
 
-<section>
-
-    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.
+<section class="normal">
 
-    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.
+    <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.
+    </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.
+   </p>
 </section>
 
 <footer>

diff --git a/desafios/desafio12/style.css b/desafios/desafio12/style.css
@@ -0,0 +1,56 @@
+@charset "UTF-8";
+*{
+    margin: 0;
+    padding: 0;
+}
+html,body{
+    min-height: 100vh;
+    background-color: darkgrey;
+}
+header{
+    background-color: black;
+    color: white;
+    text-align: center;
+}
+header h1{
+    font-variant: small-caps;
+
+padding: 50px;
+}
+header p{
+    padding-bottom: 50px;
+}
+a{
+    text-decoration: none;
+    color: white;
+    font-weight: bold;
+}
+a:hover{
+    text-decoration: underline;
+}
+footer{
+    background-color: black;
+    color: white;
+    text-align: center;
+    padding: 10px;
+}
+section{
+    padding-top: 10vh;
+    padding-bottom: 10vh;
+    line-height: 2em;
+    padding-left: 30px;
+}
+.normal{
+    background-color: white;
+
+    color: black;
+}
+.img{
+
+    background-color: rgb(57, 62, 68);
+    color: white;
+}
+section.img> p{
+    background-color: rgb(46, 43, 43);
+    width: 400px;
+}