labenuexercicios · joaohgs78 · Apr 6, 2023
diff --git a/exercicio1/index.html b/exercicio1/index.html
@@ -22,6 +22,12 @@ <h6>Sou um título MINÚSCULO</h6>
     <h2 class="texto-com-background">Sou um título GRANDE</h2>
     <h2 class="texto-com-background" id="texto-com-outra-cor">Sou um título GRANDE</h2>
 
+    <section>
+        <p>Bananinha</p>
+        <p>Bananinha</p>
+        <p>Bananinha</p>
+    </section>
+
 </body>
 
 </html>
diff --git a/exercicio1/style.css b/exercicio1/style.css
@@ -0,0 +1,22 @@
+h1, h2, h3, h4, h5, h6, p {
+    color: orange;
+}
+
+.texto-com-background {
+    background-color: yellow;
+}
+
+#texto-com-outra-cor{
+    color: green;
+}
+
+section > p {
+    color: blue;
+}
+
+/*muda so o elemento que estabelici*/
+section p:nth-child(2){
+
+    color: red;
+
+}
diff --git a/exercicio2/style.css b/exercicio2/style.css
@@ -0,0 +1,38 @@
+* {
+    margin: 0;
+    padding: 0;
+
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+/* vh / vw / % / x
+
+vh ou vw = usa como referencia o tamnho do dispositivo
+
+% = pega diferença do elemento pai mais proximo
+
+x = */
+
+
+header {
+    background-color: lightcoral;
+    height: 10vh;
+    position: sticky;
+    top: 0;
+    text-align: center;
+
+
+
+}
+
+main {
+    background-color: lightblue;
+    height: 80vh;
+    text-align: center;
+}
+
+footer {
+    background-color: lightgrey;
+    height: 10vh;
+    text-align: center;
+}
diff --git a/exercicio3/index.html b/exercicio3/index.html
@@ -11,7 +11,7 @@
 </head>
 
 <body>
-<button>Oi, eu sou um botão</button>
+    <button class="glow-on-hover" type="button"> OI EU SOU UM BOTAO</button>
 
 </body>
 

diff --git a/exercicio3/style.css b/exercicio3/style.css
@@ -0,0 +1,72 @@
+html,
+body {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    background: #000;
+}
+
+.glow-on-hover {
+    width: 220px;
+    height: 50px;
+    border: none;
+    outline: none;
+    color: #fff;
+    background: #111;
+    cursor: pointer;
+    position: relative;
+    z-index: 0;
+    border-radius: 10px;
+}
+
+.glow-on-hover:before {
+    content: '';
+    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
+    position: absolute;
+    top: -2px;
+    left:-2px;
+    background-size: 400%;
+    z-index: -1;
+    filter: blur(5px);
+    width: calc(100% + 4px);
+    height: calc(100% + 4px);
+    animation: glowing 20s linear infinite;
+    opacity: 0;
+    transition: opacity .3s ease-in-out;
+    border-radius: 10px;
+}
+
+.glow-on-hover:active {
+    color: #000
+}
+
+.glow-on-hover:active:after {
+    background: transparent;
+}
+
+.glow-on-hover:hover:before {
+    opacity: 1;
+}
+
+.glow-on-hover:after {
+    z-index: -1;
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: #111;
+    left: 0;
+    top: 0;
+    border-radius: 10px;
+}
+
+@keyframes glowing {
+    0% { background-position: 0 0; }
+    50% { background-position: 400% 0; }
+    100% { background-position: 0 0; }
+}
diff --git a/fixacao/index.html b/fixacao/index.html
@@ -21,7 +21,7 @@ <h1> Header</h1>
         <section>
             Não mudo de posição, mas meu texto é centralizado.
         </section>
-        <section>
+        <section class="sec-verde"> 
             Se você clicar no botão aqui embaixo, eu fico verde.
             <br />
             <button>Clica aqui!</button>

diff --git a/fixacao/style.css b/fixacao/style.css
@@ -24,14 +24,35 @@
     background-color: white;
     padding: 20px;
     margin: 10px 0;
+    text-align: center;
+  }
+  aside {
+    position: absolute;
+    right: 80px;
+  }
+
+  button {
+    cursor: pointer;
+  }
+
+  .sec-verde:active {
+    background-color: green;
   }
 
   nav{
     padding: 20px;
     background-color: white;
+    text-align: center;
+    position:sticky;
+    top: 0;
   }
 
   footer{
     background-color: #abd1c6;
     padding: 20px;
+    text-align: center;
+  }
+
+  footer:hover {
+    background-color: yellow;
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,7 +11,7 @@ @@
     </head>
     <body>
-    <button>Oi, eu sou um botão</button>
+        <button class="glow-on-hover" type="button"> OI EU SOU UM BOTAO</button>
     </body>
@@ Expand Down @@