anulax
/
visite360.anulax.ch
1
0
Fork 0
Code Issues Pull Requests Packages project_board Releases Wiki Activity

Light/Dark Theme

Browse Source
main
anulax1225 ago%!(EXTRA string=5 months)
parent 395c86c43f
commit 015cc5d585
8 changed files with 83 additions and 65 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      public/img/light-1.svg
  2. 2
      public/img/light-2.svg
  3. 28
      resources/css/app.css
  4. 12
      resources/js/app.js
  5. 2
      resources/views/demo.blade.php
  6. 46
      resources/views/home.blade.php
  7. 46
      resources/views/layout.blade.php
  8. 10
      tailwind.config.js

2
public/img/light-1.svg
Unescape View File

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg fill="#000000" width="1600px" height="1600px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 6.797a3.191 3.191 0 0 0-3.2 3.201 3.19 3.19 0 0 0 3.2 3.199 3.19 3.19 0 0 0 3.199-3.199A3.19 3.19 0 0 0 10 6.797zm0 5.25a2.049 2.049 0 1 1 0-4.1 2.05 2.05 0 0 1 0 4.1zM15 5c-.312-.312-.883-.248-1.273.142-.39.391-.453.959-.141 1.272s.882.25 1.273-.141c.39-.39.453-.961.141-1.273zm-9.858 8.729c-.391.39-.454.959-.142 1.271s.882.25 1.273-.141.454-.961.142-1.273-.883-.248-1.273.143zM5 5c-.312.312-.249.883.141 1.273.391.391.961.453 1.273.141s.249-.883-.142-1.273C5.883 4.752 5.312 4.688 5 5zm8.727 9.857c.39.391.96.455 1.273.143s.249-.883-.142-1.274-.96-.453-1.273-.141-.248.882.142 1.272zM10 4.998c.441 0 .8-.447.8-1C10.799 3.445 10.441 3 10 3c-.442 0-.801.445-.801.998s.358 1 .801 1zM10 17c.441 0 .8-.447.8-1s-.358-.998-.799-.998c-.442 0-.801.445-.801.998-.001.553.357 1 .8 1zm-5-7c0-.441-.45-.8-1.003-.8S3 9.559 3 10c0 .442.444.8.997.8S5 10.442 5 10zm12 0c0-.441-.448-.8-1.001-.8-.553 0-.999.359-.999.8 0 .442.446.8.999.8.553 0 1.001-.358 1.001-.8z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

2
public/img/light-2.svg
Unescape View File

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg fill="#000000" width="800px" height="800px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M19 9.199h-.98c-.553 0-1 .359-1 .801 0 .441.447.799 1 .799H19c.552 0 1-.357 1-.799 0-.441-.449-.801-1-.801zM10 4.5c-3.051 0-5.5 2.449-5.5 5.5s2.449 5.5 5.5 5.5c3.05 0 5.5-2.449 5.5-5.5S13.049 4.5 10 4.5zm0 9.5c-2.211 0-4-1.791-4-4 0-2.211 1.789-4 4-4a4 4 0 0 1 0 8zm-7-4c0-.441-.449-.801-1-.801H1c-.553 0-1 .359-1 .801 0 .441.447.799 1 .799h1c.551 0 1-.358 1-.799zm7-7c.441 0 .799-.447.799-1V1c0-.553-.358-1-.799-1-.442 0-.801.447-.801 1v1c0 .553.359 1 .801 1zm0 14c-.442 0-.801.447-.801 1v1c0 .553.359 1 .801 1 .441 0 .799-.447.799-1v-1c0-.553-.358-1-.799-1zm7.365-13.234c.391-.391.454-.961.142-1.273s-.883-.248-1.272.143l-.7.699c-.391.391-.454.961-.142 1.273s.883.248 1.273-.143l.699-.699zM3.334 15.533l-.7.701c-.391.391-.454.959-.142 1.271s.883.25 1.272-.141l.7-.699c.391-.391.454-.961.142-1.274s-.883-.247-1.272.142zm.431-12.898c-.39-.391-.961-.455-1.273-.143s-.248.883.141 1.274l.7.699c.391.391.96.455 1.272.143s.249-.883-.141-1.273l-.699-.7zm11.769 14.031l.7.699c.391.391.96.453 1.272.143.312-.312.249-.883-.142-1.273l-.699-.699c-.391-.391-.961-.455-1.274-.143s-.248.882.143 1.273z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

