@extends('layouts.basePage', [
    'title' => 'SFs Dupe',
    'breadcrumbs' => [
        [
            'title' => 'Home',
            'href' => '/',
        ]
    ]
])

@section('content')

    <header>

        <div class="mobile" style="border-bottom: 1px solid orange;">
            <div style="background: green;">
                <div class="container container--no-gap">
                    <div class="row">
                        <div class="col col-12" style="display: flex; justify-content: space-between; padding: 10px;">
                            <span>Location 1</span>
                            <span>Location 2</span>
                            <span>Location 3</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container container--no-gap">
                <div class="row row--align-center">
                    <div class="col col-2">
                        <a href="/"><img src="@assets('img/discord.png')" style="margin-left: 0;"></a>
                    </div>
                    <div class="col col-2" style="margin-left: auto;">
                        <span class="" onclick="document.getElementById('burger-menu').style.display='block';">Burger</span>
                    </div>
                </div>
            </div>
        </div>


        <!-- apply the padding-top to the header itself -->
        <div class="sf-header">
            <div class="container container--no-gap">
                <div class="row row--align-center">
                    <div class="col col-2">
                        <a href="/" style="display: block;"><img src="@assets('img/discord.png')" style="margin-left: 0; object-fit: contain;
                            height: 50px;
                            width: 100px;"></a>
                    </div>

                    <div class="col col-10" style="display: flex; flex-direction: column;">
                        <div class="row">
                            <div class="col col-12 tar">
                                <span class="locations">
                                    <span style="font-size: 13px; background: lightblue; padding: 5px; border-radius: 16px;"><i style="margin-right: 3px">ico</i><strong style="margin-right: 3px">Location 1</strong><span>Tel 01472222333</span></span>
                                    <span style="font-size: 13px; background: lightblue; padding: 5px; border-radius: 16px;"><i style="margin-right: 3px">ico</i><strong style="margin-right: 3px">Location 1</strong><span>Tel 01472222333</span></span>
                                    <span style="font-size: 13px; background: lightblue; padding: 5px; border-radius: 16px;"><i style="margin-right: 3px">ico</i><strong style="margin-right: 3px">Location 1</strong><span>Tel 01472222333</span></span>
                                </span>

                                <span class="socials">
                                    <a href="#" class="tag tag--social"><span>fb</span></a>
                                    <a href="#" class="tag tag--social"><span>tw</span></a>
                                    <a href="#" class="tag tag--social"><span>lnk</span></a>
                                </span>
                            </div>
                        </div>
                        <div class="row" style="margin-top: auto;">
                            <div class="col col-12">
                                
                                <ul class="nav-list nav-list--inline">
                                    <li class="nav-list__item"><a href="/about">About</a></li>
                                    <li class="nav-list__item nav-list__item--has-dropdown"><a href="/#servers">Servers</a>
                                        <ul class="nav-list__item__dropdown">
                                            <div class="nav-list__item__dropdown__content">
                                                <li class="nav-list__item__dropdown__item"><a href="/#servers">something</a></li>
                                            </div>
                                        </ul>
                                    </li>
                                    <li class="nav-list__item"><a href="/simple">Simple floor</a></li>
                                    <li class="nav-list__item"><a href="/example">Example</a></li>
                                    <li class="nav-list__item"><a href="#faq">FAQs</a></li>
                                </ul>

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

    </header>

    <!-- Burger nav -->
    <div id="burger-menu" class="" style="display: none; position: absolute; height: 100%; left: 0; right: 0; z-index: 10; background-color: #FFFFFFD1; padding: 20px 40px; ">
        <div class="row" style="margin-top: auto;">
            <div class="col col-12">

                <div class="" onclick="document.getElementById('burger-menu').style.display='none';">CLOSE</div>
                
                <ul class="nav-list">
                    <li class="nav-list__item"><a href="/about">About</a></li>
                    <li class="nav-list__item nav-list__item--has-dropdown"><a href="/#servers">Servers</a>
                        <ul class="nav-list__item__dropdown">
                            <div class="nav-list__item__dropdown__content">
                                <li class="nav-list__item__dropdown__item"><a href="/#servers">something</a></li>
                            </div>
                        </ul>
                    </li>
                    <li class="nav-list__item"><a href="/simple">Simple floor</a></li>
                    <li class="nav-list__item"><a href="#faq">FAQs</a></li>
                </ul>

            </div>
        </div>
    </div>
    <!-- END Header -->

    <main>
    <!-- Hero and content -->
    <div style="position: relative;">
        <img class="image--center" src="https://placehold.co/1920x640">
        <div class="container" style="padding-left: 80px; padding-right: 80px; margin-top: -100px; background: #707070; position: relative;">
            <div class="row row--align-center" style="">
                <h2>Our Showrooms</h2>
                <div style="margin-left: auto">
                    More Store information
                    <span style="background: grey; color: #FFF; border-radius: 999px; border: 1px solid #FFF;">-></span>
                </div>
            </div>
            
            <style>
                /* Changing the col padding for this row  */
            .row--our-showrooms{
                margin-left: -60px; margin-right: -60px;
            }
            .row--our-showrooms [class^=col]{
                padding-right: 60px; padding-left: 60px;
            }
            </style>
            <div class="row row--our-showrooms">
                <div class="col col-4" style="display: flex; align-items: center; justify-content: left;">
                    <div style="width: auto;">
                        <p>Showroom Name</p>
                        <div style="font-size: 15px; display: flex; gap: 10px; align-items: first baseline;"><span>icon</span><p>PHONE NUM</p></div>
                        <div style="font-size: 15px; display: flex; gap: 10px; align-items: first baseline;"><span>icon</span><p>reigate@simplefloors.co.uk</p></div>
                    </div>
                </div>
                <div class="col col-4" style="border: solid #FFF; border-width: 0 1px; display: flex; align-items: center; justify-content: center;">
                    <div style="width: auto;">
                        <p>Showroom Name</p>
                        <div style="font-size: 15px; display: flex; gap: 10px; align-items: first baseline;"><span>icon</span><p>PHONE NUM</p></div>
                        <div style="font-size: 15px; display: flex; gap: 10px; align-items: first baseline;"><span>icon</span><p>reigate@simplefloors.co.uk</p></div>
                    </div>
                </div>
                <div class="col col-4" style="display: flex; align-items: center; justify-content: right;">
                    <div style="width: auto;">
                        <p>Showroom Name</p>
                        <div style="font-size: 15px; display: flex; gap: 10px; align-items: first baseline;"><span>icon</span><p>PHONE NUM</p></div>
                        <div style="font-size: 15px; display: flex; gap: 10px; align-items: first baseline;"><span>icon</span><p>reigate@simplefloors.co.uk</p></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- margin-bottom, to match top of image -->
    <div class="container" style="margin-bottom: 40px;">
        <div class="row image-over-block">
            <!-- col 10 = 91% - 50% col 6 = remains 41% -->
            <!-- on container of 1300 (as design) 110 = 8.4% 140 = 10.7%  (110/1300)*100 -->
            <div class="col col-11 image-over-block__block">
                <div class="row">
                    <div class="col col-6">
                        <p>WHERE ELEGANCE MEETS PERFORMANCE</p>
                        <p>Amigo</p>
                        <p>As an Amtico One Premium Retailer, we offer expert guidance and installation. Amtico flooring is a luxurious, durable solution, replicating natural materials like wood and stone with a high-quality finish. Scratch-resistant and low-maintenance, it’s ideal for busy homes and commercial spaces. With unique patterns like herringbone and parquet, Amtico lets you create a stylish, long-lasting floor tailored to your vision.</p>
                        <a class="button" href="#">Amtico Range</a>
                    </div>
                </div>
            </div>
            <!-- col 6 = 50% -->
            <div class="col col-6 image-over-block__image">
                <img style="" src="https://placehold.co/630x630">
            </div>
        </div>
    </div>

    <!-- Meet the Team  -->
    <div class="container">
        <h2>Meet the Team</h2>
        <div class="row">
            @for ($i = 0; $i < 3; $i++)
            <div class="col-xs-12 col-sm-6 col-md-4 team-block">
				<img class="team-block__image" src="https://placehold.co/412x412">
				<p class="team-block__name">Team member name</p>
				<p class="team-block__role">Job role</p>
			</div>
            @endfor
        </div>
    </div>

    <!-- Off page content -->
    <div style="background: lightblue;">
    <div class="container-overflow">
        <div class="container">
            <div class="row nowrap row--align-center">
                <div class="col-xs-12 col-sm-6 col-lg-6" style="padding: 100px">
                    aaa
                </div>

                <div class="col-xs-12 col-sm-6 col-lg-7">
                    <img style="" src="https://placehold.co/630x630">
                </div>
            </div>
        </div>
    </div>
    </div>

    <!-- Showrroms -->
    <div class="container">
        <h2>Our Showrooms</h2>
        <div class="row">
            @for ($i = 0; $i < 3; $i++)
            <div class="col col-xs-12 col-sm-6 col-md-4">
                <div class="store-block">
                    <p class="store-block__title h5">Someplace Store</p>
                    <div class="store-block__block">
                        <i class="fal fa-phone"></i>
                        <p>123 Somewhere Road Someplace, PO5 C0D</p>
                    </div>
                    <div class="store-block__block">
                        <i class="fal fa-phone"></i>
                        <p>000 0000 0000</p>
                    </div>
                    <div class="store-block__block">
                        <i class="fal fa-phone"></i>
                        <p>email@address.co.uk</p>
                    </div>
                    <div class="store-block__block">
                        <i class="fal fa-phone"></i>
                        <div>
                            <p>Opening Hours</p>
                            <div class="store-block__block__times">
                                <div class="row">
                                    <div class="col-xs-12 col-sm-4" style="padding-right: 0">
                                        <p>Mon-Fri</p>
                                    </div>
                                    <div class="col-xs-12 col-sm-8">
                                        <p>9am - 4pm</p>
                                    </div>
                                </div>
                                <div class="row">
                                <div class="col-xs-12 col-sm-4" style="padding-right: 0">
                                        <p>Sat</p>
                                    </div>
                                    <div class="col-xs-12 col-sm-8">
                                        <p>9am - 3pm</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="store-block__map">
                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2369.3678147138744!2d-0.08880754332036069!3d53.56905190129133!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48789cbafda6135f%3A0x29153b25374cd41a!2sGrimsby%20Fishing%20Heritage%20Centre!5e0!3m2!1sen!2suk!4v1748549467003!5m2!1sen!2suk" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>
                </div>
            </div>
            @endfor
        </div>
    </div>

    <!-- Advanced slider -->
