Poly Template [WIP]

In this example below you will see how to do a Poly Template [WIP] with some HTML / CSS and Javascript

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Poly Template [WIP]</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="nav">
  <ul class="left">
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
  </ul>
  <h1>Poly</h1>
  <ul class="navbuttons right">
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
  </ul>
</div>
<div class="container">
  <div class="block landing" id="top">
    <div class="title">
      <h1>Welcome to <a>Poly</a></h1>
      <span>A flat template by <a href="http://uplusion23.net" target="_blank">uplusion23</a>.</span>
    </div>
  </div>
  <div class="block" id="one">
    <div class="inner">
      <h2 class="major">Vitae phasellus</h2>
      <p>Cras mattis ante fermentum, malesuada neque vitae, eleifend erat. Phasellus non pulvinar erat. Fusce tincidunt, nisl eget mattis egestas, purus ipsum consequat orci, sit amet lobortis lorem lacus in tellus. Sed ac elementum arcu. Quisque placerat auctor laoreet.</p>
      <section class="features">
        <article>
          <a href="#" class="image"><img src="https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-299643.png" alt=""></a>
          <h3 class="major">Sed feugiat lorem</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing vehicula id nulla dignissim dapibus ultrices.</p>
          <a href="#" class="special">Learn more</a>
        </article>
        <article>
          <a href="#" class="image"><img src="https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-260.png" alt=""></a>
          <h3 class="major">Nisl placerat</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing vehicula id nulla dignissim dapibus ultrices.</p>
          <a href="#" class="special">Learn more</a>
        </article>
        <article>
          <a href="#" class="image"><img src="https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-50886.png" alt=""></a>
          <h3 class="major">Ante fermentum</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing vehicula id nulla dignissim dapibus ultrices.</p>
          <a href="#" class="special">Learn more</a>
        </article>
        <article>
          <a href="#" class="image"><img src="https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-836.jpg" alt=""></a>
          <h3 class="major">Fusce consequat</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing vehicula id nulla dignissim dapibus ultrices.</p>
          <a href="#" class="special">Learn more</a>
        </article>
      </section>
    </div>
  </div>
  <div class="block gray thin" id="two">
    <div class="quote">
      <h2>This template has the price of Free.</h2>
      <span>The web is an amazing place. Why should you pay for it?</span>
    </div>
  </div>
  <div class="block" id="three">
    <div class="inner">
      <div class="text-block">
        <div class="icon padlock"></div>
        <h2>Mauris pretium orci urna.</h2>
        <p>Morbi ut porttitor elit. In sodales sodales malesuada. Pellentesque venenatis enim at dolor bibendum malesuada. Proin placerat hendrerit laoreet. Mauris pretium orci urna, quis rhoncus risus consequat eu. Ut ante urna, cursus non malesuada aliquet, congue ut ipsum. In hac habitasse platea dictumst. Vestibulum facilisis mi pretium, efficitur justo vel, sodales lacus. Nullam mi leo, egestas vitae posuere vitae, tincidunt sed elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean magna sapien, laoreet non odio sed, placerat interdum quam. Sed leo sem, ultricies quis hendrerit lobortis, ornare quis odio. Nullam dapibus quam magna, in consectetur velit congue sed. Maecenas gravida ipsum eget lacus condimentum, a accumsan dui ultrices.</p>
      </div>
      <div class="text-block">
        <div class="icon camera"></div>
        <h2>Pellentesque facilisis sed est in sagittis.</h2>
        <p>Vivamus consectetur, leo eget euismod consectetur, elit tellus finibus neque, eget viverra dui quam ac risus. Proin placerat id eros vitae tempus. Proin ac tortor nec nisi aliquam aliquam in in justo. Quisque et odio metus. Proin laoreet et ipsum ac convallis. Curabitur tincidunt fringilla ultrices. Aenean augue elit, consectetur eu vulputate vel, bibendum eu lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere leo eget libero auctor, suscipit pellentesque nibh luctus. Sed molestie pulvinar leo eget efficitur. Sed enim dolor, consequat vel facilisis egestas, tristique ac augue. Nam sit amet sem felis. Vivamus ullamcorper suscipit quam. Donec volutpat enim eget urna tempus, vel interdum neque auctor. Nulla facilisi.</p>
      </div>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/uplusion23/poly-template-wip-qZvLGR */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,300);

body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto';
  background: url('https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-237519.png');
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}

h1,h2,h3,h4,span,a,p {
  margin: 0;
  border: 0;
  color: #5b5b5b;
  font-weight: 700;
  letter-spacing: 0.125em;
  line-height: 1.75em;
  margin-bottom: 1em;
  text-transform: uppercase;
}

