perfumeWebsite/index.html at master · kivelas/perfumeWebsite · 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
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
156
157
158
<!DOCTYPE html>

<head>
    <meta charset='UTF-8'>
    <title>Perfumes</title>
    <link rel="stylesheet" href="./styles.css">
</head>

<body>
    <div class="header">
        <h1>Perfumes</h1>
    </div>
    <div class="navup" id="navup">
        <a class="active" href="./index.html">Home</a>
        <a href="./photos.html">Photos</a>
        <a href="./contact.html">Contact</a>
    </div>

    <div id="welcomecontainer">
      <div id="welcomephotocontainer">
        <a target="_blank" href="images/shalimar_draw.jpg">
          <img src="images/shalimar_draw.jpg" id="welcomephoto" alt="Guerlain Shalimar">
        </a>
      </div>
      <div class="welcome">
      <div id="welcometext">
      <h2>Welcome!</h2>
        <p>
        This site is for anyone interested in perfumes (just like me).
        Below you can find some fragrance families presented with my
        favourite perfume of each family. If you navigate to <a href="./photos.html">Photos</a>
        you will find some pictures I've taken from my own perfumes.
        The <a href="./contact.html">contact</a> page is still under construction, so unfortunately you
        won't be able to contact me just yet via that form. In the bottom of
        this page you can find a YouTube-video of Chanel's nose Olivier Polge.
        </p>
      </div>
    </div>
  </div>

    <div class="indexcontent">
        <h2>Fragrance families</h2><br><br>
        <div class="tab">
            <button class="tablinks" onclick="openFragrance(event, 'Citrus')" id="defaultOpen">Citrus</button>
            <button class="tablinks" onclick="openFragrance(event, 'Floral')">Floral</button>
            <button class="tablinks" onclick="openFragrance(event, 'Fougere')">Fougere</button>
            <button class="tablinks" onclick="openFragrance(event, 'Chypre')">Chypre</button>
            <button class="tablinks" onclick="openFragrance(event, 'Woody')">Woody</button>
            <button class="tablinks" onclick="openFragrance(event, 'Amber')">Amber</button>
            <button class="tablinks" onclick="openFragrance(event, 'Leather')">Leather</button>
          </div>

          <div id="Citrus" class="tabcontent">
            <h3>Citrus</h3>
            <p>The Citrus family (also called hesperide) comprises essential oils obtained from the zest of citrus fruits such as orange, bergamot: citrus, floral chypre citrus, spicy citrus, woody citrus, aromatic citrus.</p>
            <br>
            <a href="https://www.parfumo.net/Perfumes/Guerlain/Aqua_Allegoria_Pamplelune" target="_blank"><img src="images/pamplelune.png" width="100px" height="auto"></a>
            <p>My favourite citrus fragrance is <a href="https://www.parfumo.net/Perfumes/Guerlain/Aqua_Allegoria_Pamplelune" target="_blank">Guerlain Aqua Allegoria Pamplelune</a>.</p>
          </div>

          <div id="Floral" class="tabcontent">
            <h3>Floral</h3>
            <p>The Floral family is predominantly composed of flower fragrances, e.g. rose, tuberose etc. soliflore (also called single-fragrance floral), lavender, floral bouquet, floral green, floral aldehydic, floral woody, floral fruity woody.</p>
            <br>
            <a href="https://www.parfumo.net/Perfumes/Maison_Margiela/Replica_Flower_Market" target="_blank"><img src="images/flowermarket.png" width="100px" height="auto"></a>
            <p>My favourite floral fragrance is <a href="https://www.parfumo.net/Perfumes/Maison_Margiela/Replica_Flower_Market" target="_blank">Maison Margiela Replica Flower Market</a>.</p>
          </div>

          <div id="Fougere" class="tabcontent">
            <h3>Fougere</h3>
            <p>	The Fougère (or fern) family, despite its name, does not reproduce the smell of ferns, but features blends of woody and lavender notes. Fougère, soft amber fougère, floral amber fougère, spicy fougère, aromatic fougère.</p>
            <br>
            <a href="https://www.parfumo.net/Perfumes/Chanel/Les_Exclusifs_de_Chanel__Boy" target="_blank"><img src="images/boy.png" width="100px" height="auto"></a>
            <p>My favourite fougere fragrance is <a href="https://www.parfumo.net/Perfumes/Chanel/Les_Exclusifs_de_Chanel__Boy" target="_blank">Chanel Boy</a>.</p>
          </div>

          <div id="Chypre" class="tabcontent">
            <h3>Chypre</h3>
            <p>The Chypre family, named after the perfume Chypre created in 1917 by François Coty, is comprised of oak moss fragrances blended with floral or fruity notes. Chypre, floral chypre, floral aldehydic chypre, fruity chypre, green chypre, aromatic chypre, leather chypre.</p>
            <br>
            <a href="https://www.parfumo.net/Perfumes/Dior/Miss_Dior_Eau_de_Toilette_Originale" target="_blank"><img src="images/missdior.png" width="100px" height="auto"></a>
            <p>My favourite chypre fragrance is <a href="https://www.parfumo.net/Perfumes/Dior/Miss_Dior_Eau_de_Toilette_Originale" target="_blank">Dior Miss Dior Originale</a>.</p>
          </div>

          <div id="Woody" class="tabcontent">
            <h3>Woody</h3>
            <p>	The Woody family is more suited to men (according to <a href="https://www.fragonard.com/en/perfume-families">Fragonard</a>, but I disagree!) and contains sandalwood, cedar, patchouli and vetiver. Woody, woody citrus coniferous, woody aromatic, woody spicy, woody spicy leather, woody amber.</p>
            <br>
            <a href="https://www.parfumo.net/Perfumes/Chanel/Les_Exclusifs_de_Chanel__Bois_des_Iles_Eau_de_Parfum" target="_blank"><img src="images/bois.png" width="100px" height="auto"></a>
            <p>My favourite woody fragrance is <a href="https://www.parfumo.net/Perfumes/Chanel/Les_Exclusifs_de_Chanel__Bois_des_Iles_Eau_de_Parfum" target="_blank">Chanel Bois des Iles</a>.</p>
          </div>

          <div id="Amber" class="tabcontent">
            <h3>Amber</h3>
            <p>The Amber (or oriental) family is warm and powdery and often has vanilla accents. Floral woody amber, floral spicy amber, soft amber, citrus amber, floral semi-amber.</p>
            <br>
            <a href="https://www.parfumo.net/Perfumes/Yves_Rocher/Ispahan_Eau_de_Toilette" target="_blank"><img src="images/ispahan.png" width="100px" height="auto"></a>
            <p>My favourite oriental fragrance is <a href="https://www.parfumo.net/Perfumes/Yves_Rocher/Ispahan_Eau_de_Toilette" target="_blank">Yves Rocher Ispahan</a>.</p>
          </div>

          <div id="Leather" class="tabcontent">
            <h3>Leather</h3>
            <p>The Leather family is the most masculine and evokes the smells of tobacco, smoke and leather. Leather, floral leather, tobacco leather.</p>
            <br>
            <a href="https://www.parfumo.net/Perfumes/Lidl/N1_Eau_de_Grill_pour_Homme" target="_blank"><img src="images/grill.png" width="100px" height="auto"></a>
            <p>My favourite leather fragrance is <a href="https://www.parfumo.net/Perfumes/Lidl/N1_Eau_de_Grill_pour_Homme" target="_blank">Lidl No1 Eau de Grill pour Homme</a> by Max Perttula.</p>
          </div>
    </div>

    <div class="video">
        <p>The persons who create new fragrances are called noses.
            Here is a short film telling about the nose of Chanel perfumes - Olivier Polge.</p>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/cRmQ8T7Vpm4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>

    <footer>
        <p>Made by S. Kivelä  ||  Scent families from <a href="https://www.fragonard.com/en/perfume-families" target="_blank">Fragonard</a></p>
        <div class="footer">
            <a href="./index.html">Home</a>
            <a href="./photos.html">Photos</a>
            <a href="./contact.html">Contact</a>
        </div>
    </footer>
</body>

<script>
    function openFragrance(evt, fragranceName) {
      var i, tabcontent, tablinks;
      tabcontent = document.getElementsByClassName("tabcontent");
      for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
      }
      tablinks = document.getElementsByClassName("tablinks");
      for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
      }
      document.getElementById(fragranceName).style.display = "block";
      evt.currentTarget.className += " active";
    }

    // Get the element with id="defaultOpen" and click on it
    document.getElementById("defaultOpen").click();

    window.onscroll = function() {myFunction()};

    var navbar = document.getElementById("navup");
    var sticky = navup.offsetTop;

    function myFunction() {
        if (window.pageYOffset >= sticky) {
            navup.classList.add("sticky")
        } else {
            navup.classList.remove("sticky");
        }
    }
    </script>

</html>