You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
96 lines
3.8 KiB
PHTML
96 lines
3.8 KiB
PHTML
@extends('layouts.basePage', [
|
|
'title' => 'SFs Dupe',
|
|
'breadcrumbs' => [
|
|
[
|
|
'title' => 'Home',
|
|
'href' => '/',
|
|
]
|
|
]
|
|
])
|
|
|
|
@section('content')
|
|
|
|
<!-- Header on mobile -->
|
|
<header>
|
|
|
|
</header>
|
|
|
|
<div class="container container--no-gap"><div class="row"> <!-- no-gap should probably be the default tbf -->
|
|
<!-- Sidenav desktop + mobile (via burger) -->
|
|
<nav class="col hide-xs hide-sm col-3 nav" style="height: 100vh;">
|
|
<!-- Change to not be inline also, with manual click dropdowns that perma open/close -->
|
|
<ul class="nav-list">
|
|
@foreach($mainNav as $item)
|
|
<li class="nav-list__item {{ !empty($item['children']) ? 'nav-list__item--has-dropdown' : '' }}">
|
|
<a href="{{ $item['link'] }}">{{ $item['title'] }}</a>
|
|
@if(!empty($item['children']))
|
|
<ul class="nav-list__item__dropdown">
|
|
@foreach($item['children'] as $child)
|
|
<div class="nav-list__item__dropdown__content">
|
|
<li class="nav-list__item__dropdown__item"><a href="{{ $child['link'] }}">{{ $child['title']; }}</a></li>
|
|
</div>
|
|
@endforeach
|
|
</ul>
|
|
@endif
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
</nav>
|
|
|
|
<div class="col col-xs-12 col-sm-12 col-9 main right" style="height: 100vh; transition: max-width .3s linear;">
|
|
<main>
|
|
<!-- Header h1, etc. -->
|
|
<div class="row row--align-center" style="padding-top: 12px">
|
|
<div class="col col-6">
|
|
<h1 class="no-margin">Title</h1>
|
|
</div>
|
|
<div class="col col-6 tar">
|
|
<span class="tag">t1</span>
|
|
<span class="tag">t1</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hero -->
|
|
<div class="row">
|
|
<div class="col col-12">
|
|
<div class="hero">
|
|
<img src="https://placehold.co/1200x800">
|
|
<div class="hero__content">
|
|
<h2>Main Text</h2>
|
|
<p>Secondary text</p>
|
|
<a href="#" class="button">Button</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Items/etc -->
|
|
<div class="row">
|
|
<div class="col col-12">
|
|
<p>8 items</p>
|
|
</div>
|
|
|
|
@for ($i = 0; $i < 8; $i++)
|
|
<div class="col col-3">
|
|
<div style="position: relative">
|
|
@if($i%3 == 1)
|
|
<div style="position:absolute; left: 4px; top: 4px;"><p class="tag" style="font-size: 12px; background: #000;">Sale</p></div>
|
|
@elseif($i%5 == 1)
|
|
<div style="position:absolute; left: 4px; top: 4px;"><p class="tag" style="font-size: 12px; background: #000;">NEW</p></div>
|
|
@endif
|
|
<img src="https://placehold.co/400x500">
|
|
<p>Item tile here</p>
|
|
<p><strong>£21.99</strong></p>
|
|
</div>
|
|
</div>
|
|
@endfor
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="footer">
|
|
<p>Footer</p>
|
|
</footer>
|
|
</div>
|
|
</div></div>
|
|
|
|
@endsection |