From b05d8a633811870903580edc280087acb71b01da Mon Sep 17 00:00:00 2001 From: kajol-gupta Date: Fri, 3 Sep 2021 00:33:09 +0530 Subject: [PATCH] aboutus --- src/App.js | 2 + src/Components/Aboutus/Aboutus.css | 154 +++++++++++++++++++++++++++++ src/Components/Aboutus/Aboutus.js | 28 ++++++ src/Components/Aboutus/Adata.jsx | 24 +++++ src/Components/Aboutus/Card.jsx | 23 +++++ src/Components/Aboutus/img.jpg | Bin 0 -> 6613 bytes 6 files changed, 231 insertions(+) create mode 100644 src/Components/Aboutus/Aboutus.css create mode 100644 src/Components/Aboutus/Aboutus.js create mode 100644 src/Components/Aboutus/Adata.jsx create mode 100644 src/Components/Aboutus/Card.jsx create mode 100644 src/Components/Aboutus/img.jpg diff --git a/src/App.js b/src/App.js index 77c7089..8a58770 100644 --- a/src/App.js +++ b/src/App.js @@ -3,12 +3,14 @@ import Carousel from "./Components/Carousel/Carousel"; // import Faq from "./Components/Faq/Faq"; import Navbar from "./Components/Navbar/Navbar"; import Team from "./OurTeam/Team"; +import Aboutus from "./Components/Aboutus/Aboutus"; function App() { return (
{/*

CSS AMU Website Frontend

*/} + {/* */}
diff --git a/src/Components/Aboutus/Aboutus.css b/src/Components/Aboutus/Aboutus.css new file mode 100644 index 0000000..bc376fa --- /dev/null +++ b/src/Components/Aboutus/Aboutus.css @@ -0,0 +1,154 @@ +*{ + padding: 0; + margin: 0; + box-sizing: border-box; + } + + html{ + font-size:62.5%; + } + body{ + background-color:#fff; + font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif ; + justify-content: center; + align-items: center; + min-height: 100vh; + } + + + .heading{ + padding:2rem 0rem; + height: auto; + width:100%; + text-align: center; + text-transform: uppercase; + font-size: 3.75rem; + font-weight: 1000; + color: black; + margin-bottom: 0.5rem; + + } + + + .information{ + padding :2rem; + font-size: 2rem; + font-weight: 500; + color: black; + text-align: center; + } + + .container{ + display:flex; + justify-content: center; + padding :1rem; + justify-content: space-evenly; + flex-wrap:wrap; + + } + + + .cards{ + flex:0 1 25%; + justify-content: center; + margin:3rem; + + } + + .card{ + margin:6%; + transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1); + background-color:#fff; + overflow: hidden; + width: auto; + height: auto; + padding:1rem ; + border-bottom-left-radius: 1rem; + border-bottom-right-radius: 1rem; + border-radius: 2rem; + box-shadow: 0rem 1rem 2rem -1rem; + + } + + .card:hover{ + box-shadow: 0rem 2rem 2rem -1rem; + } + + .card_img{ + margin-left: auto; + margin-right: auto; + height: 7rem; + width: 50%; + align-items: center; + display:block; + justify-content: center; + border-top-left-radius: 10rem; + border-top-right-radius: 10rem; + border-radius: 5rem; + } + .card_img:hover{ + transform: scale(1.05,1.05); + } + + .card_info{ + background-color:#fff; + width: auto; + height: auto; + padding: 1rem 2rem 2rem 2rem; + border-bottom-left-radius: 1rem; + border-bottom-right-radius: 1rem; + + } + + .card_category{ + font-family:sans-serif; + text-transform: uppercase; + + font-size: 2rem; + /* letter-spacing: 0rem; */ + font-weight: 500; + display: flex; + justify-content: center; + align-items: center; + color:blue; + background-color:#fff; + text-align: center; + } + + + .button{ + margin-top: 1rem; + margin-bottom: 0.5rem; + font-size: 15px; + text-align: center; + } + + .button a{ + color:blue; + } + + .button a:hover{ + color:red; + } + + /* responsive code */ + + @media (max-width: 768px) { + html{ + font-size:50%; + } +} + + @media (max-width: 450px) { + html{ + font-size: 45%; + } + .container{ + display:flex; + flex-direction: column; + } + .card{ + margin:3%; + } + } + \ No newline at end of file diff --git a/src/Components/Aboutus/Aboutus.js b/src/Components/Aboutus/Aboutus.js new file mode 100644 index 0000000..bca1234 --- /dev/null +++ b/src/Components/Aboutus/Aboutus.js @@ -0,0 +1,28 @@ +import React from 'react'; +import Card from './Card'; +import Adata from './Adata'; +import './Aboutus.css'; + + + + +const Aboutus = () => +{ + return( + <> +
+

About Us

+

Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. To be a + leading and vibrant institution of excellence in teaching, research and innovation to achieve + the national goals of a self-reliant. +

+
+ {Adata.map((val) => + ) } +
+
+ + ) +} + +export default Aboutus; diff --git a/src/Components/Aboutus/Adata.jsx b/src/Components/Aboutus/Adata.jsx new file mode 100644 index 0000000..550f9e4 --- /dev/null +++ b/src/Components/Aboutus/Adata.jsx @@ -0,0 +1,24 @@ +import img1 from './img.jpg'; + +const Adata =[ + { + imgsrc : img1, + title: "Establishment", + content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore dolore magna aliqua. Ut enim ad veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.", + link:"www.google.com" + }, + { + imgsrc :img1, + title: "Our Journey", + content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore dolore magna aliqua. Ut enim ad veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.", + link: "www.google.com" + }, + { + imgsrc :img1, + title: "Our Vision", + content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore dolore magna aliqua. Ut enim ad veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.", + link: "www.google.com" + } +] + +export default Adata; \ No newline at end of file diff --git a/src/Components/Aboutus/Card.jsx b/src/Components/Aboutus/Card.jsx new file mode 100644 index 0000000..7f621e8 --- /dev/null +++ b/src/Components/Aboutus/Card.jsx @@ -0,0 +1,23 @@ +import React from 'react'; +import ShowMoreText from "react-show-more-text"; + +function Card(props){ + return( + <> +
+
+ mypic +
+ {props.title} + + {props.content} + + +
+
+
+ + ) +} + +export default Card; diff --git a/src/Components/Aboutus/img.jpg b/src/Components/Aboutus/img.jpg new file mode 100644 index 0000000000000000000000000000000000000000..0afcfd9a499eca44291653b7f116f29226c87f18 GIT binary patch literal 6613 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 Bf=U1Y literal 0 HcmV?d00001