finish lesson 3 (CSS)

4 years ago · 129e630643
parent d4932d2e3b
commit 129e630643
2 changed files with 112 additions and 1 deletions
--- a/learn/terrarium/index.html
+++ b/learn/terrarium/index.html
@ -5,9 +5,10 @@
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
-    <h1>My Terrarium</h1>
+    <h1 style="color: red">My Terrarium</h1>
    <div id='page'>
      <div id="left-container" class="container">
        <div class="plant-holder">
--- a/learn/terrarium/style.css
+++ 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;
+}