Calendar View HTML and CSS

HTML and CSS Files/calendarFridge.css

+body {
+    width: 100%;
+    height: 100%;
+    margin: 0px;
+}
+
+.listViewHeader {
+    background-color: rgba(40, 40, 40, 1);
+    width: 100vw;
+    color: white;
+    text-align: left;
+}
+
+.breadcrumbsHead {
+    font-family: "Roboto Bold";
+    font-size: 46px;
+    margin-left: 50px;
+}
+
+.lowerPage {
+    width: 100vw;
+    display: grid;
+    grid-template-columns: repeat(6, 16.67vw);
+    grid-template-rows: 12.5vh 87.5vh;
+    text-align: left;
+    background-color: white;
+}
+
+.sidebar {
+    height: 200vh;
+    background-color: rgba(196, 196, 196, 1);
+    display: grid;
+    grid-template-rows: repeat(16, 6.25vh);
+    grid-template-columns: repeat(2, 8.33vw);
+    grid-column: 1/2;
+    z-index: 1;
+    left: 0;
+}
+
+.sideItem {
+    display: grid;
+    background-color: rgba(104, 104, 104, 1);
+    opacity: 0.7;
+    transform: none;
+}
+
+.sideText {
+    font-family: "Roboto";
+    font-size: 24px;
+    color: white;
+    grid-column: 2/3;
+    margin-right: 5px;
+    text-align: right;
+}
+
+#fridgeIcon {
+    background-color: white;
+    clip-path: circle();
+    height: 15vh;
+    grid-row: 1/6;
+    grid-column: 1/2;
+    margin: 10px;
+}
+
+#recipesIcon {
+    background-color: white;
+    clip-path: circle();
+    height: 15vh;
+    grid-row: 4/9;
+    grid-column: 1/2;
+    margin: 10px;
+}
+
+#statsIcon {
+    background-color: white;
+    clip-path: circle();
+    height: 15vh;
+    grid-row: 7/12;
+    grid-column: 1/2;
+    margin: 10px;
+}
+
+#toBuyIcon {
+    background-color: white;
+    clip-path: circle();
+    height: 15vh;
+    grid-row: 10/15;
+    grid-column: 1/2;
+    margin: 10px;
+}
+
+.fridge {
+    grid-row: 3/4;
+    grid-column: 1/3;
+}
+
+.recipes {
+    grid-row: 6/7;
+    grid-column: 1/3;
+}
+
+.stats {
+    grid-row: 9/10;
+    grid-column: 1/3;
+}
+
+.toBuy {
+    grid-row: 12/13;
+    grid-column: 1/3;
+}
+
+.pageSubhead {
+    grid-column: 2/7;
+    grid-row: 1/2;
+    background-color: white;
+    display: grid;
+    grid-template-columns: 3vw repeat(6, 15.67vw) 3vw;
+}
+
+.subheader {
+    font-family: "Roboto Medium";
+    font-size: 10vh;
+    grid-column: 2/3;
+    text-align: center;
+}
+
+.addItem {
+    grid-column: 3/4;
+}
+
+.addItemButton {
+    margin-top: 35px;
+    margin-left: 20px;
+    margin-right: 20px;
+    background-color: rgba(175, 175, 175, 1);
+    border-radius: 100px;
+    opacity: 0.7;
+    transform: none;
+}
+
+.addItemText {
+    font-family: "Roboto Medium";
+    font-size: 18px;
+    color: white;
+    text-align: center;
+}
+
+.changeView {
+    background-color: rgba(228, 228, 228, 1);
+    font-family: "Roboto Medium";
+    font-size: 14px;
+    grid-column: 5/6;
+    margin-top: 35px;
+    margin-bottom: 40px;
+    text-align: center;
+}
+.month {
+    display: grid;
+    grid-column: 2/3;
+    grid-row: 2/3;
+    margin-bottom: 35vw;
+    margin-left: 30vw;
+    font-family: Roboto;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 120px;
+    line-height: 42px;
+    display: flex;
+    align-items: center;
+    text-align: center;
+}
+.calendarView {
+    grid-column: 2/7;
+    grid-row: 2/3;
+    display: grid;
+    grid-template-columns: repeat(7, 10vw);
+    grid-template-rows: repeat(6, 10vw);
+    grid-column-gap: 0.3vw;
+    grid-row-gap: 0.3vw;
+    margin-left: 5vw;
+    margin-right: 5vw;
+
+}
+
+.calendarItem {
+    background-color: rgba(237, 237, 237, 1);
+    display: grid;
+    opacity: 0.7;
+    transform: none;
+
+}
+
+
+.calendatText {
+    text-align: left;
+    margin: 10px;
+
+}
+
+.dayHeader {
+    text-align: center;
+    font-size: 30px;
+    grid-template-rows: auto;
+    margin-top: 8vw;
+}
+.sun {
+    background: #282828;
+    grid-column: 1/2;
+    color: white;
+
+}
+.mon {
+    background: #282828;
+    grid-column: 2/3;
+    color: white;
+}
+.tue {
+    background: #282828;
+    grid-column: 3/4;
+    color: white;
+}
+.wed {
+    background: #282828;
+    grid-column: 4/5;
+    color: white;
+}
+.thu {
+    background: #282828;
+    grid-column: 5/6;
+    color: white;
+}
+.fri {
+    background: #282828;
+    grid-column: 6/7;
+    color: white;
+}
+.sat {
+    background: #282828;
+    grid-column: 7/8;
+    color: white;
+}
+
+
+.six {
+    grid-column: 6/7;
+    grid-row: 2/3;
+}
+
+.seven {
+    grid-column: 7/8;
+    grid-row: 2/3;
+}
+
+
+@font-face {
+    font-family: Roboto Bold;
+    src: url(Roboto-Bold.ttf);
+}
+
+@font-face {
+    font-family: Roboto Black;
+    src: url(Roboto-Black.ttf);
+}
+
+@font-face {
+    font-family: Roboto Medium;
+    src: url(Roboto-Medium.ttf);
+}
+
+@font-face {
+    font-family: Roboto;
+    src: url(Roboto-Regular.ttf);
+}
+
+
+.sideItem:hover {
+    opacity: 1;
+    transition: opacity .5s;
+}
+
+.listItem:hover {
+    opacity: 1;
+    transition: opacity .5s;
+}
+
+.addItemButton:hover {
+    opacity: 1;
+    transition: opacity .5s;
+}
+
+.main {
+    margin-left: 23%;
+}