task one written

SchoolOfCode · Oct 12, 2020 · cf56c1b · cf56c1b
1 parent 508c706
commit cf56c1b
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="styles.css" />
-    <title>CSS Variables</title>
+    <title>CSS Variables Tasks</title>
   </head>
   <body>
     <header>
@@ -47,13 +47,16 @@ <h3 class="plant-header">Monstera Deliciosa</h3>
           alt="Monstera Deliciosa"
         />
         <p class="plant-description">
-          The monstera's interesting leaves are definitely #PlantGoals. This
-          leafy vine can grow to be a statement piece in your space, and once
-          it's big enough, you can propagate it with ease.
+          These interesting leaves are definitely #PlantGoals. This leafy vine
+          can grow to be a statement piece in your space, and once it's big
+          enough, you can propagate it with ease.
         </p>
         <button>Add to cart</button>
       </article>
     </main>
+    <footer>
+      <label><input type="checkbox" /> Enable dark mode</label>
+    </footer>
     <script src="./main.js"></script>
   </body>
 </html>
diff --git a/styles.css b/styles.css
@@ -14,6 +14,27 @@ Lvl 3:
     - Something using calc() or another css fn?
 */
 
+/* Your tasks: 
+
+1. Convert the following values to CSS variables, and replace the value itself in the CSS with the variable name. Make your CSS variable names semantic so they make sense with what you're using them for!
+
+Keep them as their original value for now. For example, the background color of the whole page is set to antiquewhite, so when you replace that with a variable, make sure the variable has antiquewhite as a value for now. The appearance of the page shouldn't change at this point!
+
+    - body background color
+    - ".plant-listing" background color 
+    - body text color
+    - ".plant-header" font size 
+    - ".plant-description" font size
+
+2. 
+
+*/
+
+body {
+  background-color: antiquewhite;
+  color: black;
+}
+
 header {
   text-align: center;
 }
@@ -26,18 +47,35 @@ main {
 .plant-listing {
   display: flex;
   flex-direction: column;
+  justify-content: space-around;
   align-items: center;
   padding: 25px;
   margin: 25px;
   border-radius: 10px;
-  width: 400px;
+  width: 25vw;
+  height: 40vh;
+  text-align: center;
+  background-color: rgb(197, 231, 147);
+}
+
+.plant-header {
+  font-size: 24px;
 }
 
 .plant-pic {
   height: 300px;
   width: auto;
 }
 
+.plant-description {
+  font-size: 16px;
+}
+
 .plant-listing > button {
   padding: 10px;
 }
+
+footer {
+  text-align: center;
+  padding: 5vh;
+}