-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
169 lines (142 loc) · 6.6 KB
/
index.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
158
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta author='Victor'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Aloha</title>
<!-- CDN link for font-awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
crossorigin="anonymous">
<link rel='stylesheet' href='./styles.css'>
<!-- flikity link -->
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
</head>
<body>
<a class="screen-reader-text" href="#about">Skip to content</a>
<header id='myHeader'>
<div class='container' id='myHeader'>
<div class='logo' tabindex="-1">
<img src="./images/aloha-logo.svg" alt='aloha-logo'>
</div>
<!-- It's better to use relative path rather than absolute path, because if you need to move your
files around it can be hard to define what the absolute path is. *current example is relative path*-->
<div class='navitems'>
<ul>
<li><a href='#about'>ABOUT</a></li>
<li><a href='#shop'>SHOP</a></li>
<li><a href='#featured'>FEATURED</a></li>
<li><a href='#updates'>UPDATES</a></li>
</ul>
<!-- the link here only work with ids not classes -->
</div>
<div class='cart'>
<h5 class='count'>0</h5>
<img src='./images/cart-icon.svg' alt='cart-icon' class='cart'>
</div>
</header>
<section class="banner">
<h4>NEW COLLECTION</h4>
<h1>Spring/Summer 2019</h1>
</section>
<section class='banner2' id="about">
<h1><span>Hand-Crafted </span> Styles</h1>
<p>Aloha Appearl.co sells only the finest ready-to-travel cloting.
Browse our current selection of products or sign-up for updates below.
</p>
<!-- You should give the span a class, so you can manipulate that span specifically -->
</section>
<!--
In this case, i can make a div called boxes and make each individual box its own div and have have its own class but this way
is not the most efficient, because if we do it like a <ul> it will be much easier and just modify the <li>s-->
<section class='catalog' id='shop'>
<ul class='boxes'>
<li class='box1'><a href='#'></a>MEN'S</li>
<li class='box2'><a href='#'></a>TREND'S</li>
<li class='box3'><a href='#'></a>GLASSES</li>
<li class='box4'><a href='#'></a>SALES</li>
<li class='box5'><a href='#'></a>BAGS</li>
<li class='box6'><a href='#'></a>WOMEN'S</li>
</ul>
</section>
<section class='featured' id='featured' tabindex="-1">
<h2>Most-Loved <span>Products</span></h2>
<ul class='main-carousel'>
<li class='carousel-cell'> <img src='./images/checked-stretch-dress.jpg' alt="checked stretch dress">
<h3>dresses</h3>
<h4>Checked Stretch Dress</h4>
<h3>$129.00</h3>
<button> Add to Cart</button>
</li>
<li class='carousel-cell'> <img src='./images/blue-hipster-backpack.jpg' alt="blue hipster backpack">
<h3>Bags</h3>
<h4>Blue Hipster Backpack</h4>
<h3>$69.00</h3>
<button> Add to Cart</button>
</li>
<li class='carousel-cell'> <img src='./images/blue-silk-dress.jpg' alt="blue silk dress">
<h3>Dresses</h3>
<h4>Blue Silk Dress</h4>
<h3>$119.00</h3>
<button> Add to Cart</button>
</li>
<li class='carousel-cell'> <img src='./images/cotton-blue-shirt.jpg' alt="cotton blue shirt">
<h3>T-Shirt</h3>
<h4>Blue Cotton Shirt</h4>
<h3>$39.00</h3>
<button> Add to Cart</button>
</li>
<li class='carousel-cell'> <img src='./images/cotton-yellow-tshirt.jpg' alt="cotton yellow t-shirt">
<h3>T-Shirt</h3>
<h4>Yellow Cotton Shirt</h4>
<h3>$39.00</h3>
<button> Add to Cart</button>
</li>
<li class='carousel-cell'> <img src='./images/demin-overall-shorts.jpg' alt="denim overall shorts">
<h3>Shorts</h3>
<h4>Denim Overall Shorts</h4>
<h3>$89.00</h3>
<button> Add to Cart</button>
</li>
</ul>
</section>
<div class='formbanner' id='updates'>
<h2>Sign-up for <span>Updates</span></h2>
<p>Stay updated on our latest product releases,be the first to find out about upcoming sales and get free
style tips from our blog. Unsubscribe at any time.</p>
<form action='www.aloha.com/forms' mehtod='POST'>
<input type="email" placeholder="Your E-mail" id='e-mail'>
<input type='submit' value='Subscribe' class='submit'>
</form>
</div>
<div class='footer'>
<div class='footertxt'>
<div class='copyright'>
<p>©2019 Aloha Apparel Co.</p>
<p>Powered by HTML and CSS.</p>
</div>
<div class='contact'>
<p>604-604-6040. </p>
<a href='[email protected]'>[email protected]</a>
</div>
<div class='address'>
<p>1490 W Broadway </p>
<p>Vancouver, BC, Canada</p>
</div>
</div>
<ul class='socialmedia'>
<li><a href='#'><i class="fab fa-facebook fa-spin"></i><span> Facebook</span></li></a>
<li><a href='#'><i class="fab fa-twitter-square"></i><span> Twitter</span></li></a>
<li><a href='#'><i class="fab fa-instagram"></i><span> Instagram</span></li></a>
<li><a href='#'><i class="fab fa-pinterest-square"></i><span> Pinterest</span></li></a>
<li><a href='#'><i class="fab fa-google-plus-square"></i><span> Google+</span></li></a>
</ul>
</div>
<script async src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<!-- JavaScript flikity -->
<script defer src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<script defer src='js/script.js'></script>
</body>
</html>