23h

chrisktventura · chrisktventura · commit 35d9f0965f1a · 2022-03-15T23:00:13.000-03:00
diff --git a/index.html b/index.html
@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="./style.css" />
     <title>Jogo do Humor</title>
   </head>
-  <body>
+  <body cz-shortcut-listen="true" style="background: url(./assets/img/bg.jpg) 0% 0% / cover no-repeat;">
     <header>
       <div class="header-container">
         <h1>Jogo do Humor do Naruto</h1>
diff --git a/js.js b/js.js
@@ -1,35 +1,41 @@
 const elementoNome = document.getElementById("nome");
 const elementoSituacao = document.querySelector("#situacao");
 const elementoImg = document.querySelector("#imagem");
-
 let elementoBtn = document.querySelector("#alterar");
 
+
 elementoBtn.addEventListener("click", () => {
   if (elementoBtn.value == "primeiro") {
     elementoImg.src = "./assets/img/naruto1.png";
     elementoNome.innerText = "Naruto Uzumaki ";
     elementoSituacao.innerText = "Normal";
     document.body.style.background = "url('./assets/img/bg.jpg')";
-
+    document.body.style.backgroundRepeat = "no-repeat";
+    document.body.style.backgroundSize = "cover";
     elementoBtn.value = "segundo";
   } else if (elementoBtn.value == "segundo") {
     elementoImg.src = "./assets/img/naruto2.png";
     elementoNome.innerText = "Naruto 1 cauda";
     elementoSituacao.innerText = "Descontrolado";
     document.body.style.background = "url('./assets/img/bg2.jpg')";
-    
+    document.body.style.backgroundRepeat = "no-repeat";
+    document.body.style.backgroundSize = "cover";
     elementoBtn.value = "terceiro";
   } else if (elementoBtn.value == "terceiro") {
     elementoImg.src = "./assets/img/naruto3.png";
     elementoNome.innerText = "Naruto 4 caudas";
     elementoSituacao.innerText = "Chama o Yamato";
     document.body.style.background = "url('./assets/img/bg3.jpg')";
+    document.body.style.backgroundRepeat = "no-repeat";
+    document.body.style.backgroundSize = "cover";
     elementoBtn.value = "quarto";
   } else {
     elementoImg.src = "./assets/img/naruto4.png";
     elementoNome.innerText = "Naruto 6 caudas";
     elementoSituacao.innerText = "É o fim do Pain";
     document.body.style.background = "url('./assets/img/bg4.jpg')";
+    document.body.style.backgroundRepeat = "no-repeat";
+    document.body.style.backgroundSize = "cover";
     elementoBtn.value = "primeiro";
   }
 });
diff --git a/style.css b/style.css
@@ -3,6 +3,7 @@
   padding: 0;
 }
 header {
+  width: 100%;
   background-image: linear-gradient(#f2c0a2, #d96b52, #d95043, #59211c);
   padding: 2rem;
 }
@@ -19,11 +20,11 @@ header h1 {
   margin: 0 auto;
   gap: 1rem;
 }
-body {
+/* body {
   background: url("./assets/img/bg.jpg");
   background-size: cover;
   background-repeat: no-repeat;
-}
+} */
 
 section#infos {
   justify-content: center;
@@ -54,7 +55,7 @@ section#infos div#txt button {
   transition: all 0.5s ease-out;
   cursor: pointer;
 }
-audio{
+audio {
   padding: 3rem;
 }
 
@@ -77,7 +78,7 @@ audio{
 .container-footer {
   display: flex;
   justify-items: center;
-  justify-content: space-between;
+  justify-content: space-around;
   max-width: 1080px;
   align-items: center;
   margin: 0 auto;
@@ -94,4 +95,3 @@ audio{
     min-width: 100%;
   }
 }
-

Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,7 @@`
`3`	`3`	`padding: 0;`
`4`	`4`	`}`
`5`	`5`	`header {`
	`6`	`+ width: 100%;`
`6`	`7`	`background-image: linear-gradient(#f2c0a2, #d96b52, #d95043, #59211c);`
`7`	`8`	`padding: 2rem;`
`8`	`9`	`}`
`@@ -19,11 +20,11 @@ header h1 {`
`19`	`20`	`margin: 0 auto;`
`20`	`21`	`gap: 1rem;`
`21`	`22`	`}`
`22`		`-body {`
	`23`	`+/* body {`
`23`	`24`	`background: url("./assets/img/bg.jpg");`
`24`	`25`	`background-size: cover;`
`25`	`26`	`background-repeat: no-repeat;`
`26`		`-}`
	`27`	`+} */`
`27`	`28`
`28`	`29`	`section#infos {`
`29`	`30`	`justify-content: center;`
`@@ -54,7 +55,7 @@ section#infos div#txt button {`
`54`	`55`	`transition: all 0.5s ease-out;`
`55`	`56`	`cursor: pointer;`
`56`	`57`	`}`
`57`		`-audio{`
	`58`	`+audio {`
`58`	`59`	`padding: 3rem;`
`59`	`60`	`}`
`60`	`61`
`@@ -77,7 +78,7 @@ audio{`
`77`	`78`	`.container-footer {`
`78`	`79`	`display: flex;`
`79`	`80`	`justify-items: center;`
`80`		`- justify-content: space-between;`
	`81`	`+ justify-content: space-around;`
`81`	`82`	`max-width: 1080px;`
`82`	`83`	`align-items: center;`
`83`	`84`	`margin: 0 auto;`
`@@ -94,4 +95,3 @@ audio{`
`94`	`95`	`min-width: 100%;`
`95`	`96`	`}`
`96`	`97`	`}`
`97`		`-`