WCS_FirstProject/index.html at main · Liax/WCS_FirstProject · 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
<!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">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/accueil.css" rel="stylesheet">
    <link rel="shortcut icon" type="image/png" href="img/chickenIco.png"/>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <script type="text/javascript" src="script/starter.js"></script>
    <title>La ferme des Cocottes Parisiennes</title>
</head>
<body class="light">
  <div class="darkMode">Nuit</div>
  <header>
		<div w3-include-html="navbar.html"></div>
		<script>
			includeHTML();
		</script>
  </header>
  <section class="fullWidthHomeBG">
    <div class="fullWidthHome">
      <h1><span>La ferme</span><br> des Cocottes Parisiennes</h1>
    </div>
  </section>
  <section class="actualitesHome centred">
    <h2>Actualités</h2>
    <div class="actualiteHome">
      <div class="gallery">
        <div class="gallery-container">
          <div class="gallery-item gallery-item-1" data-index="1">
            <img src="https://media.giphy.com/media/BlEfRAkBfEkHS/giphy.gif"><h3>Titre</h3>
          </div>
          <div class="gallery-item gallery-item-2" data-index="2">
            <img  src="https://c.tenor.com/s3XRC53jcCsAAAAC/chicken-funny.gif">
            <h3>Titre</h3>
          </div>
          <div class="gallery-item gallery-item-3" data-index="3">
            <img  src="https://media.giphy.com/media/rwCX06Y5XpbLG/giphy-downsized-large.gif"><h3>Titre</h3>
          </div>
          <div class="gallery-item gallery-item-4" data-index="4">
          <img src="https://media.giphy.com/media/31SrNCMhxhGltYSzv0/giphy.gif" ><h3>Titre</h3>
        </div>
          <div class="gallery-item gallery-item-5" data-index="5">
            <img src="img/rooster.png">
            <h3>Titre</h3>
          </div>
        </div>
        <div class="gallery-controls"></div>
      </div>
  </div>
  </section>
  <section class="aProposHome centred">
    <h2>À propos de nous</h2>
    <div class="rondJaune"|><img src="img/Ellipse 1.png" alt=""/></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt lorem ut velit suscipit, nec condimentum est fringilla.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt lorem ut velit suscipit, nec condimentum est fringilla.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt lorem ut velit suscipit, nec condimentum est fringilla. </p>
    <div class="imgPictureHome"><img src="img/profilpicture.png"></div>
  </section>

<!------------------------------------  QUI SOMMES-NOUS -------------------------------------->
  <main class="who">
    <div class="philogreen">
      <section class="philo">
        <img src="img/logowho/pink.png" alt="sponsorship" width="400px">
        <h2>Notre philosophie</h2>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsum saepe laborum optio recusandae, nihil deserunt tempore iusto quod distinctio, pariatur et quaerat! Quasi deleniti mollitia et aliquam ratione, fugit quo!</p>
      </section>

      <section class="green">
        <img src="img/logowho/greengreen.png" alt="countryside" width="100px">
        <h2>Mettez vous au vert</h2>
        <p>Le temps de quelques heures.... Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis corporis magnam tenetur, consectetur deserunt provident voluptatem commodi error eos aperiam maxime excepturi non quo magni. Deserunt autem recusandae officia lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis corporis magnam tenetur, </p>
      </section>
    </div>

    <section class="farm">
      <h2>Activités de la ferme</h2>
          <article>
            <div class="farmer">
              <img src="img/logowho/farmer.png" alt="farmer" width="100px">
              <button class="btn" type="button" onclick="window.location.href='contact.html';">Fermier d'un jour</button>
            </div>
            <div class="chicken">
              <img src="img/logowho/chicken.png" alt="chicken" width="100px">
              <button class="btn" type="button"  onclick="window.location.href='residentes.html';">Rencontrez nos poules</button>
            </div>
            <div class="heart">
              <img src="img/logowho/heart.png" alt="sponsorship" width="100px">
              <button class="btn" type="button"  onclick="window.location.href='parrainages.html';">Devenez parrain</button>
            </div>
            <div class="bar">
              <img src="img/logowho/bar.png" alt="Bar à cocottes" width="100px">
              <button class="btn" type="button"  onclick="window.location.href='menu.html';">Bar à cocottes</button>
            </div>
            <div class="shop">
              <img src="img/logowho/shop.png" alt="Shop" width="100px">
              <button class="btn" type="button"  onclick="window.location.href='boutique.html';">La boutique</button>
            </div>
          </article>
    </section>
  </main>
<!-----------------------------------  FIN QUI SOMMES-NOUS ------------------------------------->
  <div w3-include-html="footer.html"></div>

	<script>includeHTML();</script>
  <script type="text/javascript" src="script/actualites.js"></script>
  <script src="script/darkMode.js"></script>

</body>
</html>