Merge pull request #9 from nkzarrabi/separate-css

Separate CSS from HTML
nkzarrabi · Dec 7, 2024 · 98e8acf · 98e8acf
2 parents efc5798 + 856f555
commit 98e8acf
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 61 deletions.
diff --git a/index.html b/index.html
@@ -1,70 +1,10 @@
-
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Beneath the Veil of Dante's Sorrow</title>
-    <style>
-        body {
-            font-family: 'Georgia', serif;
-            line-height: 1.8;
-            margin: 0;
-            padding: 0;
-            background-color: #fff9e6;
-            color: #333;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-        }
-        .content {
-            max-width: 800px;
-            margin: 20px;
-            padding: 20px;
-            background: #fffdf2;
-            border-radius: 8px;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-        }
-        h1 {
-            text-align: center;
-            margin-top: 20px;
-            font-size: 2.2em;
-            color: #2c3e50;
-        }
-        h2 {
-            margin-top: 20px;
-            border-bottom: 2px solid #2c3e50;
-            padding-bottom: 5px;
-            color: #34495e;
-        }
-        p {
-            margin: 15px 0;
-            text-align: justify;
-        }
-        blockquote {
-            font-style: italic;
-            color: #555;
-            margin: 20px 40px;
-            padding-left: 20px;
-            border-left: 4px solid #2c3e50;
-        }
-        footer {
-            text-align: center;
-            margin-top: 20px;
-            padding: 10px;
-            font-size: 0.9em;
-            color: #7f8c8d;
-            border-top: 1px solid #ddd;
-            width: 100%;
-        }
-        a {
-            color: #2980b9;
-            text-decoration: none;
-        }
-        a:hover {
-            text-decoration: underline;
-        }
-    </style>
+    <link rel="stylesheet" href="styles.css">
 </head>
 <body>
     <div class="content">

diff --git a/styles.css b/styles.css
@@ -0,0 +1,53 @@
+body {
+    font-family: Arial, sans-serif;
+    line-height: 1.6;
+    margin: 0;
+    padding: 0;
+    background-color: #f4f4f4;
+}
+
+.content {
+    max-width: 800px;
+    margin: 20px auto;
+    padding: 20px;
+    background-color: #fff;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+h1, h2 {
+    color: #333;
+}
+
+h1 {
+    font-size: 2.5em;
+    margin-bottom: 0.5em;
+}
+
+h2 {
+    font-size: 1.8em;
+    margin-top: 1.5em;
+    margin-bottom: 0.5em;
+}
+
+p {
+    margin-bottom: 1em;
+    color: #666;
+}
+
+blockquote {
+    margin: 1.5em 0;
+    padding: 0.5em 1em;
+    background-color: #f9f9f9;
+    border-left: 5px solid #ccc;
+    color: #555;
+}
+
+footer {
+    text-align: center;
+    padding: 10px 0;
+    background-color: #333;
+    color: #fff;
+    position: fixed;
+    width: 100%;
+    bottom: 0;
+}