Added animations, improved footer
This commit is contained in:
@@ -78,7 +78,7 @@
|
|||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
transition: 0.5s;
|
transition: 0.5s;
|
||||||
border-radius: 50px;
|
border-radius: 50px;
|
||||||
border: 3px solid white;
|
border: 3px solid #F8FAFC;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-sub-container-menu-item2:hover {
|
.hero-sub-container-menu-item2:hover {
|
||||||
@@ -158,7 +158,7 @@
|
|||||||
right: 15px;
|
right: 15px;
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
color: white;
|
color: #F8FAFC;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
border-radius: 50px;
|
border-radius: 50px;
|
||||||
transition: 0.5s;
|
transition: 0.5s;
|
||||||
|
|||||||
@@ -9,10 +9,11 @@
|
|||||||
<link rel="preload" href="resources/fonts/Mona-Sans.woff2" as="font" type="font/woff2" crossorigin>
|
<link rel="preload" href="resources/fonts/Mona-Sans.woff2" as="font" type="font/woff2" crossorigin>
|
||||||
<link rel="preload" href="resources/fonts/OverusedGrotesk-VF.woff2" as="font" type="font/woff2" crossorigin>
|
<link rel="preload" href="resources/fonts/OverusedGrotesk-VF.woff2" as="font" type="font/woff2" crossorigin>
|
||||||
<link rel="preload" href="resources/fonts/Moonstone-History.otf" as="font" type="font/otf" crossorigin>
|
<link rel="preload" href="resources/fonts/Moonstone-History.otf" as="font" type="font/otf" crossorigin>
|
||||||
|
<script src="/resources/js/index.js"></script>
|
||||||
<title>KM Design Studio - Contact</title>
|
<title>KM Design Studio - Contact</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="menu-container menu-container-black">
|
<div class="menu-container menu-container-black" id="navbar">
|
||||||
<svg width="74" height="83" viewBox="0 0 74 83" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="74" height="83" viewBox="0 0 74 83" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M7.18459 0.464355H0.48291V47.8009H7.18459V0.464355Z" fill="#F8FAFC"/>
|
<path d="M7.18459 0.464355H0.48291V47.8009H7.18459V0.464355Z" fill="#F8FAFC"/>
|
||||||
<path d="M72.7598 47.8026V0L53.1998 19.5619L41.018 7.3914L36.2783 12.1292L53.3069 29.1446L66.0581 16.3934V47.8026H72.7598Z" fill="#F8FAFC"/>
|
<path d="M72.7598 47.8026V0L53.1998 19.5619L41.018 7.3914L36.2783 12.1292L53.3069 29.1446L66.0581 16.3934V47.8026H72.7598Z" fill="#F8FAFC"/>
|
||||||
@@ -98,7 +99,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<footer class="footer-container">
|
<footer class="footer-container footer-border-top">
|
||||||
<div class="footer-menu">
|
<div class="footer-menu">
|
||||||
<svg viewBox="0 0 174 173" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg viewBox="0 0 174 173" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M97.6061 172H98.6061V171V46.1415L155.232 102.768L155.939 103.475L156.646 102.768L171.707 87.7071L172.414 87L171.707 86.2929L87.7071 2.29289L87 1.58579L86.2929 2.29289L2.29289 86.2929L1.58579 87L2.29289 87.7071L17.3535 102.768L18.0606 103.475L18.7677 102.768L75.3939 46.1415V171V172H76.3939H97.6061Z" fill="#F8FAFC" stroke="#F8FAFC" stroke-width="2"/>
|
<path d="M97.6061 172H98.6061V171V46.1415L155.232 102.768L155.939 103.475L156.646 102.768L171.707 87.7071L172.414 87L171.707 86.2929L87.7071 2.29289L87 1.58579L86.2929 2.29289L2.29289 86.2929L1.58579 87L2.29289 87.7071L17.3535 102.768L18.0606 103.475L18.7677 102.768L75.3939 46.1415V171V172H76.3939H97.6061Z" fill="#F8FAFC" stroke="#F8FAFC" stroke-width="2"/>
|
||||||
|
|||||||
@@ -4,15 +4,18 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<meta name="description" content="Authentique mobilier d'intérieur conçu avec passion et fabriqué en France. Transformez votre espace de vie avec notre collection soigneusement créée alliant style et qualité.">
|
<meta name="description" content="Authentique mobilier d'intérieur conçu avec passion et fabriqué en France. Transformez votre espace de vie avec notre collection soigneusement créée alliant style et qualité.">
|
||||||
<link rel="shortcut icon" href="resources/img/ico.ico" type="image/x-icon">
|
<link rel="shortcut icon" href="/resources/img/ico.ico" type="image/x-icon">
|
||||||
<link rel="stylesheet" href="resources/css/pages/page_index.css">
|
<link rel="stylesheet" href="/resources/css/pages/page_index.css">
|
||||||
<link rel="preload" href="resources/fonts/Mona-Sans.woff2" as="font" type="font/woff2" crossorigin>
|
<link rel="preload" href="/resources/fonts/Mona-Sans.woff2" as="font" type="font/woff2" crossorigin>
|
||||||
<link rel="preload" href="resources/fonts/OverusedGrotesk-VF.woff2" as="font" type="font/woff2" crossorigin>
|
<link rel="preload" href="/resources/fonts/OverusedGrotesk-VF.woff2" as="font" type="font/woff2" crossorigin>
|
||||||
<link rel="preload" href="resources/fonts/Moonstone-History.otf" as="font" type="font/otf" crossorigin>
|
<link rel="preload" href="/resources/fonts/Moonstone-History.otf" as="font" type="font/otf" crossorigin>
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
|
||||||
|
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
|
||||||
|
<script src="/resources/js/index.js"></script>
|
||||||
<title>KM Design Studio</title>
|
<title>KM Design Studio</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="menu-container menu-container-black">
|
<div class="menu-container menu-container-black" id="navbar">
|
||||||
<svg width="74" height="83" viewBox="0 0 74 83" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="74" height="83" viewBox="0 0 74 83" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M7.18459 0.464355H0.48291V47.8009H7.18459V0.464355Z" fill="#F8FAFC"/>
|
<path d="M7.18459 0.464355H0.48291V47.8009H7.18459V0.464355Z" fill="#F8FAFC"/>
|
||||||
<path d="M72.7598 47.8026V0L53.1998 19.5619L41.018 7.3914L36.2783 12.1292L53.3069 29.1446L66.0581 16.3934V47.8026H72.7598Z" fill="#F8FAFC"/>
|
<path d="M72.7598 47.8026V0L53.1998 19.5619L41.018 7.3914L36.2783 12.1292L53.3069 29.1446L66.0581 16.3934V47.8026H72.7598Z" fill="#F8FAFC"/>
|
||||||
@@ -72,7 +75,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<section class="hero-container" id="home">
|
<section class="hero-container" id="home">
|
||||||
<div class="hero-sub-container">
|
<div class="hero-sub-container" id="home-title">
|
||||||
<span class="mona-sans hero-title">architecture</span>
|
<span class="mona-sans hero-title">architecture</span>
|
||||||
<div>
|
<div>
|
||||||
<span class="mona-sans hero-title">& </span>
|
<span class="mona-sans hero-title">& </span>
|
||||||
@@ -129,7 +132,7 @@
|
|||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="punch-container">
|
<section class="punch-container punch-clear" id="punch">
|
||||||
<svg class="punch-quote-left" width="32" height="26" viewBox="0 0 32 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg class="punch-quote-left" width="32" height="26" viewBox="0 0 32 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M17.32 22.58L22.57 12.71L26.07 11.73C25.6967 12.4767 25.2533 13.1067 24.74 13.62C24.2267 14.0867 23.6433 14.32 22.99 14.32C21.4967 14.32 20.1433 13.7133 18.93 12.5C17.7167 11.2867 17.11 9.74666 17.11 7.88C17.11 5.92 17.7633 4.24 19.07 2.84C20.4233 1.39333 22.1033 0.669997 24.11 0.669997C26.0233 0.669997 27.68 1.37 29.08 2.77C30.48 4.17 31.18 5.87333 31.18 7.88C31.18 8.72 31.0167 9.67666 30.69 10.75C30.41 11.8233 29.8033 13.2233 28.87 14.95L22.99 25.73L17.32 22.58ZM0.73 22.58L6.05 12.71L9.55 11.73C9.13 12.4767 8.66333 13.1067 8.15 13.62C7.63667 14.0867 7.05333 14.32 6.4 14.32C4.95333 14.32 3.62333 13.7133 2.41 12.5C1.19667 11.2867 0.59 9.74666 0.59 7.88C0.59 5.92 1.24333 4.24 2.55 2.84C3.90333 1.39333 5.58333 0.669997 7.59 0.669997C9.50333 0.669997 11.16 1.37 12.56 2.77C13.96 4.17 14.66 5.87333 14.66 7.88C14.66 8.72 14.4967 9.67666 14.17 10.75C13.8433 11.8233 13.2133 13.2233 12.28 14.95L6.47 25.73L0.73 22.58Z" fill="#D4D6D8"/>
|
<path d="M17.32 22.58L22.57 12.71L26.07 11.73C25.6967 12.4767 25.2533 13.1067 24.74 13.62C24.2267 14.0867 23.6433 14.32 22.99 14.32C21.4967 14.32 20.1433 13.7133 18.93 12.5C17.7167 11.2867 17.11 9.74666 17.11 7.88C17.11 5.92 17.7633 4.24 19.07 2.84C20.4233 1.39333 22.1033 0.669997 24.11 0.669997C26.0233 0.669997 27.68 1.37 29.08 2.77C30.48 4.17 31.18 5.87333 31.18 7.88C31.18 8.72 31.0167 9.67666 30.69 10.75C30.41 11.8233 29.8033 13.2233 28.87 14.95L22.99 25.73L17.32 22.58ZM0.73 22.58L6.05 12.71L9.55 11.73C9.13 12.4767 8.66333 13.1067 8.15 13.62C7.63667 14.0867 7.05333 14.32 6.4 14.32C4.95333 14.32 3.62333 13.7133 2.41 12.5C1.19667 11.2867 0.59 9.74666 0.59 7.88C0.59 5.92 1.24333 4.24 2.55 2.84C3.90333 1.39333 5.58333 0.669997 7.59 0.669997C9.50333 0.669997 11.16 1.37 12.56 2.77C13.96 4.17 14.66 5.87333 14.66 7.88C14.66 8.72 14.4967 9.67666 14.17 10.75C13.8433 11.8233 13.2133 13.2233 12.28 14.95L6.47 25.73L0.73 22.58Z" fill="#D4D6D8"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
@@ -9,10 +9,11 @@
|
|||||||
<link rel="preload" href="resources/fonts/Mona-Sans.woff2" as="font" type="font/woff2" crossorigin>
|
<link rel="preload" href="resources/fonts/Mona-Sans.woff2" as="font" type="font/woff2" crossorigin>
|
||||||
<link rel="preload" href="resources/fonts/OverusedGrotesk-VF.woff2" as="font" type="font/woff2" crossorigin>
|
<link rel="preload" href="resources/fonts/OverusedGrotesk-VF.woff2" as="font" type="font/woff2" crossorigin>
|
||||||
<link rel="preload" href="resources/fonts/Moonstone-History.otf" as="font" type="font/otf" crossorigin>
|
<link rel="preload" href="resources/fonts/Moonstone-History.otf" as="font" type="font/otf" crossorigin>
|
||||||
|
<script src="/resources/js/index.js"></script>
|
||||||
<title>KM Design Studio - Mentions légales</title>
|
<title>KM Design Studio - Mentions légales</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="menu-container menu-container-black">
|
<div class="menu-container menu-container-black" id="navbar">
|
||||||
<svg width="74" height="83" viewBox="0 0 74 83" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="74" height="83" viewBox="0 0 74 83" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M7.18459 0.464355H0.48291V47.8009H7.18459V0.464355Z" fill="#F8FAFC"/>
|
<path d="M7.18459 0.464355H0.48291V47.8009H7.18459V0.464355Z" fill="#F8FAFC"/>
|
||||||
<path d="M72.7598 47.8026V0L53.1998 19.5619L41.018 7.3914L36.2783 12.1292L53.3069 29.1446L66.0581 16.3934V47.8026H72.7598Z" fill="#F8FAFC"/>
|
<path d="M72.7598 47.8026V0L53.1998 19.5619L41.018 7.3914L36.2783 12.1292L53.3069 29.1446L66.0581 16.3934V47.8026H72.7598Z" fill="#F8FAFC"/>
|
||||||
@@ -125,7 +126,7 @@ Kilian MAURICE et l’hébergeur ne pourront être tenus responsables en cas de
|
|||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<footer class="footer-container">
|
<footer class="footer-container footer-border-top">
|
||||||
<div class="footer-menu">
|
<div class="footer-menu">
|
||||||
<svg viewBox="0 0 174 173" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg viewBox="0 0 174 173" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M97.6061 172H98.6061V171V46.1415L155.232 102.768L155.939 103.475L156.646 102.768L171.707 87.7071L172.414 87L171.707 86.2929L87.7071 2.29289L87 1.58579L86.2929 2.29289L2.29289 86.2929L1.58579 87L2.29289 87.7071L17.3535 102.768L18.0606 103.475L18.7677 102.768L75.3939 46.1415V171V172H76.3939H97.6061Z" fill="#F8FAFC" stroke="#F8FAFC" stroke-width="2"/>
|
<path d="M97.6061 172H98.6061V171V46.1415L155.232 102.768L155.939 103.475L156.646 102.768L171.707 87.7071L172.414 87L171.707 86.2929L87.7071 2.29289L87 1.58579L86.2929 2.29289L2.29289 86.2929L1.58579 87L2.29289 87.7071L17.3535 102.768L18.0606 103.475L18.7677 102.768L75.3939 46.1415V171V172H76.3939H97.6061Z" fill="#F8FAFC" stroke="#F8FAFC" stroke-width="2"/>
|
||||||
|
|||||||
@@ -9,10 +9,11 @@
|
|||||||
<link rel="preload" href="/resources/fonts/Mona-Sans.woff2" as="font" type="font/woff2" crossorigin>
|
<link rel="preload" href="/resources/fonts/Mona-Sans.woff2" as="font" type="font/woff2" crossorigin>
|
||||||
<link rel="preload" href="/resources/fonts/OverusedGrotesk-VF.woff2" as="font" type="font/woff2" crossorigin>
|
<link rel="preload" href="/resources/fonts/OverusedGrotesk-VF.woff2" as="font" type="font/woff2" crossorigin>
|
||||||
<link rel="preload" href="/resources/fonts/Moonstone-History.otf" as="font" type="font/otf" crossorigin>
|
<link rel="preload" href="/resources/fonts/Moonstone-History.otf" as="font" type="font/otf" crossorigin>
|
||||||
|
<script src="/resources/js/index.js"></script>
|
||||||
<title>KM Design Studio - Line</title>
|
<title>KM Design Studio - Line</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="menu-container menu-container-black">
|
<div class="menu-container menu-container-black" id="navbar">
|
||||||
<svg width="74" height="83" viewBox="0 0 74 83" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="74" height="83" viewBox="0 0 74 83" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M7.18459 0.464355H0.48291V47.8009H7.18459V0.464355Z" fill="#F8FAFC"/>
|
<path d="M7.18459 0.464355H0.48291V47.8009H7.18459V0.464355Z" fill="#F8FAFC"/>
|
||||||
<path d="M72.7598 47.8026V0L53.1998 19.5619L41.018 7.3914L36.2783 12.1292L53.3069 29.1446L66.0581 16.3934V47.8026H72.7598Z" fill="#F8FAFC"/>
|
<path d="M72.7598 47.8026V0L53.1998 19.5619L41.018 7.3914L36.2783 12.1292L53.3069 29.1446L66.0581 16.3934V47.8026H72.7598Z" fill="#F8FAFC"/>
|
||||||
@@ -101,7 +102,7 @@
|
|||||||
</a>
|
</a>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<footer class="footer-container projet-footer-container">
|
<footer class="footer-container footer-border-top">
|
||||||
<div class="footer-menu">
|
<div class="footer-menu">
|
||||||
<svg viewBox="0 0 174 173" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg viewBox="0 0 174 173" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M97.6061 172H98.6061V171V46.1415L155.232 102.768L155.939 103.475L156.646 102.768L171.707 87.7071L172.414 87L171.707 86.2929L87.7071 2.29289L87 1.58579L86.2929 2.29289L2.29289 86.2929L1.58579 87L2.29289 87.7071L17.3535 102.768L18.0606 103.475L18.7677 102.768L75.3939 46.1415V171V172H76.3939H97.6061Z" fill="#F8FAFC" stroke="#F8FAFC" stroke-width="2"/>
|
<path d="M97.6061 172H98.6061V171V46.1415L155.232 102.768L155.939 103.475L156.646 102.768L171.707 87.7071L172.414 87L171.707 86.2929L87.7071 2.29289L87 1.58579L86.2929 2.29289L2.29289 86.2929L1.58579 87L2.29289 87.7071L17.3535 102.768L18.0606 103.475L18.7677 102.768L75.3939 46.1415V171V172H76.3939H97.6061Z" fill="#F8FAFC" stroke="#F8FAFC" stroke-width="2"/>
|
||||||
|
|||||||
@@ -9,10 +9,11 @@
|
|||||||
<link rel="preload" href="resources/fonts/Mona-Sans.woff2" as="font" type="font/woff2" crossorigin>
|
<link rel="preload" href="resources/fonts/Mona-Sans.woff2" as="font" type="font/woff2" crossorigin>
|
||||||
<link rel="preload" href="resources/fonts/OverusedGrotesk-VF.woff2" as="font" type="font/woff2" crossorigin>
|
<link rel="preload" href="resources/fonts/OverusedGrotesk-VF.woff2" as="font" type="font/woff2" crossorigin>
|
||||||
<link rel="preload" href="resources/fonts/Moonstone-History.otf" as="font" type="font/otf" crossorigin>
|
<link rel="preload" href="resources/fonts/Moonstone-History.otf" as="font" type="font/otf" crossorigin>
|
||||||
|
<script src="/resources/js/index.js"></script>
|
||||||
<title>KM Design Studio - Politique de confidentialité</title>
|
<title>KM Design Studio - Politique de confidentialité</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="menu-container menu-container-black">
|
<div class="menu-container menu-container-black" id="navbar">
|
||||||
<svg width="74" height="83" viewBox="0 0 74 83" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="74" height="83" viewBox="0 0 74 83" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M7.18459 0.464355H0.48291V47.8009H7.18459V0.464355Z" fill="#F8FAFC"/>
|
<path d="M7.18459 0.464355H0.48291V47.8009H7.18459V0.464355Z" fill="#F8FAFC"/>
|
||||||
<path d="M72.7598 47.8026V0L53.1998 19.5619L41.018 7.3914L36.2783 12.1292L53.3069 29.1446L66.0581 16.3934V47.8026H72.7598Z" fill="#F8FAFC"/>
|
<path d="M72.7598 47.8026V0L53.1998 19.5619L41.018 7.3914L36.2783 12.1292L53.3069 29.1446L66.0581 16.3934V47.8026H72.7598Z" fill="#F8FAFC"/>
|
||||||
@@ -145,7 +146,7 @@ L’éditeur du site se réserve le droit de la modifier afin de garantir sa con
|
|||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<footer class="footer-container">
|
<footer class="footer-container footer-border-top">
|
||||||
<div class="footer-menu">
|
<div class="footer-menu">
|
||||||
<svg viewBox="0 0 174 173" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg viewBox="0 0 174 173" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M97.6061 172H98.6061V171V46.1415L155.232 102.768L155.939 103.475L156.646 102.768L171.707 87.7071L172.414 87L171.707 86.2929L87.7071 2.29289L87 1.58579L86.2929 2.29289L2.29289 86.2929L1.58579 87L2.29289 87.7071L17.3535 102.768L18.0606 103.475L18.7677 102.768L75.3939 46.1415V171V172H76.3939H97.6061Z" fill="#F8FAFC" stroke="#F8FAFC" stroke-width="2"/>
|
<path d="M97.6061 172H98.6061V171V46.1415L155.232 102.768L155.939 103.475L156.646 102.768L171.707 87.7071L172.414 87L171.707 86.2929L87.7071 2.29289L87 1.58579L86.2929 2.29289L2.29289 86.2929L1.58579 87L2.29289 87.7071L17.3535 102.768L18.0606 103.475L18.7677 102.768L75.3939 46.1415V171V172H76.3939H97.6061Z" fill="#F8FAFC" stroke="#F8FAFC" stroke-width="2"/>
|
||||||
|
|||||||
@@ -9,10 +9,11 @@
|
|||||||
<link rel="preload" href="/resources/fonts/Mona-Sans.woff2" as="font" type="font/woff2" crossorigin>
|
<link rel="preload" href="/resources/fonts/Mona-Sans.woff2" as="font" type="font/woff2" crossorigin>
|
||||||
<link rel="preload" href="/resources/fonts/OverusedGrotesk-VF.woff2" as="font" type="font/woff2" crossorigin>
|
<link rel="preload" href="/resources/fonts/OverusedGrotesk-VF.woff2" as="font" type="font/woff2" crossorigin>
|
||||||
<link rel="preload" href="/resources/fonts/Moonstone-History.otf" as="font" type="font/otf" crossorigin>
|
<link rel="preload" href="/resources/fonts/Moonstone-History.otf" as="font" type="font/otf" crossorigin>
|
||||||
|
<script src="/resources/js/index.js"></script>
|
||||||
<title>KM Design Studio - P°55.401.027</title>
|
<title>KM Design Studio - P°55.401.027</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="menu-container menu-container-black">
|
<div class="menu-container menu-container-black" id="navbar">
|
||||||
<svg width="74" height="83" viewBox="0 0 74 83" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="74" height="83" viewBox="0 0 74 83" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M7.18459 0.464355H0.48291V47.8009H7.18459V0.464355Z" fill="#F8FAFC"/>
|
<path d="M7.18459 0.464355H0.48291V47.8009H7.18459V0.464355Z" fill="#F8FAFC"/>
|
||||||
<path d="M72.7598 47.8026V0L53.1998 19.5619L41.018 7.3914L36.2783 12.1292L53.3069 29.1446L66.0581 16.3934V47.8026H72.7598Z" fill="#F8FAFC"/>
|
<path d="M72.7598 47.8026V0L53.1998 19.5619L41.018 7.3914L36.2783 12.1292L53.3069 29.1446L66.0581 16.3934V47.8026H72.7598Z" fill="#F8FAFC"/>
|
||||||
@@ -96,7 +97,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="punch-container">
|
<section class="punch-container punch-dark">
|
||||||
<svg class="punch-quote-left" width="32" height="26" viewBox="0 0 32 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg class="punch-quote-left" width="32" height="26" viewBox="0 0 32 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M17.32 22.58L22.57 12.71L26.07 11.73C25.6967 12.4767 25.2533 13.1067 24.74 13.62C24.2267 14.0867 23.6433 14.32 22.99 14.32C21.4967 14.32 20.1433 13.7133 18.93 12.5C17.7167 11.2867 17.11 9.74666 17.11 7.88C17.11 5.92 17.7633 4.24 19.07 2.84C20.4233 1.39333 22.1033 0.669997 24.11 0.669997C26.0233 0.669997 27.68 1.37 29.08 2.77C30.48 4.17 31.18 5.87333 31.18 7.88C31.18 8.72 31.0167 9.67666 30.69 10.75C30.41 11.8233 29.8033 13.2233 28.87 14.95L22.99 25.73L17.32 22.58ZM0.73 22.58L6.05 12.71L9.55 11.73C9.13 12.4767 8.66333 13.1067 8.15 13.62C7.63667 14.0867 7.05333 14.32 6.4 14.32C4.95333 14.32 3.62333 13.7133 2.41 12.5C1.19667 11.2867 0.59 9.74666 0.59 7.88C0.59 5.92 1.24333 4.24 2.55 2.84C3.90333 1.39333 5.58333 0.669997 7.59 0.669997C9.50333 0.669997 11.16 1.37 12.56 2.77C13.96 4.17 14.66 5.87333 14.66 7.88C14.66 8.72 14.4967 9.67666 14.17 10.75C13.8433 11.8233 13.2133 13.2233 12.28 14.95L6.47 25.73L0.73 22.58Z" fill="#D4D6D8"/>
|
<path d="M17.32 22.58L22.57 12.71L26.07 11.73C25.6967 12.4767 25.2533 13.1067 24.74 13.62C24.2267 14.0867 23.6433 14.32 22.99 14.32C21.4967 14.32 20.1433 13.7133 18.93 12.5C17.7167 11.2867 17.11 9.74666 17.11 7.88C17.11 5.92 17.7633 4.24 19.07 2.84C20.4233 1.39333 22.1033 0.669997 24.11 0.669997C26.0233 0.669997 27.68 1.37 29.08 2.77C30.48 4.17 31.18 5.87333 31.18 7.88C31.18 8.72 31.0167 9.67666 30.69 10.75C30.41 11.8233 29.8033 13.2233 28.87 14.95L22.99 25.73L17.32 22.58ZM0.73 22.58L6.05 12.71L9.55 11.73C9.13 12.4767 8.66333 13.1067 8.15 13.62C7.63667 14.0867 7.05333 14.32 6.4 14.32C4.95333 14.32 3.62333 13.7133 2.41 12.5C1.19667 11.2867 0.59 9.74666 0.59 7.88C0.59 5.92 1.24333 4.24 2.55 2.84C3.90333 1.39333 5.58333 0.669997 7.59 0.669997C9.50333 0.669997 11.16 1.37 12.56 2.77C13.96 4.17 14.66 5.87333 14.66 7.88C14.66 8.72 14.4967 9.67666 14.17 10.75C13.8433 11.8233 13.2133 13.2233 12.28 14.95L6.47 25.73L0.73 22.58Z" fill="#D4D6D8"/>
|
||||||
</svg>
|
</svg>
|
||||||
@@ -131,7 +132,7 @@
|
|||||||
</a>
|
</a>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<footer class="footer-container projet-footer-container">
|
<footer class="footer-container footer-border-top">
|
||||||
<div class="footer-menu">
|
<div class="footer-menu">
|
||||||
<svg viewBox="0 0 174 173" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg viewBox="0 0 174 173" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M97.6061 172H98.6061V171V46.1415L155.232 102.768L155.939 103.475L156.646 102.768L171.707 87.7071L172.414 87L171.707 86.2929L87.7071 2.29289L87 1.58579L86.2929 2.29289L2.29289 86.2929L1.58579 87L2.29289 87.7071L17.3535 102.768L18.0606 103.475L18.7677 102.768L75.3939 46.1415V171V172H76.3939H97.6061Z" fill="#F8FAFC" stroke="#F8FAFC" stroke-width="2"/>
|
<path d="M97.6061 172H98.6061V171V46.1415L155.232 102.768L155.939 103.475L156.646 102.768L171.707 87.7071L172.414 87L171.707 86.2929L87.7071 2.29289L87 1.58579L86.2929 2.29289L2.29289 86.2929L1.58579 87L2.29289 87.7071L17.3535 102.768L18.0606 103.475L18.7677 102.768L75.3939 46.1415V171V172H76.3939H97.6061Z" fill="#F8FAFC" stroke="#F8FAFC" stroke-width="2"/>
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
.projet-compare-container {
|
.projet-compare-container {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
background-color: #222;
|
||||||
|
|
||||||
> * {
|
> * {
|
||||||
grid-area: 1 / 1;
|
grid-area: 1 / 1;
|
||||||
@@ -94,7 +95,7 @@ input[type="range"]::-moz-range-track {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 12.8px;
|
height: 12.8px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
animate: 0.2s;
|
transition: all 0.2s;
|
||||||
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
||||||
background: none;
|
background: none;
|
||||||
border-radius: 25px;
|
border-radius: 25px;
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
.contact-form-container {
|
.contact-form-container {
|
||||||
color: #fff;
|
color: #F8FAFC;
|
||||||
background-color: #222;
|
background-color: #222;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
.contact-container {
|
.contact-container {
|
||||||
|
background-color: #F8FAFC;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
.follow-container {
|
.follow-container {
|
||||||
|
background-color: #F8FAFC;
|
||||||
height: calc(100vh - 200px);
|
height: calc(100vh - 200px);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
@@ -1,9 +1,24 @@
|
|||||||
|
body {
|
||||||
|
padding-bottom: 850px;
|
||||||
|
background-color: #222;
|
||||||
|
z-index: -20;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-border-top .footer-menu {
|
||||||
|
border-top: 1px solid;
|
||||||
|
}
|
||||||
|
|
||||||
.footer-container {
|
.footer-container {
|
||||||
font-family: 'Mona-Sans';
|
font-family: 'Mona-Sans';
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
background-color: #222;
|
background-color: #222;
|
||||||
color: #F8FAFC;
|
color: #F8FAFC;
|
||||||
padding: 10vmin;
|
padding: 10vmin;
|
||||||
|
z-index: -5;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
width: calc(100% - 20vmin);
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-menu {
|
.footer-menu {
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
.hero-title {
|
.hero-title {
|
||||||
color: white;
|
color: #F8FAFC;
|
||||||
font-size: 10vmin;
|
font-size: 10vmin;
|
||||||
font-family: 'Mona-Sans';
|
font-family: 'Mona-Sans';
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
@@ -10,13 +10,15 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
top: 25px;
|
top: 25px;
|
||||||
left: 15px;
|
left: 15px;
|
||||||
color: white;
|
color: #F8FAFC;
|
||||||
font-family: "Moonstone History";
|
font-family: "Moonstone History";
|
||||||
font-size: 10vmin;
|
font-size: 10vmin;
|
||||||
line-height: 10vh;
|
line-height: 10vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-container {
|
.hero-container {
|
||||||
|
z-index: -2;
|
||||||
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -28,6 +30,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.hero-sub-container {
|
.hero-sub-container {
|
||||||
|
position: fixed;
|
||||||
|
z-index: -1;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -37,7 +41,7 @@
|
|||||||
.hero-sub-container-separator {
|
.hero-sub-container-separator {
|
||||||
height: 400px;
|
height: 400px;
|
||||||
width: 2px;
|
width: 2px;
|
||||||
background-color: #ffffff;
|
background-color: #F8FAFC;
|
||||||
transform: rotate(15deg);
|
transform: rotate(15deg);
|
||||||
margin: 100px;
|
margin: 100px;
|
||||||
}
|
}
|
||||||
@@ -56,7 +60,7 @@
|
|||||||
font-optical-sizing: auto;
|
font-optical-sizing: auto;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
color: #ffffff;
|
color: #F8FAFC;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
transition: 0.5s;
|
transition: 0.5s;
|
||||||
border-radius: 50px;
|
border-radius: 50px;
|
||||||
@@ -76,11 +80,11 @@
|
|||||||
font-optical-sizing: auto;
|
font-optical-sizing: auto;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
color: #ffffff;
|
color: #F8FAFC;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
transition: 0.5s;
|
transition: 0.5s;
|
||||||
border-radius: 50px;
|
border-radius: 50px;
|
||||||
border: 3px solid white;
|
border: 3px solid #F8FAFC;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-sub-container-menu-item2:hover {
|
.hero-sub-container-menu-item2:hover {
|
||||||
@@ -101,7 +105,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.hero-decoration-text span {
|
.hero-decoration-text span {
|
||||||
color: #ffffff;
|
color: #F8FAFC;
|
||||||
font-family: "Montserrat", sans-serif;
|
font-family: "Montserrat", sans-serif;
|
||||||
font-optical-sizing: auto;
|
font-optical-sizing: auto;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
@@ -151,12 +155,12 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
color: #ffffff;
|
color: #F8FAFC;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-decoration-arrow {
|
.hero-decoration-arrow {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
color: #ffffff;
|
color: #F8FAFC;
|
||||||
width: 10vmin;
|
width: 10vmin;
|
||||||
bottom: 150px;
|
bottom: 150px;
|
||||||
right: 180px;
|
right: 180px;
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
.legal-container {
|
.legal-container {
|
||||||
color: #fff;
|
color: #F8FAFC;
|
||||||
background-color: #222;
|
background-color: #222;
|
||||||
padding: 10vmin;
|
padding: 10vmin;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,20 +1,23 @@
|
|||||||
.menu-container {
|
.menu-container {
|
||||||
font-family: 'Mona-Sans';
|
font-family: 'Mona-Sans';
|
||||||
padding: 25px 10vmin;
|
padding: 25px 10vmin;
|
||||||
|
width: calc(100% - 20vmin);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
position: sticky;
|
position: fixed;
|
||||||
z-index: 8;
|
z-index: 8;
|
||||||
|
top: -140px;
|
||||||
|
transition: top 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-container-white {
|
.menu-container-white {
|
||||||
color:#222;
|
color:#222;
|
||||||
background-color: #ffffff;
|
background-color: #F8FAFC;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-container-black {
|
.menu-container-black {
|
||||||
color: #ffffff;
|
color: #F8FAFC;
|
||||||
background-color: #222;
|
background-color: #222;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -23,7 +26,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.menu-items >a, .menu-items >div>button {
|
.menu-items >a, .menu-items >div>button {
|
||||||
color: #ffffff;
|
color: #F8FAFC;
|
||||||
padding-left: 50px;
|
padding-left: 50px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
@@ -54,7 +57,7 @@
|
|||||||
margin: 5px 10vmin;
|
margin: 5px 10vmin;
|
||||||
z-index: 15;
|
z-index: 15;
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
background-color: #ffffff;
|
background-color: #F8FAFC;
|
||||||
padding: 30px 60px;
|
padding: 30px 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -9,7 +9,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.mobilier-description {
|
.mobilier-description {
|
||||||
height: 100vh;
|
height: calc(100vh - 20vmin);
|
||||||
top: 0;
|
top: 0;
|
||||||
padding: 10vmin;
|
padding: 10vmin;
|
||||||
position: sticky;
|
position: sticky;
|
||||||
|
|||||||
@@ -9,7 +9,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.projet-description {
|
.projet-description {
|
||||||
height: 100vh;
|
height: calc(100vh - 20vmin);
|
||||||
top: 0;
|
top: 0;
|
||||||
padding: 10vmin;
|
padding: 10vmin;
|
||||||
position: sticky;
|
position: sticky;
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
height: calc(100vh - 200px);
|
height: calc(100vh - 200px);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background-color: white;
|
background-color: #F8FAFC;
|
||||||
padding: 10vmin;
|
padding: 10vmin;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -29,6 +29,8 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: end;
|
justify-content: end;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: all 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.projets-carrousel-item h1 {
|
.projets-carrousel-item h1 {
|
||||||
|
|||||||
@@ -1,5 +1,14 @@
|
|||||||
|
.punch-dark {
|
||||||
|
color: #F8FAFC;
|
||||||
|
background-color: #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.punch-clear {
|
||||||
|
color: #222;
|
||||||
|
background-color: #F8FAFC;
|
||||||
|
}
|
||||||
|
|
||||||
.punch-container {
|
.punch-container {
|
||||||
background-color: #222222;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -7,6 +16,7 @@
|
|||||||
background-image: url('/resources/img/logo_notext.png');
|
background-image: url('/resources/img/logo_notext.png');
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: calc(50% - 250px);
|
background-position: calc(50% - 250px);
|
||||||
|
transition: background-color 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.punch-sub {
|
.punch-sub {
|
||||||
@@ -16,7 +26,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.punch {
|
.punch {
|
||||||
color: #F8FAFC;
|
|
||||||
font-family: 'Mona-Sans';
|
font-family: 'Mona-Sans';
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
font-size: 3vmin;
|
font-size: 3vmin;
|
||||||
|
|||||||
50
V1/resources/js/index.js
Normal file
50
V1/resources/js/index.js
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const carrousel = document.getElementById('carrousel');
|
||||||
|
if (carrousel) {
|
||||||
|
new Flickity(carrousel, {
|
||||||
|
autoPlay: true,
|
||||||
|
groupCells: '75%',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const punch = document.getElementById('punch');
|
||||||
|
const navbar = document.getElementById('navbar');
|
||||||
|
const homeTitle = document.getElementById('home-title');
|
||||||
|
|
||||||
|
if (navbar || punch || homeTitle) {
|
||||||
|
let lastScrollY = window.scrollY;
|
||||||
|
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
let currentScrollY = window.scrollY;
|
||||||
|
|
||||||
|
if (navbar) {
|
||||||
|
if (lastScrollY > currentScrollY) {
|
||||||
|
navbar.style.top = '0';
|
||||||
|
} else {
|
||||||
|
navbar.style.top = '-140px';
|
||||||
|
}
|
||||||
|
|
||||||
|
lastScrollY = currentScrollY;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (punch) {
|
||||||
|
const punchPosition = punch.getBoundingClientRect();
|
||||||
|
if (currentScrollY > punchPosition.bottom + (window.innerHeight / 2)) {
|
||||||
|
punch.style.color = '#F8FAFC';
|
||||||
|
punch.style.backgroundColor = '#222';
|
||||||
|
} else {
|
||||||
|
punch.style.color = '#222';
|
||||||
|
punch.style.backgroundColor = '#F8FAFC';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (homeTitle) {
|
||||||
|
if (currentScrollY > 1000) {
|
||||||
|
homeTitle.style.display = 'none';
|
||||||
|
} else {
|
||||||
|
homeTitle.style.display = 'flex';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
new Flickity(document.getElementById('carrousel'), {
|
|
||||||
autoPlay: true,
|
|
||||||
groupCells: '75%',
|
|
||||||
});
|
|
||||||
});
|
|
||||||
Reference in New Issue
Block a user