Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML

              
                <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="icon" type="image/svg" href="https://raw.githubusercontent.com/mustafadalga/foundation-website/master/assets/img/logo.svg">
    <title>Foundation Web Site - Home</title>
</head>
<body>

<header>
    <div class="container">
        <nav class="nav-header">
            <a href="index.html" class="nav-header-logo">
                <div class="nav-header-img">
                    <img src="https://raw.githubusercontent.com/mustafadalga/foundation-website/master/assets/img/logo.svg" alt="">
                </div>
                <div class="nav-logo-text">
                    <h4>Foundation</h4>
                    <span>Startup landing template</span>
                </div>
            </a>
            <div class="nav-header-menu">
                <ul class="nav-header-items">
                    <li class="nav-header-item active">
                        <a href="index.html" class="nav-header-link">Home</a>
                    </li>
                    <li class="nav-header-item">
                        <a href="" class="nav-header-link">Stories</a>
                    </li>
                    <li class="nav-header-item nav-library-item">
                        <a href="#" class="nav-header-link">Library <img src="https://raw.githubusercontent.com/mustafadalga/foundation-website/master/assets/img/arrow-down.svg" alt=""></a>
                        <div class="dropdown-library">
                            <div class="dropdown-arrow-up"></div>
                            <div class="library-item">
                                <h4 class="library-title">Acquire Users</h4>
                                <p class="library-description">Work with the tools and services you use.</p>
                            </div>
                            <div class="library-item">
                                <h4 class="library-title">Engage Customers</h4>
                                <p class="library-description">Get started with our simple snippet of JavaScript.</p>
                            </div>
                            <div class="library-item">
                                <h4 class="library-title">Book Appointments</h4>
                                <p class="library-description">We offer measures like 2FA to ensure the safety.</p>
                            </div>
                            <div class="library-item">
                                <h4 class="library-title">Generate Leads</h4>
                                <p class="library-description">Become a better designer by learning this courses.</p>
                            </div>
                        </div>
                    </li>
                    <li class="nav-header-item">
                        <a href="contact.html" class="nav-header-link">Contact</a>
                    </li>
                </ul>
                <a href="pricing.html" class="btn btn-get-started">Get Started</a>
            </div>
        </nav>
        <div class="hamburger-wrap">
            <div class="hamburger-icon">
                <div class="line"></div>
                <div class="line"></div>
                <div class="line"></div>
            </div>
        </div>
    </div>
</header>

<section class="hero pt-15">
    <div class="container">
        <div class="section-content">
            <div class="hero-text">
                <h1 class="hero-title">Build stunning websites & apps.</h1>
                <p class="hero-desc">Create live segments and target the right people for messages based on their behaviors.</p>
                <div class="hero-btn">
                    <a href="pricing.html" class="btn btn-get-started">Get Started</a>
                    <a href="#" class="btn btn-learn-more">Learn More</a>
                </div>

            </div>
            <div class="hero-img">
                <img src="https://raw.githubusercontent.com/mustafadalga/foundation-website/master/assets/img/ouch.png" alt="">
            </div>
        </div>
    </div>
</section>

<section class="what-about">
    <div class="container">
        <div class="section-content">
            <div class="what-about-item">
                <h4>What is it about?</h4>
                <p>Building a website for a startup that looks amazing is not a rocket science anymore.</p>
            </div>
            <div class="what-about-item">
                <h4>Who is it for?</h4>
                <p>Startups, small companies and teams, entrepreneurs and web developers.</p>
            </div>
        </div>
    </div>
</section>


<section class="organizations">
    <div class="container">
        <div class="section-content">
               <div class="organization">
                   <img src="https://raw.githubusercontent.com/mustafadalga/foundation-website/master/assets/img/organizations/newyork-times.svg" alt="" class="organization-logo">
               </div>
               <div class="organization">
                   <img src="https://raw.githubusercontent.com/mustafadalga/foundation-website/master/assets/img/organizations/forbes.svg" alt="" class="organization-logo">
               </div>
               <div class="organization">
                   <img src="https://raw.githubusercontent.com/mustafadalga/foundation-website/master/assets/img/organizations/apple.svg" alt="" class="organization-logo">
               </div>
               <div class="organization">
                   <img src="https://raw.githubusercontent.com/mustafadalga/foundation-website/master/assets/img/organizations/mashable.svg" alt="" class="organization-logo">
               </div>
               <div class="organization">
                   <img src="https://raw.githubusercontent.com/mustafadalga/foundation-website/master/assets/img/organizations/wsj.svg" alt="" class="organization-logo">
               </div>
               <div class="organization">
                   <img src="https://raw.githubusercontent.com/mustafadalga/foundation-website/master/assets/img/organizations/google.svg" alt="" class="organization-logo">
               </div>
        </div>
    </div>
</section>


