modified: css/Layout_index.css

modified: index.html
JonahRileyHuggins · Oct 5, 2023 · bd45c27 · bd45c27
1 parent acea9ef
commit bd45c27
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 26 deletions.
diff --git a/css/Layout_index.css b/css/Layout_index.css
@@ -1,6 +1,6 @@
 body, html {
   height: 100%;
-  Background-color: rgb(235, 238, 218);
+  Background-color: rgba(238, 233, 218, 0.26);
 }
 
 * {
@@ -26,7 +26,7 @@ body, html {
 
 /* Add a black background color to the top navigation */
 .topnav {
-  background-color: rgb(235, 238, 218);
+  background-color: None;
   overflow: hidden;
 }
 
@@ -38,11 +38,12 @@ body, html {
   padding: 17px 16px;
   text-decoration: none;
   font-size: 1.55vw;
+  font-family: Arial, Helvetica, sans-serif;
 }
 
 /* Change the color of links on hover */
 .topnav a:hover {
-  background-color: #ddd;
+  background-color: #333;
   color: whitesmoke;
 }
 
@@ -54,8 +55,9 @@ body, html {
 
 .title {
   background-color: rgba(0,0,0, 0.0); /* Black w/opacity/see-through */
-  color: whitesmoke;
+  color: #333;
   font-weight: bold;
+  font-family: Arial, Helvetica, sans-serif;
   position: absolute;
   top: 5%;
   left: 15%;
@@ -71,33 +73,40 @@ body, html {
 .Information {
   background-color: rgba(255,255,255 1.0)
   font-weight: bold;
+  font-family: Arial, Helvetica, sans-serif;
   font-color: initial;
   position: absolute;
-  top: 75%;
+  top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 2;
   padding: 55px;
   height: 80%;
   width: 80%;
-  text-align: center;
+  text-align: left;
   font-size: 120%;
 }
 
-/* Adding Footer to each page */
-.footer {
-  position: fixed;
-  left: 0%;
-  bottom: 0%;
-  width: 100%;
-  height: 50px;
-  background-color: #333;
-  text-align: center;
+/* Container for the questions */
+.question-container {
+  display: flex;
+  justify-content: space-between; /* Distribute child elements with equal space between them */
+  align-items: center; 
+  position: absolute;
+  top: calc(50% + 20px); /* Adjust the value to create space below the centered div */
+  left: 20%;
+  right: 20%;
+  text-align: left; /* Center-align the questions */
+}
+.question-container > div {
+  width: 30%; /* Adjust this value to create space between the questions */
+}
+
+/* CSS for individual question elements */
+.question {
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 24px;
+    border: none;
+    background: none;
 }
 
-/* WebCounter fixed on the right, count centered */
-.WebCounter {
-   display: inline;
-   vertical-align: top-text;
-   padding-right: 20px;
-   text-align: right;}
diff --git a/index.html b/index.html
@@ -27,11 +27,22 @@ <h3>[email protected], [email protected], [email protected]</h3>
             <h3>https://github.com/JonahRileyHuggins/DataVizDashboard</h3>
             <p><img src="" alt=""/></p>
         </div>
-        <div class="footer">
-            <p style="color:#FFA500"><a href="https://www.digits.net" target="_blank">
-              <img src="https://counter.digits.net/?counter={5ef7a7cb-398d-8634-512c-3c5838645f85}&template=simple"
-               alt="Hit Counter by Digits" border="0"  />
-            </a>Hits according to <a href="https://www.digits.net/"><img src="Images/WebCounter.jpg" width="5%" height="5%"></a></p>
+
+        <div class="question-container">
+            <!-- Question 1 -->
+            <div class="question">
+                <strong>Q1:</strong> How has the gross revenue of the film industry changed over time with regards to genre, actor, or director?<br>
             </div>
+
+            <!-- Question 2 -->
+            <div class="question">
+                <strong>Q2:</strong> How does the profitability of a film relate to the viewer ratings of the film?<br>
+            </div>
+
+            <!-- Question 3 -->
+            <div class="question">
+                <strong>Q3:</strong> What qualitative factors affect the profitability of a film?<br>
+            </div>
+        </div>
     </body>
 </html>