<head>
<link href="https://fonts.googleapis.com/css?family=Raleway:400,900i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Comfortaa:400,700" rel="stylesheet">
</head>
<body>
<div class="container">
<div id="day"></div>
<div id="date"></div>
</div>
</body>
$background: #A4D7ED;
$background2: #DEC5E3;
$day: #DDF8E8;
$date: #DDF8E8;
$font: #324376;
$border: #A6EDE2;
body{
background: $background; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, $background, $background2); /*Safari 5.1-6*/
background: -o-linear-gradient(right, $background, $background2); /*Opera 11.1-12*/
background: -moz-linear-gradient(right, $background, $background2); /*Fx 3.6-15*/
background: linear-gradient(to right, $background, $background2); /*Standard*/
color: $font;
font-family: 'Comfortaa', cursive;
}
.container{
height: 250px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
justify-content: space-around;
padding: 10% 0 0 0;
margin: 0;
}
#day, #date{
text-align: center;
box-sizing: border-box;
height: 250px;
width: 230px;
border-radius: 10%;
border: 10px solid $border;
box-shadow:
2px 2px 2px $font,
-2px 2px 2px $font,
-2px -2px 2px $font,
2px -2px 2px $font
;
margin-top: 5%;
}
#day{
background: $day;
font-size: 20px;
font-weight: 900;
padding-top: 80px;
}
#day span{
display: block;
font-weight: 700;
font-size: 30px;
}
#date{
padding-top: 60px;
background: $date;
font-size: 30px;
font-weight: 900;
}
#date span{
display: block;
font-family: 'Raleway';
font-weight: 700;
font-size: 60px;
line-height: 45px;
padding-bottom: 15px;
}
View Compiled
var date = new Date();
var day = date.getDate();
var year = date.getFullYear();
var month = date.getMonth();
var monthLabels= ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var weekDay = date.getDay();
var weekDayLabels = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
//create function to grab day, month, date, year
function Day(){
month = monthLabels[month];
weekDay = weekDayLabels[weekDay];
document.getElementById("day").innerHTML = "Today is " + "<span>" + weekDay.toUpperCase() + "</span>";
document.getElementById("date").innerHTML = month.toUpperCase() + " " + "<span>" + day + "</span>" + year;
}
Day();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.