Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

Save Automatically?

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

              
                <!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">


    <title>Twocan Design | Design and Brand Strategy</title>

    <link rel="stylesheet" href="./css/master.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700&display=swap" rel="stylesheet">


    <script src="https://kit.fontawesome.com/3e660eea1f.js"></script>


    <!-- SOCIAL STUFF -->

    <meta name="description" content="Design and brand strategy agency based in the Netherlands, focused in graphic, web and User Experience design. Let's create something awesome! hello@twocan.design">
    <meta property='og:title' content="Twocan Design | Design and Brand Strategy" />
    <meta property='og:image' content="./images/meta-image.png" />
    <meta property='og:description' content="Design and brand strategy agency based in the Netherlands, focused in graphic, web and User Experience design. Let's create something awesome!" />
    <meta property='og:url' content="https://twocan.design" />
    <meta property="og:type" content="website" />

    <!-- FAVICON -->

    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=69Pmbx30WB">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=69Pmbx30WB">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=69Pmbx30WB">
    <link rel="manifest" href="/site.webmanifest?v=69Pmbx30WB">
    <link rel="mask-icon" href="/safari-pinned-tab.svg?v=69Pmbx30WB" color="#5bbad5">

    <link rel="shortcut icon" href="/favicon.ico?v=69Pmbx30WB">

    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">

</head>

