-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
143 lines (143 loc) · 10 KB
/
index.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
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Phycological Health of soccer fans</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
<link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script src="scripts/jquery-ui.min.js" type="text/javascript"></script>
<script src="scripts/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="scripts/jquery.mousewheel.min.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/pop-ups.js"></script>
<script type="text/javascript" src="scripts/nav.js"></script>
</head>
<body>
<hgroup>
<h1>Phycological health of soccer fans</h1>
<h4>Presentation by Thomas Fu</h4>
<h4>This is a HTML5 Sample</h4>
</hgroup>
<nav>
<ul id="menu" class="menu">
<li> <a href="#" id="about"> <img src="images/1_menu.jpg" alt=""/> <span class="active"></span> <span class="wrap"> <span class="link">Fact</span> <span class="descr">A matter of fact</span> </span> </a> </li>
<li> <a href="#" id="projects"> <img src="images/2_menu.jpg" alt=""/> <span class="active"></span> <span class="wrap"> <span class="link">Benifits</span> <span class="descr">Benifits you can gain</span> </span> </a> </li>
<li> <a href="#" id="contact"> <img src="images/3_menu.jpg" alt=""/> <span class="active"></span> <span class="wrap"> <span class="link">Harm</span> <span class="descr">Something harmful</span> </span> </a> </li>
<li > <a href="#" id="blog"> <img src="images/1_menu.jpg" alt=""/> <span class="active"></span> <span class="wrap"> <span class="link">Attitude</span> <span class="descr">How to deal with it</span> </span> </a> </li>
</ul>
</nav>
<section id="bg">
<section id="overlay"></section>
<a href="#" class="nextImageBtn" title="next"></a><a href="#" class="prevImageBtn" title="previous"></a><img src="images/gallery/1.jpg" alt="Title of this pic" title="Title of this pic" id="bgimg" /></section>
<div id="preloader"><img src="images/ajax-loader_dark.gif" width="32" height="32" alt="" /></div>
<div id="img_title"></div>
<div id="toolbar"><a href="#" title="Maximize" onClick="ImageViewMode('full');return false"><img src="images/toolbar_fs_icon.png" width="50" height="50" alt="" /></a></div>
<div id="thumbnails_wrapper">
<div id="outer_container">
<div class="thumbScroller">
<div class="container">
<div class="content">
<div><a href="images/gallery/1.jpg"><img src="images/gallery/1_thumb.jpg" title=" " alt=" " class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="images/gallery/2.jpg"><img src="images/gallery/2_thumb.jpg" title=" " alt=" " class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="images/gallery/3.jpg"><img src="images/gallery/3_thumb.jpg" title=" " alt=" " class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="images/gallery/4.jpg"><img src="images/gallery/4_thumb.jpg" title=" " alt=" " class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="images/gallery/5.jpg"><img src="images/gallery/5_thumb.jpg" title=" " alt=" " class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="images/gallery/6.jpg"><img src="images/gallery/6_thumb.jpg" title=" " alt=" " class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="images/gallery/1.jpg"><img src="images/gallery/1_thumb.jpg" title=" " alt=" " class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="images/gallery/2.jpg"><img src="images/gallery/2_thumb.jpg" title=" " alt=" " class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="images/gallery/3.jpg"><img src="images/gallery/3_thumb.jpg" title=" " alt=" " class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="images/gallery/4.jpg"><img src="images/gallery/4_thumb.jpg" title=" " alt=" " class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="images/gallery/5.jpg"><img src="images/gallery/5_thumb.jpg" title=" " alt=" " class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="images/gallery/6.jpg"><img src="images/gallery/6_thumb.jpg" title=" " alt=" " class="thumb" /></a></div>
</div>
</div>
</div>
</div>
</div>
<article id="popupAbout" class="popupAbout">
<div class="customScrollBox">
<div class="container">
<div class="content"> <a id="popupAboutClose"><img src="images/cross.png" width="20" alt="" /></a>
<h1>The fact</h1>
<h1><img src="images/connoisseur.jpg" alt="" class="image"/> As in known to all of us,soccer is the most popular one among all the sports in the world.In the mainwhile,soccer clubs can gain a lot of fans supporting them.</p>
<h1>Football can have a major impact on mental health. It is thought to affect emotions, relationships, identity and self-esteem. In a recent study, one in four fans said football was one of the most important things in their lives. </p>
<h1>Die-hard soccer fans hit the heights when their team wins and the depths of despair when they lose.Scientific studies show the love affiar with a team may be as emotionally intense as the real thing,and that team clashes have gladiatorial power.</p>
<h1>(The picture shown beside is an aged crying in the pitch after Manchester City beated QPR and won the Premier Chanpionship,which is their first top Chanpionship in the recent 44 years.The game was a reverse which is quite exciting,so i think fans had suffered a lot.)</p>
</div>
</div>
<div class="dragger_container">
<div class="dragger"></div>
</div>
<a class="scrollUpBtn" href="#"></a> <a class="scrollDownBtn" href="#"></a> </div>
</article>
<article id="popupProjects" class="popupProjects">
<div class="customScrollBox">
<div class="container">
<div class="content"> <a id="popupProjectsClose"><img src="images/cross.png" width="20" alt="" /></a>
<h1>Benifits</h1>
<h1>If you become a die-hard soccer fan of one club,you may benifit a lot somehow.</p>
<h1>When time is at a premium for most people, leisure activity and entertainment fulfils the psychological need to escape from the stresses and strains of life and go into another world for a period of time. The time set aside for football is often sacrosanct and provides an opportunity to play.</p>
<h1>It has been suggested that the attraction of sports events over other forms of entertainment is the combination of comfort in ritual with unpredictable outcome. People can look forward to the comfort of the familiar with the thrill of the unknown.</p>
<h1>The World Cup in particular may have a positive effect on mental health. One study found there was a reduction in numbers of emergency psychiatric admissions during and after World Cup finals.</p>
</div>
</div>
<div class="dragger_container">
<div class="dragger"></div>
</div>
<a class="scrollUpBtn" href="#"></a> <a class="scrollDownBtn" href="#"></a> </div>
</article>
<article id="popupContact" class="popupContactt">
<div class="customScrollBox">
<div class="container">
<div class="content"> <a id="popupContactClose"><img src="images/cross.png" width="20" alt="" /></a>
<h1>Harm</h1>
<h1>Commentators have suggested that for some fans, supporting football provides an opportunity to re-enact the ritual of battle. However this can be taken too far and lead to serious acts of violence, differentiating the fan from the "football hooligan". The available evidence on hooligan offenders suggest that they are generally young, in their late teens or 20s, although some "leaders" are older. It has been suggested that initially much behaviour is simply ritualistic and non-violent verbal abuse and threats. However, "core hooligans" are more interested in fighting or "running" rival groups.</p>
<h1>Heavy drinking too is often a key element in a "good day out". Many violent offences by football fans are related to alcohol.</p>
<h1>(The picture shown below is a match chao happened in Germany bundesliga 2 recently.Hertha drew with second-division club Fortuna Dusseldorf 2-2 after fan interference and fireworks on the pitch forced the referee to halt the game three times. Hundreds of fans invaded the pitch 90 seconds before the final whistle. The referee led the players off the pitch and it took 20 minutes before they were able to return to play the final 90 seconds of added time.)
</div>
</div>
<div class="dragger_container">
<div class="dragger"></div>
</div>
<a class="scrollUpBtn" href="#"></a> <a class="scrollDownBtn" href="#"></a> </div>
</article>
<article id="popupBlog" class="popupBlog">
<div class="customScrollBox">
<div class="container">
<div class="content"> <a id="popupBlogClose"><img src="images/cross.png" width="20" alt="" /></a>
<h1>Take a positive attitude</h1>
<h1>Football only has a positive effect when it is kept in perspective. An over-reliance on or obsession with football can limit the development of other interests and have a negative impact on male/female relationships and may divert attention away from other family responsibilities.</p>
<h1>Football might have an even more beneficial impact on mental health if more fans took to the field, as exercise is known to have a positive effect on our mental well-being.
</div>
</div>
<div class="dragger_container">
<div class="dragger"></div>
</div>
<a class="scrollUpBtn" href="#"></a> <a class="scrollDownBtn" href="#"></a> </div>
</article>
<script type="text/javascript" src="scripts/gallery.js"></script>
<script type="text/javascript" src="scripts/jquery.mCustomScrollbar.js"></script>
</body>
</html>