Added calendar
This commit is contained in:
James Dinh
parent
bba25bbcb6
commit
041d1512a2
640
css/general.css
640
css/general.css
@ -1589,636 +1589,28 @@ section {
|
|||||||
margin-top: 50px !important;
|
margin-top: 50px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.scheduleContainer {
|
|
||||||
display: flex;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Schedule */
|
/* Schedule */
|
||||||
.codyhouse {
|
.schedule-parent {
|
||||||
text-align: center;
|
|
||||||
margin: 40px 0;
|
|
||||||
}
|
|
||||||
/* reset css */
|
|
||||||
/* https://meyerweb.com/eric/tools/css/reset/
|
|
||||||
v2.0 | 20110126
|
|
||||||
License: none (public domain)
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
/* HTML5 display-role reset for older browsers */
|
|
||||||
ol, ul {
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
blockquote, q {
|
|
||||||
quotes: none;
|
|
||||||
}
|
|
||||||
blockquote:before, blockquote:after,
|
|
||||||
q:before, q:after {
|
|
||||||
content: '';
|
|
||||||
content: none;
|
|
||||||
}
|
|
||||||
table {
|
|
||||||
border-collapse: collapse;
|
|
||||||
border-spacing: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* style css */
|
|
||||||
/* --------------------------------
|
|
||||||
|
|
||||||
Primary style
|
|
||||||
|
|
||||||
-------------------------------- */
|
|
||||||
|
|
||||||
.codyhouse {
|
|
||||||
font-size: 62.5%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.single-event a {
|
|
||||||
color: #A2B9B2;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --------------------------------
|
|
||||||
|
|
||||||
Main Components
|
|
||||||
|
|
||||||
-------------------------------- */
|
|
||||||
.cd-schedule {
|
|
||||||
position: relative;
|
|
||||||
margin: 2em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cd-schedule::before {
|
|
||||||
/* never visible - this is used in js to check the current MQ */
|
|
||||||
content: 'mobile';
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (min-width: 800px) {
|
|
||||||
.cd-schedule {
|
|
||||||
width: 90%;
|
|
||||||
max-width: 1400px;
|
|
||||||
margin: 2em auto;
|
|
||||||
}
|
|
||||||
.cd-schedule::after {
|
|
||||||
clear: both;
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.cd-schedule::before {
|
|
||||||
content: 'desktop';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.cd-schedule .timeline {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (min-width: 800px) {
|
|
||||||
.cd-schedule .timeline {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
padding-top: 50px;
|
|
||||||
}
|
|
||||||
.cd-schedule .timeline li {
|
|
||||||
position: relative;
|
|
||||||
height: 50px;
|
|
||||||
}
|
|
||||||
.cd-schedule .timeline li::after {
|
|
||||||
/* this is used to create the table horizontal lines */
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 1px;
|
|
||||||
background: #EAEAEA;
|
|
||||||
}
|
|
||||||
.cd-schedule .timeline li:last-of-type::after {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.cd-schedule .timeline li span {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (min-width: 1000px) {
|
|
||||||
.cd-schedule .timeline li::after {
|
|
||||||
width: calc(100% - 60px);
|
|
||||||
left: 60px;
|
|
||||||
}
|
|
||||||
.cd-schedule .timeline li span {
|
|
||||||
display: inline-block;
|
|
||||||
-webkit-transform: translateY(-50%);
|
|
||||||
-ms-transform: translateY(-50%);
|
|
||||||
transform: translateY(-50%);
|
|
||||||
}
|
|
||||||
.cd-schedule .timeline li:nth-of-type(2n) span {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.cd-schedule .events {
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cd-schedule .events .events-group {
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cd-schedule .events .top-info {
|
|
||||||
width: 100%;
|
|
||||||
padding: 0 5%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cd-schedule .events .top-info > span {
|
|
||||||
display: inline-block;
|
|
||||||
line-height: 1.2;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cd-schedule .events .events-group > ul {
|
|
||||||
position: relative;
|
|
||||||
padding: 0 5%;
|
|
||||||
/* force its children to stay on one line */
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -ms-flexbox;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
overflow-x: scroll;
|
flex-flow: row wrap;
|
||||||
-webkit-overflow-scrolling: touch;
|
justify-content: center;
|
||||||
|
max-width: 1300px;
|
||||||
|
width: 90%;
|
||||||
|
margin: auto;
|
||||||
|
background-color: rgb(29, 27, 36);
|
||||||
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cd-schedule .events .events-group > ul::after {
|
.schedule-element {
|
||||||
/* never visible - used to add a right padding to .events-group > ul */
|
padding: 20px 20px;
|
||||||
display: inline-block;
|
|
||||||
content: '-';
|
|
||||||
width: 1px;
|
|
||||||
height: 100%;
|
|
||||||
opacity: 0;
|
|
||||||
color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cd-schedule .events .single-event {
|
|
||||||
/* force them to stay on one line */
|
|
||||||
-ms-flex-negative: 0;
|
|
||||||
flex-shrink: 0;
|
|
||||||
float: left;
|
|
||||||
height: 150px;
|
|
||||||
width: 70%;
|
|
||||||
max-width: 300px;
|
|
||||||
box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2);
|
|
||||||
margin-right: 20px;
|
|
||||||
-webkit-transition: opacity .2s, background .2s;
|
|
||||||
transition: opacity .2s, background .2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cd-schedule .events .single-event:last-of-type {
|
|
||||||
margin-right: 5%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cd-schedule .events .single-event a {
|
|
||||||
display: block;
|
|
||||||
height: 100%;
|
|
||||||
padding: .8em;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (min-width: 550px) {
|
|
||||||
.cd-schedule .events .single-event {
|
|
||||||
width: 40%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (min-width: 800px) {
|
|
||||||
.cd-schedule .events {
|
|
||||||
float: left;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.cd-schedule .events .events-group {
|
|
||||||
width: 14%;
|
|
||||||
float: left;
|
|
||||||
border: 1px solid #EAEAEA;
|
|
||||||
/* reset style */
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
.cd-schedule .events .events-group:not(:first-of-type) {
|
|
||||||
border-left-width: 0;
|
|
||||||
}
|
|
||||||
.cd-schedule .events .top-info {
|
|
||||||
/* vertically center its content */
|
|
||||||
display: table;
|
|
||||||
height: 50px;
|
|
||||||
border-bottom: 1px solid #EAEAEA;
|
|
||||||
/* reset style */
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
.cd-schedule .events .top-info > span {
|
|
||||||
/* vertically center inside its parent */
|
|
||||||
display: table-cell;
|
|
||||||
vertical-align: middle;
|
|
||||||
padding: 0 .5em;
|
|
||||||
text-align: center;
|
|
||||||
/* reset style */
|
|
||||||
font-weight: normal;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
.cd-schedule .events .events-group > ul {
|
|
||||||
height: 950px;
|
|
||||||
/* reset style */
|
|
||||||
display: block;
|
|
||||||
overflow: visible;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
.cd-schedule .events .events-group > ul::after {
|
|
||||||
clear: both;
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.cd-schedule .events .events-group > ul::after {
|
|
||||||
/* reset style */
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.cd-schedule .events .single-event {
|
|
||||||
position: absolute;
|
|
||||||
z-index: 3;
|
|
||||||
/* top position and height will be set using js */
|
|
||||||
width: calc(100% + 2px);
|
|
||||||
left: -1px;
|
|
||||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), inset 0 -3px 0 rgba(0, 0, 0, 0.2);
|
|
||||||
/* reset style */
|
|
||||||
-ms-flex-negative: 1;
|
|
||||||
flex-shrink: 1;
|
|
||||||
height: auto;
|
|
||||||
max-width: none;
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
.cd-schedule .events .single-event a {
|
|
||||||
padding: 1.2em;
|
|
||||||
}
|
|
||||||
.cd-schedule .events .single-event:last-of-type {
|
|
||||||
/* reset style */
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
.cd-schedule .events .single-event.selected-event {
|
|
||||||
/* the .selected-event class is added when an user select the event */
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (min-width: 1000px) {
|
|
||||||
.cd-schedule .events {
|
|
||||||
/* 60px is the .timeline element width */
|
|
||||||
width: calc(100% - 60px);
|
|
||||||
margin-left: 60px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.cd-schedule.loading .events .single-event {
|
|
||||||
/* the class .loading is added by default to the .cd-schedule element
|
|
||||||
it is removed as soon as the single events are placed in the schedule plan (using javascript) */
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cd-schedule .event-name,
|
|
||||||
.cd-schedule .event-date {
|
|
||||||
display: block;
|
|
||||||
color: white;
|
|
||||||
font-weight: bold;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cd-schedule .event-name {
|
|
||||||
font-size: 2.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (min-width: 800px) {
|
|
||||||
.cd-schedule .event-name {
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.cd-schedule .event-date {
|
|
||||||
/* they are not included in the the HTML but added using JavScript */
|
|
||||||
font-size: 1.4rem;
|
|
||||||
opacity: .7;
|
|
||||||
line-height: 1.2;
|
|
||||||
margin-bottom: .2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cd-schedule .single-event[data-event="event-1"],
|
|
||||||
.cd-schedule [data-event="event-1"] .header-bg {
|
|
||||||
/* this is used to set a background color for the event and the modal window */
|
|
||||||
background: #577F92;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cd-schedule .single-event[data-event="event-1"]:hover {
|
|
||||||
background: #618da1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cd-schedule .single-event[data-event="event-2"],
|
|
||||||
.cd-schedule [data-event="event-2"] .header-bg {
|
|
||||||
background: #443453;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cd-schedule .single-event[data-event="event-2"]:hover {
|
|
||||||
background: #513e63;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cd-schedule .single-event[data-event="event-3"],
|
|
||||||
.cd-schedule [data-event="event-3"] .header-bg {
|
|
||||||
background: #A2B9B2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cd-schedule .single-event[data-event="event-3"]:hover {
|
|
||||||
background: #b1c4be;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cd-schedule .single-event[data-event="event-4"],
|
|
||||||
.cd-schedule [data-event="event-4"] .header-bg {
|
|
||||||
background: #f6b067;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cd-schedule .single-event[data-event="event-4"]:hover {
|
|
||||||
background: #f7bd7f;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cd-schedule .event-modal {
|
|
||||||
position: fixed;
|
|
||||||
z-index: 3;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
visibility: hidden;
|
max-width: 650px;
|
||||||
/* Force Hardware acceleration */
|
|
||||||
-webkit-transform: translateZ(0);
|
|
||||||
transform: translateZ(0);
|
|
||||||
-webkit-transform: translateX(100%);
|
|
||||||
-ms-transform: translateX(100%);
|
|
||||||
transform: translateX(100%);
|
|
||||||
-webkit-transition: visibility .4s, -webkit-transform .4s;
|
|
||||||
transition: visibility .4s, -webkit-transform .4s;
|
|
||||||
transition: transform .4s, visibility .4s;
|
|
||||||
transition: transform .4s, visibility .4s, -webkit-transform .4s;
|
|
||||||
-webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
|
|
||||||
transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.cd-schedule .event-modal .header {
|
.time-column-header {
|
||||||
position: relative;
|
margin-bottom: 20px;
|
||||||
height: 70px;
|
font-size: 30px;
|
||||||
/* vertically center its content */
|
text-decoration: underline;
|
||||||
display: table;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cd-schedule .event-modal .header .content {
|
|
||||||
position: relative;
|
|
||||||
z-index: 3;
|
|
||||||
/* vertically center inside its parent */
|
|
||||||
display: table-cell;
|
|
||||||
vertical-align: middle;
|
|
||||||
padding: .6em 5%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cd-schedule .event-modal .body {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
/* 70px is the .header height */
|
|
||||||
height: calc(100% - 70px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cd-schedule .event-modal .event-info {
|
|
||||||
position: relative;
|
|
||||||
z-index: 2;
|
|
||||||
line-height: 1.4;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cd-schedule .event-modal .event-info > div {
|
|
||||||
overflow: auto;
|
|
||||||
height: 100%;
|
|
||||||
padding: 1.4em 5%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cd-schedule .event-modal .header-bg, .cd-schedule .event-modal .body-bg {
|
|
||||||
/* these are the morphing backgrounds - visible on desktop only */
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cd-schedule .event-modal .body-bg {
|
|
||||||
z-index: 1;
|
|
||||||
background: white;
|
|
||||||
-webkit-transform-origin: top left;
|
|
||||||
-ms-transform-origin: top left;
|
|
||||||
transform-origin: top left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cd-schedule .event-modal .header-bg {
|
|
||||||
z-index: 2;
|
|
||||||
-webkit-transform-origin: top center;
|
|
||||||
-ms-transform-origin: top center;
|
|
||||||
transform-origin: top center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cd-schedule .event-modal .close {
|
|
||||||
/* this is the 'X' icon */
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
z-index: 3;
|
|
||||||
background: rgba(0, 0, 0, 0.1);
|
|
||||||
/* replace text with icon */
|
|
||||||
color: transparent;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-indent: 100%;
|
|
||||||
height: 70px;
|
|
||||||
width: 70px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cd-schedule .event-modal .close::before, .cd-schedule .event-modal .close::after {
|
|
||||||
/* these are the two lines of the 'X' icon */
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
width: 2px;
|
|
||||||
height: 22px;
|
|
||||||
background: white;
|
|
||||||
-webkit-backface-visibility: hidden;
|
|
||||||
backface-visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cd-schedule .event-modal .close::before {
|
|
||||||
-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
|
|
||||||
-ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
|
|
||||||
transform: translateX(-50%) translateY(-50%) rotate(45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cd-schedule .event-modal .close::after {
|
|
||||||
-webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
|
|
||||||
-ms-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
|
|
||||||
transform: translateX(-50%) translateY(-50%) rotate(-45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cd-schedule .event-modal .event-date {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cd-schedule .event-modal.no-transition {
|
|
||||||
-webkit-transition: none;
|
|
||||||
transition: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cd-schedule .event-modal.no-transition .header-bg, .cd-schedule .event-modal.no-transition .body-bg {
|
|
||||||
-webkit-transition: none;
|
|
||||||
transition: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (min-width: 800px) {
|
|
||||||
.cd-schedule .event-modal {
|
|
||||||
/* reset style */
|
|
||||||
right: auto;
|
|
||||||
width: auto;
|
|
||||||
height: auto;
|
|
||||||
-webkit-transform: translateX(0);
|
|
||||||
-ms-transform: translateX(0);
|
|
||||||
transform: translateX(0);
|
|
||||||
will-change: transform, width, height;
|
|
||||||
-webkit-transition: height .4s, width .4s, visibility .4s, -webkit-transform .4s;
|
|
||||||
transition: height .4s, width .4s, visibility .4s, -webkit-transform .4s;
|
|
||||||
transition: height .4s, width .4s, transform .4s, visibility .4s;
|
|
||||||
transition: height .4s, width .4s, transform .4s, visibility .4s, -webkit-transform .4s;
|
|
||||||
-webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
|
|
||||||
transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
|
|
||||||
}
|
|
||||||
.cd-schedule .event-modal .header {
|
|
||||||
position: absolute;
|
|
||||||
display: block;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.cd-schedule .event-modal .header .content {
|
|
||||||
/* reset style */
|
|
||||||
display: block;
|
|
||||||
padding: .8em;
|
|
||||||
}
|
|
||||||
.cd-schedule .event-modal .event-info > div {
|
|
||||||
padding: 2em 3em 2em 2em;
|
|
||||||
}
|
|
||||||
.cd-schedule .event-modal .body {
|
|
||||||
height: 100%;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
.cd-schedule .event-modal .header-bg, .cd-schedule .event-modal .body-bg {
|
|
||||||
/* Force Hardware acceleration */
|
|
||||||
-webkit-transform: translateZ(0);
|
|
||||||
transform: translateZ(0);
|
|
||||||
will-change: transform;
|
|
||||||
-webkit-backface-visibility: hidden;
|
|
||||||
backface-visibility: hidden;
|
|
||||||
}
|
|
||||||
.cd-schedule .event-modal .header-bg {
|
|
||||||
-webkit-transition: -webkit-transform .4s;
|
|
||||||
transition: -webkit-transform .4s;
|
|
||||||
transition: transform .4s;
|
|
||||||
transition: transform .4s, -webkit-transform .4s;
|
|
||||||
-webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
|
|
||||||
transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
|
|
||||||
}
|
|
||||||
.cd-schedule .event-modal .body-bg {
|
|
||||||
opacity: 0;
|
|
||||||
-webkit-transform: none;
|
|
||||||
-ms-transform: none;
|
|
||||||
transform: none;
|
|
||||||
}
|
|
||||||
.cd-schedule .event-modal .event-date {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.cd-schedule .event-modal .close, .cd-schedule .event-modal .event-info {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
.cd-schedule .event-modal .close {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
.cd-schedule .event-modal .close::after, .cd-schedule .event-modal .close::before {
|
|
||||||
background: #222222;
|
|
||||||
height: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (min-width: 1000px) {
|
|
||||||
.cd-schedule .event-modal .header .content {
|
|
||||||
padding: 1.2em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.cd-schedule.modal-is-open .event-modal {
|
|
||||||
/* .modal-is-open class is added as soon as an event is selected */
|
|
||||||
-webkit-transform: translateX(0);
|
|
||||||
-ms-transform: translateX(0);
|
|
||||||
transform: translateX(0);
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cd-schedule.modal-is-open .event-modal .event-info > div {
|
|
||||||
/* smooth scroll on iOS touch devices */
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (min-width: 800px) {
|
|
||||||
.cd-schedule.animation-completed .event-modal .close,
|
|
||||||
.cd-schedule.content-loaded.animation-completed .event-modal .event-info {
|
|
||||||
/* the .animation-completed class is added when the modal animation is completed
|
|
||||||
the .content-loaded class is added when the modal content has been loaded (using ajax) */
|
|
||||||
opacity: 1;
|
|
||||||
-webkit-transition: opacity .2s;
|
|
||||||
transition: opacity .2s;
|
|
||||||
}
|
|
||||||
.cd-schedule.modal-is-open .body-bg {
|
|
||||||
opacity: 1;
|
|
||||||
-webkit-transition: -webkit-transform .4s;
|
|
||||||
transition: -webkit-transform .4s;
|
|
||||||
transition: transform .4s;
|
|
||||||
transition: transform .4s, -webkit-transform .4s;
|
|
||||||
-webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
|
|
||||||
transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.cd-schedule .cover-layer {
|
|
||||||
/* layer between the content and the modal window */
|
|
||||||
position: fixed;
|
|
||||||
z-index: 2;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
background: rgba(0, 0, 0, 0.8);
|
|
||||||
opacity: 0;
|
|
||||||
visibility: hidden;
|
|
||||||
-webkit-transition: opacity .4s, visibility .4s;
|
|
||||||
transition: opacity .4s, visibility .4s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cd-schedule.modal-is-open .cover-layer {
|
|
||||||
opacity: 1;
|
|
||||||
visibility: visible;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#map-article {
|
#map-article {
|
||||||
@ -2873,7 +2265,7 @@ Main Components
|
|||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Teams */
|
/* Team */
|
||||||
#team-container {
|
#team-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|||||||
202
css/schedule.css
Normal file
202
css/schedule.css
Normal file
@ -0,0 +1,202 @@
|
|||||||
|
.schedule-container {
|
||||||
|
display: grid;
|
||||||
|
margin: auto;
|
||||||
|
grid-gap: 0.2rem;
|
||||||
|
grid-template-columns: 4rem repeat(4, 1fr);
|
||||||
|
grid-template-rows: repeat(14, 1fr);
|
||||||
|
grid-template-areas: "time800 stage stage stage stage" "time900 stage stage stage stage" "time1000 stage stage stage stage" "time1100 stage stage stage stage" "time1200 stage stage stage stage" "time1300 stage stage stage stage" "time1400 stage stage stage stage" "time1500 stage stage stage stage" "time1600 stage stage stage stage" "time1700 stage stage stage stage" "time1800 stage stage stage stage" "time1900 stage stage stage stage" "time2000 stage stage stage stage" "time2100 stage stage stage stage";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Time
|
||||||
|
*/
|
||||||
|
.time {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0 0.5rem;
|
||||||
|
}
|
||||||
|
.time.start-800 {
|
||||||
|
grid-area: time800;
|
||||||
|
}
|
||||||
|
.time.start-900 {
|
||||||
|
grid-area: time900;
|
||||||
|
}
|
||||||
|
.time.start-1000 {
|
||||||
|
grid-area: time1000;
|
||||||
|
}
|
||||||
|
.time.start-1100 {
|
||||||
|
grid-area: time1100;
|
||||||
|
}
|
||||||
|
.time.start-1200 {
|
||||||
|
grid-area: time1200;
|
||||||
|
}
|
||||||
|
.time.start-1300 {
|
||||||
|
grid-area: time1300;
|
||||||
|
}
|
||||||
|
.time.start-1400 {
|
||||||
|
grid-area: time1400;
|
||||||
|
}
|
||||||
|
.time.start-1500 {
|
||||||
|
grid-area: time1500;
|
||||||
|
}
|
||||||
|
.time.start-1600 {
|
||||||
|
grid-area: time1600;
|
||||||
|
}
|
||||||
|
.time.start-1700 {
|
||||||
|
grid-area: time1700;
|
||||||
|
}
|
||||||
|
.time.start-1800 {
|
||||||
|
grid-area: time1800;
|
||||||
|
}
|
||||||
|
.time.start-1900 {
|
||||||
|
grid-area: time1900;
|
||||||
|
}
|
||||||
|
.time.start-2000 {
|
||||||
|
grid-area: time2000;
|
||||||
|
}
|
||||||
|
.time.start-2100 {
|
||||||
|
grid-area: time2100;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Event
|
||||||
|
*/
|
||||||
|
.event {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
background-color: orange;
|
||||||
|
border-radius: 0.2rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 1.4;
|
||||||
|
border-top: thin solid rgb(68, 68, 68);
|
||||||
|
}
|
||||||
|
.event span {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 0.8em;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
.event.empty {
|
||||||
|
background-color: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event.start-800 {
|
||||||
|
grid-row-start: time800;
|
||||||
|
}
|
||||||
|
.event.start-900 {
|
||||||
|
grid-row-start: time900;
|
||||||
|
}
|
||||||
|
.event.start-1000 {
|
||||||
|
grid-row-start: time1000;
|
||||||
|
}
|
||||||
|
.event.start-1100 {
|
||||||
|
grid-row-start: time1100;
|
||||||
|
}
|
||||||
|
.event.start-1200 {
|
||||||
|
grid-row-start: time1200;
|
||||||
|
}
|
||||||
|
.event.start-1300 {
|
||||||
|
grid-row-start: time1300;
|
||||||
|
}
|
||||||
|
.event.start-1400 {
|
||||||
|
grid-row-start: time1400;
|
||||||
|
}
|
||||||
|
.event.start-1500 {
|
||||||
|
grid-row-start: time1500;
|
||||||
|
}
|
||||||
|
.event.start-1600 {
|
||||||
|
grid-row-start: time1600;
|
||||||
|
}
|
||||||
|
.event.start-1700 {
|
||||||
|
grid-row-start: time1700;
|
||||||
|
}
|
||||||
|
.event.start-1800 {
|
||||||
|
grid-row-start: time1800;
|
||||||
|
}
|
||||||
|
.event.start-1900 {
|
||||||
|
grid-row-start: time1900;
|
||||||
|
}
|
||||||
|
.event.start-2000 {
|
||||||
|
grid-row-start: time2000;
|
||||||
|
}
|
||||||
|
.event.start-2100 {
|
||||||
|
grid-row-start: time2100;
|
||||||
|
}
|
||||||
|
.event.end-800 {
|
||||||
|
grid-row-end: time800;
|
||||||
|
}
|
||||||
|
.event.end-900 {
|
||||||
|
grid-row-end: time900;
|
||||||
|
}
|
||||||
|
.event.end-1000 {
|
||||||
|
grid-row-end: time1000;
|
||||||
|
}
|
||||||
|
.event.end-1100 {
|
||||||
|
grid-row-end: time1100;
|
||||||
|
}
|
||||||
|
.event.end-1200 {
|
||||||
|
grid-row-end: time1200;
|
||||||
|
}
|
||||||
|
.event.end-1300 {
|
||||||
|
grid-row-end: time1300;
|
||||||
|
}
|
||||||
|
.event.end-1400 {
|
||||||
|
grid-row-end: time1400;
|
||||||
|
}
|
||||||
|
.event.end-1500 {
|
||||||
|
grid-row-end: time1500;
|
||||||
|
}
|
||||||
|
.event.end-1600 {
|
||||||
|
grid-row-end: time1600;
|
||||||
|
}
|
||||||
|
.event.end-1700 {
|
||||||
|
grid-row-end: time1700;
|
||||||
|
}
|
||||||
|
.event.end-1800 {
|
||||||
|
grid-row-end: time1800;
|
||||||
|
}
|
||||||
|
.event.end-1900 {
|
||||||
|
grid-row-end: time1900;
|
||||||
|
}
|
||||||
|
.event.end-2000 {
|
||||||
|
grid-row-end: time2000;
|
||||||
|
}
|
||||||
|
.event.end-2100 {
|
||||||
|
grid-row-end: time2100;
|
||||||
|
}
|
||||||
|
.event.length-1 {
|
||||||
|
grid-column-end: span 1;
|
||||||
|
}
|
||||||
|
.event.length-2 {
|
||||||
|
grid-column-end: span 2;
|
||||||
|
}
|
||||||
|
.event.length-3 {
|
||||||
|
grid-column-end: span 3;
|
||||||
|
}
|
||||||
|
.event.length-4 {
|
||||||
|
grid-column-end: span 4;
|
||||||
|
}
|
||||||
|
.event.stage-earth {
|
||||||
|
background-color: #ffa726;
|
||||||
|
}
|
||||||
|
.event.stage-mercury {
|
||||||
|
background-color: #9ccc65;
|
||||||
|
}
|
||||||
|
.event.stage-venus {
|
||||||
|
background-color: #ff8a65;
|
||||||
|
}
|
||||||
|
.event.stage-mars {
|
||||||
|
background-color: #b3e5fc;
|
||||||
|
}
|
||||||
|
.event.stage-jupiter {
|
||||||
|
background-color: #81d4fa;
|
||||||
|
}
|
||||||
|
.event.stage-saturn {
|
||||||
|
background-color: #26c6da;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*# sourceMappingURL=schedule.css.map */
|
||||||
1
css/schedule.css.map
Normal file
1
css/schedule.css.map
Normal file
@ -0,0 +1 @@
|
|||||||
|
{"version":3,"sourceRoot":"","sources":["schedule.scss"],"names":[],"mappings":"AAKA;EACC;EACA;EAEA;EACA;EACA,qBACC;;;AAgBF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;;AAGC;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AAIF;EACC;EACA;;;AAIF;AAAA;AAAA;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAIA;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AAKD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AAKD;EACC;;AADD;EACC;;AADD;EACC;;AADD;EACC;;AAIF;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC","file":"schedule.css"}
|
||||||
109
css/schedule.scss
Normal file
109
css/schedule.scss
Normal file
@ -0,0 +1,109 @@
|
|||||||
|
$blockTimes: 800, 900, 1000, 1100, 1200, 1300,
|
||||||
|
1400, 1500, 1600, 1700, 1800, 1900, 2000,
|
||||||
|
2100;
|
||||||
|
$blockLengths: 1, 2, 3, 4;
|
||||||
|
|
||||||
|
.schedule-container {
|
||||||
|
display: grid;
|
||||||
|
grid-gap: 0.2rem;
|
||||||
|
|
||||||
|
grid-template-columns: 5rem repeat(4, 1fr);
|
||||||
|
grid-template-rows: repeat(14, 1fr);
|
||||||
|
grid-template-areas:
|
||||||
|
"time800 stage stage stage stage"
|
||||||
|
"time900 stage stage stage stage"
|
||||||
|
"time1000 stage stage stage stage"
|
||||||
|
"time1100 stage stage stage stage"
|
||||||
|
"time1200 stage stage stage stage"
|
||||||
|
"time1300 stage stage stage stage"
|
||||||
|
"time1400 stage stage stage stage"
|
||||||
|
"time1500 stage stage stage stage"
|
||||||
|
"time1600 stage stage stage stage"
|
||||||
|
"time1700 stage stage stage stage"
|
||||||
|
"time1800 stage stage stage stage"
|
||||||
|
"time1900 stage stage stage stage"
|
||||||
|
"time2000 stage stage stage stage"
|
||||||
|
"time2100 stage stage stage stage"
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Time
|
||||||
|
*/
|
||||||
|
.time {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
border-top: thin dotted #ccc;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0 0.5rem;
|
||||||
|
|
||||||
|
@each $time in $blockTimes {
|
||||||
|
&.start-#{$time} {
|
||||||
|
grid-area: time#{$time};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[class*="30"]:not(.start-1300) {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Event
|
||||||
|
*/
|
||||||
|
.event {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
background-color: orange;
|
||||||
|
border-radius: 0.2rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 1.4;
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 0.8em;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $time in $blockTimes {
|
||||||
|
&.start-#{$time} {
|
||||||
|
grid-row-start: time#{$time};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $time in $blockTimes {
|
||||||
|
&.end-#{$time} {
|
||||||
|
grid-row-end: time#{$time};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $length in $blockLengths {
|
||||||
|
&.length-#{$length} {
|
||||||
|
grid-column-end: span #{$length};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.stage-earth {
|
||||||
|
background-color: #ffa726;
|
||||||
|
}
|
||||||
|
&.stage-mercury {
|
||||||
|
background-color: #9ccc65;
|
||||||
|
}
|
||||||
|
&.stage-venus {
|
||||||
|
background-color: #ff8a65;
|
||||||
|
}
|
||||||
|
&.stage-mars {
|
||||||
|
background-color: #b3e5fc;
|
||||||
|
}
|
||||||
|
&.stage-jupiter {
|
||||||
|
background-color: #81d4fa;
|
||||||
|
}
|
||||||
|
&.stage-saturn {
|
||||||
|
background-color: #26c6da;
|
||||||
|
}
|
||||||
|
}
|
||||||
79
index.html
79
index.html
@ -15,6 +15,7 @@
|
|||||||
|
|
||||||
<title>Gilroy Hacks</title>
|
<title>Gilroy Hacks</title>
|
||||||
<link href="css/general.css" rel="stylesheet" type="text/css" media="all">
|
<link href="css/general.css" rel="stylesheet" type="text/css" media="all">
|
||||||
|
<link href="css/schedule.css" rel="stylesheet" type="text/css" media="all">
|
||||||
<link href="css/scroll_nav.css" rel="stylesheet" type="text/css" media="all">
|
<link href="css/scroll_nav.css" rel="stylesheet" type="text/css" media="all">
|
||||||
<link rel="stylesheet" href="css/leaflet.css"/>
|
<link rel="stylesheet" href="css/leaflet.css"/>
|
||||||
<link rel="icon" href="img/icon.ico">
|
<link rel="icon" href="img/icon.ico">
|
||||||
@ -393,6 +394,82 @@
|
|||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Schedule -->
|
||||||
|
<div class="schedule-parent">
|
||||||
|
<div class="schedule-element">
|
||||||
|
<h3 class="time-column-header">Saturday</h3>
|
||||||
|
<div class="schedule-container">
|
||||||
|
<!-- TIMES -->
|
||||||
|
<div class="time start-800">8:00am</div>
|
||||||
|
<div class="time start-900">9:00am</div>
|
||||||
|
<div class="time start-1000">10:00am</div>
|
||||||
|
<div class="time start-1100">11:00am</div>
|
||||||
|
<div class="time start-1200">12:00pm</div>
|
||||||
|
<div class="time start-1300">1:00pm</div>
|
||||||
|
<div class="time start-1400">2:00pm</div>
|
||||||
|
<div class="time start-1500">3:00pm</div>
|
||||||
|
<div class="time start-1600">4:00pm</div>
|
||||||
|
<div class="time start-1700">5:00pm</div>
|
||||||
|
<div class="time start-1800">6:00pm</div>
|
||||||
|
<div class="time start-1900">7:00pm</div>
|
||||||
|
<div class="time start-2000">8:00pm</div>
|
||||||
|
<div class="time start-2100">9:00pm</div>
|
||||||
|
|
||||||
|
<!-- EVENTS -->
|
||||||
|
<div class="event stage-saturn start-800 end-800 length-4">Arrival and registration <span>Registration Area</span></div>
|
||||||
|
<div class="event start-900 end-900 length-4 empty"></div>
|
||||||
|
<div class="event start-1000 end-1000 length-4 empty"></div>
|
||||||
|
<div class="event start-1100 end-1100 length-4 empty"></div>
|
||||||
|
<div class="event start-1200 end-1200 length-4 empty"></div>
|
||||||
|
<div class="event start-1300 end-1300 length-4 empty"></div>
|
||||||
|
<div class="event start-1400 end-1400 length-4 empty"></div>
|
||||||
|
<div class="event start-1500 end-1500 length-4 empty"></div>
|
||||||
|
<div class="event start-1600 end-1600 length-4 empty"></div>
|
||||||
|
<div class="event start-1700 end-1700 length-4 empty"></div>
|
||||||
|
<div class="event start-1800 end-1800 length-4 empty"></div>
|
||||||
|
<div class="event start-1900 end-1900 length-4 empty"></div>
|
||||||
|
<div class="event start-2000 end-2000 length-4 empty"></div>
|
||||||
|
<div class="event start-2100 end-2100 length-4 empty"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="schedule-element">
|
||||||
|
<h3 class="time-column-header">Sunday</h3>
|
||||||
|
<div class="schedule-container">
|
||||||
|
<!-- TIMES -->
|
||||||
|
<div class="time start-800">8:00am</div>
|
||||||
|
<div class="time start-900">9:00am</div>
|
||||||
|
<div class="time start-1000">10:00am</div>
|
||||||
|
<div class="time start-1100">11:00am</div>
|
||||||
|
<div class="time start-1200">12:00pm</div>
|
||||||
|
<div class="time start-1300">1:00pm</div>
|
||||||
|
<div class="time start-1400">2:00pm</div>
|
||||||
|
<div class="time start-1500">3:00pm</div>
|
||||||
|
<div class="time start-1600">4:00pm</div>
|
||||||
|
<div class="time start-1700">5:00pm</div>
|
||||||
|
<div class="time start-1800">6:00pm</div>
|
||||||
|
<div class="time start-1900">7:00pm</div>
|
||||||
|
<div class="time start-2000">8:00pm</div>
|
||||||
|
<div class="time start-2100">9:00pm</div>
|
||||||
|
|
||||||
|
<!-- EVENTS -->
|
||||||
|
<div class="event stage-saturn start-800 end-800 length-4">Arrival and registration <span>Registration Area</span></div>
|
||||||
|
<div class="event start-900 end-900 length-4 empty"></div>
|
||||||
|
<div class="event start-1000 end-1000 length-4 empty"></div>
|
||||||
|
<div class="event start-1100 end-1100 length-4 empty"></div>
|
||||||
|
<div class="event start-1200 end-1200 length-4 empty"></div>
|
||||||
|
<div class="event start-1300 end-1300 length-4 empty"></div>
|
||||||
|
<div class="event start-1400 end-1400 length-4 empty"></div>
|
||||||
|
<div class="event start-1500 end-1500 length-4 empty"></div>
|
||||||
|
<div class="event start-1600 end-1600 length-4 empty"></div>
|
||||||
|
<div class="event start-1700 end-1700 length-4 empty"></div>
|
||||||
|
<div class="event start-1800 end-1800 length-4 empty"></div>
|
||||||
|
<div class="event start-1900 end-1900 length-4 empty"></div>
|
||||||
|
<div class="event start-2000 end-2000 length-4 empty"></div>
|
||||||
|
<div class="event start-2100 end-2100 length-4 empty"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<!-- <div id="map-article">
|
<!-- <div id="map-article">
|
||||||
<div id="cal-parent">
|
<div id="cal-parent">
|
||||||
<article id="cal-container">
|
<article id="cal-container">
|
||||||
@ -833,4 +910,4 @@
|
|||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html
|
||||||
Loading…
Reference in New Issue
Block a user