<body>
    <script type="text/javascript">
        function showMenu() {
            var elementStyle = document.getElementById('menulist').style;
            var menuIcon = document.getElementById('burger').style;
            var crossIcon = document.getElementById('cross').style;


            console.log(elementStyle);
            if (elementStyle.height == "0px" || elementStyle.height == "") {
                elementStyle.height = '100vh';
                menuIcon.display = 'none';
                crossIcon.display = 'inline';

            } else {
                elementStyle.height = '0px';

                menuIcon.display = 'inline';
                crossIcon.display = 'none';
            }

        }
    </script>

    <div class="bg-color-div"></div>
    <div class="nav-bar">
        <h1>twocan design</h1>
        <i onclick="showMenu()" id="burger" class="fas fa-bars"></i>
        <i onclick="showMenu()" id="cross" class="fas fa-times"></i>

    </div>
    <div id="menulist">

        <h2><a onclick="showMenu()" href="#about">about</a></h2>
        <h2><a onclick="showMenu()" href="#work">portfolio</a></h2>
        <h2><a onclick="showMenu()" href="#meetteam">meet the team</a></h2>
        <h2><a onclick="showMenu()" href="#contact">contact</a></h2>


    </div>


    <div class="plants-home">
        <img class="leafL" src="./images/leaves/leaf1.svg" alt="">
        <img class="leafL" src="./images/leaves/leaf2.svg" alt="">

        <img class="leafL" src="./images/leaves/leaf4.svg" alt="">
        <img class="leafL" src="./images/leaves/leaf3.svg" alt="">
        <img class="leafR" src="./images/leaves/leaf4.svg" alt="">
        <img class="leafR" src="./images/leaves/leaf2.svg" alt="">
        <img class="leafR" src="./images/leaves/leaf1.svg" alt="">


    </div>
    <div class="container">
        <div id="menu-desktop" class="row">
            <div class="col-4 col-sm-4">
                <a href="../index.html">
                    <h1>twocan design</h1>
                </a>

            </div>
            <div id="menu-desktop-links" class="col-8 col-sm-8">
                <a href="../#about">about</a>
                <a href="../#work">portfolio</a>
                <a href="../#meetteam">the team</a>
                <a href="../#contact">contact</a>
            </div>
        </div>


        <div class="row" id="homejumbo">




            <div class="col-1 col-sm-1">

            </div>
            <div class="col-6 col-sm-7" id="introtext">
                <div>
                    <h1>We’re not designing just PRODUCTS. <br> We’re designing <span style="font-size: 100px">BUSINESSES.</span> </h1>
                    <!-- <h1>Creativity, dedication,<br>and a lot of coffee.</h1> -->
                </div>
            </div>
            <div class="col-3 col-sm-3">
                <div id="intrologo">

                    <img id="logoheader" src="./images/logo.svg" alt="">
                </div>

            </div>

        </div>
        <div class="row" id="logojumbo-mobile">
            <div class="col-8">

            </div>


        </div>
        <div class="row" id="textjumbo-mobile">
            <div class="col-12">
                <!-- <h1>Creativity, dedication,<br>and a lot of coffee.</h1> -->
                <h1>We’re not designing just PRODUCTS. <br> We’re designing <span style="font-size: 50px">BUSINESSES.</span> </h1>
            </div>
        </div>

        <div class="row" id="about">
            <div class="col-12 col-sm-7">

                <h1>What we do</h1>
                <!-- 
                <p lang="en">Twocan Design is a <b>multidisciplinary</b> creative agency. It sounds like a mouthful but essentially, we create an array of <b>digital solutions</b>. We make sure every problem is solved in a holistic way so we can focus on the main
                    goal: delivering great designs.</p> -->
                We create extraordinary brands, digital products and experiences.
            </div>

            <div class="col-12 col-sm-5 products">
                <h1 class="hide-response">&nbsp;</h1>
                <a onclick="showText('strategy')">Strategy <i class="fas fa-chevron-down" id="strategy-chevron"></i></a> <br>
                <div class="products-text" id="strategy-text">
                    <p>We start each new partnership with an in‑depth discovery phase to immerse ourselves in your business. We interview stakeholders, conduct user research, analyze your competition, and consolidate content. The result is an action plan
                        on executing a holistic brand and user experience.</p>
                </div>
                <a onclick="showText('brand')">Brand Identity <i class="fas fa-chevron-down" id="brand-chevron"></i></a> <br>
                <div class="products-text" id="brand-text">
                    <p>A brand today is all about how it makes your customers feel. It's not a logo or visual identity but rather a cohesive system that spans across all mediums and touchpoints. We're a branding firm offering a complete solution from naming
                        and logo design to communications and style guides.
                    </p>
                </div>

                <a onclick="showText('ux')">User Experience <i class="fas fa-chevron-down" id="ux-chevron"></i></a> <br>
                <div class="products-text" id="ux-text">
                    <p>

                        We're a user experience and user interface design agency focused on improving conversion and increasing customer engagement. Our UI/UX design capabilities don't stop at mobile apps, web applications, or multi‑platform digital experiences. We create products
                        and services that provide outstanding usability while fully embracing your brand's personality.
                    </p>
                </div>

                <a onclick="showText('websites')">Websites <i class="fas fa-chevron-down" id="websites-chevron"></i></a> <br>
                <div class="products-text" id="websites-text">
                    <p>

                        We're a web design agency creating next‑level websites by strategically blending user experience and brand storytelling. Our web designers and developers create responsive websites that feel at home on any device. Product landing pages, marketing sites,
                        or company intranet portals – we do it all.
                    </p>
                </div>

                <a onclick="showText('marketing')">Marketing <i class="fas fa-chevron-down" id="marketing-chevron"></i></a>
                <div class="products-text" id="marketing-text">
                    <p>

                        You know you have a great product. But your potential customers don't. There is no better way to reach your market than through well thought marketing actions. Our team is capable of putting your business on the radar.
                    </p>
                </div>


            </div>

            <!-- <div class="col-12 col-sm-12">
                <div class="we-do">
                    <div>
                        <img src="./images/icons/graphic.svg" alt="graphic design">
                        <p>graphic design</p>
                    </div>
                    <div>
                        <img src="./images/icons/ux.svg" alt="ux design">
                        <p>UX design</p>
                    </div>
                    <div>
                        <img src="./images/icons/social.svg" alt="social media">
                        <p>social media</p>
                    </div>
                    <div>
                        <img src="./images/icons/web.svg" alt="web design">
                        <p>web design</p>
                    </div>
                    <div>
                        <img src="./images/icons/marketing.svg" alt="marketing">
                        <p>marketing</p>
                    </div>
                </div>
            </div> -->

        </div>

        <div class="row" id="work">
            <div class="col-12 col-sm-12">
                <h1>Some of our work</h1>
                <div class="work-grids">
                    <a href="./projects/project1.html">

                        <!-- <a href="/projects/project1.html"> -->
                        <div class="work-entry" id="entry1">
                            <div class="overlay"></div>
                            <div class="entry-content">
                                <h1>Inches<br>Beauty Salon</h1>
                            </div>
                        </div>
                    </a>
                    <a href="./projects/project2.html">

                        <!-- <a href="./projects/project2.html"> -->
                        <div class="work-entry" id="entry2">
                            <div class="overlay"></div>

                            <div class="entry-content">
                                <h1>Accenture Interactive</h1>
                            </div>
                        </div>
                    </a>
                    <a href="./projects/project3.html">

                        <!-- <a href="./projects/project3.html"> -->
                        <div class="work-entry" id="entry3">
                            <div class="overlay"></div>

                            <div class="entry-content">
                                <h1>Sakana Tengoku</h1>
                            </div>
                        </div>
                    </a>
                    <a href="#">

                        <!-- <a href="./projects/project4.html"> -->
                        <div class="work-entry" id="entry4">
                            <div class="overlay"></div>

                            <div class="entry-content">
                                <h1>Sync</h1>
                            </div>
                        </div>
                    </a>
                    <a href="./projects/project5.html">

                        <!-- <a href="./projects/project5.html"> -->
                        <div class="work-entry" id="entry5">
                            <div class="overlay"></div>

                            <div class="entry-content">
                                <h1>felix</h1>
                            </div>
                        </div>
                    </a>
                    <!--
        <div class="work-entry" id="entry6">
          <div class="overlay"></div>

          <div class="entry-content">
            <h1>Test2</h1>
          </div>
        </div> -->
                </div>
            </div>

        </div>

        <div class="row" id="meetteam">
            <!-- <img class="plant" src="./images/leaves/leaf1.svg" alt=""> -->

            <div class="col-12 col-sm-12">
                <h1>Meet the team</h1>
            </div>

            <div class="col-12 col-md-1"></div>
            <div class="col-12 col-md-4 polaroids">
                <img src="./images/prettymen/alex.jpg" alt="">
                <div class="polaroidcaption">
                    <h2>Alexander Konings</h2>
                    <p><i>Graphic designer and plant lover.</i></p>
                </div>
            </div>
            <div class="col-12 col-md-2"></div>


            <div class="col-12 col-md-4 polaroids">
                <img src="./images/prettymen/leo.jpg" alt="">
                <div class="polaroidcaption">
                    <h2>Leonardo Almeida</h2>
                    <p><i>Web designer and part-time nerd.</i></p>
                </div>
            </div>
            <div class="col-12 col-md-1"></div>

        </div>



    </div>
    <div class="contact-container-container">
        <div class="container contact-container">
            <div class="row" id="contact">
                <div class="col-12 col-sm-12">
                    <h1>Let's create something awesome!</h1>
                    <div class="contact-color-div"></div>

                </div>
                <div class="col-12 col-sm-12" id="contactform">

                    <form class="contact-form" action="https://formspree.io/contact@twocan.design" method="post">
                        <!-- <h1>Or make us find you</h1> -->
                        <div>

                            <label>Name*</label>
                            <input name="name" type="text" required>
                        </div>
                        <div>

                            <label>Email*</label>
                            <input name="email" type="email" required>
                        </div>

                        <div>
                            <label>Message</label>
                            <textarea name="message" type="text" rows="3"></textarea>
                        </div>

                        <input id="send-button" type="submit" value="Send!">
                        <input type="hidden" name="_next" value="https://twocan.design/">


                    </form>
                </div>
                <div class="col-12 col-sm-12 col-md-6">

                    <div id="textphones">
                        <p>+31 6 57322639</p>
                        <p>+31 6 55598160</p>
                    </div>
                    <div id="linkphones">
                        <a href="tel:+31657322639">
                            <p>+31 6 57322639</p>
                        </a>
                        <a href="tel:+31655598160">
                            <p>+31 6 55598160</p>
                        </a>

                    </div>
                    <a href="mailto:hello@twocan.design?subject=Let's make my brand stand out!" target="_blank">hello@twocan.design</a>

                </div>
                <div class="col-12 col-sm-12 col-md-6">
                    <a href="https://instagram.com/twocan.design" target="_blank">Instagram</a><br>

                    <a href="https://facebook.com/twocandotdesign" target="_blank">Facebook</a><br>

                    <a href="https://linkedin.com/company/twocandesign" target="_blank">LinkedIn</a><br>

                </div>

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


    <footer>
        <p>made with love in 2019</p>
    </footer>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.1.1/gsap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js" integrity="sha256-+9YNuItWuR4sbqeaNiJOxG0BvptYz4fbUXbIZoH5Jwo=" crossorigin="anonymous"></script>
    <script src="./script.js"></script>

