frontend sketch on pure web

www/css/calendar.css

@@ -0,0 +1,75 @@
+ul {list-style-type: none;}
+
+.calendar * {
+    margin: 0;
+}
+
+.month {
+    width: 100%;
+    text-align: center;
+    align-content: center;
+}
+
+.month ul {
+    margin: 0;
+    padding: 0.5rem;
+}
+
+.month ul li {
+    display: inline;
+    text-transform: uppercase;
+    letter-spacing: 3px;
+}
+
+.month .prev {
+    float: inline-start;
+    cursor: pointer;
+}
+
+.month .next {
+    float: inline-end;
+    cursor: pointer;
+}
+
+.weekdays {
+    padding: 10px 0 0 0;
+}
+
+.weekdays li {
+    display: inline-block;
+    width: 13.6%;
+    text-align: center;
+}
+
+.days {
+    padding: 10px 0;
+    margin: 0;
+}
+
+.days li {
+    list-style-type: none;
+    display: inline-block;
+    width: 13.6%;
+    text-align: center;
+    margin-bottom: 5px;
+    font-size: smaller;
+    cursor: pointer;
+}
+
+.days li .active {
+    padding: 5px;
+    border-radius: 30%;
+}
+
+@media screen and (max-width: 720px) {
+    .weekdays li, .days li {width: 13.1%;}
+}
+
+@media screen and (max-width: 420px) {
+    .weekdays li, .days li {width: 12.5%;}
+    .days li .active {padding: 2px;}
+}
+
+@media screen and (max-width: 290px) {
+    .weekdays li, .days li {width: 12.2%;}
+}