-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathdetail.html
163 lines (124 loc) · 6.56 KB
/
detail.html
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html lang="en">
<head>
<title>WikiArt Analysis</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<header id="header" class="header" style=" background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)), url('images/r.jpg') center center no-repeat;background-size: cover;">
<div class ="row">
<div class = "col-sm-1"></div>
<h1 class = "col-sm-5" style="font-size:24px;" >WikiArt Analysis</h1>
<nav class = "col-sm-6 text-right">
<a href = "index.html">Home</a>
<a href = "design.html">Design</a>
<a href = "about.html">About Us</a>
</nav>
</div>
<div class="header-content">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="text-container">
<h1>Renaissance Art </h1>
<!-- <p class="p-heading p-large">asdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklsdfghjklsdfghjklasdfghjklasdfghjklasdfghjkasdfghjkasdfghjkl</p> -->
</div>
</div>
</div>
</div>
</div>
</header>
<section id = "r-year" class = "container">
<div class = "row">
<div class = "col-sm-4 explain">
<li>The Renaissance refers to the era in Europe from the 14th to the 16th century in which a new style in painting, sculpture and architecture developed after the Gothic. </li>
<li>Derived from the French word, renaissance, and the Italian word rinascità, both meaning ‘rebirth’, the Renaissance was a period when scholars and artists began to investigate what they believed to be a revival of classical learning, literature and art. </li>
<li>From the visualization, we can see the work of Renaissance Art the researchers choose are from year 1415 to year 1625, and it is obvious that year 1450 to year 1530 are the best years for Renaissance Art.</li>
</div>
<div class = "col-sm-8">
<img class ="portrait" src = "images/r-y.png">
</div>
</section>
<section id = "r-emotion" class = "container">
<div class = "row">
<div class = "col-sm-8">
<img class ="portrait" src = "images/r-e.png">
</div>
<div class = "col-sm-4 explain">
<li>This bubble chart shows the emotion average annotations of Renaissance Art. The bubbles of green colors represent positive emotions; the bubbles of orange colors represent negative emotions; the bubbles of blue colors represent other emotions--mixed or neutral. The color inside each emotion type is from dark to light according to the average annotations. </li>
<li>From this chart, it is obvious that annotators provided the most consistent labels for positive emotions including trust, happiness, humility, etc. One possible reason can be that most renaissance arts reflect the theme and emotion of positive, because one idea during the Renaissance is that people were able to experience God directly and should have a personal, emotional relationship to their faith. God had made the world but humans were able to share in his glory by becoming creators themselves.</li>
</div>
</section>
<section id = "r-rate" class = "container">
<div class = "row">
<div class = "col-sm-6 explain">
<li>This bar chart shows How did the annotators like the piece on average (-3 (strongly dislike) to 3 (strongly like)).</li>
<li>The colors of green mean like, gray means neither like nor dislike and the colors of oranges mean dislike. The colors change from dark to light according to how much the annotators like the piece of art work.</li>
<li>The colors of green mean like, gray means neither like nor dislike and the colors of oranges mean dislike. The colors change from dark to light according to how much the annotators like the piece of art work.</li>
<li>We can come to the conclusion that work of Renaissance Art is liked by people.</li>
</div>
<div class = "col-sm-6">
<img class ="portrait" src = "images/r-r.png">
</div>
</section>
<section id="category">
<div class="container">
<!-- <h3>Click on each art style to see details</h3> -->
<div class = "row">
<!-- <div class="imgcard col-sm-3" onclick="{location.href='detail.html'}">
<img src="images/r.png" style="width:100%">
<div class="container">
<p>Renaissance Art</p>
</div>
</div> -->
<div class="imgcard col-sm-4" onclick="{location.href='detail-pr.html'}">
<img src="images/pr.png" style="width:100%"/>
<div class="container">
<p>Post Renaissance Art</p>
</div>
</div>
<div class="imgcard col-sm-4" onclick="{location.href='detail-m.html'}">
<img src="images/m.jpeg" style="width:100%">
<div class="container">
<p>Modern Art</p>
</div>
</div>
<div class="imgcard col-sm-4" onclick="{location.href='detail-c.html'}">
<img src="images/c.png" style="width:100%"/>
<div class="container">
<p>Contemporary Art</p>
</div>
</div>
</div>
</div>
</section>
<div id="gotop">
<div class="arrow"></div>
<div class="stick"></div>
</div>
<footer class = "container" >
<div class = "row" >
<p>© 2019 INFO 5602 Group 6</p>
</div>
</footer>
<script src="http://cdn.staticfile.org/jquery/1.11.1-rc2/jquery.min.js"></script>
<script>
$(function(){
$(window).scroll(function(){
var scrollt = document.documentElement.scrollTop + document.body.scrollTop;
if( scrollt >600 ){
$("#gotop").fadeIn(400);
}else{
$("#gotop").stop().fadeOut(400);
}
});
$("#gotop").click(function(){
$("html,body").animate({scrollTop:"0px"},200);
});
});
</script>
</body>
</html>