upes-open · soumya-jain123 · Jul 21, 2025 · Jul 21, 2025
diff --git a/assignments/soumya-jain123/Assignment_1/about.html b/assignments/soumya-jain123/Assignment_1/about.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>About Us</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <style>
+      body {
+        font-family: "Segoe UI", Arial, sans-serif;
+        background-color: #1a1a1a;
+        margin: 40px;
+        padding: 0;
+        color: #333;
+      }
+      h1 {
+        color: #fff;
+        padding: 24px 0 16px 0;
+        margin: 0;
+      }
+      p {
+        font-size: 18px;
+        line-height: 1.7;
+        color: aliceblue;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>About Us</h1>
+    <section>
+      <p>
+        Welcome to our website! We are dedicated to providing quality content
+        and resources to our users.
+      </p>
+    </section>
+  </body>
+</html>
diff --git a/assignments/soumya-jain123/Assignment_1/images/brush.webp b/assignments/soumya-jain123/Assignment_1/images/brush.webp
diff --git a/assignments/soumya-jain123/Assignment_1/images/my-pic.jpg b/assignments/soumya-jain123/Assignment_1/images/my-pic.jpg
diff --git a/assignments/soumya-jain123/Assignment_1/images/protien-bar.webp b/assignments/soumya-jain123/Assignment_1/images/protien-bar.webp
diff --git a/assignments/soumya-jain123/Assignment_1/images/socks.webp b/assignments/soumya-jain123/Assignment_1/images/socks.webp
diff --git a/assignments/soumya-jain123/Assignment_1/index.html b/assignments/soumya-jain123/Assignment_1/index.html
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>My Website</title>
+    <style>
+      body {
+        font-family: Arial, Helvetica, sans-serif;
+        margin: 0;
+        padding: 20px;
+        background-color: #1a1a1a;
+        color: #f0f0f0;
+      }
+      .nav-container {
+        margin-bottom: 40px;
+      }
+      h2 {
+        margin-bottom: 20px;
+      }
+      .nav1 {
+        background-color: #f0f0f0;
+        padding: 10px;
+      }
+      .nav1 ul {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+        display: flex;
+        justify-content: space-around;
+      }
+      .nav1 li {
+        display: inline;
+      }
+      .nav1 a {
+        text-decoration: none;
+        color: #180f0f;
+        /* background-color: #af1010; */
+        padding: 10px 15px;
+        position: relative;
+      }
+      .nav1 a::after {
+        content: "";
+        position: absolute;
+        height: 2px;
+        width: 100%;
+        bottom: 0;
+        left: 0;
+        background-color: #1041a4;
+        transform: scaleX(0);
+        transition: transform 0.175s ease-in-out;
+      }
+      .nav1 a:hover::after {
+        transform: scaleX(1);
+      }
+      .nav1 .login-btn {
+        background-color: #1041a4;
+        color: #fff;
+        border: none;
+        padding: 5px 15px;
+        border-radius: 5px;
+        cursor: pointer;
+      }
+      .nav1 .login-btn:hover {
+        background-color: #000000;
+      }
+      .about-list {
+        margin-top: 15px;
+        padding-left: 20px;
+        color: #e0e0e0;
+      }
+      .about-list li {
+        margin-bottom: 8px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="nav-container">
+      <nav class="nav1">
+        <ul>
+          <li><a href="index.html">Home</a></li>
+          <li><a href="about.html">About</a></li>
+          <li><a href="products.html">Products</a></li>
+          <li><button class="login-btn">Login</button></li>
+        </ul>
+      </nav>
+      <section
+        style="display: flex; gap: 40px; align-items: flex-start; margin: auto"
+      >
+        <div>
+          <img
+            src="/images/my-pic.jpg"
+            alt="My Photo"
+            style="
+              margin-top: 18px;
+              height: 400px;
+              width: 400px;
+              border-radius: 10px;
+              box-shadow: 0 2px 8px rgba(255, 255, 255, 0.3);
+            "
+          />
+        </div>
+        <div
+          style="
+            max-width: 100%;
+            color: #e0e0e0;
+            box-shadow: 0 2px 8px rgba(255, 255, 255, 0.3);
+            margin-top: 18px;
+            border-radius: 10px;
+            padding: 10px;
+          "
+        >
+          <h2 style="margin-left: 10px">About Me</h2>
+          <p style="margin-left: 10px">
+            Hello! I'm <b>Soumya Jain</b>, a passionate learner and web
+            developer. I enjoy creating modern, responsive websites and
+            exploring new technologies. My interests include coding, design, and
+            continuous self-improvement.
+          </p>
+          <ul class="about-list" style="list-style-type: none">
+            <li>Email: soumya.11082005@email.com</li>
+            <li>Location: Dehradun, India</li>
+            <li>Skills: HTML, CSS, JavaScript</li>
+          </ul>
+        </div>
+      </section>
+    </div>
+  </body>
+</html>
diff --git a/assignments/soumya-jain123/Assignment_1/products.html b/assignments/soumya-jain123/Assignment_1/products.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Products</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        margin: 40px;
+        background-color: #1a1a1a;
+      }
+      h1 {
+        color: #ddd;
+      }
+      .products {
+        display: flex;
+        gap: 24px;
+        flex-wrap: wrap;
+      }
+      .product {
+        background: #fff;
+        border: 1px solid #ddd;
+        border-radius: 8px;
+        padding: 16px;
+        width: 220px;
+        box-shadow: 0 2px 6px rgba(78, 77, 77, 0.05);
+      }
+      .product:hover {
+        background-color: #af9e9e39;
+        color: aliceblue;
+      }
+      .product img {
+        width: 100%;
+        height: auto;
+        border-radius: 4px;
+      }
+      .product-title {
+        font-size: 1.1em;
+        margin: 12px 0 8px;
+      }
+      .product-price {
+        color: #27ae60;
+        font-weight: bold;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Our Products</h1>
+    <div class="products">
+      <div class="product">
+        <img src="/images/brush.webp" alt="Product 1" title="Product 1" />
+        <div class="product-title">ToothBrush</div>
+        <div class="product-price">Rs. 100</div>
+      </div>
+      <div class="product">
+        <img src="images/socks.webp" alt="Product 2" title="Product 2" />
+        <div class="product-title">Unisex Socks</div>
+        <div class="product-price">Rs. 200</div>
+      </div>
+      <div class="product">
+        <img src="images/protien-bar.webp" alt="Product 3" title="Product 3" />
+        <div class="product-title">Protien Bar</div>
+        <div class="product-price">Rs. 300</div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/assignments/soumya-jain123/Assignment_1/readme.md b/assignments/soumya-jain123/Assignment_1/readme.md
@@ -0,0 +1,77 @@
+# Webpage Assignment: Navbar and Section Layout
+
+## 📌 Objective
+
+The aim of this assignment is to build a responsive and functional webpage using **HTML** and **CSS** (and optionally JavaScript if required), which includes the following components:
+
+- A fully functional **Navigation Bar (Navbar)**
+- Two clearly defined and styled **Sections**
+- Proper layout, responsiveness, and navigation
+
+---
+
+## 🧱 Project Structure
+
+### 1. Navigation Bar
+
+- Positioned at the top of the webpage
+- Contains links to scroll/navigate to both sections
+- Should remain consistent across the webpage
+- Can include logo/text and nav items like "Home", "About", "Contact", etc.
+
+### 2. Section One
+
+- This section should have some content (text/images)
+- Can represent an "About" or "Introduction" section
+- Should be visually distinct from Section Two
+
+### 3. Section Two
+
+- Different content layout from Section One
+- Could include a contact form, services, or a gallery
+- Also should be responsive and styled neatly
+
+---
+
+## 🧪 Functional Requirements
+
+- Navbar links must scroll or jump to their respective sections
+- Sections should have distinct background colors or visuals
+- Responsive design (looks good on desktop and mobile)
+- Clean and readable code (use semantic HTML)
+
+---
+
+## ✅ Evaluation Criteria
+
+- Functional Navbar and correct section linking
+- Visually distinct and structured layout of sections
+- Code quality (indentation, naming, and structure)
+- Responsive and visually appealing design
+
+---
+
+## 📂 Deliverables
+
+- `index.html` file (main webpage)
+- `style.css` file (linked stylesheet)
+- Any assets (images, icons, etc.) placed in an `assets/` folder
+- Optional: `script.js` if JavaScript is used for navbar or section interaction
+
+---
+
+## 🕒 Deadline
+
+- Submit the completed files before **[Insert Deadline Here]**
+
+---
+
+## 🌟 Bonus (Optional)
+
+- Add smooth scrolling using CSS or JavaScript
+- Include hover effects on navbar items
+- Use Flexbox/Grid for layout
+
+---
+
+**Happy Coding! 🚀**