Alek

HTML

              
                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alek</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    
<div class="nav-bar">
    <div class="nav-logo">ALEK</div>
    <div class="nav-links-container">
        <a class="nav-link active" href="#topSection" id="topLink">Home</a>
        <a class="nav-link" href="#aboutSection" id="aboutLink">About Us</a>
        <a class="nav-link" href="#portfolioSection" id="portfolioLink">Portfolio</a>
        <a class="nav-link" href="#teamSection" id="teamLink">Team</a>
        <a class="nav-link" href="#servicesSection" id="servicesLink">Services</a>
        <a class="nav-link" href="#priceSection" id="priceLink">Price</a>
        <a class="nav-link" href="#contactSection" id="contactLink">Contact</a>
        <a class="nav-link">Blog</a>
    </div>
</div>
<div class="rela-block top-section grad-back" id="topSection">
    <div class="abs-cent-text top-text">
        <h1 class="big-text">Minimal & Bold</h1>
        <div class="orbitron top-orb">\\\///</div>
        <p class="top-small-text">Scroll down to see how an expert design & development team<br> can deliver your custom website so fast at affordable prices</p>
    </div>
</div>
<div class="rela-block under-top-section">
    <div class="half-big-text under-top-big-text">Alek</div>
    <div class="lines-thing"></div>
    <p class="under-top-small-text">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary.</p>
</div>
<div class="rela-block welcome-section">
    <div class="abs-cent-text welcome-text">
        <h1 class="big-text">Welcome</h1>
        <div class="orbitron black-orb">\\\///</div>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi.</p>
        <div class="has-lines black">Explore</div>
    </div>
</div>
<div class="rela-block about-us-section" id="aboutSection">
    <h1 class="half-big-text has-border">About Us</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque.</p>
    <div class="orbitron black-orb">\\\///</div>
    <div class="rela-block about-us-quad-container">
        <div class="rela-block quad-row">
            <div class="quad-half floated left">
                <h2 class="small-header">Clean Code</h2>
                <p>Style never met and those among great. At no or september sportsmen he perfectly happiness.</p>
            </div>
            <div class="quad-half floated left">
                <h2 class="small-header">Retina Ready</h2>
                <p>Way necessary had intention happiness but september delighted his curiosity. Furniture remainder engrossed.</p>
            </div>
        </div>
        <div class="rela-block quad-row">
            <div class="quad-half floated left">
                <h2 class="small-header">Flexible</h2>
                <p>She exposed painted fifteen are noisier mistake led waiting. Surprise not wandered speedily husbands.</p>
            </div>
            <div class="quad-half floated left">
                <h2 class="small-header">Trending Design</h2>
                <p>You delighted two rapturous six depending objection happiness something the off nay.</p>
            </div>
        </div>
    </div>
    <div class="orbitron black-orb">\\\///</div>
    <div class="rela-block about-us-bottom-container">
        <div class="floated left bottom-left-side">
            <h2 class="small-header">Retina Ready</h2>
            <div class="lines-thing black"></div>
            <p>Up branch to easily missed by do. Admiration considered acceptance too led one melancholy expression. Are will took form the nor true. Winding enjoyed minuter her letters evident use eat colonel. He attacks observe mr cottage inquiry am examine gravity. Are dear but near left was. Year kept on over so as this of. She steepest doubtful betrayed formerly him.</p>
        </div>
        <div class="floated left bottom-right-side">
            <p>Development</p>
            <div class="rela-block progress-bar one"></div>
            <p>Design</p>
            <div class="rela-block progress-bar two"></div>
            <p>Marketing</p>
            <div class="rela-block progress-bar three"></div>
            <p>Dedication</p>
            <div class="rela-block progress-bar"></div>
        </div>
    </div>    
</div>
<div class="rela-block portfolio-section" id="portfolioSection">
    <div class="rela-block portfolio-top grad-back">
        <h1 class="half-big-text has-border">Portfolio</h1>
</div>
<div class="rela-block portfolio-second">
    <div class="has-lines white">Show All</div>
    <div class="has-lines white">Design</div>
    <div class="has-lines white">Graphics</div>
    <div class="has-lines white">Motion</div>
    <div class="has-lines white">Video</div>
</div>
<div class="rela-block portfolio-collage">
    <div class="floated left collage-column">
        <div class="floated left collage-image third one"></div>
        <div class="floated left collage-image third two"></div>
        <div class="floated left collage-image third three"></div>
    </div>
    <div class="floated left collage-column">
        <div class="floated left collage-image third four"></div>
        <div class="floated left collage-image two-thirds five"></div>
    </div>
    <div class="floated left collage-column">
        <div class="floated left collage-image two-thirds six"></div>
        <div class="floated left collage-image third seven"></div>
    </div>
