Dark mode in contact us #930

NageshMandal · Jul 10, 2023 · d669dda · d669dda
1 parent 87156c5
commit d669dda
Show file tree

Hide file tree

Showing 11 changed files with 285 additions and 237 deletions.
diff --git a/about.html b/about.html
@@ -25,7 +25,7 @@
                 <li><a class="nav-link" href="./projects.html">Projects</a></li>
                 <li><a class="nav-link" href="./library.html">Library</a></li>
                 <li><a class="nav-link" href="./placement.html">Placements</a></li>
-                <li><a class="nav-link" href="./contactus.html">Contacts</a></li>
+                <li><a class="nav-link" href="./contact.html">Contacts</a></li>
                 <li><a class="nav-link" href="./syllabus.html">Syllabus</a></li>
                 <li><a class="nav-link" href="./event.html">Events</a></li>
 
@@ -100,7 +100,7 @@ <h3>Links</h3>
                     <li><a href="">Services</a></li>
                     <li><a href="about.html">About us</a></li>
                     <li><a href="">Features</a></li>
-                    <li><a href="contactus.html">Contact</a></li>
+                    <li><a href="contact.html">Contact</a></li>
                 </ul>
             </div>
             <div class="col col4">

diff --git a/contact.html b/contact.html
@@ -30,7 +30,7 @@
                         <li><a class="nav-link" href="./projects.html">Projects</a></li>
                         <li><a class="nav-link" href="./library.html">Library</a></li>
                         <li><a class="nav-link" href="./placement.html">Placements</a></li>
-                        <li><a class="nav-link" href="./contactus.html">Contacts</a></li>
+                        <li><a class="nav-link" href="./contact.html">Contacts</a></li>
                         <li><a class="nav-link" href="./syllabus.html">Syllabus</a></li>
                         <li><a class="nav-link" href="./event.html">Events</a></li>
 
@@ -44,25 +44,27 @@
                     </ul>
                 </nav>
             </div>
-            <div class="row">
+            <div class="row-header">
                 <div class="col-2">
                     <h1>CHAIBASA ENGINEERING<br>COLLEGE</h1>
                     <div class="para">
-                        Chaibasa Engineering College is a college of higher education established in the year 2013 by 
-                        Jharkhand Govt. It is run by the Techno India Group and is recognized by AICTE.
-                        The college offers Bachelor of Technology across five disciplines at the undergraduate level.
-                        Admissions are entrance-based and candidates can apply online for admission. The college has a 
-                        centralized placement cell which guides the students to achieve placements in reputed companies.
+                        <p>
+                            Chaibasa Engineering College is a college of higher education established in the year 2013 by
+                            Jharkhand Govt. It is run by the Techno India Group and is recognized by AICTE.
+                            The college offers Bachelor of Technology across five disciplines at the undergraduate level.
+                            Admissions are entrance-based and candidates can apply online for admission. The college has a
+                            centralized placement cell which guides the students to achieve placements in reputed companies.
+                        </p>
                     </div>
-                    
+
                     <div class="explore">
-                        <a href="https://www.chaibasaengg.edu.in/"class="btn">Explore Now &#8594;</a>
+                        <a href=""class="btn">Explore Now &#8594;</a>
                     </div>
                 </div>
                 <div class="col-2">
-                    <img class="students" src="images/college1.png" alt="college">
+                    <img class="students" src="images/college1.png">
                 </div>
-            </div>   
+            </div>
         </div>
     </div>
 <!--------------  PROJECTS  ----------------->
@@ -107,10 +109,11 @@ <h2 class="title">Contact</h2>
         </form>
     </div>
 </div>     
+
 <footer>
-    <div class="row">
-        <div class="col col1" id="pic" >
-            <img src="images/nagesh.png" width="80px" alt="nagesh">
+    <div class="row-footer">
+        <div class="col col1" id="pic">
+            <img src="images/nagesh.png" alt="Nagesh Mandal" width="80px">
             <div class="myname">
                 <h5>Nagesh Mandal</h5>
             </div>
@@ -121,19 +124,30 @@ <h5>Nagesh Mandal</h5>
         </div>
         <div class="col col2">
             <h3>Chaibasa Engineering College</h3>
