Subversion Repositories cheapmusic

Rev

Rev 31 | Go to most recent revision | Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
25 - 1 
/*--
2 
Author: CodexWorld
3 
Author URL: https://www.codexworld.com
4 
License: Creative Commons Attribution 3.0 Unported
5 
License URL: http://creativecommons.org/licenses/by/3.0/
6 
--*/
7 
 
8 
/* reset */
9 
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
10 
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
11 
ol,ul{list-style:none;margin:0px;padding:0px;}
12 
blockquote,q{quotes:none;}
13 
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
14 
table{border-collapse:collapse;border-spacing:0;}
15 
a{text-decoration:none;}
16 
img{max-width:100%;}
17 
/*end reset*/
18 
 
19 
/* start editing from here */
20 
body {
21 
    font-family: 'Roboto', sans-serif;
22 
    background: #FFFFFF;
23 
    background-position: center;
24 
    background-size: cover;
25 
    text-align: center;
26 
    color: #151310;
27 
}
28 
.container {
29 
    padding: 40px 0 0 0;
30 
}
31 
.header h1 {
32 
    font-size: 40px;
33 
    text-transform: uppercase;
34 
    letter-spacing: 5px;
35 
    font-weight: 400;
36 
    margin: 40px 0px 20px 0;
37 
    color: #606060;
38 
}
39 
.wrapper-frm {
40 
    width: 30%;
41 
    margin: 0 auto;
42 
    background: #F1F1F1;
43 
    padding: 42px 0 0 0;
44 
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
45 
}
46 
.wrapper-frm h2 {
47 
    color: #151310;
48 
    font-size: 22px;
49 
    letter-spacing: 1px;
50 
    text-transform: uppercase;
51 
    padding-bottom: 15px;
52 
}
53 
.wrapper-frm .top{
54 
    padding: 0 25px;
55 
}
56 
.top h4{
57 
   margin: 15px 5px;
58 
}
59 
.frm-input {
60 
    position: relative;
61 
}
62 
.frm-input input[type="email"], .frm-input .email-in{
63 
    background: url(../images/mail.png) no-repeat scroll 7px 50%;
64 
}
65 
.frm-input input[type="password"], .frm-input .pass-in{
66 
    background: url(../images/lock.png) no-repeat scroll 7px 50%;
67 
}
68 
.frm-input .user-in{
69 
    background: url(../images/user.png) no-repeat scroll 7px 50%;
70 
}
71 
.frm-input .file-in{
72 
    background: url(../images/uimg.png) no-repeat scroll 7px 50%;
73 
}
74 
.frm-input .phone-in{
75 
    background: url(../images/phone.png) no-repeat scroll 7px 50%;
76 
}
77 
.frm-input .addr-in{
78 
    background: url(../images/addr.png) no-repeat scroll 7px 50%;
79 
}
80 
.frm-input input[type="text"], .frm-input input[type="email"], .frm-input input[type="password"], .frm-input input[type="file"]{
81 
    width: 87%;
82 
    padding: 15px 0px 15px 30px;
83 
    border: none;
84 
    border-bottom: 1px solid #a2a0a0;
85 
    outline: none;
86 
    font-size: 15px;
87 
    color: #212121;
88 
    margin: 14px 0px;
89 
    font-family: 'Roboto', sans-serif;
90 
    background-color: #FFFFFF;
91 
}
92 
.frm-info{
93 
    padding: 20px 0 30px;
94 
}
95 
.frm-info .check{
96 
    float: left;
97 
}
98 
.check input[type="checkbox"] {
99 
    display: none;
100 
}
101 
.check input[type="checkbox"]+label {
102 
    position: relative;
103 
    padding-left: 25px;
104 
    display: inline-block;
105 
    font-size: .9em;
106 
    color: #151310;
107 
    cursor: pointer;
108 
}
109 
.check input[type="checkbox"]+label span:first-child {
110 
    width: 13px;
111 
    height: 13px;
112 
    display: inline-block;
113 
    border: 1px solid #151310;
114 
    position: absolute;
115 
    top: 1px;
116 
    left: 2px;
117 
}
118 
.check input[type="checkbox"]:checked+label span:first-child:before {
119 
    content: "";
120 
    background: url(../images/tick-b.png)no-repeat;
121 
    position: absolute;
122 
    left: 2px;
123 
    top: 1px;
124 
    font-size: 10px;
125 
    width: 10px;
126 
    height: 10px;
127 
}
128 
.frm-info a {
129 
    float: right;
130 
    font-size: .9em;
131 
    color: #151310;
132 
}
133 
.frm-info a:hover {
134 
    text-decoration: underline;
135 
}
136 
 
