tatupesonen/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Thing</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="src/styles.css" />

    <meta charset="UTF-8" />
  </head>

  <body>
    <div class="container">
      <!-- Top -->
      <div class="top">
        <!-- Header-->
        <div class="hero">
          <div class="content">
            <nav>
              <div class="nav-links">
                <div class="nav-item">
                  <div class="header-logo">header link</div>
                </div>
                <!-- Links -->
                <div class="nav-item">
                  <a href="#">header link one</a>
                  <a href="#">header link two</a>
                  <a href="#">header link three</a>
                </div>
              </div>
            </nav>
            <div class="center-wrapper">
              <div class="left">
                <h1 class="header">This website is awesome</h1>
                <p>
                  This website has some subtext that goes here under the main
                  title. IIt's a smaller font and the color is lower contrast
                </p>
                <button>Sign up</button>
              </div>
              <div class="right">
                <div class="placeholder-img">
                  this is a placeholder image
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- White section -->
      <div class="white-section">
        <!-- Random information -->
        <div class="random-info">
          <h1>Some random information.</h1>
          <div class="random-container">
            <div class="item">
              <div class="random-placeholder"></div>
              <div>
                this is some subtext under and illustration or image
              </div>
            </div>
            <div class="item">
              <div class="random-placeholder"></div>
              <div>
                this is some subtext under and illustration or image
              </div>
            </div>
            <div class="item">
              <div class="random-placeholder"></div>
              <div>
                this is some subtext under and illustration or image
              </div>
            </div>
            <div class="item">
              <div class="random-placeholder"></div>
              <div>
                this is some subtext under and illustration or image
              </div>
            </div>
          </div>
        </div>
        <!-- Quote -->
        <div class="quote">
          <div class="quote-container">
            <div class="text">
              This is an inspiring quote, or a testimonial from a customer.
              Maybe it's just filling up space, or maybe people will actually
              read it. Who knows? All I know is that it looks nice.
            </div>
            <div class="author">-Thor, God of Thunder</div>
          </div>
        </div>
        <!-- Call to action -->
        <div class="bottom-container">
          <div class="call-to-action">
            <div class="content">
              <div class="left">
                <div class="header">Call to action! It's time!</div>
                <div class="secondary-text">
                  Sign up for our product by clicking that button right over
                  there!
                </div>
              </div>
              <div class="right">
                <button>Sign up</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Footer -->
      <footer><div>Copyright © Tatu Pesonen 2022<div></footer>
    </div>
  </body>
</html>

## styles.css
:root {
  --dark: #1f2937;
  --white-text: #f9faf8;
  --secondary-text: #e5e7eb;
  --button-color: #3882f6;
  --accent: #3882f6;

  --text-sm: 18px;
  --text-md: 24px;
  --text-lg: 36px;
  --text-xl: 48px;
}

/************* HERO ***************/
.hero,
.footer {
  background-color: var(--dark);
  margin: 0 auto;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: row;
}

.hero .content {
  max-width: 60vw;
  flex-direction: column;
  flex: 1;
}

.hero .header {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--white-text);
  margin: 0;
  word-wrap: break-word;
}

.secondary-text {
  font-size: var(--text-sm);
  color: var(--secondary-text);
}

.hero .center-wrapper {
  margin: 4em 0em;
  display: flex;
  gap: 20px;
  flex-direction: row;
}
.hero .center-wrapper p {
  color: var(--secondary-text);
}
.hero .center-wrapper .left {
  flex: 1;
}
.hero .center-wrapper .right {
  flex: 1;
}

.placeholder-img {
  width: 100%;
  background-color: gray;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

.hero .header-logo {
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--white-text);
}

.hero .nav-links {
  margin-top: 16px;
  display: flex;
  font-weight: 300;
  justify-content: space-between;
}

.hero .nav-item {
  display: flex;
  align-content: center;
  gap: 10px;
  line-height: 20px;
}

.hero .nav-item a {
  color: var(--secondary-text);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: 0.2s;
}

.hero .nav-item a:hover {
  color: var(--accent);
}

/* BUTTON */
button {
  cursor: pointer;
  background-color: var(--button-color);
  border-radius: 8px;
  color: var(--white-text);
  font-weight: 600;
  padding: 8px 20px;
  border: none;
  pointer-events: all;
  transition: 0.15s;
}

button:hover {
  color: var(--accent);
  background-color: var(--white-text);
}

