FishEye/index.html at main · imane-R/FishEye · 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
<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link href="https://fonts.googleapis.com/css?family=DM+Sans" rel="stylesheet" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/8730c06133.js" crossorigin="anonymous"></script>
    <link rel="icon" type="image/svg" href="./images/favicon.svg" />
    <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=DM+Sans&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="build/css/style.css">
    <title>FishEye</title>
</head>

<body>
    <header class="header" role="banner">
        <!--Bouton caché apparaissant au scroll-->
        <a id="header_scroll" aria-label="Passer au contenu" role="link" href="#" tabindex="0">Passer au contenu</a>
        <a class="header_logo" href="index.html">
            <img src="./images/logo.svg" role="image link" alt="Fisheye Home page">
        </a>
        <!--Filtres des spécialités des photographes-->
        <nav aria-label="photographer categories" class="header_filter" role="links">
            <ul class="tag_list">
                <li>
                    <span class="sr_only">tag</span>
                    <a class="tag_link" href="#" data-tag="portrait">#portrait</a>
                </li>

                <li>
                    <span class="sr_only">tag</span>
                    <a class="tag_link" href="#" data-tag="event">#events</a>
                </li>

                <li>
                    <span class="sr_only">tag</span>
                    <a class="tag_link" href="#" data-tag="travel">#travel</a>
                </li>

                <li>
                    <span class="sr_only">tag</span>
                    <a class="tag_link" href="#" data-tag="animal">#animals</a>
                </li>

                <li>
                    <span class="sr_only">tag</span>
                    <a  class="tag_link" href="#" data-tag="sport">#sport</a>
                </li>

                <li>
                    <span class="sr_only">tag</span>
                    <a class="tag_link" href="#" data-tag="architecture">#architecture</a>
                </li>

                <li>
                    <span class="sr_only">tag</span>
                    <a class="tag_link" href="#" data-tag="art">#art</a>
                </li>

                <li>
                    <span class="sr_only">tag</span>
                    <a class="tag_link" href="#" data-tag="fashion">#fashion</a>
                </li>
            </ul>
        </nav>
    </header>
    <main>
        <!--Titre principal positionné à dans le header à droite-->
        <h1 id="main_title" role="header">Nos photographes</h1>

        <!--Description des photographes-->
        <div id="photographes_container">

        </div>
    </main>
    <script src="./javascript/index.js"></script>
</body>

</html>