Skip to content

Commit 8927618

Browse files
AdishiSoodAdishiSood
authored
Create style.css
1 parent cbb0cc5 commit 8927618

File tree

1 file changed

+191
-0
lines changed

1 file changed

+191
-0
lines changed

‎Mobile_Number_validator/style.css‎

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
body {
2+
height: 100vh;
3+
display: flex;
4+
justify-content: center;
5+
align-items: center;
6+
font-family: cursive;
7+
color: #fff;
8+
}
9+
* {
10+
padding: 0;
11+
margin: 0;
12+
}
13+
14+
html {
15+
box-sizing: border-box;
16+
}
17+
.container {
18+
height: 500px;
19+
width: 290px;
20+
background-color: black;
21+
border: 5px solid silver;
22+
border-radius: 20px;
23+
display: grid;
24+
grid-template-rows: 5% 25% 1fr 10%;
25+
}
26+
.top {
27+
grid-row: 1 / 2;
28+
display: flex;
29+
justify-content: space-between;
30+
align-items: center;
31+
padding: 0 10px;
32+
font-size: 13px;
33+
font-weight: 400;
34+
position: relative;
35+
}
36+
37+
.top i {
38+
font-size: 10px;
39+
}
40+
41+
.speaker {
42+
width: 50px;
43+
height: 7px;
44+
background-color: #333;
45+
border-radius: 10000px;
46+
position: absolute;
47+
left: 50%;
48+
transform: translateX(-50%);
49+
}
50+
51+
.camera {
52+
width: 7px;
53+
height: 7px;
54+
background-color: #333;
55+
border-radius: 50%;
56+
position: absolute;
57+
left: 62%;
58+
}
59+
60+
.top .fa-battery-three-quarters {
61+
font-size: 14px;
62+
}
63+
64+
.top .fa-location-arrow {
65+
transform: translateY(-1px);
66+
}
67+
68+
/*************************/
69+
.input-results {
70+
grid-row: 2 / 3;
71+
display: flex;
72+
flex-direction: column;
73+
justify-content: center;
74+
align-items: center;
75+
}
76+
77+
#input {
78+
width: 75%;
79+
height: 40px;
80+
text-align: center;
81+
font-size: 22px;
82+
background-color: #000;
83+
color: #fff;
84+
border: 1px solid white;
85+
outline: none;
86+
}
87+
88+
#input::placeholder {
89+
font-size: 12px;
90+
}
91+
92+
#results {
93+
margin-top: 5px;
94+
text-align: center;
95+
font-size: 12px;
96+
color: royalblue;
97+
display: flex;
98+
flex-direction: column;
99+
}
100+
101+
/*************************/
102+
.buttons {
103+
grid-row: 3 / 4;
104+
display: grid;
105+
grid-template-columns: repeat(3, 1fr);
106+
justify-items: center;
107+
align-items: center;
108+
padding: 0 10%;
109+
margin-bottom: 10px;
110+
}
111+
112+
.button {
113+
height: 52px;
114+
width: 52px;
115+
border-radius: 50%;
116+
display: flex;
117+
flex-direction: column;
118+
justify-content: center;
119+
align-items: center;
120+
background-color: #444;
121+
font-size: 22px;
122+
font-weight: 300;
123+
transition: all 0.2s;
124+
}
125+
126+
.button:hover,
127+
.button:active {
128+
cursor: pointer;
129+
background-color: rgba(255, 255, 255, 0.8);
130+
}
131+
132+
.button.phone-button:hover,
133+
.button.phone-button:active {
134+
background: rgba(50, 205, 50, 0.8);
135+
}
136+
137+
.button span {
138+
font-size: 8px;
139+
letter-spacing: 2px;
140+
padding-left: 2px;
141+
}
142+
143+
.button .fa-asterisk {
144+
font-size: 16px;
145+
}
146+
147+
.button.phone-button {
148+
grid-column: 2 / 3;
149+
background-color: limegreen;
150+
}
151+
152+
/*************************/
153+
.bottom {
154+
grid-row: 4 / 5;
155+
display: flex;
156+
justify-content: space-evenly;
157+
margin-top: 10px;
158+
color: #aaa;
159+
}
160+
161+
.item {
162+
display: flex;
163+
flex-direction: column;
164+
justify-content: space-evenly;
165+
align-items: center;
166+
}
167+
168+
.item i {
169+
font-size: 20px;
170+
}
171+
172+
.item span {
173+
font-size: 10px;
174+
}
175+
176+
.buttons {
177+
display: grid;
178+
grid-template-columns: repeat(3, 1fr);
179+
}
180+
181+
.c {
182+
height: 5px;
183+
width: 5px;
184+
margin: 1px;
185+
background-color: royalblue;
186+
border-radius: 50%;
187+
}
188+
189+
.keypad span {
190+
color: royalblue;
191+
}

0 commit comments

Comments
 (0)