</div>
<div class="rela-block portfolio-bottom">
    <div class="floated left quarter-div">
        <div class="abs-cent-text">
            <h1 class="big-text">4719</h1>
            <p>Happy Clients</p>
        </div>
    </div>
    <div class="floated left quarter-div">
        <div class="abs-cent-text">
            <h1 class="big-text">229k+</h1>
            <p>Facebook Likes</p>
        </div>
    </div>
    <div class="floated left quarter-div">
        <div class="abs-cent-text">
            <h1 class="big-text">45</h1>
            <p>Awards</p>
        </div>
    </div>
    <div class="floated left quarter-div">
        <div class="abs-cent-text">
            <h1 class="big-text">9250</h1>
            <p>Retweets</p>
        </div>
    </div>
</div>
</div>
<div class="rela-block team-section" id="teamSection">
    <h1 class="half-big-text has-border">Team</h1>
    <p>Satisfied conveying an dependent contented he gentleman agreeable do be. Warrant private blushes removed an in equally totally if. </p>
    <div class="orbitron black-orb">\\\///</div>
    <div class="rela-block profile-view-container">
        <div class="arrow left"></div>
        <div class="arrow right"></div>
        <div class="profile-image"></div>
        <div class="profile-content">
            <h2 class="half-big-text">Make Peace</h2>
            <h3 class="small-header">Web Developer</h3>
            <p>Mr feeling do chiefly cordial in do. Water timed folly right aware if oh truth. Imprudence attachment him his for sympathize. Large above be to means. Dashwood do provided stronger is. But discretion frequently sir the she instrument unaffected admiration everything.</p>
            <div class="lines-thing black"></div>
        </div>
    </div>
</div>
<div class="rela-block clients-section">
    <div class="floated left client-part">
        <div class="abs-cent-text">
            <h2 class="half-big-text has-border">Clients</h2>
        </div>
    </div>
    <div class="floated left client-part"></div>
    <div class="floated left client-part"></div>
    <div class="floated left client-part"></div>
</div>
<div class="rela-block services-section" id="servicesSection">
    <div class="rela-block service-row">
        <div class="floated left service-row-half grey-back">
            <div class="abs-cent-text">
                <h2 class="half-big-text has-border">Services</h2>
            </div>
        </div>
        <div class="floated right service-row-half">
            <div class="abs-cent-text">
                <h2 class="small-header">Quality over Quantity</h2>
                <div class="orbitron black-orb">\\\///</div>
                <p>His followed carriage proposal entrance directly had elegance. Greater for cottage gay parties natural. </p>
            </div>
        </div>
    </div>
    <div class="rela-block service-row">
        <div class="floated right service-row-half black-back">
            <div class="abs-cent-text wordpress"></div>
        </div>
        <div class="floated left service-row-half">
            <div class="abs-cent-text">
                <h2 class="small-header">Wordpress</h2>
                <div class="orbitron black-orb">\\\///</div>
                <p>Remaining he furniture on he discourse suspected perpetual. Power dried her taken place day ought the.</p>
            </div>
        </div>
    </div>
    <div class="rela-block service-row">
        <div class="floated left service-row-half black-back">
            <div class="abs-cent-text weird-one">&lt/&gt</div>
        </div>
        <div class="floated right service-row-half">
            <div class="abs-cent-text">
                <h2 class="small-header">Pixel Perfect</h2>
                <div class="orbitron black-orb">\\\///</div>
                <p>Increasing impression interested expression he my at. Respect invited request charmed me warrant to. Expect no pretty as do though so genius afraid cousin.</p>
            </div>
        </div>
    </div>
    <div class="rela-block service-row">
        <div class="floated right service-row-half black-back">
            <div class="abs-cent-text star"></div>
        </div>
        <div class="floated left service-row-half">
            <div class="abs-cent-text">
                <h2 class="small-header">Minimal</h2>
                <div class="orbitron black-orb">\\\///</div>
                <p>Preference themselves me as thoroughly partiality considered on in estimating. Middletons acceptance discovered projecting so is so or. In or attachment inquietude remarkably comparison at an. </p>
            </div>
        </div>
    </div>
