Skip to content

Commit 028f599

Browse files
gixxerbladegixxerblade
committed
angry pickle test site
1 parent 23841bd commit 028f599

File tree

4 files changed

+206
-0
lines changed

4 files changed

+206
-0
lines changed

‎weekFour/angryPickles/images/angryPickleLogo.png

261 KB
Loading

‎weekFour/angryPickles/images/tranquilPickle.jpg

2.02 MB
Loading

‎weekFour/angryPickles/index.html

+117
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<link rel="stylesheet" href="style.css" />
8+
<link
9+
href="https://fonts.googleapis.com/css?family=Poppins&display=swap"
10+
rel="stylesheet"
11+
/>
12+
<title>Design</title>
13+
</head>
14+
<body>
15+
<header id="header">
16+
<img src="images/angryPickleLogo.png" id="logo" alt="Angry Pickles" />
17+
<h1 id="title">Angry Pickles</h1>
18+
<h2 id="tagline">Making small batches of pickles using fresh stuff</h2>
19+
<nav id="navbarMain">
20+
<li id="itemLink"><a href="#items">Items</a></li>
21+
<li id="reviewLink"><a href="#reviews">Reviews</a></li>
22+
<li id="blogLink"><a href="#blog">Blog</a></li>
23+
<li id="aboutLink"><a href="#about">About</a></li>
24+
<li id="policiesLink"><a href="#policies">Store Policies</a></li>
25+
</nav>
26+
</header>
27+
<div id="container">
28+
<div id="items">
29+
Items
30+
<ul id="itemlist">
31+
<li id="item1"><a href="#">Angry Pickle</a></li>
32+
<li id="item2"><a href="#"> Tranquil Pickle</a></li>
33+
<li id="item3"><a href="#"> Angry Pickle Hat</a></li>
34+
<li id="item4"><a href="#"> Angry Pickle Shirt</a></li>
35+
<li id="item5"><a href="#"> Angry Pickle Bundle</a></li>
36+
</ul>
37+
</div>
38+
<div id="reviews">
39+
<h2 id="reviewsSection">Reviews</h2>
40+
<ul id="reviewList">
41+
<li id="review1">
42+
<article>
43+
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
44+
</article>
45+
</li>
46+
<li id="review2">
47+
<article>
48+
Velit quae rem suscipit obcaecati, repellendus ut ipsam ex natus
49+
hic a maiores ipsum est laboriosam.
50+
</article>
51+
</li>
52+
<li id="review3">
53+
<article>
54+
Beatae, incidunt natus quos nulla dignissimos. Debitis vitae iste
55+
eaque!
56+
</article>
57+
</li>
58+
</ul>
59+
</div>
60+
<div id="blog">
61+
<h2 id="blogSection">Blog</h2>
62+
<div id="blogList">
63+
<article id="blog1">
64+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odit
65+
cupiditate labore nesciunt, voluptate accusamus sequi alias
66+
asperiores voluptatem debitis amet laborum. Doloremque maiores totam
67+
numquam sed ab sequi natus eum.
68+
</article>
69+
<article id="blog2">
70+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime
71+
aliquam omnis, minus quos commodi rerum nam recusandae
72+
reprehenderit, eaque ut odio ipsum ipsa autem suscipit, excepturi
73+
delectus ipsam quo ab.
74+
</article>
75+
</div>
76+
</div>
77+
<div id="about">
78+
<h2>About Me</h2>
79+
<article>
80+
Retired Marine Corps veteran Stephen Clark regularly cans the
81+
vegetables from his garden, so pickled cucumbers were a natural
82+
extension of that passion. Giving canned goods to his friends as
83+
gifts, Stephen has been told time and time again that he made pickles
84+
to die for. We hope to bring this awesome taste to your home. Angry
85+
Pickles uses fresh in-season produce, from various locations. We even
86+
grow a small selection of produce in our backyard. We want to give our
87+
customers crisp, crunchy and delicious pickled vegetables. Most of
88+
all, we want to expand people’s palates and give you the best pickle
89+
you’ve ever had.
90+
</article>
91+
</div>
92+
<div id="policies">
93+
<h2 id="storePolicies">Policies</h2>
94+
<div id="shippingPolicies">
95+
<h3 id="shipping">Shipping</h3>
96+
<div>
97+
The time I need to prepare an order for shipping varies. Estimated
98+
shipping times North America: 3-5 business days. I'll do my best to
99+
meet these shipping estimates, but cannot guarantee them. Actual
100+
delivery time will depend on the shipping method you choose.
101+
</div>
102+
</div>
103+
<div id="payment">
104+
<h3 id="paymentOptions">Payment Options</h3>
105+
<ul id="payment">
106+
<li id="pay1">Paypal</li>
107+
<li id="pay2">Visa</li>
108+
<li id="pay3">Mastercard</li>
109+
<li id="pay4">American Express</li>
110+
<li id="pay5">Discover</li>
111+
<li id="pay6">Bitcoin</li>
112+
</ul>
113+
</div>
114+
</div>
115+
</div>
116+
</body>
117+
</html>

‎weekFour/angryPickles/style.css

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
list-style-type: none;
6+
}
7+
html{
8+
height: 100%;
9+
}
10+
body{
11+
background-color: white;
12+
font-family: 'Poppins', sans-serif;
13+
font-size: 16px;
14+
}
15+
header{
16+
display: grid;
17+
align-content: flex-start;
18+
justify-content: space-between;
19+
grid-template-areas:
20+
"logo title title"
21+
"logo tag tag"
22+
"logo . ."
23+
"navbar navbar navbar";
24+
background: #85a35d;
25+
}
26+
#logo{
27+
width: 13em;
28+
grid-area: logo;
29+
padding: 1em;
30+
margin: 1em;
31+
}
32+
#title{
33+
grid-area: title;
34+
font-size: 3em;
35+
font-weight: 800;
36+
text-align: right;
37+
padding: 1em;
38+
}
39+
#tagline{
40+
grid-area: tag;
41+
font-size: 1.3em;
42+
text-align: right;
43+
padding: 1em;
44+
}
45+
#navbarMain{
46+
grid-area: navbar;
47+
display: flex;
48+
flex-flow: row wrap;
49+
justify-content: space-around;
50+
background-color: #ce4652;
51+
font-size: .9em;
52+
}
53+
54+
55+
56+
57+
58+
59+
/* Mobile Styles */
60+
@media only screen and (max-width: 450px) {
61+
header{
62+
width: 100%;
63+
height: auto;
64+
display: flex;
65+
flex-flow: row wrap;
66+
justify-content: center;
67+
align-items: center;
68+
background-color: #85a35d;
69+
}
70+
#logo{
71+
padding:0;
72+
margin: 0;
73+
}
74+
#title{
75+
font-size: 300%;
76+
text-align: center;
77+
padding: 0;
78+
}
79+
#tagline{
80+
padding: 0;
81+
text-align: center;
82+
}
83+
#navbarMain{
84+
height: 100%;
85+
width: 100%;
86+
justify-content: space-between;
87+
}
88+
89+
}

0 commit comments

Comments
 (0)