</body>

</html>
              
            
!

CSS

              
                @import url("http://fonts.googleapis.com/css?family=Montserrat:400,500,700");
@import url("./normalize.css");
@font-face {
    font-family: 'Montserrat', sans-serif;
    font-size: 1em;
    font-style: normal;
}

html,
body {
    scroll-behavior: smooth;
    width: 100%;
}

::selection {
    background: #313D6C;
    color: white;
}

a:visited,
a {
    color: #313D6C;
}

body {
    font-family: 'Montserrat', sans-serif;
    color: #313D6C;
    font-size: 1em;
}

h1 {
    font-size: 3rem;
}

.nav-bar {
    box-sizing: border-box;
    position: absolute;
    width: 100%;
    padding: 0 15px;
    background-color: white;
    height: 70px;
    z-index: 1;
    border-bottom: 2px solid #313D6C;
}

.nav-bar h1,
.nav-bar i {
    line-height: 70px;
    font-size: 1.5rem;
}

.nav-bar h1,
#burger {
    display: inline;
}

.nav-bar i {
    float: right;
}

.nav-bar a {
    text-decoration: none;
}

#cross {
    display: none;
}

#menulist {
    height: 0;
    width: 100vw;
    background-color: white;
    position: absolute;
    /* display: none; */
    z-index: 0;
    transition-duration: .5s;
    transition-property: height;
    padding-top: 70px;
    text-align: center;
    overflow: hidden;
    line-height: 3rem;
}

