footer and cards updated

src/App.css

@@ -1,5 +1,10 @@
 .App {
-  text-align: center;
+  /* text-align: center; */
+  height: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-flow: column;
 }
 
 .App-logo {

src/App.js

@@ -1,13 +1,18 @@
-
-import React, { Component } from 'react';
-import './App.css';
+import React, { Component } from 'react'
+import './App.css'
+import CardContainer from './Component/main-page/cards/CardContainer'
+import Footer from './Component/main-page/footer/Footer'
 import Background from './LandingPage/Background/Background';
 
 class App extends Component {
   render() {
     return (
       <div className="App">
+
         <Background/>
+        <CardContainer/>
+        <Footer/>
+
       </div>
     );
   }

src/Component/main-page/cards/Card.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import './card.scss'
+
+const Card = (props) => {
+    return (
+        <div className="card">
+            <p className="card__label">Sem {props.name}</p>
+            {/* {this.props.name} */}
+        </div>
+    )
+}
+
+export default Card

src/Component/main-page/cards/CardContainer.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import Card from './Card'
+import './cardContainer.scss'
+
+const CardContainer =() => {
+
+    const sems = [1,2,3,4,5,6,7]
+    const container = sems.map((sem)=>{
+        return <Card name={sem}/>
+    })
+    return (
+        <div className="cardContainer">
+        {container}        
+        </div>
+    )
+}
+
+export default CardContainer

src/Component/main-page/cards/card.scss

@@ -0,0 +1,19 @@
+.card{
+    position: relative;
+    width: 150px;
+    height: 150px;
+    background-color:#364476;
+    border: 1px solid #E3E8FA;
+    border-radius: 5px;
+    box-shadow: 0 2px 3px;
+    margin: 0 15px;
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    &__label{
+        text-transform: uppercase;
+        font-family: Arial, Helvetica, sans-serif;
+        font-size: large;
+        color: #C1CEFB;
+    }
+}

src/Component/main-page/cards/cardContainer.scss

@@ -0,0 +1,8 @@
+.cardContainer{
+    display: flex;
+    width: 55%;
+    height: 500px;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+}

src/Component/main-page/footer/Footer.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import './footer.scss'
+const footer = () => {
+    return (
+        <div className="footer">
+            <ul className="footer__list">
+                <li className="footer__list__label">Links</li>
+                <ul className="sublist">
+                    <li className="footer__list__item">course</li>
+                    <li className="footer__list__item">course</li>
+                    <li className="footer__list__item">course</li>
+                </ul>
+            </ul>
+            <ul className="footer__list">
+                <li className="footer__list__label">Contact</li>
+                <ul className="sublist">
+                    <li className="footer__list__item">Email</li>
+                </ul>
+            </ul>
+        </div>
+    )
+}
+
+export default footer

src/Component/main-page/footer/footer.scss

@@ -0,0 +1,33 @@
+.footer{
+    padding: 20px;
+    width: 100%;
+    height: 300px;
+    background-color: #E3E8FA;
+    display: flex;
+    flex-flow: column;
+    box-sizing: border-box;
+    &__list{
+        margin-top: 20px;
+        &__label{
+            text-transform: uppercase;
+            font-family: Arial, Helvetica, sans-serif;
+            cursor: pointer;
+            padding: 5px;
+            color:  #3D636D;
+        }
+        &__item{
+            font-family: Arial, Helvetica, sans-serif;
+            font-size: medium;
+            margin: 10px;
+            color:  #3D636D;
+            cursor: pointer;
+        }
+        &__item:hover{
+            text-decoration: underline;
+        }
+    }
+}
+.sublist{
+    list-style: none;
+    padding: 0;
+}