Skip to content

Commit eff335b

Browse files
author
Pretty Taruvinga
committed
added css
1 parent 9fd61b2 commit eff335b

2 files changed

Lines changed: 98 additions & 5 deletions

File tree

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

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,19 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Quote Generator</title>
7+
<link rel="stylesheet" href="style.css" />
78
<script defer src="quotes.js"></script>
89
</head>
910
<body>
10-
<h1>Quote Generator</h1>
11-
<p id="quote"></p>
12-
<p id="author"></p>
13-
<button type="button" id="new-quote">New quote</button>
11+
<div class="container">
12+
<h1>Quote Generator</h1>
13+
14+
<div class="quote-box">
15+
<p id="quote"></p>
16+
<p id="author"></p>
17+
</div>
18+
19+
<button type="button" id="new-quote">New quote</button>
20+
</div>
1421
</body>
1522
</html>

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

Lines changed: 87 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,87 @@
1-
/** Write your CSS in here **/
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: "Poppins", Arial, sans-serif;
6+
}
7+
8+
body {
9+
height: 100vh;
10+
background: linear-gradient(135deg, #fbc2eb, #a6c1ee);
11+
display: flex;
12+
justify-content: center;
13+
align-items: center;
14+
}
15+
16+
.container {
17+
position: relative;
18+
width: 90%;
19+
max-width: 520px;
20+
height: 360px;
21+
22+
background: rgba(255, 255, 255, 0.75);
23+
backdrop-filter: blur(10px);
24+
25+
border-radius: 24px;
26+
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
27+
28+
display: flex;
29+
flex-direction: column;
30+
padding: 25px;
31+
}
32+
33+
h1 {
34+
text-align: center;
35+
font-size: 1.6rem;
36+
color: #6d5dfc;
37+
font-weight: 600;
38+
letter-spacing: 1px;
39+
}
40+
41+
.quote-box {
42+
flex: 1;
43+
display: flex;
44+
flex-direction: column;
45+
justify-content: center;
46+
align-items: center;
47+
48+
text-align: center;
49+
}
50+
51+
#quote {
52+
font-size: 1.3rem;
53+
color: #333;
54+
line-height: 1.6;
55+
font-style: italic;
56+
padding: 0 10px;
57+
}
58+
59+
#author {
60+
margin-top: 12px;
61+
font-size: 0.95rem;
62+
color: #7a7a7a;
63+
}
64+
65+
#new-quote {
66+
position: absolute;
67+
bottom: 18px;
68+
right: 18px;
69+
70+
background: linear-gradient(135deg, #ff9a9e, #fad0c4);
71+
color: white;
72+
border: none;
73+
74+
padding: 10px 16px;
75+
border-radius: 50px;
76+
77+
cursor: pointer;
78+
font-weight: 500;
79+
80+
box-shadow: 0 6px 15px rgba(255, 154, 158, 0.4);
81+
transition: all 0.3s ease;
82+
}
83+
84+
#new-quote:hover {
85+
transform: translateY(-2px) scale(1.05);
86+
box-shadow: 0 10px 20px rgba(255, 154, 158, 0.5);
87+
}

0 commit comments

Comments
 (0)