init app [project90]

pradipchaudhary · pradipchaudhary · commit e4d7034aeb5a · 2024-02-13T13:37:54.000+05:45
diff --git a/90-Responsive Design for Accessibility/index.html b/90-Responsive Design for Accessibility/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Your Accessible Web App</title>
+        <link rel="stylesheet" href="styles.css" />
+    </head>
+    <body>
+        <header>
+            <h1>Your Accessible Web App</h1>
+        </header>
+
+        <nav>
+            <ul>
+                <li><a href="#home">Home</a></li>
+                <li><a href="#about">About</a></li>
+                <li><a href="#contact">Contact</a></li>
+            </ul>
+        </nav>
+
+        <main>
+            <!-- Your main content goes here -->
+        </main>
+
+        <footer>
+            <p>&copy; 2024 Your Company. All rights reserved.</p>
+        </footer>
+
+        <script src="script.js"></script>
+    </body>
+</html>
diff --git a/90-Responsive Design for Accessibility/readme.md b/90-Responsive Design for Accessibility/readme.md
@@ -0,0 +1,8 @@
+# Accessibility Considerations:
+
+-   Use semantic HTML elements (<nav>, <header>, <main>, <footer>) for better screen reader support.
+-   Ensure all interactive elements have focus styles.
+-   Implement ARIA roles and attributes as needed.
+-   Test your web app using accessibility tools like Axe or Lighthouse.
+-   Provide alternative text for images (alt attribute).
+-   Ensure proper color contrast for text.
diff --git a/90-Responsive Design for Accessibility/script.js b/90-Responsive Design for Accessibility/script.js
@@ -0,0 +1,2 @@
+// You can add JavaScript functionality here as needed
+// For example, handling responsive navigation or other dynamic behavior
diff --git a/90-Responsive Design for Accessibility/styles.css b/90-Responsive Design for Accessibility/styles.css
@@ -0,0 +1,47 @@
+body {
+    font-family: "Arial", sans-serif;
+    margin: 0;
+    padding: 0;
+}
+
+header,
+nav,
+main,
+footer {
+    margin: 20px;
+}
+
+nav ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+nav li {
+    display: inline-block;
+    margin-right: 20px;
+}
+
+a {
+    text-decoration: none;
+    color: #333;
+}
+
+a:hover {
+    color: #0066cc;
+}
+
+@media only screen and (max-width: 600px) {
+    nav {
+        display: block;
+    }
+
+    nav ul {
+        text-align: center;
+    }
+
+    nav li {
+        display: block;
+        margin: 10px 0;
+    }
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+// You can add JavaScript functionality here as needed`
	`2`	`+// For example, handling responsive navigation or other dynamic behavior`