diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
index 30b434bcf..341285214 100644
--- a/Sprint-3/quote-generator/index.html
+++ b/Sprint-3/quote-generator/index.html
@@ -1,13 +1,14 @@
-
+
- Title here
+ Quote generator app
+
+
- hello there
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js
index 4a4d04b72..d3875bb5e 100644
--- a/Sprint-3/quote-generator/quotes.js
+++ b/Sprint-3/quote-generator/quotes.js
@@ -491,3 +491,16 @@ const quotes = [
];
// call pickFromArray with the quotes array to check you get a random quote
+
+function displayQuote() {
+ const randomQuote = pickFromArray(quotes);
+ const quoteElement = document.getElementById("quote");
+ const authorElement = document.getElementById("author");
+
+ quoteElement.textContent = randomQuote.quote;
+ authorElement.textContent = randomQuote.author;
+}
+
+displayQuote();
+
+document.getElementById("new-quote").addEventListener("click", displayQuote);
diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css
index 63cedf2d2..33e24ff56 100644
--- a/Sprint-3/quote-generator/style.css
+++ b/Sprint-3/quote-generator/style.css
@@ -1 +1,66 @@
-/** Write your CSS in here **/
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ background-color: #f5a742;
+ font-family: Georgia, serif;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 40px;
+}
+
+#quote {
+ background-color: white;
+ padding: 80px 60px 40px;
+ margin: 0;
+ font-size: 2.5rem;
+ color: #f5a742;
+ line-height: 1.5;
+ position: relative;
+ max-width: 1200px;
+ width: 100%;
+}
+
+#quote::before {
+ content: '"';
+ font-size: 5rem;
+ left: 30px;
+ top: 10px;
+ font-weight: bold;
+ line-height: 1;
+}
+
+#author {
+ background-color: white;
+ padding: 20px 60px 80px;
+ margin: 0;
+ text-align: right;
+ font-size: 1.5rem;
+ color: #f5a742;
+ max-width: 1200px;
+ width: 100%;
+ position: relative;
+}
+
+#new-quote {
+ position: absolute;
+ bottom: 30px;
+ right: 60px;
+ background-color: #f5a742;
+ color: white;
+ border: none;
+ padding: 15px 35px;
+ font-size: 1.1rem;
+ cursor: pointer;
+ font-family: sans-serif;
+}
+
+#new-quote:hover {
+ background-color: #e69630;
+}