Merge pull request #22 from himanshu007-creator/master

Update
himanshu007-creator · Apr 23, 2021 · cb429de · cb429de
2 parents 8a922de + 2f5fb14
commit cb429de
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 40 deletions.
diff --git a/css/style.css b/css/style.css
@@ -329,19 +329,13 @@ header #menu-bar{
     width: 80%;
 }
 
-
-
-
-
 .events .box-container{
     display: flex;
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
 }
 
-
-
 .events .box-container .box{
 
     margin:2rem;
@@ -373,6 +367,38 @@ header #menu-bar{
     transition-delay: .2s;
 }
 
+
+.events .box-container .eventbox {
+
+    background:#fff;
+    width:35rem;
+    padding:2rem;
+    margin:2rem;
+    border-radius: 1rem;
+    box-shadow: 0 .3rem .5rem rgba(0,0,0,.2);
+    text-align: center;
+}
+
+.events .box-container .eventbox img{
+    padding: 1vmin;
+    width: 80%;
+}
+
+.events .box-container .eventbox h3{
+    padding-top: 1vmin;
+    text-align: center;
+    font-size: 5vmin;
+}
+
+.dark-mode .events .box-container .eventbox .btn{
+    color: black;
+}
+
+.dark-mode .events .box-container .eventbox .btn:hover{
+    background-color:var(--yellow);
+}
+
+
 .events .box-container .box::before{
     content: '';
     position: absolute;
@@ -1138,7 +1164,6 @@ transition: all 1s ease;
     }
 }
 
-
 .modetoggle{
 
     height: 5vmax;
@@ -1155,4 +1180,4 @@ transition: all 1s ease;
 .Join{
     font-size: 3vmin;
 }
-/* Join Us Section Ends */
+/* Join Us Section Ends */
diff --git a/index.html b/index.html
@@ -36,7 +36,7 @@
         <nav class="navbar">
             <ul>
                 <li><a class="active" href="#home">Home</a></li>
-                <li><a href="#about">About</a></li>
+                <li><a href="#about">About-Us</a></li>
                 <li><a href="#projects">Projects</a></li>
                 <li><a href="#joinus">Join Us</a></li>
                 <li><a href="#events">Events</a></li>
@@ -73,30 +73,24 @@ <h3>SFC FOUNDATIONS</h3>
     <!-- home section ends -->
 
     <!-- about section starts  -->
-
-    <section class="about" id="about">
-        <div class="image" data-aos="fade-right"></div>
-        <div class="content" data-aos="fade-left">
-            <h3>Who we are</h3>
-            <p>The SFC is a Youth NGO that has it’s roots in Tricity and Delhi. SFC inspires the younger generation to
-                come forward to serve the Mother Earth by igniting a spark in them. SFC is established to launch and
-                nurture activities and programs which will reach the most impecunious and vulnerable people from our
-                community. The motive is that Youth is the beaming future of our country and they are the ONLY ones who
-                can change trite plots into buoyant podiums.
-                Hence our Projects are designed keeping in mind the barbaric surroundings of our Society. With the help
-                of our stalwart Volunteers we are able to focus on capacity building activities rather than the
-                traditional gap filling initiatives. SFC is an organization of dedicated and staunch amateurs who are
-                dead set at uplifting the unfortunate lots in our society and sheltering our Country.</p>
-            <a href="#"><button class="btn">Learn more</button></a>
+    <section class="about" id="about" data-aos="fade-right">
+        <div>
+            <h1 class="heading">About <span>Us</span></h1>
+            <a href="pages/About-Us/knowsfc.html"><button class="btn">Know SFC</button></a>
+            <a href="pages/About-Us/objectives.html"><button class="btn">Objectives</button></a>
+            <a href="#"><button class="btn">Founder's Profile</button></a>
+            <a href="#"><button class="btn">Core Team</button></a>
+            <a href="pages/About-Us/workingmodel.html"><button class="btn">Working Model</button></a>
         </div>
+        <img class="banner" src="images/banner.png">
     </section>
 
     <!-- about section ends -->
 
     <!-- Project section  -->
 
     <section class="projects" id="projects">
-        <h1 class="heading"> Our projects <span>List</span> </h1>
+        <h1 class="heading"> Our Projects <span>List</span> </h1>
         <ul class="list" data-aos="fade-down">
             <li class="btn active" data-src="images/SAMPURAN.png">Sampuran</li>
             <li class="btn" data-src="images/GYAN.png">Gyan</li>
@@ -128,14 +122,17 @@ <h3> <span>03.</span>Vatavaran</h3>
             </div>
         </div>
     </section>
-    <!-- Join Us Section Starts-->
 
-    <div class="joinus" id="joinus">
-        <h1 class="heading">Join <span>Us</span></h1>
-        <a href="pages/Join-Us/joinus.html"><button class="btn Join">INTERN</button></a>
-        <a href="pages/Join-Us/joinus.html"><button class="btn Join">VOLUNTEER</button></a>
-    </div>
 
+    <!-- Join Us Section Starts-->
+    <section class="joinus" id="joinus">
+        <div>
+            <h1 class="heading">Join <span>Us</span></h1>
+            <a href="pages/Join-Us/joinus.html"><button class="btn Join">INTERN</button></a>
+            <a href="pages/Join-Us/joinus.html"><button class="btn Join">VOLUNTEER</button></a>
+        </div>
+        <img class="joinimg" src="images/joinusbanner.png">
+    </section>
     <!-- Join Us Section Ends -->
 
 
@@ -147,18 +144,21 @@ <h1 class="heading">Join <span>Us</span></h1>
     <section class="events" id="events">
         <h1 class="heading"> Upcoming <span>Events</span> </h1>
         <div class="box-container">
-            <div class="box">
-                <img src="images/id.jpg" alt="">
+            <div class="eventbox">
                 <h3>Indradhanush</h3>
+                <img src="images/id.jpg" alt="">
+
             </div>
-            <div class="box">
-                <img src="images/reh.jpg" alt="">
+            <div class="eventbox">
                 <h3>Rehnuma</h3>
+                <img src="images/reh.jpg" alt="">
+
+            </div>
+            <div class="eventbox">
+                <a href="pages/Join-Us/joinus.html"><button class="btn Join">MORE <br>EVENTS</button></a>
             </div>
 
-        </div>
-        <div class="box-container">
-            <a href="#"><button class="btn Join">MORE EVENTS</button></a>
+
         </div>
     </section>
 
@@ -167,7 +167,7 @@ <h3>Rehnuma</h3>
     <!-- NEWS SECTION -->
 
     <section class="news" id="news">
-        <h1 class="heading"> SFC <span>In news</span> </h1>
+        <h1 class="heading"> SFC <span>In News</span> </h1>
 
 
         <div class="row" data-aos="fade-right">
@@ -210,7 +210,7 @@ <h4 class="news-title">Fast Media</h4>
     <!-- talks section starts  -->
 
     <section class="talks" id="order">
-        <h1 class="heading"> What <span>people say</span> </h1>
+        <h1 class="heading"> What <span>People Say</span> </h1>
         <div class="slideshow-container">
 
             <div class="mySlides">