<section class="features">
    <div class="container">
        <div class="section-content">
            <div class="features-text">
                <img src="https://raw.githubusercontent.com/mustafadalga/foundation-website/master/assets/img/features-img.svg" alt="" class="features-text-img">
                <h4 class="section-head-title feature-head-title">Features</h4>
                <h2 class="section-title">Easily find leads and customers</h2>
                <p class="section-desc">Send one-off and automated email, push, and in-app messages to people. Create better stories.</p>

                <div class="feature-list">
                    <div class="feature-item">
                        <div class="feature-head">
                            <img src="https://raw.githubusercontent.com/mustafadalga/foundation-website/master/assets/img/features/compass.svg" alt="" class="feature-bg-img">
                            <h3>Acquire new customers</h3>
                        </div>
                        <div class="feature-body">
                            <p>
                                Everything you need to start building – including open-source code, documentation.
                            </p>
                            <div class="feature-sm-img">
                                <img src="https://raw.githubusercontent.com/mustafadalga/foundation-website/master/assets/img/features/feature-1.png" alt="">
                                <p>A better way to acquire new users</p>
                            </div>
                        </div>
                    </div>
                    <div class="feature-item">
                        <div class="feature-head">
                            <img src="https://raw.githubusercontent.com/mustafadalga/foundation-website/master/assets/img/features/home.svg" alt="" class="feature-bg-img">
                            <h3>Engage users</h3>
                        </div>
                        <div class="feature-body">
                            <p>
                                Everything you need to start building – including open-source code, documentation.
                            </p>
                            <div class="feature-sm-img">
                                <img src="https://raw.githubusercontent.com/mustafadalga/foundation-website/master/assets/img/features/feature-2.png" alt="">
                                <p>Knowledge base and smart self-service</p>
                            </div>
                        </div>
                    </div>
                    <div class="feature-item">
                        <div class="feature-head">
                            <img src="https://raw.githubusercontent.com/mustafadalga/foundation-website/master/assets/img/features/server.svg" alt="" class="feature-bg-img">
                            <h3>Develop across platforms</h3>
                        </div>
                        <div class="feature-body">
                            <p>
                                A beautifully simple system for tracking, prioritizing, and solving customer support tickets.
                            </p>
                            <div class="feature-sm-img">
                                <img src="https://raw.githubusercontent.com/mustafadalga/foundation-website/master/assets/img/features/feature-3.png" alt="">
                                <p>Live chat and messaging</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="features-img">
                <img src="https://raw.githubusercontent.com/mustafadalga/foundation-website/master/assets/img/invision-screen.png" alt="">
            </div>
        </div>
    </div>
</section>


<section class="team-inbox">
    <div class="container">
        <div class="section-content">
            <div class="team-img">
                <img src="https://raw.githubusercontent.com/mustafadalga/foundation-website/master/assets/img/team-inbox.png" alt="">
                <p>Connect with customers and grow faster</p>
            </div>
            <div class="team-text">
                <h4 class="section-head-title team-head-title">Team Inbox</h4>
                <h2 class="section-title">Manage conversations</h2>
                <p class="section-desc">One place to manage and respond to all conversations with leads and users. Receive messages from leads.</p>
                <div class="team-card">
                    <div class="team-card-head">
                        “Great widgets. Great selection. Great design and <strong>easy to implement</strong>. Definitely a huge time saver for a web developer!”
                    </div>
                    <div class="team-card-body">
                        <div class="team-card-img">
                            <img src="https://raw.githubusercontent.com/mustafadalga/foundation-website/master/assets/img/profile-image.png" alt="">
                        </div>
                        <div class="team-card-text">
                            <h5>Viella Malkovich</h5>
                            <span>Creative Director at Johnson</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="communicate">
    <div class="container">
        <div class="section-content flex-column">
            <div class="communicate-body">
                <div class="communicate-body-item">
                    <h4 class="section-head-title communicate-head-title">Communicate Better</h4>
                    <h2 class="section-title">Built for busy small teams</h2>
                    <p class="section-desc">Three products that can be used independently or combined together for your company’s needs.</p>
                    <a href="pricing.html" class="btn btn-get-started">Get Started</a>
                </div>
                <div class="communicate-body-item communicate-img">
                    <img src="https://raw.githubusercontent.com/mustafadalga/foundation-website/master/assets/img/communicate.png" alt="">
                    <p>A better way to acquire new users</p>
                </div>
            </div>
            <div class="communicate-footer">
                <div class="communicate-footer-item">
                    <p><span>Subscriptions.</span> Foundation works with the tools and services you already use every day.</p>
                    <a href="#">Learn more about subscriptions</a>
                </div>
                <div class="communicate-footer-item">
                    <p><span>Felxible Hours.</span>Get started with our simple snippet of JavaScript or easy to install SDKs for iOS and Android.</p>
                    <a href="#">Get more info about hours</a>
                </div>
                <div class="communicate-footer-item">
                    <p><span>Fast Communication.</span> We offer measures like 2FA and SSO to ensure the safety of your data.</p>
                    <a href="#">Communication guidelines</a>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="visitors">
    <div class="container">
        <div class="section-content flex-column">
            <div class="visitors-header">
                <h4 class="section-head-title">Engage Visitors</h4>
                <h2 class="section-title">Understand your audience</h2>
                <p class="section-desc">Early stage company? Eligible applicants get all of our products for just $49 a month.</p>
                <div class="visitors-btn">
                    <a href="pricing.html" class="btn btn-get-started">Get Started</a>
                    <a href="#" class="btn btn-learn-more">Learn More</a>
                </div>
            </div>

            <div class="visitors-body">
                <div class="visitor-item">
                    <img src="https://raw.githubusercontent.com/mustafadalga/foundation-website/master/assets/img/developers.png" alt="" class="visitor-img">
                    <h5 class="visitor-img-title">Developers</h5>
                </div>
                <div class="visitor-item active">
                    <img src="https://raw.githubusercontent.com/mustafadalga/foundation-website/master/assets/img/entertainment.png" alt="" class="visitor-img">
                    <h5 class="visitor-img-title">Entertainment</h5>
                </div>
                <div class="visitor-item">
                    <img src="https://raw.githubusercontent.com/mustafadalga/foundation-website/master/assets/img/athletes.png" alt="" class="visitor-img">
                    <h5 class="visitor-img-title">Athletes</h5>
                </div>
                <div class="visitor-item">
                    <img src="https://raw.githubusercontent.com/mustafadalga/foundation-website/master/assets/img/creators.png" alt="" class="visitor-img">
                    <h5 class="visitor-img-title">Creators</h5>
                </div>

            </div>
        </div>
    </div>
</section>


