CodePen Embed - Creative website

<header class="container-fluid">
  <nav id="navbar-spy" class="navbar navbar-default">
    <ul class="nav navbar-nav navbar-right">
      <li><a class="" href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#how">How</a></li>
      <li><a href="#what">What</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>
<div class="content">
<div id="home" class="jumbotron">
  <div class="container-text">
    <div class="container">
    <h1 class="">Creative Unity</h1>
    <p class="">We make the world a beautiful place!</p>
    <div class="">
      <a href="https://twitter.com/CreativeUnityNL" target="_blank" class="btn btn-primary" role="button"><i class="fa fa-twitter fa-lg"></i> Twitter</a>
      <a href="https://github.com/denklarenbeek" target="_blank" class="btn btn-primary" role="button"><i class="fa fa-github fa-lg"></i> Github</a>
      <a href="https://codepen.io/denklarenbeek" target="_blank" class="btn btn-primary" role="button"><i class="fa fa-codepen fa-lg"></i> Codepen</a>
      </div>
    </div>
  </div>
</div>
<div class="container-fluid">
  <div id="about" class="container">
    <div class="row">
      <div class="col-lg-4">
        <img src="" alt="brain image" >
      </div>
      <div class="col-lg-6  col-lg-offset-2">
        <h2 class="">About</h2>
        <h5>Why we want to make the world beautiful</h5>
        <p class="">Het ergert en irriteert mij persoonlijk wanneer mensen geen aandacht hebben gestoken in de offline/online uitingen. Dit kan een website zijn die niet functioneert op een mobiele telefoon, afbeeldingen welke niet geschikt zijn voor een retina scherm of uitingen welke geen verband houden met waar het bedrijf voor staat. Daarnaast wordt ik juist vrolijk wanneer bedrijven/mensen er juist heel veel aandacht en energie in hebben gestoken. Uit deze haat/liefde verhouding is mijn motivatie gegroeid om Creative Unity op te bouwen.</p>
      </div>
    </div>
  </div>
  <div class="container-fluid background">
    <div id="how" class="container">
      <div class="row">
        <div class="col-lg-6">
          <h2 class="">How</h2>
          <h5>How do we make the world more beautiful</h5>
          <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et nulla risus. Quisque dui ante, dictum at sagittis sed, mattis ut nibh. Proin efficitur at enim sit amet tincidunt. Vivamus in felis leo. Maecenas eu mattis augue. In ullamcorper enim a tellus molestie aliquam. Nulla faucibus, ante eget porttitor feugiat, nisl lorem consequat est, vitae ullamcorper nunc turpis et dolor.</p>
        </div>
        <img class="col-lg-4 col-lg-offset-2" src="http://placehold.it/350?text=Afbeelding" />
      </div>
    </div>
  </div>
  
  <div class="container-fluid">
    <div id="what" class="container">
      <div class="row">
        <div class="col-lg-12">
          <h2 class="text-center">What</h2>
          <h5 class="text-center">What services makes the world more beautiful</h5>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
          <img src="http://placehold.it/250?text=Afbeelding">
          <p class="text-center"><strong>Dienst.</strong> en de korte omschrijving</p>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
          <img src="http://placehold.it/250?text=Afbeelding">
          <p class="text-center"><strong>Dienst.</strong> en de korte omschrijving</p>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
          <img src="http://placehold.it/250?text=Afbeelding">
          <p class="text-center"><strong>Dienst.</strong> en de korte omschrijving</p>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
          <img src="http://placehold.it/250?text=Afbeelding">
          <p class="text-center"><strong>Dienst.</strong> en de korte omschrijving</p>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
          <img src="http://placehold.it/250?text=Afbeelding">
          <p class="text-center"><strong>Dienst.</strong> en de korte omschrijving</p>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
          <img src="http://placehold.it/250?text=Afbeelding">
          <p class="text-center"><strong>Dienst.</strong> en de korte omschrijving</p>
        </div>
      </div>
    </div>
  </div>
  <div id="cust_case" class="container-fluid background">
    <div class="con">
      <div class="row">
        <div class="col-sm-3 col-lg-3 text-center">
          <p>Logo klant</p>
        </div>
        <div class="col-sm-3 col-lg-3 text-center">
          <p>Logo klant</p>
        </div>
        <div class="col-sm-3 col-lg-3 text-center">
          <p>Logo klant</p>
        </div>
        <div class="col-sm-3 col-lg-3 text-center">
          <p>Logo klant</p>
        </div>
      </div>
    </div>
  </div>
  
  <div id="portfolio" class="container-fluid ">
    <h2 class="text-center">Portfolio</h2>
    <h5 class="text-center">Which lifes we've already made beautiful</h5>
    <div class="container projects">
      <div class="row">
        <div class="project-container" id="reference"></div>
    </div>
  </div>
  </div>
  <div id="contact" class="container-fluid background">
    <div class="container">
      <div class="row">
        <div class="col-xs-6 col-md-6">
          <form>
            <input type="text" placeholder="Name" name="name"><br>
            <input type="text" placeholder="Bedrijfsnaam" name="company"><br>
            <input type="email" placeholder="E-mail" name="email"><br>
            <input type="tel" placeholder="Telefoonnummer" name="phone"><br>
            <textarea type="text" placeholder="Bericht" name="message" rows="3"></textarea><br>
            <input class="submit" type="submit" value="Verstuur">
          </form>
        </div>
        <div class="col-xs-6 col-md-6 person-info">
          <img src="https://www.gravatar.com/avatar/4fcd5a1e301cb6a46b21a21a69eec80f?s=250">
          <h2 class="">Contact me</h2>
          <p>Heb je interesse om tijdens een kop koffie te brainstromen of te filosoferen over de toekomst, neem dan gerust contact met ons op! <i class="fa fa-coffee"></i></p>
        </div>
      </div>
    </div>
  </div>
