added annimation to pages

Ssimoes48 · Nov 19, 2020 · b5f3f48 · b5f3f48
1 parent f841512
commit b5f3f48
Show file tree

Hide file tree

Showing 8 changed files with 80 additions and 8 deletions.
diff --git a/cloud.css b/cloud.css
@@ -1,5 +1,5 @@
 body {
-	background: #6feeee;
+	background:  rgb(106, 240, 233);
 	color: #333;
 	font: 100% Arial, Sans Serif;
 	height: 100vh;

diff --git a/cloudiness.html b/cloudiness.html
@@ -15,6 +15,7 @@
 
   <!-- Our own CSS stylesheet -->
   <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="cloud.css">
 
 </head>
 
@@ -66,6 +67,8 @@
           <h2 id="table_name">Latitude vs. Cloudiness</h2>
           <hr>
           <img id="image" src="Images/lat_cloudiness.PNG" alt="ack">
+          <br>
+          <br>
         </section>
         <p>There appears to be no real correlation to of Cloudiness to latitude accept that at the equator, like
           humidity, there appears to always be a percent of cloud formation. </p>

diff --git a/comparison.html b/comparison.html
@@ -15,6 +15,7 @@
 
   <!-- Our own CSS stylesheet -->
   <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="cloud.css">
 
 </head>
 
@@ -58,6 +59,27 @@
     </div>
   </nav>
 
+  <div id="background-wrap">
+    <div class="x1">
+        <div class="cloud"></div>
+    </div>
+
+    <div class="x2">
+        <div class="cloud"></div>
+    </div>
+
+    <div class="x3">
+        <div class="cloud"></div>
+    </div>
+
+    <div class="x4">
+        <div class="cloud"></div>
+    </div>
+
+    <div class="x5">
+        <div class="cloud"></div>
+    </div>
+</div>
 
   <main class="container">
     <div class="col-md-12">

diff --git a/data.html b/data.html
@@ -15,6 +15,7 @@
 
     <!-- Our own CSS stylesheet -->
     <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="cloud.css">
 
 </head>
 
@@ -58,6 +59,28 @@
         </div>
     </nav>
 
+    <div id="background-wrap">
+        <div class="x1">
+            <div class="cloud"></div>
+        </div>
+
+        <div class="x2">
+            <div class="cloud"></div>
+        </div>
+
+        <div class="x3">
+            <div class="cloud"></div>
+        </div>
+
+        <div class="x4">
+            <div class="cloud"></div>
+        </div>
+
+        <div class="x5">
+            <div class="cloud"></div>
+        </div>
+    </div>
+
     <main class="container">
         <div class="row">
             <div class="col">

diff --git a/humidity.html b/humidity.html
@@ -15,6 +15,7 @@
 
   <!-- Our own CSS stylesheet -->
   <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="cloud.css">
 
 </head>
 
@@ -67,6 +68,8 @@ <h2 id="table_name">Latitude vs. Humidity</h2>
           <hr>
           <img id="image" src="Images/lat_humidity.PNG" alt="ack">
         </section>
+        <br>
+        <br>
         <p>Although humidity can be high at all Latitude locations, at the equator it is consistently high and there is no data to suggest low humidity near 0° latitude. </p>
       </section>
     </div>

diff --git a/max_temp.html b/max_temp.html
@@ -15,6 +15,7 @@
 
   <!-- Our own CSS stylesheet -->
   <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="cloud.css">
 
 </head>
 
@@ -67,6 +68,8 @@ <h2 id="table_name">Latitude vs. Max Temperature</h2>
           <hr>
           <img id="image" src="Images/lat_temp.PNG" alt="ack">
         </section>
+        <br>
+        <br>
         <p>Within my data set of 575 random cities all over the world, there is a correlation between the city’s
           Latitude with the temperature. As the city becomes closer to the equator (latitude of 0°) the temperature
           increases. As the city locations move farther away from the equator, the temperature decreases. My data set

diff --git a/style.css b/style.css
@@ -32,45 +32,58 @@ body {
   }
 
 #Summary {
-    border: 3px solid black;
+    border: 2px solid black;
     margin: 10px;
     padding: 30px;
     background-color: white;
 }
 
 #Visualization{
-    border: 3px solid black;
+    border: 2px solid black;
     margin: 10px;
     padding: 40px;
     width: auto;
+    background-color: white;
 }
 
 #Cloudiness {
   margin: 10px;
   display: block;
   margin-left: auto;
-  margin-right: auto
+  margin-right: auto;
+  border: 1px solid black;
+  background-color: white;
+  padding: 20px;
 }
 
 #Humidity {
   margin: 10px;
   display: block;
   margin-left: auto;
-  margin-right: auto
+  margin-right: auto;
+  border: 1px solid black;
+  background-color: white;
+  padding: 20px;
 }
 
 #Wind {
   margin: 10px;
   display: block;
   margin-left: auto;
-  margin-right: auto
+  margin-right: auto;
+  border: 1px solid black;
+  background-color: white;
+  padding: 20px;
 }
 
 #Temperature {
   margin: 10px;
   display: block;
   margin-left: auto;
-  margin-right: auto
+  margin-right: auto;
+  border: 1px solid black;
+  background-color: white;
+  padding: 20px;
 }
 
 .container h2{
@@ -104,6 +117,8 @@ body {
   }
 
 #Data {
-  border: 1px solid black
+  border: 1px solid black;
+  background-color: white;
+  padding: 20px;
 }
 
diff --git a/wind_speed.html b/wind_speed.html
@@ -15,6 +15,7 @@
 
   <!-- Our own CSS stylesheet -->
   <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="cloud.css">
 
 </head>
 
@@ -67,6 +68,8 @@ <h2 id="table_name">Latitude vs. Wind Speed</h2>
           <hr>
           <img id="image" src="Images/lat_wind.PNG" alt="ack">
         </section>
+        <br>
+        <br>
         <p>There is no correlation between wind speed and latitude. There are some outlying data points in the upper
           norther hemisphere. </p>
       </section>