<section class="organizations">
    <div class="container">
        <div class="section-content">
            <div class="organization">
                <img src="https://raw.githubusercontent.com/mustafadalga/foundation-website/master/assets/img/organizations/newyork-times.svg" alt="" class="organization-logo">
            </div>
            <div class="organization">
                <img src="https://raw.githubusercontent.com/mustafadalga/foundation-website/master/assets/img/organizations/forbes.svg" alt="" class="organization-logo">
            </div>
            <div class="organization">
                <img src="https://raw.githubusercontent.com/mustafadalga/foundation-website/master/assets/img/organizations/apple.svg" alt="" class="organization-logo">
            </div>
            <div class="organization">
                <img src="https://raw.githubusercontent.com/mustafadalga/foundation-website/master/assets/img/organizations/mashable.svg" alt="" class="organization-logo">
            </div>
            <div class="organization">
                <img src="https://raw.githubusercontent.com/mustafadalga/foundation-website/master/assets/img/organizations/wsj.svg" alt="" class="organization-logo">
            </div>
            <div class="organization">
                <img src="https://raw.githubusercontent.com/mustafadalga/foundation-website/master/assets/img/organizations/google.svg" alt="" class="organization-logo">
            </div>
        </div>
    </div>
</section>

<section class="testimonials">
    <div class="container">
        <div class="section-content flex-column">
            <h4 class="section-head-title testimonial-head-title">Trusted by the world’s most innovative businesses – big and small</h4>
            <div class="testimonial-list">
                <div class="testimonial">
                    <p class="testimonial-desc">“Comprehensive set of startup tools for all imaginable entrepreneurial needs. Create landing pages, send emails, find freelancers. Perfect for sales, marketing, and support”</p>
                    <h5 class="testimonial-author">Viella Malkovich</h5>
                    <span class="author-title">Creative Director at Johnson</span>
                </div>
                <div class="testimonial">
                    <p class="testimonial-desc">“Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores at deleniti, dicta doloremque dolorum excepturi fuga impedit labore molestiae odit perferendis quasi quis quo temporibus.”</p>
                    <h5 class="testimonial-author">Josiah Hart</h5>
                    <span class="author-title">CTO at Johnson</span>
                </div>
                <div class="testimonial">
                    <p class="testimonial-desc">“Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores commodi eligendi facilis illum impedit nemo qui quis saepe similique? A beatae nulla numquam quasi quo.”</p>
                    <h5 class="testimonial-author">Shanna Jensen</h5>
                    <span class="author-title">Software Engineer at Johnson</span>
                </div>
            </div>
            <div class="testimonial-dots">
                <div class="testimonial-dot active"></div>
                <div class="testimonial-dot"></div>
                <div class="testimonial-dot"></div>
            </div>
            <img src="https://raw.githubusercontent.com/mustafadalga/foundation-website/master/assets/img/testimonial.png" alt="" class="testimonial-img">
        </div>
    </div>
</section>

<section class="hire">
    <div class="container">
        <div class="section-content flex-column">
            <div class="hire-head">
                <h2 class="section-title">We’re hiring</h2>
                <p class="section-desc">We’re a team of lifelong learners. We’re equal parts left and right brained.</p>
                <a href="#" class="btn btn-hire">More about Company</a>
            </div>

            <div class="jobs-list">
                <a href="#" class="job-item active">
                    <h4 class="job-title">Front-End Developer</h4>
                    <span class="job-location">Los Angeles / Remote </span>
                    <span class="job-arrow">></span>
                </a>
                <a href="#" class="job-item">
                    <h4 class="job-title">Community Manager</h4>
                    <span class="job-location">New York / Full-Time </span>
                    <span class="job-arrow">></span>
                </a>
                <a href="#" class="job-item">
                    <h4 class="job-title">UX/UI Designer</h4>
                    <span class="job-location">Utah / Full-Time</span>
                    <span class="job-arrow">></span>
                </a>
            </div>

        </div>
    </div>
</section>

<section class="free-trial">
    <div class="container">
        <div class="section-content">
            <div class="free-trial-img">
                <img src="https://raw.githubusercontent.com/mustafadalga/foundation-website/master/assets/img/free-trial.png" alt="">
            </div>
            <div class="free-trial-text">
                <h2 class="section-title">Start your free trial.</h2>
                <p class="section-desc">Get notified about company updates, news and blog posts. We hate spam.</p>
                <div class="free-trial-form">
                    <input type="email" name="" id="" placeholder="Enter your email">
                    <button type="submit" class="btn btn-get-started">Get Started</button>
                </div>
                <p class="free-trial-desc">Free 14-day trial · Easy setup · Cancel any time. <a href="#">Check out Terms of Use</a>.</p>
            </div>
        </div>
    </div>
</section>

<footer class="footer">
        <div class="footer-content">
            <div class="container">
                <div class="footer-top">
                    <div class="footer-info">
                        <a href="index.html" class="footer-logo">
                            <div class="footer-img">
                                <img src="https://raw.githubusercontent.com/mustafadalga/foundation-website/master/assets/img/logo.svg" alt="">
                            </div>
                            <div class="footer-logo-text">
                                <h4>Foundation</h4>
                                <span>Startup landing template</span>
                            </div>
                        </a>
                        <p class="footer-desc">
                            Foundation is a website template for startups and small teams. It helps to build a website in no time.
                        </p>
                        <div class="mobile-app">
                            <img src="https://raw.githubusercontent.com/mustafadalga/foundation-website/master/assets/img/app-store.png" alt="" class="app-store">
                            <img src="https://raw.githubusercontent.com/mustafadalga/foundation-website/master/assets/img/google-play.png" alt="" class="google-play">
                        </div>
                    </div>
                    <div class="footer-menu">
                        <div class="footer-menu-item">
                            <h4 class="footer-menu-title">Product</h4>
                            <ul class="footer-menu-list">
                                <li class="footer-menu-item">
                                    <a href="#" class="footer-item-link">Acquire Users</a>
                                </li>
                                <li class="footer-menu-item">
                                    <a href="#" class="footer-item-link">Content Marketing</a>
                                </li>
                                <li class="footer-menu-item">
                                    <a href="#" class="footer-item-link">Website Templates</a>
                                </li>
                                <li class="footer-menu-item">
                                    <a href="#" class="footer-item-link">Customer Management</a>
                                </li>
                                <li class="footer-menu-item">
                                    <a href="#" class="footer-item-link">Virtual Inbox</a>
                                </li>
                            </ul>
                        </div>
                        <div class="footer-menu-item">
                            <h4 class="footer-menu-title">Company</h4>
                            <ul class="footer-menu-list">
                                <li class="footer-menu-item">
                                    <a href="#" class="footer-item-link">About Foundation</a>
                                </li>
                                <li class="footer-menu-item">
                                    <a href="#" class="footer-item-link">Brand Guidelines</a>
                                </li>
                                <li class="footer-menu-item">
                                    <a href="#" class="footer-item-link">Press Kit</a>
                                </li>
                                <li class="footer-menu-item">
                                    <a href="#" class="footer-item-link">Support</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <div class="container">
                    <div class="footer-rights">
                        <div class="footer-rights">
                            <a href="legal.html">Terms</a>
                            <a href="legal.html">Privacy</a>
                            <a href="legal.html">License</a>
                        </div>
                    </div>
                    <div class="social-media">
                        <a href="#" class="social-item">
                            <img src="https://raw.githubusercontent.com/mustafadalga/foundation-website/master/assets/img/social-media/twitter.png" alt="">
                        </a>
                        <a href="#" class="social-item">
                            <img src="https://raw.githubusercontent.com/mustafadalga/foundation-website/master/assets/img/social-media/fb.png" alt="">
                        </a>
                        <a href="#" class="social-item">
                            <img src="https://raw.githubusercontent.com/mustafadalga/foundation-website/master/assets/img/social-media/linkedin.png" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </div>
