How to create a CSS-only Colorful Calendar Concept
Before We Start
Every developer needs clean and modern elements to develop their websites, It contains pictures and a user interface element within a website. The most important one and the first section that the user sees when the user enters a website. How to create a CSS-only Colorful Calendar Concept
So if you are a person who wishes to develop a website, you have to know how to create that properly.
How to create a CSS-only Colorful Calendar Concept
We are here to solve your problem. In this article we discuss how to create these elements. Before we start please read the below articles which easier you to understand the process, if you are new to development.
Step 1 – Add HTML
It’s too easy and simple. Just copy and paste below code in your HTML editor between <body> </body> tag.
<div class="route" id="index"></div>
<div class="route" id="oct-week-3"></div>
<div class="route" id="oct-week-4"></div>
<div class="route" id="nov-week-1"></div>
<div class="route" id="schedule"></div>
<main class="cal-device">
<header class="cal-header">
<div class="cal-subheader"></div>
<div class="cal-bar">
<div class="cal-button -left">
<i class="fa fa-bars -calendar"></i>
<a href="#index" class="fa fa-chevron-left -schedule"></a>
</div>
<div class="cal-title">
<div class="cal-heading -calendar">Calendar</div>
<div class="cal-heading -schedule">Wednesday, November 10</div>
</div>
<div class="cal-button -right">
<i class="fa fa-search"></i>
</div>
</div>
</header>
<section class="cal-app">
<header class="cal-week">
<div class="cal-weekday">SUN</div>
<div class="cal-weekday">MON</div>
<div class="cal-weekday">TUE</div>
<div class="cal-weekday">WED</div>
<div class="cal-weekday">THU</div>
<div class="cal-weekday">FRI</div>
<div class="cal-weekday">SAT</div>
</header>
<div class="cal-scene -calendar">
<div class="cal-month -october">
<header class="cal-header">
<a class="cal-link" href="#oct-week-1"><span>October</span></a>
<a class="cal-arrow" href="#nov-week-1"><i class="fa fa-chevron-up"></i></a>
<a class="cal-arrow" href="#oct-week-4"><i class="fa fa-chevron-up"></i></a>
</header>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a href="#schedule" class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
</div>
<div class="cal-month -november">
<header class="cal-header">
<a class="cal-link" href="#nov-week-1"><span>November</span></a>
<a class="cal-arrow"><i class="fa fa-chevron-up"></i></a>
</header>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a href="#schedule" class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a href="#schedule" class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a href="#schedule" class="cal-day"></a>
<a href="#schedule" class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
</div>
<div class="cal-month -december">
<header class="cal-header">
<a class="cal-link"><span>December</span></a>
<a class="cal-arrow" href="#nov-week-1"><i class="fa fa-chevron-down"></i></a>
<a class="cal-arrow" href="#oct-week-3"><i class="fa fa-chevron-down"></i></a>
</header>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a href="#schedule" class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a href="#schedule" class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
</div>
<div class="cal-month -january">
<header class="cal-header">
<div class="cal-link"><span>January</span></div>
<a class="cal-arrow" href="#oct-week-4"><i class="fa fa-chevron-down"></i></a>
</header>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
<a class="cal-day"></a>
</div>
</div>
<div class="cal-scene -schedule">
<div class="cal-item">
<div class="cal-time"><span>08:00</span></div>
<div class="cal-task">
<p>wake up</p>
</div>
</div>
<div class="cal-item -long">
<div class="cal-time"><span>12:15</span></div>
<div class="cal-task">
<p>meeting with the team, discussing the project requirements</p>
</div>
</div>
<div class="cal-item">
<div class="cal-time"><span>13:00</span></div>
<div class="cal-task">
<p>lunch with Peter</p>
<a><i class="fa fa-map-marker"></i>cafe <q>Petit brasserie</q></a>
</div>
</div>
<div class="cal-item">
<div class="cal-time"><span>14:30</span></div>
<div class="cal-task">
<p>call with Johnathan and Stevie</p>
</div>
</div>
<div class="cal-item -long">
<div class="cal-time"><span>16:45</span></div>
<div class="cal-task">
<p>project presentation</p>
<a><i class="fa fa-map-marker"></i>Head Office</a>
</div>
</div>
<div class="cal-item">
<div class="cal-time"><span>18:00</span></div>
<div class="cal-task">
<p>call with Johnathan and Stevie</p>
</div>
</div>
<div class="cal-item -long">
<div class="cal-time"><span>19:00</span></div>
<div class="cal-task">
<p>David's birthday party</p>
<a><i class="fa fa-map-marker"></i>bar <q>Tailor's John</q></a>
</div>
</div>
<div class="cal-item">
<div class="cal-time"></div>
<div class="cal-task"></div>
</div>
</div>
</section>
</main>
<div class="meta">
</div>
Step 2 – Add CSS
Copy and paste below code in your HTML editor between <style></style> tag.
<style>
@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600);
.cal-scene, .cal-button > *, .cal-title > .cal-heading, .cal-day {
-webkit-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
}
[id="index"]:target ~ .cal-device .cal-scene.-calendar > .cal-month, [id="index"]:target ~ .cal-device .cal-scene.-calendar > .cal-header {
-webkit-animation: fade-in 0.6s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) both;
animation: fade-in 0.6s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) both;
}
@-webkit-keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
[id="oct-week-3"]:target ~ .cal-device [href="#oct-week-3"] {
cursor: default;
}
[id="oct-week-3"]:target ~ .cal-device .cal-app {
background: -webkit-gradient(linear, left top, left bottom, from(#FBEC6B), color-stop(#F4BC6B), color-stop(#EB8B6B), color-stop(#E0536B), color-stop(#D6306D), color-stop(#A32C68), color-stop(#722A65), color-stop(#422662), color-stop(#12255D), color-stop(#275B75), color-stop(#3C918B), color-stop(#52C6A2), to(#66F8B6));
background: linear-gradient(#FBEC6B, #F4BC6B, #EB8B6B, #E0536B, #D6306D, #A32C68, #722A65, #422662, #12255D, #275B75, #3C918B, #52C6A2, #66F8B6);
}
[id="oct-week-4"]:target ~ .cal-device .cal-month {
-webkit-transform: translateY(-7.7142857143vh);
transform: translateY(-7.7142857143vh);
}
[id="oct-week-4"]:target ~ .cal-device .cal-month.-october > .cal-header {
-webkit-transform: translateY(7.7142857143vh) translateX(30.8571428571vh);
transform: translateY(7.7142857143vh) translateX(30.8571428571vh);
}
[id="oct-week-4"]:target ~ .cal-device .cal-scene.-calendar:before {
box-shadow: 0vh 7.7142857143vh #f3b56b, 7.7142857143vh 7.7142857143vh #f1ae6b, 15.4285714286vh 7.7142857143vh #f0a76b, 23.1428571429vh 7.7142857143vh #efa06b, 30.8571428571vh 7.7142857143vh #ee996b, 38.5714285714vh 7.7142857143vh #ec926b, 46.2857142857vh 7.7142857143vh #eb8b6b, 0vh 15.4285714286vh #e9836b, 7.7142857143vh 15.4285714286vh #e87b6b, 15.4285714286vh 15.4285714286vh #e6736b, 23.1428571429vh 15.4285714286vh #e56b6b, 30.8571428571vh 15.4285714286vh #e3636b, 38.5714285714vh 15.4285714286vh #e25b6b, 46.2857142857vh 15.4285714286vh #e0536b, 0vh 23.1428571429vh #df4e6b, 7.7142857143vh 23.1428571429vh #dd496c, 15.4285714286vh 23.1428571429vh #dc446c, 23.1428571429vh 23.1428571429vh #da3f6c, 30.8571428571vh 23.1428571429vh #d93a6c, 38.5714285714vh 23.1428571429vh #d7356d, 46.2857142857vh 23.1428571429vh #d6306d, 0vh 30.8571428571vh #cf2f6c, 7.7142857143vh 30.8571428571vh #c72f6c, 15.4285714286vh 30.8571428571vh #c02e6b, 23.1428571429vh 30.8571428571vh #b92e6a, 30.8571428571vh 30.8571428571vh #b22d69, 38.5714285714vh 30.8571428571vh #aa2d69, 46.2857142857vh 30.8571428571vh #a32c68, 0vh 38.5714285714vh #9c2c68, 7.7142857143vh 38.5714285714vh #952b67, 15.4285714286vh 38.5714285714vh #8e2b67, 23.1428571429vh 38.5714285714vh #872b66, 30.8571428571vh 38.5714285714vh #802b66, 38.5714285714vh 38.5714285714vh #792a65, 46.2857142857vh 38.5714285714vh #722a65, 0vh 46.2857142857vh #6b2965, 7.7142857143vh 46.2857142857vh #642964, 15.4285714286vh 46.2857142857vh #5d2864, 23.1428571429vh 46.2857142857vh #572863, 30.8571428571vh 46.2857142857vh #502763, 38.5714285714vh 46.2857142857vh #492762, 46.2857142857vh 46.2857142857vh #422662, 0vh 54vh #3b2661, 7.7142857143vh 54vh #342661, 15.4285714286vh 54vh #2d2660, 23.1428571429vh 54vh #27255f, 30.8571428571vh 54vh #20255e, 38.5714285714vh 54vh #19255e, 46.2857142857vh 54vh #12255d, 0vh 61.7142857143vh #152d60, 7.7142857143vh 61.7142857143vh #183464, 15.4285714286vh 61.7142857143vh #1b3c67, 23.1428571429vh 61.7142857143vh #1e446b, 30.8571428571vh 61.7142857143vh #214c6e, 38.5714285714vh 61.7142857143vh #245372, 46.2857142857vh 61.7142857143vh #275b75, 0vh 69.4285714286vh #2a6378, 7.7142857143vh 69.4285714286vh #2d6a7b, 15.4285714286vh 69.4285714286vh #30727e, 23.1428571429vh 69.4285714286vh #337a82, 30.8571428571vh 69.4285714286vh #368285, 38.5714285714vh 69.4285714286vh #398988, 46.2857142857vh 69.4285714286vh #3c918b, 0vh 77.1428571429vh #3f998e, 7.7142857143vh 77.1428571429vh #42a092, 15.4285714286vh 77.1428571429vh #45a895, 23.1428571429vh 77.1428571429vh #49af98, 30.8571428571vh 77.1428571429vh #4cb79b, 38.5714285714vh 77.1428571429vh #4fbe9f, 46.2857142857vh 77.1428571429vh #52c6a2, 0vh 84.8571428571vh #55cda5, 7.7142857143vh 84.8571428571vh #58d4a8, 15.4285714286vh 84.8571428571vh #5bdbab, 23.1428571429vh 84.8571428571vh #5de3ad, 30.8571428571vh 84.8571428571vh #60eab0, 38.5714285714vh 84.8571428571vh #63f1b3, 46.2857142857vh 84.8571428571vh #66f8b6, 0vh 92.5714285714vh #6df8b9, 7.7142857143vh 92.5714285714vh #74f9bd, 15.4285714286vh 92.5714285714vh #7bf9c0, 23.1428571429vh 92.5714285714vh #82f9c3, 30.8571428571vh 92.5714285714vh #89f9c6, 38.5714285714vh 92.5714285714vh #90faca, 46.2857142857vh 92.5714285714vh #97facd;
}
[id="oct-week-4"]:target ~ .cal-device .cal-app {
background: -webkit-gradient(linear, left top, left bottom, from(#F4BC6B), color-stop(#EB8B6B), color-stop(#E0536B), color-stop(#D6306D), color-stop(#A32C68), color-stop(#722A65), color-stop(#422662), color-stop(#12255D), color-stop(#275B75), color-stop(#3C918B), color-stop(#52C6A2), to(#66F8B6));
background: linear-gradient(#F4BC6B, #EB8B6B, #E0536B, #D6306D, #A32C68, #722A65, #422662, #12255D, #275B75, #3C918B, #52C6A2, #66F8B6);
}
[id="oct-week-4"]:target ~ .cal-device [href="#oct-week-4"] {
z-index: -1;
}
[id="nov-week-1"]:target ~ .cal-device .cal-month {
-webkit-transform: translateY(-15.4285714286vh);
transform: translateY(-15.4285714286vh);
}
[id="nov-week-1"]:target ~ .cal-device .cal-month.-october > .cal-header {
-webkit-transform: translateY(7.7142857143vh) translateX(30.8571428571vh);
transform: translateY(7.7142857143vh) translateX(30.8571428571vh);
opacity: 0;
}
[id="nov-week-1"]:target ~ .cal-device .cal-app {
background: -webkit-gradient(linear, left top, left bottom, from(#EB8B6B), color-stop(#E0536B), color-stop(#D6306D), color-stop(#A32C68), color-stop(#722A65), color-stop(#422662), color-stop(#12255D), color-stop(#275B75), color-stop(#3C918B), color-stop(#52C6A2), to(#66F8B6));
background: linear-gradient(#EB8B6B, #E0536B, #D6306D, #A32C68, #722A65, #422662, #12255D, #275B75, #3C918B, #52C6A2, #66F8B6);
}
[id="nov-week-1"]:target ~ .cal-device .cal-scene.-calendar:before {
box-shadow: 0vh 7.7142857143vh #e9836b, 7.7142857143vh 7.7142857143vh #e87b6b, 15.4285714286vh 7.7142857143vh #e6736b, 23.1428571429vh 7.7142857143vh #e56b6b, 30.8571428571vh 7.7142857143vh #e3636b, 38.5714285714vh 7.7142857143vh #e25b6b, 46.2857142857vh 7.7142857143vh #e0536b, 0vh 15.4285714286vh #df4e6b, 7.7142857143vh 15.4285714286vh #dd496c, 15.4285714286vh 15.4285714286vh #dc446c, 23.1428571429vh 15.4285714286vh #da3f6c, 30.8571428571vh 15.4285714286vh #d93a6c, 38.5714285714vh 15.4285714286vh #d7356d, 46.2857142857vh 15.4285714286vh #d6306d, 0vh 23.1428571429vh #cf2f6c, 7.7142857143vh 23.1428571429vh #c72f6c, 15.4285714286vh 23.1428571429vh #c02e6b, 23.1428571429vh 23.1428571429vh #b92e6a, 30.8571428571vh 23.1428571429vh #b22d69, 38.5714285714vh 23.1428571429vh #aa2d69, 46.2857142857vh 23.1428571429vh #a32c68, 0vh 30.8571428571vh #9c2c68, 7.7142857143vh 30.8571428571vh #952b67, 15.4285714286vh 30.8571428571vh #8e2b67, 23.1428571429vh 30.8571428571vh #872b66, 30.8571428571vh 30.8571428571vh #802b66, 38.5714285714vh 30.8571428571vh #792a65, 46.2857142857vh 30.8571428571vh #722a65, 0vh 38.5714285714vh #6b2965, 7.7142857143vh 38.5714285714vh #642964, 15.4285714286vh 38.5714285714vh #5d2864, 23.1428571429vh 38.5714285714vh #572863, 30.8571428571vh 38.5714285714vh #502763, 38.5714285714vh 38.5714285714vh #492762, 46.2857142857vh 38.5714285714vh #422662, 0vh 46.2857142857vh #3b2661, 7.7142857143vh 46.2857142857vh #342661, 15.4285714286vh 46.2857142857vh #2d2660, 23.1428571429vh 46.2857142857vh #27255f, 30.8571428571vh 46.2857142857vh #20255e, 38.5714285714vh 46.2857142857vh #19255e, 46.2857142857vh 46.2857142857vh #12255d, 0vh 54vh #152d60, 7.7142857143vh 54vh #183464, 15.4285714286vh 54vh #1b3c67, 23.1428571429vh 54vh #1e446b, 30.8571428571vh 54vh #214c6e, 38.5714285714vh 54vh #245372, 46.2857142857vh 54vh #275b75, 0vh 61.7142857143vh #2a6378, 7.7142857143vh 61.7142857143vh #2d6a7b, 15.4285714286vh 61.7142857143vh #30727e, 23.1428571429vh 61.7142857143vh #337a82, 30.8571428571vh 61.7142857143vh #368285, 38.5714285714vh 61.7142857143vh #398988, 46.2857142857vh 61.7142857143vh #3c918b, 0vh 69.4285714286vh #3f998e, 7.7142857143vh 69.4285714286vh #42a092, 15.4285714286vh 69.4285714286vh #45a895, 23.1428571429vh 69.4285714286vh #49af98, 30.8571428571vh 69.4285714286vh #4cb79b, 38.5714285714vh 69.4285714286vh #4fbe9f, 46.2857142857vh 69.4285714286vh #52c6a2, 0vh 77.1428571429vh #55cda5, 7.7142857143vh 77.1428571429vh #58d4a8, 15.4285714286vh 77.1428571429vh #5bdbab, 23.1428571429vh 77.1428571429vh #5de3ad, 30.8571428571vh 77.1428571429vh #60eab0, 38.5714285714vh 77.1428571429vh #63f1b3, 46.2857142857vh 77.1428571429vh #66f8b6, 0vh 84.8571428571vh #6df8b9, 7.7142857143vh 84.8571428571vh #74f9bd, 15.4285714286vh 84.8571428571vh #7bf9c0, 23.1428571429vh 84.8571428571vh #82f9c3, 30.8571428571vh 84.8571428571vh #89f9c6, 38.5714285714vh 84.8571428571vh #90faca, 46.2857142857vh 84.8571428571vh #97facd;
}
[id="nov-week-2"]:target ~ .cal-device .cal-month {
-webkit-transform: translateY(-23.1428571429vh);
transform: translateY(-23.1428571429vh);
}
[id="nov-week-2"]:target ~ .cal-device .cal-month.-october > .cal-header {
opacity: 0;
}
[id="nov-week-2"]:target ~ .cal-device .cal-scene.-calendar:before {
box-shadow: 0vh 7.7142857143vh #df4e6b, 7.7142857143vh 7.7142857143vh #dd496c, 15.4285714286vh 7.7142857143vh #dc446c, 23.1428571429vh 7.7142857143vh #da3f6c, 30.8571428571vh 7.7142857143vh #d93a6c, 38.5714285714vh 7.7142857143vh #d7356d, 46.2857142857vh 7.7142857143vh #d6306d, 0vh 15.4285714286vh #cf2f6c, 7.7142857143vh 15.4285714286vh #c72f6c, 15.4285714286vh 15.4285714286vh #c02e6b, 23.1428571429vh 15.4285714286vh #b92e6a, 30.8571428571vh 15.4285714286vh #b22d69, 38.5714285714vh 15.4285714286vh #aa2d69, 46.2857142857vh 15.4285714286vh #a32c68, 0vh 23.1428571429vh #9c2c68, 7.7142857143vh 23.1428571429vh #952b67, 15.4285714286vh 23.1428571429vh #8e2b67, 23.1428571429vh 23.1428571429vh #872b66, 30.8571428571vh 23.1428571429vh #802b66, 38.5714285714vh 23.1428571429vh #792a65, 46.2857142857vh 23.1428571429vh #722a65, 0vh 30.8571428571vh #6b2965, 7.7142857143vh 30.8571428571vh #642964, 15.4285714286vh 30.8571428571vh #5d2864, 23.1428571429vh 30.8571428571vh #572863, 30.8571428571vh 30.8571428571vh #502763, 38.5714285714vh 30.8571428571vh #492762, 46.2857142857vh 30.8571428571vh #422662, 0vh 38.5714285714vh #3b2661, 7.7142857143vh 38.5714285714vh #342661, 15.4285714286vh 38.5714285714vh #2d2660, 23.1428571429vh 38.5714285714vh #27255f, 30.8571428571vh 38.5714285714vh #20255e, 38.5714285714vh 38.5714285714vh #19255e, 46.2857142857vh 38.5714285714vh #12255d, 0vh 46.2857142857vh #152d60, 7.7142857143vh 46.2857142857vh #183464, 15.4285714286vh 46.2857142857vh #1b3c67, 23.1428571429vh 46.2857142857vh #1e446b, 30.8571428571vh 46.2857142857vh #214c6e, 38.5714285714vh 46.2857142857vh #245372, 46.2857142857vh 46.2857142857vh #275b75, 0vh 54vh #2a6378, 7.7142857143vh 54vh #2d6a7b, 15.4285714286vh 54vh #30727e, 23.1428571429vh 54vh #337a82, 30.8571428571vh 54vh #368285, 38.5714285714vh 54vh #398988, 46.2857142857vh 54vh #3c918b, 0vh 61.7142857143vh #3f998e, 7.7142857143vh 61.7142857143vh #42a092, 15.4285714286vh 61.7142857143vh #45a895, 23.1428571429vh 61.7142857143vh #49af98, 30.8571428571vh 61.7142857143vh #4cb79b, 38.5714285714vh 61.7142857143vh #4fbe9f, 46.2857142857vh 61.7142857143vh #52c6a2, 0vh 69.4285714286vh #55cda5, 7.7142857143vh 69.4285714286vh #58d4a8, 15.4285714286vh 69.4285714286vh #5bdbab, 23.1428571429vh 69.4285714286vh #5de3ad, 30.8571428571vh 69.4285714286vh #60eab0, 38.5714285714vh 69.4285714286vh #63f1b3, 46.2857142857vh 69.4285714286vh #66f8b6, 0vh 77.1428571429vh #6df8b9, 7.7142857143vh 77.1428571429vh #74f9bd, 15.4285714286vh 77.1428571429vh #7bf9c0, 23.1428571429vh 77.1428571429vh #82f9c3, 30.8571428571vh 77.1428571429vh #89f9c6, 38.5714285714vh 77.1428571429vh #90faca, 46.2857142857vh 77.1428571429vh #97facd;
}
[id="nov-week-2"]:target ~ .cal-device .cal-app {
background: -webkit-gradient(linear, left top, left bottom, from(#E0536B), color-stop(#D6306D), color-stop(#A32C68), color-stop(#722A65), color-stop(#422662), color-stop(#12255D), color-stop(#275B75), color-stop(#3C918B), color-stop(#52C6A2), to(#66F8B6));
background: linear-gradient(#E0536B, #D6306D, #A32C68, #722A65, #422662, #12255D, #275B75, #3C918B, #52C6A2, #66F8B6);
}
[id="schedule"]:target ~ .cal-device .cal-bar .-schedule {
opacity: 1;
}
[id="schedule"]:target ~ .cal-device .cal-bar .-calendar {
opacity: 0;
}
[id="schedule"]:target ~ .cal-device .cal-scene.-schedule {
opacity: 1;
z-index: 2;
}
[id="schedule"]:target ~ .cal-device .cal-time > *, [id="schedule"]:target ~ .cal-device .cal-task > * {
-webkit-transform: translateX(0);
transform: translateX(0);
}
[id="schedule"]:target ~ .cal-device .cal-item:nth-child(1) .cal-time > *, [id="schedule"]:target ~ .cal-device .cal-item:nth-child(1) .cal-task > * {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
[id="schedule"]:target ~ .cal-device .cal-item:nth-child(2) .cal-time > *, [id="schedule"]:target ~ .cal-device .cal-item:nth-child(2) .cal-task > * {
-webkit-transition-delay: 0.06s;
transition-delay: 0.06s;
}
[id="schedule"]:target ~ .cal-device .cal-item:nth-child(3) .cal-time > *, [id="schedule"]:target ~ .cal-device .cal-item:nth-child(3) .cal-task > * {
-webkit-transition-delay: 0.12s;
transition-delay: 0.12s;
}
[id="schedule"]:target ~ .cal-device .cal-item:nth-child(4) .cal-time > *, [id="schedule"]:target ~ .cal-device .cal-item:nth-child(4) .cal-task > * {
-webkit-transition-delay: 0.18s;
transition-delay: 0.18s;
}
[id="schedule"]:target ~ .cal-device .cal-item:nth-child(5) .cal-time > *, [id="schedule"]:target ~ .cal-device .cal-item:nth-child(5) .cal-task > * {
-webkit-transition-delay: 0.24s;
transition-delay: 0.24s;
}
[id="schedule"]:target ~ .cal-device .cal-item:nth-child(6) .cal-time > *, [id="schedule"]:target ~ .cal-device .cal-item:nth-child(6) .cal-task > * {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
[id="schedule"]:target ~ .cal-device .cal-item:nth-child(7) .cal-time > *, [id="schedule"]:target ~ .cal-device .cal-item:nth-child(7) .cal-task > * {
-webkit-transition-delay: 0.36s;
transition-delay: 0.36s;
}
[id="schedule"]:target ~ .cal-device .cal-scene.-calendar, [id="schedule"]:target ~ .cal-device .cal-scene.-calendar * {
-webkit-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.cal-device {
width: 54vh;
height: 96vh;
background: white;
}
.cal-device > .cal-header {
height: 11.5714285714vh;
background: #1c3e69;
}
.cal-app {
height: 84.4285714286vh;
width: 100%;
background: -webkit-gradient(linear, left top, left bottom, from(#FBEC6B), color-stop(#F4BC6B), color-stop(#EB8B6B), color-stop(#E0536B), color-stop(#D6306D), color-stop(#A32C68), color-stop(#722A65), color-stop(#422662), color-stop(#12255D), color-stop(#275B75), color-stop(#3C918B), color-stop(#52C6A2), to(#66F8B6));
background: linear-gradient(#FBEC6B, #F4BC6B, #EB8B6B, #E0536B, #D6306D, #A32C68, #722A65, #422662, #12255D, #275B75, #3C918B, #52C6A2, #66F8B6);
}
.cal-week {
height: 7.7142857143vh;
width: 100%;
display: -webkit-box;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
}
.cal-weekday {
color: white;
width: 7.7142857143vh;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
z-index: 1;
font-weight: 600;
font-size: 2.5714285714vh;
}
.fa {
font-size: 2.5714285714vh;
}
.cal-scene {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.cal-scene.-calendar:before {
content: '';
display: block;
height: 7.7142857143vh;
width: 7.7142857143vh;
position: absolute;
top: -7.7142857143vh;
left: 0;
box-shadow: 0vh 7.7142857143vh #fae56b, 7.7142857143vh 7.7142857143vh #f9de6b, 15.4285714286vh 7.7142857143vh #f8d76b, 23.1428571429vh 7.7142857143vh #f7d16b, 30.8571428571vh 7.7142857143vh #f6ca6b, 38.5714285714vh 7.7142857143vh #f5c36b, 46.2857142857vh 7.7142857143vh #f4bc6b, 0vh 15.4285714286vh #f3b56b, 7.7142857143vh 15.4285714286vh #f1ae6b, 15.4285714286vh 15.4285714286vh #f0a76b, 23.1428571429vh 15.4285714286vh #efa06b, 30.8571428571vh 15.4285714286vh #ee996b, 38.5714285714vh 15.4285714286vh #ec926b, 46.2857142857vh 15.4285714286vh #eb8b6b, 0vh 23.1428571429vh #e9836b, 7.7142857143vh 23.1428571429vh #e87b6b, 15.4285714286vh 23.1428571429vh #e6736b, 23.1428571429vh 23.1428571429vh #e56b6b, 30.8571428571vh 23.1428571429vh #e3636b, 38.5714285714vh 23.1428571429vh #e25b6b, 46.2857142857vh 23.1428571429vh #e0536b, 0vh 30.8571428571vh #df4e6b, 7.7142857143vh 30.8571428571vh #dd496c, 15.4285714286vh 30.8571428571vh #dc446c, 23.1428571429vh 30.8571428571vh #da3f6c, 30.8571428571vh 30.8571428571vh #d93a6c, 38.5714285714vh 30.8571428571vh #d7356d, 46.2857142857vh 30.8571428571vh #d6306d, 0vh 38.5714285714vh #cf2f6c, 7.7142857143vh 38.5714285714vh #c72f6c, 15.4285714286vh 38.5714285714vh #c02e6b, 23.1428571429vh 38.5714285714vh #b92e6a, 30.8571428571vh 38.5714285714vh #b22d69, 38.5714285714vh 38.5714285714vh #aa2d69, 46.2857142857vh 38.5714285714vh #a32c68, 0vh 46.2857142857vh #9c2c68, 7.7142857143vh 46.2857142857vh #952b67, 15.4285714286vh 46.2857142857vh #8e2b67, 23.1428571429vh 46.2857142857vh #872b66, 30.8571428571vh 46.2857142857vh #802b66, 38.5714285714vh 46.2857142857vh #792a65, 46.2857142857vh 46.2857142857vh #722a65, 0vh 54vh #6b2965, 7.7142857143vh 54vh #642964, 15.4285714286vh 54vh #5d2864, 23.1428571429vh 54vh #572863, 30.8571428571vh 54vh #502763, 38.5714285714vh 54vh #492762, 46.2857142857vh 54vh #422662, 0vh 61.7142857143vh #3b2661, 7.7142857143vh 61.7142857143vh #342661, 15.4285714286vh 61.7142857143vh #2d2660, 23.1428571429vh 61.7142857143vh #27255f, 30.8571428571vh 61.7142857143vh #20255e, 38.5714285714vh 61.7142857143vh #19255e, 46.2857142857vh 61.7142857143vh #12255d, 0vh 69.4285714286vh #152d60, 7.7142857143vh 69.4285714286vh #183464, 15.4285714286vh 69.4285714286vh #1b3c67, 23.1428571429vh 69.4285714286vh #1e446b, 30.8571428571vh 69.4285714286vh #214c6e, 38.5714285714vh 69.4285714286vh #245372, 46.2857142857vh 69.4285714286vh #275b75, 0vh 77.1428571429vh #2a6378, 7.7142857143vh 77.1428571429vh #2d6a7b, 15.4285714286vh 77.1428571429vh #30727e, 23.1428571429vh 77.1428571429vh #337a82, 30.8571428571vh 77.1428571429vh #368285, 38.5714285714vh 77.1428571429vh #398988, 46.2857142857vh 77.1428571429vh #3c918b, 0vh 84.8571428571vh #3f998e, 7.7142857143vh 84.8571428571vh #42a092, 15.4285714286vh 84.8571428571vh #45a895, 23.1428571429vh 84.8571428571vh #49af98, 30.8571428571vh 84.8571428571vh #4cb79b, 38.5714285714vh 84.8571428571vh #4fbe9f, 46.2857142857vh 84.8571428571vh #52c6a2, 0vh 92.5714285714vh #55cda5, 7.7142857143vh 92.5714285714vh #58d4a8, 15.4285714286vh 92.5714285714vh #5bdbab, 23.1428571429vh 92.5714285714vh #5de3ad, 30.8571428571vh 92.5714285714vh #60eab0, 38.5714285714vh 92.5714285714vh #63f1b3, 46.2857142857vh 92.5714285714vh #66f8b6, 0vh 100.2857142857vh #6df8b9, 7.7142857143vh 100.2857142857vh #74f9bd, 15.4285714286vh 100.2857142857vh #7bf9c0, 23.1428571429vh 100.2857142857vh #82f9c3, 30.8571428571vh 100.2857142857vh #89f9c6, 38.5714285714vh 100.2857142857vh #90faca, 46.2857142857vh 100.2857142857vh #97facd;
-webkit-transition: box-shadow 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: box-shadow 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.cal-scene.-schedule {
z-index: -1;
opacity: 0;
}
[id="nov-week-1"]:target ~ .cal-device .cal-month.-november > .cal-header, [id="nov-week-2"]:target ~ .cal-device .cal-month.-november > .cal-header, .cal-device .cal-month.-october > .cal-header, .cal-device .cal-month.-december > .cal-header, .cal-device .cal-month.-january > .cal-header, .cal-month:first-child > .cal-header {
-webkit-transform: translateX(30.8571428571vh);
transform: translateX(30.8571428571vh);
}
[id="nov-week-1"]:target ~ .cal-device .cal-month.-november > .cal-header > .cal-link, [id="nov-week-2"]:target ~ .cal-device .cal-month.-november > .cal-header > .cal-link, .cal-device .cal-month.-october > .cal-header > .cal-link, .cal-device .cal-month.-december > .cal-header > .cal-link, .cal-device .cal-month.-january > .cal-header > .cal-link, .cal-month:first-child > .cal-header > .cal-link {
background-color: rgba(255, 255, 255, 0.4);
}
[id="nov-week-1"]:target ~ .cal-device .cal-month.-november > .cal-header > .cal-link > span, [id="nov-week-2"]:target ~ .cal-device .cal-month.-november > .cal-header > .cal-link > span, .cal-device .cal-month.-october > .cal-header > .cal-link > span, .cal-device .cal-month.-december > .cal-header > .cal-link > span, .cal-device .cal-month.-january > .cal-header > .cal-link > span, .cal-month:first-child > .cal-header > .cal-link > span {
-webkit-transform: translateX(calc(-50% - 1.9285714286vh)) translateY(-50%);
transform: translateX(calc(-50% - 1.9285714286vh)) translateY(-50%);
color: white;
}
[id="nov-week-1"]:target ~ .cal-device .cal-month.-november > .cal-header > .cal-arrow, [id="nov-week-2"]:target ~ .cal-device .cal-month.-november > .cal-header > .cal-arrow, .cal-device .cal-month.-october > .cal-header > .cal-arrow, .cal-device .cal-month.-december > .cal-header > .cal-arrow, .cal-device .cal-month.-january > .cal-header > .cal-arrow, .cal-month:first-child > .cal-header > .cal-arrow {
opacity: 1;
pointer-events: inherit;
}
[id="nov-week-1"]:target ~ .cal-device .cal-month.-november .cal-day, [id="nov-week-2"]:target ~ .cal-device .cal-month.-november .cal-day, .cal-device .cal-month.-october .cal-day, .cal-device .cal-month.-december .cal-day, .cal-device .cal-month.-january .cal-day, .cal-month:first-child .cal-day {
color: rgba(255, 255, 255, 0.4);
}
[id="nov-week-1"]:target ~ .cal-device .-october.cal-month.-november .cal-arrow, [id="nov-week-2"]:target ~ .cal-device .-october.cal-month.-november .cal-arrow, .cal-device .-october.cal-month .cal-arrow, .-october.cal-month:first-child .cal-arrow {
color: #EB8B6B;
}
[id="nov-week-1"]:target ~ .cal-device .-november.cal-month .cal-arrow, [id="nov-week-2"]:target ~ .cal-device .-november.cal-month .cal-arrow, .cal-device .-november.cal-month.-october .cal-arrow, .cal-device .-november.cal-month.-december .cal-arrow, .cal-device .-november.cal-month.-january .cal-arrow, .-november.cal-month:first-child .cal-arrow {
color: #D6306D;
}
[id="nov-week-1"]:target ~ .cal-device .-december.cal-month.-november .cal-arrow, [id="nov-week-2"]:target ~ .cal-device .-december.cal-month.-november .cal-arrow, .cal-device .-december.cal-month .cal-arrow, .-december.cal-month:first-child .cal-arrow {
color: #102152;
}
[id="nov-week-1"]:target ~ .cal-device .-january.cal-month.-november .cal-arrow, [id="nov-week-2"]:target ~ .cal-device .-january.cal-month.-november .cal-arrow, .cal-device .-january.cal-month .cal-arrow, .-january.cal-month:first-child .cal-arrow {
color: #97FACD;
}
[id="nov-week-1"]:target ~ .cal-device .cal-month.-december > .cal-header, [id="nov-week-2"]:target ~ .cal-device .cal-month.-december > .cal-header, .cal-device .cal-month.-november > .cal-header {
-webkit-transform: translateX(15.4285714286vh);
transform: translateX(15.4285714286vh);
}
[id="nov-week-1"]:target ~ .cal-device .cal-month.-december .cal-link, [id="nov-week-2"]:target ~ .cal-device .cal-month.-december .cal-link, .cal-device .cal-month.-november .cal-link {
background-color: white;
color: gray;
}
[id="nov-week-1"]:target ~ .cal-device .cal-month.-december .cal-link > span, [id="nov-week-2"]:target ~ .cal-device .cal-month.-december .cal-link > span, .cal-device .cal-month.-november .cal-link > span {
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
[id="nov-week-1"]:target ~ .cal-device .cal-month.-december .cal-arrow, [id="nov-week-2"]:target ~ .cal-device .cal-month.-december .cal-arrow, .cal-device .cal-month.-november .cal-arrow {
opacity: 0;
pointer-events: none;
}
[id="nov-week-1"]:target ~ .cal-device .cal-month.-december .cal-day, [id="nov-week-2"]:target ~ .cal-device .cal-month.-december .cal-day, .cal-device .cal-month.-november .cal-day {
color: white;
}
[id="nov-week-1"]:target ~ .cal-device .-november.cal-month.-december .cal-link span, [id="nov-week-2"]:target ~ .cal-device .-november.cal-month.-december .cal-link span, .cal-device .-november.cal-month .cal-link span {
color: #DA3F6C;
}
[id="nov-week-1"]:target ~ .cal-device .-december.cal-month .cal-link span, [id="nov-week-2"]:target ~ .cal-device .-december.cal-month .cal-link span, .cal-device .-december.cal-month.-november .cal-link span {
color: #26255F;
}
.cal-month {
display: block;
counter-reset: month;
-webkit-transition: -webkit-transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: -webkit-transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
z-index: 1;
}
.cal-month:first-child {
margin-top: -7.7142857143vh;
}
.cal-month:first-child > .cal-header {
top: 15.4285714286vh;
}
.cal-month:first-child ~ .cal-month {
margin-top: -7.7142857143vh;
}
.cal-month > .cal-header {
position: absolute;
height: 7.7142857143vh;
width: 23.1428571429vh;
padding: 2.2040816327vh;
z-index: 1;
-webkit-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.cal-month > .cal-header > .cal-link {
display: block;
height: 100%;
width: 100%;
font-size: 1.9285714286vh;
text-decoration: none;
color: gray;
text-transform: uppercase;
padding: 0.6428571429vh 5.1428571429vh;
border-radius: 2.5714285714vh;
background: white;
-webkit-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
font-weight: 600;
}
.cal-month > .cal-header > .cal-link > span {
display: block;
position: absolute;
top: 48%;
left: 50%;
-webkit-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.cal-month.-january {
margin-top: 0 !important;
}
.cal-subheader {
height: 3.8571428571vh;
width: 100%;
}
.cal-bar {
height: 7.7142857143vh;
display: -webkit-box;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
-webkit-box-align: center;
align-items: center;
}
.cal-bar > .cal-title {
-webkit-box-flex: 1;
flex-grow: 1;
height: 100%;
}
.cal-bar .-schedule {
opacity: 0;
}
.cal-button {
width: 7.7142857143vh;
height: 7.7142857143vh;
}
.cal-button > * {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
color: white;
text-decoration: none;
font-size: 3.0857142857vh;
}
.cal-title > .cal-heading {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
color: white;
font-size: 3.0857142857vh;
}
.cal-arrow {
position: absolute;
height: 7.7142857143vh;
width: 7.7142857143vh;
background: white;
top: 0;
right: 0;
padding: 1.2857142857vh;
background-clip: content-box;
border-radius: 50%;
opacity: 0;
pointer-events: none;
-webkit-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
text-decoration: none;
color: gray;
}
.cal-arrow .fa-chevron-up {
top: -1px;
}
.cal-day {
counter-increment: month;
width: 7.7142857143vh;
height: 7.7142857143vh;
display: block;
float: left;
text-decoration: none;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
color: white;
font-size: 2.5714285714vh;
}
.cal-day[href="#schedule"]:before {
background: rgba(255, 255, 255, 0.4);
}
.cal-day:before {
content: counter(month);
display: block;
height: 75%;
width: 75%;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
border-radius: 50%;
}
.cal-item {
height: 7.7142857143vh;
width: 100%;
display: -webkit-box;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
}
.cal-item.-long {
height: 15.4285714286vh;
}
.cal-item:nth-child(1) > .cal-time {
background-color: #fa739d;
}
.cal-item:nth-child(1) > .cal-task {
background-color: white;
}
.cal-item:nth-child(2) > .cal-time {
background-color: #f26993;
}
.cal-item:nth-child(2) > .cal-task {
background-color: #fcf5f7;
}
.cal-item:nth-child(3) > .cal-time {
background-color: #eb5e8a;
}
.cal-item:nth-child(3) > .cal-task {
background-color: #f9ecf0;
}
.cal-item:nth-child(4) > .cal-time {
background-color: #e35480;
}
.cal-item:nth-child(4) > .cal-task {
background-color: #f6e2e8;
}
.cal-item:nth-child(5) > .cal-time {
background-color: #dc4977;
}
.cal-item:nth-child(5) > .cal-task {
background-color: #f4d8e1;
}
.cal-item:nth-child(6) > .cal-time {
background-color: #d43f6d;
}
.cal-item:nth-child(6) > .cal-task {
background-color: #f1ced9;
}
.cal-item:nth-child(7) > .cal-time {
background-color: #cc3463;
}
.cal-item:nth-child(7) > .cal-task {
background-color: #eec5d1;
}
.cal-item:nth-child(8) > .cal-time {
background-color: #c52a5a;
}
.cal-item:nth-child(8) > .cal-task {
background-color: #ebbbca;
}
.cal-time {
width: 15.4285714286vh;
flex-basis: 15.4285714286vh;
height: 100%;
-webkit-box-pack: center;
justify-content: center;
line-height: 7.7142857143vh;
-webkit-box-align: center;
align-items: center;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
color: white;
}
.cal-time > * {
-webkit-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
-webkit-transform: translateX(-15.4285714286vh);
transform: translateX(-15.4285714286vh);
font-weight: 600;
font-size: 2.5714285714vh;
}
.cal-task {
flex-basis: 38.5714285714vh;
height: 100%;
background-color: white;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: start;
align-items: flex-start;
padding: 0 2.5714285714vh;
font-size: 1.9285714286vh;
}
.cal-task > p {
margin-top: 0;
margin-bottom: 0;
color: #12255E;
}
.cal-task > a {
text-decoration: none;
color: #EA80A2;
font-weight: 600;
}
.cal-task > a > .fa {
margin-right: 0.9642857143vh;
}
.cal-task > * {
-webkit-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
-webkit-transform: translateX(38.5714285714vh);
transform: translateX(38.5714285714vh);
}
.meta {
flex-basis: calc(80% - 54vh);
font-size: 2.5714285714vh;
font-weight: 300;
}
.meta p, .meta a {
color: rgba(255, 255, 255, 0.7);
}
.meta h1 {
font-size: 9.2571428571vh;
line-height: 9.2571428571vh;
font-weight: 300;
color: white;
}
.meta p {
line-height: 1.4;
}
.meta a:hover {
color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 750px) {
.meta {
display: none;
}
}
body {
background: #4ACDDE;
background: linear-gradient(135deg, #4EFFDF, #48BBDE, #F47EC6);
font-family: Source Sans Pro, sans-serif;
display: -webkit-box;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
justify-content: space-around;
-webkit-box-align: center;
align-items: center;
overflow: hidden;
}
@media (max-width: 750px) {
body {
-webkit-box-pack: center;
justify-content: center;
}
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
quotes: "«" "»";
}
*, *:before, *:after {
box-sizing: border-box;
position: relative;
}
.cal-month:before,
.cal-month:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.cal-month:after {
clear: both;
}
</style>
At the end we will have something like this. You can change fonts, colors, backgrounds and all things that you want. Enjoy it.
Your Output
Video Tutorial
Please watch this video to better understand this tutorial and don’t forget to subscribe to our channel.
Help others to find out about this article on Social Media sites. If you have any doubt or any problem, don’t hesitate to contact us. Thereafter we will be able to help you and also make sure you bookmark our site on your browser.
