diff --git a/package.json b/package.json index e387bcd..857e34e 100644 --- a/package.json +++ b/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" diff --git a/public/CNAME b/public/CNAME index 267ef5c..2f97727 100644 --- a/public/CNAME +++ b/public/CNAME @@ -1 +1 @@ -iiittn.surge.sh +iiittm.surge.sh diff --git a/src/components/bottom-animation/index.js b/src/components/bottom-animation/index.js new file mode 100644 index 0000000..98f10e5 --- /dev/null +++ b/src/components/bottom-animation/index.js @@ -0,0 +1,13 @@ +import React, { Component } from 'react'; +import './style.css'; + +function Animation() { + return ( +
+

IIIT TIRUCHIRAPALLI

+

IS WHERE LIFE HAPPENS

+
+ ); +}; + +export default Animation; diff --git a/src/components/bottom-animation/style.css b/src/components/bottom-animation/style.css new file mode 100644 index 0000000..3684bee --- /dev/null +++ b/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); +} +} diff --git a/src/components/carousel/index.js b/src/components/carousel/index.js index d547230..e74d8fa 100644 --- a/src/components/carousel/index.js +++ b/src/components/carousel/index.js @@ -5,6 +5,7 @@ import './style.css' export default class MainCarousel extends Component { render() { return ( + { this.props.images.map((image)=>{ diff --git a/src/components/footer/index.js b/src/components/footer/index.js index 2919588..94c437e 100644 --- a/src/components/footer/index.js +++ b/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(
)} diff --git a/src/components/footer/logo.png b/src/components/footer/logo.png new file mode 100644 index 0000000..8d19155 Binary files /dev/null and b/src/components/footer/logo.png differ diff --git a/src/components/footer/style.css b/src/components/footer/style.css index af85b1f..f6c6eec 100644 --- a/src/components/footer/style.css +++ b/src/components/footer/style.css @@ -1,4 +1,8 @@ +*{ + box-sizing: border-box; +} .footer { + position: absolute; bottom: 0; margin-top: 50px; @@ -6,23 +10,139 @@ 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; - } + } \ No newline at end of file diff --git a/src/components/marquee/style.css b/src/components/marquee/style.css index c00d380..1ca38ef 100644 --- a/src/components/marquee/style.css +++ b/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; */ diff --git a/src/components/mission_vision/index.js b/src/components/mission_vision/index.js index 97a2bef..9c244df 100644 --- a/src/components/mission_vision/index.js +++ b/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 ( <> + diff --git a/src/components/mission_vision/style.css b/src/components/mission_vision/style.css index b51a7e3..c5464df 100644 --- a/src/components/mission_vision/style.css +++ b/src/components/mission_vision/style.css @@ -1,5 +1,7 @@ + #mission_vision { height: 100%; + } #mission_vision svg{ @@ -21,10 +23,14 @@ /* } */ + + + @media only screen and (min-width: 920px) and (max-width: 1100px) { #vision, #mission { font-size: 0.9rem; } + } @media only screen and (min-width: 800px) and (max-width: 920px) { @@ -42,7 +48,8 @@ /* } */ /* } */ @media only screen and (max-width: 1500px){ - #learn_more{ - display: none; - } -} + + #learn_more{ + display: none; + } + } diff --git a/src/components/papercard/index.js b/src/components/papercard/index.js index 096010c..6bf2646 100644 --- a/src/components/papercard/index.js +++ b/src/components/papercard/index.js @@ -10,9 +10,12 @@ const useStyles = makeStyles((theme) => ({ flexWrap: 'wrap', '& > *': { margin: theme.spacing(1), + + width: "100%", // maxWidth: theme.spacing(70), minHeight: theme.spacing(77), + }, }, })); @@ -21,6 +24,11 @@ export default function PaperCard(props) { const classes = useStyles(); return ( +
+ + + +
diff --git a/src/components/papercard/outlinedcard.js b/src/components/papercard/outlinedcard.js index 272f6e2..b4905c8 100644 --- a/src/components/papercard/outlinedcard.js +++ b/src/components/papercard/outlinedcard.js @@ -39,13 +39,15 @@ export default function OutlinedCard(props) {
    {props.items&&props.items.map(item=>{ return( -
  • +
  • {item.title}
    Posted:{item.date} -
    • + + + ) })}
diff --git a/src/components/papercard/style.css b/src/components/papercard/style.css index f547adc..31bec68 100644 --- a/src/components/papercard/style.css +++ b/src/components/papercard/style.css @@ -16,18 +16,15 @@ } .newshead{ - font-family: 'Playfair Display', serif; - font-weight: 500; - - text-transform: uppercase; - display: inline-block; - line-height: 52px; - margin-bottom: 5px; -} -ul { - list-style: None; - list-style-position: inside; - padding-left: 10px; + font-family: 'Playfair Display', serif; + font-weight: 500; + font-size: 40px; + text-transform: uppercase; + display: inline-block; + line-height: 40px; + margin-bottom: 10px; + + } .News{ list-style: url(../../images/news-icon.svg); @@ -35,6 +32,18 @@ ul { padding-left: 10px; } .Events{ + + list-style: url(../../images/event_note-black-18dp.svg); + list-style-position: inside; + padding-left: 10px; + +} +.Notice{ + list-style: url(../../images/pin.svg); + list-style-position: inside; + padding-left: 10px; +} +======= list-style: url(../../images/event_note-black-18dp.svg); list-style-position: inside; padding-left: 10px; @@ -42,12 +51,14 @@ ul { .Notices{ list-style: url(../../images/pin.svg); list-style-position: inside; - padding-left: 10px; + } #simplecard { box-shadow: none !important; } #simplecard ul>li>a{ + + font-family: 'Playfair Display', serif; font-style: italic; } diff --git a/src/images/trichy.jpg b/src/images/trichy.jpg new file mode 100644 index 0000000..83597cd Binary files /dev/null and b/src/images/trichy.jpg differ diff --git a/src/pages/home/index.js b/src/pages/home/index.js index ba59c47..a8163b1 100644 --- a/src/pages/home/index.js +++ b/src/pages/home/index.js @@ -5,6 +5,7 @@ import PaperCard from '../../components/papercard/index' import MainCarousel from '../../components/carousel/index'; import MissionVision from '../../components/mission_vision/index' import Marquee from '../../components/marquee/index' +import Animation from '../../components/bottom-animation/index' import Footer from '../../components/footer/index' import { Divider, Paper, Card, Tabs, Tab, Box, Typography } from '@material-ui/core'; import PropTypes from 'prop-types' @@ -91,6 +92,7 @@ export default class Home extends React.Component{
+
@@ -104,6 +106,7 @@ export default class Home extends React.Component{
+
@@ -149,6 +152,7 @@ export default class Home extends React.Component{
+
diff --git a/src/pages/home/style.css b/src/pages/home/style.css index 4f99211..0869239 100644 --- a/src/pages/home/style.css +++ b/src/pages/home/style.css @@ -2,6 +2,29 @@ padding: 1rem 5px; } .customeflex{ + display: flex; + flex-wrap:wrap; + justify-content:space-between; + +} +#info{ + + margin: auto; + margin-top: 40px; + justify-content: space-between !important; +} + +#info>div{ + width: 30% !important; +} +#info>div>div{ +width: 100% !important; +height: 100% !important; +} +#info_mob>div>div{ +width: 100% !important; +height: 100% !important; +} display: grid; grid-gap: 0.5rem; grid-template-columns: 24% 48% 24%; @@ -52,6 +75,7 @@ height: 100%; } + @media only screen and (max-width: 800px){ .row { display: flex; @@ -63,3 +87,5 @@ } } + +}