improve home desktop

LauraKapitza · Oct 3, 2021 · 5e81a8b · 5e81a8b
1 parent d454a9f
commit 5e81a8b
Show file tree

Hide file tree

Showing 13 changed files with 410 additions and 258 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -14,7 +14,13 @@
     "titleBar.activeBackground": "#8d71d9",
     "titleBar.activeForeground": "#15202b",
     "titleBar.inactiveBackground": "#8d71d999",
-    "titleBar.inactiveForeground": "#15202b99"
+    "titleBar.inactiveForeground": "#15202b99",
+    "editorGroup.border": "#ad99e4",
+    "panel.border": "#ad99e4",
+    "sash.hoverBorder": "#ad99e4",
+    "sideBar.border": "#ad99e4",
+    "statusBarItem.remoteBackground": "#8d71d9",
+    "statusBarItem.remoteForeground": "#15202b"
   },
   "peacock.color": "#8d71d9"
 }
diff --git a/olympi-client/src/components/home/Features/Features.css b/olympi-client/src/components/home/Features/Features.css
@@ -2,7 +2,7 @@
   width:100%;
   display: flex;
   flex-direction: column;
-  background-color: #E41E1E;
+  background-color: #ec6262;
 }
 
 .custom-shape-divider-top-1627737931 {
@@ -23,20 +23,13 @@
   fill: #ffffff;
 }
 
-/** For tablet devices **/
-@media (min-width: 768px) and (max-width: 1023px) {
-  .custom-shape-divider-top-1627737931 svg {
-      width: calc(100% + 1.3px);
-      height: 90px;
-  }
-}
+
 
 .title {
-  padding-top: 70px;
-  padding-bottom: 20px;
-  font-size: 6vw;
+  padding-top: 70px; padding-bottom: 20px;
+  font-size: 3.5em;
   color: #ffffff;
-text-align: center;
+  text-align: center;
 }
 
 .FeaturesList{
@@ -48,22 +41,62 @@ text-align: center;
 }
 
 .feature{
-
+  display: flex;
+  align-items: center;
   padding: 30px;
 
 }
 
+.feature.revert {
+  flex-direction: row-reverse;
+}
+
 .featureTitle{
-  font-size: 5vw;
   color: #ffffff;
+  font-size: 3em;
+  line-height: 1.2em;
   padding: 30px;
 }
 
 .featureDesc{
   color: rgb(242, 232, 232);
+  display: inline-block;
+  padding: 0 100px;
 }
 
 .FeaturesList img {
-  width: 90%;
+  width: 50%;
   border-radius: 22px;
-}
+}
+
+
+@media (max-width: 340px) {
+  #Features .title h3 {
+    font-size: 2.8rem;
+  }
+}
+
+@media (max-width: 425px) {
+  .FeaturesList,
+  .feature,
+  .feature.revert {
+    flex-direction: column;
+  }
+
+  .featureTitle {
+    font-size: 2em;
+  }
+
+  .featureDesc {
+    padding: 0;
+  }
+}
+
+/** For tablet devices **/
+@media (min-width: 768px) and (max-width: 1023px) {
+  .custom-shape-divider-top-1627737931 svg {
+      width: calc(100% + 1.3px);
+      height: 90px;
+  }
+}
+
diff --git a/olympi-client/src/components/home/Features/Features.js b/olympi-client/src/components/home/Features/Features.js
@@ -13,20 +13,34 @@ export default function Features() {
     </svg>
     </div>
 
-    <div className="title"> <h3>Features</h3></div>
-    <div className="FeaturesList">
-    <div className="feature 1"><img src="/assets/photos/Tagsphoto.png" alt=""></img>
-     <h3 className="featureTitle">Get Feedback</h3> 
-     <span className="featureDesc">Crowdsource feedback from thousands of ofther weightlifters by uploading your workouts</span> </div>
-
-
-    <div className="feature 2"><img src="/assets/photos/commentsscreenshot.png" alt=""></img> 
-    <h3 className="featureTitle">Improve your form</h3> 
-    <span className="featureDesc">Ask the professional community for advice and document your progression</span> </div>
-
-    <div className="feature 3"><img src="/assets/photos/userprofilescreenshot.png" alt=""></img> 
-    <h3 className="featureTitle">Stay Motivated</h3> 
-    <span className="featureDesc">Find an inclusive, motivated, and helpful community to reach your goals and learn from setbacks</span> </div>
+    <div className="title home-fixed-size">
+    <h3>Features</h3></div>
+
+    <div className="FeaturesList home-fixed-size">
+      <div className="feature">
+        <img src="/assets/photos/Tagsphoto.png" alt=""></img>
+        <div>
+          <h3 className="featureTitle">Get Feedback</h3> 
+          <span className="featureDesc">Crowdsource feedback from thousands of ofther weightlifters by uploading your workouts</span>
+        </div>
+      </div>
+
+
+      <div className="feature revert">
+        <img src="/assets/photos/commentsscreenshot.png" alt=""></img>
+        <div>
+          <h3 className="featureTitle">Improve your form</h3> 
+          <span className="featureDesc">Ask the professional community for advice and document your progression</span>
+        </div> 
+      </div>
+
+      <div className="feature">
+        <img src="/assets/photos/userprofilescreenshot.png" alt=""></img>
+        <div>
+          <h3 className="featureTitle">Stay Motivated</h3> 
+          <span className="featureDesc">Find an inclusive, motivated, and helpful community to reach your goals and learn from setbacks</span>
+        </div>
+      </div>
 
     </div>
 

diff --git a/olympi-client/src/components/home/Footer/Footer.css b/olympi-client/src/components/home/Footer/Footer.css
@@ -1,66 +1,73 @@
 .FooterContainer{
   background-color: #FDEFEF;
-  width:100%;
+  width:100%;  
+}
+
+.FooterContainer .home-fixed-size {
   display: flex;
-  flex-direction: column;
-  align-items:center;
-
+  align-items:flex-start;
+  justify-content: space-evenly;
+  padding-top: 40px; padding-bottom: 20px;;
 }
 
 .FooterLeft {
-  padding-top: 30px;
-display: flex;
-flex-direction: column;
-align-items: center;
-justify-content: center;
-
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 
 
 
-  .FooterCenterLeft{
-    padding-top: 2vh;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+.FooterCenterLeft{
+  padding-top: 2vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 
-  }
+}
 
-
-
-  .FooterCenterRight{
-    padding-top: 2vh;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
 
-  }
 
-  #ContactUs {
-    padding-top: 2vh;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding-bottom: 2vh;
-
+.FooterCenterRight{
+  padding-top: 2vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 
-  }
+}
 
-  .FooterContainer h3{
-    color: #E41E1E;
-  }
+#ContactUs {
+  padding-top: 2vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-bottom: 2vh;
+}
+
+.FooterContainer h3{
+  color: #E41E1E;
+}
 
 .Instagram a{
   color: #E41E1E;
 }
 
