<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="background">
<div class="Circle1"></div>
<div class="Circle2"></div>
<div class="Circle3"></div>
<div class="content">
<h1 class="Condition"><i class="material-icons sun">wb_sunny</i> Sunny</h1>
<h1 class="Temp">72<span id="F">℉</span></h1>
<h1 class="Time">09:35</h1>
<h1 class="Location"><i class="material-icons locationIcon">place</i> Raleigh, NC</h1>
</div>
</div>
</body>
*{
padding: 0;
margin: 0;
color: #FFF;
}
body{
background-color: #ededed;
}
.container{
overflow: hidden;
z-index: 10;
position: relative;
margin: 150px auto;
height: 90px;
width: 300px;
background-color: #F17022;
border-radius: 10px;
box-shadow: 2px 2px 1px rgba(0,0,0,0.2);
}
/* BACKGROUND */
.Circle1{
z-index: 100;
position: absolute;
height: 80px;
width: 80px;
right: -20px;
top: -30px;
border-radius: 50%;
background-color: rgba(253,184,19,1);
animation: enlarge;
animation-duration: 5s;
animation-iteration-count: infinite;
}
.Circle2{
z-index: 80;
position: absolute;
height: 150px;
width: 150px;
right: -50px;
top: -70px;
border-radius: 50%;
background-color: rgba(246,140,31,0.7);
animation: enlarge;
animation-duration: 7s;
animation-iteration-count: infinite;
}
.Circle3{
z-index: 50;
position: absolute;
height: 200px;
width: 200px;
right: -50px;
top: -100px;
border-radius: 50%;
background-color: rgba(241,125,45,0.7);
animation: enlarge;
animation-duration: 10s;
animation-iteration-count: infinite;
}
/* CONTENT */
.sun{
z-index: 1000;
font-size: 15px !important;
}
.Condition{
z-index: 1000;
position: absolute;
font-family: "Roboto", sans-serif;
font-weight: 100;
font-size: 20px;
left: 20px;
top: 10px;
}
.Temp{
z-index: 1000;
position: absolute;
font-family: "Roboto", sans-serif;
font-size: 35px;
font-weight: 400;
left: 20px;
bottom: 5px;
}
#F{
z-index: 1000;
font-family: "Roboto",sans-serif;
font-weight: 100;
font-size: 30px;
}
.Time{
z-index: 1000;
position: absolute;
font-family: "Noto Sans", sans-serif;
font-size: 18px;
font-weight: 200;
right: 20px;
top: 10px;
}
.locationIcon{
z-index: 1000;
font-size: 10px !important;
}
.Location{
z-index: 1000;
position: absolute;
font-family: "Noto Sans", sans-serif;
font-size: 12px;
font-weight: 200;
right: 20px;
bottom: 15px;
}
@keyframes enlarge{
50%{
transform: scale(1.2);
}
}
/* Inspiration from https://dribbble.com/shots/2307228-Weather-Widget
Colors and fonts that are used here are different along with an addition of the subtle animation */
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.