Project3_re

In this example below you will see how to do a Project3_re with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by chiao, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright chiao ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Project3_re</title>
  
  
  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Hind+Vadodara:300,400,500,600'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<div class="daybox">
  <label>
    <input id="switch_weekview" type="checkbox"/>
    <div class="top">
      <div class="b">
        <div class="moon"></div>
        <div class="rain rain1"></div>
        <div class="rain rain2"></div>
        <div class="rain rain3"></div>
        <div class="rain rain4"></div>
        <div class="cloud"></div>
        <div class="cover"></div>
      </div>
      <div class="text_area">
        <div class="location">Ulm</div>
        <div class="weather_type">Rainy</div>
        <div class="temperature">6°C</div>
      </div>
      <div class="info">
        <div class="name">
          <div class="sunrise">sunrise:</div>
          <div class="sunset">sunset:</div>
          <div class="chance_of_rain">Chance of Rain:</div>
          <div class="humidity">Humidity:</div>
          <div class="wind">Wind:</div>
          <div class="feels_like">Feels like:</div>
          <div class="precipitation">Precipitation:</div>
          <div class="pressure">Pressure:</div>
          <div class="visibility">Visibility:</div>
          <div class="uv">UV Index:</div>
        </div>
        <div class="value">
          <div class="sunrise">7:24 AM</div>
          <div class="sunset">4:43 AM</div>
          <div class="chance_of_rain">80%</div>
          <div class="humidity">92%</div>
          <div class="wind">N 1 m/s</div>
          <div class="feels_like">5°C</div>
          <div class="precipitation">0.0 cm</div>
          <div class="pressure">1,026 mb</div>
          <div class="visibility">9.1 km</div>
          <div class="uv">0</div>
        </div>
      </div>
      <svg class="templine">
        <circle cx="28" cy="60" r="3"></circle>
        <circle cx="89" cy="30" r="3"></circle>
        <circle cx="150" cy="45" r="3"></circle>
        <circle cx="211" cy="60" r="3"></circle>
        <circle cx="272" cy="30" r="3"></circle>
        <circle cx="333" cy="45" r="3"></circle>
        <circle cx="394" cy="30" r="3"></circle>
        <polyline class="line" points="0,40 28,60 89,30 150,45 211,60 272,30 333,45 394,30 455,60"></polyline>
      </svg>
      <div class="today">Friday</div>
      <div class="high_temp">8</div>
      <div class="low_temp">3</div>
    </div>
    <div class="middle">
      <div class="time_weather"> 
        <div class="time">Now</div>
        <svg class="weather" viewbox="-50 -50 100 100">
          <rect class="rain" x="-18" y="20" width="5" height="10"></rect>
          <rect class="rain" x="-7" y="18" width="5" height="10"></rect>
          <rect class="rain" x="8" y="22" width="5" height="10"></rect>
          <rect class="cloud" x="-30" y="-10" rx="15" width="60" height="32"></rect>
          <circle class="cloud" cx="-5" cy="-10" r="17"></circle>
        </svg>
        <div class="temperature">6°C</div>
      </div>
      <div class="time_weather"> 
        <div class="time">11PM</div>
        <svg class="weather" viewbox="-50 -50 100 100">
          <rect class="rain" x="-18" y="20" width="5" height="10"></rect>
          <rect class="rain" x="-7" y="18" width="5" height="10"></rect>
          <rect class="rain" x="8" y="22" width="5" height="10"></rect>
          <rect class="cloud" x="-30" y="-10" rx="15" width="60" height="32"></rect>
          <circle class="cloud" cx="-5" cy="-10" r="17"></circle>
        </svg>
        <div class="temperature">8°C</div>
      </div>
      <div class="time_weather"> 
        <div class="time">12PM</div>
        <svg class="weather" viewbox="-50 -50 100 100">
          <rect class="cloud" x="-30" y="-10" rx="15" width="60" height="32"></rect>
          <circle class="cloud" cx="-5" cy="-10" r="17"> </circle>
        </svg>
        <div class="temperature">7°C</div>
      </div>
      <div class="time_weather"> 
        <div class="time">1AM</div>
        <svg class="weather" viewbox="-50 -50 100 100">
          <circle class="sun" cx="5" cy="-5" r="20"></circle>
          <circle class="moon" cx="-7" cy="7" r="20"></circle>
          <rect class="cloud" x="-30" y="-10" rx="15" width="60" height="32"></rect>
          <circle class="cloud" cx="-5" cy="-10" r="17"></circle>
        </svg>
        <div class="temperature">6°C</div>
      </div>
      <div class="time_weather"> 
        <div class="time">2AM</div>
        <svg class="weather" viewbox="-50 -50 100 100">
          <circle class="sun" cx="0" cy="0" r="20"></circle>
          <circle class="moon" cx="-7" cy="7" r="20"></circle>
        </svg>
        <div class="temperature">8°C</div>
      </div>
      <div class="time_weather"> 
        <div class="time">3AM</div>
        <svg class="weather" viewBox="-22 -20 120 120">
          <path class="snow" d="M69.808,56.714l-6.783-3.916l6.076-2.852l-1.821-3.885l-8.787,4.115l-3.552-2.048l6.079-2.845l-1.64-3.511		l1.628-3.474l-6.076-2.845l3.555-2.048l8.791,4.109l1.818-3.885l-6.079-2.845l6.789-3.916l-2.148-3.716l-6.786,3.916l0.57-6.686		l-4.271-0.367l-0.828,9.668l-3.555,2.055l0.579-6.687l-3.692-0.317l-2.356-3.38l-5.506,3.841v-3.848l7.962-5.56l-2.456-3.517		l-5.506,3.841V8.229h-4.286v7.881l-5.503-3.841l-2.456,3.517l7.959,5.56v3.848l-5.503-3.841l-2.27,3.25l-3.956,0.343l0.576,6.686		l-3.343-1.924l-0.828-9.674L17.93,20.4l0.576,6.692l-6.83-3.94l-2.148,3.716l6.83,3.935l-6.076,2.845l1.815,3.885l8.791-4.109		l3.337,1.924l-6.076,2.845l1.674,3.58l-1.687,3.611l6.083,2.851l-3.34,1.924l-8.784-4.115l-1.821,3.878l6.079,2.858l-6.826,3.935		l2.145,3.716l6.823-3.94l-0.576,6.686l4.271,0.367l0.831-9.662l3.343-1.93l-0.579,6.68l4.112,0.349l2.126,3.05l5.503-3.841v4.097		l-7.959,5.56l2.456,3.517l5.503-3.841v7.832h4.286v-7.832l5.506,3.841l2.456-3.517l-7.962-5.56v-4.097l5.506,3.841l2.213-3.175		l3.838-0.33l-0.576-6.68l3.558,2.048l0.828,9.668l4.271-0.368l-0.576-6.686l6.789,3.916L69.808,56.714z M58.362,41.791l-7.95,3.723		l-6.453-3.729l6.443-3.716L58.362,41.791z M49.033,25.387l-0.772,8.965l-6.45,3.723v-7.645L49.033,25.387z M30.123,25.256		l7.402,5.173v7.645l-6.63-3.829L30.123,25.256z M20.566,41.791l8.187-3.829l6.624,3.822l-6.63,3.835L20.566,41.791z M30.132,58.121		l0.76-8.791l6.633-3.829v7.452L30.132,58.121z M49.021,57.99l-7.209-5.036v-7.452l6.453,3.729L49.021,57.99z"></path>
        </svg>
        <div class="temperature">7°C</div>
      </div>
      <div class="time_weather"> 
        <div class="time">4AM</div>
        <svg class="weather" viewBox="-22 -20 120 120">
          <path class="snow" d="M69.808,56.714l-6.783-3.916l6.076-2.852l-1.821-3.885l-8.787,4.115l-3.552-2.048l6.079-2.845l-1.64-3.511		l1.628-3.474l-6.076-2.845l3.555-2.048l8.791,4.109l1.818-3.885l-6.079-2.845l6.789-3.916l-2.148-3.716l-6.786,3.916l0.57-6.686		l-4.271-0.367l-0.828,9.668l-3.555,2.055l0.579-6.687l-3.692-0.317l-2.356-3.38l-5.506,3.841v-3.848l7.962-5.56l-2.456-3.517		l-5.506,3.841V8.229h-4.286v7.881l-5.503-3.841l-2.456,3.517l7.959,5.56v3.848l-5.503-3.841l-2.27,3.25l-3.956,0.343l0.576,6.686		l-3.343-1.924l-0.828-9.674L17.93,20.4l0.576,6.692l-6.83-3.94l-2.148,3.716l6.83,3.935l-6.076,2.845l1.815,3.885l8.791-4.109		l3.337,1.924l-6.076,2.845l1.674,3.58l-1.687,3.611l6.083,2.851l-3.34,1.924l-8.784-4.115l-1.821,3.878l6.079,2.858l-6.826,3.935		l2.145,3.716l6.823-3.94l-0.576,6.686l4.271,0.367l0.831-9.662l3.343-1.93l-0.579,6.68l4.112,0.349l2.126,3.05l5.503-3.841v4.097		l-7.959,5.56l2.456,3.517l5.503-3.841v7.832h4.286v-7.832l5.506,3.841l2.456-3.517l-7.962-5.56v-4.097l5.506,3.841l2.213-3.175		l3.838-0.33l-0.576-6.68l3.558,2.048l0.828,9.668l4.271-0.368l-0.576-6.686l6.789,3.916L69.808,56.714z M58.362,41.791l-7.95,3.723		l-6.453-3.729l6.443-3.716L58.362,41.791z M49.033,25.387l-0.772,8.965l-6.45,3.723v-7.645L49.033,25.387z M30.123,25.256		l7.402,5.173v7.645l-6.63-3.829L30.123,25.256z M20.566,41.791l8.187-3.829l6.624,3.822l-6.63,3.835L20.566,41.791z M30.132,58.121		l0.76-8.791l6.633-3.829v7.452L30.132,58.121z M49.021,57.99l-7.209-5.036v-7.452l6.453,3.729L49.021,57.99z"> </path>
        </svg>
        <div class="temperature">8°C</div>
      </div>
    </div>
    <div class="bottom">
      <div class="week_weather">
        <div class="a weekday">Saturday </div>
        <svg class="a weather" viewbox="-50 -50 100 100">
          <rect class="rain" x="-18" y="20" width="5" height="10"></rect>
          <rect class="rain" x="-7" y="18" width="5" height="10"></rect>
          <rect class="rain" x="8" y="22" width="5" height="10"></rect>
          <rect class="cloud" x="-30" y="-10" rx="15" width="60" height="32"></rect>
          <circle class="cloud" cx="-5" cy="-10" r="17"></circle>
        </svg>
        <div class="a high_temperature">7</div>
        <div class="a low_temperature">3</div>
      </div>
      <div class="week_weather">
        <div class="a weekday">Sunday </div>
        <svg class="a weather" viewbox="-50 -50 100 100">
          <rect class="rain" x="-18" y="20" width="5" height="10"></rect>
          <rect class="rain" x="-7" y="18" width="5" height="10"></rect>
          <rect class="rain" x="8" y="22" width="5" height="10"></rect>
          <rect class="cloud" x="-30" y="-10" rx="15" width="60" height="32"></rect>
          <circle class="cloud" cx="-5" cy="-10" r="17"></circle>
        </svg>
        <div class="a high_temperature">9</div>
        <div class="a low_temperature">5</div>
      </div>
      <div class="week_weather">
        <div class="a weekday">Monday </div>
        <svg class="a weather" viewBox="-22 -20 120 120">
          <path class="snow" d="M69.808,56.714l-6.783-3.916l6.076-2.852l-1.821-3.885l-8.787,4.115l-3.552-2.048l6.079-2.845l-1.64-3.511		l1.628-3.474l-6.076-2.845l3.555-2.048l8.791,4.109l1.818-3.885l-6.079-2.845l6.789-3.916l-2.148-3.716l-6.786,3.916l0.57-6.686		l-4.271-0.367l-0.828,9.668l-3.555,2.055l0.579-6.687l-3.692-0.317l-2.356-3.38l-5.506,3.841v-3.848l7.962-5.56l-2.456-3.517		l-5.506,3.841V8.229h-4.286v7.881l-5.503-3.841l-2.456,3.517l7.959,5.56v3.848l-5.503-3.841l-2.27,3.25l-3.956,0.343l0.576,6.686		l-3.343-1.924l-0.828-9.674L17.93,20.4l0.576,6.692l-6.83-3.94l-2.148,3.716l6.83,3.935l-6.076,2.845l1.815,3.885l8.791-4.109		l3.337,1.924l-6.076,2.845l1.674,3.58l-1.687,3.611l6.083,2.851l-3.34,1.924l-8.784-4.115l-1.821,3.878l6.079,2.858l-6.826,3.935		l2.145,3.716l6.823-3.94l-0.576,6.686l4.271,0.367l0.831-9.662l3.343-1.93l-0.579,6.68l4.112,0.349l2.126,3.05l5.503-3.841v4.097		l-7.959,5.56l2.456,3.517l5.503-3.841v7.832h4.286v-7.832l5.506,3.841l2.456-3.517l-7.962-5.56v-4.097l5.506,3.841l2.213-3.175		l3.838-0.33l-0.576-6.68l3.558,2.048l0.828,9.668l4.271-0.368l-0.576-6.686l6.789,3.916L69.808,56.714z M58.362,41.791l-7.95,3.723		l-6.453-3.729l6.443-3.716L58.362,41.791z M49.033,25.387l-0.772,8.965l-6.45,3.723v-7.645L49.033,25.387z M30.123,25.256		l7.402,5.173v7.645l-6.63-3.829L30.123,25.256z M20.566,41.791l8.187-3.829l6.624,3.822l-6.63,3.835L20.566,41.791z M30.132,58.121		l0.76-8.791l6.633-3.829v7.452L30.132,58.121z M49.021,57.99l-7.209-5.036v-7.452l6.453,3.729L49.021,57.99z"></path>
        </svg>
        <div class="a high_temperature">3</div>
        <div class="a low_temperature">-2</div>
      </div>
      <div class="week_weather">
        <div class="a weekday">Tuesday </div>
        <svg class="a weather" viewBox="-22 -20 120 120">
          <path class="snow" d="M69.808,56.714l-6.783-3.916l6.076-2.852l-1.821-3.885l-8.787,4.115l-3.552-2.048l6.079-2.845l-1.64-3.511		l1.628-3.474l-6.076-2.845l3.555-2.048l8.791,4.109l1.818-3.885l-6.079-2.845l6.789-3.916l-2.148-3.716l-6.786,3.916l0.57-6.686		l-4.271-0.367l-0.828,9.668l-3.555,2.055l0.579-6.687l-3.692-0.317l-2.356-3.38l-5.506,3.841v-3.848l7.962-5.56l-2.456-3.517		l-5.506,3.841V8.229h-4.286v7.881l-5.503-3.841l-2.456,3.517l7.959,5.56v3.848l-5.503-3.841l-2.27,3.25l-3.956,0.343l0.576,6.686		l-3.343-1.924l-0.828-9.674L17.93,20.4l0.576,6.692l-6.83-3.94l-2.148,3.716l6.83,3.935l-6.076,2.845l1.815,3.885l8.791-4.109		l3.337,1.924l-6.076,2.845l1.674,3.58l-1.687,3.611l6.083,2.851l-3.34,1.924l-8.784-4.115l-1.821,3.878l6.079,2.858l-6.826,3.935		l2.145,3.716l6.823-3.94l-0.576,6.686l4.271,0.367l0.831-9.662l3.343-1.93l-0.579,6.68l4.112,0.349l2.126,3.05l5.503-3.841v4.097		l-7.959,5.56l2.456,3.517l5.503-3.841v7.832h4.286v-7.832l5.506,3.841l2.456-3.517l-7.962-5.56v-4.097l5.506,3.841l2.213-3.175		l3.838-0.33l-0.576-6.68l3.558,2.048l0.828,9.668l4.271-0.368l-0.576-6.686l6.789,3.916L69.808,56.714z M58.362,41.791l-7.95,3.723		l-6.453-3.729l6.443-3.716L58.362,41.791z M49.033,25.387l-0.772,8.965l-6.45,3.723v-7.645L49.033,25.387z M30.123,25.256		l7.402,5.173v7.645l-6.63-3.829L30.123,25.256z M20.566,41.791l8.187-3.829l6.624,3.822l-6.63,3.835L20.566,41.791z M30.132,58.121		l0.76-8.791l6.633-3.829v7.452L30.132,58.121z M49.021,57.99l-7.209-5.036v-7.452l6.453,3.729L49.021,57.99z"></path>
        </svg>
        <div class="a high_temperature">4</div>
        <div class="a low_temperature">0</div>
      </div>
      <div class="week_weather">
        <div class="a weekday">Wednesday </div>
        <svg class="a weather" viewbox="-50 -50 100 100">
          <circle class="sun" cx="8" cy="-8" r="20"></circle>
          <rect class="cloud" x="-30" y="-10" rx="15" width="60" height="32"></rect>
          <circle class="cloud" cx="-5" cy="-10" r="17"></circle>
        </svg>
        <div class="a high_temperature">8</div>
        <div class="a low_temperature">4 </div>
      </div>
      <div class="week_weather">
        <div class="a weekday">Thursday</div>
        <svg class="a weather" viewbox="-50 -50 100 100">
          <circle class="sun" cx="0" cy="0" r="20"></circle>
        </svg>
        <div class="a high_temperature">12</div>
        <div class="a low_temperature">6</div>
      </div>
    </div>
  </label>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/chiao/project3_re-aBbXNw */