</div>
  </div>
</div>

/* General styling */

*:focus {
  outline: none !important;
}

*:hover {
  outline: none;
}

body {
  box-sizing: border-box;
  font-family: 'Work Sans', sans-serif;
  position: relative;
}

h5 {
  font-weight: bold;
  margin-bottom: 25px;
}

hr {
  margin-top: -5px;
  margin-bottom: 40px;
  width: 20%;
}

.container-fluid {
  padding-left: 0;
  padding-right: 0;
}

.container {
  max-width: 80% !important;
}

.background {
  background: #262F36;
  color: white;
}


/* Navbar styling */

header {
  height: 100%;
}

.navbar {
  width: 100%;
  background: transparent;
  border: none;
  position: fixed;
  margin-top: 40px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 0px;
  padding-top: 5px;
  padding-bottom: 5px;
  z-index: 100;
  font-weight: 500;
  transition: all 0.4s ease;
}

.nav>li>a {
  height: 100%;
  color: white;
}

.navbar-right {
  margin-right: 0px;
}

.sticky-header {
  background-color: rgba(38, 47, 54, .7);
  transition: all 0.4s ease;
}

.navbar-default .navbar-nav > li > a {
  color: white;
}

.navbar-default .navbar-nav > .active > a {
  color: white;
  font-weight: bold;
  border: 2px solid white;
  background-color: transparent;
  border-radius: 25px;
  transition: all ease 1s;
}

.navbar-default .navbar-nav > li > a:hover {
  color: rgb(38,47,54);
  background-color: white;
  border-radius: 25px;
  transition: all ease 1s;
}

/* Jumbotron styling */

.jumbotron {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  background-image: url("https://images.unsplash.com/photo-1464013778555-8e723c2f01f8?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=4b2c415f63f63afa66a347f993351bee");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: white;
}

.container-text {
  width: 100%;
}


/* About, how, what, portolio, contact styling */

