김명주 / kartrider

Go to a project
Toggle navigation Toggle navigation pinning
김명주
a33aed9e 1 parent 74ef81b7

Design search home page

Inline Side-by-side
Showing 2 changed files with 113 additions and 0 deletions
body
{
background:rgb(26, 154, 248);
}
.search
{
position:absolute;
width: 700px;
height:100px;
top:300px;
left:600px;
background:white;
border-radius: 50px;
border:3px solid black;
}
#left
{
position:absolute;
width:600px;
height:600px;
top:350px;
left:50px;
}
#right
{
position:absolute;
width:650px;
height:600px;
top:300px;
left:1200px;
}
.box {
animation: slide-in-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes slide-in-left {
0% {
transform: translateX(-1000px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
.box2 {
animation: slide-in-right 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes slide-in-right {
0% {
transform: translateX(1000px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
#name
{
outline:none;
position:relative;
width: 350px;
height:50px;
font-size:x-large;
top:50%;
left:5%;
border:0px;
margin:-25px 0px 0px 0px;
float:left;
}
#OK
{
position:relative;
background-image: url('metadata/image/button.png');
width:70px;
height:70px;
float:left;
left:35%;
border:0px;
margin:15px 0px 0px 0px;
}
\ No newline at end of file
<html>
<head>
<title>TESTESTEST</title>
<meta charset="utf-8">
<!-- 제이쿼리 불러오기 -->
<!--<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>-->
<link rel="stylesheet" type="text/css" href="search_home.css" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<img class="box" id="left" src="metadata/image/wodi.png">
<img class="box2" id="right" src="metadata/image/sdao.png">
<div class="search">
<input type="text" id="name" placeholder="카트라이더 닉네임 입력" />
<input type="submit" value="" onClick="location.href='search/result'" id="OK"/>
</div>
<script>
$("#OK").click(function(){ // OK 버튼 클릭하면
$.ajax({
url: '/search/result', // postTest 주소로
async: true, // 동기화 - 서버에서 반응이 올때까지 기다림
type: 'POST', // POST 방식으로
data: {
test: $("#name").val() // 텍스트필드에 입력한 값을 test라는 이름으로 보냄
},
dataType: 'json'
});
});
</script>
</body>
</html>
\ No newline at end of file