Weather Box

Developer
ULRIKA PAN
Size
6,637 Kb
Views
10,120
  1. Weather Box Previews
  2. Weather Box HTML Codes
  3. Weather Box CSS Codes

How do I make an weather box?

What is a weather box? How do you make a weather box? This script and codes were developed by ULRIKA PAN on 14 November 2022, Monday.

Weather Box Previews
IQ Test

Weather Box - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Weather Box</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/earlyaccess/notosanstc.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Hind+Vadodara:300,400,500,600,700'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<body> <h2 style="text-align:center">WEATHER BOX</h2> <div class="weatherbox"> <label> <input id="tempshow" type="checkbox"/> <div class="top"> <div class="alert"><i class="fa fa-hand-o-up" aria-hidden="true"></i>CLICK TO CHECK THE TEMPERATURE</div> <div class="moon"></div> <div class="cloud"> <div class="rain"></div> <div class="rain rain2"></div> <div class="rain rain3"></div> </div> <svg class="temsvg" viewbox="0 0 100 45"> <circle cx="0" cy="13" r="1"></circle> <text x="-3" y="19">26°C</text> <circle cx="20" cy="15" r="1"></circle> <text x="17" y="21">25°C</text> <circle cx="40" cy="10" r="1"></circle> <text x="37" y="16">27°C</text> <circle cx="60" cy="13" r="1"></circle> <text x="57" y="19">26°C</text> <circle cx="80" cy="20" r="1"></circle> <text x="77" y="26">23°C</text> <circle cx="100" cy="4" r="1"></circle> <text x="97" y="10">29°C</text> <polyline points="0,13 20,15 40,10 60,13 80,20 100,4"></polyline> </svg> <div class="textarea"> <div class="temp">25°C</div> <div class="address">新北市樹林區</div> <div class="content">多雲偶有陣雨</div> </div> </div> <div class="bottom"> <div class="arrow"></div> <div class="dayweather"> <h3>MON</h3> <svg class="icon" viewbox="-10 -10 20 20"> <circle class="sun" cx="0" cy="0" r="5"></circle> </svg> </div> <div class="dayweather"> <h3>TUE</h3> <svg class="icon" viewbox="-10 -10 20 20"> <circle class="sun" cx="-1" cy="0" r="4"></circle> <circle class="cloud" cx="2" cy="4" r="3"></circle> <circle class="cloud" cx="-1" cy="4" r="3"></circle> <circle class="cloud" cx="5" cy="4" r="3"></circle> <circle class="cloud" cx="4" cy="1" r="2"></circle> <circle class="cloud" cx="1" cy="1" r="3"></circle> </svg> </div> <div class="dayweather"> <h3>WED</h3> <svg class="icon" viewbox="-10 -10 20 20"> <circle class="sun" cx="0" cy="0" r="5"></circle> </svg> </div> <div class="dayweather"> <h3>THU</h3> <svg class="icon" viewbox="-10 -10 20 20"> <circle class="sun" cx="-1" cy="0" r="4"></circle> <circle class="cloud" cx="2" cy="4" r="3"></circle> <circle class="cloud" cx="-1" cy="4" r="3"></circle> <circle class="cloud" cx="5" cy="4" r="3"></circle> <circle class="cloud" cx="4" cy="1" r="2"></circle> <circle class="cloud" cx="1" cy="1" r="3"></circle> </svg> </div> <div class="dayweather dayweather5"> <h3>FRI</h3> <svg class="icon" viewbox="-5.5 -2 15 15"> <circle class="cloud" cx="2" cy="6" r="3"></circle> <circle class="cloud" cx="-1" cy="6" r="3"></circle> <circle class="cloud" cx="5" cy="6" r="3"></circle> <circle class="cloud" cx="4" cy="3" r="2"></circle> <circle class="cloud" cx="1" cy="3" r="3"></circle> <polyline class="thunder" points="5,7 8,4 7,7"></polyline> <polyline class="thunder" points="6,7 8,7 5,10"></polyline> </svg> </div> <div class="dayweather"> <h3>SAT</h3> <svg class="icon" viewbox="-7.5 -2 18 18"> <rect class="rain" x="0" y="-1" width="1" height="4"></rect> <rect class="rain rain2" x="3" y="-1" width="1" height="4"></rect> <rect class="rain rain3" x="-2" y="-1" width="1" height="4"></rect> <circle class="cloud" cx="2" cy="6" r="3"></circle> <circle class="cloud" cx="-1" cy="6" r="3"></circle> <circle class="cloud" cx="5" cy="6" r="3"></circle> <circle class="cloud" cx="4" cy="3" r="2"></circle> <circle class="cloud" cx="1" cy="3" r="3"></circle> </svg> </div> <div class="dayweather"> <h3>SUN</h3> <svg class="icon" viewbox="-10 -10 20 20"> <circle class="sun" cx="0" cy="0" r="5"></circle> </svg> </div> </div> </label> </div>
</body>
</body>
</html>

