diff --git a/assignments/soumya-jain123/Assignment_1/about.html b/assignments/soumya-jain123/Assignment_1/about.html new file mode 100644 index 0000000..02ec5d0 --- /dev/null +++ b/assignments/soumya-jain123/Assignment_1/about.html @@ -0,0 +1,36 @@ + + + + + About Us + + + + +

About Us

+
+

+ Welcome to our website! We are dedicated to providing quality content + and resources to our users. +

+
+ + diff --git a/assignments/soumya-jain123/Assignment_1/images/brush.webp b/assignments/soumya-jain123/Assignment_1/images/brush.webp new file mode 100644 index 0000000..967a47d Binary files /dev/null and b/assignments/soumya-jain123/Assignment_1/images/brush.webp differ diff --git a/assignments/soumya-jain123/Assignment_1/images/my-pic.jpg b/assignments/soumya-jain123/Assignment_1/images/my-pic.jpg new file mode 100644 index 0000000..6f717a4 Binary files /dev/null and b/assignments/soumya-jain123/Assignment_1/images/my-pic.jpg differ diff --git a/assignments/soumya-jain123/Assignment_1/images/protien-bar.webp b/assignments/soumya-jain123/Assignment_1/images/protien-bar.webp new file mode 100644 index 0000000..1236b27 Binary files /dev/null and b/assignments/soumya-jain123/Assignment_1/images/protien-bar.webp differ diff --git a/assignments/soumya-jain123/Assignment_1/images/socks.webp b/assignments/soumya-jain123/Assignment_1/images/socks.webp new file mode 100644 index 0000000..428a0f7 Binary files /dev/null and b/assignments/soumya-jain123/Assignment_1/images/socks.webp differ diff --git a/assignments/soumya-jain123/Assignment_1/index.html b/assignments/soumya-jain123/Assignment_1/index.html new file mode 100644 index 0000000..3413e64 --- /dev/null +++ b/assignments/soumya-jain123/Assignment_1/index.html @@ -0,0 +1,129 @@ + + + + + + My Website + + + +
+ +
+
+ My Photo +
+
+

About Me

+

+ Hello! I'm Soumya Jain, 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. +

+
    +
  • Email: soumya.11082005@email.com
    • +
  • Location: Dehradun, India
    • +
  • Skills: HTML, CSS, JavaScript
    • +
+
+
+
+ + diff --git a/assignments/soumya-jain123/Assignment_1/products.html b/assignments/soumya-jain123/Assignment_1/products.html new file mode 100644 index 0000000..9b4d3a7 --- /dev/null +++ b/assignments/soumya-jain123/Assignment_1/products.html @@ -0,0 +1,68 @@ + + + + + Products + + + + +

Our Products