#about,
#how,
#contact {
  height: 100vh;
}

#what,
#portfolio {
  padding-top: 80px;
}

#about .row,
#how .row,
#contact .row {
  display: flex;
  align-items: center;
  height: 100%;
}

#about h2,
#how h2,
#what h2 {
  text-transform: uppercase;
}

#about h5,
#how h5,
#what h5 {
  letter-spacing: .15em;
  font-size: 14px;
}

#about p,
#how p,
#what p {
  line-height: 1.6;
  font-size: 19px;
  font-weight: 300;
}


/* How styling */

#how img {}


/* What styling */
#what {
  height: 110vh;
}

#what h5 {
  padding-bottom: 80px;
}

#what .row img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 25%;
}

#what .col-lg-4 p {
  margin-bottom: 75px;
  font-size: 16px;
}


/* Cust_case styling */

#cust_case {
  height: 20vh;
}

#cust_case .con {
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

#cust_case .row {
  display: flex;
  align-items: center;
  height: 100%;
}


/* Portfolio styling */
#portfolio {
  margin-bottom: 75px;
}

.projects a {
  padding-left: 0;
  padding-right: 0;
}

.thumbnail {
  outline: none !important;
  min-height: 250px;
  max-height: 250px;
  height: 100%;
  width: 100%;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
}

.project-box {
  position: relative;
/*   display: inline-block; */
  padding: 0;
}

.after-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  color: #FFF;
  padding-top: 50px;
  padding-left: 30px;
}

.after-text a {
  border: 1px solid white;
  padding: 10px 20px;
  color: white;
  transition: all 0.8s ease;
}

.after-text a:hover {
  color: rgb(38, 47, 54);
  font-weight: light;
  background-color: white;
}

.project-box:hover .after-text {
  display: inline-block;
  background: rgba(0, 0, 0, .6);
}

/* .thumbnail img:hover {
  background-color: black;
} */

/* .thumbnail:hover {
  -webkit-box-shadow: -5px 10px 20px 0px rgba(38, 47, 54, 0.5);
  -moz-box-shadow: -5px 10px 20px 0px rgba(38, 47, 54, 0.5);
  box-shadow: -5px 10px 20px 0px rgba(38, 47, 54, 0.5);
} */


/* Contact styling */

#contact .container {
  height: 100%;
}

#contact img {
  border-radius: 50%;
  height: 150px;
}

form input,
form textarea {
  width: 100%;
  font-size: 20px;
  padding-left: 15px;
  margin-bottom: 15px;
  border: none;
  border-bottom: 1px solid grey;
  border-radius: 10px;
  color: rgb(38, 47, 54);
}

form input {
  height: 50px;
}

form input[type=submit] {
  width: 40%;
  display: block;
  border: 1px solid white;
  border-radius: 25px;
  background-color: transparent;
  color: white;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
}

.submit:hover {
  background-color: white;
  color: rgb(38, 47, 54);
}

::-webkit-input-placeholder {
  font-size: 18px;
  color: rgba(38, 47, 54, .5)
}

@media screen and (min-width: 1200px) {
  .container {
    width: 60%;
  }
}

@media screen and (max-width: 1200px) {
  .navbar {
    width: 100%;
  }
  #about p,
  #how p,
  #what p {
    line-height: 1.4;
    font-size: 14px;
    font-weight: 300;
  }
}