-            <p>Jamshedpur Keonjhar Highway</p> 
-            <p>Chaibasa Jharkhand PIN 833215, India</p>
-            <p class="email-id">cordinatortigjh@gmail.com</p>
-            <h4>+91 - 9062941530</h4>
+            <p><i class="fa-solid fa-location-dot"></i>
+                <a href="https://www.google.com/maps/place/Chaibasa+Engineering+College/@22.4643055,85.7886378,17z/data=!3m1!4b1!4m6!3m5!1s0x3a1e25ddde342373:0x4ac680428662b09d!8m2!3d22.4643055!4d85.7912127!16s%2Fg%2F1pp2wwhc_?entry=ttu" target="_blank">
+               <span style="color: #fff;"> Keonjhar Highway
+               Chaibasa Jharkhand PIN 833215, India
+               </span>
+            </a>
+            </p>
+            <p class="email-id" style="
+            width: 260px"><i class="far fa-envelope" style="color: #fff;"></i>
+                cordinatortigjh@gmail.com
+            </p>
+            <h4 class="phone">
+                <i class="fa-solid fa-phone" style="color: #fff;"></i>
+                 +91 - 9062941530
+            </h4>
         </div>
         <div class="col col3" id="link">
             <h3>Links</h3>
             <ul>
                 <li><a href="index.html">Home</a></li>
                 <li><a href="">Services</a></li>
-                <li><a href="">About us</a></li>
+                <li><a href="about.html">About us</a></li>
                 <li><a href="">Features</a></li>
-                <li><a href="">Contact</a></li>
+                <li><a href="contact.html">Contact</a></li>
             </ul>
         </div>
         <div class="col col4">
@@ -144,28 +158,30 @@ <h3>News<span>letter</span></h3>
                 <button type="submit"><i class="fas fa-arrow-right"></i></button>
             </form>
             <div class="social-icons social-media">
-                <a href="https://twitter.com/NageshMandal75"> <i class="tweet fa-brands fa-twitter"></i></a>
+               <a href="https://twitter.com/NageshMandal75"> <i class="tweet fa-brands fa-twitter"></i></a>
                 <a href="https://www.instagram.com/nagesh_mandal7_5_/"><i class="insta fa-brands fa-instagram"></i></a>
-                <a href="https://github.com/NageshMandal"> <i class="git fa-brands fab fa-github"></i></a>
+               <a href="https://github.com/NageshMandal"> <i class="git fa-brands fab fa-github"></i></a>
                 <a href="https://www.linkedin.com/in/nagesh-mandal-134b70237/"> <i class="in fa-brands fa-linkedin"></i></a>
-                <a href="https://www.youtube.com/@nageshmandal9461/featured"> <i class="fa fa-youtube-play" aria-hidden="true"></i></a>
+               <a href="https://www.youtube.com/@nageshmandal9461/featured"> <i class="youtube fa fa-youtube-play" aria-hidden="true"></i></a>
             </div>
             <div class="return-to-top" id="returnToTop">
                 <i class="fas fa-arrow-up fa-2x fa-bounce"></i>
-                </div>
+              </div>
         </div>
     </div>
+
     <!--Voice Assistent-->
     <div class="containers">
         <div class="texts">
         </div>
     </div>
+
     <!--Voice assistent end-->
     <div class="toggle-mode">
-        <img class="moon" data-set="sun" src="images/moon.png" alt="dark-mode">
-        <img class="sun"  data-set="moon" src="images/sun.png"  alt="light-mode">
+        <img class="sun"  data-set="moon" src="images/Moontoggle.png"  alt="light-mode">
+        <img class="moon" data-set="sun" src="images/sun.png" alt="dark-mode">
     </div>
-    
+
 </footer>
 <script src="script.js"></script>
 <script src="app.js"></script>

