OhMyFood/index.html at main · MariaPetersen/OhMyFood · 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
<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>OhMyFood</title>
    <script src="https://kit.fontawesome.com/d2356a7c9a.js" crossorigin="anonymous"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,500;1,300;1,400;1,500&family=Shrikhand&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/prefixed/style.css">
</head>

<body>
    <div class="loadingSpinner"></div>

    <div class="pageBody">
        <header class="header">
            <img src="./images/logo/ohmyfood.png" alt="OhMyFood logo" class="header__logo">
        </header>

        <div class="localisation">
            <i class="fa-solid fa-location-dot localisation__icon"></i>
            <p class="localisation__town">Paris, Belleville</p>
        </div>
        <div class="pageTop">
            <h2 class="title title--center">Réservez le menu qui vous convient</h2>
            <div class="pageTop__description">Décrouvrez des restaurants d'exception, séléctionnés par nos soins</div>
            <a href="#section_restaurants" class="button">Explorer nos restaurants</a>
        </div>

        <section class="guide">
            <h2 class="title title--left">Fonctionnement</h2>

            <div class="guide__stage--all">
                <div class="guide__stage">
                    <div class="guide__stage__step">1</div>
                    <i class="fa-solid fa-mobile-screen-button guide__stage__icon"></i>
                    <p class="guide__stage__text">Choississez un restaurant</p>
                </div>
                <div class="guide__stage">
                    <div class="guide__stage__step">2</div>
                    <i class="fa-solid fa-list-ul guide__stage__icon"></i>
                    <p class="guide__stage__text">Composer votre menu</p>
                </div>
                <div class="guide__stage guide__stage--purple">
                    <div class="guide__stage__step">3</div>
                    <i class="fa-solid fa-store guide__stage__icon guide__stage__icon--purple"></i>
                    <p class="guide__stage__text">Dégustez au restaurant</p>
                </div>
            </div>
        </section>

        <section id="section_restaurants" class="restaurants">
            <h2 class="title title--left">Restaurants</h2>

            <div class="card--all">
                <a href="./menu_la-palette-du-gout.html" class="card">
                    <div class="card__image">
                        <img src="./images/restaurants/la_palette_du-gout.jpg" alt="La palette du goût"
                            class="card__image--img">
                        <p class="card__image__new">Nouveau</p>
                    </div>
                    <div class="card__lower">
                        <div class="card__lower__text">
                            <p class="card__lower__text--name">La palette du goût</p>
                            <p class="card__lower__text--place">Ménilmontant</p>
                        </div>
                        <i class="fa-regular fa-heart card__lower__like like"><i
                                class="fa-solid fa-heart card__lower__like like--solid"></i></i>
                    </div>
                </a>
                <a href="./menu_la-note-enchantee.html" class="card">
                    <div class="card__image">
                        <img src="./images/restaurants/la_note_enchantee.jpg" alt="La note enchantée"
                            class="card__image--img">
                        <p class="card__image__new">Nouveau</p>
                    </div>
                    <div class="card__lower">
                        <div class="card__lower__text">
                            <p class="card__lower__text--name">La note enchantée</p>
                            <p class="card__lower__text--place">Charonne</p>
                        </div>
                        <i class="fa-regular fa-heart card__lower__like like"><i
                                class="fa-solid fa-heart card__lower__like like--solid"></i></i>
                    </div>
                </a>
                <a href="./menu_a-la-francaise.html" class="card">
                    <div class="card__image">
                        <img src="./images/restaurants/a_la_francaise.jpg" alt="À la française"
                            class="card__image--img">
                    </div>
                    <div class="card__lower">
                        <div class="card__lower__text">
                            <p class="card__lower__text--name">À la française</p>
                            <p class="card__lower__text--place">Cité Rouge</p>
                        </div>
                        <i class="fa-regular fa-heart card__lower__like like"><i
                                class="fa-solid fa-heart card__lower__like like--solid"></i></i>
                    </div>
                </a>
                <a href="./menu_le-delice-des-sens.html" class="card">
                    <div class="card__image">
                        <img src="./images/restaurants/le_delice_des_sens.jpg" alt="Le délice des sens"
                            class="card__image--img">
                    </div>
                    <div class="card__lower">
                        <div class="card__lower__text">
                            <p class="card__lower__text--name">Le délice des sens</p>
                            <p class="card__lower__text--place">Folie-Méricourt</p>
                        </div>
                        <i class="fa-regular fa-heart card__lower__like like"><i
                                class="fa-solid fa-heart card__lower__like like--solid"></i></i>
                    </div>
                </a>
            </div>
        </section>

        <footer class="footer">
            <h1 class="footer__title">ohmyfood</h1>
            <ul class="footer__menu">
                <li class="footer__menu__link"><a href="#" class="footer__menu__link"><i
                            class="fa-solid fa-utensils footer__menu__link--icon"></i>Proposer un restaurant</a></li>
                <li class="footer__menu__link"><a href="#" class="footer__menu__link"><i
                            class="fa-solid fa-handshake-angle footer__menu__link--icon"></i>Devenir partenaire</a></li>
                <li class="footer__menu__link"><a href="#" class="footer__menu__link">Mentions légales</a></li>
                <li class="footer__menu__link"><a href="mailto:ohmyfood@gmail.com"
                        class="footer__menu__link">Contact</a></li>
            </ul>

        </footer>
    </div>
</body>

</html>