I wrote a CSS file for the html file.

Mona-Eltantawy · Mona-Eltantawy · commit 942eaa264b11 · 2026-03-31T16:52:52.000+01:00
diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
@@ -8,6 +8,7 @@
     <link rel="stylesheet" href="style.css">
   </head>
   <body>
+    <div class="container">
       <h1>Quote Generator</h1>
       <p id="quote"></p>
       <p id="author"></p>
diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css
@@ -0,0 +1,67 @@
+* {
+    padding: 0;
+    margin: 0;
+box-sizing: border-box;
+}
+body {
+    background-color: orange;
+    display: flex;
+    justify-content: center; /* horizontal centering */
+    align-items: flex-start;     /* vertical centering */
+    height: 100vh;           /* full viewport height */
+    font-family: Georgia, 'Times New Roman', Times, serif;
+}
+
+.container {
+    background-color: white;
+    width: 70%;
+    max-width: 650px;
+    padding: 60px 80px;
+    border-radius: 8px;
+    text-align: center; /* centers text inside */
+margin:20% 20%; 
+display: block;}
+
+#quote {
+    font-size: 28px;
+    color: #f59e0b;
+    line-height: 1.5;
+    position : relative;
+    margin-bottom: 30px;
+
+}
+#quote::before {
+    content: "“";
+    font-size: 80px;
+    position: absolute;
+    left: -40px;
+    top: -20px;
+    color: #f59e0b;
+}
+#author {
+    display : block;
+    text-align: right;
+    font-size: 16px;
+    color:#f59e0b;
+    margin-bottom: 20px;
+}
+#author::before {
+    content: "~ ";
+    font-size: 20px;
+    color: #f59e0b;
+}
+#new-quote {
+    align-items: right;
+    text-align: right;
+    background-color: #f59e0b;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    cursor: pointer;
+    font-size: 14px;
+  border-radius: 2px;
+  display: block;
+}
+#new-quote :hover {
+    opacity: 0.9;
+}
