Flat CSS3 Weather Widget

Developer
Clément Guillou
Size
5,381 Kb
Views
32,384
  1. Flat CSS3 Weather Widget Previews
  2. Flat CSS3 Weather Widget HTML Codes
  3. Flat CSS3 Weather Widget CSS Codes
  4. Flat CSS3 Weather Widget JS Codes

How do I make an flat css3 weather widget?

Based on Julia Khusainova Dribbble project.. What is a flat css3 weather widget? How do you make a flat css3 weather widget? This script and codes were developed by Clément Guillou on 04 July 2022, Monday.

Flat CSS3 Weather Widget Previews
IQ Test

Flat CSS3 Weather Widget - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flat CSS3 Weather Widget</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /* Import Icon fonts and web font */
@import "http://fonts.googleapis.com/css?family=Open+Sans:400,300,700";
@import "http://weloveiconfonts.com/api/?family=entypo";
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
/* entypo */
[class*="entypo-"]:before { font-family: 'entypo', sans-serif;
}
/* fontawesome */
[class*="fontawesome-"]:before { font-family: 'FontAwesome', sans-serif;
}
/* Colors declarations */
/* General styles */
.wrapper { width: 600px; height: 480px; margin: 10% auto; background-color: #1F222A; border-radius: 7px;
}
body { color: #eee; font-family: 'Open Sans', sans-serif; background-color: #E0E1E3;
}
nav { width: 120px; height: 100%; float: left; background-color: #373B46; border-radius: 7px;
}
nav ul li { width: 120px; height: 90px; float: left; text-align: center; line-height: 90px; background-color: #373B46;
}
nav ul li.last { height: 100px; line-height: 140px;
}
nav ul li.active { background-color: #4b4e57; border-radius: 7px 0px 0px 0px;
}
nav ul li a { color: #eee; font-size: 2.2em; text-decoration: none; transition: font-size 0.2s;
}
nav ul li a:hover { font-size: 2.6em;
}
section { height: 100%; box-sizing: border-box; padding: 10px 40px; float: left; position: relative; background-color: #1F222A; border-radius: 7px;
}
section h1 { width: 400px; padding: 20px 0px 35px 0px; position: relative; font-size: 1.5em; border-bottom: 2px solid #4b4e57;
}
section h1 a.add { width: 50px; height: 50px; position: absolute; top: 10px; right: 0px; color: #4b4e57; font-size: 2.4em; text-align: center; line-height: 45px; text-decoration: none; background-color: black; border-radius: 3px; transition: color 0.5s;
}
section h1 a.add:hover { color: #eee;
}
section .temperature { padding: 40px 0px; color: #3D414C; font-size: 6em; transition: color 0.5s ease;
}
section .temperature:hover { color: yellow;
}
section .temperature h2 { display: inline; color: #eee; font-weight: 300;
}
section .temperature h2 span.degree-symbol { display: inline-block; margin: 0px 15px; font-size: 0.6em; vertical-align: top;
}
section .temperature h2 span.celcius { display: inline-block; margin: 10px 0px 0px 15px; color: #3D414C; font-size: 0.3em; vertical-align: top;
}
section ul { padding: 5px; margin-bottom: 70px;
}
section ul li { display: block; float: left; margin-right: 60px; color: #3D414C; font-size: 2em;
}
section ul li:last-child { margin-right: 0px;
}
section ul li span { padding-left: 10px; color: #eee; font-size: 0.6em; line-height: 30px; vertical-align: top;
}
section .bullets { height: 70px; color: #3D414C; text-align: center;
}
section .bullets span { margin-right: 10px; font-size: 0.6em;
}
section .bullets span.active { color: #eee; font-size: 0.8em;
}
section a { color: #60646e; font-size: 1.2em; text-decoration: none; transition: color 0.5s;
}
section a:hover { color: #eee;
}
section a .external-link { padding-left: 5px; font-size: 0.6em; vertical-align: middle;
}
section .share { width: 100px; height: 90px; position: absolute; bottom: 20px; right: -10px; color: #eee; font-size: 2em; text-align: center; line-height: 90px; background-color: rgba(210, 58, 81, 0.9); transition: right 0.2s;
}
section .share:hover { right: -20px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="wrapper"> <nav role='navigation'> <ul> <li class="active"><a href="#" class="fontawesome-search"></a></li> <li><a href="#" class="fontawesome-th-large"></a></li> <li><a href="#" class="fontawesome-file-alt"></a></li> <li><a href="#" class="fontawesome-calendar"></a></li> <li class="last"><a href="#" class="fontawesome-cog"></a></li> </ul> </nav> <section> <h1>Los Angeles, CA <a href="#" class="add">+</a></h1> <div class="temperature entypo-light-up"> <h2>64<span class="degree-symbol">°</span>F<span class="celcius">| C</span></h2> </div> <ul> <li class="fontawesome-leaf left"> <span>4 mph</span> </li> <li class="fontawesome-tint center"> <span>65%</span> </li> <li class="fontawesome-umbrella right"> <span>10%</span> </li> </ul> <div class="bullets"> <span class="entypo-record active"></span> <span class="entypo-record"></span> <span class="entypo-record"></span> </div> <a href="#">View on Wiki <span class="external-link fontawesome-external-link"></span></a> <a href="#" class="share fontawesome-share"></a> </section>
</div>
<div class="result"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Flat CSS3 Weather Widget - Script Codes CSS Codes

/* Import Icon fonts and web font */
@import "http://fonts.googleapis.com/css?family=Open+Sans:400,300,700";
@import "http://weloveiconfonts.com/api/?family=entypo";
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
/* entypo */
[class*="entypo-"]:before { font-family: 'entypo', sans-serif;
}
/* fontawesome */
[class*="fontawesome-"]:before { font-family: 'FontAwesome', sans-serif;
}
/* Colors declarations */
/* General styles */
.wrapper { width: 600px; height: 480px; margin: 10% auto; background-color: #1F222A; border-radius: 7px;
}
body { color: #eee; font-family: 'Open Sans', sans-serif; background-color: #E0E1E3;
}
nav { width: 120px; height: 100%; float: left; background-color: #373B46; border-radius: 7px;
}
nav ul li { width: 120px; height: 90px; float: left; text-align: center; line-height: 90px; background-color: #373B46;
}
nav ul li.last { height: 100px; line-height: 140px;
}
nav ul li.active { background-color: #4b4e57; border-radius: 7px 0px 0px 0px;
}
nav ul li a { color: #eee; font-size: 2.2em; text-decoration: none; transition: font-size 0.2s;
}
nav ul li a:hover { font-size: 2.6em;
}
section { height: 100%; box-sizing: border-box; padding: 10px 40px; float: left; position: relative; background-color: #1F222A; border-radius: 7px;
}
section h1 { width: 400px; padding: 20px 0px 35px 0px; position: relative; font-size: 1.5em; border-bottom: 2px solid #4b4e57;
}
section h1 a.add { width: 50px; height: 50px; position: absolute; top: 10px; right: 0px; color: #4b4e57; font-size: 2.4em; text-align: center; line-height: 45px; text-decoration: none; background-color: black; border-radius: 3px; transition: color 0.5s;
}
section h1 a.add:hover { color: #eee;
}
section .temperature { padding: 40px 0px; color: #3D414C; font-size: 6em; transition: color 0.5s ease;
}
section .temperature:hover { color: yellow;
}
section .temperature h2 { display: inline; color: #eee; font-weight: 300;
}
section .temperature h2 span.degree-symbol { display: inline-block; margin: 0px 15px; font-size: 0.6em; vertical-align: top;
}
section .temperature h2 span.celcius { display: inline-block; margin: 10px 0px 0px 15px; color: #3D414C; font-size: 0.3em; vertical-align: top;
}
section ul { padding: 5px; margin-bottom: 70px;
}
section ul li { display: block; float: left; margin-right: 60px; color: #3D414C; font-size: 2em;
}
section ul li:last-child { margin-right: 0px;
}
section ul li span { padding-left: 10px; color: #eee; font-size: 0.6em; line-height: 30px; vertical-align: top;
}
section .bullets { height: 70px; color: #3D414C; text-align: center;
}
section .bullets span { margin-right: 10px; font-size: 0.6em;
}
section .bullets span.active { color: #eee; font-size: 0.8em;
}
section a { color: #60646e; font-size: 1.2em; text-decoration: none; transition: color 0.5s;
}
section a:hover { color: #eee;
}
section a .external-link { padding-left: 5px; font-size: 0.6em; vertical-align: middle;
}
section .share { width: 100px; height: 90px; position: absolute; bottom: 20px; right: -10px; color: #eee; font-size: 2em; text-align: center; line-height: 90px; background-color: rgba(210, 58, 81, 0.9); transition: right 0.2s;
}
section .share:hover { right: -20px;
}

Flat CSS3 Weather Widget - Script Codes JS Codes

/* * Based on Julia Khusainova Dribbble project. * (http://dribbble.com/shots/1129568-Los-Angeles-CA) * */
Flat CSS3 Weather Widget - Script Codes
Flat CSS3 Weather Widget - Script Codes
Home Page Home
Developer Clément Guillou
Username cguillou
Uploaded July 04, 2022
Rating 4.5
Size 5,381 Kb
Views 32,384
Do you need developer help for Flat CSS3 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!

Clément Guillou (cguillou) Script Codes
Name
Fancy Flat Social Button Animation
UI Kit
Fancy Mobile Flat Navigation
Simple Dark Form
CSS3 Animated buttons
CSS3 Horror Style Text Effect
Create amazing Facebook ads 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!