Skip to content

Introduction_to_Web_Animations_using_CSS_Code_Deliverable #237

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
KathyLiu20 wants to merge 8 commits into
base: Driving-the-car-and-flowing-the-water-with-CSS
Choose a base branch
from
Open

Introduction_to_Web_Animations_using_CSS_Code_Deliverable #237

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
2668e1d
code deliverables
KathyLiu20 Jun 21, 2020
beacc64
blog revision based on feedbacks
KathyLiu20 Jun 21, 2020
e7f4515
update starter and solution code
KathyLiu20 Jun 21, 2020
42e8d0e
Update blog.md
allenaavila Jul 8, 2020
c1e6b3f
Update blog.md
allenaavila Jul 8, 2020
f0357b1
Update blog.md
allenaavila Jul 8, 2020
d55e965
Update blog.md
allenaavila Jul 8, 2020
20467e1
update blog based on editor's feedback
KathyLiu20 Aug 6, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/blog.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

@allenaavila allenaavila Jul 8, 2020

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For numbers under 10 in the text part of your blog post, spell them out

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.

@atuljayaram atuljayaram Jun 21, 2020

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice!

##### In HTML
```
<div class = "car">
Expand Down
144 changes: 144 additions & 0 deletions IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/solution/solution.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}

28 changes: 28 additions & 0 deletions IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/solution/solution.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>Mini City Webinar</title>
<link rel="stylesheet" href="solution.css" />
</head>

<!--HTML-->
<body>
<!--car-->
<div class="car">
<div></div>
<!--front side-->
<div></div>
<!--left side-->
</div>

<!--boat-->
<div class="boat">
<div></div>
<!--left side-->
<div></div>
<!--triangle-->
<div></div>
<!--front side-->
</div>
</body>
</html>
Empty file added IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/starter/starter.css
View file
Open in desktop
Empty file.
10 changes: 10 additions & 0 deletions IMC_WebDev/#Driving_the_car_and_flowing_the_water_with_CSS/starter/starter.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<title>Mini City Webinar</title>
</head>

<body>

</body>
</html>