From 2668e1dba5cf1d2fd224f8d98870d5fcabca7ec0 Mon Sep 17 00:00:00 2001 From: KathyLiu <60161967+KathyLiu@users.noreply.github.com> Date: Sun, 21 Jun 2020 10:00:42 -0700 Subject: [PATCH 1/8] code deliverables - starter code and solution code --- .../solution/solution.css | 144 ++++++++++++++++++ .../solution/solution.html | 28 ++++ .../starter/starter.css | 0 .../starter/starter.html | 10 ++ 4 files changed, 182 insertions(+) create mode 100644 IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/solution/solution.css create mode 100644 IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/solution/solution.html create mode 100644 IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/starter/starter.css create mode 100644 IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/starter/starter.html diff --git a/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/solution/solution.css b/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/solution/solution.css new file mode 100644 index 0000000..986f92e --- /dev/null +++ b/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/solution/solution.css @@ -0,0 +1,144 @@ +body { + position: fixed; + background-color: #d5f3fe; + top: 40%; + left: 50%; + margin-left: -100px; + margin-top: -50px; + } + + /*CAR*/ + .car { + position: absolute; + display: block; + width: 16px; + height: 5px; + top: 230px; + left: -80px; + box-shadow: -8px 5px 0 0 #333; + z-index: 1; + background-color: #c52735; + animation: car 9s linear infinite; + transform: skew(60deg, -15deg); + } + + /*front rectangle*/ + .car div:first-child { + position: absolute; + display: block; + background-color: #9b0404; + width: 16px; + height: 3px; + top: 5px; + right: 2.75px; + z-index: -998; + transform: skewX(-60deg); + } + + /*left rectangle*/ + .car div:nth-child(2) { + position: absolute; + display: block; + background-color: #9b0404; + width: 5px; + height: 5px; + top: 1.5px; + right: 16px; + z-index: -998; + transform: skewY(-30deg); + } + + /*car's animation*/ + @keyframes car { + 0% { + top: 240px; + left: -75px; + } + 39% { + top: 190px; + left: 100px; + } + 50% { + top: 170px; + left: 150px; + } + 65% { + top: 144px; + left: 240px; + } + 73% { + top: 145px; + left: 280px; + } + 100% { + top: 95px; + left: 450px; + } + } + + /*BOAT*/ + .boat { + /*boat rectangle and shadow*/ + position: absolute; + display: block; + width: 16px; + height: 15px; + top: 100px; + left: 100px; + box-shadow: -13px 5px 15px 15px #215199; + z-index: -998; + background-color: #e2a150; + animation: boat 15s linear infinite; + transform: skew(60deg, -15deg); + } + + /*left rectangle*/ + .boat div:first-child { + position: absolute; + display: block; + background-color: #996627; + width: 8px; + height: 6px; + top: 20px; + right: 12px; + z-index: -998; + transform: skew(-60deg, 55deg); + } + + /*front triangle part*/ + .boat div:nth-child(2) { + margin-top: 15px; + margin-left: 0px; + width: 0; + height: 0; + z-index: -998; + border-left: 8px solid transparent; + border-right: 8px solid transparent; + border-top: 12px solid #e2a150; + } + + /*front rectangle*/ + .boat div:nth-child(3) { + position: absolute; + display: block; + background-color: #996627; + width: 9px; + height: 15.5px; + top: 2.5px; + right: 16px; + z-index: -998; + transform: skewY(-30deg); + } + + /*boat's animation*/ + @keyframes boat { + 0% { + top: 60px; + left: 20px; + } + 100% { + top: 150px; + left: 220px; + } + } + \ No newline at end of file diff --git a/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/solution/solution.html b/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/solution/solution.html new file mode 100644 index 0000000..ef96906 --- /dev/null +++ b/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/solution/solution.html @@ -0,0 +1,28 @@ + + + + Mini City Webinar + + + + + + +
+
+ +
+ +
+ + +
+
+ +
+ +
+ +
+ + diff --git a/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/starter/starter.css b/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/starter/starter.css new file mode 100644 index 0000000..e69de29 diff --git a/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/starter/starter.html b/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/starter/starter.html new file mode 100644 index 0000000..d527403 --- /dev/null +++ b/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/starter/starter.html @@ -0,0 +1,10 @@ + + + + Mini City Webinar + + + + + + \ No newline at end of file From beacc64f4f18d4f42d52028639c71728709d256c Mon Sep 17 00:00:00 2001 From: KathyLiu <60161967+KathyLiu@users.noreply.github.com> Date: Sun, 21 Jun 2020 11:29:13 -0700 Subject: [PATCH 2/8] blog revision based on feedbacks - revised the blog according to feedback --- .../#Driving_the_car_and_flowing_the_water_with_CSS/blog.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/blog.md b/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/blog.md index bd0b6ec..c2e85de 100644 --- a/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/blog.md +++ b/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/blog.md @@ -10,7 +10,8 @@ In this blog, we are going to keep building our mini city. We will have a car go First, let's build our car and boat with HTML and CSS like we did for the ground and buildings previously. The car is a rectangle box and the boat is a rectangle box with a triangle in the front. Both of them has a shadow to help show the 3D effect. -So we need to have 2 divs for the car and the boat, and in each of them, we will have some children divs inside. +So we need to have 2 divs for the car and the boat, and in each of them, we will have some children divs inside. Children divs are divs inside a parent div. They are associated to their parent, and can be easily aligned with their parent div. The two children divs under the car are to hold the left and front side rectangles, and the three children divs under the boat are to hold the triangle in the front, and the left and front side rectangles. + ##### In HTML ```
From e7f4515c14f06b0259db0bb6b295f39e2dbe5e51 Mon Sep 17 00:00:00 2001 From: KathyLiu <60161967+KathyLiu@users.noreply.github.com> Date: Sun, 21 Jun 2020 13:57:20 -0700 Subject: [PATCH 3/8] update starter and solution code - starter and solution code including background and buildings. --- .../solution/solution.css | 358 +++++++++++++++++- .../solution/solution.html | 85 ++++- .../starter/starter.css | 348 +++++++++++++++++ .../starter/starter.html | 54 ++- 4 files changed, 807 insertions(+), 38 deletions(-) diff --git a/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/solution/solution.css b/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/solution/solution.css index 986f92e..3f1a4d4 100644 --- a/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/solution/solution.css +++ b/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/solution/solution.css @@ -7,6 +7,336 @@ body { margin-top: -50px; } + /*GROUND1*/ + .ground { + /*foundation*/ + position: absolute; + display: block; + /*purple*/ + background-color: #d3d3d3; + width: 200px; + height: 148px; + transform: skew(60deg, -15deg); + top: 100px; + left: -150px; + z-index: -999; + } + .ground .bottomSide { + position: absolute; + display: block; + width: 16px; + height: 148px; + background-color: #c0c0c0; + transform: skew(0deg, -30deg); + top: 4px; + left: -16px; + z-index: -1001; + } + .ground .bottomFront { + position: absolute; + display: block; + width: 210px; + height: 9.5px; + background-color: #c0c0c0; + transform: skew(-60deg, 0deg); + top: 147px; + left: -8px; + z-index: -1001; + } + .ground .building1 { + /*foundation*/ + position: absolute; + display: block; + background-color: #021c3b; + width: 120px; + height: 55px; + transform: rotateZ(150deg); + transform: rotateX(50deg); + bottom: 90px; + left: 55px; + z-index: -999; + } + .ground .building1 .wall1 { + position: absolute; + display: block; + background-color: #021c3b; + width: 260px; + height: 55px; + transform: skew(0, -42deg); + bottom: 117px; + left: 0px; + background: #555; + box-shadow: inset 0 0 0 3px #313131; + } + .ground .building2 .roof { + /*roof*/ + position: absolute; + display: block; + background-color: #ff8c00; + width: 90px; + height: 85px; + transform: rotateZ(150deg); + transform: rotateX(50deg); + top: -260px; + left: 180px; + z-index: -999; + } + .ground .building1 .wall2 { + position: absolute; + display: block; + background-color: #c0c0c0; + width: 120px; + height: 234px; + transform: skew(-48deg, 0); + bottom: 0px; + left: 129px; + background: #555; + z-index: -999; + box-shadow: inset 0 0 0 3px #313131; + } + .ground .building1 .roof { + position: absolute; + display: block; + background-color: #a9a9a9; + width: 120px; + height: 85px; + transform: rotateZ(150deg); + transform: rotateX(50deg); + bottom: 219px; + left: 260px; + z-index: -999; + } + .ground .building2 { + /*foundation*/ + position: absolute; + display: block; + background-color: #a9a9a9; + width: 90px; + height: 50px; + transform: rotateZ(150deg); + transform: rotateX(50deg); + bottom: 35px; + left: 40px; + z-index: -999; + } + .ground .building2 .wall3 { + /*wall3*/ + position: absolute; + display: block; + background-color: #cb7a4d; + width: 180px; + height: 50px; + transform: skew(0, -42deg); + bottom: 81px; + left: 0px; + box-shadow: inset 0 0 0 3px #313131; + } + .ground .building2 .wall4 { + /*wall4*/ + position: absolute; + display: block; + background-color: #cb7a4d; + width: 90px; + height: 162px; + transform: skew(-48deg, 0); + bottom: 0px; + left: 90px; + box-shadow: inset 0 0 0 3px #313131; + } + .ground .building2 .roof2 { + /*roof2*/ + position: absolute; + display: block; + background-color: #ff8c00; + width: 90px; + height: 77px; + transform: rotateZ(150deg); + transform: rotateX(50deg); + bottom: 148px; + left: 180px; + z-index: -999; + } + /*GROUND2*/ + .ground2 { + position: absolute; + background-color: #e0e0eb; + width: 200px; + height: 150px; + transform: skew(60deg, -15deg); + top: 5.5px; + left: 200px; + z-index: -1000; + } + .ground2 .bottomFront { + position: absolute; + display: block; + width: 202px; + height: 9.5px; + background-color: #c0c0c0; + transform: skew(-60deg, 0deg); + top: 149px; + left: -10px; + z-index: -1001; + } + .ground2 .grassArea { + position: absolute; + display: block; + background-color: #83a75f; + width: 200px; + height: 70px; + bottom: 80px; + right: 0px; + z-index: -1000; + } + .ground2 .grassArea .circleTops { + position: absolute; + display: block; + background-color: #426b43; + width: 50px; + height: 50px; + transform: skew(-60deg, 15deg); + border-radius: 50%; + top: -20; + left: 10; + z-index: -990; + } + .ground .road1 { + position: absolute; + display: block; + background-color: #c0c0c0; + width: 20px; + height: 200px; + transform: rotateZ(90deg); + top: 18px; + left: 90px; + z-index: -998; + } + .ground .road2 { + position: absolute; + display: block; + background-color: #c0c0c0; + width: 20px; + height: 200px; + transform: rotateZ(90deg); + top: 18px; + left: 440px; + z-index: -997; + } + .ground2 .grassArea .treeTrunks { + /*treeTrunks*/ + position: absolute; + display: block; + background-color: #462512; + width: 6px; + height: 25px; + transform: skew(-60deg, 15deg); + border-radius: 4px; + + /*orginal, middle middle*/ + top: 10px; + left: 130px; + box-shadow: -20px -20px 0 0 #462512, /*middleBottom*/ 20px 20px 0 0 #462512, + /*middleTop*/ -10px 30px 0 0 #462512, /*leftBottom*/ -70px -5px 0 0 #462512, + /*leftTop*/ -40px 15px 0 0 #462512, /*leftMiddle*/ 50px 10px 0 0 #462512, + /*rightBottom*/ 10px -30px 0 0 #462512, /*rightTop*/ 30px -10px 0 0 #462512; /*rightMiddle*/ + + z-index: -990; + } + .ground2 .grassArea .circleTops { + position: absolute; + display: block; + background-color: #3d5239; + width: 40px; + height: 40px; + transform: skew(-60deg, 15deg); + border-radius: 50%; + + /*orginal, middle middle*/ + top: -20px; + left: 153px; + box-shadow: -70px -5px 0 0 #36692c, /*leftTop*/ 50px 10px 0 0 #93cc89, + /*rightBottom*/ 10px -30px 0 0 #36692c; /*rightTop*/ + + z-index: -980; + } + .ground2 .grassArea .triangleTops { + position: absolute; + display: block; + + width: 0; + height: 0; + border-left: 20px solid transparent; + border-right: 15px solid transparent; + border-bottom: 50px solid #c3e3bc; + border-radius: 12px; + transform: skew(-60deg, 15deg); + /*original, leftBottom*/ + top: 0px; + left: 95px; + + box-shadow: -30px -20px #2a591f, /*leftMiddle*/ 30px -10px #5f8257, + /*middleBottom*/ -10px -50px 0 0 #467a38; /*middleTop*/ + /*30px -10px 0 0 #40573a; rightMiddle*/ + z-index: -970; + } + /*OCEAN*/ + .ocean { + /*foundation*/ + position: absolute; + display: block; + background-color: #1e90ff; + width: 168px; + height: 158px; + transform: skew(60deg, -15deg); + top: 53.5px; + left: 45px; + z-index: -1000; + } + .bridge { + position: absolute; + display: block; + background-color: #a0522d; + width: 100px; + height: 23px; + transform: skew(60deg, -15deg); + top: 150px; + left: 155px; + z-index: -995; + box-shadow: inset 0 0 0 3px #313131; + } + .ramp1 { + position: absolute; + display: block; + background-color: #a0522d; + width: 30px; + height: 24px; + transform: skew(60deg, 10deg); + top: 139px; + left: 250px; + z-index: -990; + } + .ramp2 { + position: absolute; + display: block; + background-color: #a0522d; + width: 35px; + height: 22px; + transform: skew(60deg, -30deg); + top: 171px; + left: 126px; + z-index: -990; + } + .waterfall { + position: absolute; + border-left: 55px solid transparent; + border-right: 96px solid transparent; + border-top: 880px solid #1e90ff; + transform: skew(0deg, -14deg); + top: 200px; + left: 177px; + z-index: -990; + } + /*CAR*/ .car { position: absolute; @@ -21,7 +351,6 @@ body { animation: car 9s linear infinite; transform: skew(60deg, -15deg); } - /*front rectangle*/ .car div:first-child { position: absolute; @@ -34,7 +363,6 @@ body { z-index: -998; transform: skewX(-60deg); } - /*left rectangle*/ .car div:nth-child(2) { position: absolute; @@ -47,7 +375,6 @@ body { z-index: -998; transform: skewY(-30deg); } - /*car's animation*/ @keyframes car { 0% { @@ -75,7 +402,6 @@ body { left: 450px; } } - /*BOAT*/ .boat { /*boat rectangle and shadow*/ @@ -86,13 +412,12 @@ body { top: 100px; left: 100px; box-shadow: -13px 5px 15px 15px #215199; - z-index: -998; + z-index: -1000; background-color: #e2a150; - animation: boat 15s linear infinite; + animation: boat 9s linear infinite; transform: skew(60deg, -15deg); } - - /*left rectangle*/ + /*left side*/ .boat div:first-child { position: absolute; display: block; @@ -104,8 +429,7 @@ body { z-index: -998; transform: skew(-60deg, 55deg); } - - /*front triangle part*/ + /*triangle part*/ .boat div:nth-child(2) { margin-top: 15px; margin-left: 0px; @@ -116,8 +440,7 @@ body { border-right: 8px solid transparent; border-top: 12px solid #e2a150; } - - /*front rectangle*/ + /*front side*/ .boat div:nth-child(3) { position: absolute; display: block; @@ -129,7 +452,6 @@ body { z-index: -998; transform: skewY(-30deg); } - /*boat's animation*/ @keyframes boat { 0% { @@ -141,4 +463,14 @@ body { left: 220px; } } + + .sun { + position: absolute; + left: 350px; + bottom: 75px; + background: radial-gradient(#fff89e, #ffde45); + width: 115px; + height: 115px; + border-radius: 50%; + } \ No newline at end of file diff --git a/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/solution/solution.html b/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/solution/solution.html index ef96906..8898975 100644 --- a/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/solution/solution.html +++ b/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/solution/solution.html @@ -5,24 +5,69 @@ - - - -
-
- -
- -
- - -
-
- -
- -
- -
- + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+ +
+ +
+ +
+
+ +
+
+
+
+
+
+ + +
+
+ +
+ +
+ + +
+
+ +
+ +
+ +
+ +
+ diff --git a/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/starter/starter.css b/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/starter/starter.css index e69de29..287c4fb 100644 --- a/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/starter/starter.css +++ b/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/starter/starter.css @@ -0,0 +1,348 @@ +body { + position: fixed; + background-color: #d5f3fe; + top: 40%; + left: 50%; + margin-left: -100px; + margin-top: -50px; + } + + /*GROUND1*/ + .ground { + /*foundation*/ + position: absolute; + display: block; + /*purple*/ + background-color: #d3d3d3; + width: 200px; + height: 148px; + transform: skew(60deg, -15deg); + top: 100px; + left: -150px; + z-index: -999; + } + .ground .bottomSide { + position: absolute; + display: block; + width: 16px; + height: 148px; + background-color: #c0c0c0; + transform: skew(0deg, -30deg); + top: 4px; + left: -16px; + z-index: -1001; + } + .ground .bottomFront { + position: absolute; + display: block; + width: 210px; + height: 9.5px; + background-color: #c0c0c0; + transform: skew(-60deg, 0deg); + top: 147px; + left: -8px; + z-index: -1001; + } + .ground .building1 { + /*foundation*/ + position: absolute; + display: block; + background-color: #021c3b; + width: 120px; + height: 55px; + transform: rotateZ(150deg); + transform: rotateX(50deg); + bottom: 90px; + left: 55px; + z-index: -999; + } + .ground .building1 .wall1 { + position: absolute; + display: block; + background-color: #021c3b; + width: 260px; + height: 55px; + transform: skew(0, -42deg); + bottom: 117px; + left: 0px; + background: #555; + box-shadow: inset 0 0 0 3px #313131; + } + .ground .building2 .roof { + /*roof*/ + position: absolute; + display: block; + background-color: #ff8c00; + width: 90px; + height: 85px; + transform: rotateZ(150deg); + transform: rotateX(50deg); + top: -260px; + left: 180px; + z-index: -999; + } + .ground .building1 .wall2 { + position: absolute; + display: block; + background-color: #c0c0c0; + width: 120px; + height: 234px; + transform: skew(-48deg, 0); + bottom: 0px; + left: 129px; + background: #555; + z-index: -999; + box-shadow: inset 0 0 0 3px #313131; + } + .ground .building1 .roof { + position: absolute; + display: block; + background-color: #a9a9a9; + width: 120px; + height: 85px; + transform: rotateZ(150deg); + transform: rotateX(50deg); + bottom: 219px; + left: 260px; + z-index: -999; + } + .ground .building2 { + /*foundation*/ + position: absolute; + display: block; + background-color: #a9a9a9; + width: 90px; + height: 50px; + transform: rotateZ(150deg); + transform: rotateX(50deg); + bottom: 35px; + left: 40px; + z-index: -999; + } + .ground .building2 .wall3 { + /*wall3*/ + position: absolute; + display: block; + background-color: #cb7a4d; + width: 180px; + height: 50px; + transform: skew(0, -42deg); + bottom: 81px; + left: 0px; + box-shadow: inset 0 0 0 3px #313131; + } + .ground .building2 .wall4 { + /*wall4*/ + position: absolute; + display: block; + background-color: #cb7a4d; + width: 90px; + height: 162px; + transform: skew(-48deg, 0); + bottom: 0px; + left: 90px; + box-shadow: inset 0 0 0 3px #313131; + } + .ground .building2 .roof2 { + /*roof2*/ + position: absolute; + display: block; + background-color: #ff8c00; + width: 90px; + height: 77px; + transform: rotateZ(150deg); + transform: rotateX(50deg); + bottom: 148px; + left: 180px; + z-index: -999; + } + /*GROUND2*/ + .ground2 { + position: absolute; + background-color: #e0e0eb; + width: 200px; + height: 150px; + transform: skew(60deg, -15deg); + top: 5.5px; + left: 200px; + z-index: -1000; + } + .ground2 .bottomFront { + position: absolute; + display: block; + width: 202px; + height: 9.5px; + background-color: #c0c0c0; + transform: skew(-60deg, 0deg); + top: 149px; + left: -10px; + z-index: -1001; + } + .ground2 .grassArea { + position: absolute; + display: block; + background-color: #83a75f; + width: 200px; + height: 70px; + bottom: 80px; + right: 0px; + z-index: -1000; + } + .ground2 .grassArea .circleTops { + position: absolute; + display: block; + background-color: #426b43; + width: 50px; + height: 50px; + transform: skew(-60deg, 15deg); + border-radius: 50%; + top: -20; + left: 10; + z-index: -990; + } + .ground .road1 { + position: absolute; + display: block; + background-color: #c0c0c0; + width: 20px; + height: 200px; + transform: rotateZ(90deg); + top: 18px; + left: 90px; + z-index: -998; + } + .ground .road2 { + position: absolute; + display: block; + background-color: #c0c0c0; + width: 20px; + height: 200px; + transform: rotateZ(90deg); + top: 18px; + left: 440px; + z-index: -997; + } + .ground2 .grassArea .treeTrunks { + /*treeTrunks*/ + position: absolute; + display: block; + background-color: #462512; + width: 6px; + height: 25px; + transform: skew(-60deg, 15deg); + border-radius: 4px; + + /*orginal, middle middle*/ + top: 10px; + left: 130px; + box-shadow: -20px -20px 0 0 #462512, /*middleBottom*/ 20px 20px 0 0 #462512, + /*middleTop*/ -10px 30px 0 0 #462512, /*leftBottom*/ -70px -5px 0 0 #462512, + /*leftTop*/ -40px 15px 0 0 #462512, /*leftMiddle*/ 50px 10px 0 0 #462512, + /*rightBottom*/ 10px -30px 0 0 #462512, /*rightTop*/ 30px -10px 0 0 #462512; /*rightMiddle*/ + + z-index: -990; + } + .ground2 .grassArea .circleTops { + position: absolute; + display: block; + background-color: #3d5239; + width: 40px; + height: 40px; + transform: skew(-60deg, 15deg); + border-radius: 50%; + + /*orginal, middle middle*/ + top: -20px; + left: 153px; + box-shadow: -70px -5px 0 0 #36692c, /*leftTop*/ 50px 10px 0 0 #93cc89, + /*rightBottom*/ 10px -30px 0 0 #36692c; /*rightTop*/ + + z-index: -980; + } + .ground2 .grassArea .triangleTops { + position: absolute; + display: block; + + width: 0; + height: 0; + border-left: 20px solid transparent; + border-right: 15px solid transparent; + border-bottom: 50px solid #c3e3bc; + border-radius: 12px; + transform: skew(-60deg, 15deg); + /*original, leftBottom*/ + top: 0px; + left: 95px; + + box-shadow: -30px -20px #2a591f, /*leftMiddle*/ 30px -10px #5f8257, + /*middleBottom*/ -10px -50px 0 0 #467a38; /*middleTop*/ + /*30px -10px 0 0 #40573a; rightMiddle*/ + z-index: -970; + } + /*OCEAN*/ + .ocean { + /*foundation*/ + position: absolute; + display: block; + background-color: #1e90ff; + width: 168px; + height: 158px; + transform: skew(60deg, -15deg); + top: 53.5px; + left: 45px; + z-index: -1000; + } + .bridge { + position: absolute; + display: block; + background-color: #a0522d; + width: 100px; + height: 23px; + transform: skew(60deg, -15deg); + top: 150px; + left: 155px; + z-index: -995; + box-shadow: inset 0 0 0 3px #313131; + } + .ramp1 { + position: absolute; + display: block; + background-color: #a0522d; + width: 30px; + height: 24px; + transform: skew(60deg, 10deg); + top: 139px; + left: 250px; + z-index: -990; + } + .ramp2 { + position: absolute; + display: block; + background-color: #a0522d; + width: 35px; + height: 22px; + transform: skew(60deg, -30deg); + top: 171px; + left: 126px; + z-index: -990; + } + .waterfall { + position: absolute; + border-left: 55px solid transparent; + border-right: 96px solid transparent; + border-top: 880px solid #1e90ff; + transform: skew(0deg, -14deg); + top: 200px; + left: 177px; + z-index: -990; + } + .sun { + position: absolute; + left: 350px; + bottom: 75px; + background: radial-gradient(#fff89e, #ffde45); + width: 115px; + height: 115px; + border-radius: 50%; + } + \ No newline at end of file diff --git a/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/starter/starter.html b/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/starter/starter.html index d527403..2e91b22 100644 --- a/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/starter/starter.html +++ b/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/starter/starter.html @@ -1,10 +1,54 @@ - - Mini City Webinar - + + Mini City Webinar + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- +
+
+
+
+
+
+
+ +
+ +
+ +
+
+ +
+
+
+
+
+
+ +
- \ No newline at end of file + From 42e8d0e8df6bbc3a8cceee97a59202576c0a1780 Mon Sep 17 00:00:00 2001 From: Allena A <65791720+allenaavila@users.noreply.github.com> Date: Tue, 7 Jul 2020 18:22:44 -0700 Subject: [PATCH 4/8] Update blog.md --- .../blog.md | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/blog.md b/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/blog.md index c2e85de..c89f771 100644 --- a/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/blog.md +++ b/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/blog.md @@ -1,6 +1,6 @@ # Introduction to Web Animations using CSS -In this blog, we are going to keep building our mini city. We will have a car going along the road and the bridge, and a boat going under the bridge. +In this blog, we are going to keep building our mini city. We will have a car going along the road and the bridge as well as a boat going under the bridge. ![](https://i.imgur.com/9FFPgkl.gif) @@ -8,9 +8,9 @@ In this blog, we are going to keep building our mini city. We will have a car go ## Build the car and the boat -First, let's build our car and boat with HTML and CSS like we did for the ground and buildings previously. -The car is a rectangle box and the boat is a rectangle box with a triangle in the front. Both of them has a shadow to help show the 3D effect. -So we need to have 2 divs for the car and the boat, and in each of them, we will have some children divs inside. Children divs are divs inside a parent div. They are associated to their parent, and can be easily aligned with their parent div. The two children divs under the car are to hold the left and front side rectangles, and the three children divs under the boat are to hold the triangle in the front, and the left and front side rectangles. +First, let's build our car and boat with HTML and CSS, just like we did for the ground and buildings before. +The car is a rectangle box, and the boat is a rectangle box with a triangle in the front. Both of them have a shadow to help show the 3D-effect. +So we need to have two divs for the car and the boat, and inside each of them, we will have some children divs. Children divs are divs inside a parent div. They are associated to their parent, and they can be easily aligned with their parent div. The two children divs under the car are to hold the left and front side rectangles while the three children divs under the boat are to hold the triangle in the front and the left and front side rectangles. ##### In HTML ``` @@ -27,12 +27,12 @@ So we need to have 2 divs for the car and the boat, and in each of them, we will ``` ##### In CSS -Now in CSS, try to build the car and the boat on your own following the similar methods we did for the buildings. -We could build the rectangle body under `.car`. Remeber that the codes under `.car{/*codes*/}` will be applied to the entire class named `car`. Use `box-shadow: /*styles*/` [(refer to box-shadow syntax)](https://www.w3schools.com/cssref/css3_pr_box-shadow.asp) to create the shadow under the car and the boat. +Now in CSS, try to build the car and the boat on your own by following the similar methods we used for the buildings. +We could build the rectangle body under `.car`. Remeber that the codes under `.car{/*codes*/}` will be applied to the entire class named `car`. Use `box-shadow: /*styles*/` [(refer to box-shadow syntax)](https://www.w3schools.com/cssref/css3_pr_box-shadow.asp) to create the shadow both under the car and the boat. ![](https://i.imgur.com/HRqlOB3.png) ![](https://i.imgur.com/iHeoG1y.png) -After that, we could work on the child divs. We can refer to the first child and the second child of the car by using `.car div:first-child` and `.car div:nth-child(2)`. They are the two parallelograms on the sides, and the additional triangle for the boat. The parallelogram are skewed from rectangles using `transform: skew(/*styles*/)` [(refer to skew() method)](https://www.w3schools.com/css/css3_2dtransforms.asp). +After that, we could work on the child divs. We can refer to the first child and the second child of the car by using `.car div:first-child` and `.car div:nth-child(2)`. These divs are the two parallelograms on the sides and the additional triangle for the boat. The parallelograms are skewed from rectangles using `transform: skew(/*styles*/)` [(refer to skew() method)](https://www.w3schools.com/css/css3_2dtransforms.asp). ![](https://i.imgur.com/u8mhDsM.png)![](https://i.imgur.com/3Uu1ORO.png) @@ -44,7 +44,7 @@ Since the boat is not a rectangular-shaped box, we could not* ## Movements with CSS -Now that we have built our car and boat, we want them to move along the road and the ocean. We will do this by simply using CSS. +Now that we have built our car and boat, we want them to move along the road and the ocean. We will do this by simply using CSS! CSS is a style sheet with many strong features, and we will be using CSS `animation` and `@keyframes` to create our customized movements. ### CSS Animation @@ -57,20 +57,20 @@ animation-delay animation-iteration-count animation-direction ``` -we could set these properties of the objects (e.g. the car and the boat) to make them move. The `animation` will gradually change the object from one set of styles to another indicated by the codes associated with the `animation-name`. And the animation will last for the time `animation-duration` is set to. We will use `@keyframes` to create our customized animation. +We could set these properties of the objects (e.g. the car and the boat) to make them move. The `animation` will gradually change the object from one set of styles to another, as indicated by the codes associated with the `animation-name`. This animation will last for the amount of time that you set `animation-duration` to. Also, we will use `@keyframes` to create our customized animation. The above 6 properties can also be written shortened in 1 line in that order. For example, `animation: example 5s linear 2s infinite alternate;` Therefore, for the boat, we will have -`animation: boat 15s linear infinite;` in the `.boat` , which means the boat will change from one style to another as `@keyframes boat` shows in 15 seconds, and repeat infinite times. +`animation: boat 15s linear infinite;` in the `.boat` , which means the boat will change from one style to another as `@keyframes boat` shows in 15 seconds, and then it will repeat infinite times. Similarly, the car will have `animation: car 9s linear infinite;` to change the car as `@keyframes car` shows in 9 seconds and repeat. ### @keyframes -`@keyframes` will set the specific styles throughout the whole animation process. The whole process is indicated by `100%`, so we could set different styles at different stages to create the animation. The `0% {/*starting style*/}` shows the starting stage, where we want our boat to start at position `top: 60px; left: 20px;`. Then, we can set the ending position using `100% {/*ending style*/}`, where we are just moving it to position `top: 150px; left: 220px;`. +`@keyframes` will set the specific styles throughout the whole animation process. The whole process is indicated by `100%`, so we could set different styles at different stages to create the animation. The `0% {/*starting style*/}` shows the starting stage, where we want our boat to start at position `top: 60px; left: 20px;`. Then, we can set the ending position using `100% {/*ending style*/}`, where we are moving it to this position `top: 150px; left: 220px;`. -Similar for the car, but we want the car to go onto the bridge, so we break its route into 5 parts. +This is similar for the car, but we want the car to go onto the bridge; so, we break its route into 5 parts. ![](https://i.imgur.com/3EtTnGI.gif) 1. go straight along the road: @@ -134,4 +134,4 @@ Similar for the car, but we want the car to go onto the bridge, so we break its ``` ## Conclusion -Animation is one of the important features of CSS. CSS has many strong and interesting features, and we can discover more of them in the future. \ No newline at end of file +Animation is one of the important features of CSS. CSS has many strong and interesting features, and we will discover more of them in the future. From c1e6b3fd548dbacd7623cd7bee85055d223464f0 Mon Sep 17 00:00:00 2001 From: Allena A <65791720+allenaavila@users.noreply.github.com> Date: Tue, 7 Jul 2020 18:26:51 -0700 Subject: [PATCH 5/8] Update blog.md --- .../#Driving_the_car_and_flowing_the_water_with_CSS/blog.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/blog.md b/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/blog.md index c89f771..64a4a27 100644 --- a/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/blog.md +++ b/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/blog.md @@ -10,7 +10,7 @@ In this blog, we are going to keep building our mini city. We will have a car go First, let's build our car and boat with HTML and CSS, just like we did for the ground and buildings before. The car is a rectangle box, and the boat is a rectangle box with a triangle in the front. Both of them have a shadow to help show the 3D-effect. -So we need to have two divs for the car and the boat, and inside each of them, we will have some children divs. Children divs are divs inside a parent div. They are associated to their parent, and they can be easily aligned with their parent div. The two children divs under the car are to hold the left and front side rectangles while the three children divs under the boat are to hold the triangle in the front and the left and front side rectangles. +So we need to have two divs for the car and the boat, and inside each of them, we will have some children divs. Children divs are divs inside a parent div. They are associated to their parent and can be easily aligned with their parent div. The two children divs under the car are to hold the left and front side rectangles while the three children divs under the boat are to hold the triangle in the front and the left and front side rectangles. ##### In HTML ``` From f0357b16c8f706fe2e3c94b4d0e7752d9300e632 Mon Sep 17 00:00:00 2001 From: Allena A <65791720+allenaavila@users.noreply.github.com> Date: Tue, 7 Jul 2020 18:34:59 -0700 Subject: [PATCH 6/8] Update blog.md --- .../#Driving_the_car_and_flowing_the_water_with_CSS/blog.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/blog.md b/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/blog.md index 64a4a27..e4a7145 100644 --- a/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/blog.md +++ b/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/blog.md @@ -59,7 +59,7 @@ animation-direction ``` We could set these properties of the objects (e.g. the car and the boat) to make them move. The `animation` will gradually change the object from one set of styles to another, as indicated by the codes associated with the `animation-name`. This animation will last for the amount of time that you set `animation-duration` to. Also, we will use `@keyframes` to create our customized animation. -The above 6 properties can also be written shortened in 1 line in that order. For example, `animation: example 5s linear 2s infinite alternate;` +The above six properties can also be written shortened in one line in that order. For example, `animation: example 5s linear 2s infinite alternate;` Therefore, for the boat, we will have `animation: boat 15s linear infinite;` in the `.boat` , which means the boat will change from one style to another as `@keyframes boat` shows in 15 seconds, and then it will repeat infinite times. @@ -70,7 +70,7 @@ Similarly, the car will have `animation: car 9s linear infinite;` to change the -This is similar for the car, but we want the car to go onto the bridge; so, we break its route into 5 parts. +This is similar to what we did for the boat, but we want the car to go onto the bridge; so, we break its route into five parts. ![](https://i.imgur.com/3EtTnGI.gif) 1. go straight along the road: From d55e965d2e9557e890b3d485c2dc7384f6da8c27 Mon Sep 17 00:00:00 2001 From: Allena A <65791720+allenaavila@users.noreply.github.com> Date: Tue, 7 Jul 2020 18:44:09 -0700 Subject: [PATCH 7/8] Update blog.md --- .../#Driving_the_car_and_flowing_the_water_with_CSS/blog.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/blog.md b/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/blog.md index e4a7145..1e8812e 100644 --- a/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/blog.md +++ b/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/blog.md @@ -57,7 +57,7 @@ animation-delay animation-iteration-count animation-direction ``` -We could set these properties of the objects (e.g. the car and the boat) to make them move. The `animation` will gradually change the object from one set of styles to another, as indicated by the codes associated with the `animation-name`. This animation will last for the amount of time that you set `animation-duration` to. Also, we will use `@keyframes` to create our customized animation. +To make the car and the boat move, we can set the properties of these objects. The `animation` will gradually change the object from one set of styles to another, as indicated by the codes associated with the `animation-name`. This animation will last for the amount of time that you set `animation-duration` to. Also, we will use `@keyframes` to create our customized animation. The above six properties can also be written shortened in one line in that order. For example, `animation: example 5s linear 2s infinite alternate;` From 20467e133c80be18f139e5ff4cfb8490a0fc3063 Mon Sep 17 00:00:00 2001 From: KathyLiu <60161967+KathyLiu@users.noreply.github.com> Date: Thu, 6 Aug 2020 14:23:50 -0700 Subject: [PATCH 8/8] update blog based on editor's feedback --- .../blog.md | 25 +++++++++---------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/blog.md b/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/blog.md index 1e8812e..4f0039a 100644 --- a/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/blog.md +++ b/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/blog.md @@ -1,6 +1,10 @@ # Introduction to Web Animations using CSS -In this blog, we are going to keep building our mini city. We will have a car going along the road and the bridge as well as a boat going under the bridge. +Animation is an important element of an interactive web page. CSS allows us to create simple movements of HTML objects by using the animation properties. Let us take a look at these properties, and use them to elaborate on our miniature city. + +Before we start, I hope you have already built the background of the miniature city by following the previous tutorials in this series, please check out the other bit project blogs! Or you can also check out our YouTube tutorial and get started! + +In this tutorial, We will focus on building a car going along the road and the bridge as well as a boat going under the bridge. ![](https://i.imgur.com/9FFPgkl.gif) @@ -9,7 +13,7 @@ In this blog, we are going to keep building our mini city. We will have a car go ## Build the car and the boat First, let's build our car and boat with HTML and CSS, just like we did for the ground and buildings before. -The car is a rectangle box, and the boat is a rectangle box with a triangle in the front. Both of them have a shadow to help show the 3D-effect. +The car is a rectangle box, and the boat is a rectangle box with a triangle in the front. Both of them have a shadow to help show the three-D effect. So we need to have two divs for the car and the boat, and inside each of them, we will have some children divs. Children divs are divs inside a parent div. They are associated to their parent and can be easily aligned with their parent div. The two children divs under the car are to hold the left and front side rectangles while the three children divs under the boat are to hold the triangle in the front and the left and front side rectangles. ##### In HTML @@ -28,23 +32,18 @@ So we need to have two divs for the car and the boat, and inside each of them, w ##### In CSS Now in CSS, try to build the car and the boat on your own by following the similar methods we used for the buildings. -We could build the rectangle body under `.car`. Remeber that the codes under `.car{/*codes*/}` will be applied to the entire class named `car`. Use `box-shadow: /*styles*/` [(refer to box-shadow syntax)](https://www.w3schools.com/cssref/css3_pr_box-shadow.asp) to create the shadow both under the car and the boat. +We could build the rectangle body under `.car`. Remember that the codes under `.car{/*codes*/}` will be applied to the entire class named `car`. Use `box-shadow: /*styles*/` [(refer to box-shadow syntax)](https://www.w3schools.com/cssref/css3_pr_box-shadow.asp) to create the shadow both under the car and the boat. ![](https://i.imgur.com/HRqlOB3.png) ![](https://i.imgur.com/iHeoG1y.png) - After that, we could work on the child divs. We can refer to the first child and the second child of the car by using `.car div:first-child` and `.car div:nth-child(2)`. These divs are the two parallelograms on the sides and the additional triangle for the boat. The parallelograms are skewed from rectangles using `transform: skew(/*styles*/)` [(refer to skew() method)](https://www.w3schools.com/css/css3_2dtransforms.asp). -![](https://i.imgur.com/u8mhDsM.png)![](https://i.imgur.com/3Uu1ORO.png) +![](https://i.imgur.com/u8mhDsM.png)![](https://i.imgur.com/3Uu1ORO.png) -*if we did not talk about box-shadow before -Box-shadow for the boat -Since the boat is not a rectangular-shaped box, we could not* -(full css code here? or direct to the final code deliverables) ## Movements with CSS -Now that we have built our car and boat, we want them to move along the road and the ocean. We will do this by simply using CSS! +Now that we have built our car and boat, we want them to move along the road and the ocean. We will do this by using CSS properties! CSS is a style sheet with many strong features, and we will be using CSS `animation` and `@keyframes` to create our customized movements. ### CSS Animation @@ -57,7 +56,7 @@ animation-delay animation-iteration-count animation-direction ``` -To make the car and the boat move, we can set the properties of these objects. The `animation` will gradually change the object from one set of styles to another, as indicated by the codes associated with the `animation-name`. This animation will last for the amount of time that you set `animation-duration` to. Also, we will use `@keyframes` to create our customized animation. +We could set these properties of the objects (e.g. the car and the boat) to make them move. The `animation` will gradually change the object from one set of styles to another, as indicated by the codes associated with the `animation-name`. This animation will last for the amount of time that you set `animation-duration` to. Also, we will use `@keyframes` to create our customized animation. The above six properties can also be written shortened in one line in that order. For example, `animation: example 5s linear 2s infinite alternate;` @@ -70,7 +69,7 @@ Similarly, the car will have `animation: car 9s linear infinite;` to change the -This is similar to what we did for the boat, but we want the car to go onto the bridge; so, we break its route into five parts. +Now, we will start to move the car. This is similar to what we did for the boat, but we want the car to go onto the bridge; so, we break its route into five parts. ![](https://i.imgur.com/3EtTnGI.gif) 1. go straight along the road: @@ -134,4 +133,4 @@ This is similar to what we did for the boat, but we want the car to go onto the ``` ## Conclusion -Animation is one of the important features of CSS. CSS has many strong and interesting features, and we will discover more of them in the future. +By moving the car and the boat, we learned how to use the animation properties in CSS. These properties can help create many interactive and interesting elements in our web pages. There are more CSS properties that you can explore on your own in the future. Moving on, please check out the next tutorial blog about using JavaScript to create a button to change from daytime to night time in our miniature city and get introduced to another interesting and useful tool in web development -- JavaScript!