이유제 / CultureGallery

Go to a project
Toggle navigation Toggle navigation pinning
송효섭
5d818a4b 1 parent 14553293

ejs 기반 Webpage 소스 폴더

Inline Side-by-side
Showing 8 changed files with 248 additions and 0 deletions
1 +<html>
2 +
3 +<head>
4 + <title>로그인 페이지</title>
5 + <link rel="stylesheet" href="login_style.css" type="text/css">
6 + <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
7 +
8 +</head>
9 +
10 +<body>
11 + <header>
12 + <div class="nav-bar">
13 + <img src="camera.png" alt="" class="logo">
14 +
15 + <ul class="menu">
16 + <li><a href="">Home</a></li>
17 + <li><a href="">Services</a></li>
18 + <li><a href="">Portfolio</a></li>
19 + <li><a href="">Testimonimal</a></li>
20 + <li><a href="">Career</a></li>
21 + <li><a href="">Contact</a></li>
22 + </ul>
23 +
24 + </div>
25 + <div class="welcome">
26 +
27 + <h1>로그인</h1>
28 + <a id="kakao-login-btn"></a>
29 +
30 + </div>
31 +
32 + </header>
33 +</body>
34 +<script>
35 + Kakao.init('0678e32dab56db1c52ac63ab4ccb7663');
36 +
37 + console.log(Kakao.isInitialized());
38 +
39 + Kakao.Auth.createLoginButton({
40 + container: '#kakao-login-btn',
41 + success: function (authObj) {
42 + console.log(JSON.stringify(authObj));
43 + alert(JSON.stringify(authObj));//authObj -> 토큰임.
44 + },
45 + fail: function (err) {
46 + alert(JSON.stringify(err));
47 + }
48 + })
49 +</script>
50 +
51 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +*
2 +{
3 + margin: 0;
4 + padding: 0;
5 +}
6 +
7 +
8 +.nav-bar
9 +{
10 + background: #000;
11 + height: 80px;
12 +}
13 +
14 +.logo{
15 + background-color: #fff;
16 + margin: 10px 50px;
17 + height: 60px;
18 +}
19 +
20 +.menu{
21 + float: right;
22 + list-style: none;
23 + margin:20px;
24 +}
25 +
26 +.menu li{
27 + display: inline-block;
28 + margin: 10px 5px;
29 +}
30 +
31 +.menu li a{
32 + text-decoration: none;
33 + color: #fff;
34 + padding: 5px 10px;
35 + font-family: sans-serif;
36 + letter-spacing: 2px;
37 + border: 1px solid #fff;
38 +}
39 +
40 +.menu li a:hover{
41 + background: #fff;
42 + transition: .4s;
43 + color: #000;
44 +}
45 +
46 +.welcome{
47 + position:relative;
48 + text-align:center;
49 + font-family: sans-serif;
50 + color:#000;
51 + top: 300px;
52 +}
53 +
54 +.welcome h1{
55 + font-size: 42px;
56 + margin: 25px;
57 +}
58 +
1 +<html>
2 +
3 +<head>
4 + <title>Webpage Design In HTML and CSS</title>
5 + <link rel="stylesheet" href="main_style.css" type="text/css">
6 +</head>
7 +
8 +<body>
9 + <header>
10 + <div class="nav-bar">
11 + <img src="camera.png" alt="" class="logo">
12 +
13 + <ul class="menu">
14 + <li><a href="">Home</a></li>
15 + <li><a href="">Services</a></li>
16 + <li><a href="">Portfolio</a></li>
17 + <li><a href="">Testimonimal</a></li>
18 + <li><a href="">Career</a></li>
19 + <li><a href="">Contact</a></li>
20 + </ul>
21 +
22 + </div>
23 + <div class="welcome">
24 +
25 + <h1>어떤 공연을 찾으시나요?</h1>
26 + <a href="#" class="btn btn1">나의 근처 공연</a>
27 + <a href="#" class="btn btn2">검색하기</a>
28 + <a href="login.html" class="btn btn3">로그인</a>
29 + </div>
30 +
31 + </header>
32 +</body>
33 +
34 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +*
2 +{
3 + margin: 0;
4 + padding: 0;
5 +}
6 +
7 +header
8 +{
9 + background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(back1.jpg);
10 + height: 100vh;
11 + background-size: cover;
12 + background-position: center;
13 + background-repeat: no-repeat;
14 + transition: 5s;
15 +
16 + animation-name: animate;
17 + animation-direction: alternate-reverse;
18 + animation-duration: 30s;
19 + animation-fill-mode:forwards;
20 + animation-iteration-count: infinite;
21 + animation-play-state: running;
22 + animation-timing-function:ease-in-out;
23 +}
24 +@keyframes animate{
25 + 0%{
26 + background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(back1.jpg);
27 + }
28 + 33%{
29 + background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(back2.jpg);
30 +
31 + }
32 + 66%{
33 + background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(back3.jpg);
34 +
35 + }
36 +}
37 +.nav-bar
38 +{
39 + background: rgb(0,0,0,0.5);
40 + height: 80px;
41 +}
42 +
43 +.logo{
44 + background-color: #fff;
45 + margin: 10px 50px;
46 + height: 60px;
47 +}
48 +
49 +.menu{
50 + float: right;
51 + list-style: none;
52 + margin:20px;
53 +}
54 +
55 +.menu li{
56 + display: inline-block;
57 + margin: 10px 5px;
58 +}
59 +
60 +.menu li a{
61 + text-decoration: none;
62 + color: #fff;
63 + padding: 5px 10px;
64 + font-family: sans-serif;
65 + letter-spacing: 2px;
66 + border: 1px solid #fff;
67 +}
68 +
69 +.menu li a:hover{
70 + background: #fff;
71 + transition: .4s;
72 + color: #000;
73 +}
74 +
75 +.welcome{
76 + position:relative;
77 + text-align:center;
78 + font-family: sans-serif;
79 + color:#fff;
80 + top: 300px;
81 +}
82 +
83 +.welcome h1{
84 + font-size: 42px;
85 + margin: 25px;
86 +}
87 +
88 +.btn{
89 + font-size:18px;
90 + letter-spacing: 2px;
91 + margin:5px;
92 + padding:7px 10px;
93 + text-decoration: none;
94 + border: 1px solid #fff;
95 +}
96 +
97 +.btn{
98 + color:#fff;
99 +
100 +}
101 +.btn:hover{
102 + background: #fff;
103 + color: #000;
104 + transition: .4s;
105 +}
...\ No newline at end of file ...\ No newline at end of file