mdewey/index.html Secret

## index.html
<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Scoreboard</title>
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="stylesheet" href="/screen.css" />
  </head>
  <body>
    <h1>My Score Board</h1>
    <section class="teams">
      <section class="team one">
        <section>
          <h2 class="team-1-name">Team 1</h2>
          <p class="team-1-score">10</p>
        </section>
        <section>
          <section>
            update team 1 name
            <input type="text" class="team-1-input" />
            <button class="update-team-1-name">Update</button>
          </section>
          <section>
            update team 1 score
            <button class="team-1-add-1-button">add 1</button>
            <button class="team-1-subtract-1-button">subtract 1</button>
          </section>
        </section>
      </section>
      <section class="team two">
        <section>
          <h2 class="team-2-name">Team 2</h2>
          <p class="team-2-score">10</p>
        </section>

        <section>
          <section>
            update team 2 name
            <input type="text" class="team-2-input" />
            <button class="update-team-2-name">Update</button>
          </section>
          <section>
            update team 2 score
            <button class="team-2-add-1-button">add 1</button>
            <button class="team-2-subtract-1-button">subtract 1</button>
          </section>
        </section>
      </section>
    </section>

    <script src="/main.js" charset="utf-8"></script>
  </body>
</html>

## screen.css
:root {
  font: 16px / 1 sans-serif;
}

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: whitesmoke;
  color: rgb(14, 14, 14);
}

body, html {
  height: 100%;
}

h1 {
  text-align: center;
}

.teams {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 75%;
}

.team {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-around;
  padding: 0.5rem;
}

.team h2 {
  font-size: 2rem;
}

.team-1-score, .team-2-score {
  text-align: center;
  font-size: 5rem;
}
	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>Scoreboard</title>
	<link rel="shortcut icon" href="/favicon.ico" />
	<link rel="stylesheet" href="/screen.css" />
	</head>
	<body>
	<h1>My Score Board</h1>
	<section class="teams">
	<section class="team one">
	<section>
	<h2 class="team-1-name">Team 1</h2>
	<p class="team-1-score">10</p>
	</section>
	<section>
	<section>
	update team 1 name
	<input type="text" class="team-1-input" />
	<button class="update-team-1-name">Update</button>
	</section>
	<section>
	update team 1 score
	<button class="team-1-add-1-button">add 1</button>
	<button class="team-1-subtract-1-button">subtract 1</button>
	</section>
	</section>
	</section>
	<section class="team two">
	<section>
	<h2 class="team-2-name">Team 2</h2>
	<p class="team-2-score">10</p>
	</section>

	<section>
	<section>
	update team 2 name
	<input type="text" class="team-2-input" />
	<button class="update-team-2-name">Update</button>
	</section>
	<section>
	update team 2 score
	<button class="team-2-add-1-button">add 1</button>
	<button class="team-2-subtract-1-button">subtract 1</button>
	</section>
	</section>
	</section>
	</section>

	<script src="/main.js" charset="utf-8"></script>
	</body>
	</html>
	:root {
	font: 16px / 1 sans-serif;
	}

	html {
	height: 100%;
	}

	body {
	margin: 0;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: whitesmoke;
	color: rgb(14, 14, 14);
	}

	body, html {
	height: 100%;
	}

	h1 {
	text-align: center;
	}

	.teams {
	display: flex;
	justify-content: space-around;
	width: 100%;
	height: 75%;
	}

	.team {
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: space-around;
	padding: 0.5rem;
	}

	.team h2 {
	font-size: 2rem;
	}

	.team-1-score, .team-2-score {
	text-align: center;
	font-size: 5rem;
	}