404

<div class="page-wrapper">

    <header class="header ">
        <div class="container">
            <div class="header__wrapper">
                <a class="logo header__logo" href="/components/preview/home" aria-label="Homepage">
                    <img class="logo__image " src="/images/logo/logo.svg" alt="Solarwood Logo">
                </a>

                <div class="header__buttons">
                    <div class="header__switchers">
                        <div id="dropdown-default" class="dropdown-list dropdown-list--detailed-content">
                            <ul class="dropdown-list__list">
                                <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                    <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-detailed-content">
                                        dropdown title

                                        <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                            <title>Arrow Down</title>
                                            <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                        </svg>

                                    </a>

                                    <div id="dropdown-detailed-content" class="dropdown-list__content " aria-hidden="true">
                                        <ul class="list ">
                                            <li class="list__item ">
                                                Lorem ipsum

                                            </li>
                                            <li class="list__item ">
                                                Lorem ipsum

                                            </li>
                                            <li class="list__item ">
                                                Lorem ipsum

                                            </li>
                                            <li class="list__item ">
                                                Lorem ipsum

                                            </li>
                                            <li class="list__item ">
                                                Lorem ipsum

                                            </li>
                                        </ul>

                                    </div>
                                </li>
                            </ul>
                        </div>

                        <script type="text/javascript">
                            new DropdownList(document.getElementById('dropdown-default'));
                        </script>

                    </div>
                    <div class="side-menu ">
                        <button class="button button--icon modal-trigger button--rotate-icon side-menu__trigger" type="button" data-modal-trigger="side-menu" aria-label="Open menu">
                            <svg class="icon side-menu__trigger-icon" role="presentation" focusable="false">
                                <title>Mobile-menu</title>
                                <use xlink:href="/images/icons-sprite.svg#mobile-menu"></use>
                            </svg>

                        </button>

                        <div role="dialog" aria-hidden="true" id="side-menu" data-modal="side-menu" class="modal modal--tertiary side-menu__modal">
                            <div role="document" class="modal__container side-menu__container" tabindex="0">
                                <div class="modal__content side-menu__content">

                                    <div class="modal__middle side-menu__content-middle">

                                        <div id="dropdown-default" class="dropdown-list dropdown-list--with-nested">
                                            <ul class="dropdown-list__list">
                                                <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                    <button class="dropdown-list__label " aria-expanded="false" aria-controls="dropdown-1">
                                                        dropdown title

                                                        <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                            <title>Arrow Down</title>
                                                            <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                                        </svg>

                                                    </button>

                                                    <div id="dropdown-1" class="dropdown-list__content " aria-hidden="true">
                                                        <div id="" class="dropdown-list dropdown-list--inner">
                                                            <ul class="dropdown-list__list">
                                                                <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                                    <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-1-1">
                                                                        Item name

                                                                        <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                                            <title>Arrow Down</title>
                                                                            <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                                                        </svg>

                                                                    </a>

                                                                    <div id="dropdown-1-1" class="dropdown-list__content " aria-hidden="true">
                                                                        <div id="" class="dropdown-list dropdown-list--inner">
                                                                            <ul class="dropdown-list__list">
                                                                                <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                                                    <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-1-2">
                                                                                        sublist item name

                                                                                        <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                                                            <title>Arrow Down</title>
                                                                                            <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                                                                        </svg>

                                                                                    </a>

                                                                                    <div id="dropdown-1-2" class="dropdown-list__content " aria-hidden="true">
                                                                                        <div id="" class="dropdown-list dropdown-list--inner">
                                                                                            <ul class="dropdown-list__list">
                                                                                                <li class="
                    dropdown-list__item
                ">
                                                                                                    <a class="dropdown-list__label " href="#">
                                                                                                        sub sublist item name

                                                                                                    </a>

                                                                                                </li>
                                                                                                <li class="
                    dropdown-list__item
                ">
                                                                                                    <a class="dropdown-list__label " href="#">
                                                                                                        sub sublist item name

                                                                                                    </a>

                                                                                                </li>
                                                                                            </ul>
                                                                                        </div>

                                                                                    </div>
                                                                                </li>
                                                                                <li class="
                    dropdown-list__item
                ">
                                                                                    <a class="dropdown-list__label " href="#">
                                                                                        sublist item name

                                                                                    </a>

                                                                                </li>
                                                                                <li class="
                    dropdown-list__item
                ">
                                                                                    <a class="dropdown-list__label " href="#">
                                                                                        sublist item name

                                                                                    </a>

                                                                                </li>
                                                                            </ul>
                                                                        </div>

                                                                    </div>
                                                                </li>
                                                                <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                                    <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-2-2">
                                                                        Item name

                                                                        <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                                            <title>Arrow Down</title>
                                                                            <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                                                        </svg>

                                                                    </a>

                                                                    <div id="dropdown-2-2" class="dropdown-list__content " aria-hidden="true">
                                                                        <div id="" class="dropdown-list dropdown-list--inner">
                                                                            <ul class="dropdown-list__list">
                                                                                <li class="
                    dropdown-list__item
                ">
                                                                                    <a class="dropdown-list__label " href="#">
                                                                                        sublist item name

                                                                                    </a>

                                                                                </li>
                                                                                <li class="
                    dropdown-list__item
                ">
                                                                                    <a class="dropdown-list__label " href="#">
                                                                                        sublist item name

                                                                                    </a>

                                                                                </li>
                                                                                <li class="
                    dropdown-list__item
                ">
                                                                                    <a class="dropdown-list__label " href="#">
                                                                                        sublist item name

                                                                                    </a>

                                                                                </li>
                                                                            </ul>
                                                                        </div>

                                                                    </div>
                                                                </li>
                                                                <li class="
                    dropdown-list__item
                ">
                                                                    <a class="dropdown-list__label " href="#">
                                                                        Item name

                                                                    </a>

                                                                </li>
                                                                <li class="
                    dropdown-list__item
                ">
                                                                    <a class="dropdown-list__label " href="#">
                                                                        Item name

                                                                    </a>

                                                                </li>
                                                            </ul>
                                                        </div>

                                                    </div>
                                                </li>
                                                <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                    <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-2">
                                                        dropdown title

                                                        <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                            <title>Arrow Down</title>
                                                            <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                                        </svg>

                                                    </a>

                                                    <div id="dropdown-2" class="dropdown-list__content " aria-hidden="true">
                                                        <div id="" class="dropdown-list dropdown-list--inner">
                                                            <ul class="dropdown-list__list">
                                                                <li class="
                    dropdown-list__item
                ">
                                                                    <a class="dropdown-list__label " href="#">
                                                                        Item name

                                                                    </a>

                                                                </li>
                                                                <li class="
                    dropdown-list__item
                ">
                                                                    <a class="dropdown-list__label " href="#">
                                                                        Item name

                                                                    </a>

                                                                </li>
                                                            </ul>
                                                        </div>

                                                    </div>
                                                </li>
                                                <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                    <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3">
                                                        dropdown title

                                                        <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                            <title>Arrow Down</title>
                                                            <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                                        </svg>

                                                    </a>

                                                    <div id="dropdown-3" class="dropdown-list__content " aria-hidden="true">
                                                        <div id="" class="dropdown-list dropdown-list--inner">
                                                            <ul class="dropdown-list__list">
                                                                <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                                    <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3-1">
                                                                        Item name

                                                                        <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                                            <title>Arrow Down</title>
                                                                            <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                                                        </svg>

                                                                    </a>

                                                                    <div id="dropdown-3-1" class="dropdown-list__content " aria-hidden="true">
                                                                        <div id="" class="dropdown-list dropdown-list--inner">
                                                                            <ul class="dropdown-list__list">
                                                                                <li class="
                    dropdown-list__item
                ">
                                                                                    <a class="dropdown-list__label " href="#">
                                                                                        sublist item name

                                                                                    </a>

                                                                                </li>
                                                                                <li class="
                    dropdown-list__item
                ">
                                                                                    <a class="dropdown-list__label " href="#">
                                                                                        sublist item name

                                                                                    </a>

                                                                                </li>
                                                                            </ul>
                                                                        </div>

                                                                    </div>
                                                                </li>
                                                                <li class="
                    dropdown-list__item
                ">
                                                                    <a class="dropdown-list__label " href="#">
                                                                        Item name

                                                                    </a>

                                                                </li>
                                                                <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                                    <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3-2">
                                                                        Item name

                                                                        <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                                            <title>Arrow Down</title>
                                                                            <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                                                        </svg>

                                                                    </a>

                                                                    <div id="dropdown-3-2" class="dropdown-list__content " aria-hidden="true">
                                                                        <div id="" class="dropdown-list dropdown-list--inner">
                                                                            <ul class="dropdown-list__list">
                                                                                <li class="
                    dropdown-list__item
                ">
                                                                                    <a class="dropdown-list__label " href="#">
                                                                                        sublist item name

                                                                                    </a>

                                                                                </li>
                                                                                <li class="
                    dropdown-list__item
                ">
                                                                                    <a class="dropdown-list__label " href="#">
                                                                                        sublist item name

                                                                                    </a>

                                                                                </li>
                                                                                <li class="
                    dropdown-list__item
                ">
                                                                                    <a class="dropdown-list__label " href="#">
                                                                                        sublist item name

                                                                                    </a>

                                                                                </li>
                                                                                <li class="
                    dropdown-list__item
                ">
                                                                                    <a class="dropdown-list__label " href="#">
                                                                                        sublist item name

                                                                                    </a>

                                                                                </li>
                                                                                <li class="
                    dropdown-list__item
                ">
                                                                                    <a class="dropdown-list__label " href="#">
                                                                                        sublist item name

                                                                                    </a>

                                                                                </li>
                                                                                <li class="
                    dropdown-list__item
                ">
                                                                                    <a class="dropdown-list__label " href="#">
                                                                                        sublist item name

                                                                                    </a>

                                                                                </li>
                                                                            </ul>
                                                                        </div>

                                                                    </div>
                                                                </li>
                                                                <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                                    <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3-3">
                                                                        Item name

                                                                        <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                                            <title>Arrow Down</title>
                                                                            <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                                                        </svg>

                                                                    </a>

                                                                    <div id="dropdown-3-3" class="dropdown-list__content " aria-hidden="true">
                                                                        <div id="" class="dropdown-list dropdown-list--inner">
                                                                            <ul class="dropdown-list__list">
                                                                                <li class="
                    dropdown-list__item
                ">
                                                                                    <a class="dropdown-list__label " href="#">
                                                                                        sublist item name

                                                                                    </a>

                                                                                </li>
                                                                            </ul>
                                                                        </div>

                                                                    </div>
                                                                </li>
                                                                <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                                    <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3-4">
                                                                        item name

                                                                        <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                                            <title>Arrow Down</title>
                                                                            <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                                                        </svg>

                                                                    </a>

                                                                    <div id="dropdown-3-4" class="dropdown-list__content " aria-hidden="true">
                                                                        <div id="" class="dropdown-list dropdown-list--inner">
                                                                            <ul class="dropdown-list__list">
                                                                                <li class="
                    dropdown-list__item
                ">
                                                                                    <a class="dropdown-list__label " href="#">
                                                                                        sublist item name

                                                                                    </a>

                                                                                </li>
                                                                            </ul>
                                                                        </div>

                                                                    </div>
                                                                </li>
                                                            </ul>
                                                        </div>

                                                    </div>
                                                </li>
                                            </ul>
                                        </div>

                                        <script type="text/javascript">
                                            new DropdownList(document.getElementById('dropdown-default'));
                                        </script>

                                    </div>

                                    <div class="modal__bottom side-menu__content-bottom">
                                        <div class="modal__bottom-actions side-menu__bottom-actions">
                                            <div class="
                                    modal__bottom-action
                                    side-menu__bottom-action
                                ">
                                                <div class="contact-bar contact-bar--vertical">
                                                    <div class="contact-bar__container ">
                                                        <ul class="list contact-bar__list contact-bar__list--icons">
                                                            <li class="list-item contact-bar__item">
                                                                <a href="#" class="
                            contact-bar__link
                            
                        ">
                                                                    <span class="
                            icon
                            contact-bar__icon
                        " aria-label="">
                                                                        <svg class="icon " role="img">
                                                                            <use xlink:href="/images/icons-sprite.svg#undefined"></use>
                                                                        </svg>

                                                                    </span>
                                                                    <span class="
                                button__text
                                contact-bar__text
                            ">
                                                                        Account
                                                                    </span>
                                                                </a>
                                                            </li>
                                                            <li class="list-item contact-bar__item">
                                                                <a href="#" class="
                            contact-bar__link
                            
                        ">
                                                                    <span class="
                            icon
                            contact-bar__icon
                        " aria-label="">
                                                                        <svg class="icon " role="img">
                                                                            <use xlink:href="/images/icons-sprite.svg#undefined"></use>
                                                                        </svg>

                                                                    </span>
                                                                    <span class="
                                button__text
                                contact-bar__text
                            ">
                                                                        Klantenservice
                                                                    </span>
                                                                </a>
                                                            </li>
                                                            <li class="list-item contact-bar__item">
                                                                <a href="#" class="
                            contact-bar__link
                            
                        ">
                                                                    <span class="
                            icon
                            contact-bar__icon
                        " aria-label="">
                                                                        <svg class="icon " role="img">
                                                                            <use xlink:href="/images/icons-sprite.svg#undefined"></use>
                                                                        </svg>

                                                                    </span>
                                                                    <span class="
                                button__text
                                contact-bar__text
                            ">
                                                                        Groothandel
                                                                    </span>
                                                                </a>
                                                            </li>
                                                        </ul>
                                                        <ul class="list contact-bar__list contact-bar__list--icons">
                                                            <li class="list-item contact-bar__item">
                                                                <a href="tel:+31858772604" class="
                        contact-bar__link
                        
                    ">
                                                                    <span class="
                            icon
                            contact-bar__icon
                        " aria-label="">
                                                                        <svg class="icon " role="img">
                                                                            <title>Phone</title>
                                                                            <use xlink:href="/images/icons-sprite.svg#phone"></use>
                                                                        </svg>

                                                                    </span>
                                                                    <span class="
                            button__text
                            contact-bar__text
                        ">
                                                                        T: 085 - 877 26 04
                                                                    </span>
                                                                </a>
                                                            </li>
                                                            <li class="contact-bar__item">
                                                                <a href="mailto:info@solarwood.nl" class="
                        contact-bar__link
                        
                    ">
                                                                    <span class="
                            icon
                            contact-bar__icon
                        " aria-label="">
                                                                        <svg class="icon " role="img">
                                                                            <title>Email</title>
                                                                            <use xlink:href="/images/icons-sprite.svg#envelope"></use>
                                                                        </svg>

                                                                    </span>
                                                                    <span class="
                            button__text
                            contact-bar__text
                        ">
                                                                        E-mail
                                                                    </span>
                                                                </a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>

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

                                <button class="button button--icon button--rotate-icon modal__close-button side-menu__close-button" type="button" aria-label="click to close the modal">
                                    <svg class="icon button__icon modal__close-button-icon" role="presentation" focusable="false">
                                        <title>Close</title>
                                        <use xlink:href="/images/icons-sprite.svg#close"></use>
                                    </svg>

                                </button>

                            </div>
                        </div>
                        <script type="text/javascript">
                            new Modal(document.querySelector('[data-modal-trigger="side-menu"]'));
                        </script>

                    </div>

                    <svg class="icon octagon" role="presentation" focusable="false">
                        <title>octagon</title>
                        <use xlink:href="/images/icons-sprite.svg#octagon"></use>
                    </svg>

                </div>

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

    <main id="maincontent" class="container">
        <div class="not-found text-center">
            <h1 class="heading not-found__heading">
                <span class="not-found__heading-number">
                    404
                </span>
                Whoops, our bad...
            </h1>

            <section class="not-found__actions row">
                <div class="
                        col-xs-12
                        col-md-6
                        end-md
                    ">
                    <a class="button button--secondary not-found__link" href="#" title="Store Home">
                        Store Home
                    </a>

                </div>
                <div class="
                        col-xs-12
                        col-md-6
                        start-md
                    ">
                    <a class="button not-found__link" href="#" title="My account">
                        My account
                    </a>

                </div>
            </section>

            <section class="not-found__text">
                <p>The page you requested was not found, and we have a fine guess why.<br>If you typed the URL directly, please make sure the spelling is correct.<br>If you clicked on a link to get here, the link is outdated.</p>
                <p>What can you do?<br>Have no fear, help is near! There are many ways you can get back on track with Magento Store.</p>
                <p>Go back to the previous page.<br>Use the search bar at the top of the page to search for your products.<br>Follow these links to get you back on track!</p>
            </section>
        </div>
    </main>