.container {
    margin: 0 auto 100px auto;
    padding: 0 15px;
    min-height: 90vh;
}

.bg-color-div {
    position: fixed;
    height: 100vh;
    width: 100vw;
    background-color: #fffffa;
    z-index: -99;
}

.bg-color-div {
    position: fixed;
    height: 100%;
    width: 100vw;
    background-color: #fffffa;
    z-index: -99;
}

.row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: 30px;
    z-index: 99;
}

.row:nth-child(n+4) {
    margin-top: 60px;
}

.plants-home {
    /* display: block; */
    position: absolute;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    padding-bottom: 250px;
    z-index: -2;
    background-image: linear-gradient(to top, #fffff4 0%, #ffecd2 20%, #fcb69fd5 100%);
    /* background-clip: content-box; */
}

.leafL {
    transform-origin: bottom;
}

.leafR {
    transform-origin: bottom;
}

.plants-home img {
    margin-bottom: 250px;
    position: absolute;
}

.plants-home img:first-child {
    transform: rotate(46deg);
    bottom: 290px;
    left: -220px;
    z-index: -4;
    width: 200px;
  background-color: red;
}

.plants-home img:nth-child(2) {
    transform: rotate(46deg);
    bottom: 180px;
    left: -210px;
    z-index: -3;
    width: 150px;
  background-color:yellow;
}

.plants-home img:nth-child(3) {
    transform: rotate(60deg);
    bottom: 90px;
    left: -200px;
    z-index: -2;
    width: 290px;
  background-color: blue;
}

.plants-home img:nth-child(4) {
    transform: rotate(60deg);
    bottom: -80px;
    left: -200px;
    z-index: -1;
    width: 270px;
  background-color:green;
}

.plants-home img:nth-child(5) {
    transform: rotate(-70deg) scaleX(-1);
    bottom: 300px;
    right: -180px;
    z-index: -3;
    width: 290px;
  background-color: blue;
}

.plants-home img:nth-child(6) {
    transform: rotate(-60deg) scaleX(-1);
    bottom: 80px;
    right: -150px;
    z-index: -2;
    width: 180px;
  background-color: yellow;
}

.plants-home img:nth-child(7) {
    transform: rotate(-75deg) scaleX(-1);
    bottom: 30px;
    right: -180px;
    z-index: -1;
    width: 300px;
  background-color: red;
}

#homejumbo {
    height: 100vh;
}

