index.html

<!doctype html>
<html>
    <head>
        <title>Tech@NYU</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <link href="css/home-style.css" rel="stylesheet">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
        <link rel="shortcut icon" type="image/jpg" href="assets/favicon.png"/>
        <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
        <!-- Global site tag (gtag.js) - Google Analytics -->
        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-158759152-1"></script>
        <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'UA-158759152-1');
        </script>
    </head>
    <body class="white" id = "home">
        <header class="yellow overflow" data-aos="fade-in">
            <nav data-aos="fade-in" data-aos-delay="500">
                <ul>
                    <li><a href= "#about" class="scroll">ABOUT</a></li>
                    <li><a href= "#events" class="scroll">EVENTS</a></li>
                    <li><a href= "#community" class="scroll">COMMUNITY</a></li>
                    <!-- <li><a href= "#team" class="scroll">TEAM</a></li> -->
                    <li><a href= "#social" class="scroll">SOCIAL</a></li>
                </ul>
            </nav>
            <div id = "logo-container" data-aos="fade-right" data-aos-delay="1000">
                <img id = "logo" src="assets/logo.svg">
                <p id = "catch-line">a community of artists, makers, and hackers</p>
                <a class="scroll" href="#community"><button class = "green-button">JOIN US</button></a>
            </div>
            <div id = "blob-container" data-aos="fade-left" data-aos-delay="1500">
                <div>
                    <img src="assets/green.svg">
                    <div id = "mission-text">
                        <p>We hold events throughout the year to share new skills and ideas all while building a community of creative, passionate, and ethical users of technology.</p>
                        <p>Oh, and we also help you find jobs.</p>
                    </div>
                    <hr id = "black-line">
                </div>
            </div>
        </header>

        <section id = "about" class="white">
            <div class="container">
                <div class="row">
                    <div class="col-sm" data-aos="zoom-in" data-aos-delay="500">
                        <h2 class = "mission-heading">Creativity</h2>
                        <img class = "mission-pic" src="assets/creativity.svg" alt="creativity">
                        <p class="mission-para">Ideate and innovate your ideas through design.</p>
                    </div>
                    <div class="col-sm" data-aos="zoom-in" data-aos-delay="700">
                        <h2 class = "mission-heading">Learning</h2>
                        <img class = "mission-pic" src="assets/web.svg" alt="learning">
                        <p class="mission-para">Pick up new skills or brush up your code.</p>
                    </div>
                    <div class="col-sm" data-aos="zoom-in" data-aos-delay="1000">
                        <h2 class="mission-heading">Community</h2>
                        <img class = "mission-pic" src="assets/network.svg" alt="community">
                        <p class="mission-para">Meet other tech-enthusiasts.</p>
                    </div>
                </div>
            </div>
            <h1 id = "future-leaders" data-aos="fade-in" data-aos-delay="1200">We're building a community for the future leaders in tech.</h1>
        </section>

        <section id = "events" class="yellow">
            <div id = "lav-rect">
                <img src = "assets/lavender-rect.svg" alt="lavender-rectangle" data-aos="fade-in" data-aos-offset="400" data-aos-delay="500">
                <div id = "event-head" data-aos="zoom-out" data-aos-offset="500">
                    <h1>EVENTS</h1>
                    <img id = "squiggles" src="assets/squiggles.svg" alt="squiggles">
                </div>
                <img id = "half-circ" src="assets/purple-half.svg" alt="Purple-semi-circle" data-aos="fade-in" data-aos-delay="650">
            </div>
            <div id = "come-meet" data-aos="fade-in" data-aos-delay="1000">
                <h3>COME MEET US</h3>
                <p>Look out for upcoming workshops, tutorials, info sessions, panels, and more!</p>
                <a class = "load-link" href="/events"><button class = "green-button">SEE MORE</button></a>
            </div>
        </section>

        <section id = "community" class = "white">
            <div align = "right" data-aos="fade-left" data-aos-delay="500"><hr class="half-black-line"></div>
            <h1 data-aos="fade-in" data-aos-delay="1200" >JOIN THE COMMUNITY</h1>
            <div data-aos="fade-right" data-aos-delay="800" ><hr class="half-black-line"></div>
            <div class="container">
                <div class="row">
                    <div class="col" data-aos="zoom-out" data-aos-delay="1500">
                      <h4>STUDENTS</h4>
                        <p class="community-para">Join the <a href="https://mailchi.mp/7b624ef8b8ad/techatnyu" target="_blank" class = "link" >listserv</a> for upcoming events and opportunities.</p>
                    </div>
                    <div class="col" data-aos="zoom-out" data-aos-delay="1800">
                      <h4>CORPORATE</h4>
                        <p class="community-para">Interested in hosting an event with us? Fill out this <a href="https://forms.gle/KBs8tpKz1hPha3ZM6" target="_blank" class="link">form</a></p>
                    </div>
                </div>
            </div>
        </section>

        <section id = "social" data-aos="fade-in">
            <h3>FOLLOW US</h3>
            <div id = "social-icons">
                <a href = "https://www.instagram.com/techatnyu/" target = "_blank"><img src = "assets/instagram-logo.svg" alt = "instagram logo"></a>
                <a href = "https://www.facebook.com/TechatNYU/" target = "_blank"><img src = "assets/facebook.svg" alt = "facebook logo"></a>
                <a href = "https://twitter.com/techatnyu" target = "_blank"><img src = "assets/twitter.svg" alt = "twitter logo"></a>
                <a href = "https://medium.com/@TechatNYU" target = "_blank"><img src = "assets/medium.svg" alt = "medium logo"></a>
                <a href = "https://www.youtube.com/channel/UCfnrLW1YMab6CDElGKw2aGQ" target = "_blank"><img src = "assets/youtube.svg" alt = "medium logo"></a>
            </div>
        </section>

        <script
        src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous"></script>
        <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
        <script>
        AOS.init();
        </script>
        <script src = "js/main.js"></script>

    </body>
</html>