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 (
     <div className="App">
       <Navbar />
       {/* <h1>CSS AMU Website Frontend</h1> */}
       <Carousel />
+      <Aboutus />
       <Team />
       {/* <Faq/> */}
     </div>
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(
+        <>
+        <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;
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(
+        <>
+         <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;
diff --git a/src/Components/Aboutus/img.jpg b/src/Components/Aboutus/img.jpg
new file mode 100644
index 0000000..0afcfd9
Binary files /dev/null and b/src/Components/Aboutus/img.jpg differ