<div class="overflow-container">
    <div class="container">
        <div class="row">
            <div class="col col-12">
                <h2>Fancy Range Slider</h2>
                <p>Whether you desire the look of a natural wood, a calming stone, or even something more abstract, Amtico offers a range of designs and patterns across all their collections. With durable wear layers and timeless style your Amtico floor will stand the test of time.</p>
            </div>
        </div>
        
        <div class="row row-for-fancy">
            <div class="col col-xs-12 col-sm-12 col-3">
                <h3>Slider range title</h3>
                <p>With the same benefits of a standard Amtico floor, but the option for more style creativity, we can create an elegant-looking, well-designed floor, with a more modern and contemporary aesthetic choice of patterns and designs.</p>
                <a class="button">Button link</a>
                <div class="slide__dots" style="margin-top: 20px;">
                    <!-- For each slide, one of these needs adding (show like 5 of them, and then have these slide if there's more) -->
                    <span class="slide-dot slide-dot--active"><div class="slide-dot__inner"></div></span>
                    <span class="slide-dot"><div class="slide-dot__inner"></div></span>
                    <span class="slide-dot"><div class="slide-dot__inner"></div></span>
                </div>
            </div>

            <style>
                .fancy-slider__container{
                    flex: 0 0 100%;
                    max-width: 100%;
                    background: lime; overflow:hidden;
                }
                .fancy-slider__container__content-row{
                    
                    width: auto !important; /* Maybe needed as .col div.row to remove the width: 100% that seems to mess up relative pos */
                }
                .fancy-slider__slider-items{
                    flex-wrap: nowrap;
                    margin-left: 25px;
                    transition: 0.6s ease-in-out !important;
                    transform: translate3d(0px, 0px, 0px); /* First one will be changed inline via JS */
                }

                .arrow{
                    background: orange; width: 35px; height: 35px; border-radius:999px;
                    position: absolute; z-index: 8;
                }
                .arrow--left{left: 0; top: 50%;}
                .arrow--right{right: 20px; top: 50%;}
                    
                
                .row-for-fancy{}
                /* Full width on mobile */
                .fancy-slider__container{
                    flex: 0 0 100%;
                    max-width: 100%;
                }

                @media (min-width: 768px){
                    /* On small desktop, fit with the col-3 side-content */
                    .fancy-slider__container{
                        flex: 0 0 75%;
                        max-width: 75%;
                    }
                    .row-for-fancy{ flex-wrap: nowrap;}
                }
                
                /* Anything above the size of the container */
                @media (min-width: 1080px){
                    /* .fancy-slider__container{
                        flex: 0 0 85%;
                        max-width: 85%;
                    } */
                }
                /* XL */
                @media (min-width: 1200px){
                    .fancy-slider__container{
                        flex: 0 0 83.33%; /* col-lg-10 now tbf */
                        max-width: 83.33%;
                    }
                }

                /* Basically they're just col col-6 and col col-5 atm, will need to do mixins for each col I guess for SASS dupes */
                .fancy-slider__slide{
                    /* .col stuff */
                    padding-right: 0.4166666667rem;
                    padding-left: 0.4166666667rem;
                    min-height: 2px;
                    /* .col-5 */
                    flex: 0 0 41.6666666667%;
                    max-width: 41.6666666667%;

                    /* Attempt at slight animation on scale */
                    /* animation-duration: 1s;
                    animation: maxOff 1s ease infinite alternate; */
                    transition: 1.2s ease-in-out !important;
                }
                .fancy-slider__slide--active{
                    /* .col-6 */
                    /* Trying in JS/inline for animation sake */
                    flex: 0 0 50%;
                    max-width: 50%;
                    transition: .6s ease-in-out !important;
                    
                }
            </style>
            <div class="col fancy-slider__container">
                
                <div class="row fancy-slider__container__content-row">

                    <div class="arrow arrow--left"></div>
                    
                    <div class="col col-12 fancy-slider__slider-items row row--align-center">
                        <div class="col fancy-slider__slide fancy-slider__slide--active">
                            <img style="" src="https://placehold.co/630x630">
                        </div>
                        @for ($i = 0; $i < 3; $i++)
                        <div class="col fancy-slider__slide">
                            <img style="" src="https://placehold.co/630x630">
                        </div>
                        @endfor
                    </div>
                    

                    <div class="arrow arrow--right"></div>

                </div>
            </div>
            <script>
                //arrow--left //arrow--right

                // Also set HEIGHT of slider-items to that of slider--active, otherwise it janks

                // Using this as basis here: https://stackoverflow.com/a/73925390
                function slideFunc(){
                    let slider = document.querySelector('.fancy-slider__slider-items');
                    let right = document.querySelector('.arrow--right');
                    let left = document.querySelector('.arrow--left');

                    let index = 0; // Faux 0, as index will be 1,2,3,4 but to start at 1 for calcs, need to be 0
                    let totalSlideCount = document.querySelectorAll('.fancy-slider__slider-items .fancy-slider__slide').length;
                    console.log(totalSlideCount);
                    // slider.style.width = '500px';
                    // slider.style.left = '0px';

                    // TODO: GET HOW EVER MANY ITEMS WILL BE SHOWN ON SCREEN AT ONE TIME. IF NUMBER IS
                    function resizeSliderHeight(){
                        // To prevent over the top node creation, and jank related to nodes
                        // first, make the slider 'complete'

                        // for now dupign the 'active'/1st slide and hiding
                        let slideItem = document.querySelector('.fancy-slider__slide--active');
                        let height = slideItem.offsetHeight;
                        console.log(height);

                        document.querySelector('.fancy-slider__slider-items').style.height = height+'px';
                        
                        // let cloneNode = slideItem.cloneNode(true);
                        // slider.prepend(cloneNode);

                    }
                    resizeSliderHeight();
                    // onResize, or rotate, on x, y, z
                    // also with a wait to not do it every time a drag on window occurs (each frame resize...)

                    // [0][1][2][3] 
                    // [0][1][2][3][0] While sliding to the left (moving to the next on the right)
                    // [1][2][3][0] Then remove the item that was just slided past/duplicated
                    
                    // [0][1][2][3] 
                    // [0][1][2][3] 
                    // [3][0][1][2][3] Slide to the right, creating new element at start for 3 
                    // [3][0][1][2]  Then remove the original 3 keeping the dupe at the start

                    // WHICHEVER ELEMENT IS AT THE START/PUT TO THE START GETS --active, and the other element with it loses it, then
                    // gets deleted. Hopefully this makes a smooth transition on deleting items but, we'll see...

                    // RIGHT FIRST
                    function sliderNext() {
                        // Get the size of a slider-slide (non-active)
                        // First fancy-slider__slide that ISN'T --active (the big one)
                        let slideItem = document.querySelector('.fancy-slider__slide:not(.fancy-slider__slide--active)');
                        let slideScroll = slideItem.offsetWidth; // Offset width is inclusive of any padding, etc. too FYI
                        // slideScroll = 100; // This was the default of the function
                        // setTimeout(() => {
                            // index++;
                            // console.log(index);
                            index = ((index)%totalSlideCount)+1; // if 4 items 4%4 = 0 + 1 = 1, 3%4 = 3 + 1 = 4 0,1,2,3 = 1,2,3,4 index
                            nextIndex = ((index)%totalSlideCount)+1; // as above, but 2
                            
                            


                            let prevActiveSlide = slider.querySelector(`div:nth-child(${index})`);
                            let newActiveSlide = slider.querySelector(`div:nth-child(${index+1})`);
                            console.log(index);
                            console.log(prevActiveSlide);
                            console.log(nextIndex);
                            console.log(newActiveSlide);
                            
                            
                            
                            // console.log(prevActiveSlide);
                            // console.log(newActiveSlide);
                            newActiveSlide.classList.add('fancy-slider__slide--active');
                            // TODO HERE TOO. This will error, the index here will also need to be done % ???
                            // actually this might be fine, and the above need changing. Will see
                            prevActiveSlide.classList.remove('fancy-slider__slide--active');
                            
                            // ADD A 'data-slide-index'
                            // 1 2 3 4
                            // 1 2 3 4 1
                            // let cloneNode = prevActiveSlide.cloneNode(true);
                            // slider.appendChild(cloneNode);
                            // 0 1 2 3 0

                            // NEED TO USE data-slider-id instead of their actual ID location as they will be moved/removed/re-added

                            // clone of 

                            // First slide (atm, the one to be removed)
                            // let evilSlide = slider.querySelector(`div:nth-child(1)`);
                            // console.log(evilSlide);
                            // evilSlide.remove(true);

                            // TODO: Only clone the next one to be shown from hidden left/right. THEN remove the old one
                            // don't do like this and keep cloning, that's pretty bad
                            // let child = slider.querySelector(`.fancy-slider__slide:nth-child(${index})`);

                            // cloneNode returns a duplicate of the node
                            // let cloneNode = newActiveSlide.cloneNode(true); // TODO: Wtf is this
                            // slider.style.width = `${(5 + index) * slideScroll}px`;
                            // slider.appendChild(cloneNode);

                            // For animation, may need to add a 'fixed' height/width to the items shrinking and growing
                            // and have those change up/down in JS slowly?

                        // }, 300);

                        // clone and move the element to bottom
                        // TODO: Change this to be a translate on a 'fixed width' slider

                        // index*slideScroll ?
                        // let currentLeftPosition = slider.style.left ? parseFloat(slider.style.left.replace('px', '')) : 0;
                        let currentLeftPosition = -((index-1)*slideScroll);
                        console.log('currentleft: '+currentLeftPosition);
                        let nextLeftPosition = currentLeftPosition - slideScroll;
                        console.log('nextleft: '+nextLeftPosition);
                        // slider.style.left = `${nextLeftPosition}px`;
                        slider.style.transform = `translate3d(${nextLeftPosition}px, 0px, 0px)`;

                    }
                    right.addEventListener('click', sliderNext);
                }
                slideFunc();
            </script>
        </div>
    </div>
</div>

    <!-- Installations gallery with view/hide -->
    <div class="container">
        <div class="row">
            <div class="col col-12">
                <h2>Fancy gallery</h2>
            </div>
        </div>

        <div class="row gallery-fancy"> <!-- flex -->
            <div class="col col-xs-12 col-sm-6 col-3">
                <img src="https://placehold.co/250x350">
                <img src="https://placehold.co/240x240">
            </div>
            <div class="col col-xs-12 col-sm-6 col-3">
                <img src="https://placehold.co/240x240">
                <img src="https://placehold.co/240x180">
            </div>
            <div class="col col-xs-12 col-sm-6 col-3">
                <img src="https://placehold.co/240x180">
                <img src="https://placehold.co/250x350">
            </div>
            <div class="col col-xs-12 col-sm-6 col-3">
                <img src="https://placehold.co/250x240">
                <img src="https://placehold.co/250x240">
            </div>
        </div>
        <button id="gf-toggle" class="button">View all Images</button>
        <script>
            let toggle = document.getElementById('gf-toggle');
            let gf = document.querySelectorAll('.gallery-fancy');
            toggle.addEventListener("click", function(e) {
                if(gf[0].classList.contains('gallery-fancy--show')){
                    gf[0].classList.remove('gallery-fancy--show');
                    toggle.innerHTML = 'View all Images';
                }else{
                    gf[0].classList.add('gallery-fancy--show');
                    toggle.innerHTML = 'Hide Images';
                }
            });
        </script>
    </div>
    </main>

    <!-- Footer -->
    <footer style="margin-top: auto;">
        <div style="background-color: #F6F6F6; color: #242322">
            <div class="container">
                <div class="row">
                    <div class="col col-xs-12 col-md-2">
                        <a href="/" style="display: block;"><img src="@assets('img/discord.png')" style="margin-left: 0; object-fit: contain; height: 50px; width: 100px;"></a>
                        <a href="/" style="display: block;"><img src="@assets('img/discord.png')" style="margin-left: 0; object-fit: contain; height: 50px; width: 100px;"></a>
                    </div>

                    <div class="col col-xs-12 col-md-6">
                        <div class="row">
                            @for ($i = 0; $i < 3; $i++)
                            <div class="col col-xs-12 col-6">
                                <p style="margin-bottom: 14px; color: black; font-weight: 600; line-height: 20px;">Someplace Store</p>
                                <div style="font-size: 15px; display: flex; gap: 10px; align-items: first baseline;"><span>icon</span><p>123 Somewhere Road Someplace, PO5 C0D</p></div>
                                <div style="font-size: 15px; display: flex; gap: 10px; align-items: first baseline;"><span>icon</span><p>000 0000 0000</p></div>
                                <div style="font-size: 15px; display: flex; gap: 10px; align-items: first baseline;"><span>icon</span><p>email@address.co.uk</p></div>
                            </div>
                            @endfor
                            
                            <div class="col col-xs-12 col-6">
                                <p style="margin-bottom: 14px; color: black; font-weight: 600; line-height: 20px;">Useful Links</p>
                                <div style="font-size: 15px;"><a href="#">Contact</a></div>
                                <div style="font-size: 15px;"><a href="#">About Us</a></div>
                                <div style="font-size: 15px;"><a href="#">Terms &amp; Conditions</a></div>
                            </div>
                        </div>

                    </div>

                    <div class="col col-xs-12 col-md-4">
                        <div class="" style="background: #707070; padding: 20px; color: #FFF; border-radius: 16px;">
                            <p style="font-size: 18px; font-weight: bold;">Header</p>
                            <p style="font-size: 13px; margin-top: 8px;">Paragraph/content of the block</p>
                            <form style="margin-top: 12px; display: flex; gap: 10px;">
                                <div class="input-group" style="flex: 1 0 50%;">
                                    <label for="newsletter-email" style="color: #FFF; margin: 0; position: absolute; top: 50%; transform: translate(0, -50%); left: 20px;">Email</label>
                                    <input type="text" placeholder="Email" id="newsletter-email"
                                    style="background: #707070; border: 1px solid #FFF; color: #FFF;"></input>
                                </div>
                                <button style="margin-top: 0;">Sign-up</button>
                            </form>
                        </div>
                        <div class="" style="margin-top: 30px;">
                            <span class="socials">
                                <a href="#" class="tag tag--social"><span>fb</span></a>
                                <a href="#" class="tag tag--social"><span>tw</span></a>
                                <a href="#" class="tag tag--social"><span>lnk</span></a>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row" style="background-color: #242322; color: #FFF;">
            <div class="col col-12" style="padding: 10px 40px;">
                <p>Copyright © SF | All Rights Reserved</p>
                <p>Developed by Aney</p>
            </div>
        </div>

    </footer>
@endsection