</footer>

</body>
</html>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap');
$white:#ffffff;
$black:#2B292D;
$spun-pearl:#aaa6ae;
$green-haze:#009B4D;
$governor-bay:#3040C4;
$governor-bay-2:#3142C6;
$mandys-pink:#F3C6BD;
$mandys-pink2:#efb9af;
$athens-gray:#F4F5F7;
$old-lace:#FCF0E3;
$flamingo:#F1592B;
$lochmara:#0185D0;
$pasific-blue:#00A1C6;
$scarpa-flow:#555159;
$cadet-blue:#9FA8BE;
$alizarin-crimson:#E22729;
$sunglow:#FFC52C;
$mencury:#E3E3E3;
$pale-slate:#D5D4D5;

@mixin bs-sm{
  -webkit-box-shadow: 1px 1px 4px 1px rgba(43,41,45,1);
  -moz-box-shadow: 1px 1px 4px 1px rgba(43,41,45,1);
  box-shadow: 1px 1px 4px 1px rgba(43,41,45,1);
}
@mixin bs-md{
  -webkit-box-shadow: 1px 1px 8px 0px rgba(43,41,45,1);
  -moz-box-shadow: 1px 1px 8px 0px rgba(43,41,45,1);
  box-shadow: 1px 1px 8px 0px rgba(43,41,45,1);
}
@mixin bs-sm-text{
  text-shadow: -1px 4px 2px rgba(43,41,45,0.6);
}
@mixin bs-tab-menu{
  -webkit-box-shadow: .5px -1px 4px 0px rgba(43,41,45,1);
  -moz-box-shadow: .5px -1px 4px 0px rgba(43,41,45,1);
  box-shadow: .5px -1px 4px 0px rgba(43,41,45,1);
}
@mixin bg-linear-gradient{
  background: linear-gradient(to bottom,rgba(0,0,0,.05) 0%,rgba(249,250,251,1) 100%);
}
@mixin communicate-bottom-line{
  padding-bottom: 10rem;
  &:after{
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    width: 15rem;
    height: 1px;
    background-color:rgba(0,0,0,.1);
  }
}


