improved layout

mdr19002 · Mar 7, 2020 · 96dcee1a96e95535f13d9787dc88e5843da8c3c9 · 96dcee1
1 parent afb121f
commit 96dcee1a96e95535f13d9787dc88e5843da8c3c9
Unified Split

Showing with 22 additions and 5 deletions.

+19 −2 css/midterm.css

+3 −3 midterm.html
diff --git a/css/midterm.css b/css/midterm.css
@@ -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 {

diff --git a/midterm.html b/midterm.html
@@ -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>