.quote {
  background-color: var(--secondary-text);
  margin-top: 1.5em;
  display: flex;
  min-height: 450px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.quote .text {
  font-size: var(--text-lg);
  font-style: italic;
  font-weight: lighter;
  color: var(--dark);
  text-align: left;
}

.quote-container {
  display: flex;
  max-width: 50vw;
  flex-direction: column;
}

.quote .author {
  font-size: var(--text-md);
  font-style: normal;
  font-weight: bold;
  align-self: flex-end;
  margin-top: 0.5em;
  margin-right: 1em;
}

body {
  background-color: var(--dark);
  font-family: "Roboto Slab";
  margin: 0;
  padding: 0;
}

h1 {
  margin: 0;
  margin-bottom: 1em;
}

.white-section {
  min-height: 400px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  background-color: var(--white-text);
}

.random-placeholder {
  width: 150px;
  height: 150px;
  border: 4px solid var(--accent);
  border-radius: 15px;
}

.random-container {
  display: flex;
  gap: 32px;
  flex-direction: row;
}

.random-container .item {
  display: flex;
  flex-direction: column;
  max-width: 150px;
}

.random-info {
  background-color: var(--white-text);
  padding: 2rem 0rem;
  margin: 0 auto;
}

.bottom-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.call-to-action {
  flex: 1;
  max-width: 70vw;
  background-color: var(--button-color);
  border-radius: 5px;
}

.call-to-action .content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
  margin: 2em 6em;
}

.call-to-action .content .left {
  display: flex;
  justify-content: flex-start;
  text-align: left;
  flex-direction: column;
}

.call-to-action .content .right {
  align-self: center;
}

.call-to-action button {
  color: var(--white-text);
  border: 2px solid var(--white-text);
  font-size: var(--text-sm);
}

.call-to-action button:hover {
  color: var(--accent);
}

.call-to-action .text,
.call-to-action .header {
  color: var(--white-text);
}

.call-to-action .header {
  font-size: var(--text-md);
  font-weight: 500;
}

.bottom-container {
  margin: 4em 0em;
}