*,*:before,*:after{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html{
  font-size: 10px;
}
body{
  background-color: $white;
  color: $black;
}
img{
  width: 100%;
  max-width: 100%;
}
ul{
  list-style-type: none;
}
a{
  text-decoration: none;
  color: inherit;
}
h1{
  line-height: 8rem;
}
input,textarea{
  font-size: 1.8rem;
  padding: 1rem;
  border: 1px solid rgba(43,41,45,.2);
  &::placeholder{
    color: $cadet-blue;
  }
  &:focus,&:active{
    outline-color: $governor-bay;
  }
}
textarea{
  resize: none;
}
.container{
  width: 100%;
  max-width: 120rem;
  margin: 0 auto;
  padding:0 1.5rem;
}
section{
  padding: 5rem 0;
}
.btn{
  font-size: 1.8rem;
  font-weight: bold;
  padding: 1.3rem 2rem;
  border-radius: 2px;
  transition:.3s ease-in-out;
  text-align: center;
  &:hover{
    @include bs-md
  }
}
.flex-column{
  flex-direction: column;
}
.section-content{
  display: flex;
}
.section-head-title{
  font-size: 2.2rem;
}
.section-title{
  font-size: 5.6rem;
  margin:2.5rem 0;
}
.section-desc{
  font-size: 2.4rem;
  font-weight: 400;
}
.bg-white{
  background-color: $white;
}
.pt-15{
  padding-top: 15rem;
}


/*HOME PAGE*/

/*Header */
header{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: transparent;
  .btn-get-started{
    margin-left: 1.5rem;
  }
}
.nav-header{
  font-family: 'Work Sans', sans-serif;
  height: 9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-header-logo,.footer-logo{
  display: flex;
  align-items: center;
  grid-gap: 1rem;
}
.nav-header-img,.footer-img{
  img{
    width: 6rem;
    height: 6rem;
    max-width: initial;
  }
}
.nav-logo-text,.footer-logo-text{
  h4{
    font-size: 2rem;
  }
  span{
    font-size: 1.8rem;
    font-weight: 400;
    color: $spun-pearl;
  }
}
.nav-header-menu{
  display: flex;
  align-items: center;
}
.nav-header-items{
  display: flex;
}
.nav-header-item{
  padding: 0 1.5rem;
  transition:all .5s;
  position: relative;
  &.active{
    .nav-header-link{
        font-weight: bold;
    }
  }
  &:hover{
    .dropdown-library{
      visibility: visible;
      opacity: 1;
    }
  }
}
.nav-header-link{
  font-size: 1.8rem;
  font-weight: 400;
  display: flex;
  align-items: center;
  transition: .2s ease-in-out;
  &:hover{
    color: $governor-bay;
  }
  img{
    margin-left: 1rem;
    font-family: initial;
    max-height: .8rem;
    width: initial;
  }
}
.dropdown-library{
  position: absolute;
  top: calc(100% + 2rem);
  right: 0  ;
  width: 60rem;
  background-color: $white;
  border-radius: .8rem;
  padding: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(50% - 2.5rem), 1fr));
  grid-gap: 2.5rem;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: 1;
  @include bs-sm
}
.dropdown-arrow-up{
    position: absolute;
    top: -3rem;
    right: 5%;
    width: 6rem;
    height: 3rem;
    overflow: hidden;
  &:before{
    position: absolute;
    content: '';
    width: 100%;
    height: inherit;
    background-color: $white;
    top: 100%;
    webkit-box-shadow: 1px 0px 8px 0px rgba(43,41,45,1);
    -moz-box-shadow: 1px 0px 8px 0px rgba(43,41,45,1);
    box-shadow: 1px 0px 4px 0px rgba(43,41,45,1);
    transform:rotate(45deg);
  }
}
.library-item{
  cursor: pointer;
  &:hover{
    .library-title{
      color: $green-haze;
    }
  }
}
.library-title{
  transition: color .3s;
  font-size: 2.2rem;
}
.library-description{
  font-size: 1.8rem;
  font-weight: 400;
  margin-top: .5rem;
}
.btn-get-started{
  background-color: $governor-bay;
  color: $white;
  border: none;
}
.hamburger-wrap{
  display: none;
  align-items: center;
  justify-content: center;
  width: 6.4rem;
  height:6.4rem;
  border-left: 1px solid rgba(0,0,0,.15);
}
.hamburger-icon{
  width: 2rem;
  height: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  cursor: pointer;
}
.line{
  background-color: $cadet-blue;
  height: 3px;
  width: 100%;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
/*End Header */


/*Hero */
.hero{
  background-color: $mandys-pink;
  min-height: 100vh;
}
.hero-text{
  display: flex;
  flex-direction: column;
  flex-basis: 35%;
  position: relative;
}
.hero-title{
  width: 150%;
  font-weight: bold;
  font-size: 8rem;
}
.hero-desc{
  margin:3rem 0 6rem;
  font-size: 2.4rem;
  font-weight: 400;
}
.hero-btn{
  display: flex;
  grid-gap: 2rem;
}
.btn-learn-more{
  background-color: $white;
  color: $governor-bay;
}
.hero-img{
  flex-basis: 65%;
  display: flex;
  align-items: center;
  background-color: $mandys-pink2;
}
/*End Hero */


/*What About */
.what-about{
  background-color: $athens-gray;
}
.what-about-item{
  max-width: 50rem;
  margin: auto;
  padding: 0 1.5rem;
  h4{
    font-size: 2.2rem;
  }
  p{
    margin-top: .5rem;
    font-size: 2.2rem;
    font-weight: 400;
  }
}
/*End What About */


/*Organizations*/
.organizations{
  .section-content{
      align-items: center;
      justify-content: space-around;
   }
}
/*End Organizations*/

/*Features*/
.features{
  position: relative;
  .section-content{
    align-items: center;
  }
}
.features-text{
  flex-basis: 40%;
  padding-left: 5rem;
  display: flex;
  flex-direction: column;
}
.features-text-img{
  position: absolute;
  top: 50%;
  left:0;
  width: 16rem;
  height: 16rem;
  transform: translate(-30%,-50%);
}
.feature-head-title{
  color: $green-haze;
}
.feature-list{
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  grid-gap: 2.5rem;
}
.feature-item{
  border-bottom: 1px solid $athens-gray;
  padding-bottom: 2.5rem;
  cursor: pointer;

  &.active{
    border-color: $governor-bay-2;
    border-width: 3px;
    .feature-head{
      h3{
        color: $governor-bay-2;
      }
    }
    .feature-body{
      height: initial;
      opacity: 1;
      visibility: visible;
      margin-top:1.5rem;
    }
  }
}
.feature-head{
  display: flex;
  align-items: center;
  h3{
    font-size: 2.2rem;
    margin-left: 1rem;
  }
}
.feature-bg-img{
  max-width: 2.4rem;
}
.feature-sm-img{
  display: none;
}
.feature-body{
  font-size: 1.8rem;
  height: 0;
  opacity: 0;
  visibility: hidden;
  transition: visibility 0s,height 0.5s linear, opacity 0.5s linear;
}
.features-img{
  flex-basis: 55%;
  margin-left: 5%;
}
/*End Features*/

/*Team Inbox*/
.team-inbox{
  background-color: $old-lace;
  .section-content{
    align-items: center;
  }
}
.team-img{
  flex-basis: 50%;
  padding-right: 2.5rem;
  & > *{
    max-width: 40rem;
  }
  p{
    margin-top: 2rem;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 400;
  }
}
.team-text{
  display: flex;
  flex-direction: column;
  flex-basis: 50%;
  & > *{
    max-width: 45rem;
  }
}
.team-head-title{
  color: $flamingo;
}
.team-card{
  margin-top: 5rem;
  background-color: $white;
  padding: 2rem;
  border-bottom: 4px solid $lochmara;
}
.team-card-head{
  font-size: 2rem;
}
.team-card-body{
  margin-top: 3rem;
  display: flex;
  align-items: center;
  img{
    max-width: 4rem;
  }
}
.team-card-text{
  margin-left: 1rem;
  h5{
    font-size: 1.6rem;
  }
  span{
    font-size: 1.6rem;
    color: $spun-pearl;
    font-weight: 400;
  }
}
/*End Team Inbox*/


/*Communicate*/
.communicate-body{
  display: flex;
  align-items: center;
}
.communicate-head-title{
  color: $lochmara;
}
.communicate-body-item{
  display: flex;
  flex-direction: column;
  flex-basis: 50%;
  position: relative;

  &:first-child{
    @include communicate-bottom-line;
  }
  & > *{
    max-width: 40rem;
  }
  .btn-get-started{
    max-width: 16rem;
    margin-top: 2.5rem;
  }
}
.communicate-img{
  p{
    text-align: center;
    margin-top: 2rem;
    font-size: 1.4rem;
    font-weight: 400;
  }
}
.communicate-footer{
  display: flex;
  grid-gap:5rem 2.5rem;
  margin-top: 5rem;
}
.communicate-footer-item{
  flex-basis: 33.3%;
  padding-right: 5rem;
  p{
    font-size: 1.8rem;
    span{
      font-weight: bold;
    }
  }
  a{
    display: block;
    margin-top: 1rem;
    color: $governor-bay;
    text-decoration: underline;
    font-weight: bold;
    font-size: 1.8rem;
  }
}
/* End Communicate*/


/*Visitors*/
.visitors{
  background-color: rgba( 0, 161, 198,.07);
  .section-content{
    text-align: center;
  }
}
.visitors-header{
  max-width:45rem;
  margin: auto;
}
.visitors-btn{
  margin-top: 3rem;
  display: flex;
  justify-content: center;
  grid-gap: 2rem;
  .btn-learn-more{
    color: $black;
  }
}
.visitors-body{
  margin-top:8rem;
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(25rem,1fr));
  grid-gap: 2.5rem;
}
.visitor-item{
  background-color: $white;
  padding: 2rem;
  &.active{
    background-color: $governor-bay;
    .visitor-img-title{
        color: $white;
    }
  }
}
.visitor-img{
  width: auto;
  max-height: 19.5rem;
}
.visitor-img-title{
  font-size: 2.2rem;
  margin-top: 1rem;
}
/*End Visitors*/