</div>
<div class="rela-block our-plans-section" id="priceSection">
    <h2 class="half-big-text has-border">Our Plans</h2>
    <p>Is surrounded prosperous stimulated am me discretion expression. But truth being state can she china widow. Occasional preference fat remarkably now projecting uncommonly dissimilar. </p>
    <div class="orbitron black-orb">\\\///</div>
    <div class="rela-block plans-container">
        <div class="plan">
            <h2 class="rela-block half-big-text">Basic</h2>
            <div class="orbitron black-orb">\\\///</div>
            <p class="rela-block"><span style="font-family:'Montserrat'; font-size:30px; line-height: 40px;">$40</span>/year</p>
            <div class="orbitron black-orb">\\\///</div>
            <ul class="rela-block">
                <p>Customer Support 24/7<br>
                   Lifetime Updates<br>
                   10GB Cloud Storage<br>
                   10 Email boxes<br>
                   -<br>
            </ul>
            <div class="has-lines black">Subscribe!</div>
        </div>
        <div class="plan">
            <h2 class="rela-block half-big-text">Standard</h2>
            <div class="orbitron black-orb">\\\///</div>
            <p class="rela-block"><span style="font-family:'Montserrat'; font-size:30px; line-height: 40px;">$60</span>/year</p>
            <div class="orbitron black-orb">\\\///</div>
            <ul class="rela-block">
                <p>Customer Support 24/7<br>
                   Lifetime Updates<br>
                   100GB Cloud Storage<br>
                   20 Email boxes<br>
                   -<br>
            </ul>
            <div class="has-lines black">Subscribe!</div>
        </div>
        <div class="plan">
            <h2 class="rela-block half-big-text">Full</h2>
            <div class="orbitron black-orb">\\\///</div>
            <p class="rela-block"><span style="font-family:'Montserrat'; font-size:30px; line-height: 40px;">$150</span>/year</p>
            <div class="orbitron black-orb">\\\///</div>
            <ul class="rela-block">
                <p>Customer Support 24/7<br>
                   Lifetime Updates<br>
                   10 TB Cloud Storage<br>
                   100 Email boxes<br>
                   Unlimited Traffic<br>
            </ul>
            <div class="has-lines black">Subscribe!</div>
        </div>
    </div>
</div>
<div class="rela-block testimonials-section">
    <div class="floated left test-left">
        <div class="abs-cent-text">
            <h2 class="half-big-text has-border">Testimonials</h2>
        </div>
    </div>
    <div class="floated left test-right">
        <div class="abs-cent-text">
            <p class="space">"Ten the hastened steepest feelings pleasant few surprise property. An brother he do colonel against minutes uncivil. Can how elinor warmly mrs basket marked. Led raising expense yet demesne weather musical. Me mr what park next busy ever. Elinor her his secure far twenty eat object. Late any far saw size want man. Which way you wrong add shall one. As guest right of he scale these. Horses nearer oh elinor of denote."</p>
            <h2 class="small-header">Sean Connery</h2>
            <p><em>Goldeneye Director & Founder</em></p>
        </div>
    </div>
</div>
<div class="rela-block contact-section" id="contactSection">
    <h2 class="half-big-text has-border">Contact</h2>
    <p>Procuring education on consulted assurance in do. Is sympathize he expression mr no travelling. Preference he he at travelling in resolution. So striking at of to welcomed resolved.</p>
    <div class="orbitron black-orb">\\\///</div>
    <div class="rela-block contact-form-container">
        <div class="contact-half contact-left">
            <h2 class="small-header">Don't hesitate to contact us.</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
            <div class="rela-block left-quad-container">
                <div class="contact-quad">62 Hampshire Circle<br>Denver<br>CO 80113</div>
                <div class="contact-quad">720-629-8439<br>303-593-1213</div>
                <div class="contact-quad">mail@nadinejackson.com<br>nadinejckson.com</div>
                <div class="contact-quad">M-F: 9 AM - 2 PM<br>Sa: 9AM - 12PM<br>Su: Closed</div>
            </div>
            <div class="social-button facebook-button"></div>
            <div class="social-button twitter-button"></div>
            <div class="social-button instagram-button"></div>
        </div>
        <div class="contact-half contact-right">
            <input type="text" placeholder="ENTER YOUR NAME" class="contact-input" />
            <input type="text" placeholder="ENTER YOUR EMAIL" class="contact-input" />
            <input type="text" placeholder="PHONE NUMBER" class="contact-input" />
            <textarea cols="40" rows="5" placeholder="ENTER YOUR MESSAGE" class="contact-input big-input"></textarea>
            <h2 class="small-header submit-button">Submit</h2>
        </div>
    </div>
</div>
<div>
    <div class="map">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3067.8094879355644!2d-105.01975204914697!3d39.743930104104635!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x3e57c4f4bc03cb53!2zMznCsDQ0JzM4LjEiTiAxMDXCsDAxJzAzLjIiVw!5e0!3m2!1sen!2sus!4v1652053502329!5m2!1sen!2sus" width="1280" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

<div class="rela-block footer-section">
    <h2 class="small-header top-link">Back to Top</h2>
    <div class="rela-block social-buttons-container">
        <div class="social-button facebook-button"></div>
        <div class="social-button twitter-button"></div>
        <div class="social-button instagram-button"></div>
        <div class="social-button behance-button"></div>
    </div>
    <p>We combine beautiful typographical design, letterpress printing, commissioned artwork and the finest quality call-to-actions.<br> Become the hero. We've always believed in heroes. Now, it's time to become one.</p>
