diff --git a/V1/index.html b/V1/index.html index e5e7f86..ce438e4 100644 --- a/V1/index.html +++ b/V1/index.html @@ -194,52 +194,65 @@ 01. Contact L'essence même d'un bon déroulement de projet réside dans ses premiers échanges. Rencontrons-nous et présentez-moi votre projet. - - - + + + + + +
02. Devis Je vous prépare un chiffrage précis et transparent de votre projet, accompagné de conseils avisés et d'un suivi attentif à chaque étape de notre collaboration. - - - + + + + +
03. Idéation À partir de votre description et de vos inspirations, je réalise des planches tendance qui nous permettrons de valider l’atmosphère du projet. - - - + + + + +
04. Production Je réalise votre concept d’aménagement sous forme de rendus 3D photoréaliste, incluant des éléments tels que le mobilier, les matériaux, les couleurs et l'éclairage souhaités. - - - + + + + + +
05. Livrable Je vous remets et vous présente le dossier final de votre projet comprenant : recherches, plans, annotations, visuels avant/après, et rendus 3D photoréaliste. Votre projet est maintenant prêt à se concrétiser ! - - - + + + + +
+
-

Faites de votre quotidien une expérience à vivre.

+

Faites de votre quotidien une expérience unique.

KM Design Studio

diff --git a/V1/projets/p-55-401-027.html b/V1/projets/p-55-401-027.html index a18ca2a..c775731 100644 --- a/V1/projets/p-55-401-027.html +++ b/V1/projets/p-55-401-027.html @@ -107,11 +107,10 @@
- projet - projet - projet - projet - projet + projet + projet + projet + projet
@@ -119,25 +118,16 @@

Aix-en-Provence (13)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tincidunt, augue id hendrerit pellentesque, nibh elit rutrum purus, vitae eleifend quam est a risus. Aenean dolor enim, suscipit non lectus ac, convallis congue nunc. Sed eget semper magna, ut mattis nisi. Ut quis justo eget nibh porta porttitor in id orci. Nullam finibus lacinia ex et volutpat. Maecenas sagittis ante nibh, at auctor sapien hendrerit in. Nulla elementum tellus eget porta imperdiet. Aenean in blandit mi, a iaculis ex. Vivamus scelerisque odio lectus, sit amet posuere leo dignissim in. Duis felis lorem, eleifend ut lorem at, maximus rhoncus nibh. Phasellus nec interdum elit, ut molestie nisl. Nunc aliquam fringilla convallis. Sed aliquet iaculis tellus non sollicitudin. - - Maecenas in ullamcorper velit, sed condimentum magna. Nunc consequat finibus dolor ut feugiat. Maecenas vitae lacus in felis condimentum tristique eu quis erat. Integer molestie, urna ut laoreet ornare, sapien leo placerat urna, et faucibus magna est ac tortor. Sed in tellus quis urna pulvinar sodales. Pellentesque eget orci vitae ex imperdiet accumsan. Ut condimentum sapien sed nulla bibendum, sed mattis ante placerat. - - Vivamus vulputate euismod sem nec consequat. Mauris facilisis diam eget maximus sodales. Donec porta augue ac mauris placerat, vitae blandit orci tincidunt. Pellentesque odio sem, ultrices a leo a, dictum vehicula sem. Duis ullamcorper varius dui et maximus. Vestibulum porttitor ligula pulvinar consequat bibendum. Aliquam id ornare odio. - - Duis mollis libero vitae egestas ultricies. Sed quis facilisis diam, ut dictum quam. Sed lobortis massa ut lacus tempor varius. Nunc aliquet ullamcorper auctor. Praesent faucibus, nulla sollicitudin luctus aliquet, sem libero dictum massa, eu luctus augue tellus non lorem. Nulla vel felis sit amet sapien euismod volutpat eget vitae mi. Sed condimentum ligula magna, molestie ultricies ex varius a. Ut maximus justo et nibh congue molestie. Sed fringilla dapibus auctor. Nulla vitae tortor egestas, dictum libero eu, auctor sem. Aenean urna sem, semper eget iaculis sit amet, mollis auctor magna. Donec felis turpis, aliquam a erat eu, fringilla facilisis sapien. - - Fusce dictum mi id ligula luctus, at scelerisque elit aliquet. Aliquam euismod erat turpis, eu consectetur neque lacinia non. Integer feugiat mi rhoncus massa cursus rutrum. Vivamus ut imperdiet nunc. Vivamus efficitur at felis tincidunt viverra. Nulla commodo egestas augue vitae placerat. Proin commodo gravida sem, eget pharetra dui tempor sit amet. Suspendisse sit amet pellentesque elit. Integer fringilla magna ac nibh commodo accumsan. Morbi in pharetra justo. In suscipit odio vel ante ullamcorper feugiat. Ut semper nulla pellentesque elit faucibus pharetra. In elit nibh, tincidunt id ante ac, dictum pharetra urna.

