Permalink
Showing
with
22 additions
and
5 deletions.
-
+19
−2
css/midterm.css
-
+3
−3
midterm.html
|
@@ -111,22 +111,39 @@ body { |
|
|
|
|
|
header { |
|
|
background-color: white; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
justify-content: space-around; |
|
|
} |
|
|
|
|
|
ul, ol { |
|
|
text-align: left; |
|
|
margin-left: 100px; |
|
|
} |
|
|
|
|
|
.copy { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
justify-content: space-around; |
|
|
} |
|
|
|
|
|
.particle-wrapper { |
|
|
position: relative; |
|
|
height: 400px; |
|
|
display: grid; |
|
|
grid-template-columns: 1fr; |
|
|
grid-template-rows: 1fr auto 1fr; |
|
|
} |
|
|
|
|
|
.particle-wrapper p { |
|
|
grid-row: 2/3; |
|
|
grid-column: 1/2; |
|
|
} |
|
|
|
|
|
.particle-container { |
|
|
overflow: hidden; |
|
|
height: 100%; |
|
|
position: absolute; |
|
|
grid-row: 1/4; |
|
|
grid-column: 1/2; |
|
|
} |
|
|
|
|
|
.particle-temp { |
|
|
|
@@ -48,7 +48,7 @@ <h1>Particle Animation</h1> |
|
|
<p>Or you can make your particles show-stopping!</p> |
|
|
</div> |
|
|
|
|
|
<div id="info1"> |
|
|
<div class="copy" id="info1"> |
|
|
<p>Particles are the key to all of the realistic animation effects below. |
|
|
Check them out!</p> |
|
|
<ul> |
|
@@ -78,7 +78,7 @@ <h1>Particle Animation</h1> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="info2"> |
|
|
<div class="copy" id="info2"> |
|
|
<p>Say you’re already familiar with the animation properties of CSS. |
|
|
What makes particle animation any different?</p> |
|
|
<p>The defining characteristics of a particle animation are: </p> |
|
@@ -95,7 +95,7 @@ <h1>Particle Animation</h1> |
|
|
<p>We'll look at some ways to get past these limitations later on.</p> |
|
|
</div> |
|
|
|
|
|
<div id="info3"> |
|
|
<div class="copy" id="info3"> |
|
|
<h2>Tutorial</h2> |
|
|
<p>Read on to find out how you can create awesome CSS particle animations yourself!</p> |
|
|
<h3>Outline</h3> |
|
|
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session.
You signed out in another tab or window. Reload to refresh your session.