</div>


<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
<script src="script.js"></script>

</body>

</html>

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;
}
* {
  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;
  line-height: 30px;
}
.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%;
  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%;
  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%;
  transform: translateY(-50%);
  font-family: "Montserrat";
  font-size: 24px;
  letter-spacing: 0px;
  color: #fff;
  transition: 0.4s ease;
  cursor: pointer;
}
.nav-links-container {
  position: absolute;
  top: 50%;
  right: 6%;
  transform: translateY(-50%);
}
.nav-link {
  color: #999;
  font-size: 13px;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 500;
  padding: 0 12px;
  transition: 0.4s ease;
}
.nav-link.active,
.nav-link:hover {
  color: #fff;
}
.top-section {
  height: 100vh;
  background: url("https://images.unsplash.com/photo-1533090368676-1fd25485db88?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1469&q=80") no-repeat center;
  background-size: cover;
}
.grad-back::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  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("https://images.unsplash.com/photo-1535058314881-56b6eb96bd69?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80") no-repeat left top;
  background-size: 1100px 660px;
}
.welcome-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  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;
  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;
  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://images.unsplash.com/photo-1519248964876-9524a73205e8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1441&q=80") 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("https://images.unsplash.com/photo-1509222796416-4a1fef025e92?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1291&q=80") no-repeat center;
}
.collage-image.two {
  background: url("https://images.unsplash.com/photo-1557180295-76eee20ae8aa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1160&q=80") no-repeat center;
}
.collage-image.three {
  background: url("https://images.unsplash.com/photo-1517260739337-6799d239ce83?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80") no-repeat center;
}
.collage-image.four {
  background: url("https://images.unsplash.com/photo-1489269637500-aa0e75768394?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1441&q=80") no-repeat left top;
}
.collage-image.five {
  background: url("https://images.unsplash.com/reserve/LJIZlzHgQ7WPSh5KVTCB_Typewriter.jpg?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=696&q=80") no-repeat center;
}
.collage-image.six {
  background: url("https://images.unsplash.com/photo-1503058902370-dbb24d772e41?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1160&q=80") no-repeat center;
}
.collage-image.seven {
  background: url("https://images.unsplash.com/photo-1570169043013-de63774bbf97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80") 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("https://images.unsplash.com/photo-1521577352947-9bb58764b69a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=686&q=80") no-repeat center;
  background-size: 375px 576px;
}
.profile-view-container .arrow {
  position: absolute;
  z-index: 20;
  top: 50%;
  transform: translateY(-50%);
  height: 50px;
  width: 50px;
  background: url("https://cdn-icons-png.flaticon.com/512/566/566012.png?w=360") no-repeat center;
  background-size: cover;
  cursor: pointer;
}
.profile-view-container .arrow.left {
  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://s22.q4cdn.com/540910603/files/design/Spotify_Logo_White.png") no-repeat center;
}
.client-part:nth-child(3) {
  background: url("https://biocomplexity.virginia.edu/sites/default/files/2020-07/NASA.png") no-repeat center;
}
.client-part:nth-child(4) {
  background: url("https://vinspy.eu/wp-content/uploads/2021/02/Tesla-VIN-Decoder.png") 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://images.unsplash.com/photo-1528830160484-e25a01d55f4d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80") no-repeat center;
  background-size: cover;
  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("https://s.w.org/style/images/about/WordPress-logotype-wmark-white.png") no-repeat center;
  background-size: cover;
}
.service-row-half.black-back .abs-cent-text.star {
  background: url("https://www.freeiconspng.com/thumbs/white-star-icon/white-star-icon-14.png") 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 {
  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;
  transform: scale(0.75);
  height: 75px;
  width: 75px;
  background-size: cover !important;
  transition: 0.3s ease;
  margin: 14px 2px;
  cursor: pointer;
}
.social-button:hover {
  transform: scale(1);
  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;
}
.map {
  overflow:hidden;
  padding-bottom:56.25%;
  position:relative;
  height:0;
}
.map iframe{
  left:0;
  top:0;
  height:100%;
  width:100%;
  position:absolute;
}


@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;
    transform: none;
    right: 50px;
  }
  .nav-links-container:hover .nav-link {
    transition: 0.4s ease;
    height: 100%;
    opacity: 1;
  }
  .nav-link {
    display: block;
    height: 0;
    opacity: 0;
    transition: 0s ease;
  }
  .nav-link.active {
    height: 100%;
    opacity: 1;
  }
  .welcome-text {
    left: 50%;
    width: 80%;
    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

              
                // Inspiration from Pinterest Pin One-Page Site
// 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');
        }
    });
    
});

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions