diff --git a/css/midterm.css b/css/midterm.css index 5ff51fd..3341cc6 100644 --- a/css/midterm.css +++ b/css/midterm.css @@ -111,6 +111,9 @@ body { header { background-color: white; + display: flex; + flex-direction: column; + justify-content: space-around; } ul, ol { @@ -118,15 +121,29 @@ ul, ol { 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 { diff --git a/midterm.html b/midterm.html index 4849429..35d14fe 100644 --- a/midterm.html +++ b/midterm.html @@ -48,7 +48,7 @@
Or you can make your particles show-stopping!
-Particles are the key to all of the realistic animation effects below. Check them out!
Say you’re already familiar with the animation properties of CSS. What makes particle animation any different?
The defining characteristics of a particle animation are:
@@ -95,7 +95,7 @@We'll look at some ways to get past these limitations later on.
Read on to find out how you can create awesome CSS particle animations yourself!