Skip to content

Commit 360728b

Browse files
nirajxdevnirajxdev
committed
update the designing and styling
1 parent 0dab7db commit 360728b

File tree

2 files changed

+129
-58
lines changed

2 files changed

+129
-58
lines changed

‎index.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Guess Number Game</title>
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
710
<link rel="stylesheet" href="style.css">
811
</head>
912
<body>
@@ -19,11 +22,10 @@ <h1>Guess the Number Game</h1>
1922
</form>
2023

2124
<div id="result_box">
25+
<p id="hint" class="lowOrHigh"></p>
2226
<p id="previous_guess">Previous guesses: <span class="guesses"></span></p>
2327

2428
<p id="guess_remaining">Guesses remaining: <span class="lastResult">10</span></p>
25-
26-
<p id="hint" class="lowOrHigh"></p>
2729
</div>
2830

2931
</div>

‎style.css‎

Lines changed: 125 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,155 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
17
body {
28
display: flex;
39
flex-direction: column;
410
align-items: center;
511
justify-content: center;
612
min-height: 100vh;
7-
margin-top: 2rem;
8-
/* overflow: hidden; */
9-
padding: 0 1rem;
10-
box-sizing: border-box;
13+
background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
14+
font-family: 'Poppins', sans-serif;
15+
color: #fff;
1116
}
12-
h1 {
13-
font-size: 2.5rem;
17+
18+
.guess-box {
19+
background: rgba(255, 255, 255, 0.05);
20+
backdrop-filter: blur(10px);
21+
-webkit-backdrop-filter: blur(10px);
22+
border: 1px solid rgba(255, 255, 255, 0.1);
23+
border-radius: 20px;
24+
padding: 2rem;
25+
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
1426
text-align: center;
27+
max-width: 500px;
28+
width: 90%;
29+
transition: transform 0.3s ease;
1530
}
16-
#guide {
17-
font-size: 1.5rem;
18-
text-align: center;
31+
32+
.guess-box:hover {
33+
transform: translateY(-5px);
34+
box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.5);
1935
}
20-
#guess {
21-
display: flex;
22-
justify-content: center;
36+
37+
h1 {
38+
font-family: 'Orbitron', sans-serif;
2339
font-size: 2rem;
24-
margin-top: 2rem;
25-
font-weight: bold;
40+
margin-bottom: 1rem;
41+
color: #00f3ff;
42+
text-shadow: 0 0 10px rgba(0, 243, 255, 0.5);
43+
letter-spacing: 2px;
2644
}
27-
#guessInput {
28-
display: block;
29-
margin: 0 auto;
30-
text-align: center;
31-
font-size: 1.25rem;
32-
height: 2.5rem;
33-
width: 80%;
34-
max-width: 400px;
45+
46+
#guide {
47+
font-size: 1rem;
48+
margin-bottom: 0.3rem;
49+
color: #e0e0e0;
3550
}
36-
#submit {
51+
52+
#entry_box {
53+
margin-top: 1.5rem;
54+
}
55+
56+
label#guess {
3757
display: block;
38-
margin: 1rem auto;
39-
height: 2.5rem;
40-
width: 8rem;
41-
border-radius: 10px;
58+
font-size: 1.3rem;
59+
margin-bottom: 0.5rem;
60+
font-weight: 600;
61+
color: #ff00cc;
62+
text-shadow: 0 0 5px rgba(255, 0, 204, 0.3);
63+
}
64+
65+
#guessInput {
66+
background: transparent;
67+
border: none;
68+
border-bottom: 2px solid #00f3ff;
69+
color: #fff;
70+
font-size: 1.8rem;
4271
text-align: center;
43-
font-size: 1.25rem;
72+
width: 100%;
73+
padding: 0.5rem;
74+
margin-bottom: 1.5rem;
75+
font-family: 'Orbitron', sans-serif;
76+
outline: none;
77+
transition: border-color 0.3s ease;
78+
}
79+
80+
#guessInput:focus {
81+
border-bottom-color: #ff00cc;
82+
}
83+
84+
#submit, #newGame {
85+
background: linear-gradient(45deg, #ff00cc, #333399);
86+
border: none;
87+
border-radius: 50px;
88+
color: white;
89+
padding: 1rem 2.5rem;
90+
font-size: 1.2rem;
91+
font-family: 'Orbitron', sans-serif;
4492
font-weight: bold;
45-
background-color: rgb(216, 131, 20);
4693
cursor: pointer;
94+
transition: all 0.3s ease;
95+
text-transform: uppercase;
96+
letter-spacing: 1px;
97+
box-shadow: 0 4px 15px rgba(255, 0, 204, 0.3);
98+
margin-top: 1rem;
99+
}
100+
101+
#submit:hover, #newGame:hover {
102+
transform: scale(1.05);
103+
box-shadow: 0 6px 20px rgba(255, 0, 204, 0.5);
104+
background: linear-gradient(45deg, #333399, #ff00cc);
47105
}
106+
48107
#result_box {
49-
margin-top: 2rem;
50-
text-align: center;
51-
font-size: 1.5rem;
108+
margin-top: 1.5rem;
109+
background: rgba(0, 0, 0, 0.2);
110+
padding: 1rem;
111+
border-radius: 15px;
52112
}
113+
114+
#previous_guess, #guess_remaining {
115+
font-size: 1rem;
116+
margin: 0.3rem 0;
117+
color: #ccc;
118+
}
119+
120+
.guesses, .lastResult {
121+
font-weight: bold;
122+
color: #00f3ff;
123+
font-family: 'Orbitron', sans-serif;
124+
}
125+
53126
#hint {
54-
font-size: 2rem;
55-
font-weight: 500;
127+
margin-bottom: 1rem;
128+
font-size: 1.5rem;
129+
font-weight: 600;
130+
min-height: 2rem;
131+
color: #ff00cc;
132+
text-shadow: 0 0 8px rgba(255, 0, 204, 0.4);
56133
}
57134

58-
@media (max-width: 768px) {
59-
body {
60-
margin-top: 1rem;
61-
}
135+
/* Dynamic classes that might be added by JS or useful for hint styling */
136+
#hint h3 {
137+
margin: 0;
138+
font-weight: normal;
139+
font-size: 1.2rem;
140+
}
141+
142+
@media (max-width: 600px) {
62143
h1 {
63-
font-size: 1.8rem;
64-
}
65-
#guide {
66-
font-size: 1.2rem;
144+
font-size: 1.8rem;
67145
}
68-
#guess {
69-
font-size: 1.5rem;
70-
margin-top: 1rem;
146+
147+
.guess-box {
148+
padding: 2rem;
71149
}
150+
72151
#guessInput {
73-
font-size: 1rem;
74-
height: 2.5rem;
75-
width: 90%;
76-
}
77-
#submit {
78-
height: 3rem;
79-
width: 90%;
80-
max-width: 300px;
81-
}
82-
#result_box, #hint {
83-
font-size: 1.2rem;
152+
font-size: 1.5rem;
84153
}
85154
}
86155

0 commit comments

Comments
 (0)