LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
  

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

©2017 All rights reserved. Justin Perri.
CSS
/***********RESET*****************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/************ END RESET **********/

body {
  background-color: #0082bb;
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
}

a {
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}

a:hover {
  color: #bbe3f5;
}

.header {
  margin: 1em;
  text-align: center;
}

.logo {
  width: 150px;
}

.logo-subtitle-left, .logo-subtitle-right {
  padding-bottom: 12px;
  width: 115px;
}

.logo-subtitle-left {
  visibility: hidden;
}

.nav {
  font-size: 1.2em;
  width: 100%;
  height: 60px;
  padding: 1em 0;
  position: relative;
  margin-bottom: -45px;
  z-index: 3;
}

.nav ul {
  list-style: none;
  text-align: center;
}

.nav ul li {
  display: inline-block;
  margin: 0 2em;
}

.sticky {
  background-color: #191919;
  height: 30px;
  position: fixed;
  top: 0;
}

.portfolio {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 0 auto;
  max-width: 1300px;
}

.item {
  flex-grow: 1;
  margin: 2em 1em;
  width: 300px;
  text-align: center;
}

.item p {
  padding: 1em;
  margin: 0 auto;
  width: 275px;
}

.portfolio-item {
  height: 275px;
  width: 275px;
  border: solid 12px #fff;
  border-radius: 10px
}

.portfolio-item:hover {
  cursor: pointer;
  filter: brightness(0.8);
}

.lightbox-target {
  position: fixed;
  top: -100%;
  width: 100%;
  background: rgba(0,0,0,.9);
  opacity: 0;
  -webkit-transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -o-transition: opacity .5s ease-in-out;
  transition: opacity .5s ease-in-out;
  overflow: hidden;
  z-index: 4;
}

.lightbox-target img {
  margin: auto;
  position: absolute;
  top: 0;
  left:0;
  right:0;
  bottom: 0;
  max-height: 0%;
  max-width: 0%;
  border: 3px solid white;
  box-shadow: 0px 0px 8px rgba(0,0,0,.3);
  box-sizing: border-box;
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

.lightbox-target:target {
  opacity: 1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.lightbox-target:target img {
  max-height: 100%;
  max-width: 100%;
}

a.lightbox-close {
  display: block;
  width:50px;
  height:50px;
  box-sizing: border-box;
  background: white;
  color: black;
  position: absolute;
  right: 0;
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

a.lightbox-close:before, a.lightbox-close:after {
  content: "";
  display: block;
  height: 30px;
  width: 1px;
  background: black;
  position: absolute;
  left: 26px;
  top:10px;
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  transform:rotate(45deg);
}

a.lightbox-close:after {
  -webkit-transform:rotate(-45deg);
  -moz-transform:rotate(-45deg);
  -o-transform:rotate(-45deg);
  transform:rotate(-45deg);
}


footer {
  background-color: #191919;
  color: #fff;
  font-size: .8em;
  padding: 1.5em;
  text-align: center;
}

@media (max-width:421px) {
  .logo-subtitle-left, .logo-subtitle-right {
    display: block;
    margin: 0 auto;
  }

  .logo-subtitle-left {
    display: none;
  }
}
JS
var navigation = $(".nav");
    stickyDiv = "sticky";
    header = $('.header').height();

$(window).scroll(function() {
  if( $(this).scrollTop() > header ) {
    navigation.addClass(stickyDiv);
  } else {
    navigation.removeClass(stickyDiv);
  }
});
Term
Wed, 12/27/2017 - 07:05

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv