LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque ipsum voluptatem voluptate labore eligendi dolores necessitatibus quo sint consequatur nisi, ab sequi, repellendus, tempora optio. Debitis, recusandae, quas. Minima, excepturi?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis quidem praesentium delectus, unde, tenetur commodi magnam expedita est iure error illo obcaecati eveniet odit laudantium maxime dolores nemo quo voluptates. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime facere, laborum repudiandae repellendus. Voluptatem ullam recusandae assumenda ab omnis, aliquam libero architecto qui, molestias praesentium accusamus reprehenderit vero maiores itaque.

CSS
/**
* VARIABLES 
**/
/**
 * MIXINS
 */
/**
* STYLES
**/
.navcontainer {
  background-color: #000;
  min-height: 52px;
}
@media (min-width: 768px) {
  .navcontainer {
    min-height: 85px;
  }
}
.navcontainer span {
  color: #ccc;
}

article p {
  font-size: 16px;
  line-height: 1.75;
}
@media screen and (min-width: 320px) {
  article p {
    font-size: calc(16px + 2 * (100vw - 320px) / 1046);
  }
}
@media screen and (min-width: 1366px) {
  article p {
    font-size: 18px;
  }
}
@media screen and (min-width: 320px) {
  article p {
    line-height: calc(1.75 + 0 * (100vw - 320px) / 1046);
  }
}
@media screen and (min-width: 1366px) {
  article p {
    line-height: 1.75;
  }
}

header {
  background-color: pink;
  position: relative;
  margin-bottom: 50px;
}
header:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 56.25%;
}
header > .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
header h1 {
  font-size: 27px;
}
@media screen and (min-width: 320px) {
  header h1 {
    font-size: calc(27px + 34 * (100vw - 320px) / 1046);
  }
}
@media screen and (min-width: 1366px) {
  header h1 {
    font-size: 61px;
  }
}
Term
Sat, 04/14/2018 - 20:49

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv