-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathdetail-m.html
155 lines (123 loc) · 6.23 KB
/
detail-m.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
<!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/m.png') 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>Modern Art </h1>
<!-- <p class="p-heading p-large">asdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjklsdfghjklsdfghjklasdfghjklasdfghjklasdfghjkasdfghjkasdfghjkl</p> -->
</div>
</div>
</div>
</div>
</div>
</header>
<section id = "m-year" class = "container">
<div class = "row">
<div class = "col-sm-4 explain">
<li>Modern art includes artistic work produced during the period extending roughly from the 1860s to the 1970s, and denotes the styles and philosophy of the art produced during that era.</li>
<li>The visualization shows that the high peak of work for Modern Art is from Year 1910 to Year 1920 and from Year 1950 to Year 1970. It accords with the fact that these are two periods which modern art grows fast.</li>
</div>
<div class = "col-sm-8">
<img class ="portrait" src = "images/m-y.png">
</div>
</section>
<section id = "m-emotion" class = "container">
<div class = "row">
<div class = "col-sm-8">
<img class ="portrait" src = "images/m-e.png">
</div>
<div class = "col-sm-4 explain">
<li>This bubble chart shows the emotion average annotation of Modern Art. In this visualization, colors of green represent positive emotions; colors of orange represent negative emotions and colors of blue 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 clear that annotators provided the most consistent labels for positive emotions including surprise, anticipation and happiness. Surprise and anticipation belong to other or mixed emotions. So other or mixed emotions are the main emotion of the modern art. </li>
<li>At the same time, positive emotions still have an important position. Happiness, optimism and humility have relatively high average scores.</li>
</div>
</section>
<section id = "m-rate" class = "container">
<div class = "row">
<div class = "col-sm-6 explain">
<li>This bar chart shows How did the annotators like the piece of Moderb Art on average (-3 (strongly dislike) to 3 (strongly like)).</li>
<li>TThe 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>This chart shows that the majority of annotators chose “ Like it somewhat’ or “ Neither like nor Dislike it”. Considering that many annotators tended to choose “like” because of showing respect to artists’ work, it looks like the work of Modern Art is not very attracted to people.</li>
</div>
<div class = "col-sm-6">
<img class ="portrait" src = "images/m-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-4" 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>