Showing
4 changed files
with
108 additions
and
136 deletions
... | @@ -10,11 +10,9 @@ | ... | @@ -10,11 +10,9 @@ |
10 | background: #000; | 10 | background: #000; |
11 | height: 80px; | 11 | height: 80px; |
12 | } | 12 | } |
13 | - | ||
14 | .logo{ | 13 | .logo{ |
15 | - background-color: #fff; | ||
16 | margin: 10px 50px; | 14 | margin: 10px 50px; |
17 | - height: 60px; | 15 | + height: 65px; |
18 | } | 16 | } |
19 | 17 | ||
20 | .menu{ | 18 | .menu{ | ... | ... |
... | @@ -5,131 +5,45 @@ | ... | @@ -5,131 +5,45 @@ |
5 | box-sizing: border-box; | 5 | box-sizing: border-box; |
6 | font-family: 'Poppins', sans-serif; | 6 | font-family: 'Poppins', sans-serif; |
7 | } | 7 | } |
8 | -.search-box{ | 8 | + |
9 | - position: relative; | ||
10 | - height: 60px; | ||
11 | - width: 60px; | ||
12 | - border-radius: 50%; | ||
13 | - transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); | ||
14 | - } | ||
15 | - /* //박스 길이 조절 */ | ||
16 | - .search-box.active{ | ||
17 | - width: 700px; | ||
18 | - } | ||
19 | - .search-box input{ | ||
20 | - width: 100%; | ||
21 | - height: 100%; | ||
22 | - border: none; | ||
23 | - border-radius: 50px; | ||
24 | - background: #fff; | ||
25 | - outline: none; | ||
26 | - padding: 0 60px 0 20px; | ||
27 | - font-size: 18px; | ||
28 | - opacity: 0; | ||
29 | - transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); | ||
30 | - } | ||
31 | - /* 불투명도 */ | ||
32 | - .search-box input.active{ | ||
33 | - opacity: 1; | ||
34 | - } | ||
35 | - .search-box input::placeholder{ | ||
36 | - color: #a6a6a6; | ||
37 | - } | ||
38 | - .search-box .search-icon{ | ||
39 | - position: absolute; | ||
40 | - /* 버튼위치 */ | ||
41 | - right: -380px; | ||
42 | - top: 50%; | ||
43 | - transform: translateY(-50%); | ||
44 | - height: 60px; | ||
45 | - width: 60px; | ||
46 | - background: #fff; | ||
47 | - border-radius: 50%; | ||
48 | - text-align: center; | ||
49 | - line-height: 60px; | ||
50 | - font-size: 22px; | ||
51 | - color: #CB25FF; | ||
52 | - cursor: pointer; | ||
53 | - z-index: 1; | ||
54 | - /* transition: all 0.5s cubic-bezier(0.6, -0.28, 0.74, 0.05); */ | ||
55 | - /* transition: cubic-bezier(0.39, 0.575, 0.565, 1); */ | ||
56 | - transition-timing-function: linear; | ||
57 | - } | ||
58 | - .search-box .search-icon.active{ | ||
59 | - right: 5px; | ||
60 | - height: 50px; | ||
61 | - line-height: 50px; | ||
62 | - width: 50px; | ||
63 | - font-size: 20px; | ||
64 | - background: #CB25FF; | ||
65 | - color: #fff; | ||
66 | - transform: translateY(-50%) rotate(360deg); | ||
67 | - } | ||
68 | - .search-box .cancel-icon{ | ||
69 | - position: absolute; | ||
70 | - right: -380px; | ||
71 | - top: 50%; | ||
72 | - transform: translateY(-50%); | ||
73 | - font-size: 25px; | ||
74 | - color: #fff; | ||
75 | - cursor: pointer; | ||
76 | - /* transition: all 0.5s 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); */ | ||
77 | - /* transition: cubic-bezier(0.39, 0.575, 0.565, 1); */ | ||
78 | - transition-timing-function: linear; | ||
79 | - } | ||
80 | - .search-box .cancel-icon.active{ | ||
81 | - right: -40px; | ||
82 | - } | ||
83 | - .search-box .search-data{ | ||
84 | - text-align: center; | ||
85 | - padding-top: 7px; | ||
86 | - color: #fff; | ||
87 | - font-size: 18px; | ||
88 | - word-wrap: break-word; | ||
89 | - } | ||
90 | - .search-box .search-data.active{ | ||
91 | - display: none; | ||
92 | - } | ||
93 | header | 9 | header |
94 | { | 10 | { |
95 | - background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(/images/back1.jpg); | 11 | + background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(/images/back1.jpg); |
96 | - height: 100vh; | 12 | + height: 100vh; |
97 | - background-size: cover; | 13 | + background-size: cover; |
98 | - background-position: center; | 14 | + background-position: center; |
99 | - background-repeat: no-repeat; | 15 | + background-repeat: no-repeat; |
100 | - transition: 5s; | 16 | + transition: 5s; |
101 | 17 | ||
102 | - animation-name: animate; | 18 | + animation-name: animate; |
103 | - animation-direction: alternate-reverse; | 19 | + animation-direction: alternate-reverse; |
104 | - animation-duration: 30s; | 20 | + animation-duration: 30s; |
105 | - animation-fill-mode:forwards; | 21 | + animation-fill-mode:forwards; |
106 | - animation-iteration-count: infinite; | 22 | + animation-iteration-count: infinite; |
107 | - animation-play-state: running; | 23 | + animation-play-state: running; |
108 | - animation-timing-function:ease-in-out; | 24 | + animation-timing-function:ease-in-out; |
109 | } | 25 | } |
110 | @keyframes animate{ | 26 | @keyframes animate{ |
111 | - 0%{ | 27 | + 0%{ |
112 | - background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(/images/back1.jpg); | 28 | + background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(/images/back1.jpg); |
113 | - } | 29 | + } |
114 | - 33%{ | 30 | + 33%{ |
115 | - background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(/images/back2.jpg); | 31 | + background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(/images/back2.jpg); |
116 | - | 32 | + } |
117 | - } | 33 | + 66%{ |
118 | - 66%{ | 34 | + background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(/images/back3.jpg); |
119 | - background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(/images/back3.jpg); | 35 | + } |
120 | - | ||
121 | - } | ||
122 | } | 36 | } |
123 | .nav-bar | 37 | .nav-bar |
124 | { | 38 | { |
125 | background: rgb(0,0,0,0.5); | 39 | background: rgb(0,0,0,0.5); |
40 | + columns: #FFF; | ||
126 | height: 80px; | 41 | height: 80px; |
127 | } | 42 | } |
128 | 43 | ||
129 | .logo{ | 44 | .logo{ |
130 | - background-color: #fff; | ||
131 | margin: 10px 50px; | 45 | margin: 10px 50px; |
132 | - height: 60px; | 46 | + height: 65px; |
133 | } | 47 | } |
134 | 48 | ||
135 | .menu{ | 49 | .menu{ |
... | @@ -157,12 +71,17 @@ header | ... | @@ -157,12 +71,17 @@ header |
157 | transition: .4s; | 71 | transition: .4s; |
158 | color: #000; | 72 | color: #000; |
159 | } | 73 | } |
74 | +.title{ | ||
75 | + position: relative; | ||
76 | + text-align: center; | ||
77 | +} | ||
160 | 78 | ||
161 | .welcome{ | 79 | .welcome{ |
162 | position: absolute; | 80 | position: absolute; |
163 | - top:20vh; | 81 | + top:50%; |
164 | left: 50%; | 82 | left: 50%; |
165 | width: 700px; height: 160px; | 83 | width: 700px; height: 160px; |
84 | + margin-top: -80px; | ||
166 | margin-left: -350px; | 85 | margin-left: -350px; |
167 | text-align:center; | 86 | text-align:center; |
168 | font-family: sans-serif; | 87 | font-family: sans-serif; |
... | @@ -170,26 +89,56 @@ header | ... | @@ -170,26 +89,56 @@ header |
170 | } | 89 | } |
171 | 90 | ||
172 | .welcome h1{ | 91 | .welcome h1{ |
173 | - font-size: 42px; | 92 | + font-size: 48px; |
174 | - margin: 25px; | 93 | + padding: 20 20 0 20; |
175 | } | 94 | } |
176 | 95 | ||
177 | .btn{ | 96 | .btn{ |
178 | - font-size:18px; | 97 | + font-size:18px; |
179 | - letter-spacing: 2px; | 98 | + color:#fff; |
180 | - margin:5px; | 99 | + letter-spacing: 2px; |
181 | - padding:7px 10px; | 100 | + margin:5px; |
182 | - text-decoration: none; | 101 | + padding:7px 10px; |
183 | - border: 1px solid #fff; | 102 | + text-decoration: none; |
103 | + border: 1px solid #fff; | ||
184 | } | 104 | } |
185 | 105 | ||
186 | -.btn{ | ||
187 | - color:#fff; | ||
188 | - | ||
189 | -} | ||
190 | .btn:hover{ | 106 | .btn:hover{ |
191 | background: #fff; | 107 | background: #fff; |
192 | color: #000; | 108 | color: #000; |
193 | transition: .4s; | 109 | transition: .4s; |
194 | } | 110 | } |
195 | 111 | ||
112 | +.search-box{ | ||
113 | + position: relative; | ||
114 | + height: 60px; | ||
115 | + width: 600px; | ||
116 | + background: #fff; | ||
117 | + border-radius: 50px; | ||
118 | + | ||
119 | + margin-left: auto; | ||
120 | + margin-right: auto; | ||
121 | + opacity: 0.8; | ||
122 | + | ||
123 | +} | ||
124 | +.search-box input{ | ||
125 | + | ||
126 | + width: 500px; | ||
127 | + height: 100%; | ||
128 | + border:none; | ||
129 | + border-radius: 50%; | ||
130 | + outline: none; | ||
131 | + padding: 20px; | ||
132 | + font-size: 18px; | ||
133 | + text-align: left; | ||
134 | + float: left; | ||
135 | + opacity: 1; | ||
136 | +} | ||
137 | +.search-box button{ | ||
138 | + width: 100px; | ||
139 | + height: 100%; | ||
140 | + border:none; | ||
141 | + border-radius: 50%; | ||
142 | + | ||
143 | + | ||
144 | +} | ... | ... |
... | @@ -6,6 +6,7 @@ | ... | @@ -6,6 +6,7 @@ |
6 | box-sizing: border-box; | 6 | box-sizing: border-box; |
7 | font-family: 'Poppins', sans-serif; | 7 | font-family: 'Poppins', sans-serif; |
8 | } | 8 | } |
9 | + | ||
9 | body{ | 10 | body{ |
10 | background-color: #fff; | 11 | background-color: #fff; |
11 | } | 12 | } |
... | @@ -17,7 +18,6 @@ body{ | ... | @@ -17,7 +18,6 @@ body{ |
17 | } | 18 | } |
18 | 19 | ||
19 | .logo{ | 20 | .logo{ |
20 | - background-color: #fff; | ||
21 | margin: 10px 50px; | 21 | margin: 10px 50px; |
22 | height: 60px; | 22 | height: 60px; |
23 | } | 23 | } |
... | @@ -65,4 +65,37 @@ body{ | ... | @@ -65,4 +65,37 @@ body{ |
65 | .empty-box{ | 65 | .empty-box{ |
66 | position:absolute; | 66 | position:absolute; |
67 | bottom:0%; | 67 | bottom:0%; |
68 | +} | ||
69 | +table{ | ||
70 | + position: absolute; | ||
71 | + z-index: 2; | ||
72 | + left:50%; | ||
73 | + top: 150vh; | ||
74 | + transform: translate(-50%,-50%); | ||
75 | + width: 70%; | ||
76 | + border-collapse: collapse; | ||
77 | + border-spacing: 0; | ||
78 | + border-radius: 12px 12px 0 0; | ||
79 | + overflow: hidden; | ||
80 | + background: #fafafa; | ||
81 | + text-align: center; | ||
82 | +} | ||
83 | +th,td{ | ||
84 | + padding:12px 15px; | ||
85 | +} | ||
86 | +th{ | ||
87 | + background: #303f9f; | ||
88 | + color: #fafafa; | ||
89 | + text-transform: uppercase; | ||
90 | +} | ||
91 | + | ||
92 | +tr:nth-child(odd){ | ||
93 | + background-color: #eeeeee; | ||
94 | +} | ||
95 | + | ||
96 | +.box1{ | ||
97 | + float: left; | ||
98 | +} | ||
99 | +.box2{ | ||
100 | + float: right; | ||
68 | } | 101 | } |
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
-
Please register or login to post a comment