Initial V1

This commit is contained in:
2024-06-15 16:09:50 +02:00
parent 01e33a3ff0
commit 6ab4e3f2df
50 changed files with 2128 additions and 0 deletions

View File

@@ -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;
}
}

View File

@@ -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;
}

View File

@@ -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;
}

View File

@@ -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;
}

View File

@@ -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;
}
}

View File

@@ -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;
}

View File

@@ -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) {
}

View File

@@ -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;
}

View File

@@ -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;
}

View File

@@ -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;
}

View File

@@ -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;
}

View File

@@ -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;
}

View File

@@ -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;
}

View File

@@ -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);
}

View File

@@ -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');

View File

@@ -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');

View File

@@ -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');

View File

@@ -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');

View File

@@ -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');