-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathJuventusBoutique.html
130 lines (107 loc) · 4.53 KB
/
JuventusBoutique.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
<!--This website is a result of university homework. It's Juventus Online Boutique with relative products, photos and videos.
There are links that navigates to the real boutique's site.
It's not an advertisement, just a simple university task about simple html coding-->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-7">
<!--Below is the region with the css rules-->
<style type="text/css">
/*#table model implements a table with Juventus products. Some attributes are changed.*/
#table {
color: black;
letter-spacing: 3px;
font-family: "Gill Sans", sans-serif;
font-weight: bold;
font-size: 20px;
border-spacing: 50px;
/*border-collapse property defines if table's border will be separate or part of the page. In our case they will be separate. */
border-collapse: separate;
background-color: white;
width: 100%;
}
/*#pageBottom model defines the region under the photo. It's a thin region with text "JOIN the black and white future today." */
#pageBottom{
color: black;
background-color: white;
width: 100%;
font-size: 200%;
word-spacing: 15px;
text-align: center;
}
/*This model defines text appearance. Text is provided from JavaScript code.*/
#javaScriptDemo{
color: white;
font-size: 100%;
text-align: center;
}
/*The below rules define attributes such as text colour, "hover colour" (when mouse cursor is over a product), "visited colour" (colour of text when it has been clicked at least one time), of the href links */
a {
color: black ;
}
a:visited {
color: black ;
}
a:hover {
color: grey ;
}
</style>
</head>
<!--Background colour is black, text colour is white. Black and white are Juventus colours-->
<body style="background-color: black">
<div>
<!--This image is Juventus new logo. It appears directly from the Internet due to src argument. The value of this argument
is image's path on the Internet rather than a path from a PC or a personal server. Dimensions are chosen to fit in screen
smoothly. -->
<p style="float: left;"><img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2017/01/18/11/juve-as-smart-object-1.jpg" alt = "juventus_Logo" height="200px" width="250px" border="1px"></p>
<!--Text inside h1, h2 tags appears next to Juventus logo. It's a title and a slogan. -->
<h1 style = "font-size:500%" >
<font color="white">
Juventus Online Boutique
</font>
</h1>
<h2 style = "font-size:250%">
<font color="white" >
When italian football meets italian style...
</font>
</h2>
</div>
<!--That division contains a table with boutique's product. It follows #table model.
If a product is clicked, user navigates to the relative product page. -->
<div>
<br>
<hr>
<table align = "center" id = "table">
<tbody>
<tr>
<td ><a href="https://store.juventus.com/en/143/0/juventus-t-shirts-and-polos">T-SHIRTS AND POLOS</a></td>
<td ><a href="https://store.juventus.com/en/145/0/juventus-sweatshirts-and-pants">SWEATSHIRTS AND PANTS</a></td>
<td><a href="https://store.juventus.com/en/146/0/juventus-jackets">JACKETS</a></td>
</tr>
<tr>
<td><a href="https://store.juventus.com/en/147/0/juventus-underwear-and-nightwear">UNDERWEAR AND NIGHTWEAR</a></td>
<td><a href="https://store.juventus.com/en/226/0/juventus-retro-jerseys">RETRO JERSEYS </a></td>
<td><a href="https://store.juventus.com/en/148/0/juventus-slippers-and-bathrobes">SLIPPERS AND BATHROBES</a></td>
</tr>
</tbody></table>
<hr>
</div>
<!--This image (Juventus stadium) fits in screen's width size. Once again in src argument there is a hyperlink from the Internet.-->
<div>
<p style="float: center;"><img src="http://www.vbchannel.it/wp-content/uploads/2017/06/juventus-stadium-4.jpg" height="400px" width="100%" border="1px"></p>
<br>
<!--This paragraph follows #pageBottom model. It has a href that refers to Juventus membership page.-->
<p id = "pageBottom">
<a href="http://www.juventus.com/en/memberships/">JOIN</a> The Black And White Future Today!
</p>
<!--This paragraph contains a video. Due to iframe argument, the video is displayed directly from YouTube-->
<p align="center">
<iframe style="float:inherit" src="https://www.youtube.com/embed/s26jlK8bUSY" width="560" height="315" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen>
</iframe>
</p>
</div>
<!--Code in this paragraph shows date and time of user's visit. -->
<p id="javaScriptDemo">
<script>
document.getElementById("javaScriptDemo").innerHTML = Date();
</script>
</p>
</body>
</html>