|
|
@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">
|
|
|
<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>
|
|
|
</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 -->
|
|
|
|
|
|
<!-- 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">
|
|
|
<div class="col col-3">
|
|
|
<img src="https://placehold.co/250x350">
|
|
|
<img src="https://placehold.co/240x240">
|
|
|
</div>
|
|
|
<div class="col col-3">
|
|
|
<img src="https://placehold.co/240x240">
|
|
|
<img src="https://placehold.co/240x180">
|
|
|
</div>
|
|
|
<div class="col col-3">
|
|
|
<img src="https://placehold.co/240x180">
|
|
|
<img src="https://placehold.co/250x350">
|
|
|
</div>
|
|
|
<div class="col 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>
|
|
|
|
|
|
|
|
|
<!-- 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 & 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
|