two more particles, layout tweaks

css/midterm.css

@@ -1,13 +1,13 @@
-/*! HTML5 Boilerplate v7.3.0 | MIT License | https://html5boilerplate.com/ */
+/*! HTML5 Boilerplate v7.3.0 | MIT License | https://html5boilerplate.com/ 
+
+ * main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme 
 
-/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
-/*
  * What follows is the result of much research on cross-browser styling.
  * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
  * Kroc Camen, and the H5BP dev community and team.
- */
+ 
 
-/* ==========================================================================
+==========================================================================
    Base styles: opinionated defaults
    ========================================================================== */
 
@@ -113,15 +113,17 @@ header {
   background-color: white;
   display: flex;
   flex-direction: column;
-  justify-content: space-around;
+  justify-content: center;
 }
 
 ul, ol {
   text-align: left;
-  margin-left: 100px;
+  margin-left: 10%;
+  margin-right: 10%;
 }
 
 .copy {
+  padding: 10px 50px;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
@@ -144,28 +146,26 @@ ul, ol {
   height: 100%;
   grid-row: 1/4; 
   grid-column: 1/2;
+  position: relative;
 }
 
 .particle-temp {
+  position: absolute;
   border-radius: 50%;
-  background: white;
   margin: 15px;
-  animation: 
-    blur_fade 20s ease 0s infinite, 
-    circle 5s linear 0s infinite;
 }
 
 @keyframes blur_fade {
-  from {
+  0% {
     height: 2px;
     width: 2px;
     opacity: 0;
   }
   20% {
     filter: blur(0.2);
-    opacity: 0.8;
+    opacity: 0.3;
   }
-  to {
+  100% {
     height: 40px;
     width: 40px;
     filter: blur(3px);
@@ -174,16 +174,47 @@ ul, ol {
 }
 
 @keyframes circle {
-  from {
+  0% {
     transform-origin: -10px -10px;
     transform: rotate(0deg);
   }
-  to {
+  100% {
     transform-origin: -10px -10px;
     transform: rotate(360deg);
   }
 }
 
+.particle-temp:nth-child(1) {
+  top: 50px;
+  left: 50px;
+  animation-delay: 0s;
+  background: white;
+  animation: 
+    blur_fade 20s ease infinite, 
+    circle 5s linear infinite;
+}
+
+.particle-temp:nth-child(2) {
+  top: 100px;
+  left: 50px;
+  background: white;
+  animation: 
+    blur_fade 20s ease infinite, 
+    circle 6.5s linear infinite;
+  animation-delay: -8s;
+}
+
+.particle-temp:nth-child(3) {
+  top: 200px;
+  left: 50px;
+  animation-delay: 8s;
+  background: white;
+  animation: 
+    blur_fade 20s ease infinite, 
+    circle 8s linear infinite;
+}
+
+
 #subtle {
   background-color: pink;
 }

midterm.html

@@ -33,6 +33,8 @@
 <div class="particle-wrapper" id="subtle">
   <div class="particle-container">
     <div class="particle-temp"></div>
+    <div class="particle-temp"></div>
+    <div class="particle-temp"></div>
   </div>
   <p>You can use animated particles to create a subtle background effect...</p>
 </div>
@@ -60,7 +62,7 @@
   </ul>
 </div>
 
-<div> <!--probably dont need this wrapper-->
+<div class="particle-wrapper">
   <div class="particle-container" id="rain">
 
   </div>
@@ -76,6 +78,7 @@
   <div class="particle-container" id="birds">
 
   </div>
+  <p>(particle gallery here)</p>
 </div>
 
 <div class="copy" id="info2">