basic html and starter css

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

Hide file tree

Showing 2 changed files with 75 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -7,6 +7,53 @@
     <title>CSS Variables</title>
   </head>
   <body>
+    <header>
+      <h1>🌱 Houseplants-R-Us 🌱</h1>
+      <h2>Buy your low-maintenance, high-happiness houseplant friends here!</h2>
+    </header>
+    <main>
+      <article class="plant-listing">
+        <h3 class="plant-header">ZZ Plant</h3>
+        <img
+          class="plant-pic"
+          src="https://cdn.shopify.com/s/files/1/1706/1307/products/Zamioculcas-zamiifolia-ZZ-Plant.jpg?v=1535278807"
+          alt="zz plant"
+        />
+        <p class="plant-description">
+          As low maintenance as they come, ZZ plants are low-light friendly and
+          hardly need water. But keep away from pets!
+        </p>
+        <button>Add to cart</button>
+      </article>
+      <article class="plant-listing">
+        <h3 class="plant-header">Ponytail Palm</h3>
+        <img
+          class="plant-pic"
+          src="https://www.gardenersdream.co.uk/images/beaucarnea-recurvata-nolina-tall-ponytail-palm-p4703-37298_image.jpg"
+          alt="ponytail palm"
+        />
+        <p class="plant-description">
+          How fun does this low light-tolerant friend look? It stores water in
+          the caudex peeking out from the soil, so it only needs a drink
+          infrequently.
+        </p>
+        <button>Add to cart</button>
+      </article>
+      <article class="plant-listing">
+        <h3 class="plant-header">Monstera Deliciosa</h3>
+        <img
+          class="plant-pic"
+          src="https://pearcedalegardencentre.com.au/wp-content/uploads/2019/06/monstera.jpg"
+          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.
+        </p>
+        <button>Add to cart</button>
+      </article>
+    </main>
     <script src="./main.js"></script>
   </body>
 </html>
diff --git a/styles.css b/styles.css
@@ -13,3 +13,31 @@ Lvl 3:
     - Slider to make text size larger/smaller?
     - Something using calc() or another css fn?
 */
+
+header {
+  text-align: center;
+}
+
+main {
+  display: flex;
+  justify-content: center;
+}
+
+.plant-listing {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 25px;
+  margin: 25px;
+  border-radius: 10px;
+  width: 400px;
+}
+
+.plant-pic {
+  height: 300px;
+  width: auto;
+}
+
+.plant-listing > button {
+  padding: 10px;
+}