a {
  text-decoration: none;
  color: #2C3E50;
  border-bottom: 1px dotted;
  cursor: pointer;
  transition: all 0.12s ease;
}

a:hover {
  border-bottom: 1px dotted rgba(0,0,0,0);
}

.container {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: rgba(94,80,93,0.7);
  margin: 0;
  padding: 0;
}

.block {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: #FAFAFA;
}

.block.thin {
  min-height: 0px;
  height: auto;
  max-height: 500px;
}

.block.gray, .block.grey {
  background-color: #353849;
}

.nav {
  width: 100%;
  height: 45px;
  background: rgba(13,13,13,0.25);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  transition: all 0.5s ease;
}

.nav ul {
  margin: 0;
  padding: 0 30px;
  display: block;
  box-sizing: border-box;
}

.nav ul.left {
  float: left;
}

.nav ul.right {
  float: right;
}

.nav ul li {
  display: inline-block;
  height: 100%;
}

.nav ul li a {
  display: block;
  text-align: center;
  color: #FAFAFA;
  font-weight: 300;
  text-decoration: none;
  line-height: 45px;
  border: none;
  padding: 0 15px;
  box-sizing: border-box;
  opacity: 0.7;
  transition: all 0.32s ease;
}

.nav ul li a:hover {
  opacity: 1;
}

.nav.active {
  background: #2B3243;
  -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.5);
  box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.5);
}

.nav.active ul li a {
}

.nav h1 {
  position: fixed;
  margin: 0;
  display: inline-block;
  height: 45px;
  color: #FAFAFA;
  line-height: 45px;
  width: auto;
  text-align: center;
  font-weight: 300;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.landing {
  height: 100vh;
  max-height: 700px;
  width: 100%;
  background: none;
}

.landing .title {
  width: 80%;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin: auto;
  color: #FAFAFA;
  text-align: center;
  padding: 5% 0;
  box-sizing: border-box;
}

.landing > .title > h1 {
  font-weight: 300;
  font-size: 3.5em;
  color: #FAFAFA;
}

.landing > .title > span {
  font-size: 1.5em;
  color: #FAFAFA;
}

.landing > .title > h1 > a {
  border-bottom: none;
  cursor: default;
  font-weight: 400;
}

.block#one {
  -webkit-clip-path: polygon(50% 60px, 100% 0, 100% 100%, 0 100%, 0 0);
  clip-path: polygon(50% 60px, 100% 0, 100% 100%, 0 100%, 0 0);
  padding: 150px 10% 60px 10%;
}

.block h1 {
  color: #2B3243;
  font-size: 2.2em;
}

.inner {
  padding: 2em 0 1em 0;
  margin: 0 auto;
  width: 80%;
}

h1.major, h2.major, h3.major {
  padding-bottom: 1em;
  border-bottom: solid 2px rgba(13, 13, 13, 0.125);
}

.features article h1.major, .features article h2.major, .features article h3.major {
  color: #FAFAFA;
  border-bottom: solid 2px rgba(255, 255, 255, 0.125);
}

.features article p {
  margin: 0 0 2em 0;
  color: #FAFAFA;
}

.features article a {
  color: #CCC;
  border: none;
}

.features {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-align-content: flex-end;
  align-content: flex-end;
  margin: 0 0 2em 0;
}

.features article {
  display: block;
  padding: 1em 1.75em 35px 1.75em;
  background-color: #353849;
  border-radius: 5px;
  margin: 1.5em 3.5em 1.5em 0;
  width: calc(40% - 1.5em);
}

.features article .image {
  border-radius: 5px 5px 0 0;
  display: block;
  margin-bottom: 40px;
  margin-left: -1.75em;
  margin-top: -1.75em;
  position: relative;
  width: calc(100% + 3.5em);
  height: 200px;
  overflow: hidden;
}

.features article a.special {
  color: #a2a6b1;
  opacity: 0.7;
  transition: all 0.12s ease;
}

.features article a.special:hover {
  opacity: 1;
}

.quote {
  width: 100%;
  text-align: center;
  color: #FAFAFA;
  padding: 3.2em 0;
  box-sizing: border-box;
}

.quote h1, .quote h2, .quote h3 {
  color: #b06f63;
  margin: 5px 0 5px 0;
}

.quote span {
  color: #FAFAFA;
  text-transform: none;
  opacity: 0.7;
}

.text-block {
  width: 100%;
  padding: 0.4em 10px;
  margin: 2.5em 0;
  box-sizing: border-box;
}

.text-block h2 {
  font-size: 2.5em;
  display: inline-block;
}

