Skip to content

Commit 9c3e406

Browse files
matowdevmatowdev
committed
[proj. Starbuzz/COMPL] Add <form />, form.html
Adding a page/form for online order imitation. Adjustments. Worth noting: - Book ending. LP from Books
1 parent ff7b7b3 commit 9c3e406

6 files changed

Lines changed: 144 additions & 14 deletions

File tree

‎.vscode/settings.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,10 @@
1111
"Starbuzz",
1212
"Webville",
1313
"beanheading",
14+
"beantype",
1415
"cellcolor",
1516
"compl",
17+
"giftwrap",
1618
"img's",
1719
"rosehips",
1820
"splenda",

‎Learning_HTML_CSS_Freeman_E/Starbuzz/css/starbuzz.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,13 @@ section#drinks {
6565
background-color: #efe5d0;
6666
}
6767

68+
#video {
69+
width: 100%;
70+
max-width: 512px;
71+
height: 100%;
72+
max-height: 288px;
73+
}
74+
6875
h1 {
6976
font-size: 120%;
7077
color: #954b4b;

‎Learning_HTML_CSS_Freeman_E/Starbuzz/css/styledform.css‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
body {
2+
margin: 0 auto;
3+
min-width: 576px;
4+
max-width: 1200px;
5+
font-size: small;
6+
font-family: Georgia, "Times New Roman", Times, serif;
7+
background: #efe5d0 url("../images/background.gif") top left;
8+
}
9+
10+
.title-wrap {
11+
text-align: center;
12+
}
13+
14+
form {
15+
margin: 0 auto;
16+
display: table;
17+
border: thin dotted #7e7e7e;
18+
padding: 10px;
19+
background-color: #e1ceb8;
20+
}
21+
22+
form textarea {
23+
width: 500px;
24+
height: 200px;
25+
resize: none;
26+
}
27+
28+
div.tableRow {
29+
display: table-row;
30+
}
31+
32+
div.tableRow p {
33+
display: table-cell;
34+
padding: 3px;
35+
vertical-align: top;
36+
}
37+
38+
div.tableRow p:first-child {
39+
text-align: right;
40+
}
41+
42+
p.heading {
43+
font-weight: bold;
44+
}
45+
46+
.ship {
47+
max-width: 240px;
48+
text-align: end;
49+
}
50+
51+
.ship span {
52+
padding-right: 185px;
53+
}
54+
55+
input::placeholder {
56+
color: #e1ceb8;
57+
}

‎Learning_HTML_CSS_Freeman_E/Starbuzz/html/blog.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ <h1>Starbuzz meets social media</h1>
5252
to mention a few more things the tech folks know about, because hey, I'm just the coffee guy).</p>
5353
<p>So, keep your eyes out for this amazing new cup. And I'll be releasing a video teaser soon to tell you all
5454
about this new invention, straight from Starbuzz Coffee.</p>
55-
<video id="video" controls width="512" height="288" poster="../images/poster.png">
55+
<video id="video" controls poster="../images/poster.png">
5656
<source src="../video/tweetsip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
5757
<source src="../video/tweetsip.webm" type='video/webm; codecs="vp8, vorbis"'>
5858
<source src="../video/tweetsip.ogv" type='video/ogg; codecs="theora, vorbis"'>
@@ -92,7 +92,7 @@ <h1>Most unique patron of the month </h1>
9292
<br>
9393
ORDER ONLINE
9494
with the
95-
<a href="form.html">BEAN MACHINE</a>
95+
<a href="../html/form.html" target="_blank">BEAN MACHINE</a>
9696
<br>
9797
<span class="slogan">
9898
FAST <br>

‎Learning_HTML_CSS_Freeman_E/Starbuzz/html/form.html‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>The Starbuzz Bean Machine</title>
8+
<link rel="stylesheet" href="../css/styledform.css">
9+
</head>
10+
11+
<body>
12+
<div class="title-wrap">
13+
<h1>The Starbuzz Bean Machine</h1>
14+
<h2>Fill out the form below and click "order now" to order</h2>
15+
</div>
16+
17+
<form action="https://jsonplaceholder.typicode.com/users" method="post">
18+
<p>Choose your beans:
19+
<select name="beans">
20+
<option value="House Blend">House Blend</option>
21+
<option value="Bolivia">Shade Grown Bolivia Supremo</option>
22+
<option value="Guatemala">Organic Guatemala</option>
23+
<option value="Kenya">Kenya</option>
24+
</select>
25+
</p>
26+
<p>Type:<br>
27+
<input type="radio" name="beantype" value="whole">
28+
Whole bean<br>
29+
<input type="radio" name="beantype" value="ground" checked>
30+
Ground
31+
</p>
32+
<p>Number of bags:<input type="number" name="bags" min="1" max="10"></p>
33+
<p>Must arrive by date: <input type="date" name="date"></p>
34+
<p>Extras:<br>
35+
<input type="checkbox" name="extras" value="giftwrap">
36+
Gift wrap<br>
37+
<input type="checkbox" name="extras" value="catalog" checked>
38+
Include catalog with order
39+
</p>
40+
<p class="ship" role="form"><span>Ship to:</span><br>
41+
Name:
42+
<input type="text" name="name" value="" placeholder="Name" required autocomplete="off"><br>
43+
Address:
44+
<input type="text" name="address" value="" placeholder="Address" required autocomplete="off"><br>
45+
City:
46+
<input type="text" name="city" value="" placeholder="City" required autocomplete="off"><br>
47+
State:
48+
<input type="text" name="state" value="" placeholder="State" required autocomplete="off"><br>
49+
Zip:
50+
<input type="text" name="zip" value="" placeholder="Zip" required autocomplete="off"><br>
51+
Phone:
52+
<input type="tel" name="phone" value="" placeholder="Phone" required autocomplete="off"><br>
53+
</p>
54+
<p>Customer Comments:<br>
55+
<textarea name="comments"></textarea>
56+
</p>
57+
<p>
58+
<input type="submit" value="Order Now">
59+
</p>
60+
</form>
61+
</body>
62+
63+
</html>

‎Learning_HTML_CSS_Freeman_E/Starbuzz/index.html‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33

44
<head>
5-
<meta charset="utf-8">
5+
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>Starbuzz Coffee</title>
88
<link rel="stylesheet" href="css/starbuzz.css">
@@ -51,8 +51,9 @@ <h1>QUALITY COFFEE, QUALITY CAFFEINE</h1>
5151
with our new Bean Machine online order form, and get that quality Starbuzz coffee that you know will meet your
5252
caffeine standards.</p>
5353
<p>And, did we mention <em>caffeine</em>? We've just started funding the guys doing all the wonderful research
54-
at the <a href="http://buzz.headfirstlabs.com" title="Read all about caffeine on the Buzz">Caffeine Buzz</a>.
55-
If you want the latest on coffee and other caffeine products, stop by and pay them a visit.</p>
54+
at the <a href="https://wickedlysmart.com/buzz/" target="_blank"
55+
title="Read all about caffeine on the Buzz">Caffeine Buzz</a>.If you want the latest on coffee and other
56+
caffeine products, stop by and pay them a visit.</p>
5657
<h1>OUR STORY</h1>
5758
<p>"A man, a plan, a coffee bean". Okay, that doesn't make a palindrome, but it resulted in a damn good cup of
5859
coffee. Starbuzz's CEO is that man, and you already know his plan: a Starbuzz on every corner.</p>
@@ -61,23 +62,22 @@ <h1>OUR STORY</h1>
6162
presence, which is growing rapidly and helping to meet the caffeine needs of a whole new set of customers.</p>
6263
<h1>STARBUZZ COFFEE BEVERAGES</h1>
6364
<p>We've got a variety of caffeinated beverages to choose from at Starbuzz, including our
64-
<a href="beverages.html#house" title="House Blend">House Blend</a>,
65-
<a href="beverages.html#mocha" title="Mocha Cafe Latte">Mocha Cafe Latte</a>,
66-
<a href="beverages.html#cappuccino" title="Cappuccino">Cappuccino</a>, and a favorite of our customers,
67-
<a href="beverages.html#chai" title="Chai Tea">Chai Tea</a>.
65+
<a href="#" title="House Blend">House Blend</a>,
66+
<a href="#" title="Mocha Cafe Latte">Mocha Cafe Latte</a>,
67+
<a href="#" title="Cappuccino">Cappuccino</a>, and a favorite of our customers,
68+
<a href="#" title="Chai Tea">Chai Tea</a>.
6869
</p>
6970
<p>We also offer a variety of coffee beans, whole or ground, for you to take home with you. Order your coffee
70-
today using our online <a href="form.html" title="form.html">Bean Machine</a>, and take the Starbuzz Coffee
71-
experience home.</p>
71+
today using our online <a href="html/form.html" target="_blank" title="form.html">Bean Machine</a>, and take
72+
the Starbuzz Coffee experience home.</p>
7273
</section>
73-
7474
<aside>
7575
<p class="beanheading">
7676
<img src="images/bag.gif" alt="Bean Machine bag">
7777
<br>
7878
ORDER ONLINE
7979
with the
80-
<a href="form.html">BEAN MACHINE</a>
80+
<a href="html/form.html" target="_blank">BEAN MACHINE</a>
8181
<br>
8282
<span class="slogan">
8383
FAST <br>
@@ -96,7 +96,8 @@ <h1>STARBUZZ COFFEE BEVERAGES</h1>
9696
</div>
9797

9898
<div id="coupon">
99-
<a href="freecoffee.html" title="Click here to get your free coffee">
99+
<a href="https://www.freecoffee.io/en/content/8-about-us" target="_blank"
100+
title="Click here to get your free coffee">
100101
<img src="images/ticket.gif" alt="Starbuzz coupon ticket">
101102
</a>
102103
</div>

0 commit comments

Comments
 (0)