Skip to content

Commit 6b10827

Browse files
IfycodeIfycode
committed
Initial Commit
0 parents  commit 6b10827

File tree

5 files changed

+455
-0
lines changed

5 files changed

+455
-0
lines changed

Diff for: ‎css/index.css

+381
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,381 @@
1+
2+
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap');
3+
4+
* {
5+
margin: 0;
6+
padding: 0;
7+
box-sizing: border-box;
8+
}
9+
10+
html, body {
11+
height: 100vh;
12+
}
13+
14+
body {
15+
font-family: 'Roboto', sans-serif;
16+
display: grid;
17+
grid-template-rows: 70px 1fr auto;
18+
grid-template-columns: auto;
19+
}
20+
21+
header {
22+
display: flex;
23+
justify-content: flex-end;
24+
align-items: center;
25+
padding: 0 25px 0 0;
26+
font-size: 0.85em;
27+
}
28+
29+
header > * {
30+
margin: 0 0 0 15px;
31+
}
32+
33+
header .fas {
34+
font-size: 1.4em;
35+
color: #999;
36+
}
37+
38+
header div {
39+
width: 35px;
40+
display: inline-block;
41+
overflow: hidden;
42+
border-radius: 50%;
43+
-webkit-border-radius: 50%;
44+
-moz-border-radius: 50%;
45+
-ms-border-radius: 50%;
46+
-o-border-radius: 50%;
47+
}
48+
49+
main {
50+
text-align: center;
51+
}
52+
53+
main div {
54+
display: flex;
55+
justify-content: center;
56+
align-items: center;
57+
margin: 0 auto; /*text align didn't work on div*/
58+
}
59+
60+
main div.input-area {
61+
justify-content: space-evenly;
62+
border: 1px solid #ccc;
63+
height: 45px;
64+
max-width: 430px;
65+
border-radius: 25px;
66+
-webkit-border-radius: 25px;
67+
-moz-border-radius: 25px;
68+
-ms-border-radius: 25px;
69+
-o-border-radius: 25px;
70+
}
71+
72+
main div.input-area:hover {
73+
box-shadow: 1px 1px 5px #ccc, -1px -1px 5px #ccc;
74+
transform: translateY(1px);
75+
-webkit-transform: translateY(1px);
76+
-moz-transform: translateY(1px);
77+
-ms-transform: translateY(1px);
78+
-o-transform: translateY(1px);
79+
transition: all 0.25s ease-in-out;
80+
-webkit-transition: all 0.25s ease-in-out;
81+
-moz-transition: all 0.25s ease-in-out;
82+
-ms-transition: all 0.25s ease-in-out;
83+
-o-transition: all 0.25s ease-in-out;
84+
}
85+
86+
.transform {
87+
transition: all 0.25s ease-in-out;
88+
-webkit-transition: all 0.25s ease-in-out;
89+
-moz-transition: all 0.25s ease-in-out;
90+
-ms-transition: all 0.25s ease-in-out;
91+
-o-transition: all 0.25s ease-in-out;
92+
}
93+
94+
.no-transform {
95+
transform: none;
96+
-webkit-transform: none;
97+
-moz-transform: none;
98+
-ms-transform: none;
99+
-o-transform: none;
100+
}
101+
102+
main ul > li {
103+
margin: 0 0 0 10px;
104+
}
105+
106+
input {
107+
width: 75%;
108+
height: 80%;
109+
border: none;
110+
outline: none;
111+
font-size: 1em;
112+
font-weight: 300;
113+
}
114+
115+
.fas {
116+
color: #3268ff;
117+
opacity: 0.9;
118+
}
119+
120+
::-webkit-input-placeholder { /* Edge */
121+
font-weight: 300;
122+
color: #ccc;
123+
}
124+
125+
:-ms-input-placeholder { /* Internet Explorer 10-11 */
126+
font-weight: 300;
127+
color: #ccc;
128+
}
129+
130+
::placeholder {
131+
font-weight: 300;
132+
color: #ccc;
133+
}
134+
135+
136+
img {
137+
max-width: 100%;
138+
}
139+
140+
main img {
141+
margin: 100px 0 30px 0;
142+
}
143+
144+
main div.languages {
145+
font-size: 0.9em;
146+
}
147+
148+
button {
149+
font-family: 'Roboto', sans-serif;
150+
border: none;
151+
background: #eee;
152+
color: #333;
153+
padding: 9px 15px;
154+
margin: 30px 5px;
155+
font-size: 0.95em;
156+
border: 2px solid transparent;
157+
cursor: pointer;
158+
border-radius: 4px;
159+
-webkit-border-radius: 4px;
160+
-moz-border-radius: 4px;
161+
-ms-border-radius: 4px;
162+
-o-border-radius: 4px;
163+
transition: border 0.15s linear;
164+
-webkit-transition: border 0.15s linear;
165+
-moz-transition: border 0.15s linear;
166+
-ms-transition: border 0.15s linear;
167+
-o-transition: border 0.15s linear;
168+
}
169+
170+
button:hover {
171+
border: 2px solid #ccc;
172+
}
173+
174+
ul {
175+
display: flex;
176+
list-style-type: none;
177+
}
178+
179+
a {
180+
text-decoration: none;
181+
}
182+
183+
a:hover {
184+
text-decoration: underline;
185+
}
186+
187+
footer a {
188+
color: #333;
189+
}
190+
191+
footer {
192+
background: #eee;
193+
font-size: 0.9em;
194+
color: #333;
195+
}
196+
197+
footer > * {
198+
padding: 13px 25px;
199+
border-top: 1px solid #ccc;
200+
}
201+
202+
footer li:nth-of-type(6),
203+
footer li:last-child {
204+
margin: 0 0 0 25px;
205+
}
206+
207+
footer li:first-child,
208+
footer li:nth-of-type(2),
209+
footer li:nth-of-type(3) {
210+
margin: 0 25px 0 0;
211+
}
212+
213+
214+
li.split {
215+
margin: 0 0 0 auto;
216+
}
217+
218+
@media screen and (max-width: 767px) {
219+
220+
footer ul {
221+
justify-content: space-between;
222+
}
223+
224+
footer li:nth-of-type(6),
225+
footer li:last-child {
226+
margin: 0;
227+
}
228+
229+
footer li:first-child,
230+
footer li:nth-of-type(2),
231+
footer li:nth-of-type(3) {
232+
margin: 0;
233+
}
234+
235+
li.split {
236+
margin: 0;
237+
}
238+
}
239+
240+
@media screen and (max-width: 655px) {
241+
242+
main div.input-area {
243+
justify-content: space-evenly;
244+
border: 1px solid #ccc;
245+
height: 45px;
246+
max-width: 300px;
247+
}
248+
249+
main img {
250+
max-width: 50%;
251+
}
252+
253+
button {
254+
padding: 9px 15px;
255+
margin: 30px 3px;
256+
font-size: 0.9em;
257+
}
258+
259+
div.languages {
260+
font-size: 0.8em;
261+
}
262+
263+
footer {
264+
font-size: 0.8em;
265+
}
266+
}
267+
268+
@media screen and (max-width: 655px) {
269+
270+
main div.input-area {
271+
justify-content: space-evenly;
272+
border: 1px solid #ccc;
273+
height: 45px;
274+
max-width: 70%;
275+
}
276+
277+
main img {
278+
max-width: 50%;
279+
}
280+
281+
button {
282+
padding: 9px 15px;
283+
margin: 30px 3px;
284+
font-size: 0.9em;
285+
}
286+
287+
div.languages {
288+
font-size: 0.8em;
289+
}
290+
291+
footer {
292+
font-size: 0.8em;
293+
}
294+
}
295+
296+
297+
@media screen and (max-width: 530px) {
298+
299+
main div.input-area {
300+
justify-content: space-evenly;
301+
height: 40px;
302+
}
303+
304+
main ul > li {
305+
margin: 0 0 0 7px;
306+
}
307+
308+
main img {
309+
max-width: 50%;
310+
}
311+
312+
input {
313+
font-size: 0.9em;
314+
}
315+
316+
button {
317+
padding: 9px 15px;
318+
margin: 30px 3px;
319+
font-size: 0.8em;
320+
}
321+
322+
main div.languages {
323+
font-size: 0.8em;
324+
flex-direction: column;
325+
}
326+
327+
main div.languages > * {
328+
margin: 0 0 10px 0;
329+
}
330+
331+
footer {
332+
font-size: 0.8em;
333+
}
334+
335+
footer > div {
336+
text-align: center;
337+
}
338+
339+
footer ul {
340+
flex-flow: row wrap;
341+
justify-content: center;
342+
}
343+
344+
footer ul > li:nth-of-type(n) {
345+
margin: 0 5px 10px 10px;
346+
}
347+
}
348+
349+
350+
351+
/*=====================================
352+
Height adjustment for small screens
353+
portrait and landscape
354+
======================*/
355+
356+
@media screen and (max-height: 675px) {
357+
main img {
358+
margin: 70px 0 30px 0;
359+
}
360+
361+
}
362+
363+
@media screen and (max-height: 635px) {
364+
main img {
365+
margin: 40px 0 30px 0;
366+
}
367+
368+
footer {
369+
font-size: 0.7em;
370+
}
371+
}
372+
373+
@media screen and (max-height: 535px) {
374+
body {
375+
height: auto;
376+
}
377+
378+
main div.languages {
379+
margin: 0 0 60px 0;
380+
}
381+
}

Diff for: ‎img/google-logo.png

5.83 KB
Loading

0 commit comments

Comments
 (0)