• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Can anyone help with this last bit?

Agent_Ana

New Coder
can anyone please help with this last bit, ive only got basic knowledge. i've just thrown this together with generic images and stuff, just to get it working first. Can alter it later but right now. I need help with changing the background image when its toggled to night theme.


This is what is in html box:

HTML:
<input type="checkbox" id="toggle" class="toggle--checkbox">
<label for="toggle" class="toggle--label">
  <span class="toggle--label-background"></span>
</label>
<div class="background"></div>
<center>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="[URL]https://www.w3schools.com/w3css/4/w3.css[/URL]">
<body>
<div class="w3-content w3-display-container">
  <img class="mySlides" src="[URL]https://www.princeton.edu/sites/default/files/styles/half_2x/public/images/2022/02/KOA_Nassau_2697x1517.jpg?itok=iQEwihUn[/URL]" style="width:33.5%">
    <img class="mySlides" src="[URL]https://vcahospitals.com/-/media/2/vca/images/lifelearn-images-foldered/169/neut_thumbnail.ashx[/URL]" style="width:90%">
 
   <button class="w3-button w3-purple w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
  <button class="w3-button w3-purple w3-display-right" onclick="plusDivs(1)">&#10095;</button>
</div>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
  showDivs(slideIndex += n);
}
function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}  
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x.style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}
</script>
</body>
</html>
<br>
<br>
<html>
<head>
<style>
body {font-family: "Lato", sans-serif;}
/* Style the tab */
div.tab {
    overflow: hidden;
    border: 4px solid #140017;
    background-color:     #40014c;
}

/* Style the buttons inside the tab */
div.tab button {
    background-color: inherit;
    float: centre;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 12px 16px;
    transition: 0.3s;
    font-size: 17.5px;
    
}

/* Change background color of buttons on hover */
div.tab button:hover {
    background-color: #e444fc;
}

/* Create an active/current tablink class */
div.tab button.active {
    background-color: #666666;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s;
}

/* Fade in tabs */
@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}
</style>
</head>
<body>
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'Info')">Info</button>
<button class="tablinks" onclick="openCity(event, 'settings')">settings</button> 
</div>
  <!DOCTYPE html>
<html>
<head>
<link href='[URL]https://fonts.googleapis.com/css?family=Merienda[/URL]' rel='stylesheet'>
<style>
body {
    font-family: 'Merienda';font-size: 22px;
}
</style>
</head>
<body>
 
<div id="Info" class="tabcontent"> 
   <p>
  <div style="border:8px Solid #140017;width:1100px;height:650px;overflow:scroll;padding:5px;background-color: #40014c;color: #00ffff;">
<font size="4">
  
  blah blah blah info goes here
 
<br>  </div></font>
</p>
  </div></center>

  
<div id="settings" class="tabcontent"> 
   <p>
  <div style="border:8px Solid #140017;width:1100px;height:650px;overflow:scroll;padding:5px;background-color: #40014c;color: #00ffff;">
<font size="4">
  
  blah blah blah settings goes here
 
<br>  </div></font>
</p>
  </div></center>

<script>
function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent.style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks.className = tablinks.className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}
</script>
     
</body>
</html>   
  <br>
  <br> 
   <div align="center">

 <b><u>My Current Time:</u></b>
   
  <div style="text-align:center;width:400px;padding:1em 0;"> <a style="text-decoration:none;" href="[URL]http://www.zeitverschiebung.net/en/city/2643743[/URL]"><span style="color:blue;"></span> <iframe src="[URL='https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=en&timezone=Europe%2FLondon']https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=en&timezone=Europe/London[/URL]" width="100%" height="150" frameborder="0" seamless></iframe> <small style="color:blue;">&copy; </div> 
    
</div> 
 </center>












This is what is in css box:




CSS:
:root {
  /** sunny side **/
  --blue-background: #C2E9F6;
  --blue-border: #72cce3;
  --blue-color: #96dcee;
  --yellow-background: #fffaa8;
  --yellow-border: #f5eb71;
  /** dark side **/
  --indigo-background: #808fc7;
  --indigo-border: #5d6baa;
  --indigo-color: #6b7abb;
  --gray-border: #e8e8ea;
  --gray-dots: #e8e8ea;
  /** general **/
  --white: #fff;
}

* {
  margin: 0;
  padding: 0;
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  position: relative;
}