137 
.frm-btn input[type="submit"] {
138 
    background-color: #28B890;
139 
    font-size: 20px;
140 
    color: #fff;
141 
    height: 36px;
142 
    line-height: 36px;
143 
    padding: 0 16px;
144 
    letter-spacing: .5px;
145 
    border-radius: 2px;
146 
    width: 50%;
147 
    cursor: pointer;
148 
    outline: none;
149 
    border: none;
150 
    text-transform: uppercase;
151 
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
152 
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
153 
    margin-bottom: 10px;
154 
}
155 
.frm-btn input[type="submit"]:hover, .frm-btn input[type="submit"]:active {
156 
    background: #2BA07F;
157 
    webkit-box-shadow: 0 3px 3px 0 rgba(0,0,0,0.14), 0 1px 7px 0 rgba(0,0,0,0.12), 0 3px 1px -1px rgba(0,0,0,0.2);
158 
    box-shadow: 0 3px 3px 0 rgba(0,0,0,0.14), 0 1px 7px 0 rgba(0,0,0,0.12), 0 3px 1px -1px rgba(0,0,0,0.2);
159 
}
160 
.frm-input p{
161 
    font-size: 14px;
162 
    margin-top: -10px;
163 
    margin-bottom: 5px;
164 
}
165 
.frm-input.error input{
166 
    border-color: #E44439;
167 
}
168 
.status-msg{
169 
    font-size: 16px;
170 
    font-weight: 500;
171 
    border: 1px dashed;
172 
    padding: 8px 10px;
173 
    margin-bottom: 5px;
174 
}
175 
.status-msg.success{
176 
    color: #3BA956;
177 
}
178 
.status-msg.error, .frm-input.error p{
179 
   color: #E44439;
180 
}
181 
 
182 
.social-icons h3 {
183 
    text-align: center;
184 
    font-size: 20px;
185 
    letter-spacing: 2px;
186 
    margin: 15px 10px;
187 
    margin-bottom: 0;
188 
}
189 
ul.bottom-sc-icons {
190 
    list-style: none;
191 
    margin: 0;
192 
    padding: 22px 0;
193 
    text-align: center;
194 
}
195 
ul.bottom-sc-icons li {
196 
    display: inline-block;
197 
    margin: 0 5px;
198 
}
199 
ul.bottom-sc-icons li a{
200 
    padding: 6px 8px;
201 
    border: 1px solid #333;
202 
    border-radius: 2px;
203 
}
204 
a.facebook{
205 
    border-color: #455797 !important;
206 
    color: #455797;
207 
}
208 
a.google{
209 
    border-color: #E44439 !important;
210 
    color: #E44439;
211 
}
212 
a.twitter{
213 
    border-color: #46A3DE !important;
214 
    color: #46A3DE;
215 
}
216 
a.facebook:hover, a.facebook:active{
217 
    background-color: #455797;
218 
    color: #fff;
219 
}
220 
a.google:hover, a.google:active{
221 
    background-color: #E44439;
222 
    color: #fff;
223 
}
224 
a.twitter:hover, a.twitter:active{
225 
    background-color: #46A3DE;
226 
    color: #fff;
227 
}
228 
ul.bottom-sc-icons li span {
229 
    letter-spacing: 1px;
230 
    vertical-align: middle;
231 
}
232 
ul.bottom-sc-icons li a i{
233 
    display: inline-block;
234 
    margin-right: 5px;
235 
    width: 24px;
236 
    height: 24px;
237 
    position: relative;
238 
    top: 6px;
239 
}
240 
a.facebook i{
241 
    background: url(../images/facebook.png) no-repeat;
242 
}
243 
a.google i{
244 
    background: url(../images/google.png) no-repeat;
245 
}
246 
a.twitter i{
247 
    background: url(../images/twitter.png) no-repeat;
248 
}
249 
a.facebook:hover i{
250 
    background: url(../images/facebook-w.png) no-repeat;
251 
}
252 
a.google:hover i{
253 
    background: url(../images/google-w.png) no-repeat;
254 
}
255 
a.twitter:hover i{
256 
    background: url(../images/twitter-w.png) no-repeat;
257 
}
258 
 
259 
.wrapper-frm .bottom {
260 
    background: #616161;
261 
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
262 
}
263 
.bottom p {
264 
    font-size: 15px;
265 
    color: #fff;
266 
    padding: 25px 0;
267 
    letter-spacing: 1px;
268 
}
269 
.bottom p a {
270 
    text-transform: uppercase;
271 
    font-size: 14px;
272 
    text-decoration: underline;
273 
    letter-spacing: 1px;
274 
    color: #fff;
275 
    padding: 10px;
276 
}
277 
.bottom p a:hover, .bottom p a:active{
278 
    color: #28B890;
279 
}
280 
 
