timeline.html
4.39 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body { background: #e1f5fe;}
#search-box input{width:100%;border:0;height:60px;border-radius:25px;outline:none;padding-left:60px;line-height:61px;box-shadow:12px 12px 30px 0 rgba(77,77,119,.10);font-weight:500;color:#8ba2ad;}
#search-box input::-webkit-input-placeholder{font-weight:500;color:#c5d3de;font-size:14px;}
#search-box input::-moz-placeholder{font-weight:500;color:#c5d3de;font-size:14px;}
#search-box input::-ms-input-placeholder{font-weight:500;color:#c5d3de;font-size:14px;}
#search-box input::-moz-placeholder{font-weight:500;color:#c5d3de;font-size:14px;}
#search-box .fa-globe{position:absolute;top:19px;left:22px;font-size:23px;color:#dcdee0;}
#search-box .inline-search{position:absolute;top:10px;right:25px;}
#search-box .inline-search #search-btn{background-image:linear-gradient(to right,#6A1B9A,#9C27B0);border:0;transition:background-size .2s ease-in-out,.2s box-shadow ease-in-out,.2s filter,.3s opacity;color:#fff;height:40px;width:40px;font-size:14px;border-radius:50px;outline:none !important;line-height:40px;cursor:pointer;box-shadow:3px 4px 31px 0 rgba(253, 165, 93, 0.54);margin-left:2px;-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;-ms-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}
#search-box .inline-search #search-btn:hover{background-size:175% 100%;color:#fff;outline:none;transition:background-size .2s ease-in-out,.2s box-shadow ease-in-out,.2s filter,.3s opacity;}
#search-box .inline-search #transfer-btn{background-image:linear-gradient(to right,#5c5cfd,#d65ffd);border:0;transition:background-size .2s ease-in-out,.2s box-shadow ease-in-out,.2s filter,.3s opacity;color:#fff;height:40px;width:40px;font-size:14px;border-radius:50px;outline:none !important;line-height:40px;cursor:pointer;box-shadow:3px 4px 31px 0 rgba(149, 94, 253, 0.45);-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;-ms-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}
#search-box .inline-search #transfer-btn:hover{background-size:175% 100%;color:#fff;outline:none;transition:background-size .2s ease-in-out,.2s box-shadow ease-in-out,.2s filter,.3s opacity;}
</style>
<script>
function search(){
document.write(timeline);
}
</script>
</head>
<body>
<!--검색창-->
<form method="post" action="" id="search-box" class="col-md-6 offset-md-3 mt-5">
<i class="fa fa-globe"></i>
<input type="text" placeholder="키워드를 입력하세요" >
<span class="inline-search">
<button id="search-btn" type="submit" value="Search" onclick="search()">
<i class="fa fa-search"></i>
</button>
</span>
</form>
<script type ="text/javascript">
function search(){
}
</script>
<!--타임라인 출력-->
<div>
<% for (var i=0; i<20; i++){ %>
<section class="section mt-5" >
<div class="container" style="border: 1px solid black">
<div class="row">
<div class="col-md-6">
<div>
<% if(timeline[i].hasOwnProperty('extended_entities')) { %> <!--미디어가 존재하면 출력-->
<img alt="Web Studio" class="img-fluid" width="300" height="300" src= <%= timeline[i].extended_entities.media[0].media_url_https %> />
<% } %>
</div>
</div>
<div class="col-md-6 col-lg-5 ml-auto d-flex align-items-center mt-4 mt-md-0">
<div>
<h2><%=timeline[i].user.name%></h2> <!--닉네임-->
<p class="margin-top-s"><%=timeline[i].text%></p> <!--내용-->
</div>
</div>
</div>
</div>
</section>
<div>
</div>
<% } %>
</div>
</body>
</html>