diff --git a/src/App.js b/src/App.js
index f4be26a57531c83a40f162e58cddfb030289742f..f56fd4894f5518b2fb84ad154159c17b726b72e4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,7 +1,6 @@
import 'antd/dist/antd.css';
import MainPage from "./js/pages/MainPage";
-import {useEffect} from "react";
const App = () => {
diff --git a/src/js/sections/BottomSection/BottomSection.js b/src/js/sections/BottomSection/BottomSection.js
index e4e8838c3eec2ffb796347ef188eee6560be26ca..ddfd4c46758c632ce936951e5427a9c28fc37ed1 100644
--- a/src/js/sections/BottomSection/BottomSection.js
+++ b/src/js/sections/BottomSection/BottomSection.js
@@ -21,33 +21,35 @@ const BottomSection = ({innerRef, contactRef}) => {
"Comment garder la proximité des TPs sur site lorsque vos étudiants sont confinés."
</p>
<p className={styles.SecondComment}>
- Retour d'expérience sur l'outillage et notamment Deadlock pour des séances de tp@home en période de confinement.
+ Retour d'expérience sur l'outillage et notamment Deadlock pour des séances de tp@home en
+ période de confinement.
</p>
</div>
<div className={styles.ButtonContainer}>
- <Button type="link" link={articleLink} className={styles.ArticleButton}>Acceder à l'article</Button>
+ <Button type="link" link={articleLink} className={styles.ArticleButton}>Acceder à
+ l'article</Button>
</div>
</div>
- <div ref={contactRef} className={styles.BottomBlock}>
- <div className={styles.Logos}>
- <img src={logoInsa} alt={"insa logo"}/>
- <img src={logoEpf} alt={"epf logo"}/>
- <p>
- Ils ont déjà expérimenté notre plateforme.
- </p>
- </div>
- <div id="Contact" className={styles.ContactLinks}>
- <p className={styles.BigCaption}>
- Offrez à vos étudiants les meilleurs outils pour apprendre.
- </p>
- <Button type={"link"} link={askForDemoLink} className={styles.ContactButton}>Contactez-nous</Button>
- <p className={styles.SmallCaption}>
- Pour être les prochains !
- </p>
- </div>
-
+ </div>
+ <div ref={contactRef} className={styles.BottomBlock}>
+ <div className={styles.Logos}>
+ <img src={logoInsa} alt={"insa logo"}/>
+ <img src={logoEpf} alt={"epf logo"}/>
+ <p>
+ Ils ont déjà expérimenté notre plateforme.
+ </p>
</div>
+ <div id="Contact" className={styles.ContactLinks}>
+ <p className={styles.BigCaption}>
+ Offrez à vos étudiants les meilleurs outils pour apprendre.
+ </p>
+ <Button type={"link"} link={askForDemoLink} className={styles.ContactButton}>Contactez-nous</Button>
+ <p className={styles.SmallCaption}>
+ Pour être les prochains !
+ </p>
+ </div>
+
</div>
</div>
);
diff --git a/src/js/sections/BottomSection/BottomSection.module.scss b/src/js/sections/BottomSection/BottomSection.module.scss
index 5637227ce5d8d1d1abb0f367b5d4db55ce5646f8..ca5298d331dff2cc64b0dbf851d809e1c7dc3b82 100644
--- a/src/js/sections/BottomSection/BottomSection.module.scss
+++ b/src/js/sections/BottomSection/BottomSection.module.scss
@@ -5,18 +5,16 @@
.BottomSection {
background-image: url('#{$assetPath}/curves/courbe_4.png'), url('#{$assetPath}/props/bateau.svg'), url('#{$assetPath}/props/algue.svg');
background-repeat: no-repeat;
- background-position: bottom, 107% 42%, -5% 55%;
+ background-position: bottom, 110% 42%, -5% 55%;
background-size: 100% 50%, 35% 35%, 40% 40%;
- min-height: 140vh;
+ height: auto;
display: flex;
flex-direction: column;
align-items: center;
- flex-wrap: wrap;
font-family: $primary_font;
padding-top: 10%;
- position: relative;
-
+ justify-content: space-between;
.MiddleBlock {
padding: 2% 2%;
@@ -71,14 +69,15 @@
.BottomBlock {
- position: absolute;
- bottom: 5%;
display: flex;
flex-direction: row;
align-items: center;
+ justify-content: center;
+ margin-top: 50vh;
.Logos {
max-width: 40%;
+ flex-basis: 30%;
display: flex;
flex-direction: column;
align-items: center;
@@ -100,6 +99,7 @@
}
.ContactLinks {
+ flex-basis: 30%;
max-width: 20%;
display: flex;
flex-direction: column;
@@ -138,7 +138,6 @@
@media (max-width: 1024px) {
.BottomSection {
- min-height: 100vh;
.MiddleBlock {
max-width: 60vw;
@@ -203,7 +202,6 @@
Button {
width: 100%;
- height: 30%;
}
@@ -216,7 +214,6 @@
@media (max-width: 768px) {
.BottomSection {
- min-height: 100vh;
background-position: bottom, 105% 48%, -5% 60%;
.MiddleBlock {
@@ -311,7 +308,6 @@
@media (max-width: 425px) {
.BottomSection {
- min-height: 75vh;
background-position: bottom, 106% 49%, -5% 63%;
.MiddleBlock {
@@ -350,17 +346,18 @@
}
}
-
-
}
}
.BottomBlock {
bottom: 1%;
+ margin-top: 20vh;
+
.Logos {
margin-right: 5%;
+ flex-basis: 35%;
max-width: 30%;
flex-direction: column;
@@ -379,7 +376,8 @@
}
.ContactLinks {
- max-width: 40%;
+ max-width: 100%;
+ flex-basis: 35%;
.BigCaption {
font-size: 0.8rem;
@@ -395,6 +393,7 @@
.SmallCaption {
font-size: 0.6rem;
line-height: 1rem;
+ max-width: 100%;
}
}
}
@@ -404,7 +403,6 @@
@media (max-width: 375px) {
.BottomSection {
- min-height: 55vh;
background-position: bottom, 106% 49%, -5% 63%;
.MiddleBlock {
@@ -439,11 +437,12 @@
}
.BottomBlock {
-
+ margin-top: 20vh;
.Logos {
margin-right: 5%;
max-width: 35%;
+ flex-basis: 37%;
flex-direction: column;
@@ -458,6 +457,7 @@
.ContactLinks {
max-width: 45%;
+ flex-basis: 37%;
.BigCaption {
font-size: 0.6rem;
@@ -482,7 +482,9 @@
@media (max-width: 320px) {
.BottomSection {
- min-height: 65vh;
+ .BottomBlock {
+
+ }
}
}
diff --git a/src/js/sections/LandingSection/LandingSection.module.scss b/src/js/sections/LandingSection/LandingSection.module.scss
index 08e56932b74fafbb5e4a7ec2902f3d2fbec1521e..8294b0d8fdbb7c199d930e25c1cea86910e6877a 100644
--- a/src/js/sections/LandingSection/LandingSection.module.scss
+++ b/src/js/sections/LandingSection/LandingSection.module.scss
@@ -7,7 +7,8 @@
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
- min-height: 100vh;
+ height: auto;
+ padding: 20vh 0 25vh 0;
display: flex;
flex-direction: row;
align-items: center;
@@ -68,7 +69,7 @@
font-family: $primary_font;
vertical-align: middle;
flex-basis: 40%;
- margin-left: -10vw;
+ margin-left: -15vw;
.Title {
font-size: 5rem;
@@ -83,13 +84,24 @@
}
}
+@media (max-width: 1024px) and (orientation: landscape){
+
+ .LandingSection {
+
+
+ .RightSide {
+ margin-left: -20vw;
+
+ }
+ }
+}
+
@media (max-width: 768px) {
.LandingSection {
flex-direction: column;
- padding-top: 15%;
.RightSide {
margin-left: 0;
@@ -100,8 +112,8 @@
@media (max-width: 425px) {
.LandingSection {
- padding-top: 5%;
- min-height: 85vh;
+ padding: 8vh 0 20vh 0;
+
.LeftSide {
@@ -122,11 +134,9 @@
}
}
-@media (max-width: 320px) {
+@media (max-width: 375px) {
.LandingSection {
- padding-top: 3%;
- min-height: 65vh;
.LeftSide {
diff --git a/src/js/sections/TowerSection/TowerSection.module.scss b/src/js/sections/TowerSection/TowerSection.module.scss
index affabf1d388a3f20f27e571dff92a6042386b661..5ea45b62d198e0a08878080de597099cf157d3eb 100644
--- a/src/js/sections/TowerSection/TowerSection.module.scss
+++ b/src/js/sections/TowerSection/TowerSection.module.scss
@@ -5,15 +5,15 @@
.TowerSection {
background: $primary_lightblue;
background-size: 100% 100%;
- min-height: 90vh;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
-
+ height: auto;
color: $primary_black;
font-family: $primary_font;
+ padding: 5vh 0 5vh 0;
.LeftSide {
flex-basis: 30%;
@@ -49,7 +49,6 @@
@media (max-width: 1440px) {
.TowerSection {
- min-height: 90vh;
.LeftSide {
flex-basis: 30%;
.TowerImage {
@@ -77,7 +76,6 @@
@media (max-width: 1024px) {
.TowerSection {
- min-height: 60vh;
.LeftSide {
flex-basis: 30%;
.TowerImage {
@@ -123,7 +121,8 @@
.RightSide {
padding-top: 5%;
- max-width: 60%;
+ max-width: 70%;
+ text-align: center;
.Caption {
padding-top: 4%;
max-width: 60%;
diff --git a/src/js/sections/VscodeSection/VscodeSection.module.scss b/src/js/sections/VscodeSection/VscodeSection.module.scss
index 26bbb84f3b8af6b969204464093c04d0ac304fd4..6c266db23cac99dbeb8577599639ef9fe6d0046d 100644
--- a/src/js/sections/VscodeSection/VscodeSection.module.scss
+++ b/src/js/sections/VscodeSection/VscodeSection.module.scss
@@ -157,6 +157,19 @@
}
}
+@media (max-width: 320px) {
+ .VscodeSection {
+
+ .LeftSide {
+ .VscodeImage {
+ margin-top: 0;
+ width: 70vw;
+ height: 20vh;
+ }
+ }
+ }
+}
+