Weather Box - Script Codes CSS Codes

@charset "UTF-8";
* { font-family: "Hind Vadodara", "Noto Sans TC", sans-serif, 微軟正黑體; position: relative;
}
body, html { margin: 0px; padding: 0px; padding-bottom: 30px; color: white; background: linear-gradient(-120deg, #BE93C5 35%, #2168A6); background-size: 2000px 2000px;
}
h2 { padding: 0px; position: relative; top: 15px; text-align: center; font-size: 30px; font-weight: 500; letter-spacing: 1px; opacity: 0.6;
}
.weatherbox { width: 50%; max-width: 350px; min-width: 300px; border-radius: 10px; overflow: hidden; top: 25px; margin-left: auto; margin-right: auto; box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5);
}
.weatherbox:hover .bottom { height: 100px;
}
.weatherbox:hover .dayweather { opacity: 1; bottom: 0px;
}
.weatherbox:hover .arrow { opacity: 0;
}
.top { width: 100%; height: 300px; background: linear-gradient(20deg, #EC6EAD, #2168A6); background-size: 1000px 500px; background-position: left center; animation: sky 10s infinite alternate linear; cursor: pointer;
}
@keyframes sky { 100% { background-position: right center; }
}
.top .alert { display: inline-block; position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 230px; padding: 0px 10px; border-radius: 20px; opacity: 0.6; font-size: 12px; text-align: right; letter-spacing: 1px; background-color: rgba(255, 255, 255, 0.3); animation: alert 1s infinite linear alternate; transition: 0.4s ease-in-out; box-shadow: 1px 3px 10px rgba(0, 0, 0, 0.2);
}
@keyframes alert { 100% { top: 5px; }
}
.top .alert .fa { margin-right: 3px;
}
.top .moon { width: 55px; height: 55px; position: absolute; left: 15%; top: 25%; border-radius: 50%; box-shadow: 60px 10px #FFD045; animation: moonmove 20s infinite alternate linear; transition: 1s ease-in-out;
}
@keyframes moonmove { 0% { box-shadow: 70px 10px #FFD045; transform: translateX(-70px) translateY(-10px); } 100% { box-shadow: -70px -10px #FFD045; transform: translateX(70px) translateY(10px); }
}
.cloud { width: 100px; height: 50px; border-radius: 30px; background-color: white; position: absolute; right: 12%; bottom: 20%; box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5); animation: cloudfloat 3s infinite alternate ease-in-out; transition: 1s ease-in-out;
}
.cloud:before, .cloud:after { width: 50px; height: 50px; content: ""; background-color: white; border-radius: 50%; position: absolute;
}
.cloud:before { transform: translateY(-45%) translateX(20%);
}
.cloud:after { transform: translateY(-30%) translateX(75%);
}
.cloud .rain { width: 4px; height: 20px; background-color: white;
}
@keyframes cloudfloat { 100% { transform: translateY(5px); }
}
.rain { position: absolute; left: 30px; transform: translateY(10px); animation: rain 2s infinite;
}
.rain2 { left: 50px; animation: rain 2s -0.3s infinite;
}
.rain3 { left: 75px; animation: rain 2s -0.5s infinite;
}
@keyframes rain { 100% { transform: translateY(65px); opacity: 0; }
}
.temsvg { position: absolute; opacity: 0.3; transition: 1s ease-in-out;
}
.temsvg circle { fill: white;
}
.temsvg text { font-size: 4px; fill: white; opacity: 0;
}
.temsvg polyline { fill: none; stroke: white; stroke-width: 0.4px;
}
.textarea { display: inline-block; position: absolute; left: 10%; bottom: 10%; color: rgba(255, 255, 255, 0.8);
}
.textarea .temp { font-size: 70px; font-weight: 400; line-height: 80px;
}
.textarea .address { font-size: 13px; margin-top: 1px;
}
.textarea .content { font-size: 11px; margin-top: 1px;
}
.bottom { width: 100%; height: 32px; display: inline-flex; justify-content: center; background-color: white; border-radius: 0px 0px 10px 10px; transition: 1s ease-in-out; cursor: pointer;
}
.bottom .arrow { width: 10px; height: 10px; position: absolute; border-right: 3px solid rgba(113, 114, 123, 0.5); border-bottom: 3px solid rgba(113, 114, 123, 0.5); border-radius: 3px; transform: rotate(45deg); left: 46%; top: 0px; animation: arrow 1s ease-in-out infinite alternate; transition: 1.5s;
}
@keyframes arrow { 100% { top: -5px; }
}
.dayweather { width: calc(100% / 7 - 5px); height: 100%; text-align: center; letter-spacing: 1px; margin: 1px; margin-top: 8px; opacity: 0; transition: 1s ease-in-out; bottom: -25px;
}
.dayweather h3 { font-size: 9px; font-weight: 400; color: #5E5E62; margin-bottom: 6px; width: 80%; margin-left: auto; margin-right: auto;
}
.dayweather .icon { width: 80%; height: 50%; max-width: 40px; min-width: 30px;
}
.dayweather .icon .sun { fill: #FFD045; stroke: rgba(255, 208, 69, 0.5); stroke-width: 8px; stroke-dasharray: 1px;
}
.dayweather .icon .cloud { fill: #D8D9E6;
}
.dayweather .icon .rain { fill: #66CDDD;
}
.dayweather .icon .thunder { fill: #FFD045;
}
.dayweather5 .icon .cloud { fill: #AEAECD;
}
.bottom .dayweather:nth-child(1) { transition-delay: 0s;
}
.bottom .dayweather:nth-child(3) { transition-delay: 0.1s;
}
.bottom .dayweather:nth-child(4) { transition-delay: 0.2s;
}
.bottom .dayweather:nth-child(5) { transition-delay: 0.3s;
}
.bottom .dayweather:nth-child(6) { transition-delay: 0.4s;
}
.bottom .dayweather:nth-child(7) { transition-delay: 0.5s;
}
.bottom .dayweather:nth-child(8) { transition-delay: 0.6s;
}
#tempshow { display: none;
}
#tempshow:checked + .top .moon, #tempshow:checked + .top .cloud { opacity: 0.4;
}
#tempshow:checked + .top .temsvg, #tempshow:checked + .top .temsvg text { opacity: 1;
}
#tempshow:checked + .top .alert { opacity: 0;
}
Weather Box - Script Codes
Weather Box - Script Codes
Home Page Home
Developer ULRIKA PAN
Username ulrikapan
Uploaded November 14, 2022
Rating 3
Size 6,637 Kb
Views 10,120
Do you need developer help for Weather Box?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

ULRIKA PAN (ulrikapan) Script Codes
Name
Wave button
Mobile Profile UI
Icon1 MG
SVG social icon
Image center and RWD method
A Pen by ULRIKA PAN
HTML-form
Slide Down Page
SVG Animate
Google-like button
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!