-
Notifications
You must be signed in to change notification settings - Fork 0
/
product-detail.html
137 lines (130 loc) · 8.17 KB
/
product-detail.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
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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Detalhes do Produto</title>
<!--Bootstrap-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!--Fontes-->
<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=Open+Sans:wght@300;400;700&display=swap" rel="stylesheet">
<!--Font Awesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer">
<!--CSS-->
<link rel="stylesheet" type="text/css" href="/css/style.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="index.html">
<img src="./assets/images/logo-boju.png" width="100%" height="40" alt="Logo Boju">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Alterna navegação">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-item nav-link" href="#">Planner</a>
</li>
<li class="nav-item">
<a class="nav-item nav-link" href="#">Papelaria</a>
</li>
<li class="nav-item">
<a class="nav-item nav-link" href="#">Promoção</a>
</li>
<li class="nav-item">
<a class="nav-item nav-link" href="about-us.html">Quem Somos</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Pesquisar">
<button class="btn btn-outline my-2 my-sm-0" type="submit">Pesquisar</button>
</form>
</div>
</nav>
</header>
<section>
<div class="container px-4 px-lg-5 my-5">
<div class="row gx-4 gx-lg-5 align-items-center">
<!--Carrossel-->
<div class="col-md-6">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="card-img-top mb-5 mb-md-0" src="./assets/images/produto-1-1.jpg" alt="...">
</div>
<div class="carousel-item">
<img class="card-img-top mb-5 mb-md-0" src="./assets/images/produto-1-2.jpg" alt="...">
</div>
<div class="carousel-item">
<img class="card-img-top mb-5 mb-md-0" src="./assets/images/produto-1-3.jpg" alt="...">
</div>
<div class="carousel-item">
<img class="card-img-top mb-5 mb-md-0" src="./assets/images/produto-1-4.jpg" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Anterior</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Próximo</span>
</a>
</div>
</div>
<!--Descrição do produto-->
<div class="col-md-6">
<h1 class="display-5">Bloco caderno – Bonjour</h1>
<div class="fs-5 mb-5">
<span class="price">R$14,90</span>
</div>
<p class="description">Mussum Ipsum, cacilds vidis litro abertis. Pra lá , depois divoltis porris, paradis. Suco de cevadiss deixa as pessoas mais interessantis. Si u mundo tá muito paradis? Toma um mé que o mundo vai girarzis! Vehicula non. Ut sed ex eros. Vivamus sit amet nibh non tellus tristique interdum.
<br><br>
Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis. Mais vale um bebadis conhecidiss, que um alcoolatra anonimis. Nullam volutpat risus nec leo commodo, ut interdum diam laoreet. Sed non consequat odio. A ordem dos tratores não altera o pão duris.</p>
<div class="d-flex mb-5">
<input class="form-control text-center mr-2" id="inputQuantity" type="num" value="1" style="max-width: 3rem" />
<button class="btn btn-buy" type="button">Comprar
</button>
</div>
<div class="payments align-items-center">
<i class="fab fa-cc-visa fa-2x mr-2"></i>
<i class="fab fa-cc-mastercard fa-2x mr-2"></i>
<i class="fab fa-cc-amex fa-2x mr-2"></i>
<i class="fab fa-paypal fa-2x mr-2"></i>
</div>
</div>
</div>
</div>
</section>
<section class="py-5 bg-light">
<div class="container px-4 px-lg-5">
<h2 class="title mb-4">Detalhes</h2>
<ul class="description">
<li>Mussum Ipsum, cacilds vidis litro abertis
</li>
<li>Pra lá , depois divoltis porris, paradis
</li>
<li>Suco de cevadiss deixa as pessoas mais interessantis
</li>
<li>Si u mundo tá muito paradis? Toma um mé que o mundo vai girarzis
</li>
<li>Vivamus sit amet nibh non tellus tristique interdum
</li>
</ul>
</div>
</section>
<footer>
© 2021 Boju. Todos os direitos reservados.
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>