28
resources/css/app.css
Unescape View File

@ -5,19 +5,19 @@
@layer base { @layer base {
h1 { h1 {
@apply text-gray-50; @apply text-gray-50 dark:text-gray-1000;
} }
h2 { h2 {
@apply text-gray-150; @apply text-gray-150 dark:text-gray-850;
} }
h3 { h3 {
@apply text-gray-250; @apply text-gray-250 dark:text-gray-750;
} }
h4 { h4 {
@apply text-gray-350; @apply text-gray-350 dark:text-gray-650;
} }
h5 { h5 {
@ -25,7 +25,7 @@ @layer base {
} }
p { p {
@apply text-gray-550; @apply text-gray-550 dark:text-gray-450;
} }
} }
@ -77,6 +77,24 @@ @layer utilities {
animation-delay: var(--delay); animation-delay: var(--delay);
} }
.focus-camera {
animation-name: blur-anim;
animation-duration: 12s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-direction: alternate;
}
@keyframes blur-anim {
from {
filter: blur(0px);
}
to {
filter: blur(5px);
}
}
@keyframes social-icon-in-anim { @keyframes social-icon-in-anim {
from { from {
background-color: inherit; background-color: inherit;

12
resources/js/app.js
Unescape View File

@ -5,4 +5,14 @@ window.addEventListener("scroll", () => {
"--scroll", "--scroll",
window.pageYOffset / (document.body.offsetHeight - window.innerHeight) window.pageYOffset / (document.body.offsetHeight - window.innerHeight)
); );
}); });
function themeToggle() {
document.querySelector("html").classList.toggle("dark");
document.querySelector("#btn-theme").querySelector("img").setAttribute("src",
document.querySelector("html").classList.contains("dark") ?
"/img/dark.svg" : "/img/light-2.svg"
)
}
window.themeToggle = themeToggle;

2
resources/views/demo.blade.php
Unescape View File

@ -1,7 +1,7 @@
@extends("layout") @extends("layout")
@section("content") @section("content")
<div class="flex flex-col w-3/4 mx-auto mt-2 pt-5 h-full"> <div class="flex flex-col desktop:w-3/4 laptop:w-[90%] mx-auto mt-2 pt-5 h-full">
<h1 class="px-3 text-[3rem] font-semibold border-b border-gray-750 mb-5">Demo</h1> <h1 class="px-3 text-[3rem] font-semibold border-b border-gray-750 mb-5">Demo</h1>
<div class="w-full h-3/4 bg-gradient-to-r from-orange-400 to-orange-600 p-[3px] rounded-2xl mt-2 shadow-sm shadow-gray-950 overflow-hidden"> <div class="w-full h-3/4 bg-gradient-to-r from-orange-400 to-orange-600 p-[3px] rounded-2xl mt-2 shadow-sm shadow-gray-950 overflow-hidden">
<div class="rounded-2xl bg-gray-900 p-[30px] overflow-hidden w-full h-full"> <div class="rounded-2xl bg-gray-900 p-[30px] overflow-hidden w-full h-full">

46
resources/views/home.blade.php
Unescape View File