-
+
-
-

Chaque projet est une symphonie singulière.

-

Ensemble, composons une œuvre qui incarne votre personnalité et qui reflète vos aspirations.

+
+

Absolument ravi de mon expérience avec Kilian pour la rénovation de ma cuisine. Son professionnalisme et sa créativité ont dépassé mes attentes. Le résultat final est génial, merci pour d’avoir métamorphosé ma cuisine !

@@ -148,9 +138,10 @@
- compare + compare - compare + + compare
diff --git a/V1/resources/css/components/about.css b/V1/resources/css/components/about.css index 8878bd0..02f57da 100644 --- a/V1/resources/css/components/about.css +++ b/V1/resources/css/components/about.css @@ -21,8 +21,10 @@ .about-image h1 { font-family: 'Mona-Sans'; color: rgba(34, 34, 34, 0.60); - font-size: 10vmin; + font-size: 12vmin; font-weight: 1000; + letter-spacing: -4px; + line-height: 1; } .about-sub { diff --git a/V1/resources/css/components/compare.css b/V1/resources/css/components/compare.css index 17bfadd..2c3db59 100644 --- a/V1/resources/css/components/compare.css +++ b/V1/resources/css/components/compare.css @@ -49,7 +49,7 @@ } img { - max-block-size: 80dvh; + max-block-size: 100%; max-inline-size: 100%; } } diff --git a/V1/resources/css/components/contact.css b/V1/resources/css/components/contact.css index 2c66089..1deffb1 100644 --- a/V1/resources/css/components/contact.css +++ b/V1/resources/css/components/contact.css @@ -9,9 +9,10 @@ .contact-container h1 { color: #222; - font-size: 10vmin; + font-size: 13vmin; font-family: 'Moonstone History'; font-weight: 10; + line-height: .9; margin: 0; margin-bottom: 40px; text-align: center; @@ -19,7 +20,7 @@ .contact-container a { background-color: #222; - padding: 10px 25px; + padding: 15px 25px; border-radius: 25px; color: #F8FAFC; text-decoration: none; diff --git a/V1/resources/css/components/follow.css b/V1/resources/css/components/follow.css index fa3cea8..ded5965 100644 --- a/V1/resources/css/components/follow.css +++ b/V1/resources/css/components/follow.css @@ -1,6 +1,6 @@ .follow-container { background-color: #F8FAFC; - height: calc(100vh - 200px); + height: 100vh; display: flex; flex-direction: column; justify-content: center; @@ -37,7 +37,7 @@ overflow: scroll; border-top: 1px solid #D4D6D8; border-bottom: 1px solid #D4D6D8; - height: 100%; + height: 250px; width: 100%; padding: 2vmin; margin-top: 5vmin; @@ -45,7 +45,7 @@ .follow-sub-line { display: grid; - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(100px, auto); font-family: 'Overused Grotesk'; color:#222; @@ -70,8 +70,32 @@ max-width: 90%; } -.follow-sub-line svg { +.follow-sub-line-icon { grid-column: 4; + display: flex; + align-items: end; + flex-direction: column; + z-index: 2; +} + +.follow-sub-line-icon svg { + background-color: white; + border-radius: 28.5px; + height: 82px; + width: 47px; + padding: 5px; +} + +.follow-sub-background { + position: relative; + background-color: #EFEFEF; + z-index: 1; + border-radius: 38px; + width: 77px; + height: 659px; + display: block; + top: calc(-100% * 2 - 34px); + right: calc(83px - 100%); } @media only screen and (max-width: 1200px) { diff --git a/V1/resources/css/components/footer.css b/V1/resources/css/components/footer.css index 7d63cff..33d0c66 100644 --- a/V1/resources/css/components/footer.css +++ b/V1/resources/css/components/footer.css @@ -1,5 +1,5 @@ body { - padding-bottom: 850px; + padding-bottom: 1500px; background-color: #222; z-index: -20; position: relative; @@ -11,7 +11,7 @@ body { .footer-container { font-family: 'Mona-Sans'; - font-weight: 500; + font-weight: 600; background-color: #222; color: #F8FAFC; padding: 10vmin; @@ -30,7 +30,7 @@ body { } .footer-menu svg { - width: 10vmin; + width: 20vmin; } .footer-menu-items { @@ -46,6 +46,11 @@ body { text-decoration: none; text-transform: uppercase; transition: text-decoration 2s; + padding-bottom: 10px; +} + +.footer-menu-items :last-child { + padding-bottom: 0px; } .footer-menu-items a:hover { @@ -53,7 +58,7 @@ body { } .footer-title { - margin-top: 50px; + margin-top: 40px; } .footer-title div { @@ -61,21 +66,22 @@ body { } .footer-title h1 { - font-weight: 700; - font-size: 10vmin; + font-weight: 800; + font-size: 14vmin; text-transform: uppercase; margin: 0; + line-height: 1; } .footer-title h2 { - margin-top: 30px; + margin-top: 8px; } .footer-links { display: flex; justify-content: space-between; align-items: center; - margin: 50px 0px; + margin: 35px 0px; } .footer-links a { diff --git a/V1/resources/css/components/hero.css b/V1/resources/css/components/hero.css index 99e320e..dcbe1d7 100644 --- a/V1/resources/css/components/hero.css +++ b/V1/resources/css/components/hero.css @@ -1,18 +1,18 @@ .hero-title { color: #F8FAFC; - font-size: 10vmin; + font-size: 17vmin; font-family: 'Mona-Sans'; - font-weight: bold; - line-height: 12vh; + font-weight: 800; + line-height: 15vh; } .hero-title2 { position: relative; - top: 25px; - left: 15px; + top: 21px; + left: 13px; color: #F8FAFC; font-family: "Moonstone History"; - font-size: 10vmin; + font-size: 19vmin; line-height: 10vh; } @@ -161,7 +161,7 @@ .hero-decoration-arrow { position: absolute; color: #F8FAFC; - width: 10vmin; + width: 20vmin; bottom: 150px; right: 180px; } diff --git a/V1/resources/css/components/menu.css b/V1/resources/css/components/menu.css index 90ea8d3..b0da3c9 100644 --- a/V1/resources/css/components/menu.css +++ b/V1/resources/css/components/menu.css @@ -42,6 +42,7 @@ .menu-items >a:hover, .menu-items >div>button:hover { text-decoration: underline; + text-decoration-color: #222; } .menu-subitem:hover .menu-subitem-items { @@ -79,6 +80,8 @@ .menu-subitem-items a:hover { text-decoration: underline; + text-decoration-color: #222; + text-decoration-thickness: 2px; } .menu-subitem-items h1 { diff --git a/V1/resources/css/components/mobilier.css b/V1/resources/css/components/mobilier.css index eb0ad17..ded3707 100644 --- a/V1/resources/css/components/mobilier.css +++ b/V1/resources/css/components/mobilier.css @@ -1,7 +1,7 @@ .mobilier-main-container { background-color: #222; display: grid; - grid-template-columns: 5fr 7fr; + grid-template-columns: 5fr 5fr; } .mobilier-images img { diff --git a/V1/resources/css/components/projet.css b/V1/resources/css/components/projet.css index 181d74b..d097f74 100644 --- a/V1/resources/css/components/projet.css +++ b/V1/resources/css/components/projet.css @@ -1,7 +1,7 @@ .projet-main-container { background-color: #222; display: grid; - grid-template-columns: 5fr 7fr; + grid-template-columns: 5fr 5fr; } .projet-images img { @@ -18,8 +18,8 @@ .projet-description h1 { font-family: "Mona-Sans"; - font-weight: 800; - font-size: 75px; + font-weight: 700; + font-size: 40px; margin-top: 80px; margin-bottom: 20px; } @@ -28,12 +28,27 @@ font-family: "Overused Grotesk"; margin: 0; font-weight: 100; - font-size: 35px; + font-size: 21px; } .projet-description p { font-family: "Overused Grotesk"; - font-size: 19px; + font-size: 21px; +} + +.projet-punch-container { + background-image: none !important; + height: 500px !important; +} + +.projet-punch { + font-size: 24px !important; + font-weight: 500 !important; + text-align: left !important; +} + +.projet-punch-sub { + align-items: start !important; } .projet-contact-container { diff --git a/V1/resources/img/projets/Cuisine Pelissanne K.19 1.png b/V1/resources/img/projets/Cuisine Pelissanne K.19 1.png new file mode 100644 index 0000000..a88783c Binary files /dev/null and b/V1/resources/img/projets/Cuisine Pelissanne K.19 1.png differ diff --git a/V1/resources/img/projets/IMG_4728 2.png b/V1/resources/img/projets/IMG_4728 2.png new file mode 100644 index 0000000..416f3f5 Binary files /dev/null and b/V1/resources/img/projets/IMG_4728 2.png differ diff --git a/V1/resources/img/projets/IMG_5969 1.png b/V1/resources/img/projets/IMG_5969 1.png new file mode 100644 index 0000000..25af1da Binary files /dev/null and b/V1/resources/img/projets/IMG_5969 1.png differ diff --git a/V1/resources/img/projets/IMG_PA1_I1.2_cut.png b/V1/resources/img/projets/IMG_PA1_I1.2_cut.png new file mode 100644 index 0000000..240609f Binary files /dev/null and b/V1/resources/img/projets/IMG_PA1_I1.2_cut.png differ diff --git a/V1/resources/img/projets/IMG_PA1_I2.1_compare.png b/V1/resources/img/projets/IMG_PA1_I2.1_compare.png new file mode 100644 index 0000000..7683e0d Binary files /dev/null and b/V1/resources/img/projets/IMG_PA1_I2.1_compare.png differ diff --git a/V1/resources/img/projets/IMG_PA1_I2.2_compare.png b/V1/resources/img/projets/IMG_PA1_I2.2_compare.png new file mode 100644 index 0000000..c27ccbf Binary files /dev/null and b/V1/resources/img/projets/IMG_PA1_I2.2_compare.png differ diff --git a/V1/resources/js/index.js b/V1/resources/js/index.js index 1353b4d..de27683 100644 --- a/V1/resources/js/index.js +++ b/V1/resources/js/index.js @@ -21,7 +21,7 @@ document.addEventListener('DOMContentLoaded', () => { let currentScrollY = window.scrollY; if (navbar) { - if (lastScrollY > currentScrollY) { + if (lastScrollY > currentScrollY && currentScrollY !== 0) { navbar.style.top = '0'; } else { navbar.style.top = '-140px';