gltron/KM_Design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added animations, improved footer

Browse Source
This commit is contained in:
gltron
2024-06-23 11:32:30 +02:00
parent 6ab4e3f2df
commit 0da0957373
21 changed files with 137 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
V1/contact.html
View File

@@ -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/OverusedGrotesk-VF.woff2" as="font" type="font/woff2" 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>
</head>
<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">
<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"/>
@@ -98,7 +99,7 @@
</div>
</section>
<footer class="footer-container">
<footer class="footer-container footer-border-top">
<div class="footer-menu">
<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"/>

19
V1/index.html
View File

@@ -4,15 +4,18 @@
<meta charset="UTF-8">
<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é.">
<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="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/Moonstone-History.otf" as="font" type="font/otf" crossorigin>
<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="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/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>
</head>
<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">
<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"/>
@@ -72,7 +75,7 @@
</div>
<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>
<div>
<span class="mona-sans hero-title">& </span>
@@ -129,7 +132,7 @@
</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">
<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>

5
V1/legal.html
View File

@@ -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/OverusedGrotesk-VF.woff2" as="font" type="font/woff2" 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>
</head>
<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">
<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"/>
@@ -125,7 +126,7 @@ Kilian MAURICE et l’hébergeur ne pourront être tenus responsables en cas de
</section>
<footer class="footer-container">
<footer class="footer-container footer-border-top">
<div class="footer-menu">
<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"/>

5
V1/mobilier/line.html
View File

@@ -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/OverusedGrotesk-VF.woff2" as="font" type="font/woff2" 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>
</head>
<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">
<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"/>
@@ -101,7 +102,7 @@
</a>
</section>
<footer class="footer-container projet-footer-container">
<footer class="footer-container footer-border-top">
<div class="footer-menu">
<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"/>

5
V1/politique.html
View File

@@ -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/OverusedGrotesk-VF.woff2" as="font" type="font/woff2" 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>
</head>
<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">
<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"/>
@@ -145,7 +146,7 @@ L’éditeur du site se réserve le droit de la modifier afin de garantir sa con
</section>
<footer class="footer-container">
<footer class="footer-container footer-border-top">
<div class="footer-menu">
<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"/>

7
V1/projets/p-55-401-027.html
View File

@@ -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/OverusedGrotesk-VF.woff2" as="font" type="font/woff2" 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>
</head>
<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">
<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"/>
@@ -96,7 +97,7 @@
</div>
</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">
<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>
@@ -131,7 +132,7 @@
</a>
</section>
<footer class="footer-container projet-footer-container">
<footer class="footer-container footer-border-top">
<div class="footer-menu">
<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"/>

3
V1/resources/css/components/compare.css
View File