@ -2,19 +2,19 @@
@section("content") @section("content")
<div class="relative flex flex-col items-center justify-center overflow-hidden"> <div class="relative flex flex-col items-center justify-center overflow-hidden">
<img class="w-full absolute right-0 left-0 -z-10 blur-[4px]" src="/img/immo.jpg"> <img class="w-full absolute right-0 left-0 -z-10 focus-camera" src="/img/immo.jpg">
<div class="w-3/4 bg-gradient-to-tr from-orange-600/80 to-orange-400/80 rounded-lg <div class="desktop:w-3/4 laptop:w-[90%] bg-gradient-to-tr from-orange-600/80 to-orange-400/80 rounded-lg
shadow-lg shadow-gray-800 flex flex-col items-center p-14 my-7"> shadow-lg shadow-gray-800 flex flex-col items-center p-14 my-7">
<h5 class="text-[6rem] font-bold mx-auto leading-none">Ma Visite 360</h5> <h5 class="text-[6rem] font-bold mx-auto leading-none">Ma Visite 360</h5>
<h5 class="text-[1.2rem] italic text-center mx-auto">Ma visite, mon choix à 360°</h5> <h5 class="text-[1.2rem] italic text-center mx-auto">Ma visite, mon choix à 360°</h5>
</div> </div>
</div> </div>
<div class="flex flex-col w-3/4 h-fit mx-auto mb-10"> <div class="flex flex-col desktop:w-3/4 laptop:w-[90%] h-fit mx-auto mb-10">
<h1 class="mt-10 px-3 text-[3rem] font-bold border-b border-gray-750">Histoire</h1> <h1 class="mt-10 px-3 text-[3rem] font-bold border-b border-gray-750 dark:border-gray-200">Histoire</h1>
<div class="w-full flex items-start mt-2"> <div class="w-full flex items-start mt-2">
<h2 class="pl-3 mr-16 w-1/2 text-[1.5rem] font-semibold"> <h2 class="pl-3 mr-16 w-1/2 text-[1.5rem] font-semibold">
Fondée en 2024 et basée à Neuchâtel.<br> Fondée en 2024 et basée à Neuchâtel.<br>
MaVisite360 est une entreprise fictive spécialisée dans les technologies immersives de visite virtuelle. "Ma Visite 360" est une entreprise fictive spécialisée dans les technologies immersives de visite virtuelle.
</h2> </h2>
<div class="mt-1"> <div class="mt-1">
<h2 class="text-[1.3rem]"> <h2 class="text-[1.3rem]">
@ -33,17 +33,17 @@
</div> </div>
</div> </div>
<div class="w-full h-fit flex items-center justify-center flex-col border-b border-gray-750 pb-1"> <div class="w-full h-fit flex items-center justify-center flex-col border-b border-gray-750 dark:border-gray-200 pb-1">
<div class="mt-5 flex w-full items-center"> <div class="mt-5 flex w-full items-center">
<div class="w-[40%] p-3 hover:scale-105 m-3 bg-gradient-to-tr from-orange-600 to-orange-500 shadow-md shadow-gray-900 rounded-lg"> <div class="w-[40%] p-3 hover:scale-105 m-3 bg-gradient-to-tr from-orange-600 to-orange-500 shadow-md shadow-gray-900 dark:shadow-gray-300 rounded-lg">
<h5 class="text-[2rem] font-semibold w-full text-center">Vision</h5> <h5 class="text-[2rem] font-semibold w-full text-center">Vision</h5>
<h5 class="px-2 text-[1.2rem] font-semibold">Transformer la présentation immobilière en une expérience immersive, accessible et sans contraintes.</h5> <h5 class="px-2 text-[1.2rem] font-semibold">Transformer la présentation immobilière en une expérience immersive, accessible et sans contraintes.</h5>
</div> </div>
<div class="w-[40%] p-6 hover:scale-105 m-3 bg-gradient-to-tl from-orange-500 to-orange-600 shadow-md shadow-gray-900 rounded-lg"> <div class="w-[40%] p-6 hover:scale-105 m-3 bg-gradient-to-tl from-orange-500 to-orange-600 shadow-md shadow-gray-900 dark:shadow-gray-300 rounded-lg">
<h5 class="text-[2rem] font-semibold text-center">Mission</h5> <h5 class="text-[2rem] font-semibold text-center">Mission</h5>
<h5 class="px-2 text-[1.2rem] pb-2 font-semibold">Offrir une solution clé en main de visites virtuelles 360°, permettant aux agences immobilières et autres secteurs de valoriser leurs espaces et de gagner en efficacité.</h5> <h5 class="px-2 text-[1.2rem] pb-2 font-semibold">Offrir une solution clé en main de visites virtuelles 360°, permettant aux agences immobilières et autres secteurs de valoriser leurs espaces et de gagner en efficacité.</h5>
</div> </div>
<div class="w-[20%] p-3 hover:scale-105 m-3 bg-gradient-to-r from-orange-500 to-orange-600 shadow-md shadow-gray-900 rounded-lg"> <div class="w-[20%] p-3 hover:scale-105 m-3 bg-gradient-to-r from-orange-500 to-orange-600 shadow-md shadow-gray-900 dark:shadow-gray-300 rounded-lg">
<h5 class="text-[2rem] font-semibold text-center">Valeurs</h5> <h5 class="text-[2rem] font-semibold text-center">Valeurs</h5>
<ul class="text-gray-50 text-[1.2rem] list-disc px-5"> <ul class="text-gray-50 text-[1.2rem] list-disc px-5">
<li><h5 class="font-semibold">Innovation</h5></li> <li><h5 class="font-semibold">Innovation</h5></li>
@ -54,9 +54,9 @@
</div> </div>
</div> </div>
<h1 class="px-3 text-[3rem] font-semibold mt-8 border-b border-gray-750 mb-5">Services et offres</h1> <h1 class="px-3 text-[3rem] font-semibold mt-8 border-b border-gray-750 dark:border-gray-200 mb-5">Services et offres</h1>
<div class="w-full px-3 flex justify-between items-center"> <div class="w-full px-3 flex justify-between items-center">
<div class="w-[40%] p-8 mr-2 hover:scale-[1.01] bg-gradient-to-r from-orange-500 to-orange-600 shadow-md shadow-gray-900 rounded-lg"> <div class="w-[40%] p-8 mr-2 hover:scale-[1.01] bg-gradient-to-r from-orange-500 to-orange-600 shadow-md shadow-gray-900 dark:shadow-gray-300 rounded-lg">
<h5 class="text-[2rem] font-semibold text-center">Visite</h5> <h5 class="text-[2rem] font-semibold text-center">Visite</h5>
<ul class="text-gray-50 text-[1rem] list-disc px-5"> <ul class="text-gray-50 text-[1rem] list-disc px-5">
<li><h5 class="font-semibold mb-2">Capture des photos 360° haute définition.</h5></li> <li><h5 class="font-semibold mb-2">Capture des photos 360° haute définition.</h5></li>
@ -64,7 +64,7 @@
<li><h5 class="font-semibold">Hébergement en ligne sur notre plateforme.</h5></li> <li><h5 class="font-semibold">Hébergement en ligne sur notre plateforme.</h5></li>
</ul> </ul>
</div> </div>
<div class="w-[60%] p-5 ml-1 hover:scale-[1.01] bg-gradient-to-r from-orange-500 to-orange-600 shadow-md shadow-gray-900 rounded-lg"> <div class="w-[60%] p-5 ml-1 hover:scale-[1.01] bg-gradient-to-r from-orange-500 to-orange-600 shadow-md shadow-gray-900 dark:shadow-gray-300 rounded-lg">
<h5 class="text-[2rem] font-semibold text-center">Valeur ajoutée</h5> <h5 class="text-[2rem] font-semibold text-center">Valeur ajoutée</h5>
<ul class="text-gray-50 text-[1rem] list-disc px-5"> <ul class="text-gray-50 text-[1rem] list-disc px-5">
<li><h5 class="font-semibold mb-2">Simplifie les visites pour les acheteurs potentiels.</h5></li> <li><h5 class="font-semibold mb-2">Simplifie les visites pour les acheteurs potentiels.</h5></li>
@ -74,33 +74,33 @@
</div> </div>
</div> </div>
<div class="w-full flex justify-between mt-5"> <div class="w-full flex justify-between mt-5">
<div class="w-1/2 p-[2px] m-2 bg-gradient-to-r from-orange-400 to-orange-600 shadow-md shadow-gray-900 rounded-lg"> <div class="w-1/2 p-[2px] m-2 bg-gradient-to-r from-orange-400 to-orange-600 shadow-md shadow-gray-900 dark:shadow-gray-300 rounded-lg">
<div class="w-full h-full bg-gray-900 rounded-md p-5 flex flex-col justify-between"> <div class="w-full h-full bg-gray-900 dark:bg-white rounded-md p-5 flex flex-col justify-between">
<div> <div>
<div class="w-full flex justify-between items-center"> <div class="w-full flex justify-between items-center">
<h1 class="text-[2rem] font-bold ">Visite unique</h1> <h1 class="text-[2rem] font-bold ">Visite unique</h1>
<h3 class="text-[1.6rem]">200.-</h3> <h3 class="text-[1.6rem]">200.-</h3>
</div> </div>
<ul class="text-gray-150 text-[1.3rem] list-disc px-5 mt-2"> <ul class="text-gray-150 dark:text-gray-1000 text-[1.3rem] list-disc px-5 mt-2">
<li><h5 class="text-[1rem]">Prise des photo de votre visite</h5></li> <li><h5 class="text-[1rem] dark:text-gray-1000">Prise des photo de votre visite</h5></li>
<li><h5 class="text-[1rem]">Création de la visite virtuelle</h5></li> <li><h5 class="text-[1rem] dark:text-gray-1000">Création de la visite virtuelle</h5></li>
<li><h5 class="text-[1rem]">Hébergement (inclue des frais supplémentaire)</h5></li> <li><h5 class="text-[1rem] dark:text-gray-1000">Hébergement (inclue des frais supplémentaire)</h5></li>
</ul> </ul>
</div> </div>
<button class="mt-5 self-end w-1/3 rounded-lg hover:scale-105 <button class="mt-5 self-end w-1/3 rounded-lg hover:scale-105
bg-orange-600 px-4 py-2 text-white font-bold mb-2">Consulter l'offre</button> bg-orange-600 px-4 py-2 text-white font-bold mb-2">Consulter l'offre</button>
</div> </div>
</div> </div>
<div class="w-1/2 p-[2px] m-2 bg-gradient-to-r from-orange-400 to-orange-600 shadow-md shadow-gray-900 rounded-lg"> <div class="w-1/2 p-[2px] m-2 bg-gradient-to-r from-orange-400 to-orange-600 shadow-md shadow-gray-900 dark:shadow-gray-300 rounded-lg">
<div class="w-full h-full bg-gray-900 rounded-md p-5 flex flex-col justify-between"> <div class="w-full h-full bg-gray-900 dark:bg-white rounded-md p-5 flex flex-col justify-between">
<div> <div>
<div class="w-full flex justify-between items-center"> <div class="w-full flex justify-between items-center">
<h1 class="text-[2rem] font-bold ">Abonnement premium</h1> <h1 class="text-[2rem] font-bold ">Abonnement premium</h1>
<h3 class="text-[1.6rem]">60.-/mois</h3> <h3 class="text-[1.6rem]">60.-/mois</h3>
</div> </div>
<ul class="text-gray-150 text-[1.3rem] list-disc px-5 mt-2"> <ul class="text-gray-150 dark:text-gray-1000 text-[1.3rem] list-disc px-5 mt-2">
<li><h5 class="text-[1rem]">Réduction de 10% sur les la création de visite virtuelle</h5></li> <li><h5 class="text-[1rem] dark:text-gray-1000">Réduction de 10% sur les la création de visite virtuelle</h5></li>
<li><h5 class="text-[1rem]">Hébergement offert</h5></li> <li><h5 class="text-[1rem] dark:text-gray-1000">Hébergement offert</h5></li>
</ul> </ul>
</div> </div>
<button class="mt-5 self-end w-1/3 rounded-lg hover:scale-105 <button class="mt-5 self-end w-1/3 rounded-lg hover:scale-105

