maison21/index.html at master · ericdiamonika/maison21 · 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
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"/>
    <title>Maison 21 G</title>
    <link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">
    <script href="js/main.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/fullpage.css"/>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/nyanpasu.css">
</head>
<body>
<div id="fullpage">
    <div class="section" id="section0">
        <nav class="megamenu" data-spy="affix">
            <div id="navbar">
                <img src="assets/img/logo.png" alt="logo">
            </div>
        </nav>
        <video poster="assets/img/smoke.png" data-autoplay loop muted playsinline id="myVideo">
            <source src="assets/video/background.mp4" type="video/mp4">
        </video>
        <div class="layer">
            <h1>Parfum 21G</h1>
            <p class="title">Créer votre parfum n'aura jamais été aussi simple !</p>
            <div class="button">
                <a data-scroll href="#section5"><p>Me tenir au courant</p></a>
            </div>
        </div>
        <a href="#section1"><img src="assets/img/arrow.svg" alt="" class="arrow-scroll"></a>
    </div>
    <div class="section" id="section1">
        <div class="layer1">
            <div class="text">
                <h2>PRESENTATION</h2>
                <h3>le concept</h3>
                <p class="hidden-mob">La Maison 21 G souhaite l’émergence des désirs les plus enfouis. Elle partage
                    l’expertise dans le
                    champ de la conception et création de parfums.
                    <br> <br>
                    A travers une signature créer grâce à un questionnaire de personnalité, vous avez également un
                    profil olfactif pour avoir votre parfum.</p>
            </div>
            <div class="image">
                <img src="assets/img/perfume.png" alt="parfum">
            </div>
        </div>
    </div>

    <div class="section" id="section2">
        <div class="layer1">
            <div class="image-bloc">
                <img src="assets/img/conv.png" alt="">
            </div>
            <div class="text">
                <h2>DÉCOUVREZ</h2>
                <h3>Votre profil olfactif</h3>
                <p class="hidden-mob">A travers un questionnaire d’une dizaine de question, nous allons pouvoir définir
                    votre profil olfactif et donc trouver le parfum qui est fait pour vous et vos besoins.</p>
            </div>
        </div>
    </div>
    <div class="section" id="section3">
        <div class="layer3">
            <div class="title">
                <h2>COMMENT ÇA MARCHE ?</h2>
                <h3>Instructions</h3>
                <div class="block left">
                    <div class="img">
                        <img src="assets/gif/computer.gif" alt="">
                    </div>
                    <div class="bloc-text-right">
                        <p class="gras">Composez votre parfum en ligne</p>
                        <p>composer votre parfum grâce à un questionnaire en ligne qui definira votre profil
                            olfactif.</p>
                    </div>
                </div>
                <div class="block right">
                    <div class="bloc-text-left">
                        <p class="gras">Passez commande et recevez votre pack</p>
                        <p>Recevez vos deux capsules de senteur avec la bouteille de parfum.</p>
                    </div>
                    <div class="img">
                        <img class="g" src="assets/gif/comp_2_1.gif" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="section" id="section33">
        <div class="layer3">
            <div class="block left">
                <div class="img">
                    <img class="g" src="assets/gif/comp_2.gif" alt="">
                </div>
                <div class="bloc-text-right">
                    <p class="gras">Assemblez les doses et c’est prêt !</p>
                    <p>Assembler le tout grâce au push. Le contenu des captusules se retrouvent dans la bouteille de
                        parfum.</p>
                </div>
            </div>
            <div class="block right">
                <div class="bloc-text-left">
                    <p class="gras">Renvoyez vos capsules</p>
                    <p>Une fois la bouteille terminée, vous pouvez nous renvoyer vos capsules.</p>
                </div>
                <div class="img">
                    <img src="assets/gif/enveloppe_bottle.gif" alt="">
                </div>
            </div>
        </div>
    </div>
    <div class="section" id="section4">
        <div class="title">
            <h2>VALEURS</h2>
            <h3>Pourquoi nous ?</h3>
        </div>
        <div class="block">
            <div class="bloc-text-left">
                <div class="img">
                    <img src="assets/img/save.png" alt="eco-responsable">
                </div>
                <div class="text">
                    <p class="gras">Eco-responsable</p>
                    <p>Ingrédients naturel et synthétique
                        aucun test sur les animaux</p>
                </div>
            </div>
            <div class="bloc-text-right">
                <div class="img">
                    <img src="assets/img/loupe.png" alt="eco-responsable">
                </div>
                <div class="text">
                    <p class="gras">Transparence sur les produits</p>
                    <p>Detail de la provenance du produit et comment il est fait </p>
                </div>
            </div>
        </div>
    </div>
    <div class="section" id="section5">
        <div class="layer5">
            <div class="bloc">
                <div class="title">
                    <h2>INFORMATIONS</h2>
                    <h3>Me tenir au courant</h3>
                </div>
                <div class="newsletter">
                    <input type="email" id="email" required placeholder="Votre adresse mail">
                    <button class="favorite" type="button">Valider</button>
                </div>
            </div>
            <div class="footer">
                <div class="social">
                    <a href="#"><img src="assets/img/fb.png" alt="facebook"></a>
                    <a href="#"><img src="assets/img/insta.png" alt="instagram"></a>
                    <a href="#"><img src="assets/img/twitter.png" alt="twitter"></a>
                    <a href="#"><img src="assets/img/pinter.png" alt="pinterest"></a>
                </div>
                <div class="text">
                    <p>Mentions légales</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="js/main.js"></script>
<script type="text/javascript" src="js/scrolloverflow.min.js"></script>
<script type="text/javascript" src="js/fullpage.min.js"></script>
<script>
    /* AOS.init({
         duration: 1200,
     })*/

    new fullpage('#fullpage', {
        //options here
        autoScrolling: false,
        parallax: false,
    });
</script>
</body>
</html>