<!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>{{ config('app.name', 'Laravel') }}</title> <link rel="stylesheet" href="{{ asset('css/app.css') }}"> <style> body { font-family: 'Nunito', sans-serif; } .gradient { background: rgb(108,99,255); background: linear-gradient(90deg, rgba(108,99,255,1) 0%, rgba(0,212,255,1) 100%); } </style> </head> <body class="antialiased leading-normal tracking-wider tracking-normal text-white gradient" style="font-family: 'Pacifico', sans-serif;"> <nav id="header" class="fixed w-full z-30 top-0 text-white font-sans"> <div class="w-full container mx-auto flex flex-wrap items-center justify-between mt-0 py-2"> <div class="pl-4 flex items-center"> <a class="toggleColour text-white no-underline hover:no-underline font-bold text-2xl lg:text-4xl" href="{{ route('home') }}"> <img src="{{ asset('img/logoptimized.svg') }}" class="h-8 fill-current inline" /> </a> </div> <div class="block lg:hidden pr-4"> <button id="nav-toggle" class="flex items-center p-1 text-pink-800 hover:text-gray-900 focus:outline-none focus:shadow-outline transform transition hover:scale-105 duration-300 ease-in-out"> <svg class="fill-current h-6 w-6" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <title>Menu</title> <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" /> </svg> </button> </div> <div class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden mt-2 lg:mt-0 lg:bg-transparent text-black p-4 lg:p-0 z-20" id="nav-content"> @if (Route::has('login')) <ul class="list-reset lg:flex justify-end flex-1 items-center"> @auth <li class="mr-3"> <a href="{{ route('pages.index') }}" class="inline-block text-black no-underline hover:text-gray-800 hover:text-underline py-2 px-4">Dashboard</a> </li> @else <li class="mr-3"> <a href="{{ route('login') }}" class="inline-block text-black no-underline hover:text-gray-800 hover:text-underline py-2 px-4">Log in</a> </li> @if (Route::has('register')) <li class="mr-3"> <a href="{{ route('register') }}" class="ml-4 inline-block text-black no-underline hover:text-gray-800 hover:text-underline py-2 px-4">Register</a> </li> @endif @endauth </ul> @endif </div> </div> <hr class="border-b border-gray-100 opacity-25 my-0 py-0" /> </nav> {{ $slot }} <footer class="bg-white"> <div class="container mx-auto px-8"> <div class="w-full flex flex-col md:flex-row py-6"> <div class="flex-1 mb-6 text-black"> <a class="text-pink-600 no-underline hover:no-underline font-bold text-2xl lg:text-4xl" href="{{ route('home') }}"> <img src="{{ asset('img/logoptimized.svg') }}" alt="logo" /> </a> </div> <div class="flex-1"> <p class="uppercase text-gray-500 md:mb-6">Links</p> <ul class="list-reset mb-6"> <li class="mt-2 inline-block mr-2 md:block md:mr-0"> <a href="{{ route('faq', ['locale' => 'fr']) }}" class="no-underline hover:underline text-gray-800 hover:text-pink-500">FAQ</a> </li> </ul> </div> <div class="flex-1"> <p class="uppercase text-gray-500 md:mb-6">Legal</p> <ul class="list-reset mb-6"> <li class="mt-2 inline-block mr-2 md:block md:mr-0"> <a href="#" class="no-underline hover:underline text-gray-800 hover:text-pink-500">Terms</a> </li> <li class="mt-2 inline-block mr-2 md:block md:mr-0"> <a href="{{ route('privacy') }}" class="no-underline hover:underline text-gray-800 hover:text-pink-500">Privacy</a> </li> </ul> </div> <div class="flex-1"> <p class="uppercase text-gray-500 md:mb-6">Social</p> <ul class="list-reset mb-6"> <li class="mt-2 inline-block mr-2 md:block md:mr-0"> <a href="#" class="no-underline hover:underline text-gray-800 hover:text-pink-500">Facebook</a> </li> <li class="mt-2 inline-block mr-2 md:block md:mr-0"> <a href="#" class="no-underline hover:underline text-gray-800 hover:text-pink-500">Linkedin</a> </li> <li class="mt-2 inline-block mr-2 md:block md:mr-0"> <a href="#" class="no-underline hover:underline text-gray-800 hover:text-pink-500">Twitter</a> </li> </ul> </div> <div class="flex-1"> <p class="uppercase text-gray-500 md:mb-6">Company</p> <ul class="list-reset mb-6"> <li class="mt-2 inline-block mr-2 md:block md:mr-0"> <a href="#" class="no-underline hover:underline text-gray-800 hover:text-pink-500">Official Blog</a> </li> <li class="mt-2 inline-block mr-2 md:block md:mr-0"> <a href="#" class="no-underline hover:underline text-gray-800 hover:text-pink-500">About Us</a> </li> <li class="mt-2 inline-block mr-2 md:block md:mr-0"> <a href="#" class="no-underline hover:underline text-gray-800 hover:text-pink-500">Contact</a> </li> </ul> </div> </div> </div> <div class="ml-4 text-center text-sm text-gray-500 sm:text-right sm:ml-0"> Laravel v{{ Illuminate\Foundation\Application::VERSION }} (PHP v{{ PHP_VERSION }}) </div> <a href="https://www.freepik.com/free-photos-vectors/background" class="text-gray-500">Background vector created by freepik - www.freepik.com</a> </footer> <script> var scrollpos = window.scrollY; var header = document.getElementById("header"); var navcontent = document.getElementById("nav-content"); var navaction = document.getElementById("navAction"); var brandname = document.getElementById("brandname"); var toToggle = document.querySelectorAll(".toggleColour"); document.addEventListener("scroll", function () { /*Apply classes for slide in bar*/ scrollpos = window.scrollY; if (scrollpos > 10) { header.classList.add("bg-white"); // navaction.classList.remove("bg-white"); navaction.classList.add("gradient"); navaction.classList.remove("text-gray-800"); navaction.classList.add("text-white"); //Use to switch toggleColour colours for (var i = 0; i < toToggle.length; i++) { toToggle[i].classList.add("text-gray-800"); toToggle[i].classList.remove("text-white"); } header.classList.add("shadow"); navcontent.classList.remove("bg-gray-100"); navcontent.classList.add("bg-white"); } else { header.classList.remove("bg-white"); navaction.classList.remove("gradient"); navaction.classList.add("bg-white"); navaction.classList.remove("text-white"); navaction.classList.add("text-gray-800"); //Use to switch toggleColour colours for (var i = 0; i < toToggle.length; i++) { toToggle[i].classList.add("text-white"); toToggle[i].classList.remove("text-gray-800"); } header.classList.remove("shadow"); navcontent.classList.remove("bg-white"); navcontent.classList.add("bg-gray-100"); } }); </script> <script> /*Toggle dropdown list*/ /*https://gist.github.com/slavapas/593e8e50cf4cc16ac972afcbad4f70c8*/ var navMenuDiv = document.getElementById("nav-content"); var navMenu = document.getElementById("nav-toggle"); document.onclick = check; function check(e) { var target = (e && e.target) || (event && event.srcElement); //Nav Menu if (!checkParent(target, navMenuDiv)) { // click NOT on the menu if (checkParent(target, navMenu)) { // click on the link if (navMenuDiv.classList.contains("hidden")) { navMenuDiv.classList.remove("hidden"); } else { navMenuDiv.classList.add("hidden"); } } else { // click both outside link and outside menu, hide menu navMenuDiv.classList.add("hidden"); } } } function checkParent(t, elm) { while (t.parentNode) { if (t == elm) { return true; } t = t.parentNode; } return false; } </script> </body> </html>