Hero Page

In this example below you will see how to do a Hero Page with some HTML / CSS and Javascript

A quick iteration of a cover similar to the design I found over here https://dribbble.com/shots/3070233-Event-Home-Page/attachments/646171

This awesome code was written by iwilsonq, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright iwilsonq ©


  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>Hero Page</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
<link href='https://fonts.googleapis.com/css?family=Allerta' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Crimson+Text' rel='stylesheet' type='text/css'>

      <link rel="stylesheet" href="css/style.css">



  <nav id="main-nav" class="navbar-full">
  <a href="#" class="navbar-brand">
  <ul class="nav navbar-nav">
    <li class="nav-item">
      <a href="#home" class="nav-link">Home</a> </li>
    <li class="nav-item"><a href="" class="nav-link">Conference</a></li>
    <li class="nav-item"><a href="" class="nav-link">Program</a></li>
    <li class="nav-item"><a href="" class="nav-link">Partners</a></li>
    <li class="nav-item"><a href="" class="nav-link">Speaker</a></li>
    <li class="nav-item"><button class="take-part">Take Part</button></li>

<section id="cover">
  <div class="container">
    <div class="row">
    <div class="col-md-8 offset-md-2">
      <h2>Sixth Event. In the circle of actual practice.</h2>
      <p class="date-location"> 26 November 2016 // 6:00
     Killiney, Ireland</p>
      <button class="btn btn-danger" type="button">



/*Downloaded from https://www.codeseek.co/iwilsonq/hero-page-aBbxZz */
* {
  font-family: "Allerta";

#cover {
  height: 100vh;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/698058/killiney.jpg");
  background-size: cover;
  background-position: center;
#cover .col-md-8 {
  margin: 195px 0px 195px 280px;
#cover .date-location {
  margin-top: 80px;
  width: 220px;
#cover p {
  font-family: "Crimson Text";
  font-size: 20px;
  line-height: 25px;

nav {
  position: fixed;
  width: 100vw;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.4);
nav .navbar-brand {
  color: #4d4d4d;
nav ul {
  float: right;
nav ul li a {
  color: #4d4d4d;

button {
  border-radius: 20px;
  color: #4d4d4d;
  border: 2px solid #4d4d4d;
  background-color: transparent;
  padding: 5px 15px;

.btn {
  border-radius: 20px;