Initial V1
This commit is contained in:
71
V1/resources/css/components/about.css
Normal file
71
V1/resources/css/components/about.css
Normal 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;
|
||||
}
|
||||
}
|
||||
112
V1/resources/css/components/compare.css
Normal file
112
V1/resources/css/components/compare.css
Normal 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;
|
||||
}
|
||||
33
V1/resources/css/components/contact-form.css
Normal file
33
V1/resources/css/components/contact-form.css
Normal 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;
|
||||
}
|
||||
35
V1/resources/css/components/contact.css
Normal file
35
V1/resources/css/components/contact.css
Normal 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;
|
||||
}
|
||||
89
V1/resources/css/components/follow.css
Normal file
89
V1/resources/css/components/follow.css
Normal 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;
|
||||
}
|
||||
}
|
||||
87
V1/resources/css/components/footer.css
Normal file
87
V1/resources/css/components/footer.css
Normal 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;
|
||||
}
|
||||
196
V1/resources/css/components/hero.css
Normal file
196
V1/resources/css/components/hero.css
Normal 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) {
|
||||
|
||||
}
|
||||
36
V1/resources/css/components/legal.css
Normal file
36
V1/resources/css/components/legal.css
Normal 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;
|
||||
}
|
||||
32
V1/resources/css/components/main.css
Normal file
32
V1/resources/css/components/main.css
Normal 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;
|
||||
}
|
||||
93
V1/resources/css/components/menu.css
Normal file
93
V1/resources/css/components/menu.css
Normal 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;
|
||||
}
|
||||
54
V1/resources/css/components/mobilier.css
Normal file
54
V1/resources/css/components/mobilier.css
Normal 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;
|
||||
}
|
||||
54
V1/resources/css/components/projet.css
Normal file
54
V1/resources/css/components/projet.css
Normal 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;
|
||||
}
|
||||
63
V1/resources/css/components/projets.css
Normal file
63
V1/resources/css/components/projets.css
Normal 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;
|
||||
}
|
||||
41
V1/resources/css/components/punch.css
Normal file
41
V1/resources/css/components/punch.css
Normal 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);
|
||||
}
|
||||
4
V1/resources/css/pages/page_contact.css
Normal file
4
V1/resources/css/pages/page_contact.css
Normal 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');
|
||||
9
V1/resources/css/pages/page_index.css
Normal file
9
V1/resources/css/pages/page_index.css
Normal 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');
|
||||
4
V1/resources/css/pages/page_legal.css
Normal file
4
V1/resources/css/pages/page_legal.css
Normal 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');
|
||||
5
V1/resources/css/pages/page_mobilier.css
Normal file
5
V1/resources/css/pages/page_mobilier.css
Normal 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');
|
||||
7
V1/resources/css/pages/page_projet.css
Normal file
7
V1/resources/css/pages/page_projet.css
Normal 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');
|
||||
Reference in New Issue
Block a user