</div>
<footer>
    <div class="footer-top margin-top-xl">
        <div class="newsletter__footer ">

            <div class="newsletter__content">
                <div class="newsletter__footer--heading ">
                    <h2 class="newsletter__footer--title">
                        Wil je 10% korting op je volgende bestelling?
                    </h2>
                    <p class="newsletter__footer--subtitle">
                        Meld je nu aan voor de nieuwsbrief van solarwood en ontvang 10% korting op je volgende aankoop.
                    </p>
                </div>
                <form class="newsletter__form newsletter__footer--form">
                    <div class="newsletter__footer--fields">
                        <div class="control">
                            <label for="newsletter">
                                <span class="label">Abonneer u op onze nieuwsbrief</span>
                                <div class="input newsletter__input">
                                    <label class="
            label
            input__label
                label--hidden
            newsletter__label
        " for="newsletterEmail">
                                        Email for newsletter subscription
                                    </label>
                                    <input class="input__field newsletter__field" id="newsletterEmail" name="newsletterEamil" type="" placeholder="Enter your email">
                                </div>

                            </label>
                            <div class="newsletter__footer--agreements">
                                <div class="checkbox newsletter__footer--checkbox">
                                    <input type="checkbox" id="newsletter" name="" class="checkbox__field ">
                                    <svg class="
            checkbox__icon
            checkbox__icon--checked
            
        " role="presentation">
                                        <use xlink:href="/images/icons-sprite.svg#checked"></use>
                                    </svg>
                                    <svg class="
            checkbox__icon
            checkbox__icon--unchecked
            
        " role="presentation">
                                        <use xlink:href="/images/icons-sprite.svg#unchecked"></use>
                                    </svg>
                                    <label for="newsletter" class="checkbox__label ">
                                        <span class="checkbox__text">
                                            <a href="#" title="Privacy Policy">Privacy Policy</a>
                                        </span>
                                    </label>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="newsletter__footer--button">
                        <button class="button button--secondary newsletter__button">
                            Sign Up
                        </button>

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

        </div>

    </div>

    <div class="footer-center">

        <div class="contact-bar__footer container">
            <div class="row">

                <div class="col-sm-3 flex--row">
                    <div class="contact-bar__footer--icon"><svg class="icon " role="img">
                            <use xlink:href="/images/icons-sprite.svg#phone"></use>
                        </svg>
                    </div>
                    <div class="contact-bar__footer--content flex--column">
                        <span class="contact-bar__footer--title">Bel gratis 0348 - 437811</span>
                        <span class="contact-bar__footer--description">Op werkdagen van 9:00 - 17:00 uur</span>
                    </div>
                </div>
                <div class="col-sm-3 flex--row">
                    <div class="contact-bar__footer--icon"><svg class="icon " role="img">
                            <use xlink:href="/images/icons-sprite.svg#envelope"></use>
                        </svg>
                    </div>
                    <div class="contact-bar__footer--content flex--column">
                        <span class="contact-bar__footer--title">Stuur een mail</span>
                        <span class="contact-bar__footer--description">Antwoord binnen 24 uur</span>
                    </div>
                </div>
                <div class="col-sm-3 flex--row">
                    <div class="contact-bar__footer--icon"><svg class="icon " role="img">
                            <use xlink:href="/images/icons-sprite.svg#facebook-logo"></use>
                        </svg>
                    </div>
                    <div class="contact-bar__footer--content flex--column">
                        <span class="contact-bar__footer--title">Via Facebook</span>
                        <span class="contact-bar__footer--description">Antwoord binnen 24 uur</span>
                    </div>
                </div>
                <div class="col-sm-3 flex--row">
                    <div class="contact-bar__footer--icon"><svg class="icon " role="img">
                            <use xlink:href="/images/icons-sprite.svg#chat"></use>
                        </svg>
                    </div>
                    <div class="contact-bar__footer--content flex--column">
                        <span class="contact-bar__footer--title">Via de Chat</span>
                        <span class="contact-bar__footer--description">Op werkdagen van 9:00 - 17:00 uur</span>
                    </div>
                </div>

            </div>
        </div>

    </div>
    <div class="footer margin-top-xl">
        <div class="footer__handler container">
            <button class="button button--icon footer__scroll-top" type="button" aria-label="scroll to top">
                <svg class="icon " role="presentation" focusable="false">
                    <title>Scroll to top</title>
                    <use xlink:href="/images/icons-sprite.svg#arrow-up"></use>
                </svg>

            </button>

            <section class="footer__links">
                <div id="dropdown-footer" class="dropdown-list dropdown-list--with-breakpoint">
                    <ul class="dropdown-list__list">
                        <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                            <button class="dropdown-list__label " aria-expanded="false" aria-controls="dropdown-customers" aria-controls="dropdown-customers">
                                Customers

                                <svg class="icon dropdown-list__icon dropdown-list__icon--inner" role="presentation" focusable="false">
                                    <title>Arrow down</title>
                                    <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                </svg>

                            </button>

                            <div id="dropdown-customers" class="dropdown-list__content " aria-hidden="true">
                                <ul class="
        list
        list__columns
        footer__links-list
    ">
                                    <li class="
                list__item
                list__column
                list__column--hidden
            ">
                                        <a href="" class="
                    link
                    
                ">
                                            Column 1
                                        </a>
                                        <ul class="list">
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Sign in">
                                                    Login to My Account
                                                </a>
                                            </li>
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Sign up">
                                                    Create an Account
                                                </a>
                                            </li>
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="My Orders">
                                                    My Orders
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="
                list__item
                list__column
                list__column--hidden
            ">
                                        <a href="" class="
                    link
                    
                ">
                                            Column 2
                                        </a>
                                        <ul class="list">
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="My Cart">
                                                    My Cart
                                                </a>
                                            </li>
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Checkout">
                                                    Checkout
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>

                            </div>
                        </li>
                        <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                            <button class="dropdown-list__label " aria-expanded="false" aria-controls="dropdown-information" aria-controls="dropdown-information">
                                Information

                                <svg class="icon dropdown-list__icon dropdown-list__icon--inner" role="img">
                                    <title>Arrow down</title>
                                    <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                </svg>

                            </button>

                            <div id="dropdown-information" class="dropdown-list__content " aria-hidden="true">
                                <ul class="
        list
        list__columns
        footer__links-list
    ">
                                    <li class="
                list__item
                list__column
                list__column--hidden
            ">
                                        <a href="" class="
                    link
                    
                ">
                                            Column 1
                                        </a>
                                        <ul class="list">
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Hours">
                                                    Hours
                                                </a>
                                            </li>
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="About Us">
                                                    About Us
                                                </a>
                                            </li>
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Contact Us">
                                                    Contact Us
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="
                list__item
                list__column
                list__column--hidden
            ">
                                        <a href="" class="
                    link
                    
                ">
                                            Column 2
                                        </a>
                                        <ul class="list">
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Job Openings">
                                                    Job Openings
                                                </a>
                                            </li>
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Returns">
                                                    Returns
                                                </a>
                                            </li>
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Shipping">
                                                    Shipping
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="
                list__item
                list__column
                list__column--hidden
            ">
                                        <a href="" class="
                    link
                    
                ">
                                            Column 3
                                        </a>
                                        <ul class="list">
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Privacy Policy">
                                                    Privacy Policy
                                                </a>
                                            </li>
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Terms & Conditions">
                                                    Terms &amp; Conditions
                                                </a>
                                            </li>
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Site Map">
                                                    Site Map
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="
                list__item
                list__column
                list__column--hidden
            ">
                                        <a href="" class="
                    link
                    
                ">
                                            Column 4
                                        </a>
                                        <ul class="list">
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Reviews">
                                                    Reviews
                                                </a>
                                            </li>
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Email Us!">
                                                    Email Us!
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>

                            </div>
                        </li>
                    </ul>
                </div>

                <script type="text/javascript">
                    new DropdownList(document.getElementById('dropdown-footer'));
                </script>

            </section>

            <div class="footer__social-handler ">
                <h3 class="footer__social-list-title">
                    Let&#x27;s get social!
                </h3>

                <ul class="list list--with-icon list--horizontal footer__social-list">
                    <li class="list__item ">
                        <a href="#" class="list__icon-link button button--icon button--icon-border" aria-label="Go to Our Facebook Page">
                            <svg class="icon footer__social-icon" role="img">
                                <title>Facebook logo</title>
                                <use xlink:href="/images/icons-sprite.svg#facebook"></use>
                            </svg>

                        </a>
                    </li>
                    <li class="list__item ">
                        <a href="#" class="list__icon-link button button--icon button--icon-border" aria-label="Check Our on Twitter">
                            <svg class="icon footer__social-icon" role="img">
                                <title>Twitter logo</title>
                                <use xlink:href="/images/icons-sprite.svg#twitter"></use>
                            </svg>

                        </a>
                    </li>
                </ul>

            </div>
            <div class="footer__payments">
                <ul class="footer__payments-list list list--horizontal ">
                    <li class="list__item">
                        <svg class="icon footer__payments-list-icon" role="img">
                            <title>AfterPay</title>
                            <use xlink:href="/images/icons-sprite.svg#afterpay"></use>
                        </svg>

                    </li>
                    <li class="list__item">
                        <svg class="icon footer__payments-list-icon" role="img">
                            <title>iDEAL</title>
                            <use xlink:href="/images/icons-sprite.svg#ideal"></use>
                        </svg>

                    </li>
                    <li class="list__item">
                        <svg class="icon footer__payments-list-icon footer__payments-list-icon--paypal" role="img">
                            <title>PayPal</title>
                            <use xlink:href="/images/icons-sprite.svg#paypal"></use>
                        </svg>

                    </li>
                    <li class="list__item">
                        <svg class="icon footer__payments-list-icon" role="img">
                            <title>American Express</title>
                            <use xlink:href="/images/icons-sprite.svg#american-express"></use>
                        </svg>

                    </li>
                    <li class="list__item">
                        <svg class="icon footer__payments-list-icon footer__payments-list-icon--visa" role="img">
                            <title>Visa</title>
                            <use xlink:href="/images/icons-sprite.svg#visa"></use>
                        </svg>

                    </li>
                </ul>
            </div>
        </div>

        <section class="footer__bottom-bar ">
            <div class="footer__bottom-bar-handler container">
                <div class="footer__copyright">
                    <small>
                        Copyright © 2019 Alpaca
                    </small>
                </div>

                <div class="footer__switchers">
                    <div id="language-dropdown" class="dropdown-list dropdown-list--detailed-content footer__dropdown-switcher">
                        <ul class="dropdown-list__list">
                            <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-detailed-content1">
                                    German

                                    <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                        <title>Arrow Down</title>
                                        <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                    </svg>

                                </a>

                                <div id="dropdown-detailed-content1" class="dropdown-list__content " aria-hidden="true">
                                    <ul class="list ">
                                        <li class="list__item ">
                                            Lorem ipsum

                                        </li>
                                        <li class="list__item ">
                                            Lorem ipsum

                                        </li>
                                        <li class="list__item ">
                                            Lorem ipsum

                                        </li>
                                        <li class="list__item ">
                                            Lorem ipsum

                                        </li>
                                        <li class="list__item ">
                                            Lorem ipsum

                                        </li>
                                    </ul>

                                </div>
                            </li>
                        </ul>
                    </div>

                    <script type="text/javascript">
                        new DropdownList(document.getElementById('language-dropdown'));
                    </script>

                    <div id="currency-dropdown" class="dropdown-list dropdown-list--detailed-content footer__dropdown-switcher margin-right-xs">
                        <ul class="dropdown-list__list">
                            <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-detailed-content2">
                                    USD - US Dollar

                                    <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                        <title>Arrow Down</title>
                                        <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                    </svg>

                                </a>

                                <div id="dropdown-detailed-content2" class="dropdown-list__content " aria-hidden="true">
                                    <ul class="list ">
                                        <li class="list__item ">
                                            Lorem ipsum

                                        </li>
                                        <li class="list__item ">
                                            Lorem ipsum

                                        </li>
                                        <li class="list__item ">
                                            Lorem ipsum

                                        </li>
                                        <li class="list__item ">
                                            Lorem ipsum

                                        </li>
                                        <li class="list__item ">
                                            Lorem ipsum

                                        </li>
                                    </ul>

                                </div>
                            </li>
                        </ul>
                    </div>

                    <script type="text/javascript">
                        new DropdownList(document.getElementById('currency-dropdown'));
                    </script>

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

        <div class="cookie-message cookie-message" data-type="cookie" tabindex="0" aria-label="Cookie policy message">
            <div class="cookie-message__container">
                <p class="cookie-message__text">
                    <a href="#" class="link--invert">Example link</a> Find out more about their purpose and settings in your browser. By browsing the site you are agreeing to use cookies according to your browser settings.
                </p>

                <button class="
                button
                button--icon
                cookie-message__close
                cookie-message__button
                button--rotate-icon
            " type="button" aria-label="Close cookie message">
                    <svg class="icon button__icon cookie-message__button-icon" role="presentation" focusable="false">
                        <title>Close</title>
                        <use xlink:href="/images/icons-sprite.svg#close"></use>
                    </svg>

                </button>
            </div>
        </div>
        <script src="/components/raw/cookie-message/cookie-message.js"></script>

    </div>
