이유제 / CultureGallery

Go to a project
Toggle navigation Toggle navigation pinning
YujeLee
9a33b88d 1 parent d667d1b2

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

Inline Side-by-side
Showing 4 changed files with 108 additions and 136 deletions
......@@ -10,11 +10,9 @@
background: #000;
height: 80px;
}
.logo{
background-color: #fff;
margin: 10px 50px;
height: 60px;
height: 65px;
}
.menu{
......
......@@ -5,131 +5,45 @@
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.search-box{
position: relative;
height: 60px;
width: 60px;
border-radius: 50%;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
/* //박스 길이 조절 */
.search-box.active{
width: 700px;
}
.search-box input{
width: 100%;
height: 100%;
border: none;
border-radius: 50px;
background: #fff;
outline: none;
padding: 0 60px 0 20px;
font-size: 18px;
opacity: 0;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
/* 불투명도 */
.search-box input.active{
opacity: 1;
}
.search-box input::placeholder{
color: #a6a6a6;
}
.search-box .search-icon{
position: absolute;
/* 버튼위치 */
right: -380px;
top: 50%;
transform: translateY(-50%);
height: 60px;
width: 60px;
background: #fff;
border-radius: 50%;
text-align: center;
line-height: 60px;
font-size: 22px;
color: #CB25FF;
cursor: pointer;
z-index: 1;
/* transition: all 0.5s cubic-bezier(0.6, -0.28, 0.74, 0.05); */
/* transition: cubic-bezier(0.39, 0.575, 0.565, 1); */
transition-timing-function: linear;
}
.search-box .search-icon.active{
right: 5px;
height: 50px;
line-height: 50px;
width: 50px;
font-size: 20px;
background: #CB25FF;
color: #fff;
transform: translateY(-50%) rotate(360deg);
}
.search-box .cancel-icon{
position: absolute;
right: -380px;
top: 50%;
transform: translateY(-50%);
font-size: 25px;
color: #fff;
cursor: pointer;
/* transition: all 0.5s 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); */
/* transition: cubic-bezier(0.39, 0.575, 0.565, 1); */
transition-timing-function: linear;
}
.search-box .cancel-icon.active{
right: -40px;
}
.search-box .search-data{
text-align: center;
padding-top: 7px;
color: #fff;
font-size: 18px;
word-wrap: break-word;
}
.search-box .search-data.active{
display: none;
}
header
{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(/images/back1.jpg);
height: 100vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: 5s;
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(/images/back1.jpg);
height: 100vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: 5s;
animation-name: animate;
animation-direction: alternate-reverse;
animation-duration: 30s;
animation-fill-mode:forwards;
animation-iteration-count: infinite;
animation-play-state: running;
animation-timing-function:ease-in-out;
animation-name: animate;
animation-direction: alternate-reverse;
animation-duration: 30s;
animation-fill-mode:forwards;
animation-iteration-count: infinite;
animation-play-state: running;
animation-timing-function:ease-in-out;
}
@keyframes animate{
0%{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(/images/back1.jpg);
}
33%{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(/images/back2.jpg);
}
66%{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(/images/back3.jpg);
}
0%{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(/images/back1.jpg);
}
33%{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(/images/back2.jpg);
}
66%{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(/images/back3.jpg);
}
}
.nav-bar
{
background: rgb(0,0,0,0.5);
columns: #FFF;
height: 80px;
}
.logo{
background-color: #fff;
margin: 10px 50px;
height: 60px;
height: 65px;
}
.menu{
......@@ -157,12 +71,17 @@ header
transition: .4s;
color: #000;
}
.title{
position: relative;
text-align: center;
}
.welcome{
position: absolute;
top:20vh;
top:50%;
left: 50%;
width: 700px; height: 160px;
margin-top: -80px;
margin-left: -350px;
text-align:center;
font-family: sans-serif;
......@@ -170,26 +89,56 @@ header
}
.welcome h1{
font-size: 42px;
margin: 25px;
font-size: 48px;
padding: 20 20 0 20;
}
.btn{
font-size:18px;
letter-spacing: 2px;
margin:5px;
padding:7px 10px;
text-decoration: none;
border: 1px solid #fff;
font-size:18px;
color:#fff;
letter-spacing: 2px;
margin:5px;
padding:7px 10px;
text-decoration: none;
border: 1px solid #fff;
}
.btn{
color:#fff;
}
.btn:hover{
background: #fff;
color: #000;
transition: .4s;
}
.search-box{
position: relative;
height: 60px;
width: 600px;
background: #fff;
border-radius: 50px;
margin-left: auto;
margin-right: auto;
opacity: 0.8;
}
.search-box input{
width: 500px;
height: 100%;
border:none;
border-radius: 50%;
outline: none;
padding: 20px;
font-size: 18px;
text-align: left;
float: left;
opacity: 1;
}
.search-box button{
width: 100px;
height: 100%;
border:none;
border-radius: 50%;
}
......
......@@ -6,6 +6,7 @@
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
background-color: #fff;
}
......@@ -17,7 +18,6 @@ body{
}
.logo{
background-color: #fff;
margin: 10px 50px;
height: 60px;
}
......@@ -65,4 +65,37 @@ body{
.empty-box{
position:absolute;
bottom:0%;
}
table{
position: absolute;
z-index: 2;
left:50%;
top: 150vh;
transform: translate(-50%,-50%);
width: 70%;
border-collapse: collapse;
border-spacing: 0;
border-radius: 12px 12px 0 0;
overflow: hidden;
background: #fafafa;
text-align: center;
}
th,td{
padding:12px 15px;
}
th{
background: #303f9f;
color: #fafafa;
text-transform: uppercase;
}
tr:nth-child(odd){
background-color: #eeeeee;
}
.box1{
float: left;
}
.box2{
float: right;
}
\ No newline at end of file
......
body {
padding: 50px;
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
a {
color: #00B7FF;
}