@@ -1,5 +1,6 @@
.projet-compare-container {
display: grid;
background-color: #222;
> * {
grid-area: 1 / 1;
@@ -94,7 +95,7 @@ input[type="range"]::-moz-range-track {
width: 100%;
height: 12.8px;
cursor: pointer;
animate: 0.2s;
transition: all 0.2s;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
background: none;
border-radius: 25px;

2
V1/resources/css/components/contact-form.css
View File

@@ -1,5 +1,5 @@
.contact-form-container {
color: #fff;
color: #F8FAFC;
background-color: #222;
}

1
V1/resources/css/components/contact.css
View File

@@ -1,4 +1,5 @@
.contact-container {
background-color: #F8FAFC;
display: flex;
flex-direction: column;
justify-content: center;

1
V1/resources/css/components/follow.css
View File

@@ -1,4 +1,5 @@
.follow-container {
background-color: #F8FAFC;
height: calc(100vh - 200px);
display: flex;
flex-direction: column;

15
V1/resources/css/components/footer.css
View File

@@ -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 {
font-family: 'Mona-Sans';
font-weight: 500;
background-color: #222;
color: #F8FAFC;
padding: 10vmin;
z-index: -5;
position: fixed;
bottom: 0;
width: calc(100% - 20vmin);
}
.footer-menu {

22
V1/resources/css/components/hero.css
View File

@@ -1,5 +1,5 @@
.hero-title {
color: white;
color: #F8FAFC;
font-size: 10vmin;
font-family: 'Mona-Sans';
font-weight: bold;
@@ -10,13 +10,15 @@
position: relative;
top: 25px;
left: 15px;
color: white;
color: #F8FAFC;
font-family: "Moonstone History";
font-size: 10vmin;
line-height: 10vh;
}
.hero-container {
z-index: -2;
position: relative;
display: flex;
justify-content: center;
align-items: center;
@@ -28,6 +30,8 @@
}
.hero-sub-container {
position: fixed;
z-index: -1;
display: flex;
justify-content: center;
align-items: center;
@@ -37,7 +41,7 @@
.hero-sub-container-separator {
height: 400px;
width: 2px;
background-color: #ffffff;
background-color: #F8FAFC;
transform: rotate(15deg);
margin: 100px;
}
@@ -56,7 +60,7 @@
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
color: #ffffff;
color: #F8FAFC;
text-decoration: none;
transition: 0.5s;
border-radius: 50px;
@@ -76,11 +80,11 @@
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
color: #ffffff;
color: #F8FAFC;
text-decoration: none;
transition: 0.5s;
border-radius: 50px;
border: 3px solid white;
border: 3px solid #F8FAFC;
}
.hero-sub-container-menu-item2:hover {
@@ -101,7 +105,7 @@
}
.hero-decoration-text span {
color: #ffffff;
color: #F8FAFC;
font-family: "Montserrat", sans-serif;
font-optical-sizing: auto;
font-weight: 600;
@@ -151,12 +155,12 @@
position: absolute;
height: 50px;
width: 50px;
color: #ffffff;
color: #F8FAFC;
}
.hero-decoration-arrow {
position: absolute;
color: #ffffff;
color: #F8FAFC;
width: 10vmin;
bottom: 150px;
right: 180px;

2
V1/resources/css/components/legal.css
View File

@@ -1,5 +1,5 @@
.legal-container {
color: #fff;
color: #F8FAFC;
background-color: #222;
padding: 10vmin;
}

13
V1/resources/css/components/menu.css
View File

@@ -1,20 +1,23 @@
.menu-container {
font-family: 'Mona-Sans';
padding: 25px 10vmin;
width: calc(100% - 20vmin);
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
position: fixed;
z-index: 8;
top: -140px;
transition: top 0.3s;
}
.menu-container-white {
color:#222;
background-color: #ffffff;
background-color: #F8FAFC;
}
.menu-container-black {
color: #ffffff;
color: #F8FAFC;
background-color: #222;
}
@@ -23,7 +26,7 @@
}
.menu-items >a, .menu-items >div>button {
color: #ffffff;
color: #F8FAFC;
padding-left: 50px;
font-weight: 700;
font-size: 15px;
@@ -54,7 +57,7 @@
margin: 5px 10vmin;
z-index: 15;
border-radius: 15px;
background-color: #ffffff;
background-color: #F8FAFC;
padding: 30px 60px;
}

2
V1/resources/css/components/mobilier.css
View File

@@ -9,7 +9,7 @@
}
.mobilier-description {
height: 100vh;
height: calc(100vh - 20vmin);
top: 0;
padding: 10vmin;
position: sticky;

2
V1/resources/css/components/projet.css
View File

@@ -9,7 +9,7 @@
}
.projet-description {
height: 100vh;
height: calc(100vh - 20vmin);
top: 0;
padding: 10vmin;
position: sticky;

4
V1/resources/css/components/projets.css
View File

@@ -2,7 +2,7 @@
height: calc(100vh - 200px);
display: flex;
flex-direction: column;
background-color: white;
background-color: #F8FAFC;
padding: 10vmin;
}
@@ -29,6 +29,8 @@
display: flex;
flex-direction: column;
justify-content: end;
text-decoration: none;
transition: all 0.3s;
}
.projets-carrousel-item h1 {

13
V1/resources/css/components/punch.css
View File

@@ -1,5 +1,14 @@
.punch-dark {
color: #F8FAFC;
background-color: #222;
}
.punch-clear {
color: #222;
background-color: #F8FAFC;
}
.punch-container {
background-color: #222222;
display: flex;
justify-content: center;
align-items: center;
@@ -7,6 +16,7 @@
background-image: url('/resources/img/logo_notext.png');
background-repeat: no-repeat;
background-position: calc(50% - 250px);
transition: background-color 0.3s;
}
.punch-sub {
@@ -16,7 +26,6 @@
}
.punch {
color: #F8FAFC;
font-family: 'Mona-Sans';
font-weight: 300;
font-size: 3vmin;

50
V1/resources/js/index.js Normal file
View 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';
}
}
});
}
});

6
V1/resources/script/index.js
View File

@@ -1,6 +0,0 @@
document.addEventListener('DOMContentLoaded', () => {
new Flickity(document.getElementById('carrousel'), {
autoPlay: true,
groupCells: '75%',
});
});