diff --git a/about.html b/about.html
new file mode 100644
index 0000000..a40ab91
--- /dev/null
+++ b/about.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+         <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <script src="https://kit.fontawesome.com/92e789af92.js" crossorigin="anonymous"></script>
+        <title>emulation</title>
+        <link rel="stylesheet" href="./style.css">
+    </head>
+<body>
+    <nav class="navbar bg-dark">
+        <div class="container">
+
+           <h1 class="main-heading logo lg-heading text-light">Emulation</h1>
+         <ul class="nav-items">
+               <li class="nav-item"><a href="./about.html">About</a></li>
+              <li class="nav-item"><a href="#">contact</a></li>
+           </ul>
+        </div>
+     </nav>
+
+     <section class="about">
+         <div class="container">
+            <h2 class="lg-heading text-black about-heading">About Us</h2>
+            <p class="text-gray">We are fastest growing coding club of your coolege join us for better guide and exposure for enhance your coading skills, and get placed in your dream MNCs.</p>
+            <div class="about-wrapper">
+                <div class="left">
+                    <ul>
+                        <li>Coding Contest. </li>
+                        <li>Coding Guidance.</li>
+                        <li> Problem solving.</li>
+                    </ul>
+                </div>
+                <div class="right">
+                    <ul>
+                        <li>Real Evaluation.</li>
+                        <li>Notes.</li>
+                        <li>Doubt solving.</li>
+                    </ul>
+                </div>
+            </div>
+            <div class="counts">
+                <div class="count-item count-item1">
+                    <div class="patanhi"> 10</div>
+                    <p>Coding Contest</p>
+                </div>
+                <div class="count-item count-item2">
+                   <div class="patanhi">150</div>
+                        <p>Visited</p>
+                </div>
+                <div class="count-item count-item3">
+                   <div class="patanhi">38</div>
+                        <p>Happy</p>
+                </div>
+                <div class="count-item count-item4">
+                   <div class="patanhi">16</div>
+                        <p>Placed</p>
+                </div>
+            </div>
+            <div class="cta-banner">
+                <div class="cta-banner-left">
+                    <p class="cta-line">What are you waiting for, Join our club..</p>
+                </div>
+             <div class="cta-banner-right">
+                 <a href="contact.html" class='btn-cta maza'>Join us</a>
+             </div>
+            </div>
+         </div>
+      
+     </section>
+</body>
+</html>
\ No newline at end of file
diff --git a/style.css b/style.css
index 626654d..abd1348 100644
--- a/style.css
+++ b/style.css
@@ -34,4 +34,130 @@ p {
 #course-image {
     width: 100px;
     height: 100px;
-}
\ No newline at end of file
+}
+
+
+
+
+
+
+            /* css for about page */
+
+
+
+
+.about{
+    padding: 5rem 20px;
+}
+/* .about-heading{
+    border-bottom: 6px solid #a63946;
+} */
+
+.about-heading::after{
+    content: "";
+    display: block;
+    border: 3px solid #e63946;
+    width: 100%;
+}
+
+/* #########about wrapper############# */
+/* .about{
+    
+    background: url(..//img/gallery.png.jpg);
+} */
+
+
+.about-wrapper{
+    text-align: center;
+    margin-top: 4rem;
+}
+.about-wrapper .left{
+float: left;
+width: 50%;
+}
+
+.about-wrapper .right{
+    float: right;
+    width: 50%;
+}
+.about-wrapper::after{
+    content: "";
+    display: block;
+    clear: both;
+}
+.about-wrapper li::before{
+    content: "\2713";
+    color: red;
+    font-weight: bold;
+    padding-right:1rem ;
+    padding-left: 1rem;
+}
+/* ###########count styling############## */
+
+.counts{
+   
+    margin-top: 3rem;
+}
+.count-item{
+   
+    width: 25%;
+    float: left;
+    text-align: center;
+}
+.counts::after{
+    content: "";
+    display: block;
+    clear: both;
+}
+.count-item .patanhi{
+    font-size: 3rem;
+    font-weight: 700;
+    color: #e63947;
+}
+.count-item p{
+    font-weight: 700;
+    color: gray;
+    font-size: 1.8rem;
+}
+
+/* #banner styling##### */
+
+.cta-banner{
+    background: #e63946;
+    color: #f4f4f4;
+    padding: 1rem;
+    box-shadow: 10px 10px 10px #000000;
+    margin-top: 3rem;
+}
+.cta-banner-left{
+    width: 60%;
+    float: left;
+}
+
+
+.cta-banner-right{
+    width: 40%;
+    float: right;
+    text-align: right;
+}
+.cta-line{
+    font-weight: 700;
+    font-size: 2rem;
+    margin-top: 1.5rem;
+}
+.maza{
+    text-align: center;
+    display: inline-block;
+    font-weight: 700;
+    font-size: 3rem;
+    text-transform: uppercase;
+    border: 4px solid #f4f4f4;
+    padding: 2px 2px;
+    letter-spacing: 0.5rem;
+    color: #f4f4f4;
+}
+.cta-banner::after{
+    content: "";
+    display: block;
+    clear: both;
+}
