diff --git a/V1/contact.html b/V1/contact.html new file mode 100644 index 0000000..be572e7 --- /dev/null +++ b/V1/contact.html @@ -0,0 +1,143 @@ + + + + + + + + + + + + KM Design Studio - Contact + + + + +
+

Formulaire de contact

+
+
+
+
+ +
+ + +
+ + +
+ + + + + +
+ + + +
+
+
+ + + + + \ No newline at end of file diff --git a/V1/index.html b/V1/index.html new file mode 100644 index 0000000..f2624ba --- /dev/null +++ b/V1/index.html @@ -0,0 +1,274 @@ + + + + + + + + + + + + KM Design Studio + + + + +
+
+ architecture +
+ & + design +
+
+ +

+ KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • +

+

+ KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • +

+ +

+ KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • +

+
+ +

+ KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • KM design Studio • +

+
+ + + + + + + + +
+ +
+ +

Aménagement intérieur

+ +
+ +

Projet S°55.401.027

+

Aix-en-Provence (13)

+
+ + +

Projet S°13.155.284

+

Nans-les-Pins (83)

+
+ + +

Projet S°56.745.921

+

La Cadière d'Azur (83)

+
+
+ +
+ +
+ + + + +
+

Chaque projet est une symphonie singulière.

+

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

+
+ + + + + +
+ +
+
+

Votre accompagnement

+

sur-mesure

+
+ +
+ + + + + + + + + +
+
+ +
+
+

Faites de votre quotidien une expérience à vivre.

+
+
+

KM Design Studio

+

designer

+

& architecte d'intérieur

+

Bonjour, je m'appelle Kilian. Designer produit durant 8 ans, je conçois aujourd’hui des expériences de vie, élargissant mon champ d'action à englober l'intégralité de l'habitat.

+

Chaque projet, qu'il s'agisse d'aménagement ou de mobilier, est soigneusement pensé pour offrir une expérience singulière !

+

Je vous accompagne dans la création d'un projet à vos envies, totalement sur mesure.

+
+ + + +
+ +
+
+ +
+

Vous avez un projet ?

+ + Discutons-en + + + + +
+ + + + + \ No newline at end of file diff --git a/V1/legal.html b/V1/legal.html new file mode 100644 index 0000000..b759951 --- /dev/null +++ b/V1/legal.html @@ -0,0 +1,170 @@ + + + + + + + + + + + + KM Design Studio - Mentions légales + + + + + + + + + + \ No newline at end of file diff --git a/V1/mobilier/line.html b/V1/mobilier/line.html new file mode 100644 index 0000000..e7bf0eb --- /dev/null +++ b/V1/mobilier/line.html @@ -0,0 +1,145 @@ + + + + + + + + + + + + KM Design Studio - Line + + + + +
+
+ moblier + moblier + moblier +
+ +
+

LINE

+

Bien plus qu'un escabeau.

+

+ Conçu avec précision et souci du détail, Line repense les conventions d’usages pour s'intégrer harmonieusement dans votre habitat en alliant design et fonctionnalité intuitive. + + Que vous l’utilisiez pour atteindre de nouveaux sommets ou pour exposer vos plus beaux objets, Line est une véritable œuvre d’art utilitaire.  + + Faites de votre quotidien une expérience à vivre. +

+
+
+ +
+

Vous avez un projet ?

+ + Discutons-en + + + + +
+ + + + \ No newline at end of file diff --git a/V1/politique.html b/V1/politique.html new file mode 100644 index 0000000..8b3cbbd --- /dev/null +++ b/V1/politique.html @@ -0,0 +1,190 @@ + + + + + + + + + + + + KM Design Studio - Politique de confidentialité + + + + + + + + + + \ No newline at end of file diff --git a/V1/projets/p-55-401-027.html b/V1/projets/p-55-401-027.html new file mode 100644 index 0000000..12d0c13 --- /dev/null +++ b/V1/projets/p-55-401-027.html @@ -0,0 +1,175 @@ + + + + + + + + + + + + KM Design Studio - P°55.401.027 + + + + +
+
+ projet + projet + projet + projet + projet +
+ +
+

Projet P°55.401.027

+

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.

+
+ + + + + +
+ +
+ + compare + + compare + + +
+ +
+

Vous avez un projet ?