46
resources/views/layout.blade.php
Unescape View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
@ -10,49 +10,37 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<title>Ma Visite 360 - {{ $title }}</title> <title>Ma Visite 360 - {{ $title }}</title>
@vite("resources/js/app.js") @vite("resources/js/app.js")
@vite("resources/css/app.css") @vite("resources/css/app.css")
</head> </head>
<body class="w-screen h-screen antialiased font-robo bg-gray-850 -z-10"> <body class="w-screen h-screen antialiased font-robo bg-gray-850 dark:bg-gray-50 -z-10">
<!--<img src="/img/lightsource.png" class="w-full absolute top-0 right-0 left-0 -z-10">--> <!--<img src="/img/lightsource.png" class="w-full absolute top-0 right-0 left-0 -z-10">-->
<nav class="sticky right-0 left-0 top-0 h-16 z-50"> <nav class="sticky right-0 left-0 top-0 h-16 z-50">
<div class="w-full h-full flex items-center justify-center bg-gradient-to-r from-gray-850 via-gray-600 to-gray-850 pb-[2px]"> <div class="w-full h-full flex items-center justify-center bg-gradient-to-r from-gray-850 dark:from-gray-0 via-gray-600 dark:via-gray-300 to-gray-850 dark:to-gray-0 pb-[2px]">
<div class="w-full h-full px-[12.5%] flex justify-between bg-gray-850"> <div class="w-full h-full desktop:px-[12.5%] laptop:px-[5%] flex justify-between bg-gray-850 dark:bg-gray-0">
<div class="flex items-center h-full"> <div class="flex items-center h-full">
<a href="/" class="h-full"><img src="/img/logo-mavisite360.png" class="h-full hover:scale-105 mr-2 p-3"></a> <a href="/" class="h-full"><img src="/img/logo-mavisite360.png" class="h-full hover:scale-105 mr-2 p-3"></a>
<p class="text-lg text-white bg-gradient-to-tr from-orange-400 to-orange-600 rounded-lg px-4 font-semibold">{{ $title }}</p> <h5 class="text-lg text-white bg-gradient-to-tr from-orange-400 to-orange-600 rounded-lg px-4 font-semibold">{{ $title }}</h5>
</div> </div>
<div class="flex items-center h-full"> <div class="flex items-center h-full">
<a href="/"><h1 class="mr-4 text-xl font-bold hover:scale-110">home</h1></a> <a href="/"><h1 class="mr-4 text-xl font-bold hover:scale-110">home</h1></a>
<a href="/demo"><h1 class="font-bold mr-4 text-xl hover:scale-110">demo</h1></a> <a href="/demo"><h1 class="font-bold mr-4 text-xl hover:scale-110">demo</h1></a>
<a href="#contact"><h1 class="font-bold mr-9 text-xl hover:scale-110">contact</h1></a> <a href="#contact"><h1 class="font-bold mr-9 text-xl hover:scale-110">contact</h1></a>
<div class="flex items-center h-fit py-[8px] pl-5 border-l border-gray-700"> <div class="flex items-center h-fit py-[8px] pl-5 border-l border-gray-700">
<button class="relative group flex items-center justify-center mr-6" <button id="btn-theme" class="relative group flex items-center justify-center mr-6"
onclick="document.querySelector('#theme-panel').classList.toggle('hidden')"> onclick="window.themeToggle()">
<img src="/img/dark.svg" class="w-[1.4rem] hover:scale-105 invert"> <img src="/img/light-2.svg" class="w-[1.4rem] hover:scale-105 invert dark:invert-0">
<div id="theme-panel" class="absolute hidden bg-gray-800 -bottom-[110px] right-4/5
w-[160px] rounded-xl overflow-hidden">
<div class="px-4 pt-2 grid grid-cols-4 hover:bg-gray-600 items-center">
<img src="/img/dark.svg" class="w-[1.4rem] invert pl-1">
<h1 class="font-semibold text-[1.1rem] col-span-3 mb-1 text-left">Dark</h1>
</div>
<div class="px-4 pb-2 grid grid-cols-4 hover:bg-gray-600 items-center">
<img src="/img/light.svg" class="w-[1.4rem] invert">
<h1 class="font-semibold text-[1.1rem] mt-1 col-span-3 text-left">Light</h1>
</div>
</div>
</button> </button>
<img src="/img/instagram.svg" class="w-[1.6rem] hover:scale-105 invert mr-3"> <img src="/img/instagram.svg" class="w-[1.6rem] hover:scale-105 invert dark:invert-0 mr-3">
<img src="/img/twitter.svg" class="w-[1.6rem] hover:scale-105 invert"> <img src="/img/twitter.svg" class="w-[1.6rem] hover:scale-105 invert dark:invert-0">
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</nav> </nav>
@yield("content") @yield("content")
<footer class="w-full bg-gray-800"> <footer class="w-full bg-gray-800 dark:bg-gray-0">
<div class="w-3/4 px-3 mx-auto flex flex-col items-center justify-between"> <div class="desktop:w-3/4 laptop:w-[90%] px-3 mx-auto flex flex-col items-center justify-between">
<div class="w-full mt-5 flex items-center"> <div class="w-full mt-5 flex items-center">
<div id="contact" class="w-1/3 mb-10"> <div id="contact" class="w-1/3 mb-10">
<h2 class="font-semibold text-[1.7rem] border-b-2 border-gray-750 w-3/4 pr-20 mb-2">Nous contacter</h2> <h2 class="font-semibold text-[1.7rem] border-b-2 border-gray-750 w-3/4 pr-20 mb-2">Nous contacter</h2>
@ -70,19 +58,19 @@ class="h-fit rounded-lg text-sm hover:scale-105 bg-orange-600 px-4 py-2 text-whi
</div> </div>
<div class="flex items-start justify-evenly w-1/3 mb-10"> <div class="flex items-start justify-evenly w-1/3 mb-10">
<div class="hover:social-icon-in social-icon-out p-2 border border-gray-750 rounded-lg"> <div class="hover:social-icon-in social-icon-out p-2 border border-gray-750 rounded-lg">
<img src="/img/linkedin.svg" class="w-[2rem] brightness-0 invert"> <img src="/img/linkedin.svg" class="w-[2rem] brightness-0 invert dark:invert-0">
</div> </div>
<div class="hover:social-icon-in social-icon-out p-2 border border-gray-750 rounded-lg"> <div class="hover:social-icon-in social-icon-out p-2 border border-gray-750 rounded-lg">
<img src="/img/discord.svg" class="w-[2rem] invert"> <img src="/img/discord.svg" class="w-[2rem] invert dark:invert-0">
</div> </div>
<div class="hover:social-icon-in social-icon-out p-2 border border-gray-750 rounded-lg"> <div class="hover:social-icon-in social-icon-out p-2 border border-gray-750 rounded-lg">
<img src="/img/facebook.svg" class="w-[2rem] invert"> <img src="/img/facebook.svg" class="w-[2rem] invert dark:invert-0">
</div> </div>
<div class="hover:social-icon-in social-icon-out p-2 border border-gray-750 rounded-lg"> <div class="hover:social-icon-in social-icon-out p-2 border border-gray-750 rounded-lg">
<img src="/img/instagram.svg" class="w-[2rem] invert"> <img src="/img/instagram.svg" class="w-[2rem] invert dark:invert-0">
</div> </div>
<div class="hover:social-icon-in social-icon-out p-2 border border-gray-750 rounded-lg"> <div class="hover:social-icon-in social-icon-out p-2 border border-gray-750 rounded-lg">
<img src="/img/twitter.svg" class="w-[2rem] invert"> <img src="/img/twitter.svg" class="w-[2rem] invert dark:invert-0">
</div> </div>
</div> </div>
</div> </div>