#logoheader {
    width: 100%;
}

#introtext,
#intrologo {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    flex-flow: column;
    height: 50%;
    font-size: 1.5rem;
    line-height: 1.5;
}

.row {
    line-height: 1.5;
}

#about>div:first-child {
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 50px;
}

#about>div:first-child>h1 {
    margin-top: 0;
}

.products a {
    font-weight: 500;
    font-size: 1.8rem;
    text-decoration: none;
    cursor: pointer;
}

.products-text {
    max-height: 0;
    overflow: hidden;
    font-size: 1rem;
    font-weight: normal;
    opacity: 0;
    transition-duration: .3s;
}

.products h1 {
    margin-top: 0;
}

.about p {
    margin-bottom: 0;
}

.we-do {
    margin-top: 60px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5rem, 20%));
    text-align: center;
}

.we-do img {
    width: 40%;
}

.we-do p {
    margin-top: 0;
}

.work-grids {
    display: grid;
    height: auto;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    text-align: center;
    gap: 10px;
}

.work-grids>*:first-child {
    grid-row: 1 / 1;
    grid-column: 1 / 1;
}

.work-entry {
    position: relative;
    text-align: center;
    padding-bottom: 100%;
}

.work-grids a>div {
    background-size: cover;
}

.work-grids a>div:hover>* {
    opacity: 0;
}

#entry1 {
    background-image: url("../images/project1/thumb.jpg");
}

#entry2 {
    background-image: url("../images/project2/thumb.jpg");
}

#entry3 {
    background-image: url("../images/project3/sign.jpg");
}

#entry4 {
    background-image: url("../images/project4/thumb.jpg");
}


/* #entry5 {
    background-image: url("../images/project5/solar.gif");
} */

.overlay {
    background-color: #313D6Ccc;
    position: absolute;
    width: 100%;
    height: 100%;
    transition-duration: .5s;
}

.entry-content {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    width: 100%;
    transition-duration: .3s;
}

.entry-content h1 {
    color: white;
    font-weight: 700;
    text-align: center;
    font-size: 1.7rem;
}

#linkphones {
    display: none;
}

label {
    display: block;
    font-weight: bold;
}

input {
    height: 34px;
    padding: 2px;
}

input,
textarea {
    background-color: #ffffffaa;
    border-radius: 3px;
    border: 1px solid #313D6C;
    margin-bottom: 15px;
}

textarea {
    width: 50%;
    resize: none;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

#mockup {
    width: 300px;
}

#send-button {
    font-weight: 700;
    cursor: pointer;
    background-color: white;
    color: #313D6C;
    width: 100px;
    height: 50px;
}

.polaroids {
    border-radius: 5px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.polaroidcaption h2 {
    margin: 0;
}

#meetteam img {
    width: 100%;
    object-fit: contain;
    border: 15px #fffff4 solid;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

#meetteam .plant {
    width: auto;
    position: absolute;
    height: 300px;
    border: none;
    top: 20%;
    left: 3%;
    z-index: -3;
}

.polaroidcaption {
    padding: 0 15px;
}

.contact-container-container {
    /* width: 100vw; */
    background-color: #313D6C;
}

