add the footer section and create a bottom animation

package.json

@@ -21,7 +21,8 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "deploy": "npm start"
   },
   "eslintConfig": {
     "extends": "react-app"

public/CNAME

@@ -1 +1 @@
-iiittn.surge.sh
+iiittm.surge.sh

src/components/bottom-animation/index.js

@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+import './style.css';
+
+function Animation() {
+  return (
+       <div class="animation-div">
+      <h1>IIIT TIRUCHIRAPALLI</h1>
+      <h3>IS WHERE LIFE HAPPENS</h3>
+       </div>
+    );
+};
+
+export default Animation;

src/components/bottom-animation/style.css

@@ -0,0 +1,54 @@
+*{
+  box-sizing: border-box;
+}
+
+.animation-div{
+  background-image: url("../../images/trichy.jpg");
+  background-position: center;
+ background-repeat: no-repeat;
+ background-size: cover;
+  width: 100%;
+  height: 50vh;
+  color:#eeeeee;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+justify-content: center;
+font-size: 1.5em;
+ text-shadow: 4px 4px black;
+}
+img{
+    width: 100%;
+}
+.animation-div:hover h1{
+  animation: moveright 3s ease-out;
+  }
+  .animation-div:hover:hover h3{
+      animation: moveleft 3s ease-out;
+  }
+  @keyframes moveright {
+  0%{
+    opacity: 0;
+    transform: translate(-100px);
+  }
+  80%{
+  transform: translate(20px);
+  }
+  100%{
+    opacity: 1;
+    transform: translate(0px);
+  }
+}
+@keyframes moveleft {
+0%{
+  opacity: 0;
+  transform: translate(100px);
+}
+80%{
+transform: translate(-20px);
+}
+100%{
+  opacity: 1;
+  transform: translate(0px);
+}
+}

src/components/carousel/index.js

@@ -5,6 +5,7 @@ import './style.css'
 export default class MainCarousel extends Component {
   render() {
     return (
+
       <Carousel infiniteLoop showThumbs={false} autoPlay stopOnHover={false} >
 	{
 	  this.props.images.map((image)=>{

src/components/footer/index.js

@@ -2,16 +2,58 @@ import React from 'react';
 import Icon from '@material-ui/core/Icon';
 import './style.css'
 import { css } from '@emotion/core';
+import TwitterIcon from '@material-ui/icons/Twitter';
+import FacebookIcon from '@material-ui/icons/Facebook';
+import LinkedInIcon from '@material-ui/icons/LinkedIn';
 
-/* Footer */ 
+/* Footer */
 const Footer = () => {
 
     return(
         <div>
             <footer className="footer">
-                <div >
-                    <p className='credits'>&lt;/&gt; with <Icon id="favorite">favorite_border</Icon> by Web Dev-IIITT</p>
-                </div>
+            <div className="main-div">
+            <div className="contact-main">
+            <div className="contacts">
+            <div className="logo">
+                <img src={require("./logo.png")} alt="logo"></img>
+            </div>
+            <h2>Indian Institute Of Information Technology</h2>
+            <h3>Trichy Dindigul Highway,Pirattiyur,Tiruchirapala-620009</h3>
+             <a href="[email protected]">[email protected]</a>
+             <a href="[email protected]">+91 431 2500 539</a>
+            </div>
+                 <div className="icon" >
+                 <div className="icon-bg"><TwitterIcon className="twitter"/></div>
+                  <div className="icon-bg"><FacebookIcon className="facebook"/></div>
+                   <div className="icon-bg"><LinkedInIcon className="linkedin"/></div> </div>
+              </div>
+              <div className="line"></div>
+            <div className="acedemics">
+            <h2>Academics</h2>
+                     <a href="www.google.com">Programs</a>
+                     <hr></hr>
+                      <a href="www.google.com">Department</a>
+                      <hr></hr>
+                       <a href="www.google.com">Curriculum</a>
+                       <hr></hr>
+                        <a href="www.google.com">Calender</a>
+            </div>
+            <div className="line"></div>
+            <div className="quick-explore">
+            <h2>Quick Explore</h2>
+                 <a href="www.google.com">Admission Procedure</a>
+                 <hr></hr>
+                  <a href="www.google.com">Fee Structure</a>
+                  <hr></hr>
+                   <a href="www.google.com">Anti Ragging Committee</a>
+                   <hr></hr>
+                    <a href="www.google.com">FAQ's</a>
+            </div>
+            </div>
+            <div>
+                 <p className='credits'>&lt;/&gt; with <Icon id="favorite">favorite_border</Icon> by Web Dev-IIITT</p>
+             </div>
             </footer>
         </div>
 )}

src/components/footer/style.css

@@ -1,28 +1,148 @@
+*{
+  box-sizing: border-box;
+}
 .footer {
+
     position: absolute;
     bottom: 0;
     margin-top: 50px;
     padding-bottom:1px;
     width: 100%;
     color:white;
     background-color:#3f51b5;
-    text-align: center;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }
 .credits{
+  background-color: white;
+  color:#3f51b5;
     text-align: center;
-    text-size-adjust: inherit;
-    padding: 0px;
-    margin: 2px;
-
-}   
+    padding: 5px 0;
+    margin: 0px;
+}
+.credits:hover{
+  background-color: #3f51b5;
+  color:white;
+}
+.main-div{
+  display: flex;
+  align-items: center;
+ padding: 2% 0;
+ justify-content: center;
+}
+
+.contacts{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: 0.8em;
+  width: 100%;
+}
+.contacts img{
+  margin: 0 auto;
+  width: 80%;
+}
+.contacts h3{
+  opacity: 0.7;
+  margin: 0.3vh 0;
+}
+.contacts a{
+  margin:0.3vh 0;
+  color: white;
+  text-decoration: none;
+}
+.logo{
+  width: 26%;
+  height: 13vh;
+  border-radius: 50%;
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.5vw;
+}
+
+.icon{
+margin: 0 35%;
+display: flex;
+width:35%;
+}
+.acedemics{
+  font-size: 1.0em;
+}
+ .quick-explore a, .acedemics a{
+  margin:8% 0%;
+  color:#fff;
+  opacity: 0.7;
+  transition: 1s;
+  text-decoration: none;
+}
+ .quick-explore a:hover, .acedemics a:hover{
+   opacity: 1;
+   margin-left: 8px;
+ }
+.quick-explore{
+    font-size: 1.0em;
+    width:13%;
+}
+hr{
+  margin: 4% 0;
+}
+
 #favorite{
     font-size: 20px;
     line-height: 27.25px;
+
+}
+
+a{
+  display: block;
+}
+.line{
+  border-left: 5px;
+  width: 1.5%;
+  height:15vh;
+  border-style: none;
+  border-left-style: dotted;
+  border-color: #e8e4e1;
+  opacity: 1;
+  margin: 0  8%;
+}
+.icon-bg{
+  background-color: #fff;
+  color:#3f51b5;
+  width: 100%;
+  height: 4.5vh;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  margin: 1vh 1vh;
+  transition: 1s;
+}
+.icon-bg:hover{
+  background-color: #3f51b5;
+  color:#fff;
+  transform: scale(1.4);
+}
+.twitter,.facebook, .linkedin{
+  margin: 0 auto;
+  font-size: 1.4em;
+}
+@media(max-width:800px) {
+.main-div{
+  display: flex;
+  flex-direction: column;
+}
+.acedemics, .quick-explore{
+display: none;
+}
+ .line{
+   display: none;
+ }
+}
+
 } 
 .page-container {
     position: relative;
     min-height: 100vh;
     padding-bottom: 50px;
 
-  }
+  }

src/components/marquee/style.css

@@ -1,3 +1,50 @@
+
+.v_marquee{
+
+    min-width: 23% !important;
+    max-height: 55vh !important;
+
+}
+@media only screen and (max-width: 1400px){
+    .v_marquee{
+        max-height: 45vh !important;
+    }
+}
+@media only screen and (min-width: 800px) {
+    .v_marquee{
+        width: 23% !important;
+        max-height: 50vh;
+    }
+
+}
+@media only screen and (max-width: 800px) {
+    .v_marquee{
+        max-height: 80vh !important;
+    }
+
+}
+
+.v_marquee>.MuiCardContent-root{
+    max-height: 100%;
+}
+@media only screen and (min-width: 1500px) {
+    .v_marquee{
+        max-height: 56vh !important;
+    }
+
+}
+@media only screen and (min-width: 1600px) {
+    .v_marquee{
+        max-height: 60vh !important;
+    }
+
+}
+.bullet{
+    display: 'inline-block';
+    margin: '0 2px';
+    transform: 'scale(0.8)';
+}
+
 /* .v_marquee{ */
 
 /* min-width: 23% !important; */

src/components/mission_vision/index.js

@@ -18,7 +18,7 @@ const useStyles = makeStyles({
     transform: 'scale(0.8)',
   },
   title: {
-    fontSize: 14,
+    fontSize: 18,
   },
   pos: {
     marginBottom: 12,
@@ -32,6 +32,7 @@ export default function MissionVision() {
   return (
     <>
 
+
       <Card className={classes.root} variant="outlined" id="mission_vision" className="only_on_desktop">
 	<CardContent>
 	  <Typography variant="h5" component="h1" style={{color:'#3f51b5'}}>