pupitre/index.html at master · Gervisdev/pupitre · 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
<!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="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

</head>
<body>
    <div class="container">
        <div class="wrapper">
            <div class="navbar">
                <div class="logo">
                   <img src="img/logo-normal.png" alt="">
                </div>

            </div>
            <div class="hero">
            <div class="images">
                <img class="pupitre0 active" src="img/pupitre1.png" alt="">
                <img  class="pupitre0" src="img/pupitre4.png" alt="">
            </div>
                <div class="content">
                    <h3>Pupitre</h3>
                    <h1>Pupitre 32 pouce</h1>
                    <p class="para">
                        Screen 32 pouces est borne tactile composée d’un large écran 32’’ (81cm) 16/9 professionnel haute-définition équipé de la technologie tactile capacitive et d’un pied en acier laqué noir idéalement orienté.


                    </p>
                    <button>Demandez votre devis</button>

                    <div class="contact">
                        <div class="social">
                        <a href="mailto:contact@rachabusinessgroup.com" class="social-icon social-icon--mail"><i class="fa-regular fa-envelope"></i></a>
                        <a href="tel:+2120689608840" class="social-icon social-icon--whatsapp"><i class="fa-brands fa-whatsapp"></i></a>
                        <a href="https://www.instagram.com/rachadigitale/" class="social-icon social-icon--instagram"><i class="fa-brands fa-instagram"></i></a>
                        <a href="https://web.facebook.com/rachabusinessgroup/?_rdc=1&_rdr" class="social-icon social-icon--facebook"><i class="fa-brands fa-facebook"></i></a>
                    </div>
                    </div>

                </div>

            </div>
        </div>
        <div class="left" onclick="prev()"> < </div>
        <div class="right" onclick="next()"> > </div>
    </div>

   <script>

   let pitre = document.querySelectorAll('.pupitre0');
   let index = 0;

   function next(){
     pitre[index].classList.remove('active');
     index = (index + 1) % pitre.length;
     pitre[index].classList.add('active');
   }
   function prev(){
     pitre[index].classList.remove('active');
     index = (index - 1 + pitre.length) % pitre.length;
     pitre[index].classList.add('active');
   }

   </script>
</body>
</html>