footer {
  color: var(--white-text);
  justify-content: center;
  align-content: center;
  text-align: center;
  background-color: var(--dark);
  margin: 1.5em;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Thing</title>
	<link rel="preconnect" href="https://fonts.googleapis.com" />
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
	<link
	href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap"
	rel="stylesheet"
	/>
	<link rel="stylesheet" href="src/styles.css" />

	<meta charset="UTF-8" />
	</head>

	<body>
	<div class="container">
	<!-- Top -->
	<div class="top">
	<!-- Header-->
	<div class="hero">
	<div class="content">
	<nav>
	<div class="nav-links">
	<div class="nav-item">
	<div class="header-logo">header link</div>
	</div>
	<!-- Links -->
	<div class="nav-item">
	<a href="#">header link one</a>
	<a href="#">header link two</a>
	<a href="#">header link three</a>
	</div>
	</div>
	</nav>
	<div class="center-wrapper">
	<div class="left">
	<h1 class="header">This website is awesome</h1>
	<p>
	This website has some subtext that goes here under the main
	title. IIt's a smaller font and the color is lower contrast
	</p>
	<button>Sign up</button>
	</div>
	<div class="right">
	<div class="placeholder-img">
	this is a placeholder image
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	<!-- White section -->
	<div class="white-section">
	<!-- Random information -->
	<div class="random-info">
	<h1>Some random information.</h1>
	<div class="random-container">
	<div class="item">
	<div class="random-placeholder"></div>
	<div>
	this is some subtext under and illustration or image
	</div>
	</div>
	<div class="item">
	<div class="random-placeholder"></div>
	<div>
	this is some subtext under and illustration or image
	</div>
	</div>
	<div class="item">
	<div class="random-placeholder"></div>
	<div>
	this is some subtext under and illustration or image
	</div>
	</div>
	<div class="item">
	<div class="random-placeholder"></div>
	<div>
	this is some subtext under and illustration or image
	</div>
	</div>
	</div>
	</div>
	<!-- Quote -->
	<div class="quote">
	<div class="quote-container">
	<div class="text">
	This is an inspiring quote, or a testimonial from a customer.
	Maybe it's just filling up space, or maybe people will actually
	read it. Who knows? All I know is that it looks nice.
	</div>
	<div class="author">-Thor, God of Thunder</div>
	</div>
	</div>
	<!-- Call to action -->
	<div class="bottom-container">
	<div class="call-to-action">
	<div class="content">
	<div class="left">
	<div class="header">Call to action! It's time!</div>
	<div class="secondary-text">
	Sign up for our product by clicking that button right over
	there!
	</div>
	</div>
	<div class="right">
	<button>Sign up</button>
	</div>
	</div>
	</div>
	</div>
	</div>
	<!-- Footer -->
	<footer><div>Copyright © Tatu Pesonen 2022<div></footer>
	</div>
	</body>
	</html>
	:root {
	--dark: #1f2937;
	--white-text: #f9faf8;
	--secondary-text: #e5e7eb;
	--button-color: #3882f6;
	--accent: #3882f6;

	--text-sm: 18px;
	--text-md: 24px;
	--text-lg: 36px;
	--text-xl: 48px;
	}

	/*********** HERO *************/
	.hero,
	.footer {
	background-color: var(--dark);
	margin: 0 auto;
	width: 100%;
	display: flex;
	justify-content: center;
	flex-direction: row;
	}

	.hero .content {
	max-width: 60vw;
	flex-direction: column;
	flex: 1;
	}

	.hero .header {
	font-size: var(--text-xl);
	font-weight: 800;
	color: var(--white-text);
	margin: 0;
	word-wrap: break-word;
	}

	.secondary-text {
	font-size: var(--text-sm);
	color: var(--secondary-text);
	}

	.hero .center-wrapper {
	margin: 4em 0em;
	display: flex;
	gap: 20px;
	flex-direction: row;
	}
	.hero .center-wrapper p {
	color: var(--secondary-text);
	}
	.hero .center-wrapper .left {
	flex: 1;
	}
	.hero .center-wrapper .right {
	flex: 1;
	}

	.placeholder-img {
	width: 100%;
	background-color: gray;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	}

	.hero .header-logo {
	font-size: var(--text-md);
	font-weight: 500;
	color: var(--white-text);
	}

	.hero .nav-links {
	margin-top: 16px;
	display: flex;
	font-weight: 300;
	justify-content: space-between;
	}

	.hero .nav-item {
	display: flex;
	align-content: center;
	gap: 10px;
	line-height: 20px;
	}

	.hero .nav-item a {
	color: var(--secondary-text);
	font-size: var(--text-sm);
	text-decoration: none;
	transition: 0.2s;
	}

	.hero .nav-item a:hover {
	color: var(--accent);
	}

	/* BUTTON */
	button {
	cursor: pointer;
	background-color: var(--button-color);
	border-radius: 8px;
	color: var(--white-text);
	font-weight: 600;
	padding: 8px 20px;
	border: none;
	pointer-events: all;
	transition: 0.15s;
	}

	button:hover {
	color: var(--accent);
	background-color: var(--white-text);
	}

	.quote {
	background-color: var(--secondary-text);
	margin-top: 1.5em;
	display: flex;
	min-height: 450px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	}

	.quote .text {
	font-size: var(--text-lg);
	font-style: italic;
	font-weight: lighter;
	color: var(--dark);
	text-align: left;
	}

	.quote-container {
	display: flex;
	max-width: 50vw;
	flex-direction: column;
	}

	.quote .author {
	font-size: var(--text-md);
	font-style: normal;
	font-weight: bold;
	align-self: flex-end;
	margin-top: 0.5em;
	margin-right: 1em;
	}

	body {
	background-color: var(--dark);
	font-family: "Roboto Slab";
	margin: 0;
	padding: 0;
	}

	h1 {
	margin: 0;
	margin-bottom: 1em;
	}

	.white-section {
	min-height: 400px;
	display: flex;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	background-color: var(--white-text);
	}

	.random-placeholder {
	width: 150px;
	height: 150px;
	border: 4px solid var(--accent);
	border-radius: 15px;
	}

	.random-container {
	display: flex;
	gap: 32px;
	flex-direction: row;
	}

	.random-container .item {
	display: flex;
	flex-direction: column;
	max-width: 150px;
	}

	.random-info {
	background-color: var(--white-text);
	padding: 2rem 0rem;
	margin: 0 auto;
	}

	.bottom-container {
	display: flex;
	align-items: center;
	justify-content: center;
	}

	.call-to-action {
	flex: 1;
	max-width: 70vw;
	background-color: var(--button-color);
	border-radius: 5px;
	}

	.call-to-action .content {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-content: center;
	margin: 2em 6em;
	}

	.call-to-action .content .left {
	display: flex;
	justify-content: flex-start;
	text-align: left;
	flex-direction: column;
	}

	.call-to-action .content .right {
	align-self: center;
	}

	.call-to-action button {
	color: var(--white-text);
	border: 2px solid var(--white-text);
	font-size: var(--text-sm);
	}

	.call-to-action button:hover {
	color: var(--accent);
	}

	.call-to-action .text,
	.call-to-action .header {
	color: var(--white-text);
	}

	.call-to-action .header {
	font-size: var(--text-md);
	font-weight: 500;
	}

	.bottom-container {
	margin: 4em 0em;
	}

	footer {
	color: var(--white-text);
	justify-content: center;
	align-content: center;
	text-align: center;
	background-color: var(--dark);
	margin: 1.5em;
	}