index.html

<div class="container">
  <form action="https://sendgrid-subscribe.herokuapp.com/confirmEmail" method="post">
    <fieldset>
	    <legend></legend>
	    <div class="chapter">Liity Pohjolan Liikenteen uutiskirjeen tilaajaksi</div>
	    <div class="chapter2">Uutiskirjeen tilaajana saat ensimmäisenä
	    tiedon eduista ja tarjouksista sekä ajankohtaisimmat uutiset Länsi-Uudenmaan liikenteestämme suoraan sähköpostiisi. Lähetämme Sinulle tietoa tarjouksista ja
		aikatauluista noin kerran kuussa.
	    Uutiskirjeen tilaaminen kannattaa, sillä tilaajana pääset ensimmäisten joukossa hyödyntämään mm. tarjouksemme, jotka ovat voimassa vain rajoitetun ajan!
	    Liity tilaajaksi täyttämällä tietosi allaoleviin kenttiin.</div><div class="chapter2"></div>
	    <ul class="flex-outer">
      <li>
        <label for="email">Sähköposti</label>
        <input type="text" name="email" placeholder="Sähköposti" />
      </li>
      <li>
       <label for="first_name">Etunimi</label>
        <input type="text" name="first_name" placeholder="Etunimi" />
      </li>
      <li>
        <label for="last_name">Sukunimi</label>
        <input type="text" name="last_name" placeholder="Sukunimi" />
      </li>
      <li>
        <ul class="flex-cent">
          <li><input type="checkbox" id="markkinointilupa">
            <label for="markkinointilupa">Hyväksyn, että Pohjolan Liikenne lähettää minulle 
		    markkinointiviestejä noin kerran kuukaudessa sisältäen mm. lipputarjouksia,
		    alennuskoodeja ja etuja.
		</label>
          </li>
        </ul>
      </li>
      <li>
        <button type="submit" value="Submit" />Tilaa uutiskirje</button>
      </li>
    </ul>
	</fieldset>
  </form>
</div>


<style>
	body {
  font: normal 18px/1.5 "Fira Sans", "Helvetica Neue", sans-serif;
  background: #ffffff;
  color: #ffffff;
  padding: 50px 0;
}
	fieldset {
  background-color: #333;
padding-top: 40;
padding-bottom: 70;
padding-right: 40;
padding-left: 40;
margin-top: 30;
border: none;		
}

legend {
  background-color: transparent;
  color: #ffffff;
font: normal 18px/1.5 "Fira Sans", "Helvetica Neue", sans-serif;
  padding: 0;
}

.container {
  width: 80%;
  max-width: 1200px;
  margin: 0 auto;
}

.container * {
  box-sizing: border-box;
}

.flex-outer,
.flex-inner {
  list-style-type: none;
  padding: 0;
}

.flex-outer {
  max-width: 800px;
  margin: 0 auto;
}

.flex-outer li,
.flex-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.flex-outer > li:not(:last-child) {
  margin-bottom: 20px;
}

.flex-outer li label,
.flex-outer li p {
  padding-left: 10px;
  font-weight: 300;
  letter-spacing: .09em;
  text-transform: uppercase;
	font-size: 16;
	line-height: 1.4;
}

.flex-outer > li > label,
.flex-outer li p {
  flex: 1 0 120px;
  max-width: 220px;
}

.flex-outer > li > label + *,
.flex-inner {
  flex: 1 0 220px;
}

.flex-outer li p {
  margin: 0;
}

.flex-outer li input:not([type='checkbox']),
.flex-outer li textarea {
  padding: 15px;
  border: none;
}

.flex-outer li button {
  margin-left: auto;
  padding: 14px 22px;
  border: solid white;
  border-width: 3px 3px 3px 3px;
  background: #333;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: .09em;
  border-radius: 0px;
transition-duration: 0.4s;
}
.flex-outer li button:hover {
  border: solid white;
  border-width: 3px 3px 3px 3px;
  background: #ffffff;
  color: #333;
}
.flex-cent{
  list-style-type: none;
  padding: 20;
}

.flex-cent {
  max-width: 800px;
  margin: 0 auto;
}

.flex-cent li {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
	justify-content: end;
}

.flex-cent > li:not(:last-child) {
  margin-bottom: 20px;
}

.flex-cent li label,
.flex-cent li p {
  padding-left: 10px;
 font: normal 19px/1.2 "Fira Sans", "Helvetica Neue", sans-serif;
  font-weight: 300;
  letter-spacing: .07em;
	font-size: 16;
	line-height: 1.2;
	text-transform: none;
}

.flex-cent > li > label,
.flex-cent li p {
  flex: 1 0 120px;
  max-width: 820px;
}

.flex-cent > li > label + *{
  flex: 1 0 220px;
}

.flex-cent li p {
  margin: 0;
}

.flex-cent li input:not([type='checkbox']),
.flex-cent li textarea {
  padding: 15px;
  border: none;
}
.flex-inner li {
  max-width: 1200px;
}
.chapter {
color: #ffffff;
font: normal 20px/1.5 "Fira Sans", "Helvetica Neue", sans-serif;
  max-width: 800px;
	padding-left: 50;
	padding-bottom: 20;
	padding-top: 30;
	letter-spacing: .07em;
	font-weight: 600;
}
	.chapter2 {
color: #ffffff;
font: normal 16px/1.5 "Fira Sans", "Helvetica Neue", sans-serif;
  max-width: 820px;
	padding-left: 70;
	padding-bottom: 25;
	padding-top: 0;
	letter-spacing: .06em;
	font-weight: 300;
}
</style>