Create Course Page Components

src/CoursePage/FullCourse.css

@@ -0,0 +1,121 @@
+*{
+    box-sizing: border-box;
+}
+body{
+    background-image: url('../image/background-image-01.png');
+
+}
+
+.body{
+    background-color: rgb(8, 8, 51);
+    color: #FAF7E3;
+}
+
+
+.content{
+    padding-top: 90px; 
+}
+
+.head-with-nav-icon{
+    padding-left: 35px;
+}
+.head{
+    text-align: center;
+    width: 100%;
+}
+.headWelcome{
+    font-family: Antipasto Pro;
+    font-size: 44px;
+    line-height: 25px;
+}
+
+.tagline{
+    font-size: 20px;
+}
+
+.sem-card{
+    padding-top: 30px; 
+    padding-bottom: 85px; 
+}
+
+.cards{
+    display: flexbox;
+    justify-content: space-evenly;
+
+
+}
+.cards div{
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: left;
+    width: 150px;
+    height: 150px;
+    text-align: center;
+    color: #FAF7E3;
+    margin-top: 10px;
+    transition : .3s linear ;
+}
+
+.cards .card1{
+    background-image: url(../image/cards-01-01.svg);
+}
+.cards .card2{
+    background-image: url(../image/cards-01-02.svg);
+}
+
+.cards .card3{
+    background-image: url(../image/cards-01-03.svg);
+}
+.cards .card4{
+    background-image: url(../image/cards-01-04.svg);
+}
+
+.cards p{
+    font-size: 30px;
+    font-weight: bold;
+    padding-top: 35%;
+}
+
+.cards .card5{
+    background-image: url(../image/cards-01-05.svg);
+}
+.cards .card6{
+    background-image: url(../image/cards-01-06.svg);
+}
+
+.cards div:hover{
+    width: 174px;
+    height: 174px;   
+} 
+
+
+/*.cards div img{*/
+    /* margin-right: 25px;
+    margin-top: 25px; */
+    /*width: 180px;
+    height: 180px;
+    align-items: center;
+}*/
+
+/*.big-card{
+    position: relative;
+}*/
+/*.cards img:hover{
+    width: 181px;
+    height: 181px;
+    border: 2px solid rgb(132, 132, 175);
+    border-radius: 3px;
+} */
+
+/*.text{  
+    font-size: 30px;
+    cursor : pointer;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transition-property: color;
+    transition: 1s linear;
+    transform: translate(-50%, -50%);
+    color: white;
+}*/
+

src/CoursePage/FullCourse.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import './FullCourse.css';
+import Navbar from './Navbar';
+import ModalPage from './ModalPage';
+
+function FullCourse() {
+    /*for loops to be added.*/
+    return (
+        <div className="body">
+
+            <div className="container-fluid">
+                <div className="row content">
+                    <div className="head-with-nav-icon md-col-1">
+                        <Navbar />
+                    </div>
+                    <div className="head md-col-8">
+                        <p className="headWelcome">AMUSING !!</p>
+                        <p className="tagline">Are your exams already here  ;p </p>
+                    </div>
+                </div>
+            </div>
+            <div className="main container">
+                <div className="sem-card">
+
+                    <div className="row cards">
+                        <a href="https://www.google.com/"><div className="card1"><p>1</p></div></a>
+                        <a href="https://www.google.com/"><div className="card2"><p>2</p></div></a>
+                        <a href="https://www.google.com/"><div className="card3"><p>3</p></div></a>
+                        <a href="https://www.google.com/"><div className="card4"><p>4</p></div></a>
+                        <a href="https://www.google.com/"><div className="card5"><p>5</p></div></a>
+                        <a href="https://www.google.com/"><div className="card6"><p>6</p></div></a>
+                    </div>
+                    <div className="row cards">
+                        <a href="https://www.google.com/"><div className="card1"><p>7</p></div></a>
+                        <a href="https://www.google.com/"><div className="card2"><p>8</p></div></a>
+                        <a href="https://www.google.com/"><div className="card3"><p>9</p></div></a>
+                        <a href="https://www.google.com/"><div className="card4"><p>10</p></div></a>
+                        <a href="https://www.google.com/"><div className="card5"><p>11</p></div></a>
+                        <a href="https://www.google.com/"><div className="card6"><p>12</p></div></a>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    );
+}
+
+export default FullCourse;

src/CoursePage/ModalPage.css

@@ -0,0 +1,3 @@
+button{
+    background-color: aqua;
+}

src/CoursePage/ModalPage.js

@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+import { MDBContainer, MDBBtn, MDBModal, MDBModalBody, MDBModalHeader, MDBModalFooter } from 'mdbreact';
+import card from '../image/cards-01.png';
+class ModalPage extends Component {
+state = {
+  modal8: false,
+  modal9: false
+}
+
+toggle = nr => () => {
+  let modalNumber = 'modal' + nr
+  this.setState({
+    [modalNumber]: !this.state[modalNumber]
+  });
+}
+
+render() {
+  return (
+    <MDBContainer>
+      <div className="sp" onClick={this.toggle(8)}><img className="crdImg" src={card} alt="img" /></div>
+      <MDBModal isOpen={this.state.modal8} toggle={this.toggle(8)} fullHeight position="right">
+        <MDBModalHeader toggle={this.toggle(8)}>MDBModal title</MDBModalHeader>
+        <MDBModalBody>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+          consequat.
+        </MDBModalBody>
+        <MDBModalFooter>
+          <MDBBtn color="secondary" onClick={this.toggle(8)}>Close</MDBBtn>
+          <MDBBtn color="primary">Save changes</MDBBtn>
+        </MDBModalFooter>
+      </MDBModal>      
+    </MDBContainer>
+    );
+  }
+}
+
+export default ModalPage;

src/CoursePage/Navbar.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import './Navbar.css';
+
+function Navbar(){
+    return (
+        <div><button> Nav</button></div>
+    );
+}
+
+export default Navbar;