dharmviro1 · dharmviro1 · Aug 29, 2025 · Aug 29, 2025
diff --git a/site/assets/images/devgit.png b/site/assets/images/devgit.png
diff --git a/site/assets/images/dharmvir.jpg b/site/assets/images/dharmvir.jpg
diff --git a/site/assets/images/friend1.jpg b/site/assets/images/friend1.jpg
diff --git a/site/assets/images/friend2.jpg b/site/assets/images/friend2.jpg
diff --git a/site/index.html b/site/index.html
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>DevOps Project</title>
+  <link rel="stylesheet" href="style.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
+</head>
+<body>
+
+<!-- Navbar -->
+<nav>
+  <div class="nav-container">
+    <div class="logo">DevOps Project</div>
+    <ul class="nav-links">
+      <li><a href="#home">Home</a></li>
+      <li><a href="#about">About</a></li>
+      <li><a href="#team">Team</a></li>
+      <li><a href="#links">Links</a></li>
+    </ul>
+  </div>
+</nav>
+
+<!-- Hero / Home Section -->
+<section id="home" class="section home">
+  <div class="hero-container">
+    <h1>Welcome to Our DevOps Git Project</h1>
+    <p>Collaborating on Git, Branches, Pull Requests & GitHub Pages Hosting.</p>
+    <img src="assets/images/devgit.png" alt="DevOps illustration" class="home-img"/>
+  </div>
+</section>
+
+<!-- About Section -->
+<section id="about" class="section about">
+  <div class="container">
+    <h2>About the Project</h2>
+    <p>This repository was created as part of a DevOps/GitHub assignment. It demonstrates collaboration, branches, pull requests, and hosting via GitHub Pages.</p>
+  </div>
+</section>
+
+<!-- Team Section -->
+<section id="team" class="section team">
+  <div class="container">
+    <h2>Team Members</h2>
+    <div class="team-grid">
+      <!-- Owner -->
+      <div class="member-card">
+        <img src="assets/images/dharmvir.jpg" alt="DHARMVIR SINGH">
+        <h3>DHARMVIR SINGH</h3>
+        <p>Owner / Developer</p>
+        <div class="social-links">
+          <a href="https://github.com/dharmviro1" target="_blank"><i class="fab fa-github"></i></a>
+
+          <a href="https://www.linkedin.com/in/dharmvir-singh-1149b1254?lipi=urn%3Ali%3Apage%3Ad_
+          flagship3_profile_view_base_contact_details%3BdG1c6Oa4To6n0zX3FxlA7w%3D%3D" target="_blank">
+          <i class="fab fa-linkedin"></i></a>
+
+        </div>
+      </div>
+      <!-- Collaborator 1 -->
+      <div class="member-card">
+        <img src="assets/images/friend1.jpg" alt="Friend 1">
+        <h3>SOURAV KUMAR</h3>
+        <p>Collaborator</p>
+        <div class="social-links">
+          <a href="https://github.com/souravo1" target="_blank"><i class="fab fa-github"></i></a>
+
+          <a href="https://www.linkedin.com/in/sourav-kumar-114076255?lipi=urn%3Ali%3Apage%3Ad_
+          flagship3_profile_view_base_contact_details%3BhSGFesENQvGcf%2BPfvJJFWQ%3D%3D" target="_blank">
+          <i class="fab fa-linkedin"></i></a>
+
+        </div>
+      </div>
+      <!-- Collaborator 2 -->
+      <div class="member-card">
+        <img src="assets/images/friend2.jpg" alt="Friend 2">
+        <h3>ARSH SHARMA</h3>
+        <p>Collaborator</p>
+        <div class="social-links">
+          <a href="https://github.com/friend2username" target="_blank"><i class="fab fa-github"></i></a>
+
+          <a href="https://www.linkedin.com/in/arsh-sharma-b2a163255?lipi=urn%3Ali%3Apage%3Ad_
+          flagship3_profile_view_base_contact_details%3BdZ7gSYpYSk6Xoltxz1A2ow%3D%3D" target="_blank">
+          <i class="fab fa-linkedin"></i></a>
+
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- Links Section -->
+<section id="links" class="section links">
+  <div class="container">
+    <h2>Project Links</h2>
+    <div class="links-grid">
+      <!-- README -->
+      <a href="README.md" target="_blank" class="link-card">
+        <i class="fas fa-file-alt fa-2x"></i>
+        <span>README.md</span>
+      </a>
+
+      <!-- GitHub Repo -->
+      <a href="https://github.com/dharmviro1/devops-git-project" target="_blank" class="link-card">
+        <i class="fab fa-github fa-2x"></i>
+        <span>GitHub Repo</span>
+      </a>
+
+      <!-- Optional: Add more project links -->
+      <!-- Example: -->
+      <!--
+      <a href="docs/assignment.pdf" target="_blank" class="link-card">
+        <i class="fas fa-book fa-2x"></i>
+        <span>Assignment PDF</span>
+      </a>
+      -->
+    </div>
+  </div>
+</section>
+
+<!-- Footer -->
+<footer>
+  <div class="container">
+    <p>© 2025 DevOps Git Project</p>
+  </div>
+</footer>
+
+<script src="script.js"></script>
+</body>
+</html>
diff --git a/site/script.js b/site/script.js
@@ -0,0 +1,7 @@
+// Smooth scroll for navigation links
+document.querySelectorAll('nav a').forEach(anchor => {
+  anchor.addEventListener('click', function(e) {
+    e.preventDefault();
+    document.querySelector(this.getAttribute('href')).scrollIntoView({ behavior: 'smooth' });
+  });
+});
diff --git a/site/style.css b/site/style.css
@@ -0,0 +1,102 @@
+/* General resets */
+* { margin: 0; padding: 0; box-sizing: border-box; }
+body { font-family: 'Segoe UI', Roboto, Arial, sans-serif; line-height: 1.6; color: #333; }
+
+/* Navbar */
+nav {
+  background: linear-gradient(90deg, #1e3c72, #2a5298);
+  color: white;
+  padding: 0.75rem 0;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+.nav-container { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
+.nav-links { list-style: none; display: flex; gap: 1.5rem; }
+.nav-links li a { color: white; text-decoration: none; font-weight: bold; }
+.nav-links li a:hover { color: #ffcc00; }
+
+/* Sections */
+.section { padding: 4rem 1rem; }
+.container { max-width: 1100px; margin: 0 auto; }
+
+/* Home / Hero */
+.home { background: linear-gradient(to right, #a1c4fd, #c2e9fb); text-align: center; padding-top: 6rem; padding-bottom: 6rem; }
+.home h1 { font-size: 3rem; margin-bottom: 1rem; color: #1e3c72; }
+.home p { font-size: 1.2rem; margin-bottom: 2rem; color: #333; }
+.home-img {
+  width: 180px;
+  height: 120px;
+  object-fit: cover;
+  border-radius: 20px;
+  box-shadow: 0 6px 15px rgba(0,0,0,0.3);
+  transition: transform 0.3s, box-shadow 0.3s;
+}
+.home-img:hover {
+  transform: scale(1.1);
+  box-shadow: 0 10px 25px rgba(0,0,0,0.4);
+}
+
+
+/* About */
+.about { background-color: #f0f8ff; }
+.about h2 { color: #1e3c72; margin-bottom: 1rem; }
+.about p { font-size: 1.1rem; }
+
+/* Team */
+.team { background-color: #e8f0fe; }
+.team h2 { color: #1e3c72; margin-bottom: 2rem; text-align: center; }
+.team-grid { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center; }
+.member-card { text-align: center; background: #ffffff; padding: 1.25rem; border-radius: 12px; width: 220px; transition: transform 0.3s, box-shadow 0.3s; }
+.member-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.2); }
+.member-card img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: 0.5rem; }
+.member-card h3 { margin-bottom: 0.25rem; color: #1e3c72; }
+.member-card a { margin: 0 0.25rem; font-size: 1.2rem; color: #1e3c72; text-decoration: none; }
+.member-card a:hover { color: #ffcc00; }
+
+/* Links Section - card style */
+.links-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.5rem;
+  justify-content: center;
+  margin-top: 2rem;
+}
+
+.link-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background: #f0f8ff;
+  color: #1e1e2f;
+  padding: 1.5rem;
+  border-radius: 12px;
+  width: 180px;
+  height: 150px;
+  text-decoration: none;
+  font-weight: bold;
+  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
+  transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.link-card i {
+  margin-bottom: 0.75rem;
+  color: #00aaff;
+}
+
+.link-card span {
+  font-size: 1.1rem;
+}
+
+.link-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
+}
+
+/* Footer */
+footer { background: linear-gradient(90deg, #1e3c72, #2a5298); color: white; text-align: center; padding: 1rem 0; margin-top: 2rem; font-size: 0.9rem; }
+
+/* Hero / container adjustments */
+.hero-container { max-width: 900px; margin: 0 auto; }