Skip to content

Instantly share code, notes, and snippets.

@AakashRao-dev
Created August 19, 2022 07:40
Show Gist options
  • Save AakashRao-dev/43d2f924f52aa6651305f2e7bfe01f25 to your computer and use it in GitHub Desktop.
Save AakashRao-dev/43d2f924f52aa6651305f2e7bfe01f25 to your computer and use it in GitHub Desktop.
Conference Scheduler Using Grid - Starter
<!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>
<!-- MAIN GRID CONTAINER -->
<div class="main-container"></div>
</body>
</html>
: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 ****/
/********************/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment