Menu_responsive_002/index.html at main · franckdun/Menu_responsive_002 · 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
<!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">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
        integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <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=Arapey&family=Inria+Serif&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="assets/style.css">
</head>

<body>
    <header>
        <nav>
            <div class="toggle">
                <i class="fas fa-bars ouvrir"></i>
                <i class="fas fa-times fermer"></i>
            </div>
            <div class="menu">
                <div class="menu_left">
                    <div class="menu_left_inner">
                        <div class="menu_left_inner_item">
                            <a href="#">Home <span class="menu_left_inner_item_small">#01</span></a>
                        </div>
                        <div class="menu_left_inner_item">
                            <a href="#">About <span class="menu_left_inner_item_small">#02</span></a>
                        </div>
                        <div class="menu_left_inner_item">
                            <a href="#">Products <span class="menu_left_inner_item_small">#03</span></a>
                        </div>
                        <div class="menu_left_inner_item">
                            <a href="#">Contact <span class="menu_left_inner_item_small">#04</span></a>
                        </div>
                    </div>
                </div>
                <div class="menu_right">
                    <div class="menu_right_inner">
                        <div class="menu_right_inner_item">
                            <div class="menu_right_inner_item_titre">
                                Contact
                            </div>
                            <ul>
                                <li>
                                    <a href="mailto:scorven7@gmail.com">contact@website.com</a>
                                </li>
                            </ul>
                        </div>
                        <div class="menu_right_inner_item">
                            <div class="menu_right_inner_item_titre">
                                Socials
                            </div>
                            <ul>
                                <li>
                                    <a href="#">Facebook</a>
                                </li>
                                <li>
                                    <a href="#">Instagram</a>
                                </li>
                                <li>
                                    <a href="#">Youtube</a>
                                </li>
                                <li>
                                    <a href="#">Twitter</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="sep"></div>
                <div class="sep_icon">#128BPM</div>
            </div>
        </nav>
    </header>
    <section class="hero">

    </section>

    <!-- <i class="fa-solid fa-xmark"></i>
    <i class="fa-solid fa-bars"></i> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/gsap.min.js"
        integrity="sha512-2fk3Q4NXPYAqIha0glLZ2nluueK43aNoxvijPf53+DgL7UW9mkN+uXc1aEmnZdkkZVvtJZltpRt+JqTWc3TS3Q=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.3/gsap.min.js"
        integrity="sha512-6zTDRWNxo8vI6JZYDCwhrJpg5icK3P4HNnW3czsO5Scb3lAoPDam+/wF3eog4hxcl0h44d0XlIcFkuoSaWHQ2g=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script> -->
    <Script src="assets/app.js"></Script>
</body>

</html>