generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
135 lines (121 loc) · 6.27 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Etruria is a family run winery, situated in Tuscany, the hearth of the lands once known as Etruria">
<meta name="keywords" content="winery, etruria, tasting events, tuscany">
<meta name="author" content="Elisa Sacchelli">
<title>Etruria Winery</title>
<link rel="stylesheet" href="assets/css/style.css">
<script src="https://kit.fontawesome.com/1af258361d.js" crossorigin="anonymous" defer></script>
</head>
<body>
<!-- Start of header -->
<header>
<div class="header">
<div id="logo">
<h1>
<a href="#" aria-label="logo">Etruria</a>
</h1>
</div>
<!-- Navigation bar for medium - large screens -->
<div id="nav">
<ul class="large-screen">
<li><a href="index.html" aria-label="Go to the home page" class="current-page">Home</a></li>
<li><a href="wines.html" aria-label="Go to the wines page">Wines</a></li>
<li><a href="visit.html" aria-label="Go to the visit page">Visit</a></li>
</ul>
</div>
</div>
<!-- Navigation bar for small screens (dropdown)-->
<div>
<input type="checkbox" id="toggler" name="toggler">
<label for="toggler" class="toggle-menu small-screen">
<span class="open"><i class="fa-solid fa-bars"></i></span>
<span class="close"><i class="fa-solid fa-x"></i></span>
</label>
<nav class="collapsing-nav">
<ul>
<li><a href="index.html" aria-label="Go to the home page" class="current-page">Home</a></li>
<li class="sub-container"><a href="wines.html" aria-label="Go to the wines page">Wines</a>
<input type="checkbox" id="sub-toggler" name="sub-toggler">
<label for="sub-toggler" class="toggle-menu">▾</label>
<div id="submenu" class="collapsing-nav">
<ul>
<li><a href="wines.html#tudemis" aria-label="Go to Tudemis">Tudemis</a></li>
<li><a href="wines.html#etesiaca" aria-label="Go to Etesiaca">Etesiaca</a></li>
<li><a href="wines.html#apiana" aria-label="Go to the Apiana">Apiana</a></li>
</ul>
</div>
</li>
<li><a href="visit.html" aria-label="Go to the visit page">Visit</a></li>
</ul>
</nav>
</div>
</header>
<!-- End of header -->
<!-- Start of page content -->
<div id="about" class="content" aria-labelledby="family vineyard">
<div id="hero-image">
<div>
<h3 id="quote">
Great Wines<br>
from a Great Land</h3>
</div>
</div>
<!-- Section that needs to be reversed on mobile -->
<section id="family" class="reverse-wrap">
<div>
<img src="assets/images/family-members-portrait.jpg" alt="Picture of the three granchildren, now running the business">
</div>
<div class="text-content">
<h1>Our Family</h1>
<p><b>Etruria</b> was born out of the dream of <b>Bruno</b>, who inherited these lands from his grandparents in the <b>1966</b>.<br>
The art of winemaking was transmitted through the generations, to his chidren first and grandchildren then.<br>
<b>Elia</b>, <b>Paolo</b> and <b>Andrea</b> run the family business now, and they dedicate all their passion and efforts to keep alive the traditions, which Bruno had thought them.</p>
</div>
</section>
<section id="vineyard">
<div class="text-content">
<h1>The vineyard</h1>
<p>The vineyard is situated in Tuscany, the hearth of the territory once called <b>Etruria</b>,
and the cultivated area extends on a surface of 2 hectars. <br>
Planted with <b>Sangiovese</b>, <b>Malvasia Nera</b>, <b>Vermentino</b> and <b>Moscato</b>, the composition of the terroir
allows the grapes to maintain their unique variety of flavours, fruit of the great history of these lands.
</p>
</div>
<div>
<img src="assets/images/vineyard.jpg" alt="Overiview of the vineyard">
</div>
</section>
</div>
<!-- End of page content -->
<!-- Footer -->
<footer aria-labelledby="map contact social">
<div id="map">
<img src="assets/images/tuscany-map.jpg" alt="Map of tuscany where you can find us.">
</div>
<div id="contact">
<ul>
<li><a href="mailto:etruriawinery@info.com" aria-label="Click to send us an email">etruriawinery@info.com</a></li>
<li>+39 123 456 7890</li>
<li>
<a href="https://goo.gl/maps/TK8QmxowXtmmb4sS8" target="_blank" aria-label="Click to open google maps (opens in a new window)">
Via della vigna, 34, Siena<br>
Toscana, Italia
</a>
</li>
</ul>
</div>
<div id="social">
<ul>
<li><a href="https://www.linkedin.com/" aria-label="Find us on Linkedin (opens in new tab)" rel="noopener" target="linkedin"><i class="fa-brands fa-linkedin"></i></a></li>
<li><a href="https://www.instagram.com/" aria-label="Find us on Instagram (opens in new tab)" rel="noopener" target="instagram"><i class="fa-brands fa-instagram"></i></a></li>
<li><a href="https://www.facebook.com/" aria-label="Find us on Facebook (opens in new tab)" rel="noopener" target="facebook"><i class="fa-brands fa-square-facebook"></i></a></li>
</ul>
</div>
</footer>
</body>
</html>