이해님 / term-project

Go to a project
Toggle navigation Toggle navigation pinning
haenim
3a203ea5 1 parent 73158d4d

add main page

Inline Side-by-side
Showing 8 changed files with 1034 additions and 10 deletions
1 -body{
2 - background-color: black;
3 - color: white;
4 -}
...\ No newline at end of file ...\ No newline at end of file
1 +html {
2 + line-height: 1.15;
3 + /* 1 */
4 + -ms-text-size-adjust: 100%;
5 + /* 2 */
6 + -webkit-text-size-adjust: 100%;
7 + /* 2 */
8 + }
9 +
10 + /* Sections
11 + ========================================================================== */
12 + /**
13 + * Remove the margin in all browsers (opinionated).
14 + */
15 + body {
16 + margin: 0;
17 + }
18 +
19 + /**
20 + * Add the correct display in IE 9-.
21 + */
22 + article,
23 + aside,
24 + footer,
25 + header,
26 + nav,
27 + section {
28 + display: block;
29 + }
30 +
31 + /**
32 + * Correct the font size and margin on `h1` elements within `section` and
33 + * `article` contexts in Chrome, Firefox, and Safari.
34 + */
35 + h1 {
36 + font-size: 2em;
37 + margin: 0.67em 0;
38 + }
39 +
40 + /* Grouping content
41 + ========================================================================== */
42 + /**
43 + * Add the correct display in IE 9-.
44 + * 1. Add the correct display in IE.
45 + */
46 + figcaption,
47 + figure,
48 + main {
49 + /* 1 */
50 + display: block;
51 + }
52 +
53 + /**
54 + * Add the correct margin in IE 8.
55 + */
56 + figure {
57 + margin: 1em 40px;
58 + }
59 +
60 + /**
61 + * 1. Add the correct box sizing in Firefox.
62 + * 2. Show the overflow in Edge and IE.
63 + */
64 + hr {
65 + box-sizing: content-box;
66 + /* 1 */
67 + height: 0;
68 + /* 1 */
69 + overflow: visible;
70 + /* 2 */
71 + }
72 +
73 + /**
74 + * 1. Correct the inheritance and scaling of font size in all browsers.
75 + * 2. Correct the odd `em` font sizing in all browsers.
76 + */
77 + pre {
78 + font-family: monospace, monospace;
79 + /* 1 */
80 + font-size: 1em;
81 + /* 2 */
82 + }
83 +
84 + /* Text-level semantics
85 + ========================================================================== */
86 + /**
87 + * 1. Remove the gray background on active links in IE 10.
88 + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
89 + */
90 + a {
91 + background-color: transparent;
92 + /* 1 */
93 + -webkit-text-decoration-skip: objects;
94 + /* 2 */
95 + }
96 +
97 + /**
98 + * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
99 + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
100 + */
101 + abbr[title] {
102 + border-bottom: none;
103 + /* 1 */
104 + text-decoration: underline;
105 + /* 2 */
106 + text-decoration: underline dotted;
107 + /* 2 */
108 + }
109 +
110 + /**
111 + * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
112 + */
113 + b,
114 + strong {
115 + font-weight: inherit;
116 + }
117 +
118 + /**
119 + * Add the correct font weight in Chrome, Edge, and Safari.
120 + */
121 + b,
122 + strong {
123 + font-weight: bolder;
124 + }
125 +
126 + /**
127 + * 1. Correct the inheritance and scaling of font size in all browsers.
128 + * 2. Correct the odd `em` font sizing in all browsers.
129 + */
130 + code,
131 + kbd,
132 + samp {
133 + font-family: monospace, monospace;
134 + /* 1 */
135 + font-size: 1em;
136 + /* 2 */
137 + }
138 +
139 + /**
140 + * Add the correct font style in Android 4.3-.
141 + */
142 + dfn {
143 + font-style: italic;
144 + }
145 +
146 + /**
147 + * Add the correct background and color in IE 9-.
148 + */
149 + mark {
150 + background-color: #ff0;
151 + color: #000;
152 + }
153 +
154 + /**
155 + * Add the correct font size in all browsers.
156 + */
157 + small {
158 + font-size: 80%;
159 + }
160 +
161 + /**
162 + * Prevent `sub` and `sup` elements from affecting the line height in
163 + * all browsers.
164 + */
165 + sub,
166 + sup {
167 + font-size: 75%;
168 + line-height: 0;
169 + position: relative;
170 + vertical-align: baseline;
171 + }
172 +
173 + sub {
174 + bottom: -0.25em;
175 + }
176 +
177 + sup {
178 + top: -0.5em;
179 + }
180 +
181 + /* Embedded content
182 + ========================================================================== */
183 + /**
184 + * Add the correct display in IE 9-.
185 + */
186 + audio,
187 + video {
188 + display: inline-block;
189 + }
190 +
191 + /**
192 + * Add the correct display in iOS 4-7.
193 + */
194 + audio:not([controls]) {
195 + display: none;
196 + height: 0;
197 + }
198 +
199 + /**
200 + * Remove the border on images inside links in IE 10-.
201 + */
202 + img {
203 + border-style: none;
204 + }
205 +
206 + /**
207 + * Hide the overflow in IE.
208 + */
209 + svg:not(:root) {
210 + overflow: hidden;
211 + }
212 +
213 + /* Forms
214 + ========================================================================== */
215 + /**
216 + * 1. Change the font styles in all browsers (opinionated).
217 + * 2. Remove the margin in Firefox and Safari.
218 + */
219 + button,
220 + input,
221 + optgroup,
222 + select,
223 + textarea {
224 + font-family: sans-serif;
225 + /* 1 */
226 + font-size: 100%;
227 + /* 1 */
228 + line-height: 1.15;
229 + /* 1 */
230 + margin: 0;
231 + /* 2 */
232 + }
233 +
234 + /**
235 + * Show the overflow in IE.
236 + * 1. Show the overflow in Edge.
237 + */
238 + button,
239 + input {
240 + /* 1 */
241 + overflow: visible;
242 + }
243 +
244 + /**
245 + * Remove the inheritance of text transform in Edge, Firefox, and IE.
246 + * 1. Remove the inheritance of text transform in Firefox.
247 + */
248 + button,
249 + select {
250 + /* 1 */
251 + text-transform: none;
252 + }
253 +
254 + /**
255 + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
256 + * controls in Android 4.
257 + * 2. Correct the inability to style clickable types in iOS and Safari.
258 + */
259 + button,
260 + html [type="button"],
261 + [type="reset"],
262 + [type="submit"] {
263 + -webkit-appearance: button;
264 + /* 2 */
265 + }
266 +
267 + /**
268 + * Remove the inner border and padding in Firefox.
269 + */
270 + button::-moz-focus-inner,
271 + [type="button"]::-moz-focus-inner,
272 + [type="reset"]::-moz-focus-inner,
273 + [type="submit"]::-moz-focus-inner {
274 + border-style: none;
275 + padding: 0;
276 + }
277 +
278 + /**
279 + * Restore the focus styles unset by the previous rule.
280 + */
281 + button:-moz-focusring,
282 + [type="button"]:-moz-focusring,
283 + [type="reset"]:-moz-focusring,
284 + [type="submit"]:-moz-focusring {
285 + outline: 1px dotted ButtonText;
286 + }
287 +
288 + /**
289 + * Correct the padding in Firefox.
290 + */
291 + fieldset {
292 + padding: 0.35em 0.75em 0.625em;
293 + }
294 +
295 + /**
296 + * 1. Correct the text wrapping in Edge and IE.
297 + * 2. Correct the color inheritance from `fieldset` elements in IE.
298 + * 3. Remove the padding so developers are not caught out when they zero out
299 + * `fieldset` elements in all browsers.
300 + */
301 + legend {
302 + box-sizing: border-box;
303 + /* 1 */
304 + color: inherit;
305 + /* 2 */
306 + display: table;
307 + /* 1 */
308 + max-width: 100%;
309 + /* 1 */
310 + padding: 0;
311 + /* 3 */
312 + white-space: normal;
313 + /* 1 */
314 + }
315 +
316 + /**
317 + * 1. Add the correct display in IE 9-.
318 + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
319 + */
320 + progress {
321 + display: inline-block;
322 + /* 1 */
323 + vertical-align: baseline;
324 + /* 2 */
325 + }
326 +
327 + /**
328 + * Remove the default vertical scrollbar in IE.
329 + */
330 + textarea {
331 + overflow: auto;
332 + }
333 +
334 + /**
335 + * 1. Add the correct box sizing in IE 10-.
336 + * 2. Remove the padding in IE 10-.
337 + */
338 + [type="checkbox"],
339 + [type="radio"] {
340 + box-sizing: border-box;
341 + /* 1 */
342 + padding: 0;
343 + /* 2 */
344 + }
345 +
346 + /**
347 + * Correct the cursor style of increment and decrement buttons in Chrome.
348 + */
349 + [type="number"]::-webkit-inner-spin-button,
350 + [type="number"]::-webkit-outer-spin-button {
351 + height: auto;
352 + }
353 +
354 + /**
355 + * 1. Correct the odd appearance in Chrome and Safari.
356 + * 2. Correct the outline style in Safari.
357 + */
358 + [type="search"] {
359 + -webkit-appearance: textfield;
360 + /* 1 */
361 + outline-offset: -2px;
362 + /* 2 */
363 + }
364 +
365 + /**
366 + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
367 + */
368 + [type="search"]::-webkit-search-cancel-button,
369 + [type="search"]::-webkit-search-decoration {
370 + -webkit-appearance: none;
371 + }
372 +
373 + /**
374 + * 1. Correct the inability to style clickable types in iOS and Safari.
375 + * 2. Change font properties to `inherit` in Safari.
376 + */
377 + ::-webkit-file-upload-button {
378 + -webkit-appearance: button;
379 + /* 1 */
380 + font: inherit;
381 + /* 2 */
382 + }
383 +
384 + /* Interactive
385 + ========================================================================== */
386 + /*
387 + * Add the correct display in IE 9-.
388 + * 1. Add the correct display in Edge, IE, and Firefox.
389 + */
390 + details,
391 + menu {
392 + display: block;
393 + }
394 +
395 + /*
396 + * Add the correct display in all browsers.
397 + */
398 + summary {
399 + display: list-item;
400 + }
401 +
402 + /* Scripting
403 + ========================================================================== */
404 + /**
405 + * Add the correct display in IE 9-.
406 + */
407 + canvas {
408 + display: inline-block;
409 + }
410 +
411 + /**
412 + * Add the correct display in IE.
413 + */
414 + template {
415 + display: none;
416 + }
417 +
418 + /* Hidden
419 + ========================================================================== */
420 + /**
421 + * Add the correct display in IE 10-.
422 + */
423 + [hidden] {
424 + display: none;
425 + }
426 +
427 + html {
428 + height: 100%;
429 + }
430 +
431 + fieldset {
432 + margin: 0;
433 + padding: 0;
434 + -webkit-margin-start: 0;
435 + -webkit-margin-end: 0;
436 + -webkit-padding-before: 0;
437 + -webkit-padding-start: 0;
438 + -webkit-padding-end: 0;
439 + -webkit-padding-after: 0;
440 + border: 0;
441 + }
442 +
443 + legend {
444 + margin: 0;
445 + padding: 0;
446 + display: block;
447 + -webkit-padding-start: 0;
448 + -webkit-padding-end: 0;
449 + }
450 +
451 + /*===============================
452 + = Choices =
453 + ===============================*/
454 + .choices {
455 + position: relative;
456 + margin-bottom: 24px;
457 + font-size: 16px;
458 + }
459 +
460 + .choices:focus {
461 + outline: none;
462 + }
463 +
464 + .choices:last-child {
465 + margin-bottom: 0;
466 + }
467 +
468 + .choices.is-disabled .choices__inner, .choices.is-disabled .choices__input {
469 + background-color: #EAEAEA;
470 + cursor: not-allowed;
471 + -webkit-user-select: none;
472 + -moz-user-select: none;
473 + -ms-user-select: none;
474 + user-select: none;
475 + }
476 +
477 + .choices.is-disabled .choices__item {
478 + cursor: not-allowed;
479 + }
480 +
481 + .choices[data-type*="select-one"] {
482 + cursor: pointer;
483 + }
484 +
485 + .choices[data-type*="select-one"] .choices__inner {
486 + padding-bottom: 7.5px;
487 + }
488 +
489 + .choices[data-type*="select-one"] .choices__input {
490 + display: block;
491 + width: 100%;
492 + padding: 10px;
493 + border-bottom: 1px solid #DDDDDD;
494 + background-color: #FFFFFF;
495 + margin: 0;
496 + }
497 +
498 + .choices[data-type*="select-one"] .choices__button {
499 + background-image: url("../../icons/cross-inverse.svg");
500 + padding: 0;
501 + background-size: 8px;
502 + height: 100%;
503 + position: absolute;
504 + top: 50%;
505 + right: 0;
506 + margin-top: -10px;
507 + margin-right: 25px;
508 + height: 20px;
509 + width: 20px;
510 + border-radius: 10em;
511 + opacity: .5;
512 + }
513 +
514 + .choices[data-type*="select-one"] .choices__button:hover, .choices[data-type*="select-one"] .choices__button:focus {
515 + opacity: 1;
516 + }
517 +
518 + .choices[data-type*="select-one"] .choices__button:focus {
519 + box-shadow: 0px 0px 0px 2px #00BCD4;
520 + }
521 +
522 + .choices[data-type*="select-one"]:after {
523 + content: "";
524 + height: 0;
525 + width: 0;
526 + border-style: solid;
527 + border-color: #333333 transparent transparent transparent;
528 + border-width: 5px;
529 + position: absolute;
530 + right: 11.5px;
531 + top: 50%;
532 + margin-top: -2.5px;
533 + pointer-events: none;
534 + }
535 +
536 + .choices[data-type*="select-one"].is-open:after {
537 + border-color: transparent transparent #333333 transparent;
538 + margin-top: -7.5px;
539 + }
540 +
541 + .choices[data-type*="select-one"][dir="rtl"]:after {
542 + left: 11.5px;
543 + right: auto;
544 + }
545 +
546 + .choices[data-type*="select-one"][dir="rtl"] .choices__button {
547 + right: auto;
548 + left: 0;
549 + margin-left: 25px;
550 + margin-right: 0;
551 + }
552 +
553 + .choices[data-type*="select-multiple"] .choices__inner, .choices[data-type*="text"] .choices__inner {
554 + cursor: text;
555 + }
556 +
557 + .choices[data-type*="select-multiple"] .choices__button, .choices[data-type*="text"] .choices__button {
558 + position: relative;
559 + display: inline-block;
560 + margin-top: 0;
561 + margin-right: -4px;
562 + margin-bottom: 0;
563 + margin-left: 8px;
564 + padding-left: 16px;
565 + border-left: 1px solid #008fa1;
566 + background-image: url("../../icons/cross.svg");
567 + background-size: 8px;
568 + width: 8px;
569 + line-height: 1;
570 + opacity: .75;
571 + }
572 +
573 + .choices[data-type*="select-multiple"] .choices__button:hover, .choices[data-type*="select-multiple"] .choices__button:focus, .choices[data-type*="text"] .choices__button:hover, .choices[data-type*="text"] .choices__button:focus {
574 + opacity: 1;
575 + }
576 +
577 + .choices__inner {
578 + display: inline-block;
579 + vertical-align: top;
580 + width: 100%;
581 + background-color: #f9f9f9;
582 + padding: 7.5px 7.5px 3.75px;
583 + border: 1px solid #DDDDDD;
584 + border-radius: 2.5px;
585 + font-size: 14px;
586 + min-height: 44px;
587 + overflow: hidden;
588 + }
589 +
590 + .is-focused .choices__inner, .is-open .choices__inner {
591 + border-color: #b7b7b7;
592 + }
593 +
594 + .is-open .choices__inner {
595 + border-radius: 2.5px 2.5px 0 0;
596 + }
597 +
598 + .is-flipped.is-open .choices__inner {
599 + border-radius: 0 0 2.5px 2.5px;
600 + }
601 +
602 + .choices__list {
603 + margin: 0;
604 + padding-left: 0;
605 + list-style: none;
606 + }
607 +
608 + .choices__list--single {
609 + display: inline-block;
610 + padding: 4px 16px 4px 4px;
611 + width: 100%;
612 + }
613 +
614 + [dir="rtl"] .choices__list--single {
615 + padding-right: 4px;
616 + padding-left: 16px;
617 + }
618 +
619 + .choices__list--single .choices__item {
620 + width: 100%;
621 + }
622 +
623 + .choices__list--multiple {
624 + display: inline;
625 + }
626 +
627 + .choices__list--multiple .choices__item {
628 + display: inline-block;
629 + vertical-align: middle;
630 + border-radius: 20px;
631 + padding: 4px 10px;
632 + font-size: 12px;
633 + font-weight: 500;
634 + margin-right: 3.75px;
635 + margin-bottom: 3.75px;
636 + background-color: #00BCD4;
637 + border: 1px solid #00a5bb;
638 + color: #FFFFFF;
639 + word-break: break-all;
640 + }
641 +
642 + .choices__list--multiple .choices__item[data-deletable] {
643 + padding-right: 5px;
644 + }
645 +
646 + [dir="rtl"] .choices__list--multiple .choices__item {
647 + margin-right: 0;
648 + margin-left: 3.75px;
649 + }
650 +
651 + .choices__list--multiple .choices__item.is-highlighted {
652 + background-color: #00a5bb;
653 + border: 1px solid #008fa1;
654 + }
655 +
656 + .is-disabled .choices__list--multiple .choices__item {
657 + background-color: #aaaaaa;
658 + border: 1px solid #919191;
659 + }
660 +
661 + .choices__list--dropdown {
662 + display: none;
663 + z-index: 1;
664 + position: absolute;
665 + width: 100%;
666 + background-color: #FFFFFF;
667 + border: 1px solid #DDDDDD;
668 + top: 100%;
669 + margin-top: -1px;
670 + border-bottom-left-radius: 2.5px;
671 + border-bottom-right-radius: 2.5px;
672 + overflow: hidden;
673 + word-break: break-all;
674 + }
675 +
676 + .choices__list--dropdown.is-active {
677 + display: block;
678 + }
679 +
680 + .is-open .choices__list--dropdown {
681 + border-color: #b7b7b7;
682 + }
683 +
684 + .is-flipped .choices__list--dropdown {
685 + top: auto;
686 + bottom: 100%;
687 + margin-top: 0;
688 + margin-bottom: -1px;
689 + border-radius: .25rem .25rem 0 0;
690 + }
691 +
692 + .choices__list--dropdown .choices__list {
693 + position: relative;
694 + max-height: 300px;
695 + overflow: auto;
696 + -webkit-overflow-scrolling: touch;
697 + will-change: scroll-position;
698 + }
699 +
700 + .choices__list--dropdown .choices__item {
701 + position: relative;
702 + padding: 10px;
703 + font-size: 14px;
704 + }
705 +
706 + [dir="rtl"] .choices__list--dropdown .choices__item {
707 + text-align: right;
708 + }
709 +
710 + @media (min-width: 640px) {
711 + .choices__list--dropdown .choices__item--selectable {
712 + padding-right: 100px;
713 + }
714 + .choices__list--dropdown .choices__item--selectable:after {
715 + content: attr(data-select-text);
716 + font-size: 12px;
717 + opacity: 0;
718 + position: absolute;
719 + right: 10px;
720 + top: 50%;
721 + transform: translateY(-50%);
722 + }
723 + [dir="rtl"] .choices__list--dropdown .choices__item--selectable {
724 + text-align: right;
725 + padding-left: 100px;
726 + padding-right: 10px;
727 + }
728 + [dir="rtl"] .choices__list--dropdown .choices__item--selectable:after {
729 + right: auto;
730 + left: 10px;
731 + }
732 + }
733 +
734 + .choices__list--dropdown .choices__item--selectable.is-highlighted {
735 + background-color: #f2f2f2;
736 + }
737 +
738 + .choices__list--dropdown .choices__item--selectable.is-highlighted:after {
739 + opacity: .5;
740 + }
741 +
742 + .choices__item {
743 + cursor: default;
744 + }
745 +
746 + .choices__item--selectable {
747 + cursor: pointer;
748 + }
749 +
750 + .choices__item--disabled {
751 + cursor: not-allowed;
752 + -webkit-user-select: none;
753 + -moz-user-select: none;
754 + -ms-user-select: none;
755 + user-select: none;
756 + opacity: .5;
757 + }
758 +
759 + .choices__heading {
760 + font-weight: 600;
761 + font-size: 12px;
762 + padding: 10px;
763 + border-bottom: 1px solid #f7f7f7;
764 + color: gray;
765 + }
766 +
767 + .choices__button {
768 + text-indent: -9999px;
769 + -webkit-appearance: none;
770 + -moz-appearance: none;
771 + appearance: none;
772 + border: 0;
773 + background-color: transparent;
774 + background-repeat: no-repeat;
775 + background-position: center;
776 + cursor: pointer;
777 + }
778 +
779 + .choices__button:focus {
780 + outline: none;
781 + }
782 +
783 + .choices__input {
784 + display: inline-block;
785 + vertical-align: baseline;
786 + background-color: #f9f9f9;
787 + font-size: 14px;
788 + margin-bottom: 5px;
789 + border: 0;
790 + border-radius: 0;
791 + max-width: 100%;
792 + padding: 4px 0 4px 2px;
793 + }
794 +
795 + .choices__input:focus {
796 + outline: 0;
797 + }
798 +
799 + [dir="rtl"] .choices__input {
800 + padding-right: 2px;
801 + padding-left: 0;
802 + }
803 +
804 + .choices__placeholder {
805 + opacity: .5;
806 + }
807 +
808 + /*===== End of Choices ======*/
809 + input,
810 + button {
811 + font-family: 'Poppins', sans-serif;
812 + }
813 +
814 + * {
815 + box-sizing: border-box;
816 + }
817 +
818 + .s130 {
819 + min-height: 100vh;
820 + display: -ms-flexbox;
821 + display: flex;
822 + -ms-flex-pack: center;
823 + justify-content: center;
824 + font-family: 'Poppins', sans-serif;
825 + background: url("../images/twitter1.jpeg");
826 + background-position: bottom right;
827 + background-repeat: no-repeat;
828 + background-size: contain;
829 + padding: 15px;
830 + }
831 +
832 + .s130 form {
833 + width: 100%;
834 + max-width: 790px;
835 + padding-top: 24vh;
836 + }
837 +
838 + .s130 form .inner-form {
839 + display: -ms-flexbox;
840 + display: flex;
841 + width: 100%;
842 + -ms-flex-pack: justify;
843 + justify-content: space-between;
844 + -ms-flex-align: center;
845 + align-items: center;
846 + box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
847 + border-radius: 34px;
848 + overflow: hidden;
849 + margin-bottom: 30px;
850 + }
851 +
852 + .s130 form .inner-form .input-field {
853 + height: 68px;
854 + }
855 +
856 + .s130 form .inner-form .input-field input {
857 + height: 100%;
858 + background: transparent;
859 + border: 0;
860 + display: block;
861 + width: 100%;
862 + padding: 10px 0;
863 + font-size: 16px;
864 + color: #000;
865 + }
866 +
867 + .s130 form .inner-form .input-field input.placeholder {
868 + color: #222;
869 + font-size: 16px;
870 + }
871 +
872 + .s130 form .inner-form .input-field input:-moz-placeholder {
873 + color: #222;
874 + font-size: 16px;
875 + }
876 +
877 + .s130 form .inner-form .input-field input::-webkit-input-placeholder {
878 + color: #222;
879 + font-size: 16px;
880 + }
881 +
882 + .s130 form .inner-form .input-field input:hover, .s130 form .inner-form .input-field input:focus {
883 + box-shadow: none;
884 + outline: 0;
885 + }
886 +
887 + .s130 form .inner-form .input-field.first-wrap {
888 + -ms-flex-positive: 1;
889 + flex-grow: 1;
890 + display: -ms-flexbox;
891 + display: flex;
892 + -ms-flex-align: center;
893 + align-items: center;
894 + background: #ecf5fd;
895 + }
896 +
897 + .s130 form .inner-form .input-field.first-wrap input {
898 + -ms-flex-positive: 1;
899 + flex-grow: 1;
900 + }
901 +
902 + .s130 form .inner-form .input-field.first-wrap .svg-wrapper {
903 + min-width: 80px;
904 + display: -ms-flexbox;
905 + display: flex;
906 + -ms-flex-pack: center;
907 + justify-content: center;
908 + -ms-flex-align: center;
909 + align-items: center;
910 + }
911 +
912 + .s130 form .inner-form .input-field.first-wrap svg {
913 + width: 36px;
914 + height: 36px;
915 + fill: #222;
916 + }
917 +
918 + .s130 form .inner-form .input-field.second-wrap {
919 + min-width: 216px;
920 + }
921 +
922 + .s130 form .inner-form .input-field.second-wrap .btn-search {
923 + height: 100%;
924 + width: 100%;
925 + white-space: nowrap;
926 + font-size: 16px;
927 + color: #fff;
928 + border: 0;
929 + cursor: pointer;
930 + position: relative;
931 + z-index: 0;
932 + background: #87c9ff;
933 + transition: all .2s ease-out, color .2s ease-out;
934 + font-weight: 300;
935 + }
936 +
937 + .s130 form .inner-form .input-field.second-wrap .btn-search:hover {
938 + background: #4782cf;
939 + }
940 +
941 + .s130 form .inner-form .input-field.second-wrap .btn-search:focus {
942 + outline: 0;
943 + box-shadow: none;
944 + }
945 +
946 + .s130 form .info {
947 + font-size: 15px;
948 + color: #ccc;
949 + padding-left: 26px;
950 + }
951 +
952 + @media screen and (max-width: 992px) {
953 + .s130 form .inner-form .input-field {
954 + height: 50px;
955 + }
956 + }
957 +
958 + @media screen and (max-width: 767px) {
959 + .s130 form .inner-form .input-field.first-wrap .svg-wrapper {
960 + min-width: 40px;
961 + display: -ms-flexbox;
962 + display: flex;
963 + -ms-flex-pack: center;
964 + justify-content: center;
965 + -ms-flex-align: center;
966 + align-items: center;
967 + padding: 0 10px;
968 + }
969 + .s130 form .inner-form .input-field.first-wrap svg {
970 + width: 26px;
971 + height: 26px;
972 + fill: #222;
973 + }
974 + .s130 form .inner-form .input-field.second-wrap {
975 + min-width: 100px;
976 + }
977 + .s130 form .inner-form .input-field.second-wrap .btn-search {
978 + font-size: 13px;
979 + }
980 + }
981 +
982 + /*# sourceMappingURL=Searchs_130.css.map */
983 +
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -3,4 +3,9 @@ module.exports = function(app) ...@@ -3,4 +3,9 @@ module.exports = function(app)
3 app.get('/',function(req,res){ //index.html 가져오기 3 app.get('/',function(req,res){ //index.html 가져오기
4 res.render('index.html') 4 res.render('index.html')
5 }); 5 });
6 +
7 + app.get('/timeline/:id',function(req,res){
8 + res.render('timeline.html')
9 + });
10 +
6 } 11 }
......
...@@ -6,8 +6,8 @@ app.set('views', __dirname + '/views'); //서버가 읽을 수 있도록 HTML ...@@ -6,8 +6,8 @@ app.set('views', __dirname + '/views'); //서버가 읽을 수 있도록 HTML
6 app.set('view engine', 'ejs'); //서버가 HTML 렌더링을 할 때, EJS 엔진을 사용하도록 설정합니다. 6 app.set('view engine', 'ejs'); //서버가 HTML 렌더링을 할 때, EJS 엔진을 사용하도록 설정합니다.
7 app.engine('html', require('ejs').renderFile); 7 app.engine('html', require('ejs').renderFile);
8 8
9 -var server = app.listen(3000, function(){ 9 +var server = app.listen(3000, function(){ //3000 포트 사용
10 console.log("Express server has started on port 3000") 10 console.log("Express server has started on port 3000")
11 }) 11 })
12 12
13 -app.use(express.static('public')); //css같은 거 사용 13 +app.use(express.static('public'));
......
1 <html> 1 <html>
2 <head> 2 <head>
3 - <title>Main</title> 3 + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
4 - <link rel="stylesheet" type="text/css" href="css/style.css"> 4 + <meta name="viewport" content="width=device-width, initial-scale=1" />
5 + <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 + <meta name="author" content="colorlib.com">
7 + <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet" />
8 + <link href="css/style.css" rel="stylesheet" />
5 </head> 9 </head>
6 <body> 10 <body>
7 - Hey, this is index page 11 + <div class="s130">
8 - </body> 12 + <form>
13 + <div class="inner-form">
14 + <div class="input-field first-wrap">
15 + <div class="svg-wrapper">
16 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
17 + <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
18 + </svg>
19 + </div>
20 + <input id="search" type="text" placeholder="아이디를 입력하세요" />
21 + </div>
22 + <div class="input-field second-wrap">
23 + <button class="btn-search" type="button" onclick="movePage()">SEARCH</button>
24 + </div>
25 + <script type ="text/javascript">
26 + function movePage(){ //페이지 이동을 위한 함수
27 + location.href ="/timeline/"+document.getElementById('search').value
28 + }
29 + </script>
30 + </div>
31 + <span class="info">ex)@TwitterKorea </span>
32 + </form>
33 + </div>
34 + <script src="js/extention/choices.js"></script>
35 + </body><!-- This templates was made by Colorlib (https://colorlib.com) -->
9 </html> 36 </html>
......
1 +<html>
2 +
3 +<body>
4 +
5 +<script>
6 +
7 +alert("Hello, world!");
8 +
9 +</script>
10 +
11 +</body>
12 +
13 +</html>
...\ No newline at end of file ...\ No newline at end of file