김혜림

second commit

No preview for this file type

6.36 KB

1 +<!DOCTYPE html>
2 +<html>
3 +<head>
4 + <title>대여화면3</title>
5 +</head>
6 +<style>
7 +body {
8 + background-color: rgb(230, 243, 255);
9 +}
10 +img {
11 + display:block;
12 + margin:auto;
13 +}
14 +input[type=text] {
15 + width: 300px;
16 + box-sizing: border-box;
17 + border: 3px solid rgb(191, 191, 191);
18 + border-radius: 4px;
19 + font-size: 18px;
20 + font-family: '배달의민족 도현';
21 + background-color: rgb(230, 243, 255);
22 + background-position: 5px 2.5px;
23 + background-repeat: no-repeat;
24 + padding: 12px 20px 12px 50px;
25 + -webkit-transition: width 0.4s ease-in-out;
26 + transition: width 0.4s ease-in-out;
27 +}
28 +input[type=text]:focus {
29 + width: 30%;
30 +}
31 +#btn1 {
32 + width: 147px;
33 + height: 60px;
34 + font-size:16px;
35 + font-family: '배달의민족 도현';
36 + text-align: left;
37 + color: gray;
38 + background: white;
39 + border: solid 5px white;
40 + border-radius: 5px;
41 +}
42 +#btn2 {
43 + width: 147px;
44 + height: 60px;
45 + font-size:25px;
46 + font-family: '배달의민족 도현';
47 + color: rgb(045, 098, 155);
48 + background: white;
49 + border: solid 5px white;
50 + border-radius: 5px;
51 +}
52 +
53 +</style>
54 +
55 +<body>
56 +
57 +<br>
58 +<img style="border-radius:15px;" width="300px;" src="캡처7.png"/>
59 +<form>
60 +
61 +<br>
62 +
63 +<center><input style="background-image:url(searchicon.png);" type="text" name="search" placeholder="Search.."></center><br>
64 +<center><button id="btn1">전자정보대학<br>103호</button>&nbsp;<button id="btn2">대여가능</button></center><br>
65 +
66 +
67 +<img width="100;" height="70;" align="bottom;" src="khu.png"/>
68 +
69 +</form>
70 +
71 +
72 +
73 +</body>
74 +
75 +</html>
...\ No newline at end of file ...\ No newline at end of file
...@@ -20,7 +20,6 @@ img { ...@@ -20,7 +20,6 @@ img {
20 background: white; 20 background: white;
21 border: solid 5px white; 21 border: solid 5px white;
22 border-radius: 50%; 22 border-radius: 50%;
23 - margin-right: 150px;
24 margin-top: 50px; 23 margin-top: 50px;
25 } 24 }
26 #btn2 { 25 #btn2 {
...@@ -32,7 +31,6 @@ img { ...@@ -32,7 +31,6 @@ img {
32 background: white; 31 background: white;
33 border: solid 5px white; 32 border: solid 5px white;
34 border-radius: 50%; 33 border-radius: 50%;
35 - margin-left: 150px;
36 margin-top: 50px; 34 margin-top: 50px;
37 } 35 }
38 36
...@@ -40,15 +38,14 @@ img { ...@@ -40,15 +38,14 @@ img {
40 38
41 <body> 39 <body>
42 40
43 -<br><br> 41 +<br>
44 <img style="border-radius:15px;" width="300px;" src="캡처6.png"/><br> 42 <img style="border-radius:15px;" width="300px;" src="캡처6.png"/><br>
45 <form> 43 <form>
46 44
47 <br> 45 <br>
48 46
49 -<center><button id="btn1">대여하기</button></center> 47 +<center><button id="btn1">대여하기</button>&nbsp;&nbsp;<button id="btn2">대여현황</button></center>
50 -<center><button id="btn2">대여현황</button></center> 48 +<br><br><br><br><br><br>
51 -<br><br><br><br>
52 <img width="100;" height="70;" align="bottom;" src="khu.png"/> 49 <img width="100;" height="70;" align="bottom;" src="khu.png"/>
53 50
54 </form> 51 </form>
......
...@@ -14,20 +14,20 @@ img { ...@@ -14,20 +14,20 @@ img {
14 input[type=text] { 14 input[type=text] {
15 width: 300px; 15 width: 300px;
16 box-sizing: border-box; 16 box-sizing: border-box;
17 - border: 3px solid lightgray; 17 + border: 3px solid rgb(191, 191, 191);
18 border-radius: 4px; 18 border-radius: 4px;
19 - font-size: 16px; 19 + font-size: 18px;
20 + font-family: '배달의민족 도현';
20 background-color: rgb(230, 243, 255); 21 background-color: rgb(230, 243, 255);
21 - background-image: searchicon.png; 22 + background-position: 5px 2.5px;
22 - background-position: 10px 10px;
23 background-repeat: no-repeat; 23 background-repeat: no-repeat;
24 - padding: 12px 20px 12px 40px; 24 + padding: 12px 20px 12px 50px;
25 -webkit-transition: width 0.4s ease-in-out; 25 -webkit-transition: width 0.4s ease-in-out;
26 transition: width 0.4s ease-in-out; 26 transition: width 0.4s ease-in-out;
27 } 27 }
28 28
29 input[type=text]:focus { 29 input[type=text]:focus {
30 - width: 50%; 30 + width: 30%;
31 } 31 }
32 #btn1 { 32 #btn1 {
33 width: 300px; 33 width: 300px;
...@@ -44,13 +44,13 @@ input[type=text]:focus { ...@@ -44,13 +44,13 @@ input[type=text]:focus {
44 44
45 <body> 45 <body>
46 46
47 -<br><br> 47 +<br>
48 -<img style="border-radius:15px;" width="300px;" src="캡처6.png"/> 48 +<img style="border-radius:15px;" width="300px;" src="캡처7.png"/>
49 <form> 49 <form>
50 50
51 <br> 51 <br>
52 52
53 -<center><input type="text" name="search" placeholder="Search.."><image width="30px"src="searchicon.png"></center><br> 53 +<center><input style="background-image:url(searchicon.png);" type="text" name="search" placeholder="Search.."></center><br>
54 54
55 <center><button id="btn1">강의실</button></center><br> 55 <center><button id="btn1">강의실</button></center><br>
56 <center><button id="btn1">회의 공간</button></center><br> 56 <center><button id="btn1">회의 공간</button></center><br>
......
...@@ -20,6 +20,7 @@ input[type=text] { ...@@ -20,6 +20,7 @@ input[type=text] {
20 -webkit-transition: 0.5s; 20 -webkit-transition: 0.5s;
21 transition: 0.5s; 21 transition: 0.5s;
22 outline: none; 22 outline: none;
23 + font-family: '배달의민족 도현';
23 } 24 }
24 input[type=text]:focus { 25 input[type=text]:focus {
25 border: 3px solid #555; 26 border: 3px solid #555;
...@@ -34,6 +35,7 @@ input[type=password] { ...@@ -34,6 +35,7 @@ input[type=password] {
34 transition: 0.5s; 35 transition: 0.5s;
35 outline: none; 36 outline: none;
36 margin-right: 7px; 37 margin-right: 7px;
38 + font-family: '배달의민족 도현';
37 } 39 }
38 input[type=password]:focus { 40 input[type=password]:focus {
39 border: 3px solid #555; 41 border: 3px solid #555;
...@@ -67,7 +69,7 @@ h2 { ...@@ -67,7 +69,7 @@ h2 {
67 69
68 <body> 70 <body>
69 71
70 -<br><br> 72 +<br>
71 <img style="border-radius:15px;" width="300px;" src="캡처6.png"/> 73 <img style="border-radius:15px;" width="300px;" src="캡처6.png"/>
72 <form> 74 <form>
73 75
......