/*Testimonials*/
.testimonials{
  border-bottom: 1px solid rgba(0,0,0,.1);
  .container{
    position: relative;
  }
}
.testimonial-img{
  position: absolute;
  bottom:-5rem;
  right: 0;
  max-width: 27rem;
  z-index: -1;
}
.testimonial-head-title{
  color: $governor-bay-2;
  text-align: center;
}
.testimonial-list{
  display: flex;
  max-width:75rem;
  margin:2.5rem auto 0;
  overflow: hidden;
}
.testimonial{
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding:0 5rem;
  width: 100%;
  transition: 1s all;
}
.testimonial-desc{
  font-size: 2.4rem;
  font-weight: 400;
}
.testimonial-author{
  font-size: 1.6rem;
  font-weight: bold;
  margin: 2.5rem 0 .5rem;
}
.author-title{
  font-size: 1.6rem;
  color: $spun-pearl;
}
.testimonial-dots{
  margin:5rem auto;
  display: flex;
  grid-gap: 2.5rem;
}
.testimonial-dot{
  width: .8rem;
  height: .8rem;
  background-color:rgba(43, 41, 45,.2);
  border-radius: 50%;
  cursor: pointer;
  &.active{
    background-color: $governor-bay;
  }
  &:hover{
    @include bs-sm
  }
}
/*End Testimonials*/

/*Hire*/
.hire-head{
  max-width: 55rem;
  margin: auto;
  text-align: center;
}
.btn-hire{
  display: inline-block;
  margin-top: 2.5rem;
  background-color: $governor-bay;
  color: $white;
}
.jobs-list{
 width: 100%;
 max-width: 75rem;
 margin:8rem auto 2.5rem;
 display: flex;
 flex-direction: column;
 grid-gap: 2.5rem;
}
.job-item{
  display: flex;
  align-items: center;
  padding: 2rem;
  border-radius: .8rem;
  border: 1px solid rgba(0,0,0,.2);
  transition:.3s ease-in-out;
  cursor: pointer;
  &.active{
    background-color: $governor-bay;
    border: none;
    &>*{
      color: $white;
    }
  }
  &:hover{
    @include bs-sm
  }
}
.job-title{
  flex: 6 0 auto;
  font-size: 2.2rem;
  font-weight: bold;
}
.job-location{
  flex: 3 0 auto;
  font-size: 1.8rem;
  font-weight: 400;
  color: $cadet-blue;
}
.job-arrow{
  flex: 1 0 auto;
  color: $cadet-blue;
  font-size: 2rem;
  font-weight: bold;
  text-align: right;
}
/*End Hire*/


/*Free Trial*/
.free-trial{
  background-color: $athens-gray;
  .section-content{
    max-width: 100rem;
    margin: auto;
    align-items: center;
    justify-content: space-evenly;
    grid-gap: 2.5rem;
  }
  .section-title{
    font-size: 4rem;
    line-height: 4rem;
  }
  .section-desc{
    font-size: 2.2rem;
  }
}
.free-trial-text{
  max-width: 60rem;
}
.free-trial-form{
  margin: 2.5rem 0;
  display: flex;
  grid-gap: 2.5rem;
  input{
    border-radius: 2px;
    min-width: 35rem;
  }
  button{
    border: none;
  }
}
.free-trial-desc{
  font-size: 1.4rem;
  font-weight: 400;
  color: $spun-pearl;
  a{
    color: $governor-bay;
    border-bottom: 1px solid $governor-bay;
  }
}
/*End Free Trial*/