/* Styling the reference container */
#reference {
  display: flex;
  flex-direction: row;
  width: 1080px;
  margin-left: auto;
  margin-right: auto;
  height: auto;
}
.reference__block {
  position: relative;
  width: calc(1080px / 3);
  height: calc(1080px / 3);
  background-size: cover;
}
.reference__block:hover > .reference__block__color-overlay {
  opacity: 1;
  transform: scale(1);
}
.reference__block:hover > .reference__block__inner {
  opacity: 1;
}
.reference__block:hover .reference__block__inner__title {
  transform: translateY(0);
  transition: transform .4s ease;
}
.reference__block:hover .reference__block__inner__paragraph {
  transform: translateY(50%);
  transition: transform .4s ease;
}
.reference__block__color-overlay {
  position: relative;
  background-size: cover;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity transform .2s ease;
  -webkit-transition: opacity transform .2s ease;
  transform: scale(0.85);
}
.reference__block__inner {
  position: absolute;
  color: white;
  opacity: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.reference__block__inner p {
  margin: 0;
  text-align: center;
  color: white;
}
.reference__block__inner .reference__block__inner__title {
  text-decoration: none;
  font-weight: bold;
  text-transform: uppercase;
  transform: translateY(100%);
  transform-style: preserve-3d;
}
.reference__block__inner .reference__block__inner__paragraph {
  font-weight: 200;
  font-style: italic;
  transform: translateY(0);
  text-transform: lowercase;
}

const referenties = [
  {
    url: 'http://google.com',
    backgroundUrl: 'http://lorempixel.com/400/400',
    color: "rgba(65,131,215, 1)",
    title: 'Yeah Working Block creater function',
    paragraph: 'Paragraph text'
  },
  {
    url: 'http://facebook.com',
    backgroundUrl: 'http://lorempixel.com/400/400',
    color: "rgba(65,85,215, 1)",
    title: 'Yeah Working Block 2 creater function',
    paragraph: 'Paragraph text 2'
  },
  {
    url: 'http://nu.nl',
    backgroundUrl: 'http://lorempixel.com/400/400',
    color: "rgba(181,85,215, 1)",
    title: 'Yeah Working Block 3 creater function',
    paragraph: 'Paragraph text 3'
  }
]

/* Sticky header bar */
$(window).scroll(function() {
if ($(this).scrollTop() > 1){  
    $('.navbar').addClass("sticky-header");
  $('.navbar').css("margin-top", "0px");
  }
  else{
    $('.navbar').removeClass("sticky-header");
    $('.navbar').css("margin-top", "40px");
  }
});

/* ScrollSpy */
$('body').scrollspy({ target: '#navbar-spy' });

/* referentie creeëren */
function createReferenceBlock(reference){
  
  //Create the container for the reference
  let referenceHtml = document.createElement('a');
  referenceHtml.className = "reference__block";
  referenceHtml.setAttribute("href", reference.url);
  referenceHtml.style.backgroundImage = `url(${reference.backgroundUrl})`
  
  //Create a background-color div
  let colorContainer = document.createElement('div');
  colorContainer.className = "reference__block__color-overlay";
  colorContainer.style.backgroundColor = reference.color;
  
  //Create a reference-block inner div
  let innerRefBlock = document.createElement('div');
  innerRefBlock.className = "reference__block__inner";
  
  //Create reference-title
  let titleComponent = document.createElement('p');
  titleComponent.className = "reference__block__inner__title";
  titleComponent.appendChild(document.createTextNode(reference.title));
  
  //Create reference-paragraph
  let paragraphComponent = document.createElement('p');
  paragraphComponent.className = "reference__block__inner__paragraph";
  paragraphComponent.appendChild(document.createTextNode(reference.paragraph));
  
  //Append the title and the paragraph inside the inner container
  innerRefBlock.appendChild(titleComponent);
  innerRefBlock.appendChild(paragraphComponent);
  
  // Append the color and inner container inside the reference container
  referenceHtml.appendChild(colorContainer);
  referenceHtml.appendChild(innerRefBlock);
  
  return referenceHtml
  
}

function createReferenceContainer(obj){
  for(let i = 0;i <obj.length; i++){
    let block = createReferenceBlock(obj[i])
    document.getElementById('reference').appendChild(block)
  }
}

createReferenceContainer(referenties);

This Pen is owned by Dennis Klarenbeek on CodePen.

See more by @denklarenbeek on CodePen

External CSS

External JavaScript