</footer>

<script src="/components/raw/footer/footer.js"></script>
<div class="page-wrapper">
    {{ render '@header' }}
    <main id="maincontent" class="container">
        <div class="not-found text-center">
            <h1 class="heading not-found__heading">
                <span class="not-found__heading-number">
                    {{ error }}
                </span>
                {{ heading }}
            </h1>

            <section class="not-found__actions row">
                <div
                    class="
                        col-xs-12
                        col-md-6
                        end-md
                    "
                >
                    {{ render '@button--link' homeLink merge=true }}
                </div>
                <div
                    class="
                        col-xs-12
                        col-md-6
                        start-md
                    "
                >
                    {{ render '@button--link' accountLink merge=true }}
                </div>
            </section>

            <section class="not-found__text">
                {{{ text }}}
            </section>
        </div>
    </main>
</div>
{{ render '@footer' }}
{
  "error": "404",
  "heading": "Whoops, our bad...",
  "homeLink": {
    "class": "button--secondary not-found__link",
    "attributes": "href=\"#\" title=\"Store Home\"",
    "text": "Store Home"
  },
  "accountLink": {
    "class": "not-found__link",
    "attributes": "href=\"#\" title=\"My account\"",
    "text": "My account"
  },
  "text": "<p>The page you requested was not found, and we have a fine guess why.<br>If you typed the URL directly, please make sure the spelling is correct.<br>If you clicked on a link to get here, the link is outdated.</p><p>What can you do?<br>Have no fear, help is near! There are many ways you can get back on track with Magento Store.</p><p>Go back to the previous page.<br>Use the search bar at the top of the page to search for your products.<br>Follow these links to get you back on track!</p>"
}
  • Content:
    $not-found__padding                      : 100px 0 0 !default;
    $not-found__margin                       : 0 auto !default;
    $not-found__max-width                    : 496px !default;
    $not-found__max-width\@large             : 784px !default;
    
    //heading
    $not-found__heading-font-weight          : $font-weight-normal !default;
    $not-found__heading-margin               : 0 0 72px !default;
    
    //number
    $not-found__number-letter-spacing        : 3px !default;
    $not-found__number-font-family           : $font-family-secondary !default;
    $not-found__number-font-weight           : $font-weight-base !default;
    $not-found__number-font-size             : 100px !default;
    $not-found__number-line-height           : 104px !default;
    $not-found__number-margin                : 0 0 $spacer--semi-large !default;
    
    $not-found__number-letter-spacing\@medium: 6px !default;
    $not-found__number-font-size\@medium     : 200px !default;
    $not-found__number-line-height\@medium   : 200px !default;
    
    //actions
    $not-found__actions-margin               : 0 0 150px !default;
    $not-found__actions-margin\@large        : 0 0 100px !default;
    
    //link
    $not-found__link-width                   : 100% !default;
    $not-found__link-margin                  : 0 0 $spacer--medium !default;
    $not-found__link-max-width               : 320px !default;
    
    //text
    $not-found__text-color                   : $color-secondary !default;
    $not-found__text-font-size               : $font-size-medium !default;
    $not-found__text-line-height             : 2 !default;
    
  • URL: /components/raw/404/_404-variables.scss
  • Filesystem Path: build/components/Templates/404/_404-variables.scss
  • Size: 1.5 KB
  • Content:
    @import '404-variables';
    
    .not-found {
        padding: $not-found__padding;
        max-width: $not-found__max-width;
        margin: $not-found__margin;
    
        @include mq($screen-l) {
            max-width: $not-found__max-width\@large;
        }
    
        &__heading {
            font-weight: $not-found__heading-font-weight;
            margin: $not-found__heading-margin;
        }
    
        &__heading-number {
            display: block;
            letter-spacing: $not-found__number-letter-spacing;
            font-family: $not-found__number-font-family;
            font-weight: $not-found__number-font-weight;
            font-size: $not-found__number-font-size;
            line-height: $not-found__number-line-height;
            margin: $not-found__number-margin;
    
            @include mq($screen-m) {
                font-size: $not-found__number-font-size\@medium;
                line-height: $not-found__number-line-height\@medium;
                letter-spacing: $not-found__number-letter-spacing\@medium;
            }
        }
    
        &__actions {
            margin: $not-found__actions-margin;
    
            @include mq($screen-l) {
                margin: $not-found__actions-margin\@large;
            }
        }
    
        &__link {
            width: $not-found__link-width;
            margin: $not-found__link-margin;
            max-width: $not-found__link-max-width;
        }
    
        &__text {
            color: $not-found__text-color;
            font-size: $not-found__text-font-size;
            line-height: $not-found__text-line-height;
    
            p {
                @extend .not-found__text;
            }
        }
    }
    
  • URL: /components/raw/404/_404.scss
  • Filesystem Path: build/components/Templates/404/_404.scss
  • Size: 1.5 KB

There are no notes for this item.