index.html

---
layout: default
title: Build your very own octocat
id: homepage
---

<section class="octocat-intro" id="octocat-generator-intro">
        <div class="wrapper-wide">
            <div class="octocat-intro__content">
                <div class="col-12 col-sm-6 octocat-intro__text" data-animate-in=fade data-animate-in-delay="0">
                    <h1 class="mb-3">
                        Build<br /> your very own<br /> octocat</span>
                    </h1>
                    <p class="p-lg mb-4">Take a break from your build and create an Octocat that’s all you, from whisker tip to tail.</p>

                    <div class="octocat-intro__octocat-sm mb-4" data-animate-in="fade" data-animate-in-delay="0.3">
                        <img class="mx-auto" src="{{ '/assets/images/base-octocat.svg' | relative_url }}" alt="The Octocat" />
                    </div>

                    <div class="pb-2 text-center text-sm-left">
                        <a class="btn" href="{{ '/build-your-octocat/' | relative_url }}">Get started</a>
                    </div>
                </div>
                <div class="col-12 col-sm-6 octocat-intro__octocat" data-animate-in="fade" data-animate-in-delay="0.3">
                    <img class="mx-auto" src="{{ '/assets/images/base-octocat.svg' | relative_url }}" alt="The Octocat" />
                </div>
            </div>

            <div class="text-center mt-5 mt-md-6">
                <svg id="draw-svg" viewBox="0 0 50 50">
                    <g id="draw-svg-arrow">
                        <g>
                            <circle  fill="#24292E" cx="24" cy="26" r="24"/>
                            <g class="draw-arrow-top">
                                <circle fill="#444A50" cx="26" cy="24" r="24" />
                                <path  fill="#FFFFFF" class="st2" d="M26.1,28.3l-6.9-6.9C19.1,21.3,19,21.1,19,21s0-0.3,0.1-0.4l0.9-0.9c0.1-0.1,0.3-0.1,0.4-0.1
                            		s0.3,0,0.4,0.1l5.6,5.6l5.6-5.6c0.1-0.1,0.2-0.1,0.4-0.1s0.3,0,0.4,0.1l0.9,0.9c0.1,0.1,0.1,0.3,0.1,0.4s0,0.3-0.1,0.4l-6.9,6.9
                            		c-0.1,0.1-0.3,0.1-0.4,0.1S26.2,28.4,26.1,28.3L26.1,28.3z"/>
                            </g>
                        </g>
                    </g>
                </svg>
            </div>
        </div>
    </section>

    <div class="pt-0 pt-md-6"></div>
    <section class="pt-6 pt-md-4 pb-8 text-center" id="how-it-works">

        <header class="wrapper mb-5 mb-md-7" data-animate-in="up" data-animate-in-delay="0.4">
            <h2 class="mb-3">How it works</h2>
            <div class="col-12 col-sm-10 col-lg-7 mx-auto">
                <p>We’ve got viking vibes, ballerina skirts, wizard hats, lots of neon, and more. Mix and match to your octoheart’s content.</p>
            </div>
        </header>

        <div class="wrapper-scroll-sm-wrap">

            <div class="wrapper-scroll-sm" id="js-draggable-home">
                <div class="col-4 mb-4 mb-sm-0 pl-sm-2 pr-sm-2 pl-md-3 pr-md-3" data-animate-in="fade" data-animate-in-delay="0.4">
                    <p class="h4">Step 1</p>
                    <h3 class="h3 mb-3 mb-md-5">Design your octocat</h3>
                    <img src="{{ '/assets/images/octocat-outfit.png' | relative_url }}" alt="Octocat Outfit" />
                </div>
                <div class="col-4 mb-4 mb-sm-0 pl-sm-2 pr-sm-2 pl-md-3 pr-md-3" data-animate-in="fade" data-animate-in-delay="0.5">
                    <p class="h4">Step 2</p>
                    <h3 class="h3 mb-3 mb-md-5">Style and accessorize</h3>
                    <img src="{{ '/assets/images/octocat-accessories.png' | relative_url }}" alt="Octocat accessories" />
                </div>
                <div class="col-4 mb-4 mb-sm-0 pl-sm-2 pr-sm-2 pl-md-3 pr-md-3" data-animate-in="fade" data-animate-in-delay="0.6">
                    <p class="h4">Step 3</p>
                    <h3 class="h3 mb-3 mb-md-5">Save and share</h3>
                    <img src="{{ '/assets/images/octocat-share.png' | relative_url }}" alt="share your octocat" />
                </div>
            </div>

            <div class="wrapper-scroll--scroll-right" id="scroll-wrap-right">
                <div class="ui-icon">
                    <img src="/assets/images/svgs/arrow-right.svg" alt="" />
                </div>
            </div>
            <div class="wrapper-scroll--scroll-left disabled" id="scroll-wrap-left">
                <div class="ui-icon">
                    <img src="/assets/images/svgs/arrow-left.svg" alt="" />
                </div>
            </div>
        </div>

    </section>


    <aside class="pb-8 text-center" data-animate-in="up" data-animate-in-delay="0.6">
        <p class=" mb-4">Take your new tentacles for a spin.</p>
        <div class="pb-2">
            <a class="btn" href="{{ '/build-your-octocat/' | relative_url }}">Get started</a>
        </div>
    </aside>