LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Minimal & Bold

\\\///

Here is a some filler text that I am using to make this look like a site.
Not much else going on here so you can move along.

Phoenix

Kitsch pinterest tacos bicycle rights, yuccie leggings tote bag readymade fixie gentrify freegan small batch put a bird on it. Street art pop-up gochujang, tumblr migas pour-over kombucha skateboard lo-fi umami hammock whatever. Tattooed distillery bushwick, mustache sustainable keytar tilde chillwave lumbersexual literally cliche lomo tousled.

Welcome

\\\///

Direct trade 90's quinoa literally helvetica aesthetic, listicle ugh lo-fi blue bottle deep v vinyl asymmetrical gochujang marfa.

Explore

About Us

Fixie keffiyeh chambray tattooed biodiesel locavore yuccie street art. Pour-over biodiesel cronut forage fap, occupy mixtape offal chillwave.

\\\///

Clean Code

Ennui literally hella skateboard normcore leggings franzen bespoke etsy listicle single-origin coffee.

Retina Ready

Kale chips typewriter echo park, meggings sartorial selfies butcher hammock irony.

Flexible

Hoodie kickstarter cray man braid, lo-fi waistcoat retro master cleanse hella.

Trending Design

Brooklyn schlitz tacos readymade, portland wolf man braid direct trade fingerstache next level lo-fi pickled.

\\\///

Retina Ready

Brooklyn migas gentrify, helvetica beard listicle yuccie 8-bit cardigan taxidermy knausgaard try-hard. 90's letterpress occupy franzen bushwick try-hard, tofu disrupt wayfarers echo park deep v. Man braid mustache gluten-free put a bird on it flexitarian.

Development

Design

Marketing

Dedication

Portfolio

Show All
Design
Graphics
Motion
Video

8679

Happy Clients

340 K+

Facebook Likes

100

Awards

3456

Retweets

Team

Wolf street art flannel microdosing, fixie viral small batch scenester PBR&B brunch mlkshk asymmetrical. Everyday carry brooklyn green juice, typewriter squid pork belly lomo forage paleo.

\\\///

Corn Dog

Web Developer

Wolf street art flannel microdosing, fixie viral small batch scenester PBR&B brunch mlkshk asymmetrical. Everyday carry brooklyn green juice, typewriter squid pork belly lomo forage paleo.

Clients

Services

Quality over Quantity

\\\///

Brooklyn migas gentrify, helvetica beard listicle yuccie 8-bit cardigan taxidermy knausgaard try-hard.

Wordpress

\\\///

Brooklyn migas gentrify, helvetica beard listicle yuccie 8-bit cardigan taxidermy knausgaard try-hard. 90's letterpress occupy franzen bushwick.

</>

Pixel Perfect

\\\///

3 wolf moon retro pickled, flexitarian echo park shoreditch keffiyeh direct trade sustainable forage readymade vinyl. Venmo bicycle rights mumblecore, fixie typewriter quinoa street art letterpress vinyl XOXO iPhone

Minimal

\\\///

Chia microdosing pork belly, occupy bitters pickled ennui cred listicle kale chips portland slow-carb. Leggings VHS readymade, authentic yuccie beard migas XOXO helvetica marfa gentrify.

Our Plans

Flexitarian craft beer narwhal umami, swag church-key single-origin coffee. Gochujang hoodie cold-pressed, health goth paleo yr fashion axe listicle gentrify blog pinterest jean shorts.

\\\///

Basic

\\\///

40$/year

\\\///
  • Customer Support 24/7
  • Lifetime Updates
  • 10GB Cloud Storage
  • 10 Email boxes
  • -
Subscribe!

Standard

\\\///

60$/year

\\\///
  • Customer Support 24/7
  • Lifetime Updates
  • 100GB Cloud Storage
  • 20 Email boxes
  • -
Subscribe!

Full

\\\///

150$/year

\\\///
  • Customer Support 24/7
  • Lifetime Updates
  • 10 TB Cloud Storage
  • 100 Email boxes
  • Unlimited Traffic
Subscribe!

Testimonials

