Homer - landing

by PhilQ

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="container-fluid bg--green">

  <nav id="navigation" class="navbar navbar-expand-lg navbar-dark">

    <a class="navbar-brand" href="https://homerapp.nl/"><img src="https://homerapp.nl/img/layout/navigation/logo-wit-beta.png" alt="homer. (bèta)" /></a>

    <a class="d-sm-none btn btn-sm btn-light ml-auto mr-1" href="/inloggen" role="button">inloggen</a>
    <a class="d-none d-sm-block btn btn-lg btn-light ml-auto mr-1" href="/inloggen" role="button">inloggen</a>

  </nav>

</div>


<div class="container-fluid bg--green">
  <div class="jumbotron jumbotron-fluid mb-0 bg--green vertical-center">
    <img class="screenshot-right" src="https://via.placeholder.com/450x300/cccccc/666666/?text=screenshot" />
    <div class="container">
      <h1 class="display-5"><span class="mark--red">Alles-in-één lesadministratie<br />voor jou en je studenten.</span></h1>
      <p class="lead mt-4 col-7">Met onze slimme functies creëer je overzicht, zodat je je aandacht kan besteden aan de inhoud van je lessen.</p>
    </div>
  </div>
</div>

<div class="container-fluid bg--yellow p-3">
  <div class="row">
    <div class="col text-center"><b>Binnenkort starten we met de bèta fase.</b> <a href="#">Schrijf je nu in</a> en word de eerste docent zonder zorgen.</div>
  </div>
</div>

<div class="container-fluid bg--green p-5">
  &nbsp;
</div>

<div class="container-fluid bg--bg-grey">
  <div class="row justify-content-center">
    <div id="newsletter-signup" class="col-auto bg--white shadow-lg rounded-lg p-4">
      <h4 class="text-center">Blijf op de hoogte</h4>
      <p>Laat je gegevens achter en blijf op de hoogte van de laatste ontwikkelingen van <b>Homer</b>.</p>
      <form>
        <div class="form-row">
          <div class="col">
            <input type="text" class="form-control" placeholder="Naam">
          </div>
          <div class="col">
            <input...

SCSS

// Reset
*,
:before,
:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

// Fonts
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;700;900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap');

@import url('https://fonts.fontself.com/gE309jx/gilbert-color-bold-preview5.css');

// Colors
$theme-colors: ("green": #45cd98,
  "yellow": #f9e5a5,
  "orange": #fac694,
  "red": #e37762,
  "darkred": #752e38,
  "white": #fff,
);
$colors: map-merge($theme-colors, ("green-60": mix(map-get($theme-colors, "green"), #fff, 60%),
    "green-25": mix(map-get($theme-colors, "green"), #fff, 25%),
    "green-10": mix(map-get($theme-colors, "green"), #fff, 10%),
    "bg-grey": rgb(247, 247, 247),
    "border-grey": rgb(204, 204, 204),
    "cb-grey": rgb(212, 212, 212),
    "cb-dark-grey": rgb(179, 179, 179),
    "near-black": #222,
  ));

// Style helpers
@mixin color-modifiers($prefix: '-', $attributes...) {
  @each $name,
  $hex in $colors {
    &#{$prefix}#{$name} {
      @for $i from 0 to length($attributes) {
        #{nth($attributes, $i + 1)}: $hex;
      }
      @content;
    }
  }
}

.bg {
  @include color-modifiers('--', 'background-color');
}

.text {
  @include color-modifiers('--', 'color');
}

.mark {
  @include color-modifiers('--', 'background-color') {
    color: #fff;
	padding: 5px 12px;
  }
}

.vertical-center {
  min-height: 500px;
  display: flex;
  align-items: center;
}

.btn-light {
	color: map-get($colors, "green");
}


body {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 16px;
  background-color: map-get($colors, "bg-grey");
  perspective: 1600px;
    -moz-perspective: 1600px;
    -webkit-perspective: 1600px;
}


#navigation {
	.navbar-brand {
		text-decoration: none;

		img {
			height: 100px;
			width: auto;
		}
	}
}


// Home-page
.jumbotron {
	
	.screenshot-right {
		position: absolute;
		right: 15%;
		top: 50%;
		margin-top: -250px;
		z-index: 1...