basic project card and projects page setup

This commit is contained in:
Josh Ashton
2023-05-10 22:40:04 -06:00
parent 1e7af0b94b
commit 6d1099590e
108 changed files with 673 additions and 154 deletions
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,21 @@
body {
background-color: #4A245E;
}
h1, p, ul {
font-family: Lato, sans-serif;
text-align: left;
color: white;
font-size: 3vw;
}
p, ul {
font-size: 1vw;
}
Binary file not shown.
Binary file not shown.

After

Width:  |  Height:  |  Size: 36 MiB

@@ -0,0 +1,127 @@
<!DOCTYPE html>
<html>
<head>
<title>Interactive Star Wars Map</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<br>
<h1>Interactive Star Wars Galaxy Map</h1>
<br>
<p>I am an enormous fan of Star Wars. For this assignment, I chose to create an image-map of the Star Wars galaxy. In other words, this map is interactable. Almost every part of the galaxy map has an associated area. The area's include, but are not limited to:</p>
<br>
<ul>
<li>Planets and moons seen in the live-action movies and TV shows;</li>
<li>Planets and moons from the video games, animated TV shows, and books;</li>
<li>Space stations and mining facilities; and</li>
<li>Regions of this galaxy far, far away.</li>
</ul>
<br>
<p>While I may have missed some notable locations, my goal was to create an interactive image map that covers every location we have ever seen or heard of. Coruscant, Endor, Hoth, Bespin, Dagobah, Tatooine and other notable planets were chosen, since such major plot points take place on these worlds. Other planets such as Christophsis, Korriban, Mortis, Dathomire, and Taris were chosen due to the community's enjoyment of storylines that took place in TV or video games on these planets.</p>
<br>
<p>Furthermore, any planets that are an alien species' home planet are also included. Neimodia, located in the Interior, is the home planet of the Neimoidians most known for their role in running the Trade Federation in the last years of the Galactic Republic, and forming the Confederacy of Independent Systems' droid army during the Clone Wars. The Bith are gifted performers, best known for their performances in cantinas, and come from the planet Bith. Devaronian's, the species of the devil-horned alien seen for a brief moment in Episode IV: A New Hope's cantina scene, hail from the planet Devaron. The infamous bounty hunter Bossk, a Trandoshan, is a member of the native species of Trandosha. Through the interactive map, you may make some interesting notes such as Trandosha's proximity to Kashyyyk, homeworld of the Wookiees, a species the Trandoshan's hunt for sport.
<br>
<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="img/swmap.jpeg" usemap="#image-map"/>
<map name="image-map">
<area href="https://starwars.fandom.com/wiki/Ahch-To" coords="2509,6440,2948,6659" shape="rect">
<area href="https://starwars.fandom.com/wiki/Exegol" coords="2729,3788,3120,4036" shape="rect">
<area href="https://starwars.fandom.com/wiki/Takodana" coords="4169,7561,4627,7742" shape="rect">
<area href="https://starwars.fandom.com/wiki/Polis_Massa" coords="5218,9674,5764,9475" shape="rect">
<area href="https://starwars.fandom.com/wiki/Mustafar" coords="5118,9094,5549,9293" shape="rect">
<area href="https://starwars.fandom.com/wiki/Utapau" coords="6145,9119,6477,9284" shape="rect">
<area href="https://starwars.fandom.com/wiki/Dagobah" coords="6046,9019,6510,9119" shape="rect">
<area href="https://starwars.fandom.com/wiki/Hoth" coords="5284,8779,4969,8680" shape="rect">
<area href="https://starwars.fandom.com/wiki/Bespin" coords="4671,8605,4953,8754" shape="rect">
<area href="https://starwars.fandom.com/wiki/Jakku" coords="4141,6228,4439,6410" shape="rect">
<area href="https://starwars.fandom.com/wiki/Jedha" coords="3876,4878,4207,5060" shape="rect">
<area href="https://starwars.fandom.com/wiki/Mygeeto" coords="4820,2783,5234,2882" shape="rect">
<area href="https://starwars.fandom.com/wiki/Taris/Legends" coords="6344,3628,6642,3777" shape="rect">
<area href="https://starwars.fandom.com/wiki/Dathomir" coords="6394,3313,6808,3429" shape="rect">
<area href="https://starwars.fandom.com/wiki/Ord_Mantell" coords="5367,3810,5880,4009" shape="rect">
<area href="https://starwars.fandom.com/wiki/Ajan_Kloss" coords="5218,3089,5682,3271" shape="rect">
<area href="https://starwars.fandom.com/wiki/Dantooine" coords="5350,2435,5814,2567" shape="rect">
<area href="https://starwars.fandom.com/wiki/Mortis" coords="5102,1681,5400,1847" shape="rect">
<area href="https://starwars.fandom.com/wiki/Mandalore" coords="6758,3669,7189,3818" shape="rect">
<area href="https://starwars.fandom.com/wiki/Korriban" coords="7702,2849,8100,2998" shape="rect">
<area href="https://starwars.fandom.com/wiki/Dromund_Kaas" coords="8034,2741,8315,2874" shape="rect">
<area href="https://starwars.fandom.com/wiki/Yavin_4" coords="7321,3296,7719,3131" shape="rect">
<area href="https://starwars.fandom.com/wiki/Mon_Calamari" coords="9276,3603,9906,3421" shape="rect">
<area href="https://starwars.fandom.com/wiki/Felucia" coords="8067,3222,8365,3354" shape="rect">
<area href="https://starwars.fandom.com/wiki/Kijimi" coords="8166,4274,8448,4158" shape="rect">
<area href="https://starwars.fandom.com/wiki/Sullust" coords="6145,8365,5847,8249" shape="rect">
<area href="https://starwars.fandom.com/wiki/Crait" coords="6543,8307,6294,8175" shape="rect">
<area href="https://starwars.fandom.com/wiki/Naboo" coords="6543,7951,6874,8067" shape="rect">
<area href="https://starwars.fandom.com/wiki/Ryloth" coords="8017,8398,8348,8233" shape="rect">
<area href="https://starwars.fandom.com/wiki/Tatooine" coords="7852,7785,8183,7868" shape="rect">
<area href="https://starwars.fandom.com/wiki/Scarif" coords="8895,7446,8580,7297" shape="rect">
<area href="https://starwars.fandom.com/wiki/Kamino" coords="8531,7363,8233,7247" shape="rect">
<area href="https://starwars.fandom.com/wiki/Geonosis" coords="8150,7876,8531,7943" shape="rect">
<area href="https://starwars.fandom.com/wiki/Hosnian_Prime" coords="5516,6170,6079,6054" shape="rect">
<area href="https://starwars.fandom.com/wiki/Tython" coords="5334,5251,5698,5383" shape="rect">
<area href="https://starwars.fandom.com/wiki/Coruscant" coords="4936,4887,5433,5002" shape="rect">
<area href="https://starwars.fandom.com/wiki/Alderaan" coords="5930,5027,6344,4928" shape="rect">
<area href="https://starwars.fandom.com/wiki/Corellia" coords="5731,5723,6112,5822" shape="rect">
<area href="https://starwars.fandom.com/wiki/Nal_Hutta" coords="7868,5715,8365,5847" shape="rect">
<area href="https://starwars.fandom.com/wiki/Nar_Shadaa" coords="7901,5872,8415,5922" shape="rect">
<area href="https://starwars.fandom.com/wiki/Toydaria" coords="8166,5595,8481,5711" shape="rect">
<area href="https://starwars.fandom.com/wiki/Kessel" coords="8978,5056,9260,4924" shape="rect">
<area href="https://starwars.fandom.com/wiki/Christophsis" coords="7454,7980,7918,7881" shape="rect">
<area href="https://starwars.fandom.com/wiki/D%27Qar" coords="6825,8411,7139,8245" shape="rect">
<area href="https://starwars.fandom.com/wiki/Rakata_Prime" coords="3363,5636,3942,5785" shape="rect">
<area href="https://starwars.fandom.com/wiki/Rodia" coords="8100,7934,7934,7885" shape="rect">
<area href="https://starwars.fandom.com/wiki/Kuat" coords="6228,5309,6013,5259" shape="rect">
<area href="https://starwars.fandom.com/wiki/Neimoidia" coords="6543,5243,6228,5160" shape="rect">
<area href="https://starwars.fandom.com/wiki/Kashyyyk" coords="7603,4911,7222,4812" shape="rect">
<area href="https://starwars.fandom.com/wiki/Trandosha" coords="7106,4978,7454,4911" shape="rect">
<area href="https://starwars.fandom.com/wiki/Onderon" coords="6609,4721,6974,4837" shape="rect">
<area href="https://starwars.fandom.com/wiki/Pasaana" coords="7073,6311,7471,6145" shape="rect">
<area href="https://starwars.fandom.com/wiki/Manaan" coords="6692,5632,7023,5499" shape="rect">
<area href="https://starwars.fandom.com/wiki/Cato_Neimoidia" coords="6311,5470,6659,5619" shape="rect">
<area href="https://starwars.fandom.com/wiki/Klatooinian" coords="8448,4551,8796,4650" shape="rect">
<area href="https://starwars.fandom.com/wiki/Eadu" coords="9574,5230,9293,5114" shape="rect">
<area href="https://starwars.fandom.com/wiki/Vandor" coords="7222,6928,7537,6812" shape="rect">
<area href="https://starwars.fandom.com/wiki/Umbara" coords="7106,5023,7437,5106" shape="rect">
<area href="https://starwars.fandom.com/wiki/Lah&amp;27mu" coords="5466,2414,5831,2298" shape="rect">
<area href="https://starwars.fandom.com/wiki/Fondor" coords="5466,6613,5798,6481" shape="rect">
<area href="https://starwars.fandom.com/wiki/Ilum" coords="3545,3930,3826,3797" shape="rect">
<area href="https://starwars.fandom.com/wiki/Iridonia" coords="4870,3752,5152,3603" shape="rect">
<area href="https://starwars.fandom.com/wiki/Mimban" coords="7040,5856,6709,5723" shape="rect">
<area href="https://starwars.fandom.com/wiki/Devaron" coords="5897,6510,6228,6593" shape="rect">
<area href="https://starwars.fandom.com/wiki/Endor" coords="3710,7818,3975,7951" shape="rect">
<area href="https://starwars.fandom.com/wiki/Batuu" coords="3710,7255,4025,7371" shape="rect">
<area href="https://starwars.fandom.com/wiki/Malastare" coords="6328,7959,5996,7843" shape="rect">
<area href="https://starwars.fandom.com/wiki/Bith_(planet)" coords="5930,8845,6079,8746" shape="rect">
<area href="https://starwars.fandom.com/wiki/The_Maw" coords="8812,4887,8961,5036" shape="rect">
<area href="https://starwars.fandom.com/wiki/Lothal" coords="9375,3793,9740,3628" shape="rect">
<area href="https://starwars.fandom.com/wiki/Telos_IV" coords="7255,2427,7636,2543" shape="rect">
<area href="https://starwars.fandom.com/wiki/Peragus_II" coords="8348,2510,7934,2427" shape="rect">
<area href="https://starwars.fandom.com/wiki/Cantonica" coords="9028,2510,8514,2410" shape="rect">
<area href="https://starwars.fandom.com/wiki/Western_Reaches" coords="3816,7780,3998,7513,4131,7609,4389,7761,4608,7828,4780,7876,5066,7943,5324,7952,5505,7962,5782,7943,5944,7914,6554,10452,5953,10557,5286,10585,5295,10270,4627,10223,4169,10099,3835,9994,3778,10137,3730,10290,3396,10156,3091,10032,2729,9803,2576,9708,2471,9650,3187,8639" shape="poly">
<area href="https://starwars.fandom.com/wiki/Unknown_Regions" coords="3997,7538,3692,7281,3635,7319,3539,7252,3348,7042,3148,6679,2995,6279,2957,6202,3062,6183,2995,5802,2881,5802,2900,5458,2957,5029,3053,4743,3167,4485,3339,4189,3510,3970,3749,3741,3902,3617,4121,3445,4245,3388,3988,2873,3644,2224,3386,1747,3234,1842,2938,2024,2671,2234,2566,2319,2251,1976,2060,2148,1850,2367,1621,2615,1412,2892,1154,3321,925,3789,686,4476,486,4466,419,4800,372,5220,362,5496,353,5954,410,6326,477,6699,591,7156,734,7509,896,7862,1059,8149,1192,8340,1364,8588,1564,8826,1726,9007,1927,9208,2108,9389,2261,9494,2432,9647,3501,8168" shape="poly">
<area href="https://starwars.fandom.com/wiki/New_Territories" coords="4646,4131,4331,3520,4055,2977,3749,2385,3444,1765,3320,1593,3597,1469,3931,1336,4284,1231,4207,897,4188,763,4503,677,4894,649,5429,620,5820,649,6287,687,6631,773,7098,887,7423,1030,7785,1221,8100,1412,8434,1641,8701,1822,9025,2137,9254,2414,9531,2757,9340,2919,8940,3196,8606,3396,8377,3559,8577,3912,8186,4122,7709,4351,7346,4551,7098,4684,6993,4751,6993,4694,6774,4694,6650,4503,6411,4274,6135,4112,5877,3998,5352,3921,5076,3959" shape="poly">
<area href="https://starwars.fandom.com/wiki/The_Slice" coords="6367,6693,6701,6311,6815,6016,6176,5825,6014,5644,5966,5376,5842,5167,6167,4852,6558,4518,6625,4470,6758,4651,6854,4861,7054,4728,7445,4508,8103,4193,8580,3917,8409,3554,9554,2762,9725,3010,10031,3583,10231,4088,10298,4508,10393,5100,10422,5453,10403,6121,10336,6502,10260,6903,10107,7332,9945,7733,9754,7657,9668,7847,9468,8143,9229,8487,8972,8802,9124,8954,8628,9422,8476,9269,8186,8920,7852,8520,7594,8224,7346,7938,7222,7757,7111,7599,6749,7170" shape="poly">
<area href="https://starwars.fandom.com/wiki/Trailing_Sectors" coords="4246,3425,4704,4293,4551,4389,4255,4684,3988,5133,3950,5305,3645,5266,3616,5534,3664,6030,3902,6545,3950,6650,4227,6469,4475,6755,4789,6927,5133,7041,5658,7022,5953,6927,6345,6717,8453,9283,8119,9541,7928,9655,7613,9836,7270,9989,6984,10104,6535,10237,6373,9531,6116,8501,6020,7995,5934,7900,5715,7938,5457,7947,5104,7938,4751,7861,4522,7766,4112,7575,3912,7413,3683,7251,3587,7232,3396,7051,3234,6774,3072,6411,2986,6211,3091,6192,3015,5820,2910,5782,2958,5209,3024,4904,3225,4436,3425,4093,3864,3654" shape="poly">
<area href="https://starwars.fandom.com/wiki/The_Interior" coords="5820,5142,6583,4465,6430,4322,6125,4131,5848,4007,5324,3940,5066,4007,4656,4141,4608,4236,4541,4341,4351,4532,4122,4761,3969,5266,3625,5286,3635,5848,3730,6220,3940,6640,4198,6478,4370,6640,4560,6822,4818,6927,5133,7022,5619,7022,5944,6907,6354,6698,6640,6421,6793,6030,6201,5839,6011,5667,5963,5400" shape="poly">
<area href="https://en.wikipedia.org/wiki/B" coords="1295,1293,81" shape="circle">
<area href="https://en.wikipedia.org/wiki/C" coords="1731,1296,76" shape="circle">
<area href="https://en.wikipedia.org/wiki/D" coords="2143,1306,90" shape="circle">
<area href="https://en.wikipedia.org/wiki/E" coords="2585,1321,96" shape="circle">
</map>
</body>
</html>
Binary file not shown.
@@ -0,0 +1,57 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8" lang="en">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>About</title>
</head>
<body>
<nav>
<ul>
<a href="index.html"><li>Ashton Pizzeria</li></a>
<a href="contact.html"><li>Contact Us</li></a>
<a href="about.html"><li>About</li></a>
<a href="order.html"><li id="spotlight">Order Now!</li></a>
</ul>
</nav>
<div class="cover-img">
<img src="img/outdoor-dining.jpg">
<h1>About</h1>
</div>
<main>
<p class="info">Ashton Pizzeria opened it's doors May 25, 2001.
Family-owned, Ashton Pizzeria was the stomach-child of Josh Ashton.
Working hard with his parents, Richard and Tracy, the trio spent years prior to the grand opening cultivating
and perfecting recipes for the pizzeria.
<br><br>
The Ashton's have a long history with pizza, with regularly made homemade pizzas each week.
Pizza wasn't just a food for the Ashton's: it was a lifestyle.
The Ashton's truly believe that everyone is happier when they have some pizza.
<br><br>
The next step was to make pizza as accessible as possible to anyone.
Not some frozen or processed pizza one finds at <span id="strike">Little Caesar's</span> other pizzeria's,
but true artisanal pizza made fresh for each customer.
<br><br>
We're still making pizza after 20 years, and our family will continue to make pizza for the next 20 years!
</p>
<br>
</main>
</body>
</html>
@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8" lang="en">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Contact</title>
</head>
<body>
<nav>
<ul>
<a href="index.html"><li>Ashton Pizzeria</li></a>
<a href="contact.html"><li>Contact Us</li></a>
<a href="about.html"><li>About</li></a>
<a href="order.html"><li id="spotlight">Order Now!</li></a>
</ul>
</nav>
<div class="cover-img">
<img src="img/hand-made2.jpg">
<h1>Contact</h1>
</div>
<main>
<p class="info">Please reach out with any feedback you have for us!
Just as we care about serving the best quality pizza, we also care about our service.
Let us know of any negative experiences, and especially all of your positive experiences!
We want to know when we're doing something right, and when we are not. Thank you!
</p>
<br>
<form id="contactForm" action="https://www.stonecoldprofessor.com/pizza-contact.php" method="post">
<div class="newRow">
<input type="text" name="first-name" placeholder="First Name">
<input type="text" name="last-name" placeholder="Last Name">
<input type="email" name="email" placeholder="jsmith@example.com">
</div>
<div class="newRow">
<textarea class="comment" name="message" placeholder="Reach out with any questions!"></textarea>
</div>
<div class="newRow">
<input type="reset" name="reset" id="reset">
<input type="submit" name="submit" id="submit">
</div>
</form>
</main>
</body>
</html>
@@ -0,0 +1,309 @@
/*GENERAL*/
:root {
--main-dark-color: #162521;
--main-offwhite-color: #F7F7FF;
--main-midtone-color: #9BC995;
--main-accent-color: #EEF36A;
--secondary-accent-color: #98B9AB;
}
* {
margin: auto;
position: relative;
font-family: Lato;
font-size: 1em;
color: var(--main-offwhite-color);
}
html {
background-color: var(--main-dark-color);
margin-bottom: 5em;
}
main {
max-width: 1200px;
}
h1 {
font-size: 10em;
padding-top: 1em;
padding-bottom: 1em;
text-align: center;
}
h2 {
font-size: 5em;
text-align: center;
}
h3 {
font-size: 2em;
text-align: center;
}
h4 {
font-size: 1.4em;
padding: .5em;
text-align: center;
color: var(--main-offwhite-color);
background-color: var(--main-midtone-color);
}
p.info {
font-size: .9em;
padding: 2em;
margin-top: 2em;
margin-bottom: 2em;
text-align: center;
width: 60%;
color: var(--main-offwhite-color);
background-color: var(--main-midtone-color);
}
.cover-img {
max-width: 100%;
display: flex;
overflow: hidden;
margin-bottom: 1em;
}
.cover-img > img {
max-width: 100%;
position: absolute;
}
.cover-img > h1 {
position: relative;
}
#strike {
text-decoration: line-through;
}
/*NAVIGATION BAR*/
nav,
nav ul,
nav ul a,
nav ul a li {
background-color: var(--main-midtone-color);
color: var(--main-offwhite-color);
text-align: center;
}
nav ul a {
display: inline-block;
text-decoration: none;
}
nav ul a li {
display: block;
padding: 1em;
font-size: larger;
list-style: none;
width: 6.8em;
border-radius: 10px;
transition: background-color 250ms, color 500ms;
}
nav ul a li:hover {
background-color: var(--main-accent-color);
color: var(--main-dark-color);
}
/*ORDER & CONTACT FORM*/
form {
width: 80%;
}
input {
padding: 1em;
margin: .5em;
font-size: 1.2em;
min-width: 6.1em;
border-radius: 10px;
border: none;
color: var(--main-dark-color);
background-color: var(--main-offwhite-color);
transition: 500ms;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=reset] {
background-color: var(--main-dark-color);
color: var(--main-offwhite-color);
}
input[type=reset]:hover {
background-color: var(--secondary-accent-color);
}
input[type=submit] {
background-color: var(--main-offwhite-color)
}
input[type=submit]:hover {
background-color: var(--main-accent-color);
}
input[type=number] {
-moz-appearance: textfield;
}
input[type="radio"], input[type="checkbox"] {
opacity: 0;
position: fixed;
width: 0;
}
label, label {
display: inline-block;
border: 2px solid var(--main-offwhite-color);
border-radius: 5px;
text-align: center;
padding: .5em;
margin: 0 2em 1em 2em;
transition: 500ms;
}
input[type="radio"]:checked + label, input[type="checkbox"]:checked + label {
background-color: var(--main-accent-color);
color: var(--main-dark-color);
}
input[type="radio"]:hover + label, input[type="checkbox"]:hover + label {
background-color: var(--main-accent-color);
color: var(--main-dark-color);
}
input[name="add1"], input[name="add2"] {
width: 100%;
}
input::placeholder, textarea::placeholder {
color: var(--main-midtone-color);
font-style: italic;
font-size: .8em;
}
input:focus, textarea.comment:focus {
background-color: var(--main-midtone-color);
color: var(--main-offwhite-color);
}
select {
border: 2px solid var(--main-offwhite-color);
border-radius: 5px;
text-align: center;
color: var(--main-offwhite-color);
background-color: var(--main-midtone-color);
}
div.newRow {
display: flex;
justify-content: center;
}
div.newRow > :not(input.address){
width: 50%;
}
textarea.comment {
border: 1px solid var(--main-offwhite-color);
border-radius: 5px;
background-color: var(--main-offwhite-color);
color: var(--main-dark-color);
padding: 1em;
height: 4em;
transition: 500ms;
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 8.4 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 MiB

@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8" lang="en">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Home</title>
</head>
<body>
<nav>
<ul>
<a href="index.html"><li>Ashton Pizzeria</li></a>
<a href="contact.html"><li>Contact Us</li></a>
<a href="about.html"><li>About</li></a>
<a href="order.html"><li id="spotlight">Order Now!</li></a>
</ul>
</nav>
<div class="cover-img">
<img src="img/pizza-oven.jpg">
<h1>Home</h1>
</div>
<main>
<h3>It's Pizza Time!</h3>
<p class="info">At Ashton Pizzeria, you'll taste world-class pizza prepared fresh for each customer.
Our recipes are tried and true, with over 20 years of raving reviews!
We're proud of our long-standing tradition of offering quality ingredients, quality chefs, for a quality pizza.<p>
<br>
</main>
</body>
</html>
@@ -0,0 +1,442 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8" lang="en">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Order</title>
</head>
<body>
<nav>
<ul>
<a href="index.html">
<li>Ashton Pizzeria</li>
</a>
<a href="contact.html">
<li>Contact Us</li>
</a>
<a href="about.html">
<li>About</li>
</a>
<a href="order.html">
<li id="spotlight">Order Now!</li>
</a>
</ul>
</nav>
<div class="cover-img">
<img src="img/fresh-veggies.jpg">
<h1>Order</h1>
</div>
<main>
<h3>Every pizza, made from scratch</h3>
<p class="info">Here at Ashton Pizzeria, we take tremendous pride in our award-winning pizza.
Every pizza is hand-made with fresh, all-natural ingredients,
and is cooking in our brick oven within 25 minutes of receiving an order.
With our free delivery service, you'll have your dream pizza within 40 minutes of placing an order.
</p>
<form action="https://www.stonecoldprofessor.com/pizza-order.php" method="post">
<h3>About You</h3>
<br>
<div class="newRow">
<input class="info" type="text" name="first" placeholder="First Name" required>
<input class="info" type="text" name="last" placeholder="Last Name" required>
</div>
<div class="newRow">
<input class="address info" type="text" name="add1" placeholder="Address 1" required>
</div>
<div class="newRow">
<input class="address info" type="text" name="add2" placeholder="Address 2">
</div>
<div class="newRow">
<input class="info" type="text" name="city" placeholder="City" required>
<select class="info" name="state" required>
<option value="AL">AL</option>
<option value="AK">AK</option>
<option value="AR">AR</option>
<option value="AZ">AZ</option>
<option value="CA">CA</option>
<option value="CO">CO</option>
<option value="CT">CT</option>
<option value="DC">DC</option>
<option value="DE">DE</option>
<option value="FL">FL</option>
<option value="GA">GA</option>
<option value="HI">HI</option>
<option value="IA">IA</option>
<option value="ID">ID</option>
<option value="IL">IL</option>
<option value="IN">IN</option>
<option value="KS">KS</option>
<option value="KY">KY</option>
<option value="LA">LA</option>
<option value="MA">MA</option>
<option value="MD">MD</option>
<option value="ME">ME</option>
<option value="MI">MI</option>
<option value="MN">MN</option>
<option value="MO">MO</option>
<option value="MS">MS</option>
<option value="MT">MT</option>
<option value="NC">NC</option>
<option value="NE">NE</option>
<option value="NH">NH</option>
<option value="NJ">NJ</option>
<option value="NM">NM</option>
<option value="NV">NV</option>
<option value="NY">NY</option>
<option value="ND">ND</option>
<option value="OH">OH</option>
<option value="OK">OK</option>
<option value="OR">OR</option>
<option value="PA">PA</option>
<option value="RI">RI</option>
<option value="SC">SC</option>
<option value="SD">SD</option>
<option value="TN">TN</option>
<option value="TX">TX</option>
<option value="UT">UT</option>
<option value="VT">VT</option>
<option value="VA">VA</option>
<option value="WA">WA</option>
<option value="WI">WI</option>
<option value="WV">WV</option>
<option value="WY">WY</option>
</select>
<input class="info" type="number" name="zip" placeholder="Zip" required>
</div>
<div class="newRow">
<input class="info" type="number" name="phone" placeholder="Phone Number">
<input class="info" type="email" name="email" placeholder="Email Address" required>
</div>
<br>
<h2>About your pizza</h2>
<br>
<!-- Radio options to choose pizza size, 10 options available. -->
<br>
<h4>SIZE</h4>
<br>
<div class="newRow">
<input id="XXS" type="radio" name="size" value="XXS">
<label for="XXS">ExtraExtra-Small | 6"</label><br>
<input id="XS" type="radio" name="size" value="XS">
<label for="XS">Extra-Small | 10"</label><br>
</div>
<div class="newRow">
<input id="S" type="radio" name="size" value="S">
<label for="S">Small | 12"</label><br>
<input id="M" type="radio" name="size" value="M">
<label for="M">Medium | 14"</label><br>
</div>
<div class="newRow">
<input id="L" type="radio" name="size" value="L">
<label for="L">Large | 16"</label><br>
<input id="XL" type="radio" name="size" value="XL">
<label for="XL">Extra-Large | 20"</label><br>
</div>
<div class="newRow">
<input id="XXL" type="radio" name="size" value="XXL">
<label for="XXL">ExtraExtra-Large | 24"</label><br>
<input id="XXXL" type="radio" name="size" value="XXXL">
<label for="XXXL">Triple-Large | 30"</label><br>
</div>
<div class="newRow">
<input id="XXXXL" type="radio" name="size" value="XXXXL">
<label for="XXXXL">Quadro-Large | 36"</label><br>
<input id="XXXXXL" type="radio" name="size" value="XXXXXL">
<label for="XXXXXL">Quinti-Large | 50"</label><br>
</div>
<!-- Radio options for crust selection, 10 options available. Drop-down does not make sense for either the size or crust, so the dropdown was implemented for the customer's state selection. -->
<br>
<h4>CRUST</h4>
<br>
<div class="newRow">
<input id="pan" type="radio" name="crust" value="pan">
<label for="pan">Pan</label><br>
<input id="thin" type="radio" name="crust" value="thin">
<label for="thin">Thin</label><br>
</div>
<div class="newRow">
<input id="deep" type="radio" name="crust" value="deep">
<label for="deep">Deep Dish</label><br>
<input id="neo" type="radio" name="crust" value="neo">
<label for="neo">Neopolitan</label><br>
</div>
<div class="newRow">
<input id="flat" type="radio" name="crust" value="flatbread">
<label for="flat">Flat Bread</label><br>
<input id="cracker" type="radio" name="crust" value="cracker">
<label for="cracker">Cracker</label><br>
</div>
<div class="newRow">
<input id="baconWrap" type="radio" name="crust" value="baconWrap">
<label for="baconWrap">Bacon-wrapped</label><br>
<input id="garlicCrust" type="radio" name="crust" value="garlicCrust">
<label for="garlicCrust">Garlic</label><br>
</div>
<div class="newRow">
<input id="stuffed" type="radio" name="crust" value="stuffed">
<label for="stuffed">Stuffed</label><br>
<input id="gluten-free" type="radio" name="crust" value="gluten-free">
<label for="gluten-free">Gluten-Free</label><br>
</div>
<!-- Toppings covers four areas: meats, greens, sauces, and cheeses.
Meats, greens, and cheeses are checkbox options (ie. multiple can be selected at once) while the selection of sauce is a radio option (only one selection allowed).
34 toppings options available.-->
<br>
<h2>Toppings</h2>
<br>
<!-- MEATS -->
<br>
<h4>MEATS</h4>
<br>
<div class="newRow">
<input type="checkbox" name="toppings[]" id="baconBits">
<label for="baconBits">Bacon Bits</label>
<input type="checkbox" name="toppings[]" id="ham">
<label for="ham">Ham</label>
</div>
<div class="newRow">
<input type="checkbox" name="toppings[]" id="sausageHot">
<label for="sausageHot">Hot Sausage</label>
<input type="checkbox" name="toppings[]" id="baconStrips">
<label for="baconStrips">Bacon Strips</label>
</div>
<div class="newRow">
<input type="checkbox" name="toppings[]" id="chicken">
<label for="chicken">Chicken</label>
<input type="checkbox" name="toppings[]" id="beef">
<label for="beef">Ground Beef</label>
</div>
<div class="newRow">
<input type="checkbox" name="toppings[]" id="pep">
<label for="pep">Pepperoni</label>
<input type="checkbox" name="toppings[]" id="sausageMild">
<label for="sausageMild">Mild Sausage</label>
</div>
<div class="newRow">
<input type="checkbox" name="toppings[]" id="steak">
<label for="steak">Steak</label>
<input type="checkbox" name="toppings[]" id="anchovies">
<label for="anchovies">Anchovies</label>
</div>
<!-- VEGETABLES -->
<br>
<h4>GREENS</h4>
<br>
<div class="newRow">
<input type="checkbox" name="toppings[]" id="tomatoes">
<label for="tomatoes">Tomatoes</label>
<input type="checkbox" name="toppings[]" id="sunTomatoes">
<label for="sunTomatoes">Sun-Dried Tomatoes</label>
</div>
<div class="newRow">
<input type="checkbox" name="toppings[]" id="olivesBlack">
<label for="olivesBlack">Black Olives</label>
<input type="checkbox" name="toppings[]" id="olivesGreen">
<label for="olivesGreen">Olives Green</label>
</div>
<div class="newRow">
<input type="checkbox" name="toppings[]" id="spinach">
<label for="spinach">Spinach</label>
<input type="checkbox" name="toppings[]" id="broccoli">
<label for="broccoli">Broccoli</label>
</div>
<div class="newRow">
<input type="checkbox" name="toppings[]" id="pepperRed">
<label for="pepperRed">Roasted Red Peppers</label>
<input type="checkbox" name="toppings[]" id="pepperGreen">
<label for="pepperGreen">Green Peppers</label>
</div>
<div class="newRow">
<input type="checkbox" name="toppings[]" id="pepperBanana">
<label for="pepperBanana">Banana Peppers</label>
<input type="checkbox" name="toppings[]" id="jalepenos">
<label for="jalepenos">Jalepenos</label>
</div>
<div class="newRow">
<input type="checkbox" name="toppings[]" id="pineapple">
<label for="pineapple">Pineapple</label>
<input type="checkbox" name="toppings[]" id="mushrooms">
<label for="mushrooms">Mushrooms</label>
</div>
<div class="newRow">
<input type="checkbox" name="toppings[]" id="onion">
<label for="onion">Onion</label>
<input type="checkbox" name="toppings[]" id="avacado">
<label for="avacado">Avacado</label>
</div>
<!-- SAUCES -->
<br>
<h4>SAUCES</h4>
<br>
<div class="newRow">
<input type="radio" name="toppings[]" id="marinara" value="marinara">
<label for="marinara">Marinara</label>
<input type="radio" name="toppings[]" id="ranch" value="ranch">
<label for="ranch">Ranch</label>
</div>
<div class="newRow">
<input type="radio" name="toppings[]" id="alfredo" value="alfredo">
<label for="alfredo">Alfredo</label>
<input type="radio" name="toppings[]" id="sauceBBQ" value="sauceBBQ">
<label for="sauceBBQ">Barbeque</label>
</div>
<div class="newRow">
<input type="radio" name="toppings[]" id="pesto" value="pesto">
<label for="pesto">Pesto</label>
<input type="radio" name="toppings[]" id="whiteGarlic" value="whiteGarlic">
<label for="whiteGarlic">White Garlic</label>
</div>
<!-- CHEESES -->
<br>
<h4>CHEESE</h4>
<br>
<div class="newRow">
<input type="checkbox" name="toppings[]" id="ricotta">
<label for="ricotta">Ricotta</label>
<input type="checkbox" name="toppings[]" id="feta">
<label for="feta">Feta</label>
</div>
<div class="newRow">
<input type="checkbox" name="toppings[]" id="blue">
<label for="blue">Blue Cheese</label>
<input type="checkbox" name="toppings[]" id="provolone">
<label for="provolone">Provolone</label>
</div>
<br>
<div class="newRow">
<textarea class="comment" name="comment" placeholder="Anything else? Let us know!"></textarea>
</div>
<br>
<div class="newRow">
<input type="reset" name="reset" id="reset">
<input type="submit" name="submit" id="submit">
</div>
</form>
</main>
</body>
</html>