task css layout

3-terrarium/2-intro-to-css/index.html

@@ -12,6 +12,17 @@
     <div id="left-container" class="container">
         <h1>Hello World</h1>
     </div>
+    <div class="plant-holder">
+        <div class="terrarium">
+            <h1>My Terrarium</h1>
+            
+        </div>
+    </div>
+    <div class="jar-top"></div>
+            <div class="jar-walls"></div>
+            <div class="dirt"></div>
+            <div class="jar-bottom"></div>
+            
     <div id="right-container" class="container">
         <h1>Hello World</h1>
     </div>

3-terrarium/2-intro-to-css/style.css

@@ -26,3 +26,56 @@ h1{
     font-size: 50px;
     text-align: center;
 }
+.plant-holder {
+    position: relative;
+    height: 13%;
+    left: -10px;
+}
+
+.plant {
+    position: absolute;
+    max-width: 150%;
+    max-height: 150%;
+    z-index: 2;
+}
+.jar-walls {
+    height: 80%;
+    width: 60%;
+    background: #d1e1df;
+    border-radius: 1rem;
+    position: absolute;
+    bottom: 0.5%;
+    left: 20%;
+    opacity: 0.5;
+    z-index: 1;
+}
+.jar-top {
+    width: 50%;
+    height: 5%;
+    background: #d1e1df;
+    position: absolute;
+    bottom: 80.5%;
+    left: 25%;
+    opacity: 0.7;
+    z-index: 1;
+}
+.jar-bottom {
+    width: 50%;
+    height: 1%;
+    background: #d1e1df;
+    position: absolute;
+    bottom: 0%;
+    left: 25%;
+    opacity: 0.7;
+}
+.dirt {
+    width: 60%;
+    height: 5%;
+    background: #3a241d;
+    position: absolute;
+    border-radius: 0 0 1rem 1rem;
+    bottom: 1%;
+    left: 20%;
+    opacity: 0.7;
+    z-index: -1;
+}