generated from github/welcome-to-github
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
202 lines (178 loc) · 9.26 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
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="Artsy is the best place to buy artwork online. " />
<!-- Google Font-->
<link
href="https://fonts.googleapis.com/css?family=Alice%7CSacramento&display=swap"
rel="stylesheet"
/>
<!-- boostrap -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<!--for icon-->
<script src="https://kit.fontawesome.com/71051c589b.js" crossorigin="anonymous"></script>
<!--my css-->
<link type="text/css" href="style.css" rel="stylesheet" />
<title>Artsy</title>
<!--for image work both safari and chrome-->
<script src="https://unpkg.com/webp-hero@0.0.0-dev.21/dist-cjs/polyfills.js"></script>
<script src="https://unpkg.com/webp-hero@0.0.0-dev.21/dist-cjs/webp-hero.bundle.js"></script>
</head>
<body>
<!-- 1. Header across the top must include your store's name, a logo,
and use a different background colour, web font, etc. You must also include
a link to your contact.html page. Your header should include info about
what the store is, what it sells, etc. Use some images to try and draw
the user in. NOTE: place all your site's images in the `src/images/` directory.-->
<!--hidden only on xs -->
<img class="card-img" src="images/igor-miske-oLhTLD-RBsc-unsplash.webp" alt="Card image" />
<div class="card-img-overlay">
<nav
id="navigation_main"
class="navbar navbar-expand-sm navbar-dark justify-content-center"
>
<h3 class="navbar-brand" style="font-size: xx-large;">Artsy</h3>
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#store">Artworks</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Facebook</a>
</li>
</ul>
<span class="pl-3">
<i class="fas fa-shopping-cart" style="color: whitesmoke"></i>
</span>
</nav>
</div>
<div class="jumbotron jumbotron-fluid m-0 pl-3" id="introduction">
<div class="container">
<h1 class="display-4">About us</h1>
<p class="lead">Artsy is the best way to find the perfect artwork for your space. Easy pricing, expert design advice, custom framing, and free shipping & returns every day.</p>
</div>
</div>
<div id="store" class="pb-4">
<ul
class="list-group flex-fill justify-content-center flex-md-row "
id="shop"
>
<li class="list-group-item p-3" id="all" >All Category</li>
<li class="list-group-item p-3" id="VanGogh">Vincent Van Gogh</li>
<li class="list-group-item p-3" id="Vermeer">Johannes Vermeer</li>
</ul>
</div>
<main id="main ">
<div id="card_deck" class="card-columns"></div>
</main>
<!--
Part 1: Main Store Page
Requirements:
1. Header across the top must include your store's name, a logo,
and use a different background colour, web font, etc. You must also include
a link to your contact.html page. Your header should include info about
what the store is, what it sells, etc. Use some images to try and draw
the user in. NOTE: place all your site's images in the `src/images/` directory.
2. Below the header, a multi-column layout of items you can purchase in the
store. You must have at least 10 items in your store, and at least 2
categories of items. For example, if you are selling clothing, you might
have categories for Men, Women, and Children, and each category would have
its own set of items. Each item should include:
- a picture
- the item's name/title
- a more complete description of the item
- a category (i.e., each item must belong to a category)
- a price.
Each item should be its own "card" (i.e., some kind of box around each item
separating one from the next, with suitable whitespace between).
3. A sidebar (left or right, depending on your design) of the item layout
section, showing the different categories of items in your store. If a
user clicks on one of the categories, use CSS and JavaScript to hide all
other items in the store (i.e., only show items for the chosen category).
Make sure you include a way to return to seeing all categories, and make it
obvious to the user that they are only seeing a partial list of items when
you filter by category (i.e., use CSS and HTML to change things somehow).
4. Below the items, a footer with the name of the store, any relevant links you
need to give users, as well as a small HTML form for entering an Email
address and clicking a "Subscribe" button to subscribe to the store's
newsletter. Use https://formspree.io/ to automatically submit the form to
your email address (i.e., when a user fills out their email address and
clicks submit, *you* should get that information sent to your email
address via formspree.io). Make sure you setup your account on
https://formspree.io/.
5. Use two different Web Fonts for your store. The titles should be different
from any regular text. Use a free font service like https://fonts.google.com/
or any other that you choose. You can also experiment with different font
sizes and colours to draw attention toward or away from various parts of
your design.
6. Pick a colour theme using a tool like https://colorhunt.co/ with at least
3 colours (primary, secondary, accent), and use them throughout your site
for backgrounds, borders, fonts. Your store page needs to look attractive
and marks will be given for good a good looking site. No one will buy from
a store that looks like its owners aren't professional or don't care about
details. Also make sure that the colour contrast in your site is suitable
for everyone to read.
7. Use modern CSS to help you achieve your layout. For example, Flexbox
and CSS Grid can help you create professional looking layouts. Here
are some guides to get you started:
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
You are also welcome to use existing CSS libraries to help you with your layout,
but you must also include your own styles (i.e., you can't use a library
for everything in your design).
8. Make sure you don't use copyrighted materials from other sites. If you use
icons, fonts, images, etc., make sure you are legally permitted to reuse them,
and include references to indicate where you got them. Some resources to consider:
- https://unsplash.com/ for images
- https://fontawesome.com/ for icons
- https://gallery.manypixels.co/ or https://undraw.co/illustrations for illustrations (SVG)
9. Make sure you reduce the download size of images you include in your
store. Users don't want to download 10s or 100s of megabytes of data, especially
on mobile. You can use an online tool like https://squoosh.app/ to help you
reduce images. You will lose marks if your images aren't optimized for the web.
10. Make sure you have no JavaScript or other errors in your Dev Tools Console.
Run your site, and test all aspects of it with the Console open, and fix
any issues you encounter.
11. Make sure your forms all work as they should, testing them yourself,
and also have someone else test it for you. The easiest way to find bugs
in software is to let someone who didn't build it try to use it!
-->
<footer id="page_footer" class="p-3">
<div id="footer_address">
<nav class="nav justify-content-left ">
<a class="nav-link pl-3" href="#navigation_main"><i class="fas fa-home "></i></a>
<a class="nav-link pl-3" href="contact.html"><i class="far fa-address-book "></i></a>
<a class="nav-link pl-3" href="#main"> <i class="fas fa-shopping-cart"></i></a>
<a class="nav-link pl-3" href="#main"> <i class="fas fa-map-marked"></i></a>
</nav>
</div>
<div class="p-2" id="email_form">
<form action="https://formspree.io/xvobqebw" method="POST">
<label>
<input type="text" name="_replyto" placeholder="Enter your email" />
</label>
<button type="submit">Sign up for our newsletter</button>
</form>
</div>
</footer>
<!--Webph-->
<script>
var webpMachine = new webpHero.WebpMachine();
webpMachine.polyfillDocument();
</script>
<script src="product_Data.js"></script>
<script src="script.js"></script>
</body>
</html>