10
tailwind.config.js
Unescape View File

@ -9,16 +9,12 @@ export default {
'./resources/**/*.js', './resources/**/*.js',
'./resources/**/*.vue', './resources/**/*.vue',
], ],
darkMode: 'class',
theme: { theme: {
screens: { screens: {
'tablet': '640px', 'tablet': '640px',
// => @media (min-width: 640px) { ... }
'laptop': '1024px', 'laptop': '1024px',
// => @media (min-width: 1024px) { ... } 'desktop': '1400px',
'desktop': '1280px',
// => @media (min-width: 1280px) { ... }
}, },
extend: { extend: {
fontFamily: { fontFamily: {
@ -28,6 +24,7 @@ export default {
}, },
colors: { colors: {
gray: { gray: {
1000: "hsl(0 0 2)",
950: "hsl(0 0 5)", 950: "hsl(0 0 5)",
900: "hsl(0 0 10)", 900: "hsl(0 0 10)",
850: "hsl(0 0 15)", 850: "hsl(0 0 15)",
@ -47,6 +44,7 @@ export default {
150: "hsl(0 0 85)", 150: "hsl(0 0 85)",
100: "hsl(0 0 90)", 100: "hsl(0 0 90)",
50: "hsl(0 0 95)", 50: "hsl(0 0 95)",
0: "hsl(0 0 98)",
}, },
}, },
}, },

Write Preview
Loading…
Cancel
Save