12 |
Hey! Read Me...
13 |
This is an example of what you can do with pure css to style radio buttons or checkboxes.
14 |
15 |
16 |
17 |
Your favorite thing in the world:
18 |
19 |
41 |
42 |
43 |
46 |
47 |
--------------------------------------------------------------------------------
/Projects/Basic/CSS radio buttons/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css?family=Lato');
2 |
3 | body, html{
4 | height: 100%;
5 | background: #222222;
6 | font-family: 'Lato', sans-serif;
7 | }
8 |
9 | .container{
10 | display: block;
11 | position: relative;
12 | margin: 40px auto;
13 | height: auto;
14 | width: 500px;
15 | padding: 20px;
16 | }
17 |
18 | h2 {
19 | color: #AAAAAA;
20 | }
21 |
22 | .container ul{
23 | list-style: none;
24 | margin: 0;
25 | padding: 0;
26 | overflow: auto;
27 | }
28 |
29 | ul li{
30 | color: #AAAAAA;
31 | display: block;
32 | position: relative;
33 | float: left;
34 | width: 100%;
35 | height: 100px;
36 | border-bottom: 1px solid #333;
37 | }
38 |
39 | ul li input[type=radio]{
40 | position: absolute;
41 | visibility: hidden;
42 | }
43 |
44 | ul li label{
45 | display: block;
46 | position: relative;
47 | font-weight: 300;
48 | font-size: 1.35em;
49 | padding: 25px 25px 25px 80px;
50 | margin: 10px auto;
51 | height: 30px;
52 | z-index: 9;
53 | cursor: pointer;
54 | -webkit-transition: all 0.25s linear;
55 | }
56 |
57 | ul li:hover label{
58 | color: #FFFFFF;
59 | }
60 |
61 | ul li .check{
62 | display: block;
63 | position: absolute;
64 | border: 5px solid #AAAAAA;
65 | border-radius: 100%;
66 | height: 25px;
67 | width: 25px;
68 | top: 30px;
69 | left: 20px;
70 | z-index: 5;
71 | transition: border .25s linear;
72 | -webkit-transition: border .25s linear;
73 | }
74 |
75 | ul li:hover .check {
76 | border: 5px solid #FFFFFF;
77 | }
78 |
79 | ul li .check::before {
80 | display: block;
81 | position: absolute;
82 | content: '';
83 | border-radius: 100%;
84 | height: 15px;
85 | width: 15px;
86 | top: 5px;
87 | left: 5px;
88 | margin: auto;
89 | transition: background 0.25s linear;
90 | -webkit-transition: background 0.25s linear;
91 | }
92 |
93 | input[type=radio]:checked ~ .check {
94 | border: 5px solid #0DFF92;
95 | }
96 |
97 | input[type=radio]:checked ~ .check::before{
98 | background: #0DFF92;
99 | }
100 |
101 | input[type=radio]:checked ~ label{
102 | color: #0DFF92;
103 | }
104 |
105 | .signature {
106 | margin: 10px auto;
107 | padding: 10px 0;
108 | width: 100%;
109 | }
110 |
111 | .signature p{
112 | text-align: center;
113 | font-family: Helvetica, Arial, Sans-Serif;
114 | font-size: 0.85em;
115 | color: #AAAAAA;
116 | }
117 |
118 | .signature .much-heart{
119 | display: inline-block;
120 | position: relative;
121 | margin: 0 4px;
122 | height: 10px;
123 | width: 10px;
124 | background: #AC1D3F;
125 | border-radius: 4px;
126 | -ms-transform: rotate(45deg);
127 | -webkit-transform: rotate(45deg);
128 | transform: rotate(45deg);
129 | }
130 |
131 | .signature .much-heart::before,
132 | .signature .much-heart::after {
133 | display: block;
134 | content: '';
135 | position: absolute;
136 | margin: auto;
137 | height: 10px;
138 | width: 10px;
139 | border-radius: 5px;
140 | background: #AC1D3F;
141 | top: -4px;
142 | }
143 |
144 | .signature .much-heart::after {
145 | bottom: 0;
146 | top: auto;
147 | left: -4px;
148 | }
149 |
150 | .signature a {
151 | color: #AAAAAA;
152 | text-decoration: none;
153 | font-weight: bold;
154 | }
155 |
156 |
157 | /* Styles for alert...
158 | by the way it is so weird when you look at your code a couple of years after you wrote it XD */
159 |
160 | .alert {
161 | box-sizing: border-box;
162 | background-color: #BDFFE1;
163 | width: 100%;
164 | position: relative;
165 | top: 0;
166 | left: 0;
167 | z-index: 300;
168 | padding: 20px 40px;
169 | color: #333;
170 | }
171 |
172 | .alert h2 {
173 | font-size: 22px;
174 | color: #232323;
175 | margin-top: 0;
176 | }
177 |
178 | .alert p {
179 | line-height: 1.6em;
180 | font-size:18px;
181 | }
182 |
183 | .alert a {
184 | color: #232323;
185 | font-weight: bold;
186 | }
--------------------------------------------------------------------------------
/Projects/Basic/CSS toggle buttons/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
CSS toggle buttons
7 |
8 |
9 |
10 |
11 |
40 |
69 |
104 |
139 |
172 |
205 |
206 |
207 |
208 |
--------------------------------------------------------------------------------
/Projects/Basic/CSS toggle buttons/style.css:
--------------------------------------------------------------------------------
1 | /* CSS rules are kept repetitive so that you can get CSS rules for each button easily :) */
2 |
3 | * {
4 | user-select: none;
5 | -webkit-tap-highlight-color: transparent;
6 | }
7 |
8 | *:focus {
9 | outline: none;
10 | }
11 |
12 | body {
13 | font-family: Arial, Helvetica, sans-serif;
14 | margin: 0;
15 | background-color: #f1f9f9;
16 | }
17 |
18 | #app-cover {
19 | display: table;
20 | width: 600px;
21 | margin: 80px auto;
22 | counter-reset: button-counter;
23 | }
24 |
25 | .row {
26 | display: table-row;
27 | }
28 |
29 | .toggle-button-cover {
30 | display: table-cell;
31 | position: relative;
32 | width: 200px;
33 | height: 140px;
34 | box-sizing: border-box;
35 | }
36 |
37 | .button-cover {
38 | height: 100px;
39 | margin: 20px;
40 | background-color: #fff;
41 | box-shadow: 0 10px 20px -8px #c5d6d6;
42 | border-radius: 4px;
43 | }
44 |
45 | .button-cover:before {
46 | counter-increment: button-counter;
47 | content: counter(button-counter);
48 | position: absolute;
49 | right: 0;
50 | bottom: 0;
51 | color: #d7e3e3;
52 | font-size: 12px;
53 | line-height: 1;
54 | padding: 5px;
55 | }
56 |
57 | .button-cover,
58 | .knobs,
59 | .layer {
60 | position: absolute;
61 | top: 0;
62 | right: 0;
63 | bottom: 0;
64 | left: 0;
65 | }
66 |
67 | .button {
68 | position: relative;
69 | top: 50%;
70 | width: 74px;
71 | height: 36px;
72 | margin: -20px auto 0 auto;
73 | overflow: hidden;
74 | }
75 |
76 | .button.r,
77 | .button.r .layer {
78 | border-radius: 100px;
79 | }
80 |
81 | .button.b2 {
82 | border-radius: 2px;
83 | }
84 |
85 | .checkbox {
86 | position: relative;
87 | width: 100%;
88 | height: 100%;
89 | padding: 0;
90 | margin: 0;
91 | opacity: 0;
92 | cursor: pointer;
93 | z-index: 3;
94 | }
95 |
96 | .knobs {
97 | z-index: 2;
98 | }
99 |
100 | .layer {
101 | width: 100%;
102 | background-color: #ebf7fc;
103 | transition: 0.3s ease all;
104 | z-index: 1;
105 | }
106 |
107 | /* Button 1 */
108 | #button-1 .knobs:before {
109 | content: "YES";
110 | position: absolute;
111 | top: 4px;
112 | left: 4px;
113 | width: 20px;
114 | height: 10px;
115 | color: #fff;
116 | font-size: 10px;
117 | font-weight: bold;
118 | text-align: center;
119 | line-height: 1;
120 | padding: 9px 4px;
121 | background-color: #03a9f4;
122 | border-radius: 50%;
123 | transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
124 | }
125 |
126 | #button-1 .checkbox:checked + .knobs:before {
127 | content: "NO";
128 | left: 42px;
129 | background-color: #f44336;
130 | }
131 |
132 | #button-1 .checkbox:checked ~ .layer {
133 | background-color: #fcebeb;
134 | }
135 |
136 | #button-1 .knobs,
137 | #button-1 .knobs:before,
138 | #button-1 .layer {
139 | transition: 0.3s ease all;
140 | }
141 |
142 | /* Button 2 */
143 | #button-2 .knobs:before,
144 | #button-2 .knobs:after {
145 | content: "YES";
146 | position: absolute;
147 | top: 4px;
148 | left: 4px;
149 | width: 20px;
150 | height: 10px;
151 | color: #fff;
152 | font-size: 10px;
153 | font-weight: bold;
154 | text-align: center;
155 | line-height: 1;
156 | padding: 9px 4px;
157 | background-color: #03a9f4;
158 | border-radius: 50%;
159 | transition: 0.3s ease all;
160 | }
161 |
162 | #button-2 .knobs:before {
163 | content: "YES";
164 | }
165 |
166 | #button-2 .knobs:after {
167 | content: "NO";
168 | }
169 |
170 | #button-2 .knobs:after {
171 | right: -28px;
172 | left: auto;
173 | background-color: #f44336;
174 | }
175 |
176 | #button-2 .checkbox:checked + .knobs:before {
177 | left: -28px;
178 | }
179 |
180 | #button-2 .checkbox:checked + .knobs:after {
181 | right: 4px;
182 | }
183 |
184 | #button-2 .checkbox:checked ~ .layer {
185 | background-color: #fcebeb;
186 | }
187 |
188 | /* Button 3 */
189 | #button-3 .knobs:before {
190 | content: "YES";
191 | position: absolute;
192 | top: 4px;
193 | left: 4px;
194 | width: 20px;
195 | height: 10px;
196 | color: #fff;
197 | font-size: 10px;
198 | font-weight: bold;
199 | text-align: center;
200 | line-height: 1;
201 | padding: 9px 4px;
202 | background-color: #03a9f4;
203 | border-radius: 50%;
204 | transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);
205 | }
206 |
207 | #button-3 .checkbox:active + .knobs:before {
208 | width: 46px;
209 | border-radius: 100px;
210 | }
211 |
212 | #button-3 .checkbox:checked:active + .knobs:before {
213 | margin-left: -26px;
214 | }
215 |
216 | #button-3 .checkbox:checked + .knobs:before {
217 | content: "NO";
218 | left: 42px;
219 | background-color: #f44336;
220 | }
221 |
222 | #button-3 .checkbox:checked ~ .layer {
223 | background-color: #fcebeb;
224 | }
225 |
226 | /* Button 4 */
227 | #button-4 .knobs:before,
228 | #button-4 .knobs:after {
229 | position: absolute;
230 | top: 4px;
231 | left: 4px;
232 | width: 20px;
233 | height: 10px;
234 | color: #fff;
235 | font-size: 10px;
236 | font-weight: bold;
237 | text-align: center;
238 | line-height: 1;
239 | padding: 9px 4px;
240 | background-color: #03a9f4;
241 | border-radius: 50%;
242 | transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
243 | }
244 |
245 | #button-4 .knobs:before {
246 | content: "YES";
247 | }
248 |
249 | #button-4 .knobs:after {
250 | content: "NO";
251 | }
252 |
253 | #button-4 .knobs:after {
254 | top: -28px;
255 | right: 4px;
256 | left: auto;
257 | background-color: #f44336;
258 | }
259 |
260 | #button-4 .checkbox:checked + .knobs:before {
261 | top: -28px;
262 | }
263 |
264 | #button-4 .checkbox:checked + .knobs:after {
265 | top: 4px;
266 | }
267 |
268 | #button-4 .checkbox:checked ~ .layer {
269 | background-color: #fcebeb;
270 | }
271 |
272 | /* Button 5 */
273 | #button-5 {
274 | perspective: 60px;
275 | overflow: visible;
276 | }
277 |
278 | #button-5 .knobs:before,
279 | #button-5 .knobs span {
280 | content: "";
281 | position: absolute;
282 | top: 4px;
283 | left: 4px;
284 | width: 20px;
285 | height: 10px;
286 | color: #fff;
287 | font-size: 10px;
288 | font-weight: bold;
289 | text-align: center;
290 | line-height: 1;
291 | padding: 9px 4px;
292 | border-radius: 50%;
293 | transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
294 | }
295 |
296 | #button-5 .knobs:before {
297 | background-color: #03a9f4;
298 | }
299 |
300 | #button-5 .knobs span:before {
301 | content: "YES";
302 | }
303 |
304 | #button-5 .knobs:before,
305 | #button-5 .layer {
306 | transform: rotateY(0);
307 | transform-origin: center;
308 | }
309 |
310 | #button-5 .checkbox:checked + .knobs:before,
311 | #button-5 .checkbox:checked + .knobs span {
312 | left: 42px;
313 | }
314 |
315 | #button-5 .checkbox:checked + .knobs:before {
316 | transform: rotateY(180deg);
317 | background-color: #f44336;
318 | }
319 |
320 | #button-5 .checkbox:checked + .knobs span:before {
321 | content: "NO";
322 | left: 42px;
323 | }
324 |
325 | #button-5 .checkbox:checked ~ .layer {
326 | background-color: #fcebeb;
327 | transform: rotateY(-180deg);
328 | }
329 |
330 | #button-5 .knobs,
331 | #button-5 .knobs:before,
332 | #button-5 .layer {
333 | transition: 0.3s ease all;
334 | }
335 |
336 | /* Button 6 */
337 | #button-6 {
338 | overflow: visible;
339 | }
340 |
341 | #button-6 .knobs:before {
342 | content: "YES";
343 | position: absolute;
344 | top: 4px;
345 | left: 4px;
346 | width: 20px;
347 | height: 10px;
348 | color: #fff;
349 | font-size: 10px;
350 | font-weight: bold;
351 | text-align: center;
352 | line-height: 1;
353 | padding: 9px 4px;
354 | background-color: #03a9f4;
355 | border-radius: 50%;
356 | }
357 |
358 | #button-6 .layer,
359 | #button-6 .knobs,
360 | #button-6 .knobs:before {
361 | transform: rotateZ(0);
362 | transition: 0.4s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
363 | }
364 |
365 | #button-6 .checkbox:checked + .knobs {
366 | transform: rotateZ(-180deg);
367 | }
368 |
369 | #button-6 .checkbox:checked + .knobs:before {
370 | content: "NO";
371 | background-color: #f44336;
372 | transform: rotateZ(180deg);
373 | }
374 |
375 | #button-6 .checkbox:checked ~ .layer {
376 | background-color: #fcebeb;
377 | transform: rotateZ(180deg);
378 | }
379 |
380 | /* Button 7 */
381 | #button-7 .knobs:before,
382 | #button-7 .knobs:after,
383 | #button-7 .knobs span {
384 | position: absolute;
385 | top: 4px;
386 | width: 20px;
387 | height: 10px;
388 | font-size: 10px;
389 | font-weight: bold;
390 | text-align: center;
391 | line-height: 1;
392 | padding: 9px 4px;
393 | border-radius: 50%;
394 | }
395 |
396 | #button-7 .knobs:before {
397 | content: "YES";
398 | left: 4px;
399 | color: #fff;
400 | opacity: 1;
401 | }
402 |
403 | #button-7 .knobs:after {
404 | content: "N";
405 | left: 42px;
406 | color: #fff;
407 | width: 14px;
408 | text-align: left;
409 | padding: 9px 7px;
410 | background-color: #f44336;
411 | opacity: 0;
412 | }
413 |
414 | #button-7 .knobs:before,
415 | #button-7 .knobs:after {
416 | transition: 0.3s ease all;
417 | z-index: 2;
418 | }
419 |
420 | #button-7 .knobs span {
421 | left: 4px;
422 | background-color: #03a9f4;
423 | transition: 0.2s ease all;
424 | z-index: 1;
425 | }
426 |
427 | #button-7 .checkbox:checked + .knobs:before {
428 | opacity: 0;
429 | }
430 |
431 | #button-7 .checkbox:checked + .knobs:after {
432 | opacity: 1;
433 | }
434 |
435 | #button-7 .checkbox:checked + .knobs span {
436 | top: 14px;
437 | left: 56px;
438 | width: 2px;
439 | height: 2px;
440 | padding: 3px;
441 | background-color: #fff;
442 | z-index: 3;
443 | }
444 |
445 | #button-7 .checkbox:checked ~ .layer {
446 | background-color: #fcebeb;
447 | }
448 |
449 | /* Button 8 */
450 | #button-8 .knobs:before,
451 | #button-8 .knobs:after,
452 | #button-8 .knobs span {
453 | position: absolute;
454 | top: 4px;
455 | width: 20px;
456 | height: 10px;
457 | font-size: 10px;
458 | font-weight: bold;
459 | text-align: center;
460 | line-height: 1;
461 | padding: 9px 4px;
462 | border-radius: 50%;
463 | transition: 0.3s ease all;
464 | }
465 |
466 | #button-8 .knobs:before {
467 | content: "YES";
468 | color: #fff;
469 | left: 4px;
470 | }
471 |
472 | #button-8 .knobs:after {
473 | content: "NO";
474 | left: 42px;
475 | color: #fff;
476 | background-color: #f44336;
477 | opacity: 0;
478 | }
479 |
480 | #button-8 .knobs:before,
481 | #button-8 .knobs:after {
482 | z-index: 2;
483 | }
484 |
485 | #button-8 .knobs span {
486 | left: 4px;
487 | background-color: #03a9f4;
488 | z-index: 1;
489 | }
490 |
491 | #button-8 .checkbox:checked + .knobs:before {
492 | opacity: 0;
493 | }
494 |
495 | #button-8 .checkbox:checked + .knobs:after {
496 | opacity: 1;
497 | }
498 |
499 | #button-8 .checkbox:checked + .knobs span {
500 | background-color: #fcebeb;
501 | transform: scale(4);
502 | }
503 |
504 | /* Button 9 */
505 | #button-9 .knobs:before,
506 | #button-9 .knobs:after,
507 | #button-9 .knobs span {
508 | position: absolute;
509 | top: 4px;
510 | width: 20px;
511 | height: 10px;
512 | font-size: 10px;
513 | font-weight: bold;
514 | text-align: center;
515 | line-height: 1;
516 | padding: 9px 4px;
517 | border-radius: 50%;
518 | transition: 0.4s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
519 | }
520 |
521 | #button-9 .knobs:before {
522 | content: "YES";
523 | left: 4px;
524 | }
525 |
526 | #button-9 .knobs:after {
527 | content: "NO";
528 | right: -24px;
529 | }
530 |
531 | #button-9 .knobs:before,
532 | #button-9 .knobs:after {
533 | color: #fff;
534 | z-index: 2;
535 | }
536 |
537 | #button-9 .knobs span {
538 | left: 4px;
539 | background-color: #03a9f4;
540 | z-index: 1;
541 | }
542 |
543 | #button-9 .checkbox:checked + .knobs:before {
544 | left: -24px;
545 | }
546 |
547 | #button-9 .checkbox:checked + .knobs:after {
548 | right: 4px;
549 | }
550 |
551 | #button-9 .checkbox:checked + .knobs span {
552 | left: 42px;
553 | background-color: #f44336;
554 | }
555 |
556 | #button-9 .checkbox:checked ~ .layer {
557 | background-color: #fcebeb;
558 | }
559 |
560 | /* Button 10 */
561 | #button-10 .knobs:before,
562 | #button-10 .knobs:after,
563 | #button-10 .knobs span {
564 | position: absolute;
565 | top: 4px;
566 | width: 20px;
567 | height: 10px;
568 | font-size: 10px;
569 | font-weight: bold;
570 | text-align: center;
571 | line-height: 1;
572 | padding: 9px 4px;
573 | border-radius: 2px;
574 | transition: 0.3s ease all;
575 | }
576 |
577 | #button-10 .knobs:before {
578 | content: "";
579 | left: 4px;
580 | background-color: #03a9f4;
581 | }
582 |
583 | #button-10 .knobs:after {
584 | content: "NO";
585 | right: 4px;
586 | color: #4e4e4e;
587 | }
588 |
589 | #button-10 .knobs span {
590 | display: inline-block;
591 | left: 4px;
592 | color: #fff;
593 | z-index: 1;
594 | }
595 |
596 | #button-10 .checkbox:checked + .knobs span {
597 | color: #4e4e4e;
598 | }
599 |
600 | #button-10 .checkbox:checked + .knobs:before {
601 | left: 42px;
602 | background-color: #f44336;
603 | }
604 |
605 | #button-10 .checkbox:checked + .knobs:after {
606 | color: #fff;
607 | }
608 |
609 | #button-10 .checkbox:checked ~ .layer {
610 | background-color: #fcebeb;
611 | }
612 |
613 | /* Button 11 */
614 | #button-11 {
615 | overflow: visible;
616 | }
617 |
618 | #button-11 .knobs {
619 | perspective: 70px;
620 | }
621 |
622 | #button-11 .knobs:before,
623 | #button-11 .knobs:after,
624 | #button-11 .knobs span {
625 | position: absolute;
626 | top: 4px;
627 | border-radius: 2px;
628 | }
629 |
630 | #button-11 .knobs:before,
631 | #button-11 .knobs:after {
632 | width: 20px;
633 | height: 10px;
634 | color: #4e4e4e;
635 | font-size: 10px;
636 | font-weight: bold;
637 | text-align: center;
638 | line-height: 1;
639 | padding: 9px 4px;
640 | }
641 |
642 | #button-11 .knobs:before {
643 | content: "YES";
644 | left: 4px;
645 | }
646 |
647 | #button-11 .knobs:after {
648 | content: "NO";
649 | right: 4px;
650 | }
651 |
652 | #button-11 .knobs span {
653 | right: 4px;
654 | width: 33px;
655 | height: 28px;
656 | background-color: #03a9f4;
657 | transform: rotateY(0);
658 | transform-origin: 0% 50%;
659 | transition: 0.6s ease all;
660 | z-index: 1;
661 | }
662 |
663 | #button-11 .checkbox:checked + .knobs span {
664 | transform: rotateY(-180deg);
665 | background-color: #f44336;
666 | }
667 |
668 | #button-11 .checkbox:checked ~ .layer {
669 | background-color: #fcebeb;
670 | }
671 |
672 | /* Button 12 */
673 | #button-12 .knobs:before,
674 | #button-12 .knobs:after,
675 | #button-12 .knobs span,
676 | #button-12 .knobs span:before,
677 | #button-12 .knobs span:after {
678 | position: absolute;
679 | top: 4px;
680 | font-size: 10px;
681 | font-weight: bold;
682 | text-align: center;
683 | line-height: 1;
684 | border-radius: 2px;
685 | transition: 0.3s ease all;
686 | }
687 |
688 | #button-12 .knobs:before {
689 | content: "YES";
690 | left: 4px;
691 | }
692 |
693 | #button-12 .knobs:after {
694 | content: "NO";
695 | right: 4px;
696 | }
697 |
698 | #button-12 .knobs:before,
699 | #button-12 .knobs:after {
700 | width: 27px;
701 | height: 10px;
702 | color: #4e4e4e;
703 | padding: 9px 3px;
704 | z-index: 1;
705 | }
706 |
707 | #button-12 .knobs span {
708 | display: inline-block;
709 | z-index: 2;
710 | }
711 |
712 | #button-12 .knobs span,
713 | #button-12 .knobs span:before,
714 | #button-12 .knobs span:after {
715 | width: 20px;
716 | height: 10px;
717 | padding: 9px 4px;
718 | }
719 |
720 | #button-12 .knobs span:before,
721 | #button-12 .knobs span:after {
722 | content: "";
723 | top: 0;
724 | }
725 |
726 | #button-12 .knobs span:before {
727 | left: -28px;
728 | background-color: #f44336;
729 | }
730 |
731 | #button-12 .knobs span:after {
732 | right: -42px;
733 | background-color: #03a9f4;
734 | }
735 |
736 | #button-12 .checkbox:checked + .knobs span:before {
737 | left: 4px;
738 | }
739 |
740 | #button-12 .checkbox:checked + .knobs span:after {
741 | right: -74px;
742 | }
743 |
744 | #button-12 .checkbox:checked ~ .layer {
745 | background-color: #fcebeb;
746 | }
747 |
748 | /* Button 13 */
749 | #button-13 .knobs:before,
750 | #button-13 .knobs:after,
751 | #button-13 .knobs span {
752 | position: absolute;
753 | top: 4px;
754 | width: 20px;
755 | height: 10px;
756 | font-size: 10px;
757 | font-weight: bold;
758 | text-align: center;
759 | line-height: 1;
760 | padding: 9px 4px;
761 | border-radius: 2px;
762 | transition: 0.3s ease all;
763 | }
764 |
765 | #button-13 .knobs:before,
766 | #button-13 .knobs:after {
767 | color: #4e4e4e;
768 | z-index: 1;
769 | }
770 |
771 | #button-13 .knobs:before {
772 | content: "YES";
773 | left: 4px;
774 | }
775 |
776 | #button-13 .knobs:after {
777 | content: "NO";
778 | right: 4px;
779 | }
780 |
781 | #button-13 .knobs span {
782 | width: 25px;
783 | left: 37px;
784 | background-color: #03a9f4;
785 | z-index: 2;
786 | }
787 |
788 | #button-13 .checkbox:checked + .knobs span {
789 | left: 4px;
790 | background-color: #f44336;
791 | }
792 |
793 | #button-13 .checkbox:checked ~ .layer {
794 | background-color: #fcebeb;
795 | }
796 |
797 | /* Button 14 */
798 | #button-14 .knobs:before,
799 | #button-14 .knobs:after,
800 | #button-14 .knobs span:before,
801 | #button-14 .knobs span:after {
802 | position: absolute;
803 | top: 4px;
804 | width: 20px;
805 | height: 10px;
806 | font-size: 10px;
807 | font-weight: bold;
808 | text-align: center;
809 | line-height: 1;
810 | padding: 9px 4px;
811 | border-radius: 2px;
812 | transition: 0.3s ease all;
813 | }
814 |
815 | #button-14 .knobs:before,
816 | #button-14 .knobs:after {
817 | color: #4e4e4e;
818 | z-index: 1;
819 | }
820 |
821 | #button-14 .knobs:before {
822 | content: "YES";
823 | left: 4px;
824 | }
825 |
826 | #button-14 .knobs:after {
827 | content: "NO";
828 | right: 4px;
829 | }
830 |
831 | #button-14 .knobs span {
832 | top: 0;
833 | left: 0;
834 | display: block;
835 | width: 100%;
836 | height: 100%;
837 | }
838 |
839 | #button-14 .knobs span:before {
840 | left: 4px;
841 | top: -28px;
842 | background-color: #f44336;
843 | }
844 |
845 | #button-14 .knobs span:after {
846 | top: 4px;
847 | left: 39px;
848 | background-color: #03a9f4;
849 | }
850 |
851 | #button-14 .knobs span:before,
852 | #button-14 .knobs span:after {
853 | content: "";
854 | width: 23px;
855 | z-index: 2;
856 | }
857 |
858 | #button-14 .checkbox:checked + .knobs span:before {
859 | top: 4px;
860 | }
861 |
862 | #button-14 .checkbox:checked + .knobs span:after {
863 | top: -28px;
864 | }
865 |
866 | #button-14 .checkbox:checked ~ .layer {
867 | background-color: #fcebeb;
868 | }
869 |
870 | /* Button 15 */
871 | #button-15 .knobs:before,
872 | #button-15 .knobs:after {
873 | position: absolute;
874 | top: 4px;
875 | width: 20px;
876 | height: 10px;
877 | color: #fff;
878 | font-size: 10px;
879 | font-weight: bold;
880 | text-align: center;
881 | line-height: 1;
882 | padding: 9px 4px;
883 | opacity: 1;
884 | border-radius: 2px;
885 | transform: scale(1);
886 | transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
887 | }
888 |
889 | #button-15 .knobs:before {
890 | content: "YES";
891 | left: 4px;
892 | background-color: #03a9f4;
893 | }
894 |
895 | #button-15 .knobs:after {
896 | content: "NO";
897 | right: 4px;
898 | opacity: 0;
899 | transform: scale(4);
900 | background-color: #f44336;
901 | }
902 |
903 | #button-15 .checkbox:checked + .knobs:before {
904 | opacity: 0;
905 | transform: scale(4);
906 | }
907 |
908 | #button-15 .checkbox:checked + .knobs:after {
909 | opacity: 1;
910 | transform: scale(1);
911 | }
912 |
913 | #button-15 .checkbox:checked ~ .layer {
914 | background-color: #fcebeb;
915 | }
916 |
917 | /* Button 16 */
918 | #button-16 .knobs:before {
919 | content: "YES";
920 | position: absolute;
921 | top: 4px;
922 | left: 4px;
923 | width: 20px;
924 | height: 10px;
925 | color: #fff;
926 | font-size: 10px;
927 | font-weight: bold;
928 | text-align: center;
929 | line-height: 1;
930 | padding: 9px 4px;
931 | background-color: #03a9f4;
932 | border-radius: 2px;
933 | transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);
934 | }
935 |
936 | #button-16 .checkbox:active + .knobs:before {
937 | width: 46px;
938 | }
939 |
940 | #button-16 .checkbox:checked:active + .knobs:before {
941 | margin-left: -26px;
942 | }
943 |
944 | #button-16 .checkbox:checked + .knobs:before {
945 | content: "NO";
946 | left: 42px;
947 | background-color: #f44336;
948 | }
949 |
950 | #button-16 .checkbox:checked ~ .layer {
951 | background-color: #fcebeb;
952 | }
953 |
954 | /* Button 17 */
955 | #button-17 .knobs:before,
956 | #button-17 .knobs span {
957 | content: "YES";
958 | position: absolute;
959 | top: 4px;
960 | left: 4px;
961 | width: 20px;
962 | height: 10px;
963 | color: #fff;
964 | font-size: 10px;
965 | font-weight: bold;
966 | text-align: center;
967 | line-height: 1;
968 | padding: 9px 4px;
969 | }
970 |
971 | #button-17 .knobs:before {
972 | transition: 0.3s ease all, left 0.5s cubic-bezier(0.18, 0.89, 0.35, 1.15);
973 | z-index: 2;
974 | }
975 |
976 | #button-17 .knobs span {
977 | background-color: #03a9f4;
978 | border-radius: 2px;
979 | transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);
980 | z-index: 1;
981 | }
982 |
983 | #button-17 .checkbox:checked + .knobs:before {
984 | content: "NO";
985 | left: 42px;
986 | }
987 |
988 | #button-17 .checkbox:checked + .knobs span {
989 | left: 42px;
990 | background-color: #f44336;
991 | }
992 |
993 | #button-17 .checkbox:checked ~ .layer {
994 | background-color: #fcebeb;
995 | }
996 |
997 | /* Button 18 */
998 | #button-18 .knobs:before,
999 | #button-18 .knobs span {
1000 | content: "YES";
1001 | position: absolute;
1002 | top: 4px;
1003 | left: 4px;
1004 | color: #fff;
1005 | font-size: 10px;
1006 | font-weight: bold;
1007 | text-align: center;
1008 | line-height: 1;
1009 | background-color: #03a9f4;
1010 | border-radius: 2px;
1011 | }
1012 |
1013 | #button-18 .knobs:before {
1014 | top: 50%;
1015 | left: 8px;
1016 | width: 20px;
1017 | height: 10px;
1018 | margin-top: -5px;
1019 | background-color: transparent;
1020 | z-index: 2;
1021 | }
1022 |
1023 | #button-18 .knobs span {
1024 | width: 20px;
1025 | height: 10px;
1026 | padding: 9px 4px;
1027 | transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);
1028 | z-index: 1;
1029 | }
1030 |
1031 | #button-18 .checkbox:active + .knobs:before {
1032 | left: 10px;
1033 | width: 46px;
1034 | height: 4px;
1035 | color: transparent;
1036 | margin-top: -2px;
1037 | background-color: #0095d8;
1038 | transition: 0.3s ease all;
1039 | overflow: hidden;
1040 | }
1041 |
1042 | #button-18 .checkbox:active + .knobs span {
1043 | width: 58px;
1044 | }
1045 |
1046 | #button-18 .checkbox:checked:active + .knobs:before {
1047 | left: auto;
1048 | right: 10px;
1049 | background-color: #d80000;
1050 | }
1051 |
1052 | #button-18 .checkbox:checked:active + .knobs span {
1053 | margin-left: -38px;
1054 | }
1055 |
1056 | #button-18 .checkbox:checked + .knobs:before {
1057 | content: "NO";
1058 | left: 47px;
1059 | }
1060 |
1061 | #button-18 .checkbox:checked + .knobs span {
1062 | left: 42px;
1063 | background-color: #f44336;
1064 | }
1065 |
1066 | #button-18 .checkbox:checked ~ .layer {
1067 | background-color: #fcebeb;
1068 | }
1069 |
--------------------------------------------------------------------------------
/Projects/Basic/Custom checkboxes/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
Pure CSS Custom Checkboxes
7 |
8 |
9 |
10 |
Pure CSS Custom Checkboxes
11 |
12 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/Projects/Basic/Custom checkboxes/style.css:
--------------------------------------------------------------------------------
1 | .styled-checkbox {
2 | position: absolute; // take it out of document flow
3 | opacity: 0; // hide it
4 |
5 | & + label {
6 | position: relative;
7 | cursor: pointer;
8 | padding: 0;
9 | }
10 |
11 | // Box.
12 | & + label:before {
13 | content: '';
14 | margin-right: 10px;
15 | display: inline-block;
16 | vertical-align: text-top;
17 | width: 20px;
18 | height: 20px;
19 | background: white;
20 | }
21 |
22 | // Box hover
23 | &:hover + label:before {
24 | background: #f35429;
25 | }
26 |
27 | // Box focus
28 | &:focus + label:before {
29 | box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
30 | }
31 |
32 | // Box checked
33 | &:checked + label:before {
34 | background: #f35429;
35 | }
36 |
37 | // Disabled state label.
38 | &:disabled + label {
39 | color: #b8b8b8;
40 | cursor: auto;
41 | }
42 |
43 | // Disabled box.
44 | &:disabled + label:before {
45 | box-shadow: none;
46 | background: #ddd;
47 | }
48 |
49 | // Checkmark. Could be replaced with an image
50 | &:checked + label:after {
51 | content: '';
52 | position: absolute;
53 | left: 5px;
54 | top: 9px;
55 | background: white;
56 | width: 2px;
57 | height: 2px;
58 | box-shadow:
59 | 2px 0 0 white,
60 | 4px 0 0 white,
61 | 4px -2px 0 white,
62 | 4px -4px 0 white,
63 | 4px -6px 0 white,
64 | 4px -8px 0 white;
65 | transform: rotate(45deg);
66 | }
67 | }
68 |
69 | // Demo-only styles
70 | // --------------
71 |
72 | html {
73 | background: lightgray;
74 | }
75 |
76 | body {
77 | font-family: 'Source Sans Pro', sans-serif;
78 | }
79 |
80 | .unstyled {
81 | margin: 0;
82 | padding: 0;
83 | list-style-type: none;
84 | }
85 |
86 | li {
87 | margin: 20px 0;
88 | }
89 |
90 | .centered {
91 | width: 300px;
92 | margin: auto;
93 | }
94 |
95 | .title {
96 | text-align: center;
97 | color: rgb(69, 113, 236);
98 | }
--------------------------------------------------------------------------------
/Projects/Basic/Hamburger menu/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
Hamburger Menu
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
43 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/Projects/Basic/Hamburger menu/style.css:
--------------------------------------------------------------------------------
1 | /*
2 | * Made by Nemonet TYP
3 | * 14th of September 2024
4 | * MIT License
5 | *
6 | *
7 | * If you are thinking of using this in
8 | * production code, beware of the browser
9 | * prefixes.
10 | */
11 |
12 | body
13 | {
14 | margin: 0;
15 | padding: 0;
16 |
17 | /* make it look decent enough */
18 | background: #232323;
19 | color: #cdcdcd;
20 | font-family: "Avenir Next", "Avenir", sans-serif;
21 | }
22 |
23 | #menuToggle
24 | {
25 | display: block;
26 | position: relative;
27 | top: 50px;
28 | left: 50px;
29 |
30 | z-index: 1;
31 |
32 | -webkit-user-select: none;
33 | user-select: none;
34 | }
35 |
36 | #menuToggle a
37 | {
38 | text-decoration: none;
39 | color: #232323;
40 |
41 | transition: color 0.3s ease;
42 | }
43 |
44 | #menuToggle a:hover
45 | {
46 | color: tomato;
47 | }
48 |
49 |
50 | #menuToggle input
51 | {
52 | display: block;
53 | width: 40px;
54 | height: 32px;
55 | position: absolute;
56 | top: -7px;
57 | left: -5px;
58 |
59 | cursor: pointer;
60 |
61 | opacity: 0; /* hide this */
62 | z-index: 2; /* and place it over the hamburger */
63 |
64 | -webkit-touch-callout: none;
65 | }
66 |
67 | /*
68 | * Just a quick hamburger
69 | */
70 | #menuToggle span
71 | {
72 | display: block;
73 | width: 33px;
74 | height: 4px;
75 | margin-bottom: 5px;
76 | position: relative;
77 |
78 | background: #cdcdcd;
79 | border-radius: 3px;
80 |
81 | z-index: 1;
82 |
83 | transform-origin: 4px 0px;
84 |
85 | transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
86 | background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
87 | opacity 0.55s ease;
88 | }
89 |
90 | #menuToggle span:first-child
91 | {
92 | transform-origin: 0% 0%;
93 | }
94 |
95 | #menuToggle span:nth-last-child(2)
96 | {
97 | transform-origin: 0% 100%;
98 | }
99 |
100 | /*
101 | * Transform all the slices of hamburger
102 | * into a crossmark.
103 | */
104 | #menuToggle input:checked ~ span
105 | {
106 | opacity: 1;
107 | transform: rotate(45deg) translate(-2px, -1px);
108 | background: #232323;
109 | }
110 |
111 | /*
112 | * But let's hide the middle one.
113 | */
114 | #menuToggle input:checked ~ span:nth-last-child(3)
115 | {
116 | opacity: 0;
117 | transform: rotate(0deg) scale(0.2, 0.2);
118 | }
119 |
120 | /*
121 | * Ohyeah and the last one should go the other direction
122 | */
123 | #menuToggle input:checked ~ span:nth-last-child(2)
124 | {
125 | transform: rotate(-45deg) translate(0, -1px);
126 | }
127 |
128 | /*
129 | * Make this absolute positioned
130 | * at the top left of the screen
131 | */
132 | #menu
133 | {
134 | position: absolute;
135 | width: 300px;
136 | margin: -100px 0 0 -50px;
137 | padding: 50px;
138 | padding-top: 125px;
139 |
140 | background: #ededed;
141 | list-style-type: none;
142 | -webkit-font-smoothing: antialiased;
143 | /* to stop flickering of text in safari */
144 |
145 | transform-origin: 0% 0%;
146 | transform: translate(-100%, 0);
147 |
148 | transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
149 | }
150 |
151 | #menu li
152 | {
153 | padding: 10px 0;
154 | font-size: 22px;
155 | }
156 |
157 | /*
158 | * And let's slide it in from the left
159 | */
160 | #menuToggle input:checked ~ ul
161 | {
162 | transform: none;
163 | }
--------------------------------------------------------------------------------
/Projects/Basic/Modal-Popup without JavaScript/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
Modal/Popup without JavaScript
7 |
8 |
9 |
10 |
Popup/Modal Windows without JavaScript
11 |
14 |
15 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/Projects/Basic/Modal-Popup without JavaScript/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: Arial, sans-serif;
3 | background: url(http://www.shukatsu-note.com/wp-content/uploads/2014/12/computer-564136_1280.jpg) no-repeat;
4 | background-size: cover;
5 | height: 100vh;
6 | }
7 |
8 | h1 {
9 | text-align: center;
10 | font-family: Tahoma, Arial, sans-serif;
11 | color: #06D85F;
12 | margin: 80px 0;
13 | }
14 |
15 | .box {
16 | width: 40%;
17 | margin: 0 auto;
18 | background: rgba(255,255,255,0.2);
19 | padding: 35px;
20 | border: 2px solid #fff;
21 | border-radius: 20px/50px;
22 | background-clip: padding-box;
23 | text-align: center;
24 | }
25 |
26 | .button {
27 | font-size: 1em;
28 | padding: 10px;
29 | color: #fff;
30 | border: 2px solid #06D85F;
31 | border-radius: 20px/50px;
32 | text-decoration: none;
33 | cursor: pointer;
34 | transition: all 0.3s ease-out;
35 | }
36 | .button:hover {
37 | background: #06D85F;
38 | }
39 |
40 | .overlay {
41 | position: fixed;
42 | top: 0;
43 | bottom: 0;
44 | left: 0;
45 | right: 0;
46 | background: rgba(0, 0, 0, 0.7);
47 | transition: opacity 500ms;
48 | visibility: hidden;
49 | opacity: 0;
50 | }
51 | .overlay:target {
52 | visibility: visible;
53 | opacity: 1;
54 | }
55 |
56 | .popup {
57 | margin: 70px auto;
58 | padding: 20px;
59 | background: #fff;
60 | border-radius: 5px;
61 | width: 30%;
62 | position: relative;
63 | transition: all 5s ease-in-out;
64 | }
65 |
66 | .popup h2 {
67 | margin-top: 0;
68 | color: #333;
69 | font-family: Tahoma, Arial, sans-serif;
70 | }
71 | .popup .close {
72 | position: absolute;
73 | top: 20px;
74 | right: 30px;
75 | transition: all 200ms;
76 | font-size: 30px;
77 | font-weight: bold;
78 | text-decoration: none;
79 | color: #333;
80 | }
81 | .popup .close:hover {
82 | color: #06D85F;
83 | }
84 | .popup .content {
85 | max-height: 30%;
86 | overflow: auto;
87 | }
88 |
89 | @media screen and (max-width: 700px){
90 | .box{
91 | width: 70%;
92 | }
93 | .popup{
94 | width: 70%;
95 | }
96 | }
--------------------------------------------------------------------------------
/Projects/Basic/Pure CSS select dropdown/Popup without JavaScript/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
Pure CSS select dropdown
7 |
8 |
9 |
10 |
11 |
12 | Pure CSS Select
13 | With wrapper
14 | No JS!
15 |
16 |
17 |
NO wrapper "modern" version here
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/Projects/Basic/Pure CSS select dropdown/Popup without JavaScript/style.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --background: linear-gradient(30deg, #f39c12 30%, #f1c40f);
3 | --background-select: linear-gradient(to left, #34495e 3rem, #2c3e50 3rem);
4 | }
5 | *,
6 | *::before,
7 | *::after {
8 | box-sizing: border-box;
9 | }
10 | body {
11 | display: grid;
12 | place-content: center;
13 | min-height: 100vh;
14 | background: var(--background);
15 | color: white;
16 | }
17 | /* Reset
defaults */
18 | select {
19 | appearance: none;
20 | border: 0;
21 | outline: 0;
22 | background: none;
23 | color: inherit;
24 | box-shadow: none;
25 | }
26 | select::-ms-expand {
27 | display: none;
28 | }
29 | /* Custom Select wrapper */
30 | .select {
31 | position: relative;
32 | display: flex;
33 | width: min(20rem, 90vw);
34 | background: var(--background-select);
35 | border-radius: 0.25rem;
36 | overflow: hidden;
37 | // Select style
38 | select {
39 | flex: 1;
40 | padding: 1em;
41 | cursor: pointer;
42 | }
43 | // Arrow style
44 | &::after {
45 | content: "\25BC";
46 | position: absolute;
47 | right: 1rem;
48 | top: 1rem;
49 | transition: 0.25s all ease;
50 | pointer-events: none; // IMPORTANT to click on arrow
51 | }
52 | // Arrow hover
53 | &:hover::after {
54 | color: #f39c12;
55 | animation: bounce 0.5s infinite;
56 | }
57 | }
58 | @keyframes bounce {
59 | 25% {
60 | transform: translatey(5px);
61 | }
62 | 75% {
63 | transform: translatey(-5px);
64 | }
65 | }
66 |
--------------------------------------------------------------------------------
/Projects/Basic/Pure CSS sidebar toggle menu/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Hamburger Menu
7 |
31 |
32 |
PURE CSS SIDEBAR TOGGLE MENU
33 |
34 |
35 |
PURE CSS SIDEBAR TOGGLE MENU
36 |
37 |
38 |
PURE CSS SIDEBAR TOGGLE MENU
39 |
40 |
🙏 kindly follow and give a star 🙏
2 |
3 |
4 |
5 | # HTML And CSS Projects For Beginners (With Source Code)
6 |
7 | If you want to feel confident in your front-end web developer skills, the easiest solution is to start building your own HTML and CSS projects from scratch.
8 |
9 | ## Why build HTML and CSS projects?
10 |
11 | Practicing on realistic, hands-on projects is the best way to learn how to create something useful and meaningful with HTML and CSS.
12 |
13 | The more projects you finish, the more confidence you build.
14 |
15 | ## HTML and CSS projects: Table of contents
16 |
17 | [Beginner project: CSS radio buttons](#beginner-project-css-radio-buttons)
18 |
19 | [Beginner project: CSS toggle buttons](#beginner-project-css-toggle-buttons)
20 |
21 | [Beginner project: Hamburger menu](#beginner-project-hamburger-menu)
22 |
23 | [Beginner project: Pure CSS sidebar toggle menu](#beginner-project-pure-css-sidebar-toggle-menu)
24 |
25 | [Beginner project: Animated CSS menu](#beginner-project-animated-css-menu)
26 |
27 | [Beginner project: Custom checkboxes](#beginner-project-custom-checkboxes)
28 |
29 | [Beginner project: Pure CSS select dropdown](#beginner-project-pure-css-select-dropdown)
30 |
31 | [Beginner project: Modal/Popup without JavaScript](#beginner-project-modalpopup-without-javascript)
32 |
33 | [Beginner project: Animated gradient ghost button](#beginner-project-animated-gradient-ghost-button)
34 |
35 | [Beginner project: CSS image slider](#beginner-project-css-image-slider)
36 |
37 |
38 | ---
39 |
40 | ### Beginner project: CSS radio buttons
41 |
42 | This quick project is a great example of what you can do with pure CSS to style radio buttons or checkboxes:
43 |
44 | Source Code
104 |
105 | ---
106 |
107 | ### Beginner project: Custom checkboxes
108 |
109 | Styling your checkboxes to match the overall design is an easy way to elevate the look and feel of your website.
110 |
111 | Here’s an easy HTML and CSS practice project to achieve that:
112 |
113 | Source Code
119 |
120 | ---
121 |
122 | ### Beginner project: Pure CSS select dropdown
123 |
124 | Standard select dropdowns often look dull and boring. Here’s a quick CSS project to learn how to create beautiful select dropdowns easily:
125 |
126 | 🙏 kindly follow and give a star 🙏
175 |
176 |
177 |
178 |
179 |
--------------------------------------------------------------------------------
18 | 
25 | 
29 | 
32 | 
33 |
34 |
35 | [☝️ back to top ☝️](#html-and-css-projects-table-of-contents)
36 |
37 |
38 | ---
39 |
40 | ### project: Responsive Contact Us Form
41 |
42 | Hello friends, today we are going to create Responsive Contact Us Form or Page in HTML and CSS. There are many forms of design I have created before as well as responsive contact us form. Today we will build something better than the previous.
43 |
44 | 
45 |
46 |
47 | [☝️ back to top ☝️](#html-and-css-projects-table-of-contents)
48 |
49 |
50 |
51 | ---
52 |
53 | ### project: Simple Landing Page
54 |
55 | Every website needs a menu, right?
56 |
57 | This hamburger menu is beautiful and clean, and you can build it with just HTML and CSS:
58 |
59 | 
60 |
61 |
62 | [☝️ back to top ☝️](#html-and-css-projects-table-of-contents)
63 |
64 |
65 |
66 | ---
67 |
68 |
69 |
70 | 
15 | 
26 | 
37 | 
48 | 
59 | 
70 |