aboutus

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 (
     <div className="App">
       <Navbar />
       {/* <h1>CSS AMU Website Frontend</h1> */}
       <Carousel />
+      <Aboutus />
       <Team />
       {/* <Faq/> */}
     </div>

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%;
+      }
+  } 
+

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(
+        <>
+        <div className='background'>
+            <h1 className="heading"> About Us </h1>
+            <p className="information"> 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.
+             </p>
+             <div className='container'>
+            {Adata.map((val) => 
+                <Card imgsrc={val.imgsrc} title={val.title} content={val.content} link={val.link}/>) }
+                </div>
+                </div>
+     </>
+    )
+}
+
+export default Aboutus;

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;

src/Components/Aboutus/Card.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import ShowMoreText from "react-show-more-text";
+
+function Card(props){
+    return(
+        <>
+         <div className='cards'>
+                <div className='card'>
+                    <img src= {props.imgsrc} alt="mypic" className="card_img" />
+                    <div className = "card_info">
+                        <span className="card_category"> {props.title} </span>
+                        <ShowMoreText className="button" more="more" lines={4} less="less" truncatedEndingComponent={"... "}  >
+                        <span className="card_content"> {props.content} </span>
+                        </ShowMoreText>
+
+                </div>
+            </div>
+        </div>
+    </>
+    )
+}
+
+export default Card;