add background & some other basic css styling

rbozek · Jan 4, 2024 · af61069 · af61069
1 parent 228155d
commit af61069
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 18 deletions.
diff --git a/assets/images/tile-orange.jpg b/assets/images/tile-orange.jpg
diff --git a/css/style.css b/css/style.css
@@ -1,11 +1,20 @@
 body {
-  background-color: gray;
+  background-image: url('../assets/images/tile-orange.jpg');
+  background-size: cover;
+  background-color:  rgb(251, 122, 0);
   font-family: sans-serif;
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 
+
+.generic-background {
+  background-color:  rgba(53, 53, 53, 0.75);
+  padding: 20px;
+  border-radius: 10px;
+}
+
 div#introDiv {
   background-color: rgb(187, 187, 187);
 }

diff --git a/index.html b/index.html
@@ -11,25 +11,29 @@
 </head>
 
 <body>
-  <h1>Quiz - Be a Better Human!</h1>
-  <h2>Get through life without looking dumb (or dying)</h2>
-  <div id="rules-btn-container">
-    <div id="introDiv">"RULES GO HERE"<br>
-    Choose category to begin!</div>
-    <button class="button" id="btn-category-1">Category 1</button>
-    <button class="button" id="btn-category-2">Category 2</button>
-    <button class="button" id="btn-category-3">Category 3</button>
-  </div> 
-
-  <div id="question-container">
-    <p id="question-p"></p>
-    <ul id="answers-ul"></ul>
-  </div>
+  <h1 class="generic-background">Quiz - Be a Better Human!</h1>
+  <h2 class="generic-background">Get through life without looking dumb (or dying)</h2>
+
+
+  <div class="generic-background">
+    <div id="rules-btn-container">
+      <div id="introDiv">"RULES GO HERE"<br>
+      Choose category to begin!</div>
+      <button class="button" id="btn-category-1">Category 1</button>
+      <button class="button" id="btn-category-2">Category 2</button>
+      <button class="button" id="btn-category-3">Category 3</button>
+    </div> 
 
-  <div id="countdown"></div>
-  <div id="player-score"></div>
+    <div id="question-container">
+      <p id="question-p"></p>
+      <ul id="answers-ul"></ul>
+    </div>
 
-  <button id="btn-reset">Player score</button>
+    <div id="countdown"></div>
+    <div id="player-score"></div>
+
+    <button id="btn-reset">Player score</button>
+  </div>
 
 
 </body>