diff --git a/contactus.css b/contactus.css
@@ -339,8 +339,8 @@ button .submit {
 
 .toggle-mode {
   position: absolute;
-  top: 30px;
-  right: 40px;
+  top: 20px;
+  right: 20px;
   width: 35px;
   height: 35px;
   cursor: pointer;
@@ -893,3 +893,5 @@ button .submit {
     font-size: 16px;
   }
 }
+
+
diff --git a/contactus.html b/contactus.html
@@ -28,7 +28,7 @@
               <li><a class="nav-link" href="./projects.html">Projects</a></li>
               <li><a class="nav-link" href="./library.html">Library</a></li>
               <li><a class="nav-link" href="./placement.html">Placements</a></li>
-              <li><a class="nav-link" href="./contactus.html">Contacts</a></li>
+              <li><a class="nav-link" href="./contact.html">Contacts</a></li>
               <li><a class="nav-link" href="./syllabus.html">Syllabus</a></li>
               <li><a class="nav-link" href="./event.html">Events</a></li>
 
@@ -153,9 +153,17 @@ <h2>Send Message</h2>
 
 
     </section>
-    <div class="toggle-mode">
+     <!--Voice Assistent-->
+     <div class="containers">
+      <div class="texts">
+      </div>
+  </div>
+  <!--Voice assistent end-->
+  <div class="toggle-mode">
       <img class="sun"  data-set="moon" src="images/Moontoggle.png"  alt="light-mode">
       <img class="moon" data-set="sun" src="images/sun.png" alt="dark-mode">
   </div>
+  <script src="script.js"></script>
+<script src="app.js"></script>
   </body>
 </html>
diff --git a/event.html b/event.html
@@ -32,7 +32,7 @@
                         <li><a class="nav-link" href="./projects.html">Projects</a></li>
                         <li><a class="nav-link" href="./library.html">Library</a></li>
                         <li><a class="nav-link" href="./placement.html">Placements</a></li>
-                        <li><a class="nav-link" href="./contactus.html">Contacts</a></li>
+                        <li><a class="nav-link" href="./contact.html">Contacts</a></li>
                         <li><a class="nav-link" href="./syllabus.html">Syllabus</a></li>
                         <li><a class="nav-link" href="./event.html">Events</a></li>
 
@@ -257,81 +257,78 @@ <h2>2021</h2>
 
     <!-- ------------------------------footer starts------------------------- -->
     <footer>
-        <div class="row">
-            <div class="col col1" id="pic">
-                <img src="images/nagesh.png" alt="Nagesh Mandal" width="80px">
-                <div class="myname">
-                    <h5>Nagesh Mandal</h5>
+      <div class="row-footer">
+          <div class="col col1" id="pic">
+              <img src="images/nagesh.png" alt="Nagesh Mandal" width="80px">
+              <div class="myname">
+                  <h5>Nagesh Mandal</h5>
+              </div>
+              <p class="dev">Full Stack Web Developer</p>
+              <div class="contact">
+                  <a href="https://www.instagram.com/nagesh_mandal7_5_/"><h4>Contact</h4></a>
+              </div>
+          </div>
+          <div class="col col2">
+              <h3>Chaibasa Engineering College</h3>
+              <p><i class="fa-solid fa-location-dot"></i>
+                  <a href="https://www.google.com/maps/place/Chaibasa+Engineering+College/@22.4643055,85.7886378,17z/data=!3m1!4b1!4m6!3m5!1s0x3a1e25ddde342373:0x4ac680428662b09d!8m2!3d22.4643055!4d85.7912127!16s%2Fg%2F1pp2wwhc_?entry=ttu" target="_blank">
+                 <span style="color: #fff;"> Keonjhar Highway
+                 Chaibasa Jharkhand PIN 833215, India
+                 </span>
+              </a>
+              </p>
+              <p class="email-id" style="
+              width: 260px"><i class="far fa-envelope" style="color: #fff;"></i>
+                  cordinatortigjh@gmail.com
+              </p>
+              <h4 class="phone">
+                  <i class="fa-solid fa-phone" style="color: #fff;"></i>
+                   +91 - 9062941530
+              </h4>
+          </div>
+          <div class="col col3" id="link">
+              <h3>Links</h3>
+              <ul>
+                  <li><a href="index.html">Home</a></li>
+                  <li><a href="">Services</a></li>
+                  <li><a href="about.html">About us</a></li>
+                  <li><a href="">Features</a></li>
+                  <li><a href="contact.html">Contact</a></li>
+              </ul>
+          </div>
+          <div class="col col4">
+              <h3>News<span>letter</span></h3>
+              <form class="form-news">
+                  <i class="far fa-envelope"></i>
+                  <input class="emailid" type="email" placeholder="Enter your email" required>
+                  <button type="submit"><i class="fas fa-arrow-right"></i></button>
+              </form>
+              <div class="social-icons social-media">
+                 <a href="https://twitter.com/NageshMandal75"> <i class="tweet fa-brands fa-twitter"></i></a>
+                  <a href="https://www.instagram.com/nagesh_mandal7_5_/"><i class="insta fa-brands fa-instagram"></i></a>
+                 <a href="https://github.com/NageshMandal"> <i class="git fa-brands fab fa-github"></i></a>
+                  <a href="https://www.linkedin.com/in/nagesh-mandal-134b70237/"> <i class="in fa-brands fa-linkedin"></i></a>
+                 <a href="https://www.youtube.com/@nageshmandal9461/featured"> <i class="youtube fa fa-youtube-play" aria-hidden="true"></i></a>
+              </div>
+              <div class="return-to-top" id="returnToTop">
+                  <i class="fas fa-arrow-up fa-2x fa-bounce"></i>
                 </div>
-                <p class="dev">Full Stack Web Developer</p>
-                <div class="contact">
-                    <a href="https://www.instagram.com/nagesh_mandal7_5_/">
-                        <h4>Contact</h4>
-                    </a>
-                </div>
-            </div>
-            <div class="col col2">
-                <h3>Chaibasa Engineering College</h3>
-                <p><i class="fa-solid fa-location-dot"></i>
-                    <a href="https://www.google.com/maps/place/Chaibasa+Engineering+College/@22.4643055,85.7886378,17z/data=!3m1!4b1!4m6!3m5!1s0x3a1e25ddde342373:0x4ac680428662b09d!8m2!3d22.4643055!4d85.7912127!16s%2Fg%2F1pp2wwhc_?entry=ttu"
-                        target="_blank">
-                        <span style="color: #fff;"> Keonjhar Highway
-                            Chaibasa Jharkhand PIN 833215, India
-                        </span>
-                    </a>
-                </p>
-                <p class="email-id"><i class="far fa-envelope"></i>
-                    cordinatortigjh@gmail.com
-                </p>
-                <h4>
-                    <i class="fa-solid fa-phone" style="color: #fff;"></i>
-                    +91 - 9062941530
-                </h4>
-            </div>
-            <div class="col col3" id="link">
-                <h3>Links</h3>
-                <ul>
-                    <li><a href="index.html">Home</a></li>
-                    <li><a href="">Services</a></li>
-                    <li><a href="">About us</a></li>
-                    <li><a href="">Features</a></li>
-                    <li><a href="">Contact</a></li>
-                </ul>
-            </div>
-            <div class="col col4">
-                <h3>News<span>letter</span></h3>
-                <form class="form-news">
-                    <i class="far fa-envelope"></i>
-                    <input class="emailid" type="email" placeholder="Enter your email" required>
-                    <button type="submit"><i class="fas fa-arrow-right"></i></button>
-                </form>
-                <div class="social-icons social-media">
-                    <a href="https://twitter.com/NageshMandal75"> <i class="tweet fa-brands fa-twitter"></i></a>
-                    <a href="https://www.instagram.com/nagesh_mandal7_5_/"><i
-                            class="insta fa-brands fa-instagram"></i></a>
-                    <a href="https://github.com/NageshMandal"> <i class="git fa-brands fab fa-github"></i></a>
-                    <a href="https://www.linkedin.com/in/nagesh-mandal-134b70237/"> <i
-                            class="in fa-brands fa-linkedin"></i></a>
-                    <a href="https://www.youtube.com/@nageshmandal9461/featured"> <i class="youtube fa fa-youtube-play"
-                            aria-hidden="true"></i></a>
-                </div>
-                <div class="return-to-top" id="returnToTop">
-                    <i class="fas fa-arrow-up fa-2x fa-bounce"></i>
-                </div>
-            </div>
-        </div>
-        <!--Voice Assistent-->
-        <div class="containers">
-            <div class="texts">
-            </div>
-        </div>
-        <!--Voice assistent end-->
-        <div class="toggle-mode">
-            <img class="sun"  data-set="moon" src="images/Moontoggle.png"  alt="light-mode">
-            <img class="moon" data-set="sun" src="images/sun.png" alt="dark-mode">
-        </div>
-
-    </footer>
+          </div>
+      </div>
+
+      <!--Voice Assistent-->
+      <div class="containers">
+          <div class="texts">
+          </div>
+      </div>
+
+      <!--Voice assistent end-->
+      <div class="toggle-mode">
+          <img class="sun"  data-set="moon" src="images/Moontoggle.png"  alt="light-mode">
+          <img class="moon" data-set="sun" src="images/sun.png" alt="dark-mode">
+      </div>
+
+  </footer>
 
     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

diff --git a/index.html b/index.html
@@ -33,7 +33,7 @@
                         <li><a class="nav-link" href="./projects.html">Projects</a></li>
                         <li><a class="nav-link" href="./library.html">Library</a></li>
                         <li><a class="nav-link" href="./placement.html">Placements</a></li>
-                        <li><a class="nav-link" href="./contactus.html">Contacts</a></li>
+                        <li><a class="nav-link" href="./contact.html">Contacts</a></li>
                         <li><a class="nav-link" href="./syllabus.html">Syllabus</a></li>
                         <li><a class="nav-link" href="./event.html">Events</a></li>
 
@@ -272,7 +272,7 @@ <h3>Links</h3>
                         <li><a href="">Services</a></li>
                         <li><a href="about.html">About us</a></li>
                         <li><a href="">Features</a></li>
-                        <li><a href="contactus.html">Contact</a></li>
+                        <li><a href="contact.html">Contact</a></li>
                     </ul>
                 </div>
                 <div class="col col4">