-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathproduct.html
88 lines (75 loc) · 5.58 KB
/
product.html
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
<!DOCTYPE html>
<html lang="fr">
<head>
<!-- Meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Polices d'écriture et icônes -->
<script src="https://kit.fontawesome.com/f463affa35.js" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,300;0,400;0,500;0,600;1,200;1,300;1,400;1,500;1,600&display=swap" rel="stylesheet">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
<!-- Bootstrap et feuille de style CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css"/>
<!-- JavaScript -->
<script defer src="js/product.js"></script>
<title>Orinoco</title>
</head>
<body>
<main>
<!-- Header : barre de navigation -->
<header class="container-fluid p-0 bg-pink">
<nav class="navbar navbar-expand-lg navbar-light">
<img class="img-fluid" src="images/logoOrinocoM.png" alt="logo du site Orinoco">
<button class="navbar-toggler justify-content-center" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link p-4" href="index.html">Accueil<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link p-4" href="cart.html">Panier</a>
</li>
</ul>
</div>
</nav>
</header>
<!-- Section : affichage du produit sélectionné -->
<section class="container-fluid container-lg mt-5 mb-5 pt-5 pb-4 productContainer">
<div class="row" id="product">
</div>
<div class="row justify-content-center mt-lg-5 p-5 addCart">
<button type="button" id="addToCart" class="addToCart btn bg-pink p-2 btn-outline-dark" data-toggle="modal" data-target="#exampleModal">
Ajouter au panier
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-cart-plus" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l1.313 7h8.17l1.313-7H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm7 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
<path fill-rule="evenodd" d="M8.5 5a.5.5 0 0 1 .5.5V7h1.5a.5.5 0 0 1 0 1H9v1.5a.5.5 0 0 1-1 0V8H6.5a.5.5 0 0 1 0-1H8V5.5a.5.5 0 0 1 .5-.5z"/>
</svg>
</button>
</div>
</section>
</main>
<!-- Footer : médias sociaux et informations diverses -->
<footer class="footer">
<div class="container-fluid bg-pink">
<div class="text-center p-3">
<a class="col text-dark" href="https://twitter.com/" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
<a class="col text-dark" href="https://fr-fr.facebook.com/" aria-label="Facebook"><i class="fab fa-facebook-f "></i></a>
<a class="col text-dark" href="https://www.instagram.com/" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
</div>
<div class="row text-center p-4">
<a class="col-sm-12 col-xl text-dark" href="#">A propos</a>
<a class="col-sm-12 col-xl text-dark" href="#">Mentions légales</a>
<a class="col-sm-12 col-xl text-dark" href="#">Conditions générales de vente</a>
<a class="col-sm-12 col-xl text-dark" href="mailto:[email protected]">Contact</a>
</div>
</div>
</footer>
<!-- Scripts Bootstrap -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>