<!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>