Skip to content

Commit 269e827

Browse files
committed
Add styles
1 parent acb9009 commit 269e827

File tree

1 file changed

+79
-0
lines changed

1 file changed

+79
-0
lines changed

Source-Code/AgeCalculator/style.css

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
*{
2+
margin:0;
3+
padding:0;
4+
box-sizing:border-box;
5+
font-family:cursive;
6+
}
7+
.center{
8+
display:flex;
9+
justify-content:center;
10+
align-items:center;
11+
height:100vh;
12+
}
13+
.container{
14+
display:flex;
15+
width:600px;
16+
/* margin:auto;
17+
margin-top:10%;
18+
margin-bottom:10%; */
19+
align-items:center;
20+
justify-content:center;
21+
flex-direction:column;
22+
background-color:rgb(169, 216, 80);
23+
box-shadow:8px 8px black;
24+
color:white;
25+
padding:5% 0%;
26+
}
27+
28+
#currDate{
29+
font-size:30px;
30+
margin:20px;
31+
font-weight:bold;
32+
}
33+
34+
input{
35+
font-size:20px;
36+
padding:15px;
37+
margin:20px;
38+
text-align:center;
39+
border-radius:20px;
40+
border:1px solid yellow;
41+
cursor:pointer;
42+
}
43+
44+
button{
45+
font-size:20px;
46+
padding:10px 20px;
47+
border-radius:10px;
48+
border:none;
49+
background-color:yellow;
50+
color:black;
51+
margin:20px;
52+
text-transform: uppercase;
53+
font-weight:bold;
54+
cursor:pointer;
55+
}
56+
57+
button:hover{
58+
background-color:white;
59+
color:rgb(169, 216, 80);
60+
}
61+
62+
#displayAge{
63+
display:flex;
64+
align-items:center;
65+
justify-content:center;
66+
width:620px;
67+
height:490px;
68+
background-color:rgb(91, 228, 141);
69+
border-radius:30px;
70+
position:absolute;
71+
visibility: hidden;
72+
}
73+
74+
#age{
75+
color:white;
76+
font-size:50px;
77+
margin:20px;
78+
font-weight:bold;
79+
}

0 commit comments

Comments
 (0)