+
+
+ Product 1 +
ToothBrush
+
Rs. 100
+
+
+ Product 2 +
Unisex Socks
+
Rs. 200
+
+
+ Product 3 +
Protien Bar
+
Rs. 300
+
+
+ + diff --git a/assignments/soumya-jain123/Assignment_1/readme.md b/assignments/soumya-jain123/Assignment_1/readme.md new file mode 100644 index 0000000..c4553d5 --- /dev/null +++ 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! 🚀** diff --git a/assignments/soumya-jain123/Assignment_2/global.css b/assignments/soumya-jain123/Assignment_2/global.css new file mode 100644 index 0000000..afa6e0c --- /dev/null +++ b/assignments/soumya-jain123/Assignment_2/global.css @@ -0,0 +1,447 @@ +.site-head { + background-color: #f8f9fa; + /* padding: 20px; */ + text-align: center; + font-family: Arial, sans-serif; +} +.top { + background-color: #f8f9fa; + color: rgb(23, 21, 21); + padding: 10px; + text-align: center; + font-size: 1.2em; +} +.top ul { + list-style: none; + margin: 0; + padding: 0; + display: flex; + justify-content: right; + gap: 20px; +} + +.top ul .tender::before { + content: "🔨"; + margin-right: 6px; +} +.top ul .mail::before { + content: "✉️"; + margin-right: 6px; +} +.top ul .phone::before { + content: "📞"; + margin-right: 6px; +} +.top ul select { + border-radius: 0.9px; + height: 20px; + padding: 0 10px; + width: 100px; +} +.logo { + float: left; + display: block; + height: 50px; + margin-right: 20px; +} +.site-head::after { + content: ""; + display: table; + clear: both; +} +.logo-navbar { + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 20px; +} + +.logo img { + height: 80px; +} + +.navbar ul { + list-style: none; + display: flex; + gap: 20px; + margin: 0; + padding: 0; + align-items: center; +} + +.navbar ul li a { + text-decoration: none; + color: rgb(6, 6, 7); + font-size: 16px; +} + +.navbar ul li button { + padding: 5px 10px; + cursor: pointer; + font-size: 14px; +} + +.navbar ul li button a { + text-decoration: none; + color: inherit; +} +.impact-section { + background: linear-gradient(to right, #e3f2f1, #ffffff); + padding: 40px 20px; + font-family: Arial, sans-serif; + overflow: hidden; +} + +.impact-content { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + max-width: 1200px; + margin: auto; +} + +.text-content { + max-width: 600px; + padding: 20px; +} + +.eatwell-logo { + height: 50px; + margin-bottom: 10px; +} + +.text-content h1 { + font-size: 48px; + color: #003366; + margin: 0; +} + +.text-content h1 span { + font-weight: normal; +} + +.text-content h2 { + font-size: 28px; + color: #3ca339; + margin: 10px 0; +} + +.facilities { + font-size: 16px; + color: #333; + margin-top: 20px; + border: 2px solid #3ca339; + padding: 15px; + border-radius: 8px; + line-height: 1.6; +} + +.support-btn { + display: inline-block; + background-color: #f7d76d; + color: #000; + font-weight: bold; + padding: 10px 20px; + margin-top: 20px; + text-decoration: none; + border-radius: 30px; + transition: background 0.3s ease; +} + +.support-btn:hover { + background-color: #f2c94c; +} + +.image-content { + flex: 1; + text-align: center; +} + +.main-image { + max-height: 400px; + width: auto; + object-fit: cover; +} +.narrative-section { + background-color: #d0eef7; + padding: 40px 20px; + font-family: Arial, sans-serif; + text-align: center; +} + +.section-title { + font-size: 32px; + color: #1f3d7a; + margin-bottom: 5px; + border-bottom: 3px solid #2ebd59; + display: inline-block; +} + +.primary-label { + background-color: #1f3d7a; + color: white; + padding: 5px 15px; + border-radius: 5px; + display: inline-block; + margin-bottom: 30px; +} + +.narrative-container { + display: flex; + justify-content: space-between; + align-items: flex-start; + flex-wrap: wrap; + max-width: 1200px; + margin: auto; + gap: 20px; +} + +.narrative-left, +.narrative-right { + flex: 1; + text-align: left; + min-width: 300px; +} + +.narrative-center { + display: flex; + justify-content: center; + align-items: center; + flex: 0 0 300px; +} + +.number-circle { + display: inline-block; + background-color: #1f3d7a; + color: white; + border-radius: 50%; + width: 24px; + height: 24px; + text-align: center; + line-height: 24px; + font-size: 14px; + margin-right: 8px; +} + +.number-circle.green { + background-color: #2ebd59; +} + +.number-circle.orange { + background-color: #f48024; +} + +.blue-text { + color: #1f3d7a; + font-weight: bold; +} + +.green-text { + color: #2ebd59; + font-weight: bold; +} + +.orange-text { + color: #f48024; + font-weight: bold; +} +.impact-section { + background: url("../images/bg.jpg") no-repeat center center/cover; + padding: 60px 40px; + color: white; + position: relative; +} + +.impact-overlay { + background-color: rgba(0, 33, 66, 0.8); + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; +} + +.impact-content { + position: relative; + display: flex; + flex-wrap: wrap; + gap: 40px; + align-items: center; + justify-content: center; + z-index: 1; +} + +.impact-text { + flex: 1; + min-width: 300px; + max-width: 600px; +} + +.impact-title { + font-size: 36px; + font-weight: bold; + margin-bottom: 10px; +} + +.impact-title span { + display: block; + width: 60px; + height: 4px; + background-color: #4ade80; + margin-top: 10px; + margin-bottom: 30px; +} + +.impact-description { + font-size: 18px; + line-height: 1.6; + color: #dcdcdc; + margin-bottom: 20px; +} + +.impact-link { + color: #c6e2ff; + text-decoration: underline; + font-size: 16px; +} + +.impact-card { + background: #121212; + padding: 20px; + border-radius: 15px; + color: white; + max-width: 320px; + text-align: center; +} + +.impact-card img { + width: 100%; + border-radius: 10px; + margin-top: 10px; +} + +.impact-card h3 { + font-size: 20px; + margin: 15px 0 5px; +} + +.impact-card p { + font-size: 16px; + color: #a9a9a9; +} + +.highlight { + color: #facc15; + font-weight: bold; +} + +@media (max-width: 768px) { + .impact-content { + flex-direction: column; + } + + .impact-text { + text-align: center; + } + + .impact-title { + font-size: 28px; + } +} +.footer { + background-color: #f2f2f2; + padding: 60px 40px 0; + position: relative; +} + +.footer-container { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + gap: 30px; +} + +.footer-column { + flex: 1; + min-width: 200px; +} + +.footer-logo { + max-width: 160px; + margin-bottom: 10px; +} + +.footer-description { + font-size: 14px; + color: #444; + line-height: 1.6; +} + +.footer-socials { + margin-top: 15px; +} + +.footer-socials img { + width: 20px; + margin-right: 15px; + cursor: pointer; +} + +.footer-heading { + font-weight: bold; + margin-bottom: 10px; +} + +.footer-links a { + display: block; + font-size: 14px; + color: #444; + text-decoration: none; + margin-bottom: 6px; +} + +.newsletter-form input { + width: 100%; + padding: 10px; + margin-bottom: 12px; + border: 1px solid #ccc; + border-radius: 8px; +} + +.newsletter-form button { + padding: 10px 20px; + background-color: #4caf50; + color: white; + border: none; + border-radius: 20px; + font-weight: bold; + cursor: pointer; +} + +.certification { + margin-top: 30px; +} + +.certification img { + width: 100px; +} + +.footer-bottom { + text-align: center; + font-size: 13px; + color: #777; + padding: 20px 0; + border-top: 1px solid #ddd; +} + +.footer-silhouette { + width: 100%; + margin-top: -4px; +} + +@media (max-width: 76px) { + .footer-container { + flex-direction: column; + } +} diff --git a/assignments/soumya-jain123/Assignment_2/images/bg.jpg b/assignments/soumya-jain123/Assignment_2/images/bg.jpg new file mode 100644 index 0000000..18c01e0 Binary files /dev/null and b/assignments/soumya-jain123/Assignment_2/images/bg.jpg differ diff --git a/assignments/soumya-jain123/Assignment_2/images/eatwell-logo.png b/assignments/soumya-jain123/Assignment_2/images/eatwell-logo.png new file mode 100644 index 0000000..ba13559 Binary files /dev/null and b/assignments/soumya-jain123/Assignment_2/images/eatwell-logo.png differ diff --git a/assignments/soumya-jain123/Assignment_2/images/fb.png b/assignments/soumya-jain123/Assignment_2/images/fb.png new file mode 100644 index 0000000..3d2e596 Binary files /dev/null and b/assignments/soumya-jain123/Assignment_2/images/fb.png differ diff --git a/assignments/soumya-jain123/Assignment_2/images/footer.png b/assignments/soumya-jain123/Assignment_2/images/footer.png new file mode 100644 index 0000000..0bae555 Binary files /dev/null and b/assignments/soumya-jain123/Assignment_2/images/footer.png differ diff --git a/assignments/soumya-jain123/Assignment_2/images/girl-police.jpg b/assignments/soumya-jain123/Assignment_2/images/girl-police.jpg new file mode 100644 index 0000000..efee26f Binary files /dev/null and b/assignments/soumya-jain123/Assignment_2/images/girl-police.jpg differ diff --git a/assignments/soumya-jain123/Assignment_2/images/great-logo.png b/assignments/soumya-jain123/Assignment_2/images/great-logo.png new file mode 100644 index 0000000..6f614cf Binary files /dev/null and b/assignments/soumya-jain123/Assignment_2/images/great-logo.png differ diff --git a/assignments/soumya-jain123/Assignment_2/images/insta.png b/assignments/soumya-jain123/Assignment_2/images/insta.png new file mode 100644 index 0000000..434c5b1 Binary files /dev/null and b/assignments/soumya-jain123/Assignment_2/images/insta.png differ diff --git a/assignments/soumya-jain123/Assignment_2/images/lgog.png b/assignments/soumya-jain123/Assignment_2/images/lgog.png new file mode 100644 index 0000000..a1ef2dd Binary files /dev/null and b/assignments/soumya-jain123/Assignment_2/images/lgog.png differ diff --git a/assignments/soumya-jain123/Assignment_2/images/linkin.png b/assignments/soumya-jain123/Assignment_2/images/linkin.png new file mode 100644 index 0000000..b58136f Binary files /dev/null and b/assignments/soumya-jain123/Assignment_2/images/linkin.png differ diff --git a/assignments/soumya-jain123/Assignment_2/images/tweet.png b/assignments/soumya-jain123/Assignment_2/images/tweet.png new file mode 100644 index 0000000..8fb8045 Binary files /dev/null and b/assignments/soumya-jain123/Assignment_2/images/tweet.png differ diff --git a/assignments/soumya-jain123/Assignment_2/images/yt.png b/assignments/soumya-jain123/Assignment_2/images/yt.png new file mode 100644 index 0000000..024b3f9 Binary files /dev/null and b/assignments/soumya-jain123/Assignment_2/images/yt.png differ diff --git a/assignments/soumya-jain123/Assignment_2/index.html b/assignments/soumya-jain123/Assignment_2/index.html new file mode 100644 index 0000000..81a3507 --- /dev/null +++ b/assignments/soumya-jain123/Assignment_2/index.html @@ -0,0 +1,354 @@ + + + + + + My Replica + + + +
+
+ +
+
+ +
+ +
+
+
+
+
+
+ +

₹1,250 can make

+

a difference in a child's life

+

+ with
+ RO water purifier | Handwash facilities | Racks | Plates
+ Serving spoons | Trolleys | Uniform | Safety Accessories +

+ Support Now +
+ +
+ Smiling Girls +
+
+
+
+

Akshaya Patra Narrative

+
+

Primary cause

+ +
+
+

+ 1 + Food for education (primary cause) +

+ +
    +
  • + Core Mid Day Meal program
    + including kitchen facilities (vehicles, salaries, trainings etc.) +
    • +
  • + Other supporting programs +
      +
    • + ICDS: Anganwadi feeding program (children in + formative age group 3–6Y) +
      • +
    • + Other meal programs: Milk distribution (in + association with Govt. of Karnataka), breakfast feeding +
      • +
    • + Infrastructure: Minimal upgrades + supplementing core MDM program (seating areas with roof, + infrastructure to serve (trolleys), utensils) +
      • +
    +
    • +
+
+ +
+ + + + + + + + + + + + + + + + + Social causes + + + supported by + + + TAPF + + +
+ +
+

+ 2 + Sustainability (ancillary cause) +

+
    +
  • + Energy: Shift to renewable sources of energy +
    • +
  • + Water: Minimize non-cooking freshwater usage +
    • +
  • Waste: Effective waste management
    • +
+ +

+ 3 + Education beyond MDM (ancillary cause) +

+
    +
  • + Scholarship program: Financial aid for government + school children and MDM beneficiaries seeking higher education / + specialized skills training +
    • +
+
+
+
+
+
+ +
+ +
+

Shayan

+

+ Dreams to Serve as a Police Officer +

+ Shayan in police uniform +
+ + +
+
+ Impact Stories + +
+
+ From Loss to Law: Shayan’s Fight for Justice

+ Akshaya Patra supports Shayan, a 7th grader from Karnataka, with + nutritious meals as he aspires to become a police officer and serve + his community. +
+ Read more... +
+
+
+ + + diff --git a/assignments/soumya-jain123/Assignment_2/readme.md b/assignments/soumya-jain123/Assignment_2/readme.md new file mode 100644 index 0000000..0c9b6dc --- /dev/null +++ b/assignments/soumya-jain123/Assignment_2/readme.md @@ -0,0 +1,85 @@ +# Assignment 2: Website Recreation - Inspired by Akshaya Patra Foundation + +## 📌 Objective + +The purpose of this assignment is to **recreate a static website** using **HTML** and **CSS**, taking inspiration from the structure, design, and layout of the official website of **[Akshaya Patra Foundation](https://www.akshayapatra.org/)**. + +This task focuses on improving your skills in layout replication, styling, and page structuring by carefully observing and mimicking a real-world website design. + +--- + +## 🧱 Project Requirements + +### 🔹 Design Inspiration + +- Reference website: [https://www.akshayapatra.org/](https://www.akshayapatra.org/) +- Try to follow the structure and aesthetics (colors, spacing, content blocks) as closely as possible. + +### 🔹 Mandatory Elements to Include + +- **Header and Navigation Bar** + - Logo (placeholder or recreated) + - Navigation links (Home, About Us, Programs, Donate, etc.) +- **Hero Section** + - Banner image or main CTA area similar to the homepage +- **Information Blocks** + - Sections representing content such as mission, stats, or impact +- **Footer** + - Include basic footer layout with links or contact info + +--- + +## 🛠️ Technologies Used + +- HTML5 +- CSS3 +- (Optional) JavaScript for minor interactivity + +--- + +## 🧪 Functional Expectations + +- Page should look visually similar to the original website +- Responsive design across different screen sizes +- All layout elements must be properly aligned and styled +- Navigation should scroll to sections (if single page) or link to placeholder pages + +--- + +## 📂 Deliverables + +- `index.html` (main page layout) +- `style.css` (CSS file for design and responsiveness) +- `assets/` folder for images, icons, logos, etc. +- (Optional) Additional HTML files if multiple pages are created + +--- + +## ✅ Evaluation Criteria + +- Accuracy and faithfulness of design recreation +- Clean code (HTML semantics, CSS organization) +- Visual consistency and responsiveness +- Creativity and attention to detail + +--- + +## 🌟 Bonus (Optional) + +- Add hover effects or transitions to elements +- Use Flexbox or Grid to replicate layout structure +- Add a scroll-to-top button or smooth scrolling + +--- + +## 🕒 Deadline + +- Submit the completed project by **[Insert Deadline Here]** + +--- + +> **Note:** Do not copy exact images or copyrighted content. Use placeholder content if needed, but structure and layout must resemble the original. + +--- + +**Push your design boundaries and keep learning! 🎨🚀**