kevincolten/index.html

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    html {
      scroll-behavior: smooth;
    }

    .calculator {
      width: 450px;
      border: 1px solid black;
    }

    input {
      width: 97%;
      height: 75px;
    }

    .buttons {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
    }

    .button {
      height: 100px;
      width: 100px;
      font-size: 20px;
    }

    #calculator {
      grid-area: calculator;
    }

    #clock {
      grid-area: clock;
    }

    #calendar {
      grid-area: calendar;
    }

    #todo {
      grid-area: todo;
    }

    #greeting {
      grid-area: greeting;
    }

    .container {
      display: grid;
      /* Using the grid */
      grid-template-areas:
        /* Notice how I've stacked my areas, just like they look on the page! */
        "calculator clock"
        "calendar calendar"
        "todo greeting";
    }
  </style>
</head>

<body>

  <div class="container">
    <div id="calculator">
      <h1>Calculator</h1>
      <div class="calculator">
        <input type="text" />
        <div class="buttons">
          <button class="button">7</button>
          <button class="button">8</button>
          <button class="button">9</button>
          <button class="button">/</button>
          <button class="button">4</button>
          <button class="button">5</button>
          <button class="button">6</button>
          <button class="button">X</button>
          <button class="button">1</button>
          <button class="button">2</button>
          <button class="button">3</button>
          <button class="button">-</button>
          <button class="button">.</button>
          <button class="button">0</button>
          <button class="button">=</button>
          <button class="button">+</button>
        </div>
      </div>
    </div>
    <div id="clock">
      <h1>Clock</h1>
    </div>
    <div id="calendar">
      <h1>Calendar</h1>
    </div>
    <div id="todo">
      <h1>ToDo</h1>
    </div>
    <div id="greeting">
      <h1>Greeting</h1>
    </div>
  </div>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
	html {
	scroll-behavior: smooth;
	}

	.calculator {
	width: 450px;
	border: 1px solid black;
	}

	input {
	width: 97%;
	height: 75px;
	}

	.buttons {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	}

	.button {
	height: 100px;
	width: 100px;
	font-size: 20px;
	}

	#calculator {
	grid-area: calculator;
	}

	#clock {
	grid-area: clock;
	}

	#calendar {
	grid-area: calendar;
	}

	#todo {
	grid-area: todo;
	}

	#greeting {
	grid-area: greeting;
	}

	.container {
	display: grid;
	/* Using the grid */
	grid-template-areas:
	/* Notice how I've stacked my areas, just like they look on the page! */
	"calculator clock"
	"calendar calendar"
	"todo greeting";
	}
	</style>
	</head>

	<body>

	<div class="container">
	<div id="calculator">
	<h1>Calculator</h1>
	<div class="calculator">
	<input type="text" />
	<div class="buttons">
	<button class="button">7</button>
	<button class="button">8</button>
	<button class="button">9</button>
	<button class="button">/</button>
	<button class="button">4</button>
	<button class="button">5</button>
	<button class="button">6</button>
	<button class="button">X</button>
	<button class="button">1</button>
	<button class="button">2</button>
	<button class="button">3</button>
	<button class="button">-</button>
	<button class="button">.</button>
	<button class="button">0</button>
	<button class="button">=</button>
	<button class="button">+</button>
	</div>
	</div>
	</div>
	<div id="clock">
	<h1>Clock</h1>
	</div>
	<div id="calendar">
	<h1>Calendar</h1>
	</div>
	<div id="todo">
	<h1>ToDo</h1>
	</div>
	<div id="greeting">
	<h1>Greeting</h1>
	</div>
	</div>
	</body>

	</html>