-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathdetail.html
92 lines (89 loc) · 4.79 KB
/
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
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" type="text/css" href="detail.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@900&display=swap" rel="stylesheet">
</head>
<body>
<!------------- Header section ------------------->
<section id="nav-bar">
<nav class="navbar navbar-expand-lg navbar-light ">
<a class="navbar-brand" href="index.html">Coders.<span>Tokyo</span></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">PRODUCTS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">BLOG</a>
</li>
<li class="nav-item">
<img src="images/shopping-cart.png">
</li>
</ul>
</div>
</nav>
</section>
<!------------- Book detail section ------------------->
<section id="book-detail">
<div class="container">
<div class="row">
<div class="col-sm-6">
<img src="images/book-2 trial.jpg" class="img-fluid book-style">
</div>
<div class="col-sm-6">
<p class="author">MATTIS NIBH</p>
<div class="rating">
<span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span>
</div>
<div class="d-flex flex-row price">
<p class="sale-price">$175</p>
<p class="origin-price">$208</p>
</div>
<div class="full-description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ipsum risus, tristique in viverra vitae, ullamcorper id quam. Integer lectus purus, vehicula id odio eget, pharetra aliquet ipsum. Mauris vehicula mauris mauris. Mauris lacus ex, ultricies sit amet eros convallis, rutrum venenatis quam. Mauris eu laoreet justo. Sed consectetur vehicula justo, ac commodo metus pharetra vel. Nullam in nulla ac lorem elementum pretium vel eget leo. Suspendisse volutpat massa non dolor pharetra scelerisque. Aenean id sagittis odio, eu ornare sapien.</p>
<p class="condition">Availability: <span>In Stock</span></p>
</div>
<form action="shopping-cart.html">
<div class="d-flex flex-row add-button">
<button class="btn btn-dark btn-lg flex-grow-1" onclick="shopping-cart.html">Add to cart</button>
<button class="btn btn-light btn-lg flex-grow-2">Wish list</button>
</div>
</form>
<div class="more-details">
<p class="font-weight-bold">Categories:<span class="font-weight-normal">Adventure, Biographic, Children</span></p>
<p class="d-flex flex-row font-weight-bold">Share: <span>
<i class="fa fa-facebook-square"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-github"></i>
</span> </p>
</div>
</div>
</div>
</div>
</section>
<!------------- Footer section ------------------->
<section id="footer">
<div class="container-fluid container-spacing text-center">
<p>Copyright 2020 Coders.Tokyo. All rights reserved.</p>
<p>Term of Service | Privacy</p>
</div>
</section>
</body>
</html>