/*Footer*/
footer{
  padding-top: 5rem;
}
.footer-content{
  display: flex;
  flex-direction: column;
}
.footer-top{
  display: flex;
  grid-gap: 2.5rem;
}
.footer-info{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  grid-gap: 2.5rem;
}
.footer-desc{
  font-size: 1.8rem;
  color: $spun-pearl;
  max-width: 30rem;
}
.mobile-app{
  display: flex;
  flex-wrap: wrap;
  grid-gap: 2.5rem;
  img{
    max-width: 12rem;
  }
}
.footer-menu{
  flex: 2 1 auto;
  display: flex;
  flex-wrap: wrap;
}
.footer-menu-item{
  padding:.5rem 2rem .5rem 0;
}
.footer-menu-title{
  font-size: 2.2rem;
  padding:.5rem 2rem .5rem 0;
}
.footer-item-link{
  font-size: 1.8rem;
  color: $spun-pearl;
  font-weight: 400;
  transition:.1s ease-in-out;
  &:hover{
    color: $governor-bay;
  }
}
.footer-bottom{
  margin-top: 5rem;
  padding: 2rem 0;
  border-top: 1px solid $spun-pearl;
  .container{
    display: flex;
    justify-content: space-between;
  }
}
.footer-rights,.social-media{
  display: flex;
  grid-gap: 2.5rem;
  font-size: 1.4rem;
  font-weight: 400;
  color: $spun-pearl;
}
.footer-rights{
  a{
    transition:.1s ease-in-out;
  }
  a:hover{
    color: $governor-bay;
  }
}
/*End Footer*/

/*END HOME PAGE*/


@media screen and (max-width: 900px) {
  /*Home */
  .nav-logo-text{
    span{
      display: none;
    }
  }
  /*End Home Page*/
}