.contact-container {
    padding: 0;
    color: white;
    min-height: 0 !important;
    margin-bottom: 0;
}

.contact-container a,
.contact-container a:visited {
    color: white;
}

#contactform {
    margin-bottom: 30px;
}

#contact p {
    font-size: 1.4rem;
    line-height: 2.5rem;
    margin: 0;
}

#contact a {
    font-size: 1.4rem;
    line-height: 2.5rem;
}

footer {
    grid-column: content-start / content-end;
    height: 70px;
    background-color: #313D6C;
    color: white;
    line-height: 70px !important;
    text-align: center;
}

footer>p {
    line-height: 70px;
}

footer p {
    margin: 0;
}

#about,
#work,
#meetteam {
    opacity: 0;
    scale: 0.96;
    transition: all .5s ease-in-out;
}

#about.visible,
#work.visible,
#meetteam.visible {
    opacity: 1;
    scale: 1;
}


/* PORTFOLIO STUFFS */

#menu-desktop {
    height: 70px;
    line-height: 70px;
}

#menu-desktop a {
    text-decoration: none;
}

#menu-desktop h1 {
    margin: 0;
    font-size: 1.5rem;
}

#menu-desktop-links {
    text-align: right;
}

#menu-desktop-links a {
    margin: 0 30px;
    font-weight: bold;
}

.project-info {
    margin-top: 2rem;
}

.project-info h2 {
    font-weight: normal;
}

.taglist {
    padding: 0 !important;
    margin-top: 0;
}

.keytags {
    color: #313D6C;
    border-radius: .2rem;
    border: 1px solid #313D6C;
    font-size: 1rem;
    overflow-wrap: break-word;
    word-wrap: break-word;
    padding: .1rem .3rem .2rem;
    box-sizing: border-box;
}

.project-description {
    text-align: justify;
    overflow-wrap: break-word;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 10 4 4;
}

.main-gallery {
    height: 500px;
    /* border: 2px solid #313D6C; */
}

.gallery-cell {
    width: 100%;
    height: 100%;
    /* text-align: center; */
    /* line-height: 100%; */
}

.gallery-cell img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    vertical-align: middle;
}

@media (max-width: 575px) {
    .project-info {
        padding-top: 80px;
        margin-top: 0;
    }
    .main-gallery {
        height: 300px;
    }
    #menu-desktop {
        display: none;
    }
    #homejumbo {
        display: none;
    }
    /* #logojumbo-mobile {
        height: 20vh;
    } */
    #textjumbo-mobile {
        padding-top: 100px;
        height: 80vh;
        margin: 0;
    }
    #textjumbo-mobile h1 {
        font-size: 2rem;
    }
    #logoheader {
        bottom: 0;
    }
    .plants-home img {
        margin-bottom: 250px;
        position: absolute;
        height: 350px;
    }
    .plants-home img:first-child {
        display: none;
    }
    .plants-home img:nth-child(2) {
        transform: rotate(46deg);
        bottom: 80px;
        left: -150px;
        z-index: -3;
        width: 150px;
    }
    .plants-home img:nth-child(3) {
        transform: rotate(60deg);
        bottom: 20px;
        left: -200px;
        z-index: -2;
        width: 290px;
    }
    .plants-home img:nth-child(4) {
        transform: rotate(60deg);
        bottom: -130px;
        left: -200px;
        z-index: -1;
        width: 270px;
    }
    .plants-home img:nth-child(5) {
        transform: rotate(-70deg) scaleX(-1);
        bottom: 100px;
        right: -180px;
        z-index: -3;
        width: 290px;
    }
    .plants-home img:nth-child(6) {
        transform: rotate(-60deg) scaleX(-1);
        bottom: -30px;
        right: -150px;
        z-index: -2;
        width: 180px;
    }
    .plants-home img:nth-child(7) {
        transform: rotate(-75deg) scaleX(-1);
        bottom: -60px;
        right: -180px;
        z-index: -1;
        width: 300px;
    }
    .hide-response {
        display: none;
    }
    p {
        font-size: 1rem;
        line-height: 1.9rem;
    }
    #textphones {
        display: none;
    }
    #linkphones {
        display: block !important;
    }
    textarea {
        width: 100%;
    }
    .container {
        width: auto;
    }
    .col-12 {
        grid-column: span 12;
    }
    .col-11 {
        grid-column: span 11;
    }
    .col-10 {
        grid-column: span 10;
    }
    .col-9 {
        grid-column: span 9;
    }
    .col-8 {
        grid-column: span 8;
    }
    .col-7 {
        grid-column: span 7;
    }
    .col-6 {
        grid-column: span 6;
    }
    .col-5 {
        grid-column: span 5;
    }
    .col-4 {
        grid-column: span 4;
    }
    .col-3 {
        grid-column: span 3;
    }
    .col-2 {
        grid-column: span 2;
    }
    .col-1 {
        grid-column: span 1;
    }
    footer {
        margin-top: 30px;
    }
}

