<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">&#8457;</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 */

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.