YujeLee

FrontEnd: css 아이콘 수정 / main,mapPage,login style 변경

...@@ -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
......
1 -body {
2 - padding: 50px;
3 - font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
4 -}
5 -
6 -a {
7 - color: #00B7FF;
8 -}