From 129e630643fb998cc39adf8727fd7f744f1e155b Mon Sep 17 00:00:00 2001 From: Supaprapat Date: Sun, 3 Apr 2022 00:29:22 +0700 Subject: [PATCH] finish lesson 3 (CSS) --- learn/terrarium/index.html | 3 +- learn/terrarium/style.css | 110 +++++++++++++++++++++++++++++++++++++ 2 files changed, 112 insertions(+), 1 deletion(-) create mode 100644 learn/terrarium/style.css diff --git a/learn/terrarium/index.html b/learn/terrarium/index.html index b4f33611..cbe4e6d2 100644 --- a/learn/terrarium/index.html +++ b/learn/terrarium/index.html @@ -5,9 +5,10 @@ + -

My Terrarium

+

My Terrarium

diff --git a/learn/terrarium/style.css b/learn/terrarium/style.css new file mode 100644 index 00000000..85ff635c --- /dev/null +++ b/learn/terrarium/style.css @@ -0,0 +1,110 @@ +body { + font-family: helvetica, arial, sans-serif; +} + +h1 { + color: #3a241d; + text-align: center; +} + +#left-container { + background-color: #eee; + width: 15%; + left: 0px; + top: 0px; + position: absolute; + height: 100%; + padding: 10px; +} + +#right-container { + background-color: #eee; + width: 15%; + right: 0px; + top: 0px; + position: absolute; + height: 100%; + padding: 10px; +} + +.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; +} + +.jar-glossy-short { + height: 6%; + width: 3%; + background: #f0ffff; + border-radius: 1rem; + position: absolute; + bottom: 40%; + left: 10%; + opacity: 0.5; + z-index: 1; +} + +.jar-glossy-long { + height: 20%; + width: 3%; + background: #f0ffff; + border-radius: 1rem; + position: absolute; + bottom: 15%; + left: 10%; + opacity: 0.5; + z-index: 1; +} + +.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