-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpbdoproduto.html
98 lines (97 loc) · 3.48 KB
/
pbdoproduto.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
<!DOCTYPE html>
<html lang="pt-br" >
<head>
<meta charset="UTF-8">
<title>CodePen - Product</title>
<link rel='stylesheet' href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'>
<link rel="stylesheet" href="./styleproduto.css">
</head>
<body>
<!-- partial:index.partial.html -->
<nav class="flex-nav">
<div class="container">
<div class="grid menu">
<div class="column-xs-8 column-md-6">
<p id="highlight">ShopShop</p>
</div>
<div class="column-xs-4 column-md-6">
<a href="#" class="toggle-nav">Menu <i class="ion-navicon-round"></i></a>
<ul>
<li class="nav-item"><a href="#">Products</a></li>
<li class="nav-item"><a href="#">About</a></li>
<li class="nav-item"><a href="#">My Account</a></li>
<li class="nav-item"><a href="#">Cart (0)</a></li>
</ul>
</div>
</div>
</div>
</nav>
<main>
<div class="container">
<div class="grid second-nav">
<div class="column-xs-12">
<nav>
<ol class="breadcrumb-list">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Household Plants</a></li>
<li class="breadcrumb-item active">Bonsai</li>
</ol>
</nav>
</div>
</div>
<div class="grid product">
<div class="column-xs-12 column-md-7">
<div class="product-gallery">
<div class="product-image">
<img class="active" src="https://source.unsplash.com/W1yjvf5idqA">
</div>
<ul class="image-list">
<li class="image-item"><img src="https://source.unsplash.com/W1yjvf5idqA"></li>
<li class="image-item"><img src="https://source.unsplash.com/VgbUxvW3gS4"></li>
<li class="image-item"><img src="https://source.unsplash.com/5WbYFH0kf_8"></li>
</ul>
</div>
</div>
<div class="column-xs-12 column-md-5">
<h1>Bonsai</h1>
<h2>$19.99</h2>
<div class="description">
<p>The purposes of bonsai are primarily contemplation for the viewer, and the pleasant exercise of effort and ingenuity for the grower.</p>
<p>By contrast with other plant cultivation practices, bonsai is not intended for production of food or for medicine. Instead, bonsai practice focuses on long-term cultivation and shaping of one or more small trees growing in a container.</p>
</div>
<button class="add-to-cart">Add To Cart</button>
</div>
</div>
<div class="grid related-products">
<div class="column-xs-12">
<h3>You may also like</h3>
</div>
<div class="column-xs-12 column-md-4">
<img src="https://source.unsplash.com/miziNqvJx5M">
<h4>Succulent</h4>
<p class="price">$19.99</p>
</div>
<div class="column-xs-12 column-md-4">
<img src="https://source.unsplash.com/2y6s0qKdGZg">
<h4>Terranium</h4>
<p class="price">$19.99</p>
</div>
<div class="column-xs-12 column-md-4">
<img src="https://source.unsplash.com/6Rs76hNbIWE">
<h4>Cactus</h4>
<p class="price">$19.99</p>
</div>
</div>
</div>
</main>
<footer>
<div class="grid">
<div class="column-xs-12">
<p class="copyright">© Copyright 2018 <a href="https://katherinekato.com" title="Katherine Kato" target="_blank">Katherine Kato</a></p>
</div>
</div>
</footer>
<!-- partial -->
<script src="./scriptproduto.js"></script>
</body>
</html>