Merge branch 'mdazfar2:main' into Update_web

Author: pandeyji711

Official_Website/about.html

@@ -81,52 +81,54 @@ <h1>About Us</h1>
             </div>
             <div class="text-container">
                 <h1 class="abeezee-regular">What is HelpOps-Hub?</h1>
-            <p class=" text-animate"> 
-
-                HelpOps-Hub is an open-source, community-driven repository designed to support and
-enhance DevOps practices. It serves as a comprehensive, centralized resource aimed
-at helping DevOps professionals and teams optimize their workflows, stay updated with
-the latest tools and trends, and implement best practices effectively.
-            </p>
+                <p class="text-animate" style="text-align: center;">
+                    HelpOps-Hub is an open-source, community-driven repository designed<br>
+                    to support and enhance DevOps practices. It serves as a comprehensive,<br>
+                    centralized resource aimed at helping DevOps professionals and teams<br>
+                    optimize their workflows, stay updated with the latest tools and trends,<br>
+                    and implement best practices effectively.
+                </p>
             </div>
         </div>
         <div class="end">
             <div class="img-container">
                 <img class="left-img" src="./mission.png" alt="no">
             </div>
             <div class="text-container">
-                <h1 class="abeezee-regular">Out Mission</h1>
-                <p class="abeezee-regular text-animate"> 
-                    
-                    Our mission is to create an all-encompassing resource that empowers DevOps
-practitioners to achieve higher efficiency, reliability, and performance in their operations.
-We strive to build a dynamic, ever-evolving repository that reflects the latest
-advancements in DevOps, driven by the collective knowledge and experience of our
-community.
-
+                <h1 class="abeezee-regular">Our Mission</h1>
+                <p class="text-animate" style="text-align: center;"> 
+                    Our mission is to create an all-encompassing resource that empowers DevOps<br>
+                    practitioners to achieve higher efficiency, reliability, and performance in<br>
+                    their operations. We strive to build a dynamic, ever-evolving repository that<br>
+                    reflects the latest advancements in DevOps, driven by the collective knowledge<br>
+                    and experience of our community.
                 </p>
             </div>
         </div>
         <div class="start mb">
             <div class="img-container">
-                <img class="right-img benefit" src="./benefit.png" alt="no">
+                <img class="right-img benefit" style="margin-top: 40px;" src="./benefit.png" alt="no">
             </div>
             <div class="text-container">
-                <h1 class="abeezee-regular">Benefits of HelpOps-Hub
-                </h1>
-                    <ul class="abeezee-regular text-animate">
-                        <li><b>Unified Knowledge Base</b>: Centralizes valuable DevOps resources, making them
-                            easily accessible to everyone</li>
-                            <li><b>Enhanced Learning</b>: : Supports continuous skill development for DevOps
-                                professionals at all levels.
-                            </li><li><b>Streamlined Practices</b>:Helps teams implement best practices efficiently, reducing
-                                errors and improving reliability.
-                                </li>
-                    </ul>
-            
+                <h1 class="abeezee-regular" style="margin-top: 60px;">Benefits of HelpOps-Hub</h1>
+                <ul class="abeezee-regular text-animate">
+                    <li><b>Unified Knowledge Base</b>: Centralizes valuable DevOps resources, making them easily accessible to everyone</li>
+                    <li><b>Enhanced Learning</b>: Supports continuous skill development for DevOps professionals at all levels.</li>
+                    <li><b>Streamlined Practices</b>: Helps teams implement best practices efficiently, reducing errors and improving reliability.</li>
+                </ul>
             </div>
         </div>
     </div>
+    <div class="video">
+        <div class="video-container">
+            <iframe src="https://www.youtube.com/embed/MCCc5mT5Pio?autoplay=1" frameborder="0" allowfullscreen></iframe>
+        </div>
+
+        <div class="video-text">
+            <p>Visit the official channel and subscribe to HelpOps:</p>
+            <a href="https://www.youtube.com/@HelpOps-Hub" target="_blank" class="subscribe-link">Subscribe to HelpOps</a>
+        </div>
+    </div>
     <div id="scrollToTopBtn" class="scrollToTopBtn" onclick="scrollToTop()">
         <img src="scrollToTop.png" class="im" alt="Scroll to top">
       </div>

Official_Website/aboutstyle.css

@@ -151,4 +151,61 @@ p,li{
     }to{
         height: 100px;
     }
+}
+/* Base styles for images */
+.img-container img {
+    width: 300px; 
+    transition: transform 0.5s ease, box-shadow 0.5s ease;
+    box-shadow: 0 10px 20px rgba(103, 102, 183, 0.3);
+    border-radius: 50%;
+}
+/* 3D effect and hover effect */
+.img-container img {
+    transition: transform 0.5s ease; 
+    box-shadow: 0 10px 20px rgba(103, 102, 183, 0.3); 
+}
+.img-container img:hover {
+    box-shadow: 0 20px 40px rgba(98, 188, 218, 0.6); 
+    transform: scale(0.9);
+}
+.video {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 100px;
+}
+
+.video-container {
+    flex: 1;
+}
+
+.video-container iframe {
+    width: 100%;
+    height: 500px;
+    border-radius: 30px;
+    border: none;
+    margin-left: 80px;
+}
+
+.video-text {
+    flex: 1;
+    padding: 0 20px;
+}
+
+.video-text p {
+    margin-bottom: 20px;
+    font-size: 25px;
+    margin-left: 90px;
+}
+
+.subscribe-link {
+    display: block;
+    color: #4ea7e9; 
+    text-decoration: none;
+    margin-bottom: 10px;
+    margin-left: 230px;
+}
+
+.subscribe-link:hover {
+    text-decoration: underline;
 }

Official_Website/style.css

@@ -80,7 +80,7 @@ body.dark-mode .nav__item a:hover {
 
 input {
   width: 90%;
-  margin-left: 12px;
+  /* margin-left: 12px; */
   outline: none;
   border: none;
   font-size: 20px;

Update_website/HelpOps-H Fevicon.png

@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnH/PRVV+ejsK+y4J0F5QKdKqz2xk5+6RzSyZjNzkRcbEXfz6/Rk+6RD7Vh+x2DlJ2CgWNLcA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="stylesheet" href="styles.css">
+    <link rel="shortcut icon" href="HelpOps-H Fevicon.png" type="image/x-icon">
 
 </head>
 <body>