Update index.html

harshchandrakar · web-flow · commit bd482e85eac2 · 2025-02-18T10:42:06.000+05:30
diff --git a/index.html b/index.html
@@ -1,83 +1,150 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Beautiful Webpage</title>
+    <title>Jenkins Master Class</title>
     <style>
         body {
-            font-family: Arial, sans-serif;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             margin: 0;
             padding: 0;
-            background-color: #f0f0f0;
+            background-color: #f5f5f5;
             color: #333;
+            line-height: 1.6;
         }
-
         header {
-            background-color: #3674B5;            
+            background: linear-gradient(135deg, #13547a 0%, #80d0c7 100%);
             color: white;
             text-align: center;
+            padding: 2em 0;
+            position: relative;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        }
+        .logo {
+            width: 80px;
+            height: 80px;
+            margin-bottom: 1em;
+        }
+        nav {
+            background-color: rgba(255, 255, 255, 0.1);
             padding: 1em 0;
+            margin-top: 1em;
         }
-
         nav ul {
             padding: 0;
             list-style-type: none;
+            margin: 0;
         }
-
         nav ul li {
             display: inline;
-            margin-right: 20px;
+            margin: 0 15px;
         }
-
         nav ul li a {
             color: white;
             text-decoration: none;
+            font-weight: 500;
+            transition: color 0.3s;
         }
-
-        section {
-            margin: 2em 5%;
-            padding: 1em;
+        nav ul li a:hover {
+            color: #80d0c7;
+        }
+        .hero {
+            text-align: center;
+            padding: 3em 1em;
             background-color: white;
-            border-radius: 8px;
+        }
+        .features {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 2em;
+            padding: 2em 5%;
+        }
+        .feature-card {
+            background: white;
+            padding: 2em;
+            border-radius: 10px;
             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            transition: transform 0.3s;
+        }
+        .feature-card:hover {
+            transform: translateY(-5px);
+        }
+        .feature-icon {
+            width: 100%;
+            height: 200px;
+            object-fit: cover;
+            border-radius: 8px;
+            margin-bottom: 1em;
         }
-
         footer {
             text-align: center;
-            padding: 1em 0;
-            background-color: #333;
+            padding: 2em 0;
+            background-color: #13547a;
             color: white;
+            margin-top: 2em;
+        }
+        .cta-button {
+            display: inline-block;
+            padding: 12px 24px;
+            background-color: #13547a;
+            color: white;
+            text-decoration: none;
+            border-radius: 25px;
+            transition: background-color 0.3s;
+            margin-top: 1em;
+        }
+        .cta-button:hover {
+            background-color: #80d0c7;
         }
     </style>
 </head>
 <body>
     <header>
-        <h1>Welcome to Jenkins Tutorial</h1>
+        <img src="/api/placeholder/80/80" alt="Jenkins Logo" class="logo">
+        <h1>Jenkins Master Class</h1>
+        <p>Master Continuous Integration and Deployment</p>
         <nav>
             <ul>
-                <li><a href="#home">Home</a></li>
-                <li><a href="#about">About</a></li>
+                <li><a href="#features">Features</a></li>
+                <li><a href="#tutorials">Tutorials</a></li>
+                <li><a href="#resources">Resources</a></li>
                 <li><a href="#contact">Contact</a></li>
             </ul>
         </nav>
     </header>
 
-    <section id="home">
-        <h2>Home</h2>
-        <p>Testing automated deployment Harsh.</p>
-    </section>
-
-    <section id="about">
-        <h2>About</h2>
-        <p>Learn more about us in this section.</p>
-    </section>
+    <div class="hero">
+        <h2>Transform Your DevOps Journey</h2>
+        <p>Learn how to automate your development pipeline and deploy with confidence</p>
+        <a href="#get-started" class="cta-button">Get Started Today</a>
+    </div>
 
-    <section id="contact">
-        <h2>Contact</h2>
-        <p>Get in touch with us here.</p>
-    </section>
+    <div class="features">
+        <div class="feature-card">
+            <img src="/api/placeholder/400/200" alt="CI/CD Pipeline" class="feature-icon">
+            <h3>CI/CD Pipelines</h3>
+            <p>Master the art of building efficient pipelines that automate your testing and deployment processes. Learn best practices for continuous integration and delivery.</p>
+        </div>
+        <div class="feature-card">
+            <img src="/api/placeholder/400/200" alt="Plugin Ecosystem" class="feature-icon">
+            <h3>Plugin Ecosystem</h3>
+            <p>Explore Jenkins' vast plugin ecosystem. Discover how to extend Jenkins' functionality with popular plugins for source control, testing, and deployment.</p>
+        </div>
+        <div class="feature-card">
+            <img src="/api/placeholder/400/200" alt="Security" class="feature-icon">
+            <h3>Security & Best Practices</h3>
+            <p>Learn how to secure your Jenkins installation, manage credentials safely, and implement security best practices in your CI/CD pipeline.</p>
+        </div>
+    </div>
 
     <footer>
-        <p>&copy; 2025 raju Webpage</p>
+        <p>&copy; 2025 Jenkins Master Class - Empowering DevOps Excellence</p>
+        <nav>
+            <ul>
+                <li><a href="#privacy">Privacy Policy</a></li>
+                <li><a href="#terms">Terms of Service</a></li>
+                <li><a href="#contact">Contact Us</a></li>
+            </ul>
+        </nav>
     </footer>
 </body>
 </html>