-  a {
-    color: black;
-  }
-  a:hover {
-     color: #E41E1E;
-  }
+a {
+  color: black;
+}
+
+a:hover {
+  color: #E41E1E;
+}
 
+@media (max-width: 425px) {
+  .FooterContainer .home-fixed-size {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+}
 
 
 
diff --git a/olympi-client/src/components/home/Footer/Footer.js b/olympi-client/src/components/home/Footer/Footer.js
@@ -8,36 +8,39 @@ import InstagramIcon from '@material-ui/icons/Instagram';
 function Footer() {
   return (
     <div className= "FooterContainer">
-      <div className="FooterLeft">
-      <img src="/assets/logos/olympifigure.png" alt="" className="logo"/><img src="/assets/logos/olympiword.png" alt="" className="logo"/>  </div>
-
-
-      <div className="FooterCenterLeft"> 
-      <h3>Company</h3>
-      <Link to="/team" >Olympi Team</Link>
-
-
-      </div>
-
-      <div className="FooterCenterRight"> 
-      <h3>Resources</h3>
-      <Link to="/faq" >FAQ</Link>
-      <Link to="/blog" >Blog</Link>
-      <Link to="/terms" >Terms & Conditions</Link>
-      </div>
 
+      <div className='home-fixed-size'>
 
-      <div id="ContactUs">
-      <h3>Contact Us</h3>
-      <span>+33 07 66 33 78 48 </span>
-      <span>[email protected]</span>
-      </div>
+        <div className="FooterLeft">
+
+          <img src="/assets/logos/olympifigure.png" alt="" className="logo"/><img src="/assets/logos/olympiword.png" alt="" className="logo"/>  </div> 
 
-      <div className="Instagram">
-      <Link to="//www.instagram.com/olympi_app/" ><InstagramIcon/></Link>
+          <div className="FooterCenterLeft"> 
+            <h3>Company</h3>
+            <Link to="/team" >Olympi Team</Link>
+          </div>
+
+          <div className="FooterCenterRight"> 
+            <h3>Resources</h3>
+            <Link to="/faq" >FAQ</Link>
+            <Link to="/blog" >Blog</Link>
+            <Link to="/terms" >Terms & Conditions</Link>
+          </div>
+
+
+          <div id="ContactUs">
+            <h3>Contact Us</h3>
+            <span>+33 07 66 33 78 48 </span>
+            <span>[email protected]</span>
+            <div className="Instagram">
+              <Link to="//www.instagram.com/olympi_app/" ><InstagramIcon/></Link>
+          </div>
+
+        </div>
 
       </div>
 
+
     </div>
 
 

diff --git a/olympi-client/src/components/home/Homepage.css b/olympi-client/src/components/home/Homepage.css
@@ -0,0 +1,9 @@
+.homeContainer {
+  background: white;
+  width:100%;
+}
+
+.home-fixed-size {
+  max-width: 1024px;
+  margin: 0 auto;
+}
diff --git a/olympi-client/src/components/home/Homepage.js b/olympi-client/src/components/home/Homepage.js
@@ -1,9 +1,10 @@
-import NavbarTop from "./navbarTop/NavbarTop"
-import Features from "./Features/Features"
-import Intro from "./Intro/Intro"
-import HowItWorks from "./HowItWorks/HowItWorks"
-import Footer from "./Footer/Footer"
-import Reviews from "./Reviews/Reviews"
+import NavbarTop from "./navbarTop/NavbarTop";
+import Features from "./Features/Features";
+import Intro from "./Intro/Intro";
+import HowItWorks from "./HowItWorks/HowItWorks";
+import Footer from "./Footer/Footer";
+import Reviews from "./Reviews/Reviews";
+import './Homepage.css';
 
 export default function Homepage (props) {
   return (