Add bg

AntonioSergioDM · Jan 19, 2024 · e63d701 · e63d701
1 parent cdeb464
commit e63d701
Show file tree

Hide file tree

Showing 34 changed files with 75 additions and 69 deletions.
diff --git a/css/main.css b/css/main.css
@@ -1,68 +1,74 @@
+body {
+  background-image: url("../img/bg.jpg");
+  background-size: cover;
+}
+
+
 ul.characters_list {
-    list-style-type: none;
-  }
-  
-  ul.characters_list li {
-    display: inline-block;
-  }
-  
-  ul.characters_list li input[type="checkbox"] {
-    display: none;
-  }
-  
-  label {
-    border: 1px solid #fff;
-    padding: 10px;
-    display: block;
-    position: relative;
-    margin: 10px;
-    cursor: pointer;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-  }
-  
-  label::before {
-    background-color: white;
-    color: white;
-    content: " ";
-    display: block;
-    border-radius: 50%;
-    border: 1px solid grey;
-    position: absolute;
-    top: -5px;
-    left: -5px;
-    width: 25px;
-    height: 25px;
-    text-align: center;
-    line-height: 28px;
-    transition-duration: 0.4s;
-    transform: scale(0);
-  }
-  
-  label img {
-    border-radius: 10%;
-    height: 100px;
-    width: 100px;
-    transition-duration: 0.2s;
-    transform-origin: 50% 50%;
-  }
-  
-  :checked+label {
-    border-color: #ddd;
-  }
-  
-  :checked+label::before {
-    content: "✓";
-    background-color: grey;
-    transform: scale(1);
-  }
-  
-  :checked+label img {
-    transform: scale(0.9);
-    box-shadow: 0 0 5px #333;
-    z-index: -1;
-  }
+  list-style-type: none;
+}
+
+ul.characters_list li {
+  display: inline-block;
+}
+
+ul.characters_list li input[type="checkbox"] {
+  display: none;
+}
+
+label {
+  border: 1px solid #fff;
+  padding: 10px;
+  display: block;
+  position: relative;
+  margin: 10px;
+  cursor: pointer;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+label::before {
+  background-color: white;
+  color: white;
+  content: " ";
+  display: block;
+  border-radius: 50%;
+  border: 1px solid grey;
+  position: absolute;
+  top: -5px;
+  left: -5px;
+  width: 25px;
+  height: 25px;
+  text-align: center;
+  line-height: 28px;
+  transition-duration: 0.4s;
+  transform: scale(0);
+}
+
+label img {
+  border-radius: 10%;
+  height: 100px;
+  width: 100px;
+  transition-duration: 0.2s;
+  transform-origin: 50% 50%;
+}
+
+:checked+label {
+  border-color: #ddd;
+}
+
+:checked+label::before {
+  content: "✓";
+  background-color: grey;
+  transform: scale(1);
+}
+
+:checked+label img {
+  transform: scale(0.9);
+  box-shadow: 0 0 5px #333;
+  z-index: -1;
+}
diff --git a/img/bg.jpg b/img/bg.jpg
diff --git a/img/actor.png → img/chars/actor.png b/img/actor.png → img/chars/actor.png
diff --git a/img/angel.png → img/chars/angel.png b/img/angel.png → img/chars/angel.png
diff --git a/img/beartamer.png → img/chars/beartamer.png b/img/beartamer.png → img/chars/beartamer.png
diff --git a/img/bigbadwolf.png → img/chars/bigbadwolf.png b/img/bigbadwolf.png → img/chars/bigbadwolf.png
diff --git a/img/brothers.png → img/chars/brothers.png b/img/brothers.png → img/chars/brothers.png
diff --git a/img/cupid.png → img/chars/cupid.png b/img/cupid.png → img/chars/cupid.png
diff --git a/img/defender.png → img/chars/defender.png b/img/defender.png → img/chars/defender.png
diff --git a/img/elder.png → img/chars/elder.png b/img/elder.png → img/chars/elder.png
diff --git a/img/fox.png → img/chars/fox.png b/img/fox.png → img/chars/fox.png
diff --git a/img/girl.png → img/chars/girl.png b/img/girl.png → img/chars/girl.png
diff --git a/img/gypsy.png → img/chars/gypsy.png b/img/gypsy.png → img/chars/gypsy.png
diff --git a/img/hunter.png → img/chars/hunter.png b/img/hunter.png → img/chars/hunter.png
diff --git a/img/idiot.png → img/chars/idiot.png b/img/idiot.png → img/chars/idiot.png
diff --git a/img/judge.png → img/chars/judge.png b/img/judge.png → img/chars/judge.png
diff --git a/img/knight.png → img/chars/knight.png b/img/knight.png → img/chars/knight.png
diff --git a/img/manipulator.png → img/chars/manipulator.png b/img/manipulator.png → img/chars/manipulator.png
diff --git a/img/piper.png → img/chars/piper.png b/img/piper.png → img/chars/piper.png
diff --git a/img/pyromaniac.png → img/chars/pyromaniac.png b/img/pyromaniac.png → img/chars/pyromaniac.png
diff --git a/img/scandalmonger.png → img/chars/scandalmonger.png b/img/scandalmonger.png → img/chars/scandalmonger.png
diff --git a/img/scapegoat.png → img/chars/scapegoat.png b/img/scapegoat.png → img/chars/scapegoat.png
diff --git a/img/seer.png → img/chars/seer.png b/img/seer.png → img/chars/seer.png
diff --git a/img/servant.png → img/chars/servant.png b/img/servant.png → img/chars/servant.png
diff --git a/img/sisters.png → img/chars/sisters.png b/img/sisters.png → img/chars/sisters.png
diff --git a/img/thief.png → img/chars/thief.png b/img/thief.png → img/chars/thief.png
diff --git a/img/villager.png → img/chars/villager.png b/img/villager.png → img/chars/villager.png
diff --git a/img/werewolves.png → img/chars/werewolves.png b/img/werewolves.png → img/chars/werewolves.png
diff --git a/img/whitewolf.png → img/chars/whitewolf.png b/img/whitewolf.png → img/chars/whitewolf.png
diff --git a/img/wildchild.png → img/chars/wildchild.png b/img/wildchild.png → img/chars/wildchild.png
diff --git a/img/witch.png → img/chars/witch.png b/img/witch.png → img/chars/witch.png
diff --git a/img/wolffather.png → img/chars/wolffather.png b/img/wolffather.png → img/chars/wolffather.png
diff --git a/img/wolfhound.png → img/chars/wolfhound.png b/img/wolfhound.png → img/chars/wolfhound.png
diff --git a/index.html b/index.html
@@ -19,13 +19,13 @@ <h1>Werewolves of Miller's Hollow</h1>
         <li>
             <input type="checkbox" id="werewolves">
             <label for="werewolves">
-                <img src="img/werewolves.png" />
+                <img src="img/chars/werewolves.png" />
             </label>
         </li>
         <li>
             <input type="checkbox" id="seer">
             <label for="seer">
-                <img src="img/seer.png" />
+                <img src="img/chars/seer.png" />
             </label>
         </li>
     </ul>