atlp-rwanda · b0nbon1 · Dec 1, 2020 · Nov 26, 2020
diff --git a/src/App.js b/src/App.js
@@ -8,6 +8,7 @@ import 'bootstrap/dist/css/bootstrap.min.css'
 import HomePage from './components/HomePage'
 
 
+
 const App = () => (
   <div className='app'>
     <Router>

diff --git a/src/App.scss b/src/App.scss
@@ -15,6 +15,8 @@ $mainBgColor: #FBFCFC;
     background-color:$mainBgColor;
     font-family: 'Lato', sans-serif;
     overflow: hidden;
+    min-height: 100vh;
+    position: relative;
   }
 
   .title {
@@ -26,6 +28,8 @@ $mainBgColor: #FBFCFC;
 .custom-nav{
   background-color: $headerColor;
   font-size: 1em;
+  margin-left:-30px;
+  margin-right: -20px;
   .logo{
     width: 70px;
   }
@@ -98,16 +102,13 @@ $mainBgColor: #FBFCFC;
 }
 
 .destination{
-  width: 50%;
+  width: 100%;
 }
-.home-container{
-  margin: 2em;
-  .pop-services{
-    font-size: 30px;
-    color: $mainTextColor;
-    text-align: center;
-    padding: 1.5em;
-  }
+.pop-services{
+  font-size: 25px;
+  color: $mainTextColor;
+  text-align: center;
+  padding: 1.5em;
 }
 .home-intro-text{
   text-align: center;
@@ -135,9 +136,6 @@ $mainBgColor: #FBFCFC;
     left: 0;
   }
 }
-
-
-
 .cards-slider-wrapper {
   display: flex;
   position: absolute;
@@ -155,7 +153,7 @@ $mainBgColor: #FBFCFC;
       opacity: 0;
       transition: opacity 150ms linear;
       text-align: center;
-      h1{
+      .card-title{
         font-size: 2em;
       }
     }
@@ -174,16 +172,15 @@ $i: 0;
       }
     }
 }
