finalProjectWebDev/story3.html at main · fmaroli/finalProjectWebDev · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/jpg" sizes="16x16" href="resources/favicon.png">
    <link rel="stylesheet" href="styles/styles.css">
    <link rel="stylesheet" href="styles/grid.css">
    <link rel="stylesheet" href="styles/story.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Alice&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Lustria&display=swap" rel="stylesheet">
    <title>Wine Life</title>
</head>
<!--
    ********
    * BODY *
    ********
    * Header and Nav bar are contained in the body
 -->
<body>
    <header>
        <div id="banner" alt="Page banner">
            <img src="resources/logo.svg" alt="Wine Life - for wine lovers">
        </div>
    </header>
    <nav>
        <div id="allNavItems">
            <div id="mainMenu">
                <a class="navItems" href="/">HOME ▼</a>
                <ul id="subMenu">
                    <li><a href="/story2.html">Wine-making</a></li>
                    <li><a href="/story1.html">Grape-growing</a></li>
                </ul>
            </div>
            <a class="navItems" href="/news.html">NEWS</a>
            <a class="navItems" href="/aboutus.html">ABOUT US</a>
        </div>
    </nav>
    <div id="breadcrumbs">
        <a href="/">/Home/</a>
    </div>
    <!--
    ********
    * MAIN *
    ********
    -->
    <div class="wrapperStory">
        <div class="headline">
            <div class="title">
                <h1>Clos de Vougeot: the largest walled vineyard in Burgundy</h1>
            </div>
            <div class="subtitle">
                <p>Clos de Vougeot is considered one of the largest Grand Cru vineyards in Burgundy</p>
            </div>
        </div>
        <div class="storyBody">
            <img class="heroStory" src="/resources/story3.png" alt="Clo du Vougeot with the old Chateau on the back">
            <div class="imgCredit">
                Clos de Vougeot - walled vineyard
            </div>
            <div class="setSize">
                <img class="sfont" src="/resources/smallfont.png" alt="Small font">
                <img class="lfont" src="/resources/largefont.png" alt="Large font">
            </div>
            <div class="storyArticle">
                <p class="parag">Clos, the famous walled vineyards of Burgundy, are worshiped. Still in the Middle Ages, the monks who settled in the region began to discover which lands produced the best wines and, to delimit some, they built small stone walls. Thus, the first Clos appeared.</p>
                <p class="parag">Clos de Vougeot is one of the largest Grand Cru vineyards in Burgundy, along with Corton and Echézeaux, covering 50 hectares. With such an area, one of its particularities is having a huge number of owners (more than 80). Most of them have about 0.2 hectare of land. Altogether, the vineyard produces about 17 thousand cases of wine and, because it is so vast and has so many producers, the wines also tend to be very different</p>
                <div class="storyHighlight">
                    The Château du Clos de Vougeot was erected in the Renaissance, around 1551
                </div>
                <p class="parag">The building that today attracts thousands of tourists and is located in the northwest part of the vineyard, the Château de Clos de Vougeot, was erected at the time of the Renaissance, around 1551, and, for years, received distinguished visitors, such as King Louis XIV, that would have come to be treated when his private doctor indicated him wines from Côtes de Nuits.
                The Cistercian order remained the sole owner of the vineyard for seven centuries, until 1789, when, during the French Revolution, the place was taken as a “national asset”. Interestingly, however, instead of dividing it as it did with most church land, Clos de Vougeot was sold as a single installment by revolutionaries</p>
                <p class="parag">With such an area, Clos de Vougeot is one of the most heterogeneous vineyards in the region. The soil structure is complex and variable depending on the location. The best parts are said to be higher up, close to the Château and the border with the Grand Crus de Grands chézeaux and Musigny, where the soils are stony and limestone.</p>
                <p class="parag">In the middle part, the soil is already a mixture of limestone and clay, with less pebbles. The lower part, in turn, has more alluvial soils with worse drainage. Some say, however, that the vineyard has at least six different soil types.</p>
                <hr>
                <div class="readMore">
                    <h1>MORE STORIES</h1>
                    <div class="readMoreGrid">
                        <div class="cards" id="grid-firstSug">
                            <a href="/story1.html"><img class="zoom-on-hover" src="resources/terroir.png" alt="Text about the Bourgogne region in France"></a>
                            <div class="card-overlay"></div>
                            <span class="button btn-read-more">READ MORE</span>
                            <p class="text-cards">Get to know more about the different types of terroir in Bourgogne</p>
                        </div>
                        <div class="cards" id="grid-secondSug">
                            <a href="/story2.html"><img class="zoom-on-hover" src="resources/wine-making-landing-small.png" alt="Guide step by step on how to make wine"></a>
                            <div class="card-overlay"></div>
                            <span class="button btn-read-more">READ MORE</span>
                            <p class="text-cards">The history of wine-making, from the origins to the most advanced methods of production</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<!--
    **********
    * FOOTER *
    **********
 -->
<footer>
    <div id="footerLeft" class="text">
        <ul>
            <li><a href="/story2.html">Wine-making</a></li>
            <li><a href="/story1.html">Grape-growing</a></li>
        </ul>
    </div>
    <div id="footerRigth" class="text">
        <p>Wine Life, the website made for wine lovers, from wine lovers, is a british magazine focused on curating for the people that are involved in the wine world, being final consumers or viticulturists.</p>
    </div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="/scripts/script.js"></script>
</html>