+ + Discutons-en + + + + +
+ + + + \ No newline at end of file diff --git a/V1/resources/css/components/about.css b/V1/resources/css/components/about.css new file mode 100644 index 0000000..8878bd0 --- /dev/null +++ b/V1/resources/css/components/about.css @@ -0,0 +1,71 @@ +.about-container { + display: flex; + flex-direction: row; + background-color: #222; + height: 100vh; +} + +.about-container div { + flex: 1; +} + +.about-image { + padding: 10vmin; + display: flex; + justify-content: center; + align-items: center; + background-size: cover; + background-image: url('/resources/img/IMG_À_propos_1.png'); +} + +.about-image h1 { + font-family: 'Mona-Sans'; + color: rgba(34, 34, 34, 0.60); + font-size: 10vmin; + font-weight: 1000; +} + +.about-sub { + padding: 10vmin; + display: flex; + flex-direction: column; + color: #F8FAFC; +} + +.about-sub h1 { + font-family: 'Mona-Sans'; + font-weight: 800; + font-size: 75px; + margin-top: 80px; + margin-bottom: 20px; +} + +.about-sub h2 { + font-family: 'Overused Grotesk'; + margin: 0; + font-size: 35px; +} + +.about-sub p { + font-family: 'Overused Grotesk'; + font-size: 19px; +} + +.about-sign-container { + margin-top: 60px; + display: flex; + align-items: end; + flex: 0 !important; + justify-content: end; +} + +.about-sign { + width: 130px; +} + +@media only screen and (max-width: 1200px) { + .about-container { + flex-direction: column; + height: 200vh; + } +} \ No newline at end of file diff --git a/V1/resources/css/components/compare.css b/V1/resources/css/components/compare.css new file mode 100644 index 0000000..21dfa84 --- /dev/null +++ b/V1/resources/css/components/compare.css @@ -0,0 +1,112 @@ +.projet-compare-container { + display: grid; + + > * { + grid-area: 1 / 1; + } + + > .projet-compare-left, + .projet-compare-right { + display: grid; + place-content: center; + } + + .projet-compare-left { + -webkit-mask: linear-gradient(to right, #000 0, var(--pos, 50%), #0000 0); + mask: linear-gradient(to right, #000 0, var(--pos, 50%), #0000 0); + } + + .projet-compare-right { + -webkit-mask: linear-gradient(to right, #0000 0, var(--pos, 50%), #000 0); + mask: linear-gradient(to right, #0000 0, var(--pos, 50%), #000 0); + } + + > input[type="range"] { + z-index: 1; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: transparent; + cursor: pointer; + -webkit-tap-highlight-color: transparent; + + &::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + inline-size: 4px; + block-size: 100%; + background-color: CanvasText; + } + + &::-moz-range-thumb { + -moz-appearance: none; + appearance: none; + inline-size: 4px; + block-size: 100%; + background-color: CanvasText; + } + } + + img { + max-block-size: 80dvh; + max-inline-size: 100%; + } +} + +input[type="range"] { + appearance: none; + -webkit-appearance: none; + margin: 10px 0; + width: 100%; +} + +input[type="range"]:focus { + outline: none; +} + +input[type="range"]::-webkit-slider-runnable-track { + width: 100%; + height: 12.8px; + cursor: pointer; + box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; + background: none; + border-radius: 25px; + border: 0px solid #000101; +} + +input[type="range"]::-webkit-slider-thumb { + box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; + border: 0px solid #000000; + height: 20px; + width: 39px; + border-radius: 7px; + background: none; + cursor: pointer; + -webkit-appearance: none; + margin-top: -3.6px; +} + +input[type="range"]:focus::-webkit-slider-runnable-track { + background: none; +} + +input[type="range"]::-moz-range-track { + width: 100%; + height: 12.8px; + cursor: pointer; + animate: 0.2s; + box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; + background: none; + border-radius: 25px; + border: 0px solid #000101; +} + +input[type="range"]::-moz-range-thumb { + box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; + border: 0px solid #000000; + height: 20px; + width: 39px; + border-radius: 7px; + background: none; + cursor: pointer; +} diff --git a/V1/resources/css/components/contact-form.css b/V1/resources/css/components/contact-form.css new file mode 100644 index 0000000..9684401 --- /dev/null +++ b/V1/resources/css/components/contact-form.css @@ -0,0 +1,33 @@ +.contact-form-container { + color: #fff; + background-color: #222; +} + +.contact-form-container h1 { + padding: 10vmin; + font-family: "Mona-Sans"; + font-weight: 800; + font-size: 75px; + margin: auto; + margin-bottom: 75px; + text-align: center; +} + +.contact-form-sub { + display: flex; + flex-direction: row; + height: 100vh; +} + +.contact-form-image { + flex: 1; + background-size: cover; + background-image: url('/resources/img/IMG_À_propos_1.png'); +} + +.contact-form { + padding: 10vmin; + flex: 1; + display: flex; + flex-direction: column; +} \ No newline at end of file diff --git a/V1/resources/css/components/contact.css b/V1/resources/css/components/contact.css new file mode 100644 index 0000000..60fa4ef --- /dev/null +++ b/V1/resources/css/components/contact.css @@ -0,0 +1,35 @@ +.contact-container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 10vmin; +} + +.contact-container h1 { + color: #222; + font-size: 10vmin; + font-family: 'Moonstone History'; + font-weight: 10; + margin: 0; + margin-bottom: 40px; + text-align: center; +} + +.contact-container a { + background-color: #222; + padding: 10px 25px; + border-radius: 25px; + color: #F8FAFC; + text-decoration: none; + font-family: 'Mona-Sans'; + font-weight: 700; + font-size: 20px; + display: flex; + justify-content: center; + align-items: center; +} + +.contact-container svg { + margin-left: 10px; +} \ No newline at end of file diff --git a/V1/resources/css/components/follow.css b/V1/resources/css/components/follow.css new file mode 100644 index 0000000..891217d --- /dev/null +++ b/V1/resources/css/components/follow.css @@ -0,0 +1,89 @@ +.follow-container { + height: calc(100vh - 200px); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 10vmin; +} + +.follow-title { + display: flex; + flex-direction: column; + align-items: center; + margin-top: 5vmin; +} + +.follow-title h1 { + font-family: 'Mona-Sans'; + font-size: 8vmin; + font-weight: 700; + text-align: center; + color: #222; + margin: 0; +} + +.follow-title h2 { + color: #222; + margin: 0; + font-family: 'Moonstone History'; + font-size: 15vmin; + font-weight: 10; + line-height: 10vmin; +} + +.follow-sub-container { + overflow: scroll; + border-top: 1px solid #D4D6D8; + border-bottom: 1px solid #D4D6D8; + height: 100%; + width: 100%; + padding: 2vmin; + margin-top: 5vmin; +} + +.follow-sub-line { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: minmax(100px, auto); + font-family: 'Overused Grotesk'; + color:#222; + margin: 25px 2vmin; +} + +.follow-sub-line-number { + grid-column: 1; + font-weight: 700; + font-size: 40px; +} + +.follow-sub-line-tile { + grid-column: 2; + font-weight: 700; + font-size: 40px; +} + +.follow-sub-line-text { + grid-column: 3; + font-weight: 100; + max-width: 90%; +} + +.follow-sub-line svg { + grid-column: 4; +} + +@media only screen and (max-width: 1200px) { + .follow-container { + height: auto; + } + + .follow-sub-container { + height: auto; + } + + .follow-sub-line { + grid-template-columns: repeat(3, 1fr); + margin: 25px 0px; + } +} \ No newline at end of file diff --git a/V1/resources/css/components/footer.css b/V1/resources/css/components/footer.css new file mode 100644 index 0000000..2610ec0 --- /dev/null +++ b/V1/resources/css/components/footer.css @@ -0,0 +1,87 @@ +.footer-container { + font-family: 'Mona-Sans'; + font-weight: 500; + background-color: #222; + color: #F8FAFC; + padding: 10vmin; +} + +.footer-menu { + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 50px 0px; + border-bottom: 1px solid; +} + +.footer-menu svg { + width: 10vmin; +} + +.footer-menu-items { + display: flex; + flex-direction: column; + align-items: flex-end; + justify-content: space-between; +} + +.footer-menu-items a { + color: #F8FAFC; + font-weight: 700; + text-decoration: none; + text-transform: uppercase; + transition: text-decoration 2s; +} + +.footer-menu-items a:hover { + text-decoration: underline; +} + +.footer-title { + margin-top: 50px; +} + +.footer-title div { + display: flex; +} + +.footer-title h1 { + font-weight: 700; + font-size: 10vmin; + text-transform: uppercase; + margin: 0; +} + +.footer-title h2 { + margin-top: 30px; +} + +.footer-links { + display: flex; + justify-content: space-between; + align-items: center; + margin: 50px 0px; +} + +.footer-links a { + color: #F8FAFC; + text-decoration: none; + transition: text-decoration 2s; +} + +.footer-links a:hover { + text-decoration: underline; +} + +.footer-links-items span { + color: #F8FAFC; +} + +.footer-links-insta { + display: flex; + align-items: center; +} + +.footer-links-insta svg { + margin-right: 10px; +} \ No newline at end of file diff --git a/V1/resources/css/components/hero.css b/V1/resources/css/components/hero.css new file mode 100644 index 0000000..693882b --- /dev/null +++ b/V1/resources/css/components/hero.css @@ -0,0 +1,196 @@ +.hero-title { + color: white; + font-size: 10vmin; + font-family: 'Mona-Sans'; + font-weight: bold; + line-height: 12vh; +} + +.hero-title2 { + position: relative; + top: 25px; + left: 15px; + color: white; + font-family: "Moonstone History"; + font-size: 10vmin; + line-height: 10vh; +} + +.hero-container { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + width: 100%; + background-color: black; + background-size: cover; + background-image: url("/resources/img/IMG_Accueil.png"); +} + +.hero-sub-container { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.hero-sub-container-separator { + height: 400px; + width: 2px; + background-color: #ffffff; + transform: rotate(15deg); + margin: 100px; +} + +.hero-sub-container-menu { + display: flex; + flex-direction: column; +} + +.hero-sub-container-menu-item1 { + font-size: 40px; + margin-bottom: 50px; + margin-left: 50px; + padding: 10px 20px; + font-family: "Montserrat", sans-serif; + font-optical-sizing: auto; + font-weight: 500; + font-style: normal; + color: #ffffff; + text-decoration: none; + transition: 0.5s; + border-radius: 50px; + background-color: #ff3c00; +} + +.hero-sub-container-menu-item1:hover { + cursor: pointer; + background-color: #ff5e00; +} + +.hero-sub-container-menu-item2 { + font-size: 30px; + margin-right: 60px; + padding: 10px 20px; + font-family: "Montserrat", sans-serif; + font-optical-sizing: auto; + font-weight: 500; + font-style: normal; + color: #ffffff; + text-decoration: none; + transition: 0.5s; + border-radius: 50px; + border: 3px solid white; +} + +.hero-sub-container-menu-item2:hover { + cursor: pointer; + background-color: #ff5e00; +} + +.hero-logo { + width: 80%; + max-width: 500px; +} + +.hero-decoration-text { + position: absolute; + white-space: nowrap; + overflow: hidden; + margin: 0 auto; +} + +.hero-decoration-text span { + color: #ffffff; + font-family: "Montserrat", sans-serif; + font-optical-sizing: auto; + font-weight: 600; + font-style: normal; + display: inline-block; + animation: marquee 5s linear infinite; +} + +.hero-decoration-text-top { + top: 62px; + width: calc(100% - 220px); +} + +.hero-decoration-text-bottom { + bottom: 62px; + width: calc(100% - 220px); + transform: rotate(180deg); +} + +.hero-decoration-text-left { + position: absolute; + transform: rotate(-90deg); + transform-origin: 0 0; + width: calc(100vh - 220px); +} + +.hero-decoration-text-left-container { + position: absolute; + left: 62px; + bottom: 110px; +} + +.hero-decoration-text-right { + position: absolute; + transform: rotate(90deg); + transform-origin: 0 0; + width: calc(100vh - 220px); +} + +.hero-decoration-text-right-container { + position: absolute; + right: 63px; + top: 110px; +} + +.hero-decoration-cross { + position: absolute; + height: 50px; + width: 50px; + color: #ffffff; +} + +.hero-decoration-arrow { + position: absolute; + color: #ffffff; + width: 10vmin; + bottom: 150px; + right: 180px; +} + +#cross_up_right { + top: 50px; + right: 50px; +} + +#cross_up_left { + top: 50px; + left: 50px; +} + +#cross_down_left { + bottom: 50px; + left: 50px; +} + +#cross_down_right { + bottom: 50px; + right: 50px; +} + +@keyframes marquee { + 0% { + transform: translate(0, 0); + } + 100% { + transform: translate(-150px, 0); + } +} + +@media only screen and (max-width: 800px) { + +} \ No newline at end of file diff --git a/V1/resources/css/components/legal.css b/V1/resources/css/components/legal.css new file mode 100644 index 0000000..7fb17f5 --- /dev/null +++ b/V1/resources/css/components/legal.css @@ -0,0 +1,36 @@ +.legal-container { + color: #fff; + background-color: #222; + padding: 10vmin; +} + +.legal-container h1 { + font-family: "Mona-Sans"; + font-weight: 800; + font-size: 75px; + margin: auto; + margin-bottom: 75px; + text-align: center; +} + +.legal-container h2 { + font-family: "Overused Grotesk"; + font-weight: 700; + font-size: 25px; + margin-top: 75px; +} + +.legal-container p { + font-family: "Overused Grotesk"; + font-size: 19px; +} + +.legal-container ul { + font-family: "Overused Grotesk"; + font-size: 19px; +} + +.legal-container li { + font-family: "Overused Grotesk"; + font-size: 19px; +} \ No newline at end of file diff --git a/V1/resources/css/components/main.css b/V1/resources/css/components/main.css new file mode 100644 index 0000000..d914320 --- /dev/null +++ b/V1/resources/css/components/main.css @@ -0,0 +1,32 @@ +@font-face { + font-family: 'Mona-Sans'; + src: + url('/resources/fonts/Mona-Sans.woff2') format('woff2 supports variations'), + url('/resources/fonts/Mona-Sans.woff2') format('woff2-variations'); + font-weight: 200 900; + font-stretch: 75% 125%; +} + +@font-face { + font-family: 'Moonstone History'; + src: url('/resources/fonts/Moonstone History.woff') format('woff'); +} + +@font-face { + font-family: 'Monsterrat'; + src: + url('/resources/fonts/Montserrat-VariableFont_wght.ttf') format('ttf supports variations'), + url('/resources/fonts/Montserrat-VariableFont_wght.ttf') format('ttf-variations'); +} + +@font-face { + font-family: "Overused Grotesk"; + src: + url("/resources/fonts/OverusedGrotesk-VF.woff2") format("woff2 supports variations"), + url("/resources/fonts/OverusedGrotesk-VF.woff2") format("woff2-variations"); + font-weight: 300 900; +} + +body { + margin: 0; +} diff --git a/V1/resources/css/components/menu.css b/V1/resources/css/components/menu.css new file mode 100644 index 0000000..9aa14ba --- /dev/null +++ b/V1/resources/css/components/menu.css @@ -0,0 +1,93 @@ +.menu-container { + font-family: 'Mona-Sans'; + padding: 25px 10vmin; + display: flex; + align-items: center; + justify-content: space-between; + position: sticky; + z-index: 8; +} + +.menu-container-white { + color:#222; + background-color: #ffffff; +} + +.menu-container-black { + color: #ffffff; + background-color: #222; +} + +.menu-items { + display: flex; +} + +.menu-items >a, .menu-items >div>button { + color: #ffffff; + padding-left: 50px; + font-weight: 700; + font-size: 15px; + text-decoration: none; + text-transform: uppercase; + transition: text-decoration 2s; + border: none; + outline: none; + background-color: inherit; + font-family: inherit; + margin: 0; +} + +.menu-items >a:hover, .menu-items >div>button:hover { + text-decoration: underline; +} + +.menu-subitem:hover .menu-subitem-items { + display: block; +} + +.menu-subitem-items { + display: none; + position: absolute; + left: 0; + top: 135px; + width: calc(100% - (20vmin + 120px)); + margin: 5px 10vmin; + z-index: 15; + border-radius: 15px; + background-color: #ffffff; + padding: 30px 60px; +} + +.menu-subitem-items::before { + content: ''; + position: absolute; + top: -65px; + bottom: 0; + width: 100%; + z-index: -1; +} + +.menu-subitem-items a { + display: flex; + align-items: baseline; + border-bottom: 1px solid #d4d6d8; + text-decoration: none; +} + +.menu-subitem-items a:hover { + text-decoration: underline; +} + +.menu-subitem-items h1 { + color: #222; + font-weight: 700; + font-size: 35px; + text-transform: uppercase; +} + +.menu-subitem-items h2 { + color: #222; + font-weight: 200; + font-size: 35px; + text-transform: uppercase; +} \ No newline at end of file diff --git a/V1/resources/css/components/mobilier.css b/V1/resources/css/components/mobilier.css new file mode 100644 index 0000000..fe45bd8 --- /dev/null +++ b/V1/resources/css/components/mobilier.css @@ -0,0 +1,54 @@ +.mobilier-main-container { + background-color: #222; + display: grid; + grid-template-columns: 5fr 7fr; +} + +.mobilier-images img { + width: 100%; +} + +.mobilier-description { + height: 100vh; + top: 0; + padding: 10vmin; + position: sticky; + color: #f8fafc; +} + +.mobilier-description h1 { + font-family: "Mona-Sans"; + font-weight: 800; + font-size: 100px; + margin-top: 80px; + margin-bottom: 20px; +} + +.mobilier-description h2 { + font-family: "Overused Grotesk"; + margin: 0; + font-weight: 100; + font-size: 35px; +} + +.mobilier-description p { + font-family: "Overused Grotesk"; + font-size: 19px; +} + +.mobilier-contact-container { + background-color: #222 !important; +} + +.mobilier-contact-container h1 { + color: #f8fafc !important; +} + +.mobilier-contact-container a { + background-color: #f8fafc !important; + color: #222 !important; +} + +.mobilier-footer-container .footer-menu { + border-top: 1px solid; +} diff --git a/V1/resources/css/components/projet.css b/V1/resources/css/components/projet.css new file mode 100644 index 0000000..6d10ca0 --- /dev/null +++ b/V1/resources/css/components/projet.css @@ -0,0 +1,54 @@ +.projet-main-container { + background-color: #222; + display: grid; + grid-template-columns: 5fr 7fr; +} + +.projet-images img { + width: 100%; +} + +.projet-description { + height: 100vh; + top: 0; + padding: 10vmin; + position: sticky; + color: #f8fafc; +} + +.projet-description h1 { + font-family: "Mona-Sans"; + font-weight: 800; + font-size: 75px; + margin-top: 80px; + margin-bottom: 20px; +} + +.projet-description h2 { + font-family: "Overused Grotesk"; + margin: 0; + font-weight: 100; + font-size: 35px; +} + +.projet-description p { + font-family: "Overused Grotesk"; + font-size: 19px; +} + +.projet-contact-container { + background-color: #222 !important; +} + +.projet-contact-container h1 { + color: #f8fafc !important; +} + +.projet-contact-container a { + background-color: #f8fafc !important; + color: #222 !important; +} + +.projet-footer-container .footer-menu { + border-top: 1px solid; +} \ No newline at end of file diff --git a/V1/resources/css/components/projets.css b/V1/resources/css/components/projets.css new file mode 100644 index 0000000..85318d0 --- /dev/null +++ b/V1/resources/css/components/projets.css @@ -0,0 +1,63 @@ +.projets-container { + height: calc(100vh - 200px); + display: flex; + flex-direction: column; + background-color: white; + padding: 10vmin; +} + +.projets-title { + color: black; + font-family: "Moonstone History"; + font-weight: 10; + font-size: 10vmin; + line-height: 12vh; + margin: 0; +} + +.projets-carrousel { + margin-top: 100px; + height: 100%; +} + +.projets-carrousel-item { + width: 80vmin; + height: 100%; + margin-right: 50px; + background-position: center; + background-size: cover; + display: flex; + flex-direction: column; + justify-content: end; +} + +.projets-carrousel-item h1 { + font-family: 'Overused Grotesk'; + font-weight: 700; + font-size: 4vmin; + color: rgba(248, 250, 252, 0.75); + margin: 0; + margin-left: 25px; + transition: font-size 0.2s; +} + +.projets-carrousel-item:hover h1 { + color: #F8FAFC; + text-decoration: underline; + font-size: 5vmin; +} + +.projets-carrousel-item h2 { + font-family: 'Overused Grotesk'; + font-weight: 400; + color: rgba(248, 250, 252, 0.75); + margin: 0; + margin-left: 25px; + margin-bottom: 25px; + transition: font-size 0.2s; +} + +.projets-carrousel-item:hover h2 { + color: #F8FAFC; + font-size: 4vmin; +} \ No newline at end of file diff --git a/V1/resources/css/components/punch.css b/V1/resources/css/components/punch.css new file mode 100644 index 0000000..f56f814 --- /dev/null +++ b/V1/resources/css/components/punch.css @@ -0,0 +1,41 @@ +.punch-container { + background-color: #222222; + display: flex; + justify-content: center; + align-items: center; + height: 400px; + background-image: url('/resources/img/logo_notext.png'); + background-repeat: no-repeat; + background-position: calc(50% - 250px); +} + +.punch-sub { + display: flex; + flex-direction: column; + align-items: center; +} + +.punch { + color: #F8FAFC; + font-family: 'Mona-Sans'; + font-weight: 300; + font-size: 3vmin; + margin: 0; + max-width: 900px; + text-align: center; +} + +.punch-quote-container { + width: 50px; +} + +.punch-quote-right { + position: relative; + bottom: -120px; +} + +.punch-quote-left { + position: relative; + top: -120px; + transform: rotate(180deg); +} diff --git a/V1/resources/css/pages/page_contact.css b/V1/resources/css/pages/page_contact.css new file mode 100644 index 0000000..7ead968 --- /dev/null +++ b/V1/resources/css/pages/page_contact.css @@ -0,0 +1,4 @@ +@import url('/resources/css/components/main.css'); +@import url('/resources/css/components/contact-form.css'); +@import url('/resources/css/components/menu.css'); +@import url('/resources/css/components/footer.css'); \ No newline at end of file diff --git a/V1/resources/css/pages/page_index.css b/V1/resources/css/pages/page_index.css new file mode 100644 index 0000000..c9d8dc8 --- /dev/null +++ b/V1/resources/css/pages/page_index.css @@ -0,0 +1,9 @@ +@import url('/resources/css/components/main.css'); +@import url('/resources/css/components/hero.css'); +@import url('/resources/css/components/projets.css'); +@import url('/resources/css/components/menu.css'); +@import url('/resources/css/components/punch.css'); +@import url('/resources/css/components/follow.css'); +@import url('/resources/css/components/about.css'); +@import url('/resources/css/components/contact.css'); +@import url('/resources/css/components/footer.css'); \ No newline at end of file diff --git a/V1/resources/css/pages/page_legal.css b/V1/resources/css/pages/page_legal.css new file mode 100644 index 0000000..2559169 --- /dev/null +++ b/V1/resources/css/pages/page_legal.css @@ -0,0 +1,4 @@ +@import url('/resources/css/components/main.css'); +@import url('/resources/css/components/legal.css'); +@import url('/resources/css/components/menu.css'); +@import url('/resources/css/components/footer.css'); \ No newline at end of file diff --git a/V1/resources/css/pages/page_mobilier.css b/V1/resources/css/pages/page_mobilier.css new file mode 100644 index 0000000..46babe4 --- /dev/null +++ b/V1/resources/css/pages/page_mobilier.css @@ -0,0 +1,5 @@ +@import url('/resources/css/components/main.css'); +@import url('/resources/css/components/mobilier.css'); +@import url('/resources/css/components/menu.css'); +@import url('/resources/css/components/contact.css'); +@import url('/resources/css/components/footer.css'); \ No newline at end of file diff --git a/V1/resources/css/pages/page_projet.css b/V1/resources/css/pages/page_projet.css new file mode 100644 index 0000000..1473104 --- /dev/null +++ b/V1/resources/css/pages/page_projet.css @@ -0,0 +1,7 @@ +@import url('/resources/css/components/main.css'); +@import url('/resources/css/components/projet.css'); +@import url('/resources/css/components/compare.css'); +@import url('/resources/css/components/menu.css'); +@import url('/resources/css/components/punch.css'); +@import url('/resources/css/components/contact.css'); +@import url('/resources/css/components/footer.css'); \ No newline at end of file diff --git a/V1/resources/fonts/Mona-Sans.woff2 b/V1/resources/fonts/Mona-Sans.woff2 new file mode 100644 index 0000000..d88d5ff Binary files /dev/null and b/V1/resources/fonts/Mona-Sans.woff2 differ diff --git a/V1/resources/fonts/Montserrat-VariableFont_wght.ttf b/V1/resources/fonts/Montserrat-VariableFont_wght.ttf new file mode 100644 index 0000000..797c4a5 Binary files /dev/null and b/V1/resources/fonts/Montserrat-VariableFont_wght.ttf differ diff --git a/V1/resources/fonts/Moonstone History.woff b/V1/resources/fonts/Moonstone History.woff new file mode 100644 index 0000000..7c96165 Binary files /dev/null and b/V1/resources/fonts/Moonstone History.woff differ diff --git a/V1/resources/fonts/Moonstone-History.otf b/V1/resources/fonts/Moonstone-History.otf new file mode 100644 index 0000000..cf65835 Binary files /dev/null and b/V1/resources/fonts/Moonstone-History.otf differ diff --git a/V1/resources/fonts/MsMadi-Regular.ttf b/V1/resources/fonts/MsMadi-Regular.ttf new file mode 100644 index 0000000..310d480 Binary files /dev/null and b/V1/resources/fonts/MsMadi-Regular.ttf differ diff --git a/V1/resources/fonts/OverusedGrotesk-VF.woff2 b/V1/resources/fonts/OverusedGrotesk-VF.woff2 new file mode 100644 index 0000000..3d77d22 Binary files /dev/null and b/V1/resources/fonts/OverusedGrotesk-VF.woff2 differ diff --git a/V1/resources/img/IMG_Accueil.png b/V1/resources/img/IMG_Accueil.png new file mode 100644 index 0000000..57aaa5e Binary files /dev/null and b/V1/resources/img/IMG_Accueil.png differ diff --git a/V1/resources/img/IMG_À_propos_1.png b/V1/resources/img/IMG_À_propos_1.png new file mode 100644 index 0000000..1fda258 Binary files /dev/null and b/V1/resources/img/IMG_À_propos_1.png differ diff --git a/V1/resources/img/ico.ico b/V1/resources/img/ico.ico new file mode 100644 index 0000000..37d95e3 Binary files /dev/null and b/V1/resources/img/ico.ico differ diff --git a/V1/resources/img/ico.png b/V1/resources/img/ico.png new file mode 100644 index 0000000..41fd41b Binary files /dev/null and b/V1/resources/img/ico.png differ diff --git a/V1/resources/img/logo.png b/V1/resources/img/logo.png new file mode 100644 index 0000000..e6ea8eb Binary files /dev/null and b/V1/resources/img/logo.png differ diff --git a/V1/resources/img/logo_notext.png b/V1/resources/img/logo_notext.png new file mode 100644 index 0000000..a1d4a46 Binary files /dev/null and b/V1/resources/img/logo_notext.png differ diff --git a/V1/resources/img/logo_w.png b/V1/resources/img/logo_w.png new file mode 100644 index 0000000..c6638d9 Binary files /dev/null and b/V1/resources/img/logo_w.png differ diff --git a/V1/resources/img/mobilier/IMG_PM1_I1.1.png b/V1/resources/img/mobilier/IMG_PM1_I1.1.png new file mode 100644 index 0000000..1fda258 Binary files /dev/null and b/V1/resources/img/mobilier/IMG_PM1_I1.1.png differ diff --git a/V1/resources/img/mobilier/IMG_PM1_I1.2.png b/V1/resources/img/mobilier/IMG_PM1_I1.2.png new file mode 100644 index 0000000..65eb206 Binary files /dev/null and b/V1/resources/img/mobilier/IMG_PM1_I1.2.png differ diff --git a/V1/resources/img/mobilier/IMG_PM1_I1.3.png b/V1/resources/img/mobilier/IMG_PM1_I1.3.png new file mode 100644 index 0000000..f027f00 Binary files /dev/null and b/V1/resources/img/mobilier/IMG_PM1_I1.3.png differ diff --git a/V1/resources/img/projets/IMG_Miniature_1.png b/V1/resources/img/projets/IMG_Miniature_1.png new file mode 100644 index 0000000..d73b3bc Binary files /dev/null and b/V1/resources/img/projets/IMG_Miniature_1.png differ diff --git a/V1/resources/img/projets/IMG_Miniature_2.png b/V1/resources/img/projets/IMG_Miniature_2.png new file mode 100644 index 0000000..79cb215 Binary files /dev/null and b/V1/resources/img/projets/IMG_Miniature_2.png differ diff --git a/V1/resources/img/projets/IMG_Miniature_3.png b/V1/resources/img/projets/IMG_Miniature_3.png new file mode 100644 index 0000000..3b8cab6 Binary files /dev/null and b/V1/resources/img/projets/IMG_Miniature_3.png differ diff --git a/V1/resources/img/projets/IMG_PA1_I1.1.png b/V1/resources/img/projets/IMG_PA1_I1.1.png new file mode 100644 index 0000000..d73b3bc Binary files /dev/null and b/V1/resources/img/projets/IMG_PA1_I1.1.png differ diff --git a/V1/resources/img/projets/IMG_PA1_I1.2.png b/V1/resources/img/projets/IMG_PA1_I1.2.png new file mode 100644 index 0000000..57aaa5e Binary files /dev/null and b/V1/resources/img/projets/IMG_PA1_I1.2.png differ diff --git a/V1/resources/img/projets/IMG_PA1_I1.3.png b/V1/resources/img/projets/IMG_PA1_I1.3.png new file mode 100644 index 0000000..0c79115 Binary files /dev/null and b/V1/resources/img/projets/IMG_PA1_I1.3.png differ diff --git a/V1/resources/img/projets/IMG_PA1_I2.1.png b/V1/resources/img/projets/IMG_PA1_I2.1.png new file mode 100644 index 0000000..2258b9a Binary files /dev/null and b/V1/resources/img/projets/IMG_PA1_I2.1.png differ diff --git a/V1/resources/img/projets/IMG_PA1_I2.2.png b/V1/resources/img/projets/IMG_PA1_I2.2.png new file mode 100644 index 0000000..57aaa5e Binary files /dev/null and b/V1/resources/img/projets/IMG_PA1_I2.2.png differ diff --git a/V1/resources/script/index.js b/V1/resources/script/index.js new file mode 100644 index 0000000..db5bf93 --- /dev/null +++ b/V1/resources/script/index.js @@ -0,0 +1,6 @@ +document.addEventListener('DOMContentLoaded', () => { + new Flickity(document.getElementById('carrousel'), { + autoPlay: true, + groupCells: '75%', + }); +}); \ No newline at end of file