.text-block .icon {
  display: inline-block;
  margin-left: -60px;
  margin-bottom: -5px;
  height: 50px;
  width: 50px;
  overflow: hidden;
}

.text-block .icon.camera {
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAABuvAAAbrwFeGpEcAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAMBQTFRF////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgldg8wAAAD90Uk5TAAEDBAUJDA0ODxQZGiYnLDY8PUBCR0pMT1xhZXF8fX5/jZWam6WusrO4v8PIyc3S1Nrg5ebt7u/w8fb3+Pv+/cfDVAAAAhtJREFUWMPtl9la6jAURn8cQBAqgzMKjrUWi8qponh0vf9beQEfUJq2oeXcnf+uIXuRnT0kkYw6fGVFr4daQ3tvxPS2twbgEoMu11jAuwnwbr+EHjCuLo9Ux0DP1r46Bq6iY1cxZopMk03Q1AX0st2aq9T1wuwNi29s6HVLklT37UJmCq1fl0ome1PSmJILv6SuYdictvH0BrrygEFTOdQcAJ5CIJe91ARCASinAP4D/i2gcnb3+PL5+fJ4d1bJATh1vxb59uWergk4iFWIf7AGYPv6O57139fbtoBdb2oy7Hca5XKj0x9Ov71dO0B1AIDrLIYcF4BBNQEQ1V+AUTs6tz2a/xSVMMqvrfpb880zzQB/Z2bWCsKH/vGWJO349oDR/P8DAJ4cSaqNEgFLKz0CWPg/BTC5KElqAxxlROEecBefrRmBC0lygft0QGUCOMubt39y+wNMHEkOMKmkAs6B4WoAOn+Apy1JQ+A8FXAD9GM53/kBjiX1gZtUgAd04lVzO+N2AC8V8Aw04oAT4EFSA3hOBXwA5ThgHwgllYGPPAAFEFgBElxQKwhaVi4kbOI8HJmbaA7jXNlhNCbSQtmJFE/lZVmk8moxRWVRTKvlHG1rieWc3FAiTW2Uo6UtaZ2WVrCp5mjrhQ+WDR9txQ/X4sf7Bi4YG7ji2GgzgMKX7cLX/S6F1DU/eazllxIeXbb2dcn87LPR9Nn3C8/zgnp5KH/gAAAAAElFTkSuQmCC');
  background-size: 50px 50px;
}

.text-block .icon.padlock {
 background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAABuvAAAbrwFeGpEcAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAIRQTFRF////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAvSgy4QAAACt0Uk5TAAEFBgcIFxkaGy01NjxJTWV9gIKVlpihprO0v8HDxMnW2drc4ubp6vLz+57C1zQAAAFfSURBVFjD7ZbbdoIwEEXxVlCUqyAqIiIgsP////pg21VrbEJ4qvU8zsnsyQUyMYyHmjpxWrRtkcbO1Oivt6jhS0301jN94rfcqPUnvcpn3CnrMYlFCUC9C1zTdINdDUC5UK5fAnTh+DMwDjuAUnEOkwwgt7/H7BwgU9sHH2Azuw3ONgC+0gJaIJ/9DM9yoFVZRAR09n3c7oBInj9tgFDkhEAj/yYdoB6LnHENOFJADOzE1g6IpYAUCMRWAKRSQAG4YssFCimgBUyxZQKtFACg470AL8AzAUbetkKiauuNHuVbe5S0tx7UV8yHvXgOHsryhIAtcFjKNnl5ALZCqwKk+YaxBCr9U/5t3JMCVsfjahDgCMdBANXYEwNMBK22B2B+AjjNtQHr68+71gacr4CzNuDjgqy0AckVkGgDrAvAxdI/RiupqsT65xfKHwMMbiyDW9vg5jq4vQ9+YOg9cd4BE6qVZXW/KgwAAAAASUVORK5CYII=');
  background-size: 50px 50px;
}

.text-block p {
  font-size: 1em;
  display: block;
  text-transform: none;
  color: #333;
}

/*Downloaded from https://www.codeseek.co/uplusion23/poly-template-wip-qZvLGR */
$(document).ready(function() {
  
});

$(window).on("scroll", function() {
  $("#top .title").css({
    "opacity": 1 - $(window).scrollTop() / 250,
    "margin-top": 1 - $(window).scrollTop() / 5
  });
  //console.log($(window).scrollTop())
  if ($(window).scrollTop() >= $("#one").offset().top + 100) {
    $(".nav").addClass("active");
  } else {
    $(".nav").removeClass("active");
  }
});

Comments