summaryrefslogtreecommitdiff
path: root/css/05-classless-css/index.html
diff options
context:
space:
mode:
authorKamal Wickramanayake <kamal@inbox.lk>2026-07-04 14:35:25 +0530
committerKamal Wickramanayake <kamal@inbox.lk>2026-07-04 14:35:25 +0530
commitc3dd2a6d44ef929e0832ce6dca53a818e6711218 (patch)
tree66d7254ef8534a0e23b50f9d1fce41cb36a8e6ab /css/05-classless-css/index.html
parent975dccebfcf51878b790a765d8e92ebcad895a24 (diff)
Added CSS examples
Diffstat (limited to 'css/05-classless-css/index.html')
-rw-r--r--css/05-classless-css/index.html40
1 files changed, 40 insertions, 0 deletions
diff --git a/css/05-classless-css/index.html b/css/05-classless-css/index.html
new file mode 100644
index 0000000..6f72bcb
--- /dev/null
+++ b/css/05-classless-css/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Beautiful HTML-Only Page</title>
+ <!-- The magic line: This automatically styles everything below -->
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css">
+</head>
+<body>
+
+ <header>
+ <h1>🚀 Built with Pure HTML</h1>
+ <p>Zero custom CSS files were written to create this look.</p>
+ </header>
+
+ <main>
+ <article>
+ <h2>Semantic Layouts Work Best</h2>
+ <p>Classless frameworks look at your semantic HTML tags. They add consistent padding, clean typography, and standard responsive widths automatically.</p>
+ <p>This page is styled using <a href="https://newcss.net/" target="_blank">new.css</a>.</p>
+ </article>
+
+ <section>
+ <h3>Interactive Elements</h3>
+ <p>Notice how inputs and buttons are automatically styled:</p>
+ <form action="#">
+ <input type="email" placeholder="Enter your email...">
+ <button type="submit">Subscribe</button>
+ </form>
+ </section>
+ </main>
+
+ <footer>
+ <p>&copy; 2026 No-CSS Experiment</p>
+ </footer>
+
+</body>
+</html>
+