Skip to content

Commit aea4304

Browse files
saifamranisaifamrani
authored
Update style.css
1 parent 8cc7e05 commit aea4304

1 file changed

Lines changed: 134 additions & 57 deletions

File tree

‎Week3/project/style.css‎

Lines changed: 134 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,145 @@
1-
*{
2-
margin: 0;
3-
padding: 0;
4-
box-sizing: border-box;
1+
body {
2+
font-family: 'Roboto', Helvetica, sans-serif;
3+
background: linear-gradient(to left, rgb(71, 48, 133), rgb(31, 28, 24));
54
}
65

7-
.fontSize{
8-
text-align: center;
9-
font-weight: bold;
10-
font-size: large;
6+
#app {
7+
height: 500px;
8+
width: 370px;
9+
margin: 100px auto;
10+
background: #f7f7f7;
11+
box-shadow: 0 0 3px rgba(86, 115, 138, 0.1);
12+
border-radius: 20px;
1113
}
12-
body {
13-
width: 100%;
14-
height: 100vh;
14+
15+
h1 {
16+
background: rgb(127, 112, 167);
17+
color: rgb(255, 255, 255);
1518
margin: 0;
16-
padding: 0;
17-
background-color: rgb(85, 30, 20);
19+
padding: 10px 100px;
20+
font-size: 18px;
21+
font-weight: normal;
22+
border-top-left-radius: 20px;
23+
border-top-right-radius: 20px;
24+
}
25+
26+
p {
27+
padding-left: 15px;
28+
}
29+
30+
form input[type="text"] {
31+
width: 70px;
32+
}
33+
34+
input {
35+
padding-left: 20px;
36+
}
37+
38+
#billamount {
39+
font-size: 15px;
40+
color: rgb(43, 11, 117);
41+
background-color: #f7f7f7;
42+
width: 50%;
43+
padding: 5px 5px 5px 5px;
44+
}
45+
46+
#billamount:focus {
47+
background: rgb(255, 255, 255);
48+
border: 3px solid #2980b9;
49+
outline: none;
50+
}
51+
52+
#peopleAmount {
53+
width: 50%;
54+
padding: 5px 5px 8px 8px;
55+
margin-left: 20px;
56+
color: rgb(23, 60, 109);
57+
background-color: #f7f7f7;
58+
font-size: 15px;
1859
}
19-
.container{
20-
background-color: white;
21-
width: 40%;
60+
61+
#serviceRating {
62+
padding: 10px 10px 10px 10px;
63+
margin-left: 20px;
64+
font-size: 15px;
65+
color: rgb(23, 60, 109);
66+
}
67+
68+
button {
69+
font-weight: bold;
70+
display: block;
2271
margin: 30px auto;
23-
border-radius: 15px;
24-
padding: 5px;
72+
background: rgb(173, 19, 58);
73+
border-radius: 5px;
74+
width: 200px;
75+
height: 50px;
76+
font-size: 17px;
77+
color: rgb(255, 255, 255);
2578
}
26-
.showScreen{
27-
padding: 20px;
79+
80+
button:hover {
81+
background: #4b2726;
82+
border-bottom-color: rgb(17, 17, 17);
2883
}
29-
.top {
30-
background-color: black;
31-
border-radius: 15px 15px 0px 0px;
84+
85+
button:active {
86+
position: relative;
87+
top: 1px;
88+
}
89+
90+
#totalTip {
91+
font-size: 30px;
92+
margin-top: 5px;
3293
text-align: center;
33-
color: white;
34-
width: 100%;
35-
margin: 0 0 5px 0;
36-
height: 40%;
37-
display: flex;
38-
align-items: center;
39-
justify-content: center;
4094
}
41-
select {
42-
width: 50%;
43-
height: 60px;
44-
padding: 15px;
45-
}
46-
#clac {
47-
background-color: rgb(159, 39, 61);
48-
border: none;
49-
border-radius: 10px;
50-
width: 70%;
51-
height: 40px;
52-
margin: 20px 50px;
53-
outline: none;
54-
box-shadow: 0px 5px 10px rgb(51, 50, 50);
55-
}
56-
#calc:hover {
57-
cursor: pointer;
58-
color: rgb(159, 39, 61);
59-
background-color: black;
60-
}
61-
62-
#result,
63-
#each {
95+
96+
#totalTip:before {
97+
content: "Tip amount";
98+
font-size: 20px;
99+
font-weight: bold;
100+
display: block;
101+
text-transform: uppercase;
102+
}
103+
104+
#totalTip sup {
105+
font-size: 20px;
106+
top: -18px;
107+
}
108+
109+
#totalTip small {
110+
font-size: 20px;
111+
font-weight: bold;
112+
display: block;
113+
}
114+
115+
/* Modal css */
116+
.model {
64117
display: none;
65-
}
66-
button {
67-
margin-left: 20px;
68-
}
118+
position: fixed;
119+
z-index: 10;
120+
left: 0;
121+
top: 0;
122+
height: 100%;
123+
width: 100%;
124+
overflow: auto;
125+
background: rgba(0, 0, 0, 0.5);
126+
}
127+
128+
.modalContent {
129+
background: rgb(255, 255, 255);
130+
text-align: center;
131+
margin: 10% auto;
132+
font-size: 1.2rem;
133+
width: 350px;
134+
border-radius: 10px;
135+
padding: 2rem;
136+
box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
137+
animation-name: modalopen;
138+
animation-duration: 1s;
139+
}
140+
141+
.modalContent h2 {
142+
margin-bottom: 1rem;
143+
padding: 0;
144+
color: rgb(31, 3, 12);
145+
}

0 commit comments

Comments
 (0)