prajyoth

index.html

@@ -39,6 +39,64 @@ <h1>Markdown.css</h1>
                         $('a img').css({'max-height': '1em', 'max-width': '1em'});
                       -->
                 </p>
+                <hr>
+
+<h2>Features</h2>
+<ul>
+<li>Clean Markdown-like styling</li>
+<li>Readable typography</li>
+<li>Responsive layout</li>
+<li>Simple CSS structure</li>
+</ul>
+
+<h2>Example Code</h2>
+
+<pre>
+<code>
+function hello() {
+    console.log("Hello Markdown CSS!");
+}
+hello();
+</code>
+</pre>
+
+<h2>Blockquote Example</h2>
+<blockquote>
+Markdown.css helps HTML look clean and readable like Markdown documents.
+</blockquote>
+
+<h2>Table Example</h2>
+<table border="1">
+<tr>
+<th>Feature</th>
+<th>Status</th>
+</tr>
+
+<tr>
+<td>Typography</td>
+<td>✔ Implemented</td>
+</tr>
+
+<tr>
+<td>Responsive</td>
+<td>✔ Implemented</td>
+</tr>
+
+<tr>
+<td>Dark Mode</td>
+<td>⚡ Coming Soon</td>
+</tr>
+</table>
+
+<h2>Image Example</h2>
+
+<img src="https://picsum.photos/600/300" alt="sample image">
+
+<hr>
+
+<h2>Contact</h2>
+
+<p>If you like this project, contribute on GitHub and improve it further.</p>
             </div>
         </div>
         <div id="content-main">

style.css

@@ -194,3 +194,72 @@ a.right {
         display: block;
     }
 }
+/* General Page Styling */
+
+body{
+    font-family: Arial, Helvetica, sans-serif;
+    background:#f5f7fa;
+    margin:40px;
+    line-height:1.6;
+}
+
+/* Headings */
+
+h1,h2,h3{
+    color:#1e3a8a;
+}
+
+/* Code Block */
+
+pre{
+    background:#1e1e1e;
+    color:#00ff9c;
+    padding:15px;
+    border-radius:6px;
+    overflow-x:auto;
+}
+
+/* Table Styling */
+
+table{
+    width:100%;
+    border-collapse:collapse;
+    margin-top:20px;
+}
+
+th,td{
+    padding:10px;
+    text-align:left;
+}
+
+th{
+    background:#1e3a8a;
+    color:white;
+}
+
+tr:nth-child(even){
+    background:#f2f2f2;
+}
+
+/* Blockquote */
+
+blockquote{
+    border-left:5px solid #1e3a8a;
+    padding-left:15px;
+    font-style:italic;
+    color:#444;
+}
+
+/* Image */
+
+img{
+    margin-top:20px;
+    border-radius:10px;
+    width:100%;
+}
+
+/* Hover Effect */
+
+a:hover{
+    color:#2563eb;
+}