@media (min-width: 576px) {
    #logojumbo-mobile {
        display: none;
    }
    #textjumbo-mobile {
        display: none;
    }
    p {
        font-size: 1rem;
        line-height: 1.9rem;
    }
    .container {
        width: 540px;
    }
    .col-sm-12 {
        grid-column: span 12;
    }
    .col-sm-11 {
        grid-column: span 11;
    }
    .col-sm-10 {
        grid-column: span 10;
    }
    .col-sm-9 {
        grid-column: span 9;
    }
    .col-sm-8 {
        grid-column: span 8;
    }
    .col-sm-7 {
        grid-column: span 7;
    }
    .col-sm-6 {
        grid-column: span 6;
    }
    .col-sm-5 {
        grid-column: span 5;
    }
    .col-sm-4 {
        grid-column: span 4;
    }
    .col-sm-3 {
        grid-column: span 3;
    }
    .col-sm-2 {
        grid-column: span 2;
    }
    .col-sm-1 {
        grid-column: span 1;
    }
}

@media (min-width: 768px) {
    p {
        font-size: 1.2rem;
        line-height: 1.9rem;
    }
    .nav-bar {
        display: none;
    }
    #menulist {
        padding: 0;
    }
    .container {
        width: 720px;
    }
    .col-md-12 {
        grid-column: span 12;
    }
    .col-md-11 {
        grid-column: span 11;
    }
    .col-md-10 {
        grid-column: span 10;
    }
    .col-md-9 {
        grid-column: span 9;
    }
    .col-md-8 {
        grid-column: span 8;
    }
    .col-md-7 {
        grid-column: span 7;
    }
    .col-md-6 {
        grid-column: span 6;
    }
    .col-md-5 {
        grid-column: span 5;
    }
    .col-md-4 {
        grid-column: span 4;
    }
    .col-md-3 {
        grid-column: span 3;
    }
    .col-md-2 {
        grid-column: span 2;
    }
    .col-md-1 {
        grid-column: span 1;
    }
}

@media (min-width: 992px) {
    .container {
        width: 960px;
    }
    .col-lg-12 {
        grid-column: span 12;
    }
    .col-lg-11 {
        grid-column: span 11;
    }
    .col-lg-10 {
        grid-column: span 10;
    }
    .col-lg-9 {
        grid-column: span 9;
    }
    .col-lg-8 {
        grid-column: span 8;
    }
    .col-lg-7 {
        grid-column: span 7;
    }
    .col-lg-6 {
        grid-column: span 6;
    }
    .col-lg-5 {
        grid-column: span 5;
    }
    .col-lg-4 {
        grid-column: span 4;
    }
    .col-lg-3 {
        grid-column: span 3;
    }
    .col-lg-2 {
        grid-column: span 2;
    }
    .col-lg-1 {
        grid-column: span 1;
    }
}