@charset "UTF-8";
html, body {
  width: 100%;
  height: 120%;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #212121;
}

* {
  position: relative;
  font-family: "Hind Vadodara", sans-serif, "微軟正黑體";
  font-size: 14px;
}

.daybox {
  width: 50%;
  max-width: 400px;
  overflow: hidden;
  background-color: #FAFAFA;
  border-radius: 8px;
  box-shadow: 0px 0px 20px;
}
.daybox:hover .middle {
  height: 90px;
}
.daybox:hover .templine {
  opacity: 0.2;
}
.daybox:hover .bottom {
  height: 240px;
}

label {
  cursor: pointer;
}

.top {
  height: 300px;
  background: linear-gradient(20deg, #19283D, #1D678F);
  background-size: 100% 300%;
  animation: daylight 5s both;
}
@keyframes daylight {
  0% {
    background-position: 100% 30%;
  }
  100% {
    background-position: 100% 100%;
  }
}
.top .b {
  opacity: 1;
  transition: 0.5s;
}
.top .b .moon {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  position: absolute;
  left: 275px;
  top: 60px;
  background-color: #FFED69;
}
.top .b .cloud {
  width: 130px;
  height: 50px;
  position: absolute;
  left: 200px;
  top: 100px;
  border-radius: 25px;
  background-color: #FAFAFA;
  box-shadow: 0px 0px 10px;
  animation: clouddrift 20s infinite;
}
.top .b .cloud:before {
  content: "";
  dispaly: block;
  width: 65px;
  height: 65px;
  position: absolute;
  left: 30px;
  bottom: 25px;
  border-radius: 100%;
  background-color: #FAFAFA;
  box-shadow: 0px 0px 10px;
}
.top .b .cover {
  width: 130px;
  height: 50px;
  position: absolute;
  left: 200px;
  top: 100px;
  border-radius: 25px;
  background-color: #FAFAFA;
  animation: clouddrift 20s infinite;
}
@keyframes clouddrift {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0px);
  }
}
.top .b .rain {
  width: 4px;
  height: 20px;
  transform: rotate(30deg);
  display: inline-block;
  background-color: #B5BEFF;
  animation: raindrop30 1s infinite linear;
}
@keyframes raindrop30 {
  0% {
    transform: rotate(30deg) translateY(-10px);
  }
  100% {
    transform: rotate(30deg) translateY(30px);
    opacity: 0;
  }
}
.top .b .rain1 {
  left: 240px;
  top: 140px;
}
.top .b .rain2 {
  left: 250px;
  top: 160px;
  animation-delay: 0.2s;
}
.top .b .rain3 {
  left: 260px;
  top: 140px;
  animation-delay: 0.6s;
}
.top .b .rain4 {
  left: 270px;
  top: 160px;
  animation-delay: 0.4s;
}
.top .text_area {
  display: inline-block;
  position: absolute;
  left: 60px;
  top: 30px;
  color: #FAFAFA;
}
.top .text_area .location {
  font-size: 60px;
  font-weight: 500;
  line-height: 60px;
}
.top .text_area .weather_type {
  font-size: 15px;
  text-align: center;
  color: rgba(250, 250, 250, 0.6);
  top: 5px;
}
.top .text_area .temperature {
  font-size: 60px;
  font-weight: 800;
  text-align: center;
}
.top .today {
  position: absolute;
  left: 12px;
  bottom: 3px;
  color: rgba(250, 250, 250, 0.8);
}
.top .high_temp {
  position: absolute;
  left: 350px;
  bottom: 3px;
  color: rgba(250, 250, 250, 0.8);
}
.top .low_temp {
  position: absolute;
  left: 380px;
  bottom: 3px;
  color: rgba(250, 250, 250, 0.4);
}
.top .templine {
  position: absolute;
  width: 100%;
  height: 75px;
  bottom: 15px;
  fill: #FAFAFA;
  stroke: #FAFAFA;
  stroke-width: 2px;
  left: 0px;
  transition: 0.5s;
}
.top .templine .line {
  fill: none;
}
.top .info {
  position: absolute;
  color: #FAFAFA;
  opacity: 0;
  transition: 0.5s;
}
.top .info .name {
  text-align: right;
  left: 200px;
}
.top .info .value {
  text-align: left;
  left: 300px;
  bottom: 209px;
}

