FishEye/photographer.html at master · July-github/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
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html lang='fr'>
  <head>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <meta charset="utf-8">
    <link rel="icon" type="image/png" href="assets/favicon.png">
    <link href="https://fonts.googleapis.com/css?family=DM+Sans&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/dccdede72c.js" crossorigin="anonymous"></script>
    <title>Fisheye - photographe </title>
  </head>

  <body>
    <header role="banner">
      <a href='./index.html' class="logo">
      <img src="assets/images/logo.png" alt="FishEye Home page" />
      </a>
    </header>

    <main role="main" id="main">
      <section role="region" class="photograph-header" aria-label="Photograph informations">
        <button class="contact_button" aria-label="Contact me" id="display_modal_mark">Contactez-moi</button>
      </section>
      <section role="region" id="grid" aria-label="Photograph pictures and movies">
        <div id="pictures-sort">
          <div id="label">Trier par</div>
          <button id="dropdown-content" aria-label="Order by">
            <div role="listbox" aria-expanded="false" id="sort_options" aria-haspopup=”listbox”>
              <a role="option" class="list" id="Likes" href="#">Popularité</a>
              <a role="option" class="p-line dropbtn list" id="Date" href="#">Date</a>
              <a role="option" class="dropbtn list" id="Title" href="#">Titre</a>
              <i id="arrow" class="fa fa-angle-down" aria-hidden="true"></i>
            </div>
          </button>
        </div>
        <div class="picture-card-grid"></div>
        <div class="medias-likes">
          <div class="likes-total"></div>
          <div class="price"></div>
        </div>
      </section>
    </main>

    <div id="contact_modal" role="dialog" >
			<div class="modal">
				<header aria-labelledby="legend_modal">
          <h1 id="legend_modal"></h1>
          <a href="#" id="close_modal_mark"><img src="assets/icons/close.svg" alt="Close contact form"/></a>
        </header>
				<form>
					<div>
						<label for="firstname" id="firstname">Prénom</label>
						<input type="text" name="firstname" id="firstname_input" aria-labelledby="firstname"/>
					</div>
          <div>
						<label for="lastname" id="lastname">Nom</label>
						<input type="text" name="lastname" id="lastname_input" aria-labelledby="lastname"/>
					</div>
					<div id='mail' class="formData" >
						<label for="email" id="email">Email</label>
						<input type="email" name="email" id="email_input" aria-labelledby="email"/>
					</div>
					<div>
						<label for="message" id="message">Votre message</label>
						<textarea name="message" id="message_input" aria-labelledby="message"></textarea>
					</div>
          <button class="contact_button">Envoyer</button>
				</form>
			</div>
		</div>

    <div role="dialog" id="lightbox" aria-label="image close-up view">
      <div id="box_previous">
        <a href="#" id="previous" aria-label="previous image"><i class="fas fa-angle-left" ></i></a>
      </div>
      <div id="box"></div>
      <div id="box_next">
        <a href="#" id="close_lightbox"  aria-label="close dialog"><i class="fas fa-times"></i></a>
        <a href="#" role="button" id="next" aria-label="next image"><i class="fas fa-angle-right"></i></a>
      </div>
    </div>

    <script src="scripts/photographer.js" type="module"></script>
    <script src="scripts/factories/media.js" type="module"></script>
    <script src="scripts/template/pictureCard.js" type="module"></script>
    <script src="scripts/models/picture.js" type="module"></script>
    <script src="scripts/models/video.js" type="module"></script>
    <script src="scripts/utils/contactForm.js" type="module"></script>
    <script src="scripts/photographer_page/lightbox.js" type="module"></script>

  </body>
</html>