Skip to content

Commit 5ac5f13

Browse files
KonvalyKonvaly
committed
Style: improve quote generator layout and theming
1 parent b8fad7a commit 5ac5f13

2 files changed

Lines changed: 78 additions & 9 deletions

File tree

‎Sprint-3/quote-generator/index.html‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,25 @@
55
<meta charset="UTF-8" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>Quote generator app</title>
8+
<link rel="stylesheet" href="style.css" />
89
<script defer src="quotes.js"></script>
910
</head>
1011

1112
<body>
12-
<h1>hello there</h1>
13-
<p id="quote"></p>
14-
<p id="author"></p>
15-
<button type="button" id="new-quote">New quote</button>
16-
<label>
17-
<input type="checkbox" id="auto-play-toggle" />
18-
Auto Generate Quotes
19-
</label>
20-
<p id="auto-play-status">auto-play: OFF</p>
13+
<main class="quote-app">
14+
<h1>hello there</h1>
15+
<p id="quote"></p>
16+
<p id="author"></p>
17+
<button type="button" id="new-quote">New quote</button>
18+
<div class="auto-play-controls">
19+
<label class="auto-play-label">
20+
<input type="checkbox" id="auto-play-toggle" />
21+
Auto-generate quotes
22+
</label>
23+
<span id="auto-play-status">auto-play: OFF</span>
24+
</div>
25+
26+
</main>
2127
</body>
2228

2329
</html>

‎Sprint-3/quote-generator/style.css‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,64 @@
11
/** Write your CSS in here **/
2+
3+
body {
4+
margin: 0;
5+
padding: 0;
6+
min-height: 100vh;
7+
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
12+
background: linear-gradient(135deg, #e0f7ff, #c8f7dc);
13+
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
14+
sans-serif;
15+
}
16+
17+
.quote-app {
18+
background: #ffffff;
19+
padding: 2rem 2.5rem;
20+
border-radius: 12px;
21+
22+
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
23+
24+
max-width: 600px;
25+
width: 90%;
26+
text-align: center;
27+
}
28+
29+
label {
30+
display: inline-flex;
31+
align-items: center;
32+
gap: 0.5rem;
33+
margin-top: 1rem;
34+
}
35+
36+
.auto-play-controls {
37+
display: flex;
38+
align-items: center;
39+
justify-content: center;
40+
gap: 1rem;
41+
margin-top: 1rem;
42+
}
43+
44+
#auto-play-toggle {
45+
width: 20px;
46+
height: 20px;
47+
cursor: pointer;
48+
accent-color: #16a34a;
49+
}
50+
51+
#auto-play-status {
52+
margin-top: 0;
53+
font-size: 0.9rem;
54+
padding: 0.25rem 0.5rem;
55+
border-radius: 999px;
56+
display: inline-block;
57+
}
58+
59+
.auto-play-label {
60+
display: inline-flex;
61+
align-items: center;
62+
gap: 0.4rem;
63+
margin: 0;
64+
}

0 commit comments

Comments
 (0)