"Meggings cold-pressed bitters authentic, locavore butcher etsy gastropub semiotics. Banjo mixtape farm-to-table, whatever poutine master cleanse blog godard raw denim williamsburg vice pinterest forage fap. Master cleanse single-origin coffee farm-to-table, flannel VHS viral XOXO bespoke banh mi tumblr umami. Banh mi brunch DIY, umami wayfarers waistcoat chia small batch brooklyn meggings food truck iPhone next level photo booth before they sold out."

Benedict Cumberbatch

Occupation stuff here

Contact

Crucifix normcore synth, retro aesthetic plaid hashtag keffiyeh actually beard. Kombucha chillwave hoodie fap. Pug 3 wolf moon chia, keytar franzen cray cred slow-carb waistcoat viral farm-to-table sartorial lomo.

\\\///

Don't hesitate to contact us.

Man braid leggings schlitz semiotics chambray 3 wolf moon blog fashion axe. Shabby chic paleo typewriter asymmetrical, forage chia affogato etsy. Cronut retro meh distillery.

4435 Berkshire Circle
Knoxville
TN 27912
879-890-9767
234-890-1213
mail@mail.com
themes.fastwp.net
M-F: 8 AM - 3 PM
Sa: 8AM - 12PM
Su: Closed

Submit

CSS
@import url("https://fonts.googleapis.com/css?family=Montserrat:700");
@import url("https://fonts.googleapis.com/css?family=Orbitron:700");
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500");
a {
  text-decoration: none;
}
* {
  -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
}
body {
  overflow-x: hidden;
  font-family: "Roboto";
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 2px;
  font-weight: 400;
}
.rela-block {
  display: block;
  position: relative;
  text-align: center;
  box-sizing: border-box;
  overflow: hidden;
}
.floated {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}
.floated.left {
  float: left;
}
.floated.right {
  float: right;
}
.abs-cent-text {
  position: absolute;
  width: 90%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  text-align: center;
}
.orbitron {
  display: inline-block;
  position: relative;
  font-family: "Orbitron";
  font-size: 20px;
  letter-spacing: 0px;
  line-height: 32px;
  margin-bottom: 60px;
}
.orbitron::before,
.orbitron::after {
  content: "";
  position: absolute;
  height: 2px;
  width: 60%;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background-color: #fff;
}
.orbitron::before {
  left: -65%;
}
.orbitron::after {
  right: -63%;
}
.orbitron.black-orb::before,
.orbitron.black-orb::after {
  background-color: #000;
}
.nav-bar {
  position: fixed;
  z-index: 100;
  height: 110px;
  top: 0;
  left: 0;
  right: 0;
  padding: 0 6%;
}
.nav-bar.scrolled {
  height: 80px;
  background-color: rgba(0,0,0,0.7);
}
.nav-logo {
  position: absolute;
  top: 50%;
  left: 6%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-family: "Montserrat";
  font-size: 24px;
  letter-spacing: 0px;
  color: #fff;
  -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
  cursor: pointer;
}
.nav-links-container {
  position: absolute;
  top: 50%;
  right: 6%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.nav-link {
  color: #999;
  font-size: 13px;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 500;
  padding: 0 12px;
  -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
}
.nav-link.active,
.nav-link:hover {
  color: #fff;
}
.top-section {
  height: 100vh;
  background: url("https://upload.wikimedia.org/wikipedia/commons/archive/e/e1/20141028134401%21Icefields%282013.07.16%29byRyanSchroeder.jpg") no-repeat center;
  background-size: cover;
}
.grad-back::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: -webkit-radial-gradient(transparent, rgba(0,0,0,0.9));
  background: radial-gradient(transparent, rgba(0,0,0,0.9));
}
.top-text {
  color: #fff;
  top: 58%;
  line-height: 28px;
}
.top-small-text {
  font-size: 17px;
  line-height: 24px;
  letter-spacing: 2px;
  font-weight: 400;
}
.big-text {
  font-family: "Montserrat";
  text-transform: uppercase;
  font-size: 58px;
  line-height: 72px;
  letter-spacing: 20px;
  margin-bottom: 60px;
}
.half-big-text {
  font-family: "Montserrat";
  text-transform: uppercase;
  font-size: 30px;
  line-height: 48px;
  letter-spacing: 12px;
  margin-bottom: 45px;
}
.half-big-text.has-border {
  display: inline-block;
  position: relative;
  margin: 0 auto 50px;
  padding: 15px 45px;
  border: 10px solid;
}
.under-top-section {
  color: #fff;
  background-color: #1d1d1d;
  text-align: left;
  padding: 0 6%;
}
.under-top-big-text {
  margin-top: 80px;
}
.under-top-small-text {
  width: 84%;
  max-width: 580px;
  margin-bottom: 50px;
}
.lines-thing {
  display: inline-block;
  position: relative;
  margin-bottom: 45px;
  height: 2px;
  width: 80px;
  background-color: #fff;
}
.lines-thing::before,
.lines-thing::after {
  content: "";
  position: absolute;
  height: 2px;
  width: 25px;
  background-color: #fff;
}
.lines-thing::before {
  top: -12px;
}
.lines-thing::after {
  bottom: -12px;
}
.lines-thing.black {
  background-color: #000;
}
.lines-thing.black::before,
.lines-thing.black::after {
  background-color: #000;
}
.welcome-section {
  height: 520px;
  background: url("http://www.exlservice.com/wp-content/uploads/2015/09/FA-Business-Services-Hero-2.jpg") no-repeat left top;
  background-size: 1100px 660px;
}
.welcome-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: -webkit-linear-gradient(right, #fff 48%, transparent);
  background: linear-gradient(to left, #fff 48%, transparent);
}
.welcome-section .orbitron {
  font-size: 16px;
  margin-bottom: 30px;
}
.welcome-text {
  right: 0;
  width: 45%;
  max-width: 900px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  text-align: center;
}
.welcome-text .big-text {
  margin-bottom: 30px;
}
.welcome-text p {
  max-width: 480px;
  margin: 0 auto 40px;
}
.has-lines {
  display: inline-block;
  position: relative;
  text-transform: uppercase;
  padding: 13px 45px;
  border-left: 2px solid;
  border-right: 2px solid;
  font-weight: 700;
  letter-spacing: 4px;
  margin: 10px;
}
.has-lines::before,
.has-lines::after {
  content: "";
  position: absolute;
  height: 2px;
  left: 45px;
  right: 45px;
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
}
.has-lines:before {
  top: 0;
}
.has-lines::after {
  bottom: 0;
}
.has-lines.white:hover::before,
.has-lines.white:hover::after {
  background-color: #fff;
}
.has-lines.black:hover::before,
.has-lines.black:hover::after {
  background-color: #000;
}
.has-lines:hover::before {
  top: 8px;
}
.has-lines:hover::after {
  bottom: 10px;
}
.about-us-section {
  padding: 250px 0 80px;
}
.about-us-section> p {
  display: block;
  position: relative;
  width: 65%;
  margin: 30px auto 120px;
}
.about-us-section .orbitron {
  margin-bottom: 100px;
}
.about-us-quad-container,
.about-us-bottom-container {
  width: 85%;
  max-width: 1100px;
  margin: 0 auto 100px;
}
.quad-half {
  width: 50%;
  text-align: left;
  padding: 30px 20px 10px;
}
.quad-half p {
  width: 90%;
}
.small-header {
  font-family: "Montserrat";
  text-transform: uppercase;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 8px;
  margin-bottom: 20px;
}
.bottom-left-side {
  text-align: left;
  width: 65%;
}
.bottom-left-side .small-header,
.bottom-left-side .lines-thing {
  margin-bottom: 45px;
}
.bottom-left-side p {
  width: 90%;
}
.bottom-right-side {
  width: 35%;
  text-align: left;
  line-height: 30px;
}
.bottom-right-side p {
  font-family: "Montserrat";
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: 3px;
}
.progress-bar {
  height: 18px;
  width: 90%;
  border: 3px solid;
  margin-bottom: 10px;
}
.progress-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
}
.progress-bar.one::before {
  right: 10%;
}
.progress-bar.two::before {
  right: 20%;
}
.progress-bar.three::before {
  right: 30%;
}
.portfolio-section {
  color: #fff;
}
.portfolio-top {
  background: url("https://unsplash.it/3000/1987?image=931") no-repeat center;
  background-size: 100% 100%;
  color: #000;
}
.portfolio-top .half-big-text {
  margin: 90px auto;
}
.portfolio-second {
  padding: 50px 0;
  background-color: #1d1d1d;
}
.portfolio-collage {
  height: 1000px;
  max-width: 1300px;
  margin: auto;
}
.collage-column {
  height: 100%;
  width: 33.3333333%;
}
.collage-image {
  background-size: cover !important;
  width: 100%;
}
.collage-image.third {
  height: 33.3333333%;
}
.collage-image.two-thirds {
  height: 66.6666666%;
}
.collage-image.one {
  background: url("http://images.huffingtonpost.com/2014-12-02-knowledgepoolstokeepyourbrainhealthythiswinter.jpeg") no-repeat center;
}
.collage-image.two {
  background: url("http://davideschenlohr.com/wp/david/wp-content/uploads/2015/08/type-set.jpg") no-repeat center;
}
.collage-image.three {
  background: url("http://papers.co/wallpaper/papers.co-mu80-paris-eiffel-tower-tour-dark-bw-bird-france-29-wallpaper.jpg") no-repeat center;
}
.collage-image.four {
  background: url("http://www.secondchance.org/wp-content/uploads/2014/07/unsplash_52c8b9c40b624_1-copy.jpg") no-repeat left top;
}
.collage-image.five {
  background: url("https://ununsplash.imgix.net/31/4dAw8Su1SyaQH5ABC87S_Traunsee-Toscana_2014-02-01%20%2890%20von%20117%29.jpg?fit=max&fm=jpg&h=1080&q=75&w=1080") no-repeat center;
}
.collage-image.six {
  background: url("https://d24wuq6o951i2g.cloudfront.net/img/events/id/146/146452/assets/f18.cirque.jpg") no-repeat center;
}
.collage-image.seven {
  background: url("http://static1.squarespace.com/static/5555d35ae4b02de6a6e49ea4/5559d7efe4b0338055e763ac/5559d863e4b0c2b7c9e90a86/1433334869903/14010_023.jpg") no-repeat center;
}
.portfolio-bottom {
  height: 300px;
  background: #1d1d1d;
}
.quarter-div {
  height: 100%;
  width: 25%;
}
.quarter-div .big-text {
  letter-spacing: 4px;
  margin-bottom: 15px;
}
.team-section {
  padding: 250px 0 0px;
}
.team-section p {
  position: relative;
  width: 60%;
  margin: 0 auto 140px;
}
.team-section .orbitron {
  margin-bottom: 100px;
}
.profile-view-container {
  width: 90%;
  max-width: 1300px;
  margin: 0 auto -15px;
}
.profile-view-container .profile-image {
  display: inline-block;
  height: 576px;
  width: 48%;
  vertical-align: top;
  background: url("http://orig01.deviantart.net/b87d/f/2014/160/7/4/business_man_looking_disgustingly_at_a_corn_dog_by_ashmaster1121-d7lpp2k.jpg") no-repeat center;
  background-size: 375px 576px;
}
.profile-view-container .arrow {
  position: absolute;
  z-index: 20;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  height: 50px;
  width: 50px;
  background: url("https://image.freepik.com/free-icon/chevron-arrow-to-right--ios-7-interface-symbol_318-33616.png") no-repeat center;
  background-size: cover;
  cursor: pointer;
}
.profile-view-container .arrow.left {
  -webkit-transform: translateY(-50%) rotate(180deg);
          transform: translateY(-50%) rotate(180deg);
  left: 0;
}
.profile-view-container .arrow.right {
  right: 0;
}
.profile-content {
  display: inline-block;
  position: relative;
  padding-top: 50px;
  width: 48%;
  vertical-align: top;
  text-align: left;
}
.profile-content .half-big-text {
  letter-spacing: 2px;
  margin-bottom: 5px;
}
.profile-content .small-header {
  display: inline-block;
  padding: 2px 10px;
  margin-bottom: 45px;
  letter-spacing: 4px;
  border: 1px solid;
  font-size: 14px;
  font-family: "Roboto";
}
.profile-content p {
  width: 80%;
  margin: 0 0 80px;
}
.clients-section {
  background-color: #000;
  color: #fff;
  height: 360px;
}
.client-part {
  height: 100%;
  width: 20%;
  background-size: 80% !important;
}
.client-part:nth-child(1) {
  width: 40%;
}
.client-part:nth-child(2) {
  background: url("https://s-media-cache-ak0.pinimg.com/564x/4b/6d/0a/4b6d0a36f786104a37d7801c50bc92b6.jpg") no-repeat center;
}
.client-part:nth-child(3) {
  background: url("https://pbs.twimg.com/media/CaZrLNFUMAAhCOf.jpg") no-repeat center;
}
.client-part:nth-child(4) {
  background: url("http://static1.squarespace.com/static/50899d9ce4b0852b71ea8642/t/56280caae4b00bbdefaf5ab8/1445465261275/Fake+Clothing+Logo") no-repeat center;
}
.client-part .half-big-text {
  margin-bottom: 0;
}
.service-row {
  height: 400px;
  max-width: 1300px;
  margin: auto;
}
.service-row-half {
  height: 100%;
  width: 50%;
}
.service-row-half .orbitron {
  font-size: 14px;
  margin-bottom: 25px;
}
.service-row-half.grey-back {
  background: url("https://dnbfeed.no/wp-content/uploads/2015/08/city-sunny-buildings-skyscrapers-e1440501856970-624x284.jpg") no-repeat center;
  background-size: cover;
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
}
.service-row-half.black-back {
  background-color: #000;
  color: #fff;
}
.service-row-half.black-back .abs-cent-text {
  height: 150px;
  width: 150px;
  font-size: 100px;
  line-height: 150px;
  font-family: "Montserrat";
}
.service-row-half.black-back .abs-cent-text.wordpress {
  background: url("http://www.contextureintl.com/wp-content/uploads/2015/01/wordpress-logo-notext-cmyk.png") no-repeat center;
  background-size: cover;
}
.service-row-half.black-back .abs-cent-text.star {
  background: url("http://www.stickerupper.com/images/detailed/star-2-sticker.gif") no-repeat center;
  background-size: cover;
}
.service-row-half.black-back .abs-cent-text.weird-one {
  width: 300px;
}
.our-plans-section {
  background-color: #f4f4f4;
  padding: 250px 0 120px;
}
.our-plans-section> p {
  position: relative;
  width: 65%;
  margin: 0 auto 120px;
}
.our-plans-section .orbitron {
  margin-bottom: 80px;
}
.plans-container max-width 1300px {
  margin: auto;
}
.plan {
  display: inline-block;
  position: relative;
  width: 25%;
  max-width: 335px;
  min-width: 270px;
  border: 10px solid;
  padding: 35px 0px;
  margin: 0px 15px 20px;
}
.plan .half-big-text {
  letter-spacing: 2px;
  margin-bottom: 30px;
}
.plan .orbitron {
  font-size: 16px;
  margin-bottom: 30px;
}
.plan p {
  margin-bottom: 30px;
}
.plan ul {
  position: relative;
  width: 90%;
  text-align: center;
  margin: 0 auto 10px;
}
.plan ul li {
  margin: 5px 0;
}
.testimonials-section {
  background-color: #000;
  color: #fff;
  height: 500px;
}
.test-left {
  height: 100%;
  width: 42%;
}
.test-left .abs-cent-text {
  width: 98%;
}
.test-right {
  height: 100%;
  width: 58%;
}
.test-right .space {
  margin-bottom: 60px;
  font-size: 16px;
  letter-spacing: 4px;
  line-height: 20px;
}
.test-right .small-header {
  color: #888;
  letter-spacing: 2px;
  margin-bottom: 6px;
}
.contact-section {
  padding: 220px 0 120px;
}
.contact-section> p {
  width: 90%;
  max-width: 900px;
  margin: 0 auto 120px;
}
.contact-form-container {
  max-width: 1300px;
  margin: auto;
}
.contact-half {
  display: inline-block;
  position: relative;
  width: 48%;
  vertical-align: top;
  margin: 0 0.5% 40px;
}
.contact-half .small-header {
  font-size: 14px;
  margin: 20px auto;
  letter-spacing: 2px;
}
.contact-half .submit-button {
  cursor: pointer;
}
.contact-left {
  text-align: left;
}
.contact-left .small-header {
  text-transform: none;
  letter-spacing: 1px;
}
.contact-left .social-button {
  margin: 10px -10px;
}
.contact-left .social-button:hover {
  -webkit-transform: scale(0.75);
          transform: scale(0.75);
}
.left-quad-container {
  margin: 20px auto;
}
.contact-quad {
  display: inline-block;
  width: 48%;
  box-sizing: border-box;
  vertical-align: top;
  padding: 15px;
  text-align: left;
}
.contact-input {
  width: 85%;
  margin: 8px auto;
  font-family: "Montserrat";
  font-size: 12px;
  line-height: 18px;
  padding: 10px;
  border: 5px solid;
  text-align: left;
}
.contact-input.big-input {
  height: 140px;
  border-top: transparent;
  border-right: transparent;
}
.contact-input:focus {
  outline: none;
}
.footer-section {
  padding: 75px 0;
  background: #000;
  color: #fff;
}
.footer-section .small-header {
  margin-bottom: 20px;
}
.footer-section .top-link {
  cursor: pointer;
}
.social-buttons-container {
  min-height: 100px;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 20px;
  text-align: center;
}
.social-button {
  display: inline-block;
  position: relative;
  -webkit-transform: scale(0.75);
          transform: scale(0.75);
  height: 75px;
  width: 75px;
  background-size: cover !important;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  margin: 14px 2px;
  cursor: pointer;
}
.social-button:hover {
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: 0.3s cubic-bezier(0.3, 0.2, 0, 2.5);
  transition: 0.3s cubic-bezier(0.3, 0.2, 0, 2.5);
}
.social-button.twitter-button {
  background: url("https://cdn4.iconfinder.com/data/icons/liu-square-blac/60/twitter-square-social-media-256.png") no-repeat center;
}
.social-button.facebook-button {
  background: url("https://cdn4.iconfinder.com/data/icons/liu-square-blac/60/facebook-square-social-media-256.png") no-repeat center;
}
.social-button.instagram-button {
  background: url("https://cdn4.iconfinder.com/data/icons/liu-square-blac/60/instagram-square-social-media-256.png") no-repeat center;
}
.social-button.behance-button {
  background: url("https://cdn4.iconfinder.com/data/icons/liu-square-blac/60/behance-square-social-media-256.png") no-repeat center;
}
@media screen and (max-width: 1300px) {
  .test-left .half-big-text {
    letter-spacing: 2px;
    padding: 15px 35px;
  }
}
@media screen and (max-width: 1100px) {
  .big-text {
    font-size: 45px;
    line-height: 50px;
    letter-spacing: 14px;
  }
  .nav-logo {
    left: 4%;
  }
  .nav-links-container {
    right: 4%;
  }
  .nav-link {
    padding: 0 6px;
  }
  .welcome-section {
    background-size: 800px 580px;
  }
  .plan {
    margin: 0px 8px 20px;
  }
}
@media screen and (max-width: 900px) {
  .nav-bar.scrolled .nav-links-container {
    top: 30px;
  }
  .nav-logo {
    left: 50px;
  }
  .nav-links-container {
    width: 140px;
    text-align: center;
    top: 40px;
    -webkit-transform: none;
            transform: none;
    right: 50px;
  }
  .nav-links-container:hover .nav-link {
    -webkit-transition: 0.4s ease;
    transition: 0.4s ease;
    height: 100%;
    opacity: 1;
  }
  .nav-link {
    display: block;
    height: 0;
    opacity: 0;
    -webkit-transition: 0s ease;
    transition: 0s ease;
  }
  .nav-link.active {
    height: 100%;
    opacity: 1;
  }
  .welcome-text {
    left: 50%;
    width: 80%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  .about-us-section {
    padding: 160px 0 40px;
  }
  .quarter-div {
    height: 50%;
    width: 50%;
  }
  .clients-section {
    height: 480px;
  }
  .client-part {
    height: 50%;
    width: 50%;
  }
  .client-part:nth-child(1) {
    width: 50%;
  }
  .service-row-half {
    height: 50%;
    width: 100%;
  }
  .testimonials-section {
    height: 600px;
  }
  .test-left {
    height: 30%;
    width: 100%;
  }
  .test-right {
    height: 70%;
    width: 100%;
  }
  .test-right .space {
    letter-spacing: 2px;
    font-size: 14px;
  }
  .contact-half {
    width: 100%;
    margin: 0;
    text-align: center;
  }
}
@media screen and (max-width: 700px) {
  .quad-half,
  .bottom-left-side,
  .bottom-right-side {
    padding: 0 0 30px;
    width: 100%;
  }
  .collage-column {
    height: 33.333333%;
    width: 100%;
  }
  .collage-column:nth-child(1) .collage-image.third {
    height: 33.333333%;
  }
  .collage-image.third,
  .collage-image.two-thirds {
    height: 50%;
  }
  .profile-image,
  .profile-content {
    width: 100%;
    text-align: center;
  }
  .profile-image p,
  .profile-content p {
    margin: 0 auto 60px;
  }
  .client-part {
    height: 25%;
    width: 100%;
  }
  .client-part:nth-child(1) {
    width: 100%;
  }
  .client-part:nth-child(2) {
    background-size: 140px 100% !important;
  }
  .client-part:nth-child(3) {
    background-size: 150px 100% !important;
  }
  .client-part:nth-child(4) {
    background-size: 260px 100% !important;
  }
}
@media screen and (max-width: 500px) {
  .big-text {
    font-size: 36px;
    line-height: 46px;
    letter-spacing: 6px;
    margin-bottom: 22px;
  }
  .orbitron {
    margin-bottom: 22px;
  }
  .about-us-section {
    padding: 80px 0 0;
  }
  .portfolio-bottom {
    height: 450px;
  }
  .quarter-div {
    height: 25%;
    width: 100%;
  }
  .quarter-div .big-text {
    margin-bottom: 10px;
  }
  .service-row {
    height: 500px;
  }
}
JS
// Pinspiration
// https://www.pinterest.com/pin/271201208788842829/

$(document).ready(function(){
    
    // Page scrolling function for the nav-links
    $(".nav-link").click(function(){
        $('html,body').animate({ scrollTop: $(this.hash).offset().top-80 }, 1400);
        return false;
    });
    
    // Back to Top Link
    $(".top-link").click(function(){
        $('html,body').animate({ scrollTop: $("#topSection").offset().top }, 2000);
        return false;
    });
    
    // Function to change the nav-bar on scroll
    $(window).scroll(function(){
        ($(window).scrollTop() >= 110) ? (
            $('.nav-bar').addClass('scrolled')
        ) : (
            $('.nav-bar').removeClass('scrolled')
        );
    });
    
    // Setting the active nav-link based on the scroll position
    // There is a better way to do this but this way works so I'll fix it later
    $(window).scroll(function(){
        if ($(window).scrollTop() >= $('#contactSection').offset().top - $(window).height()/2 ) {
            $('.nav-link').removeClass('active');
            $('#contactLink').addClass('active');
        } else if ($(window).scrollTop() >= $('#priceSection').offset().top - $(window).height()/2 ) {
            $('.nav-link').removeClass('active');
            $('#priceLink').addClass('active');
        } else if ($(window).scrollTop() >= $('#servicesSection').offset().top - $(window).height()/2 ) {
            $('.nav-link').removeClass('active');
            $('#servicesLink').addClass('active');
        } else if ($(window).scrollTop() >= $('#teamSection').offset().top - $(window).height()/2 ) {
            $('.nav-link').removeClass('active');
            $('#teamLink').addClass('active');
        } else if ($(window).scrollTop() >= $('#portfolioSection').offset().top - $(window).height()/2 ) {
            $('.nav-link').removeClass('active');
            $('#portfolioLink').addClass('active');
        } else if ($(window).scrollTop() >= $('#aboutSection').offset().top - $(window).height()/2 ) {
            $('.nav-link').removeClass('active');
            $('#aboutLink').addClass('active');
        } else if ($(window).scrollTop() >= $('#topSection').offset().top - $(window).height()/2 ) {
            $('.nav-link').removeClass('active');
            $('#topLink').addClass('active');
        }
    });
    
});
Host Instantly Drag and Drop Website Builder

 

Wed, 11/29/2017 - 11:18

Related Codes

Pen ID
Pen ID
Pen ID