-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathproduct.html
157 lines (145 loc) · 7.51 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
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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/8e996abce9.js"></script>
<!-- CSS -->
<link rel="stylesheet" href="/assets/styles/reset.css">
<link rel="stylesheet" href="/assets/styles/style.css">
<title>Capstone Shop</title>
</head>
<body>
<!-- ===== HEADER ===== -->
<header
class="header px-5 d-none d-lg-flex justify-content-between align-items-center p-lg-5 flex-lg-column justify-content-lg-stretch align-items-lg-start">
<!-- === HEADER TOP === -->
<div class="header__top d-flex flex-column justify-content-between">
<a class="logo-link" href="/index.html"><img class="capstone-logo" src="/assets/images/capstone-logo.png"
alt="Capstone Shop Logo"></a>
<ul class="categories d-none d-lg-block">
<li class="categories__item"><a href="/category.html" class="categories__link">Men</a></li>
<li class="categories__item"><a href="/category.html" class="categories__link">Women</a></li>
</ul>
</div>
<!-- === HEADER CENTER === -->
<div class="header__center d-none d-lg-block">
<a class="menu-link" href="#">
<img class="menu-icon mr-3" src="/assets/images/menu-icon.png" alt="Menu Icon">
<span>Menu</span>
</a>
</div>
<!-- === HEADER BOTTOM === -->
<div class="header__bottom d-none d-lg-flex">
<ul class="socials">
<li class="socials__item"><a href="" class="socials__link">Instagram</a></li>
<li class="socials__item"><a href="" class="socials__link">Facebook</a></li>
<li class="socials__item"><a href="" class="socials__link">Twitter</a></li>
<li class="socials__item"><a href="" class="socials__link">Youtube</a></li>
</ul>
</div>
<img class="menu-icon d-lg-none" src="/assets/images/menu-icon.png" alt="Menu Icon">
</header>
<!-- ===== NAVBAR (Small Screens) ===== -->
<nav class="navbar fixed-top d-lg-none py-4">
<a class="navbar-brand p-0" href="/index.html">
<img src="/assets/images/capstone-logo.png" alt="Capstone Shop Logo" width="140" height="20">
</a>
<button class="navbar-toggler p-0" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="Toggle navigation">
<img class="menu-icon" src="/assets/images/menu-icon.png" alt="Menu Icon" width="30" height="15">
</button>
<div class="collapse navbar-collapse" id="navbar-content">
<ul class="navbar-nav mr-auto mt-3 border-bottom">
<li class="nav-item"><a class="nav-link" href="/index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/category.html">Men</a></li>
<li class="nav-item"><a class="nav-link" href="">Women</a></li>
</ul>
<ul class="nav-socials ml-auto mt-3 d-flex justify-content-end">
<li class="nav-socials__item"><a href="" class="nav-socials__link"><i class="fab fa-instagram"></i></a></li>
<li class="nav-socials__item"><a href="" class="nav-socials__link"><i class="fab fa-facebook"></i></a></li>
<li class="nav-socials__item"><a href="" class="nav-socials__link"><i class="fab fa-twitter"></i></a></li>
<li class="nav-socials__item"><a href="" class="nav-socials__link"><i class="fab fa-youtube"></i></a></li>
</ul>
</div>
</nav>
<!-- ===== MAIN ===== -->
<main>
<div class="product__pics float-md-left float-lg-none">
<img class="product__pics__img" src="/assets/images/products/img2.png" alt="Product Picture">
<img class="product__pics__img" src="/assets/images/products/img3.png" alt="Product Picture">
<img class="product__pics__img" src="/assets/images/products/img4.png" alt="Product Picture">
<img class="product__pics__img" src="/assets/images/products/img5.png" alt="Product Picture">
</div>
<div class="product-grid float-md-left float-lg-none">
<div class="main-img-container position-relative grid-item">
<img class="main-img" src="/assets/images/products/img1.png" alt="Product Picture">
<div class="img-controller d-none d-lg-flex align-items-center justify-content-end">
<span class="current-img">01/05</span>
<a class="prev control" href="">Prev</a>
<a class="next control" href="">Next</a>
</div>
<div class="img-controller-sm d-lg-none">
<a class="control-sm" href=""><</a>
<a class="control-sm" href="">></a>
</div>
</div>
<div class="info d-flex align-items-center justify-content-between grid-item">
<div>
<h1 class="info__heading pb-4">COOL SUMMER</h1>
<span class="info__feature pt-4">SOFT COTTOM</span>
</div>
<span class="info__price">39 USD</span>
</div>
<div class="size grid-item">
<ul class="size__list d-flex justify-content-between w-100">
<li class="size__item"><a href="" class="size__link">XS</a></li>
<li class="size__item"><a href="" class="size__link">S </a></li>
<li class="size__item"><a href="" class="size__link size__link--active">M</a></li>
<li class="size__item"><a href="" class="size__link">L</a></li>
<li class="size__item"><a href="" class="size__link">XL</a></li>
</ul>
</div>
<div class="details grid-item">
<h2 class="font-weight-bold">DETAILS</h2>
<p class="details__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis officiis, sequi aperiam adipisci veniam dolores inventore, et distinctio unde excepturi eveniet ipsam quisquam quaerat odit nostrum magni animi.</p>
</div>
<div class="cart-bar d-flex grid-item">
<a href="" class="cart-bar__plus">+</a>
<a href="" class="cart-bar__add">Add to Cart</a>
</div>
</div>
</main>
<!-- ===== ASIDE ===== -->
<aside class="aside p-5 d-none d-lg-flex flex-column justify-content-between align-items-end">
<!-- === ASIDE TOP === -->
<div class="aside__top">
<a class="aside__top__item cart" href="">Cart <span class="cart__count">0</span></a>
<a class="aside__top__item search" href=""><i class="fas fa-search"></i></a>
<a class="aside__top__item profile" href=""><i class="far fa-user"></i></a>
</div>
<!-- === ASIDE CENTER === -->
<div class="aside__center">
<a href="/category.html" class="catalogue-back">Back to Catalogue</a>
</div>
<!-- === ASIDE BOTTOM === -->
<div class="aside__bottom">
</div>
</aside>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
</body>
</html>