exercicio1

exercicio1/index.html

@@ -16,7 +16,7 @@
   </ul>
 
   <div class="container">
-    <ul>
+    <ul class="potato">
       <li id="fonte-setenta">A minha fonte é setenta porcento da fonte do meu pai</li>
       <li id="comprimento-pai">O meu comprimento é dez porcento do comprimento do meu pai</li>
       <li id="altura-pai">A minha altura é dez porcento da altura do meu pai</li>

exercicio1/style.css

@@ -1,33 +1,54 @@
-#texto-fonte-root{
+*{
+    margin: 0px;
+}
+
+/* html{
+
+    font-size: 5px;
+} */
 
+
+#texto-fonte-root{
+font-size: 3rem;
 }
 
 #texto-paddings-verticais{
-
+    background-color: aqua;
+padding: 2rem 0px;
 }
 
 #altura-porcentagem-comprimento{
+height: 20vw;
 
 }
 
 #comprimento-metade-altura{
-
+    background-color: blanchedalmond;
+width: 50vh;
 }
 
-.container{
+.potato{
     border: 1px solid black;
     width: 400px;
     font-size: 20px;
+    height: 800px;
+    background-color: blanchedalmond;
+
+
 }
 
-#fonte-setenta{
 
+#fonte-setenta{
+font-size: 70%;
 }
 
 #comprimento-pai{
+    border: 1px solid black;
+width: 10%;
 
 }
 
 #altura-pai{
-
+    background-color: blue;
+height: 10%;
 }

exercicio2/style.css

@@ -0,0 +1,47 @@
+* {
+    margin: 0px;
+}
+
+main {
+    display: grid;
+    /* grid-template-columns: repeat(auto-fit, 186px); */
+    grid-template-columns: 1fr 1fr 1fr;
+    min-height: 100vh;
+    background-color: aqua;
+    grid-template-rows: 40vh 40vh;
+}
+
+section {
+    display: grid;
+    border: 1px solid black;
+    background-color: bisque;
+    justify-items: center;
+    align-items: center;
+}
+
+@media screen and (max-device-width:480px) and (min-device-width:280px) {
+    main {
+        display: grid;
+        grid-template-columns: 1fr;
+        color: red;
+        grid-template-rows: none;
+    }
+    section{
+        align-items: start;
+        color: bisque;
+    }
+}
+
+@media screen and (min-device-width : 481px) and (max-device-width : 800px) { 
+
+    main {
+        display: grid;
+        grid-template-columns: 1fr;
+        color: purple;
+        font-size: 30px;
+        grid-template-rows: none;
+    }
+    section{
+        align-items: end;
+    }
+    } 

fixacao/styles.css

@@ -13,10 +13,10 @@
   }
 
   main {
-    height: 77vh;
+    min-height: 77vh;
     max-width: 800px;
     display: flex;
-    flex-direction: row;
+
     margin: 20px auto;
     gap: 10px;
   }
@@ -39,10 +39,21 @@
   }
 
   footer {
-    position: absolute;
-    bottom: 0;
     background-color: black;
     color: white;
     padding: 20px;
     width: 100%;
-  }
+  }
+
+  @media screen and (min-device-width : 280px) and (max-device-width : 480px) { 
+
+    main {
+      flex-direction: column;
+    }
+
+
+
+
+    /* celulares */ 
+
+    }