@media (min-width: 1200px) {
    .container {
        width: 1140px;
    }
    .col-xl-12 {
        grid-column: span 12;
    }
    .col-xl-11 {
        grid-column: span 11;
    }
    .col-xl-10 {
        grid-column: span 10;
    }
    .col-xl-9 {
        grid-column: span 9;
    }
    .col-xl-8 {
        grid-column: span 8;
    }
    .col-xl-7 {
        grid-column: span 7;
    }
    .col-xl-6 {
        grid-column: span 6;
    }
    .col-xl-5 {
        grid-column: span 5;
    }
    .col-xl-4 {
        grid-column: span 4;
    }
    .col-xl-3 {
        grid-column: span 3;
    }
    .col-xl-2 {
        grid-column: span 2;
    }
    .col-xl-1 {
        grid-column: span 1;
    }
}

@media only screen and (max-width: 899px) {
    .menucontainer {
        display: none;
    }
    #introtext {
        left: 50%;
        font-size: 1rem;
        /* width: 80%; */
        hyphens: auto;
    }
    .menu {
        display: none;
    }
    .content-grid {
        grid-template-columns: [content-start] 100% [content-end];
    }
    .toucan-image {
        height: 90vh;
        text-align: right;
    }
    #toucan-logo {
        text-align: right;
        display: inline;
        margin: 3% 3% 0 0;
        width: 80px;
        height: auto;
    }
    .toucan-image h1 {
        /* margin-top: 0; */
        display: none;
    }
    #about p {
        font-size: 1.3rem;
        hyphens: auto;
        line-height: 2.3rem;
    }
    input {
        width: 280px;
    }
    .work-grids {
        grid-template-columns: repeat(auto-fill, 100%);
        text-align: center;
        font-size: 2rem;
    }
    .work-grids a {
        margin-bottom: 15px;
    }
    .we-do {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
        text-align: center;
    }
    #entry1:hover>*,
    #entry2:hover>*,
    #entry3:hover>*,
    #entry4:hover>*,
    #entry5:hover>*,
    #entry6:hover>* {
        opacity: 1;
    }
    .two-column {
        display: grid;
        grid-template-columns: 100%;
        grid-auto-rows: auto;
    }
    footer {
        line-height: normal;
        height: auto;
    }
}
              
            
!

JS

              
                let leftLeaves = document.querySelector('.leafL');
let rightLeaves = document.querySelector('.leafR');



let tween = gsap.timeline()

tween.to('.leafL', {
    duration: 2,
    y: 10,
    rotation: 30,
    ease: "power1.out",
    scale: .8,
    stagger: 0.3
}, 0)

.to('.leafR', {
    duration: 2,
    y: 10,
    rotation: 150,
    ease: "power1.out",
    scale: .8,
    stagger: 0.3
}, 0)



const controller = new ScrollMagic.Controller();

const scene = new ScrollMagic.Scene({
        triggerElement: '.plants-home',
        duration: '100%',
        triggerHook: 0
    })
    .setTween(tween)
    .addTo(controller)


let strategy = brand = ux = web = marketing = false

function showText(e) {
    const text = document.querySelector(`#${e}-text`);
    const chevron = document.querySelector(`#${e}-chevron`);


    if (text.style.maxHeight != '800px' || text.style.maxHeight === null) {
        chevron.style.rotate = '180deg'
        text.style.maxHeight = '800px';
        text.style.opacity = 1;
    } else {
        chevron.style.rotate = '0deg'

        text.style.maxHeight = '0';
        text.style.opacity = 0;

    }
}


new ScrollMagic.Scene({
        triggerElement: "#about",
        triggerHook: 0.9 // show, when scrolled 10% into view

    })
    .setClassToggle("#about", "visible") // add class to reveal
    .addTo(controller);

new ScrollMagic.Scene({
        triggerElement: "#work",
        triggerHook: 0.9 // show, when scrolled 10% into view

    })
    .setClassToggle("#work", "visible") // add class to reveal
    .addTo(controller);

new ScrollMagic.Scene({
        triggerElement: "#meetteam",
        triggerHook: 0.9 // show, when scrolled 10% into view

    })
    .setClassToggle("#meetteam", "visible") // add class to reveal
    .addTo(controller);
              
            
!
999px

Console