-
-.col {
+.custom-col {
   height: 264px;
   position: relative;
   &:before,
   &:after {
       content: '';
       display: block;
       width: 50%;
-      height: 100%;
+      height: 75%;
       background: linear-gradient(to right, rgba(255, 255, 255, 1) 15%, rgba(255, 255, 255, 0) 100%);
       position: absolute;
       top: 0;
@@ -196,47 +193,56 @@ $i: 0;
       background: linear-gradient(to left, rgba(255, 255, 255, 1) 15%, rgba(255, 255, 255, 0) 100%);
   }
 }
+
 .services{
   display:grid;
   grid-template-columns: 5% 90% 5%;
-  .service-img{
-    max-width: 300px;
-    height: 200px;
+  margin-bottom: 10em;
+}
+.service-img{
+  max-width: 300px;
+  height: 200px;
+}
+
+.service-btn{
+  z-index: 1;
+  outline: none;
+  border: 1px solid $mainBgColor;
+  background-color: $mainBgColor;
+  align-self: end;
+  padding:-20px;
+  img{
+    width: 60px;
   }
-  .service-btn{
-    z-index: 1;
-    outline: none;
-    border: 1px solid $mainBgColor;
-    background-color: $mainBgColor;
-    align-self: end;
-    padding:-20px;
-    img{
-      width: 100px;
-    }
+}
+.prev-btn{
+  margin-left: -70px;
+}
+@media(max-width:360px){
+  .services{
+    margin-bottom: 13em;
   }
-  .prev-btn{
-    margin-left: -60px;
+}
+@media(max-width:320px){
+  .card-title{
+    font-size: 1.6em !important;
+  }
+  .details{
+    width:87%;
+  }
+  .service-img{
+    height: 190px;
   }
 }
-.footer-containter{
-  background-color: $headerColor;
-  color: $mainTextColor;
-  font-size: 16px;
-  max-width:100%;
-  margin-top: 7em;
-  padding-top: .5em;
-  padding-right: .5em;
-  z-index: 1;
-  justify-content: space-between;
-  .social{
-    margin-left: 2em;
-    margin-bottom: .7em;
-    img{
-      width: 26px;
-      margin-left: 2em;
-    }
+@media(max-width:280px){
+  .card-title{
+    font-size: 1.6em !important;
+  }
+  .service-img{
+    height: 160px;
   }
 }
+
 @media(max-width:978px){
   .home-flex{
     display: flex;
@@ -245,12 +251,37 @@ $i: 0;
       align-self: center;
     }
   }
+  .prev-btn{
+    margin-left: -10px;
+  }
 }
 @media(max-width:440px){
   .nav-title{
     font-size: 1.7em;
   }
 }
+.footer{
+  margin-top: 10em;
+  background-color: $headerColor;
+  color: $mainTextColor;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  img{
+    width: 40px;
+    padding: 0.5em;
+  }
+  .copy{
+    background-color: $mainBgColor;
+
+  }
+  .just-foot{
+    justify-content: space-between;
+    padding: 0 1em;
+  }
+}
+
+
 
 
 
diff --git a/src/components/Card.js b/src/components/Card.js
@@ -7,7 +7,7 @@ const Card = ({property}) => {
         <div id={`card-${index}`} className="card">
             <img src={img} alt={title} className='service-img' />
             <div className="details">
-                <h1>{title}</h1>
+                <h1 className='card-title'>{title}</h1>
                 <p className="description">
                     {description}
                 </p>

diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -1,19 +1,28 @@
 import React from 'react'
+import {Container, Row, Col} from 'reactstrap'
 import facebook from '../assets/fb.png'
 import twitter from '../assets/twitter.png'
 import linkedin from '../assets/linkedin.png'
 import instagram from '../assets/insta.gif'
 
 export default function Footer() {
     return (
-        <div className='footer-containter d-flex'>
-            <div className='social'>
-                <a href='https://www.facebook.com/' target='_blank'><img src={facebook}/></a>
-                <a href='http://instagram.com/' target='_blank'><img src={instagram}/></a>
-                <a href='http://linkedin.com/' target='_blank'><img src={linkedin}/></a>
-                <a href='https://twitter.com/' target='_blank'><img src={twitter}/></a>                  
-            </div>
-            <p>&copy; 2020 Barefoot Nomad</p> 
-        </div>
+        <Container fluid className='footer'>
+            <Row className="just-foot">
+                <Row className='social-links'>
+                    <Col>
+                        <a href='https://www.facebook.com/' target='_blank'><img src={facebook}/></a>
+                        <a href='http://instagram.com/' target='_blank'><img src={instagram}/></a>
+                        <a href='http://linkedin.com/' target='_blank'><img src={linkedin}/></a>
+                        <a href='https://twitter.com/' target='_blank'><img src={twitter}/></a> 
+                    </Col>
+                </Row>
+                <Row>
+                    <Col>
+                        <p>&copy; 2020 Barefoot Nomad</p> 
+                    </Col>
+                </Row>
+            </Row>
+        </Container>
     )
 }
diff --git a/src/components/HomePage.js b/src/components/HomePage.js
@@ -1,15 +1,15 @@
 import React, { Component } from 'react'
+import {Container, Row, Col} from 'reactstrap'
+import {Link} from 'react-router-dom'
+import {data} from '../helpers/services'
 import destinations from '../assets/destinations.png'
 import previous from '../assets/previous.png'
 import next from '../assets/next.png'
-import {data} from '../helpers/services'
 import Card from './Card'
 import Navigation from './Navigation'
 import Footer from './Footer'
-import {Link} from 'react-router-dom'
-import { Container } from 'reactstrap';
 
- class HomePage extends Component {
+class NewHomePage extends Component {
     constructor(props){
         super(props);
         this.state = {
@@ -39,27 +39,27 @@ import { Container } from 'reactstrap';
       componentDidMount(){
         setInterval(this.nextProperty, 3000)
       }
-
     render() {
         const {properties, property} = this.state;
         return (
-          <React.Fragment>
-            <Navigation />
-              <Container>
-              <div className='home-container'>
-                  <div className='d-flex home-flex'>
-                      <div className='home-intro-text'>
-                          <h1>Let us take you to your happy place</h1>
-                          <p>Welcome! At Barefoot Nomad, we value customers. We believe that 
-                              customers' happiness is our happiness. Do not hesitate to 
-                              work with us. Hit the button below to get started.
-                          </p>
-                          <Link to="/login" className='start-btn'>Get Started</Link>
-                      </div>
-                      <img src={destinations} alt='Destination' className='destination'/>
-                  </div>
-                  <h1 className='pop-services'>Our Popular Services</h1>
-                  <div className='services'>                    
+            <React.Fragment>
+                <Navigation/>
+                <Container>
+                    <Row className='home-flex d-flex'>
+                        <Col className='home-intro-text'>
+                            <h1>Let us take you to your happy place</h1>
+                            <p>Welcome! At Barefoot Nomad, we value customers. We believe that 
+                                customers' happiness is our happiness. Do not hesitate to 
+                                work with us. Hit the button below to get started.
+                            </p>
+                            <Link to="/login" className='start-btn'>Get Started</Link>
+                        </Col>
+                        <Col>
+                            <img src={destinations} alt='Destination' className='destination'/>
+                        </Col>
+                    </Row>
+                    <h1 className='pop-services'>Our Popular Services</h1>
+                    <div className='services'>                    
                       <button 
                           onClick={() => this.prevProperty()} 
                           disabled={property.index === 0}
@@ -68,7 +68,7 @@ import { Container } from 'reactstrap';
                               <img src={previous}/>
                       </button>
                       <div className="page">
-                          <div className="col">
+                          <div className="custom-col">
                               <div className={`cards-slider active-slide-${property.index}`}>
                                   <div className="cards-slider-wrapper" style={{
                                   'transform': `translateX(-${property.index*(100/properties.length)}%)`
@@ -91,11 +91,12 @@ import { Container } from 'reactstrap';
                               <img src={next}/>
                       </button>
                   </div>
-              </div>
-            </Container>
-            <Footer/>
-          </React.Fragment>           
+                </Container>
+                <Footer/> 
+                  
+            </React.Fragment>
         )
     }
 }
-export default HomePage
+
+export default NewHomePage
diff --git a/src/components/Login.js b/src/components/Login.js
@@ -3,7 +3,9 @@ import React from "react";
 const Login = () => {
   return (
     <div>
-      <h2>Sign In Component</h2>
+      <div className="in">
+        <h2>Sign In Component</h2>
+      </div>
     </div>
   );
 };