281 
.footer p {
282 
    margin: 3em 0em;
283 
    color: #757575;
284 
    font-size: 15px;
285 
    font-weight: 300;
286 
    letter-spacing: 2px;
287 
}
288 
.footer a {
289 
    color: #2873D6;
290 
}
291 
.footer a:hover, .footer a:active{
292 
    color: #151310;
293 
}
294 
 
295 
 
296 
/*--responsive starts here--*/
297 
@media (max-width:1440px) {
298 
	.wrapper-frm {
299 
		width: 32%;
300 
	}
301 
}
302 
@media (max-width:1366px) {
303 
	.wrapper-frm {
304 
		width: 33%;
305 
	}
306 
}
307 
@media (max-width:1280px) {
308 
	.wrapper-frm {
309 
		width: 36%;
310 
	}
311 
}
312 
@media (max-width:1080px) {
313 
	.wrapper-frm {
314 
		width: 43%;
315 
	}
316 
    .container {
317 
		padding: 40px 0 32px 0;
318 
	}
319 
	.footer p {
320 
       margin: 3em 0em 5em 0;
321 
	}
322 
	.header h1 {
323 
      font-size: 36px;
324 
	}
325 
}
326 
@media (max-width:1024px) {
327 
	.wrapper-frm {
328 
		width: 45%;
329 
	}
330 
}
331 
@media (max-width:991px) {
332 
	.wrapper-frm {
333 
		width: 51%;
334 
	}
335 
}
336 
@media (max-width:800px) {
337 
	.wrapper-frm {
338 
		width: 56%;
339 
	}
340 
    .header h1 {
341 
		font-size: 36px;
342 
		letter-spacing: 7px;
343 
	}
344 
}
345 
@media (max-width:768px) {
346 
	.wrapper-frm {
347 
		width: 61%;
348 
	}
349 
    .container {
350 
		padding: 24px 0 0 0;
351 
	}
352 
    .footer p {
353 
		margin: 3em 0em 17em 0;
354 
	}
355 
    .header h1 {
356 
		letter-spacing: 6px;
357 
		margin: 80px 0px 20px 0;
358 
	}
359 
}
360 
@media (max-width:736px) {
361 
	.wrapper-frm {
362 
		width: 63%;
363 
	}
364 
    .container {
365 
		padding: 20px 0 0 0;
366 
	}
367 
    .header h1 {
368 
		letter-spacing: 5px;
369 
	}
370 
}
371 
@media (max-width:667px) {
372 
	.wrapper-frm {
373 
		width: 70%;
374 
	}
375 
    .footer p {
376 
		margin: 3em 0em 6em 0;
377 
	}
378 
    .header h1 {
379 
		letter-spacing: 2px;
380 
	}
381 
}
382 
@media (max-width:600px) {
383 
	.wrapper-frm {
384 
		width: 78%;
385 
	}
386 
    .container {
387 
		padding: 5px 0 0 0;
388 
	}
389 
    .footer p {
390 
		letter-spacing: 1px;
391 
	}
392 
}
393 
@media (max-width:568px) {
394 
	.wrapper-frm {
395 
		width: 82%;
396 
	}
397 
    .container {
398 
		padding: 0;
399 
	}
400 
    .header h1 {
401 
		font-size: 33px;
402 
		margin: 60px 0px 35px 0;
403 
	}
404 
}
405 
@media (max-width:480px) {
406 
	.wrapper-frm {
407 
		width: 93%;
408 
	}
409 
    .footer p {
410 
		line-height: 1.8em;
411 
	}
412 
	.footer p {
413 
		margin: 3em 0em 3em 0;
414 
	}
415 
    .header h1 {
416 
		font-size: 30px;
417 
		letter-spacing: 1px;
418 
	}
419 
}
420 
@media (max-width:440px) {
421 
    .header h1 {
422 
		font-size: 26px;
423 
		letter-spacing: 1px;
424 
	}
425 
}
426 
@media (max-width:414px) {
427 
	.wrapper-frm {
428 
		width: 95%;
429 
	}
430 
    .footer p {
431 
		margin: 2.5em 0em;
432 
	}
433 
    .header h1 {
434 
		line-height: 40px;
435 
		margin: 44px 0px 28px 0;
436 
		font-size:25px;
437 
	}
438 
}
439 
@media (max-width:384px) {
440 
    .footer p {
441 
		margin: 2em 0em;
442 
	}
443 
}
444 
@media (max-width:375px) {
445 
	.wrapper-frm {
446 
		width: 98%;
447 
	}
448 
    .header h1 {
449 
		margin: 35px 0px 20px 0;
450 
		font-size: 23px;
451 
	}
452 
}
453 
@media (max-width:320px) {
454 
	.footer p {
455 
		margin: 1em 0em;
456 
	}
457 
    .header h1 {
458 
		margin: 30px 0px 15px 0;
459 
		font-size: 22px;
460 
	}
461 
}
462 
/*--//responsive end here--*/