From b0e8f660c75ce9f5a45c20316e4fdabc8b540d14 Mon Sep 17 00:00:00 2001 From: rupeshbangar Date: Mon, 23 Feb 2026 23:33:09 +0530 Subject: [PATCH] Responsive Design --- Week-02/Day_03/index.html | 43 +++++++++++++++++++++++++++++++ Week-02/Day_03/style.css | 53 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 96 insertions(+) create mode 100644 Week-02/Day_03/index.html create mode 100644 Week-02/Day_03/style.css diff --git a/Week-02/Day_03/index.html b/Week-02/Day_03/index.html new file mode 100644 index 0000000..6d7e2ec --- /dev/null +++ b/Week-02/Day_03/index.html @@ -0,0 +1,43 @@ + + + + + + Responsive Task - Week 2 - Day 3 + + + + +
+
+

Responsive News

+ +
+ +
+
+ Sample +

Article 1

+

This layout uses CSS Grid to stay organized on desktop.

+
+
+ Sample +

Article 2

+

On mobile, these cards will stack one on top of the other.

+
+
+ Sample +

Article 3

+

Responsive design makes the web accessible to everyone.

+
+
+
+ + + \ No newline at end of file diff --git a/Week-02/Day_03/style.css b/Week-02/Day_03/style.css new file mode 100644 index 0000000..e8ad1be --- /dev/null +++ b/Week-02/Day_03/style.css @@ -0,0 +1,53 @@ +body { + font-family: sans-serif; + line-height: 1.5; + margin: 0; + padding: 20px; +} + +img { + max-width: 100%; + height: auto; + display: block; +} + +nav ul { + display: flex; + list-style: none; + padding: 0; + gap: 20px; + background: #1a08e9; + padding: 10px; +} +nav a { + color: white; + text-decoration: none; +} + +.grid { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 20px; +} + +.card { + border: 2px solid #271e1e; + padding: 10px; +} + +@media (max-width: 700px) { + + .grid { + grid-template-columns: 1fr; + } + + nav ul { + flex-direction: column; + text-align: center; + } + + h1 { + text-align: center; + font-size: 1.5rem; + } +} \ No newline at end of file