diff --git a/Week-2/Day-3/Readme.md b/Week-2/Day-3/Readme.md
new file mode 100644
index 0000000..76afbeb
--- /dev/null
+++ b/Week-2/Day-3/Readme.md
@@ -0,0 +1,34 @@
+# Week 2 – Day 3 Responsive Web Design
+
+### 📅 Date
+24 December 2025
+
+### 🎯 Objective
+To understand the principles of responsive web design and implement layouts that adapt to different screen sizes using CSS media queries.
+
+### 📚 Topics Covered
+- Responsive web design fundamentals
+- Viewport meta tag
+- Responsive units
+- Media queries
+- Mobile-first design approach
+
+### 🛠️ Activities Performed
+- Studied responsive design concepts.
+- Implemented responsive layouts using media queries.
+- Created mobile and desktop-friendly web pages.
+- Tested responsiveness using browser developer tools.
+
+### 🧪 Tools & Technologies Used
+- HTML5
+- CSS3
+- Visual Studio Code
+- Browser DevTools
+
+### 📈 Learning Outcomes
+- Understood how responsive websites work.
+- Learned to write media queries.
+- Improved ability to design mobile-friendly layouts.
+
+### ✅ Status
+Completed
diff --git a/Week-2/Day-3/index.html b/Week-2/Day-3/index.html
new file mode 100644
index 0000000..b856de5
--- /dev/null
+++ b/Week-2/Day-3/index.html
@@ -0,0 +1,22 @@
+
+
+
+
+ Responsive Design
+
+
+
+
+
+
+
+
+ Content Box 1
+ Content Box 2
+ Content Box 3
+
+
+
+
diff --git a/Week-2/Day-3/responsive-web-design.md b/Week-2/Day-3/responsive-web-design.md
new file mode 100644
index 0000000..757f949
--- /dev/null
+++ b/Week-2/Day-3/responsive-web-design.md
@@ -0,0 +1,52 @@
+# Responsive Web Design – Notes
+Responsive Web Design (RWD) is an approach to web development that ensures websites adapt smoothly to different screen sizes and devices such as mobiles, tablets, laptops, and desktops.
+
+## Why Responsive Design is Important
+Users access websites from multiple devices.
+Improves user experience on small and large screens.
+Required for modern web applications.
+Helps in SEO and accessibility.
+
+## Viewport Meta Tag
+The viewport controls the layout on mobile browsers.
+
+width=device-width sets layout width equal to device width.
+initial-scale=1.0 ensures proper zoom level.
+
+## Responsive Units
+Instead of fixed units (px), responsive units are preferred:
+% → relative to parent
+em / rem → relative to font size
+vw / vh → viewport width & height
+
+Example:
+.container {
+ width: 90%;
+}
+
+## Media Queries
+Media queries apply CSS based on screen size.
+
+Syntax:
+@media (max-width: 768px) {
+ body {
+ background-color: lightgray;
+ }
+}
+
+Common breakpoints:
+Mobile: ≤ 480px
+Tablet: ≤ 768px
+Desktop: ≥ 1024px
+
+## Responsive Layout Techniques
+Flexible widths
+Stacked layouts on small screens
+Scalable images using max-width: 100%
+Using Flexbox/Grid responsively (without deep layout complexity)
+
+## Best Practices
+Mobile-first approach
+Test on different screen sizes
+Avoid fixed widths
+Keep layouts simple and readable
\ No newline at end of file
diff --git a/Week-2/Day-3/style.css b/Week-2/Day-3/style.css
new file mode 100644
index 0000000..92bd5e2
--- /dev/null
+++ b/Week-2/Day-3/style.css
@@ -0,0 +1,51 @@
+body {
+ font-family: Arial, sans-serif;
+ margin: 0;
+}
+
+header {
+ background-color: #222;
+ color: white;
+ text-align: center;
+ padding: 15px;
+}
+
+header:hover {
+ background-color: red;
+}
+
+.content {
+ display: flex;
+ justify-content: space-around;
+ padding: 20px;
+}
+
+.card {
+ width: 30%;
+ background-color: #eee;
+ padding: 20px;
+ text-align: center;
+}
+
+.card:hover {
+ background-color: green;
+}
+
+@media (max-width: 768px) {
+ .content {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .card {
+ width: 80%;
+ margin-bottom: 15px;
+ }
+}
+
+/* Mobile View */
+@media (max-width: 480px) {
+ header h1 {
+ font-size: 20px;
+ }
+}