김명주 / 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
1 +body
2 +{
3 + background:rgb(26, 154, 248);
4 +}
5 +.search
6 +{
7 + position:absolute;
8 + width: 700px;
9 + height:100px;
10 + top:300px;
11 + left:600px;
12 + background:white;
13 + border-radius: 50px;
14 + border:3px solid black;
15 +}
16 +#left
17 +{
18 + position:absolute;
19 + width:600px;
20 + height:600px;
21 + top:350px;
22 + left:50px;
23 +}
24 +#right
25 +{
26 + position:absolute;
27 + width:650px;
28 + height:600px;
29 + top:300px;
30 + left:1200px;
31 +}
32 +.box {
33 + animation: slide-in-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
34 +}
35 + @keyframes slide-in-left {
36 + 0% {
37 + transform: translateX(-1000px);
38 + opacity: 0;
39 + }
40 + 100% {
41 + transform: translateX(0);
42 + opacity: 1;
43 + }
44 + }
45 + .box2 {
46 + animation: slide-in-right 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
47 + }
48 + @keyframes slide-in-right {
49 + 0% {
50 + transform: translateX(1000px);
51 + opacity: 0;
52 + }
53 + 100% {
54 + transform: translateX(0);
55 + opacity: 1;
56 + }
57 + }
58 +
59 +#name
60 +{
61 + outline:none;
62 + position:relative;
63 + width: 350px;
64 + height:50px;
65 + font-size:x-large;
66 + top:50%;
67 + left:5%;
68 + border:0px;
69 + margin:-25px 0px 0px 0px;
70 + float:left;
71 +}
72 +#OK
73 +{
74 + position:relative;
75 + background-image: url('metadata/image/button.png');
76 + width:70px;
77 + height:70px;
78 + float:left;
79 + left:35%;
80 + border:0px;
81 + margin:15px 0px 0px 0px;
82 +}
...\ No newline at end of file ...\ No newline at end of file
1 +<html>
2 + <head>
3 + <title>TESTESTEST</title>
4 + <meta charset="utf-8">
5 + <!-- 제이쿼리 불러오기 -->
6 + <!--<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>-->
7 + <link rel="stylesheet" type="text/css" href="search_home.css" />
8 + <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
9 + </head>
10 + <body>
11 + <img class="box" id="left" src="metadata/image/wodi.png">
12 + <img class="box2" id="right" src="metadata/image/sdao.png">
13 + <div class="search">
14 + <input type="text" id="name" placeholder="카트라이더 닉네임 입력" />
15 + <input type="submit" value="" onClick="location.href='search/result'" id="OK"/>
16 + </div>
17 + <script>
18 + $("#OK").click(function(){ // OK 버튼 클릭하면
19 + $.ajax({
20 + url: '/search/result', // postTest 주소로
21 + async: true, // 동기화 - 서버에서 반응이 올때까지 기다림
22 + type: 'POST', // POST 방식으로
23 + data: {
24 + test: $("#name").val() // 텍스트필드에 입력한 값을 test라는 이름으로 보냄
25 + },
26 + dataType: 'json'
27 + });
28 + });
29 + </script>
30 + </body>
31 +</html>
...\ No newline at end of file ...\ No newline at end of file