|
|
@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>
|
|
|
|
|
|
<!-- 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="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;">
|
|
|
<!-- <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: 0; 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 85%;
|
|
|
max-width: 85%;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 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, .swiper-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, .swiper-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">
|
|
|
<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> -->
|
|
|
|
|
|
<div class="col fancy-slider__container">
|
|
|
<div class="swiper">
|
|
|
|
|
|
<div class="swiper-wrapper fancy-slider__slider-items row row--align-center">
|
|
|
|
|
|
<div class="swiper-slide col"><img style="" src="https://placehold.co/630x630"></div>
|
|
|
<div class="swiper-slide col"><img style="" src="https://placehold.co/630x630"></div>
|
|
|
<div class="swiper-slide col"><img style="" src="https://placehold.co/630x630"></div>
|
|
|
<div class="swiper-slide col"><img style="" src="https://placehold.co/630x630"></div>
|
|
|
<div class="swiper-slide col"><img style="" src="https://placehold.co/630x630"></div>
|
|
|
</div>
|
|
|
|
|
|
<!-- <div class="swiper-pagination"></div> -->
|
|
|
|
|
|
|
|
|
<div class="swiper-button-prev"></div>
|
|
|
<div class="swiper-button-next"></div>
|
|
|
|
|
|
|
|
|
<!-- <div class="swiper-scrollbar"></div> -->
|
|
|
</div>
|
|
|
<!-- <div class="swiper-pagination"></div> -->
|
|
|
</div>
|
|
|
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
|
|
|
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
|
|
|
<style>
|
|
|
/* .swiper {
|
|
|
width: 85%;
|
|
|
height: 430px;
|
|
|
} */
|
|
|
</style>
|
|
|
<div class="container">
|
|
|
|
|
|
</div>
|
|
|
<script>
|
|
|
// fancy-slider__container (not needed in swiper, think it's the container then a 'wrapper' for the slider)
|
|
|
// fancy-slider__container__content-row
|
|
|
// fancy-slider__slider-items
|
|
|
// fancy-slider__slide fancy-slider__slide--active
|
|
|
const swiper = new Swiper('.swiper', {
|
|
|
// const swiper = new Swiper('.swiper', {
|
|
|
// Optional parameters
|
|
|
centeredSlides: false,
|
|
|
direction: 'horizontal',
|
|
|
loop: true,
|
|
|
// slidesPerView: 3,
|
|
|
slidesPerView: 1, // Arbitray number, but seems to be working. Slide 'widths' are
|
|
|
// allowTouchMove: true,
|
|
|
// autoplay: {
|
|
|
// delay: 2500,
|
|
|
// disableOnInteraction: false,
|
|
|
// },
|
|
|
// breakpoints: {
|
|
|
// 640: {
|
|
|
// slidesPerView: 2,
|
|
|
// spaceBetween: 20,
|
|
|
// },
|
|
|
|
|
|
// If we need pagination
|
|
|
pagination: {
|
|
|
// el: '.swiper-pagination',
|
|
|
el: '.slide__dots',
|
|
|
clickable: true,
|
|
|
renderBullet: function (index, className) {
|
|
|
return '<span class="slide-dot '+ className+'"><div class="slide-dot__inner"></div></span>';
|
|
|
// '<span class="' + className + '">' + (index + 1) + "</span>";
|
|
|
|
|
|
},
|
|
|
},
|
|
|
|
|
|
// Navigation arrows
|
|
|
navigation: {
|
|
|
nextEl: '.swiper-button-next',
|
|
|
prevEl: '.swiper-button-prev',
|
|
|
// nextEl: '.arrow--right',
|
|
|
// prevEl: '.arrow--left',
|
|
|
},
|
|
|
|
|
|
// And if we need scrollbar
|
|
|
// scrollbar: {
|
|
|
// el: '.swiper-scrollbar',
|
|
|
// },
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
<!-- 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-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-6">
|
|
|
<div class="row">
|
|
|
@for ($i = 0; $i < 3; $i++)
|
|
|
<div class="col 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-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-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
|