.background {
  position: absolute;
  left: 0;
  top: 0;
  
  z-index: -1;
  width: 100%;
  height: 100%;
  transition: all 250ms ease-in;
       background-image: url('[URL='https://i.pinimg.com/736x/dd/cb/ca/ddcbca39fba5a538d11f7715e84c590a.jpg%27);']https://i.pinimg.com/736x/dd/cb/ca/ddcbca39fba5a538d11f7715e84c590a.jpg');[/URL]
   background-size: 100%;   
}

.toggle--checkbox {
  display: none;
}
.toggle--checkbox:checked {
  /** This will all flip from sun to moon **/
  /** Change the label color **/
}
.toggle--checkbox:checked ~ .background {
  background: var(--indigo-background);
}
.toggle--checkbox:checked + .toggle--label {
  background: var(--indigo-color);
  border-color: var(--indigo-border);
  /** Change the cloud to stars **/
  /** Change the sun into the moon **/
  /** Show the dimples on the moon **/
}
.toggle--checkbox:checked + .toggle--label .toggle--label-background {
  
  left: 60px;
  width: 5px;
}
.toggle--checkbox:checked + .toggle--label .toggle--label-background:before {
  width: 5px;
  height: 5px;
  top: -25px;
}
.toggle--checkbox:checked + .toggle--label .toggle--label-background:after {
  
  width: 5px;
  height: 5px;
  left: -30px;
  top: 20px;
}
.toggle--checkbox:checked + .toggle--label:before {
  background: var(--white);
  border-color: var(--gray-border);
  animation-name: switch;
  animation-duration: 350ms;
  animation-fill-mode: forwards;
}
.toggle--checkbox:checked + .toggle--label:after {
  transition-delay: 350ms;
  opacity: 1;
}
.toggle--label {
  /** Placeholder element, starting at blue **/
  width: 200px;
  height: 100px;
  background: var(--blue-color);
  border-radius: 100px;
  border: 5px solid var(--blue-border);
  display: flex;
  position: relative;
  transition: all 350ms ease-in;
  /** The sun cloud and moon stars **/
  /** Sun/Moon element **/
  /** Gray dots on the moon **/
}
.toggle--label-background {
  width: 10px;
  height: 5px;
  border-radius: 5px;
  position: relative;
  background: var(--white);
  left: 135px;
  top: 45px;
  transition: all 150ms ease-in;
}
.toggle--label-background:before {
  content: "";
  position: absolute;
  top: -5px;
  width: 40px;
  height: 5px;
  border-radius: 5px;
  background: var(--white);
  left: -20px;
  transition: all 150ms ease-in;
}
.toggle--label-background:after {
  content: "";
  position: absolute;
  top: 5px;
  width: 40px;
  height: 5px;
  border-radius: 5px;
  background: var(--white);
  left: -10px;
  transition: all 150ms ease-in;
}
.toggle--label:before {
  animation-name: reverse;
  animation-duration: 350ms;
  animation-fill-mode: forwards;
  transition: all 350ms ease-in;
  content: "";
  width: 82px;
  height: 82px;
  border: 5px solid var(--yellow-border);
  top: 4px;
  left: 4px;
  position: absolute;
  border-radius: 82px;
  background: var(--yellow-background);
}
.toggle--label:after {
  transition-delay: 0ms;
  transition: all 250ms ease-in;
  position: absolute;
  content: "";
  box-shadow: var(--gray-dots) -13px 0 0 2px, var(--gray-dots) -24px 14px 0 -2px;
  left: 143px;
  top: 23px;
  width: 10px;
  height: 10px;
  background: transparent;
  border-radius: 50%;
  opacity: 0;
}

@keyframes switch {
  0% {
    left: 4px;
  }
  60% {
    left: 4px;
    width: 112px;
  }
  100% {
    left: 104px;
    width: 82px;
  }
}
@keyframes reverse {
  0% {
    left: 104px;
    width: 82px;
  }
  60% {
    left: 72px;
    width: 112px;
  }
  100% {
    left: 4px;
  }
}
 
Last edited by a moderator:

Johna

Frontend developer
Staff Team
Guardian
Try and clean up your code so it's easier to help you :).
  • You have a few links that should be in the <head> that are not in the head
  • You have two <body>'s and <html>'s
  • You have <!DOCTYPE html> in the middle of your code, it's supposed to be at the begining
  • You have some tags out of the <body> and <html>
Read this if you need help with arranging the code.
 
Top