Weather widget

Developer
Tom Lutzenberger
Size
2,486 Kb
Views
50,600
  1. Weather widget Previews
  2. Weather widget HTML Codes
  3. Weather widget CSS Codes

How do I make an weather widget?

Use-case for meteocons.css https://tomlutzenberger.github.io/meteocons.css/. What is a weather widget? How do you make a weather widget? This script and codes were developed by Tom Lutzenberger on 24 August 2022, Wednesday.

Weather widget Previews
IQ Test

Weather widget - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Weather widget</title> <link href="https://tomlutzenberger.github.io/meteocons.css/dist/meteocons.min.css" rel="stylesheet"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="main container"> <div class="row"> <div class="col-xs-12"> <div class="col-xs-12 col-sm-6 col-sm-offset-3 col-lg-4 col-lg-offset-4 weather-panel"> <div class="col-xs-6"> <h2>Lucerne<br><small>May 24, 2016</small></h2> <p class="h3"><i class="mi mi-fw mi-lg mi-rain-heavy"></i> Rainy</p> </div> <div class="col-xs-6 text-center"> <div class="h1 temperature"> <span>12°</span> <br> <small>8° / 13°</small> </div> </div> <div class="col-xs-12"> <ul class="list-inline row forecast"> <li class="col-xs-4 col-sm-2 text-center"> <h3 class="h5">Wed</h3> <p><i class="mi mi-fw mi-2x mi-cloud-sun"></i><br>9°/18°</p> </li> <li class="col-xs-4 col-sm-2 text-center"> <h3 class="h5">Thu</h3> <p><i class="mi mi-fw mi-2x mi-sun"></i><br>12°/23°</p> </li> <li class="col-xs-4 col-sm-2 text-center"> <h3 class="h5">Fri</h3> <p><i class="mi mi-fw mi-2x mi-cloud-sun"></i><br>14°/24°</p> </li> <li class="col-xs-4 col-sm-2 text-center"> <h3 class="h5">Sat</h3> <p><i class="mi mi-fw mi-2x mi-rain"></i><br>15°/23°</p> </li> <li class="col-xs-4 col-sm-2 text-center"> <h3 class="h5">Sun</h3> <p><i class="mi mi-fw mi-2x mi-rain-heavy"></i><br>15°/22°</p> </li> <li class="col-xs-4 col-sm-2 text-center"> <h3 class="h5">Mon</h3> <p><i class="mi mi-fw mi-2x mi-clouds"></i><br>12°/17°</p> </li> </ul> </div> </div> </div> </div>
</div>
</body>
</html>

Weather widget - Script Codes CSS Codes

.main { margin-top: 50px;
}
.weather-panel { background-image: url("https://unsplash.it/600/400?image=1043&blur"); background-size: cover; border-radius: 20px; box-shadow: 25px 25px 40px 0px rgba(0, 0, 0, 0.33); color: #fff; overflow: hidden; position: relative;
}
.weather-panel small { color: inherit; font-size: 50%;
}
.weather-panel ul.forecast > li { border-top: 1px solid #fff;
}
.weather-panel .temperature > span { font-size: 2em;
}
Weather widget - Script Codes
Weather widget - Script Codes
Home Page Home
Developer Tom Lutzenberger
Username tomlutzenberger
Uploaded August 24, 2022
Rating 3
Size 2,486 Kb
Views 50,600
Do you need developer help for Weather widget?

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!

Tom Lutzenberger (tomlutzenberger) Script Codes
Name
Hxgn
Palindrome check
Square-Box Vertical Center - Method 2
Pseudo ASCII-Art
CSS Folders
Standard Template
Square-Box Vertical Center
Auto-scaling iframes
A Pen by Tom Lutzenberger
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!