diff --git a/3-terrarium/2-intro-to-css/index.html b/3-terrarium/2-intro-to-css/index.html index e66ce229..9d46f70c 100644 --- a/3-terrarium/2-intro-to-css/index.html +++ b/3-terrarium/2-intro-to-css/index.html @@ -12,6 +12,17 @@

Hello World

+
+
+

My Terrarium

+ +
+
+
+
+
+
+

Hello World

diff --git a/3-terrarium/2-intro-to-css/style.css b/3-terrarium/2-intro-to-css/style.css index f5ab6a0c..841f324f 100644 --- a/3-terrarium/2-intro-to-css/style.css +++ b/3-terrarium/2-intro-to-css/style.css @@ -25,4 +25,57 @@ h1{ color: red; 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; } \ No newline at end of file diff --git a/3-terrarium/2-intro-to-css/thuytinh.jpg b/3-terrarium/2-intro-to-css/thuytinh.jpg new file mode 100644 index 00000000..1ebc1564 Binary files /dev/null and b/3-terrarium/2-intro-to-css/thuytinh.jpg differ