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..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, and 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) @@ -8,9 +12,10 @@ 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. +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 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 ```
@@ -26,24 +31,19 @@ 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`. 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). -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). ![](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 @@ -56,20 +56,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;` +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 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. +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: @@ -133,4 +133,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 +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! 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..3f1a4d4 --- /dev/null +++ b/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/solution/solution.css @@ -0,0 +1,476 @@ +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; + } + + /*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: -1000; + background-color: #e2a150; + animation: boat 9s linear infinite; + transform: skew(60deg, -15deg); + } + /*left side*/ + .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); + } + /*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 side*/ + .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; + } + } + + .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 new file mode 100644 index 0000000..8898975 --- /dev/null +++ b/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/solution/solution.html @@ -0,0 +1,73 @@ + + + + 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..287c4fb --- /dev/null +++ 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 new file mode 100644 index 0000000..2e91b22 --- /dev/null +++ b/IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/starter/starter.html @@ -0,0 +1,54 @@ + + + + Mini City Webinar + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+ +
+ +
+ +
+
+ +
+
+
+
+
+
+ +
+ +