@media screen and (max-width: 750px) {
  /*Global */
  .section-title{
    font-size: 4rem;
  }
  /*End Global*/


  /* Home Page*/

  /* Header */
  .hamburger-wrap{
    display: flex;
  }
  header{
    background-color: $white;
    .container{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .btn-get-started{
      margin:1.5rem 0 0 0;
    }
    &.open{
      .nav-header-menu{
        transform: translateX(0);
      }
      .hamburger-icon{
        .line:nth-of-type(1) {
          -webkit-transform: rotateZ(45deg);
          transform: rotateZ(45deg) translate(0.6rem, 0.1rem);
        }
        .line:nth-of-type(2) {
          display: none;
        }
        .line:nth-of-type(3) {
          -webkit-transform: rotateZ(-45deg);
          transform: rotateZ(-45deg) translate(0.6rem, -0.1rem);
        }
      }
    }
  }
  .nav-header{
    height: 6.4rem;
  }
  .nav-header-img{
    img{
      width: 4.8rem;
      height: 4.8rem;
    }
  }
  .nav-header-menu{
    position: absolute;
    top: 0;
    left: 0;
    margin-top: 6.4rem;
    height: 100vh;
    background-color: $white;
    flex-direction: column;
    z-index: 1;
    padding:0 2.5rem;
    transform: translateX(-20rem);
    transition: transform 0.5s ease-in-out;
  }
  .nav-header-items{
    flex-direction: column;
  }
  .nav-header-item{
    padding:1.5rem 7.5rem 1.5rem 0;
    border-bottom: 1px solid rgba(0,0,0,.15);
    &.active{
      .dropdown-library{
        display: grid;
      }
      img{
        transform: rotate(0deg);
      }
    }
  }
  .nav-header-link{
    font-size: 1.6rem;
    img{
      -webkit-transition: -webkit-transform .3s ease-in-out;
      transition:         transform .3s ease-in-out;
      transform: rotate(-90deg);
    }
  }
  .dropdown-library{
    margin-top: 1.5rem;
    margin-left: 1.5rem;
    width: initial;
    opacity: initial;
    visibility: initial;
    background-color: transparent;
    box-shadow: initial;
    position: initial;
    padding: initial;
    grid-template-columns:1fr;
    grid-gap: 1.5rem;
    display: none;
  }
  .dropdown-arrow-up{
    display: none;
  }
  .library-item{
    .library-title{
      font-size: 1.6rem;
      font-weight: 400;
    }
    &:hover{
      .library-title{
        color: $governor-bay;
      }
    }
  }
  .library-description{
    display: none;
  }
  .btn{
    font-size: 1.6rem;
    padding: 1rem 2rem;
  }
  /* Header */

  /*Hero*/
  .hero{
    .section-content{
      flex-direction: column;
    }
  }
  .hero-text{
    flex-basis: initial;
  }
  .hero-title{
    text-align: center;
    font-size: 5rem;
    width: initial;
  }
  .hero-img{
    margin-top: 2.5rem;
    margin-left: -1.5rem;
    width: calc(100% + 3rem);
  }
  .hero-btn{
    justify-content: center;
  }
  /*End Hero*/

  /*What About */
  .what-about{
    .section-content{
      flex-direction: column;
      grid-gap: 5rem;
    }
  }
  /*End What About */

  /*Organizations*/
  .organizations{
    padding-top: 0;
    .section-content{
      flex-wrap: wrap;
      margin-left: -1.5rem;
      width: calc(100% + 3rem);
    }
  }
  .organization{
    flex-basis: 33%;
    height: 12rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid $mencury;
    &:not(:nth-of-type(1)):not(:nth-of-type(4)) {
      border-left: 1px solid $mencury;
    }
    img{
      width: initial;
    }
  }
  /*End Organizations*/


  /*Features*/
  .features-text-img,.features-img,.feature-bg-img{
    display: none;
  }
  .features-text{
    padding: 0;
  }

  .feature-sm-img{
    display: flex;
    flex-direction: column;
    align-items: center;
    grid-gap: 2.5rem;
    margin: 2.5rem auto 0;
    img{
      max-width: 25rem;
    }
    p{
      font-size: 1.4rem;
      font-weight: 400;
      color: $spun-pearl;
    }
  }
  .features{
    padding: 0;
    .section-content{
      flex-direction: column;
    }
  }
  .feature-head{
    h3{
      margin: 0;
    }
  }
  .feature-item{
    margin-left: -1.5rem;
    width: calc(100% + 3rem);
    padding: 0 1.5rem 2.5rem 1.5rem;
    &.active{
      border-color: $athens-gray;
      border-width: 1px;
      .feature-head{
        h3{
          margin: 0;
          color:$black ;
        }
      }
    }
    &:last-child{
      border: none;
    }
  }
  .feature-body{
    height: initial;
    opacity: 1;
    visibility: visible;
    margin-top:1.5rem;
  }
  /*End Features*/



  /*Team Inbox*/
  .team-inbox{
    .section-content{
      flex-direction: column;
      grid-gap:5rem ;
    }
  }
  .team-img{
    padding: 0;
    p{
      display: none;
    }
  }
  .team-text{
    display: flex;
    flex-direction: column;
    flex-basis: 50%;
    & > *{
      max-width: initial;
    }
  }
  /*End Team Inbox*/

  /*Communicate*/
  .communicate-body{
    flex-direction: column;
  }
  .communicate-body-item{
    & > *{
      max-width: initial;
    }
    &:first-child{
      &:after {
        display: none;
      }
    }
    &:last-child{
      @include communicate-bottom-line;
    }
  }
  .communicate-img{
    width: 100%;
    img{
      max-width: 30rem;
      margin: 0 auto;
    }
  }
  .communicate-footer{
    flex-direction: column;
  }
  /*End Communicate*/

  /*Visitors*/
  .visitors-body{
    margin-top: 4rem;
  }
  /*End Visitors*/

  /*Testimonials*/
  .testimonial-list{
    max-width: 100%;
  }
  .testimonial{
    padding: 0;
  }
  .testimonial-img{
    position: initial;
    max-width: 30rem;
    margin:0 auto;
  }
  .testimonial-dots{
    margin: 2.5rem auto 5rem;
  }

  /*End Testimonials*/


  /*Free Trial*/
  .free-trial{
    .section-content{
      flex-direction: column;
      align-items: initial;
    }
    .section-title{
      text-align: center;
    }
  }
  .free-trial-img{
    max-width: 40rem;
    margin: 0 auto;
  }
  .free-trial-text{
    max-width: initial;
  }
  .free-trial-form{
    flex-direction: column;
    input{
      min-width: initial;
    }
  }
  /*End Free Trial*/

  /*End Home Page*/


@media screen and (max-width: 500px){
  /* Home Page*/

  /*Hire*/
  .job-item{
    flex-direction: column;
    grid-gap: 1.5rem;
    position: relative;
    align-items: initial;
    &.active {
      background-color: transparent;
      border: 1px solid rgba(0,0,0,.2);
      & > * {
        color: initial;
      }
      .job-location,.job-arrow{
        color:$cadet-blue;
      }
    }
  }
  .job-arrow{
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    background-color: $pale-slate;
    color: $cadet-blue;
    font-weight: bold;
  }

  /*End Hire*/


  /*Footer*/
  .footer-top{
    flex-wrap: wrap;
  }
  .footer-info{
    align-items: center;
    flex-shrink: 0;
    margin-left: -1.5rem;
    width: calc(100% + 3rem);
    padding-bottom: 5rem;
    border-bottom: 1px solid $mencury;
  }
  .footer-desc{
    display: none;
  }
  .mobile-app{
    flex-wrap: nowrap;
  }
  .footer-menu{
    flex-direction: column;
  }
  .footer-bottom{
    border: none;
    margin:0;
    .container{
      flex-direction: column;
      grid-gap: 2.5rem ;
    }
  }
  /*End Footer*/


  /*End Home Page*/
}
@media screen and (max-width: 450px){
  /*Home Page*/
  .hero-btn{
    flex-direction: column;
  }

  /*Organizations*/
  .organization{
    img{
      width: initial;
      max-width: 7.5rem;
    }
  }
  /*End Organizations*/


  /*Visitors*/
  .visitors-btn{
    flex-direction: column;
  }
  /*End Visitors*/


  /*Hire*/
  .btn-hire{
    display: block;
  }
  /*End Hire*/

  /*End Home Page*/
}
}
              
            
!

JS

              
                /* Responsive Natigation Menu */
var header = document.querySelector('header');
var navMenu = header.querySelector('.nav-header-menu');
var hamburberMenu = header.querySelector('.hamburger-icon')
var menuLibraryItem=navMenu.querySelector('.nav-library-item');

hamburberMenu.addEventListener('click', (event) => {
    header.classList.toggle('open');
});

menuLibraryItem.addEventListener('click',(event)=>{
    event.currentTarget.classList.toggle('active');
})


/*Features*/
var features=document.querySelectorAll('.feature-item');

function resetActiveClass(){
    features.forEach(item=>{
        item.classList.remove("active");
    });
}

features.forEach(feature=>{
    feature.addEventListener('click',(event)=>{

        if (!event.currentTarget.classList.contains('active')) {
            resetActiveClass();
        }
        event.currentTarget.classList.toggle('active')
    })
})


/* Testimonials */

var testimonials=document.querySelectorAll('.testimonial');
var testimonials_dot=document.querySelectorAll('.testimonial-dot');
var testimonial_is_selected=false;
var index=0;

testimonials_dot.forEach((testimonial,index)=>{
    testimonial.addEventListener('click',(event)=>{
        testimonial_is_selected=true
        resetTestimonialActive()
        changeSlide(index)
        event.currentTarget.classList.add('active');
    });
})

function resetTestimonialActive(){
    testimonials_dot.forEach(item=>{
        item.classList.remove("active");
    })
}
function changeTestimonial(){
    resetTestimonialActive();
    changeSlide()
    testimonials_dot[index].classList.add('active');
}
function changeSlide(indexNo=null){
    testimonials[0].style.marginLeft=`-${indexNo!==null ? indexNo : index}00%`;
}
function durationSlider(){
    setInterval(()=>{
        if (!testimonial_is_selected){
            changeTestimonial()
            index<testimonials.length-1 ? index++ : index=0;
        }
    },3000);
}

durationSlider();
              
            
!
999px

Console