.middle {
  width: 120%;
  background-color: #FAFAFA;
  height: 20px;
  transition: 2s;
}
.middle .time_weather {
  width: calc(400px / 6.5 - 4px);
  text-align: center;
  display: inline-block;
  color: #2B2B2B;
}
.middle .time_weather .time {
  font-size: 14px;
  letter-spacing: 1px;
}
.middle .time_weather svg {
  width: 100%;
  max-width: 40px;
  height: 40px;
  top: 3px;
}
.middle .time_weather svg .cloud {
  fill: #B0B0B0;
}
.middle .time_weather svg .rain {
  fill: #B5BEFF;
  animation: raindrop 2s infinite;
}
@keyframes raindrop {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(10px);
    opacity: 0;
  }
}
.middle .time_weather svg .sun {
  fill: #FFED69;
}
.middle .time_weather svg .snow {
  fill: #A8A8A8;
}
.middle .time_weather svg .moon {
  fill: #FAFAFA;
}

.rain:nth-child(4) {
  transition-delay: 1s;
}

.bottom {
  height: 10px;
  background: linear-gradient(-20deg, #B0B0B0, #545454);
  color: #FAFAFA;
  overflow: hidden;
  transition: 2s;
  transition-delay: 0.5s;
  border-radius: 0px 0px 8px 8px;
}
.bottom .week_weather {
  width: 100%;
  max-width: 400px;
  top: 0px;
  height: 40px;
}
.bottom .week_weather .a {
  position: absolute;
}
.bottom .week_weather .weekday {
  top: 10px;
  left: 10px;
}
.bottom .week_weather svg {
  width: 35px;
  height: 35px;
  top: 2px;
  left: 180px;
  margin: 0px;
  padding: 0px;
}
.bottom .week_weather svg .cloud {
  fill: #FAFAFA;
}
.bottom .week_weather svg .rain {
  fill: #B5BEFF;
  animation: raindrop 2s infinite;
}
@keyframes raindrop {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(10px);
    opacity: 0;
  }
}
.bottom .week_weather svg .sun {
  fill: #FFED69;
}
.bottom .week_weather svg .snow {
  fill: #FAFAFA;
}
.bottom .week_weather .high_temperature {
  left: 350px;
  top: 10px;
}
.bottom .week_weather .low_temperature {
  left: 380px;
  top: 10px;
  color: rgba(250, 250, 250, 0.4);
}

#switch_weekview {
  display: none;
}

#switch_weekview:checked + .top .info {
  opacity: 1;
}
#switch_weekview:checked + .top .b {
  opacity: 0.1;
}

Comments