Skip to content

Instantly share code, notes, and snippets.

@AakashRao-dev

AakashRao-dev/index.html

Last active September 3, 2022 15:51
Show Gist options
  • Save AakashRao-dev/0a7b6ae263a887b7c54c486aba71df54 to your computer and use it in GitHub Desktop.
Save AakashRao-dev/0a7b6ae263a887b7c54c486aba71df54 to your computer and use it in GitHub Desktop.
Download ZIP
Step-13 at conference building interface
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>Conference Scheduler interface using CSS Grid</title>
</head>
<body>
<!-- GRID CONTAINER -->
<div class="main-container">
<!-- TOP STAGES CONTAINER -->
<div class="stages-container-row">
<div class="stages">
<div class="stage">Stage-1</div>
<div class="stage">Stage-2</div>
<div class="stage">Stage-3</div>
<div class="stage">Stage-4</div>
<div class="stage">Stage-5</div>
<div class="stage">Stage-6</div>
<div class="stage">Stage-7</div>
</div>
</div>
<!-- LEFT TIMING CONTAINER -->
<div class="timing-container-column">
<div class="timings">
<div class="time">/</div>
<div class="time">10:00</div>
<div class="time">10:30</div>
<div class="time">11:00</div>
<div class="time">11:30</div>
<div class="time">12:00</div>
<div class="time">12:30</div>
<div class="time">01:00</div>
<div class="time">01:30</div>
<div class="time">02:00</div>
<div class="time">02:30</div>
</div>
</div>
<!-- SUBGRID OF OUR MAIN UI -->
<div class="subgrid-main-ui">
<!-- SLOTS -->
<div class="slot">
<h2>Talk Title 1</h2>
<div class="details">
<span>Time: 10-11</span>
<span>Stage</span>
<span>Presenter</span>
</div>
</div>
<div class="slot">
<h2>Talk Title 2 & 3</h2>
<div class="details">
<span>Time: 10-11</span>
<span>Stage</span>
<span>Presenter</span>
</div>
</div>
<div class="slot">
<h2>Talk Title 4</h2>
<div class="details">
<span>Time: 10-11</span>
<span>Stage</span>
<span>Presenter</span>
</div>
</div>
<div class="slot">
<h2>Talk Title 5</h2>
<div class="details">
<span>Time: 10-11</span>
<span>Stage</span>
<span>Presenter</span>
</div>
</div>
<div class="slot">
<h2>Talk Title 6</h2>
<div class="details">
<span>Time: 10-11</span>
<span>Stage</span>
<span>Presenter</span>
</div>
</div>
<div class="slot">
<h2>Talk Title 7</h2>
<div class="details">
<span>Time: 10-11</span>
<span>Stage</span>
<span>Presenter</span>
</div>
</div>
<div class="slot">
<h2>Talk Title 8</h2>
<div class="details">
<span>Time: 10-11</span>
<span>Stage</span>
<span>Presenter</span>
</div>
</div>
<div class="slot">
<h2>Talk Title 9</h2>
<div class="details">
<span>Time: 10-11</span>
<span>Stage</span>
<span>Presenter</span>
</div>
</div>
<div class="slot">
<h2>Talk Title 10</h2>
<div class="details">
<span>Time: 10-11</span>
<span>Stage</span>
<span>Presenter</span>
</div>
</div>
<!-- BREAK SLOTS -->
<div class="break">BREAK</div>
<div class="break">BREAK</div>
<div class="break">BREAK</div>
</div>
</div>
</body>
</html>
Raw
style.css
:root {
--main-bg: rgb(238, 238, 238);
--stage-time-bg: rgba(217, 217, 217);
--blue-slot-bg: rgba(52, 129, 174, 0.3);
--blue-slot-text: rgba(52, 129, 174, 1);
--green-slot-bg: rgba(49, 223, 118, 0.42);
--green-slot-text: rgba(40, 188, 99, 1);
--red-slot-bg: rgba(223, 49, 49, 0.28);
--red-slot-text: rgba(223, 49, 49, 0.75);
--yellow-slot-bg: rgba(255, 230, 0, 0.3);
--yellow-slot-text: rgb(229, 168, 46);
--break-bg: rgba(83, 83, 83);
--break-text: rgba(38, 38, 38, 1);
--break-time-highlight: rgba(255, 110, 5, 0.5);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
height: 100%;
background: var(--main-bg);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 1.6rem;
line-height: 1.5;
}
/*********************
*** GRID STYLING ****/
/********************/
.main-container {
min-height: 100vh;
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(11, 1fr);
gap: 1.5rem;
}
/*===== TOP STAGES CONTAINER ====*/
.stages-container-row {
grid-column: 2 / -1;
grid-row: 1 / 2;
}
.stages {
display: flex;
justify-content: space-between;
align-items: center;
}
.stage {
padding: 3rem 4rem;
}
.stage,
.time {
background: var(--stage-time-bg);
border-radius: 1rem;
}
.details {
display: flex;
flex-direction: column;
}
/*===== LEFT TIMING CONTAINER =====*/
.timing-container-column {
grid-column: 1 / 2;
grid-row: 1 / -1;
}
.timings {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 0 1rem;
}
.time {
display: flex;
justify-content: center;
align-items: center;
padding: 3rem;
background: var(--stage-time-bg);
border-radius: 1rem;
}
/*===== SUBGRID OF OUR MAIN UI =====*/
.subgrid-main-ui {
grid-column: 2 / -1;
grid-row: 2 / -1;
display: grid;
/* Currenlty not supported by Chrome, please check it in Firefox
to see the subgrid option*/
grid-template-columns: subgrid;
grid-template-rows: repeat(10, 1fr);
gap: 1rem;
}
/*===== SLOTS INSIDE SUGBID =====*/
.slot {
flex-direction: column;
padding: 1rem;
}
[class^='slot'] {
padding-left: 2rem;
}
.slot,
.break {
border-radius: 1.5rem;
display: flex;
justify-content: center;
}
/* BLUE-BG SLOTS */
.slot:nth-child(1),
.slot:nth-child(2),
.slot:nth-child(6) {
background: var(--blue-slot-bg);
}
.slot:nth-child(1) h2,
.slot:nth-child(2) h2,
.slot:nth-child(6) h2 {
color: var(--blue-slot-text);
}
.slot:nth-of-type(1) {
grid-column: 1 / span 2;
grid-row: 1 / 4;
}
.slot:nth-of-type(2) {
grid-column: 1 / 4;
grid-row: 5 / 7;
}
.slot:nth-of-type(6) {
grid-column: 1 / 4;
grid-row: 8 / 11;
}
/* GREEN-BG SLOTS */
.slot:nth-child(3),
.slot:nth-child(7) {
background: var(--green-slot-bg);
}
.slot:nth-child(3) h2,
.slot:nth-child(7) h2 {
color: var(--green-slot-text);
}
.slot:nth-of-type(3) {
grid-column: 3 / 4;
grid-row: 1 / 4;
}
.slot:nth-of-type(7) {
grid-column: 4 / 6;
grid-row: 9 /11;
}
/* RED-BG SLOTS */
.slot:nth-of-type(4),
.slot:nth-of-type(5) {
background: var(--red-slot-bg);
}
.slot:nth-of-type(4) h2,
.slot:nth-of-type(5) h2 {
color: var(--red-slot-text);
}
.slot:nth-of-type(4) {
grid-column: 4 / 6;
grid-row: 1;
}
.slot:nth-of-type(5) {
grid-column: 4 / 6;
grid-row: 3 / 7;
}
/* YELLOW-BG SLOTS */
.slot:nth-of-type(8),
.slot:nth-of-type(9),
.slot:nth-of-type(10) {
background: var(--yellow-slot-bg);
}
.slot:nth-of-type(8) h2,
.slot:nth-of-type(9) h2,
.slot:nth-of-type(10) h2 {
color: var(--yellow-slot-text);
}
.slot:nth-of-type(8) {
grid-column: 6 / 8;
grid-row: 1 / 7;
}
.slot:nth-of-type(9) {
grid-column: 6 / 8;
grid-row: 8 / 11;
}
/* BREAK-SLOTS */
.break {
background: rgba(83, 83, 83, 0.21);
align-items: center;
font-size: 2rem;
color: rgba(38, 38, 38);
letter-spacing: 1.3px;
font-weight: bold;
padding: 0;
}
.break:nth-of-type(1n) {
grid-column: 1 / 4;
grid-row: 4 / 5;
}
.break:nth-of-type(2n) {
grid-column: 4 / 6;
grid-row: 2 / 3;
}
.break:nth-of-type(3n) {
grid-column: 1 / 8;
grid-row: 7 / 8;
}
/* BREAK-TIME HIGHTLIGHT */
.time:nth-of-type(3),
.time:nth-of-type(5),
.time:nth-of-type(8) {
background: rgba(255, 110, 5, 0.5);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment