Modern Landing Page WIP

index.html

<!-- Header -->
<header class="header">
  <nav class="nav">
    <ul class="nav--menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<!-- Hero -->
<div class="hero">
  <div class="hero-content">
    <h1>Modern Landing Page Design.</h1>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio consectetur provident soluta pariatur necessitatibus reiciendis doloremque earum asperiores molestiae laudantium!</p>
    <button class="hero-button">Learn more</button>
  </div>
</div>
<div class="canvas-wrap">
  <canvas id="canvas"></canvas>
</div>

<!-- Main -->
<main class="main">
  <section class="wrap section">
    <h2>Section Heading?</h2>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus, libero adipisci perferendis officiis culpa in, tempore esse suscipit neque eligendi natus minus cum enim omnis amet fuga repudiandae aut labore!</p>
    <p>Rem minus illum aspernatur nisi doloribus eum nihil officiis excepturi? Ducimus maiores itaque ullam earum nulla dolore. Esse nostrum commodi, culpa voluptate officia delectus tenetur labore asperiores aliquid inventore. Voluptatibus.</p>
    <p>Assumenda, nam consectetur possimus similique, omnis praesentium earum explicabo a, libero nulla aut error optio illo nesciunt incidunt modi accusantium nobis consequatur! Nam ea reprehenderit, illo ratione accusamus dicta in.</p>
  </section>
 <section class="card-section">
   <div class="card-wrap">
     <h2>Card Section</h2>
    <div class="cards">
      <div class="card">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, quae.</p>
        <div class="card-button-wrap">
          <button class="card-button">Learn more</button>
        </div>
      </div>
      <div class="card">
        <div class="card-button-wrap">
          <button class="card-button">Learn more</button>
        </div>
      </div>
      <div class="card">
        <div class="card-button-wrap">
          <button class="card-button">Learn more</button>
        </div>
      </div>
    </div>
  </div>
 </section>
</main>

<footer class="footer">
  Footer
</footer>

modern-landing-page-wip.markdown

Modern Landing Page WIP

A Pen by Charles Ojukwu on CodePen.

License.

script.js

(function(){
	"use strict";
	
	var cvs,ctx;
	//var nodes = 5;
	var waves = [];
	var waveHeight = 40;
	var colours = ["#f00","#0f0","#00f"]
	
	function init() {
		cvs = document.getElementById("canvas");
		ctx = cvs.getContext("2d");
		resizeCanvas(cvs);
		
		
		

		for (var i = 0; i < 3; i++) {
			var temp = new wave(colours[i],1,5);
		}

		setInterval(update,16);
		
	}

	function randomColour() {
		// body...
		var h = Math.round(Math.random()*360);
		return "hsl("+h+",100%,50%)";
	}

	function update(array) {
		// body...
		//ctx.clearRect(0, 0, cvs.width, cvs.height);
    var fill = window.getComputedStyle(document.querySelector(".hero"),null).getPropertyValue("background-color");
		ctx.fillStyle = fill;
		ctx.globalCompositeOperation = "source-over";
		ctx.fillRect(0,0,cvs.width,cvs.height);
		ctx.globalCompositeOperation = "screen";
		for (var i = 0; i < waves.length; i++) {
			for (var j = 0; j < waves[i].nodes.length; j++) {
				bounce(waves[i].nodes[j]);
			}
			drawWave(waves[i]);
			//drawLine(waves[i].nodes);
			//drawNodes(waves[i].nodes);
		}
		ctx.globalCompositeOperation = "hue";
		ctx.fillStyle = fill;
		//ctx.fillRect(0,0,cvs.width,cvs.height);
	}

	function wave(colour,lambda,nodes) {
		// body...
		this.colour = colour;
		this.lambda = lambda;
		this.nodes = [];
		var tick = 1;
		for (var i = 0; i <= nodes+2; i++) {
			var temp = [(i-1)*cvs.width/nodes,0,Math.random()*200,.3];//this.speed*plusOrMinus
			this.nodes.push(temp);
			console.log(temp);
		}
		console.log(this.nodes);
		waves.push(this);
	}

	function bounce(node) {
		node[1] = waveHeight/2*Math.sin(node[2]/20)+cvs.height/2;
		node[2] = node[2] + node[3];
		
	}
	
	function drawWave (obj) {
		var diff = function(a,b) {
			return (b - a)/2 + a;
		}
		ctx.fillStyle = obj.colour;
		ctx.beginPath();
		ctx.moveTo(0,cvs.height);
		ctx.lineTo(obj.nodes[0][0],obj.nodes[0][1]);
		for (var i = 0; i < obj.nodes.length; i++) {
			if (obj.nodes[i+1]) {
				ctx.quadraticCurveTo(
					obj.nodes[i][0],obj.nodes[i][1],
					diff(obj.nodes[i][0],obj.nodes[i+1][0]),diff(obj.nodes[i][1],obj.nodes[i+1][1])
				);
			}else{
				ctx.lineTo(obj.nodes[i][0],obj.nodes[i][1]);
				ctx.lineTo(cvs.width,cvs.height);
			}
			
		}
		ctx.closePath();
		ctx.fill();
	}

	function drawNodes (array) {
		ctx.strokeStyle = "#888";
		for (var i = 0; i < array.length; i++) {
			ctx.beginPath();
			ctx.arc(array[i][0],array[i][1],4,0,2*Math.PI);
			ctx.closePath();
			ctx.stroke();
		}
		
	}

	function drawLine (array) {
		ctx.strokeStyle = "#888";
		for (var i = 0; i < array.length; i++) {
			if (array[i+1]) {
				ctx.lineTo(array[i+1][0],array[i+1][1]);
			}
		}
			ctx.stroke();
	}

	function resizeCanvas(canvas,width,height) {
		if (width && height) {
			canvas.width = width;
			canvas.height = height;
		} else {
			if (window.innerHeight > 1920) {
				canvas.width = window.innerWidth;
			}
			else {
				canvas.width = 1920;
			}
			
			canvas.height = waveHeight;
		}
		
	}
	
	document.addEventListener("DOMContentLoaded",init,false);
})();

style.scss

$body-width: 1000px;

// Primary Colours
$primary: #e05;
$primary-light: mix($primary, white, 10%);
$primary-dark: mix($primary, black, 20%);

// Accent Colours
$accent: #22a;
$accent-light: mix($accent, white, 10%);
$accent-dark: mix($accent, black, 20%);

*, *:before, *:after {
  box-sizing: border-box;
}

html {
  font-size: 18px;
  font-family: Lato, serif;
  color: #444;
  font-weight: 300;
}

body {
  margin: 0;
  padding: 0;
  background: #fff;
}

.canvas-wrap {
  max-width: 100%;
  overflow: hidden;
  position: relative;
}

canvas {
  display: block;
}

h1 {
  font-family: Poppins, sans-serif;
  font-size: 4rem;
  color: #fff;
  font-weight: 600;
  margin-bottom: 0;
  max-width: 60%;
}

.header {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 10;
}

.nav {
  display: block;
  width: 100%;
  ul {
    list-style: none;
    margin: 0;
    padding: 0 1rem;
    display: flex;
    width: 100%;
    justify-content: flex-end;
    
  }
  li {
    display: block;
    margin-left: 1rem;
    height: 4rem;
    a {
      text-decoration: none;
      color: #fff;
      font-weight: 400;
      height: 4rem;
      display: block;
      line-height: 4rem;
    }
  }
}

.hero {
  background-color: $primary;
  background-image:
    linear-gradient(to bottom, rgba($primary, .75), $primary), url(http://picsum.photos/g/1366/768);
  background-size: cover;
  min-height: 400px;
  max-height: 800px;
  height: calc(100vh - 40px);
  display: flex;
  align-items: center;
  padding: 2rem;
  color: #fff;
}

.hero-content {
  max-width: $body-width;
  margin: 0 auto;
}

@mixin button {
  display: inline-block;
  background: #fff;
  border: none;
  font-family: inherit;
  font-size: inherit;
  padding: .75em 1.5em;
  border-radius: 100px;
  font-weight: 300;
  cursor: pointer;
  outline: none;
}

.button {
  @include button;
}

.hero-button {
  @include button;
  color: #fff;
  background-color: $accent;
  transition: 300ms ease;
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba($primary-dark,.5);
  }
}

.card-button {
  @include button;
  color: #fff;
  background-color: $primary;
  box-shadow: 0 5px 20px rgba($primary,.5);
  transition: 300ms ease;
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 25px rgba($primary,.5);
  }
}

.card-button-wrap {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  padding-bottom: 2rem;
}

.card-section {
  position: relative;
  padding: 4rem 0;
  margin: 2rem 0;
  &:before {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: $accent-light;
    transform: skewy(2deg);
  }
}

.wrap {
  margin: 0 auto;
  max-width: $body-width;
}

.section {
  padding: 4rem 0;
}

.card-wrap {
  margin: 0 auto;
  max-width: $body-width;
  position: relative;
}

.cards {
  display: flex;
  margin-left: -1rem;
  margin-right: -1rem;
}

.card {
  border-radius: .5rem;
  background: #fff;
  box-shadow: 0 5px 20px rgba($accent-dark,.1);
  margin: 1rem;
  padding: 2rem;
  width: 33%;
  height: 200px;
  position: relative;
  transition: box-shadow 300ms ease;
  &:hover {
    box-shadow: 0 5px 30px rgba($accent-dark,.2);
  }
}

.footer {
  background: $accent;
  color: #fff;
  min-height: 200px;
}

styles

<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet" />