restore public_html
This commit is contained in:
Josh Ashton
Vendored
BIN
Binary file not shown.
@@ -0,0 +1,8 @@
|
||||
|
||||
|
||||
# php -- BEGIN cPanel-generated handler, do not edit
|
||||
# Set the “ea-php80” package as the default “PHP” programming language.
|
||||
<IfModule mime_module>
|
||||
AddHandler application/x-httpd-ea-php80___lsphp .php .php8 .phtml
|
||||
</IfModule>
|
||||
# php -- END cPanel-generated handler, do not edit
|
||||
@@ -0,0 +1,45 @@
|
||||
.navbar {
|
||||
|
||||
border: none;
|
||||
|
||||
}
|
||||
|
||||
.bg-dark {
|
||||
|
||||
background-color: #4A245E;
|
||||
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-nav > li > a {
|
||||
|
||||
color: white;
|
||||
transition: color 300ms;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
|
||||
transition: background-color 300ms;
|
||||
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
|
||||
background-color: white;
|
||||
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-nav > li > a:focus, .navbar-inverse .navbar-nav > li > a:hover {
|
||||
|
||||
color: #4A245E;
|
||||
background-color: transparent;
|
||||
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-nav > .active > a,
|
||||
.navbar-inverse .navbar-nav > .active > a:hover,
|
||||
.navbar-inverse .navbar-nav > .active > a:focus {
|
||||
|
||||
background-color: white;
|
||||
color: #4A245E;
|
||||
|
||||
}
|
||||
@@ -0,0 +1,244 @@
|
||||
/* GENERAL */
|
||||
body {
|
||||
|
||||
margin:0;
|
||||
height:100vh;
|
||||
background:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
hsl(279deg 33% 47%) 0%,
|
||||
hsl(279deg 40% 33%) 39%,
|
||||
hsl(279deg 62% 19%) 61%,
|
||||
hsl(279deg 94% 7%) 100%
|
||||
);
|
||||
background-size:300% 100%,cover;
|
||||
animation:change 4s linear infinite;
|
||||
animation-direction: alternate;
|
||||
background-attachment: fixed;
|
||||
|
||||
}
|
||||
|
||||
@keyframes change {
|
||||
|
||||
from {
|
||||
|
||||
background-position: right,center;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
/* TEXT */
|
||||
* {
|
||||
|
||||
font-family: Lato, sans-serif;
|
||||
color: white;
|
||||
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
||||
margin: 5vw 0 5vw 0;
|
||||
font-size: 8vw;
|
||||
|
||||
}
|
||||
|
||||
|
||||
h2 {
|
||||
|
||||
font-size: 4vw;
|
||||
|
||||
}
|
||||
|
||||
h3 {
|
||||
|
||||
font-size: 3vw;
|
||||
|
||||
}
|
||||
|
||||
p {
|
||||
|
||||
font-size: 2vw;
|
||||
|
||||
}
|
||||
|
||||
.dark-text {
|
||||
|
||||
color: #4A245E;
|
||||
|
||||
}
|
||||
|
||||
.light-text {
|
||||
|
||||
color: white;
|
||||
|
||||
}
|
||||
|
||||
/* NAV-BAR */
|
||||
.bg-light {
|
||||
|
||||
background-color: white !important;
|
||||
padding: 0;
|
||||
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
|
||||
padding-left: .5vw;
|
||||
color: #4A245E;
|
||||
font-size: 2vw;
|
||||
font-weight: bold;
|
||||
|
||||
animation: 500ms;
|
||||
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
|
||||
border: none;
|
||||
|
||||
}
|
||||
|
||||
.navbar-toggler:focus {
|
||||
|
||||
box-shadow: none;
|
||||
border:none;
|
||||
|
||||
}
|
||||
|
||||
.navbar-light .navbar-toggler-icon {
|
||||
|
||||
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(74, 36, 94, 1)' stroke-width='3.5' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
|
||||
|
||||
}
|
||||
|
||||
.navbar-brand:hover {
|
||||
|
||||
color: #4A245E;
|
||||
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
|
||||
padding: 1.5vw;
|
||||
|
||||
}
|
||||
|
||||
.nav-link, .nav-link > .nav-item {
|
||||
|
||||
color: #4A245E;
|
||||
font-size: 1.3vw;
|
||||
|
||||
animation: 500ms;
|
||||
|
||||
}
|
||||
|
||||
.nav-link:hover, .nav-link:hover > .nav-item {
|
||||
|
||||
color: white;
|
||||
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
|
||||
background-color: #4A245E;
|
||||
|
||||
}
|
||||
|
||||
/* MISC */
|
||||
|
||||
.custom-container {
|
||||
|
||||
align-content: center;
|
||||
|
||||
padding: 5vw;
|
||||
|
||||
width: 90% !important;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
}
|
||||
|
||||
.bar {
|
||||
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-top: 5px #4A245E solid;
|
||||
padding-bottom: 1vw;
|
||||
|
||||
}
|
||||
|
||||
#quoter {
|
||||
|
||||
background-color: white;
|
||||
color: #4A245E;
|
||||
|
||||
}
|
||||
|
||||
#getNewQuote {
|
||||
|
||||
margin-top: 5vw;
|
||||
font-size: 2vw;
|
||||
border: 5px #4A245E solid;
|
||||
border-radius: 1vw;
|
||||
padding: 1vw;
|
||||
background-color: #4A245E;
|
||||
color: white;
|
||||
|
||||
animation: 500ms;
|
||||
|
||||
}
|
||||
|
||||
#getNewQuote:hover {
|
||||
|
||||
background-color: white;
|
||||
color: #4A245E;
|
||||
border: 5px #4A245E solid;
|
||||
|
||||
}
|
||||
|
||||
#person {
|
||||
|
||||
padding: 1vw;
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
|
||||
h1 {
|
||||
|
||||
font-size: 12vw;
|
||||
|
||||
}
|
||||
|
||||
h2 {
|
||||
|
||||
font-size: 8vw;
|
||||
|
||||
}
|
||||
|
||||
h3, .navbar-brand {
|
||||
|
||||
font-size: 6vw;
|
||||
|
||||
}
|
||||
|
||||
p, #getNewQuote, .nav-link, .nav-link > .nav-item {
|
||||
|
||||
font-size: 3vw;
|
||||
|
||||
}
|
||||
|
||||
.nav-link > .nav-item {
|
||||
|
||||
font-weight: bold;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
BIN
Binary file not shown.
@@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" type="text/css" href="css/style.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>About</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
|
||||
<ul>
|
||||
|
||||
<a href="index.html"><li>Home</li></a>
|
||||
<a href="contact.html"><li>Contact</li></a>
|
||||
<a href="about.html"><li>About</li></a>
|
||||
<a href="order.html"><li>Order</li></a>
|
||||
|
||||
</ul>
|
||||
|
||||
<h1>About</h1>
|
||||
|
||||
</nav>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consectetur lorem donec massa sapien faucibus et molestie ac. Senectus et netus et malesuada fames ac turpis. Integer malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Libero justo laoreet sit amet cursus. Montes nascetur ridiculus mus mauris vitae ultricies leo. Eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Habitant morbi tristique senectus et netus et malesuada fames. Ultricies integer quis auctor elit sed vulputate mi sit. Nullam ac tortor vitae purus faucibus ornare.</p>
|
||||
|
||||
<p>Elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Massa enim nec dui nunc mattis enim ut tellus. Ipsum suspendisse ultrices gravida dictum fusce ut placerat orci. Sapien pellentesque habitant morbi tristique senectus et netus et. Potenti nullam ac tortor vitae. Pharetra vel turpis nunc eget lorem dolor sed viverra. Amet risus nullam eget felis eget nunc lobortis. Pretium quam vulputate dignissim suspendisse in. Lacus laoreet non curabitur gravida arcu. Sit amet tellus cras adipiscing. Ut morbi tincidunt augue interdum velit euismod in. Sed id semper risus in hendrerit. Placerat orci nulla pellentesque dignissim enim sit. Sollicitudin ac orci phasellus egestas tellus. Convallis posuere morbi leo urna molestie at. In vitae turpis massa sed. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Eget arcu dictum varius duis.</p>
|
||||
|
||||
<p>Faucibus pulvinar elementum integer enim neque volutpat ac. Ut lectus arcu bibendum at varius vel. Viverra nam libero justo laoreet sit amet cursus sit amet. Elit at imperdiet dui accumsan sit amet nulla facilisi morbi. Urna molestie at elementum eu facilisis. Non diam phasellus vestibulum lorem sed. Cras semper auctor neque vitae tempus. In hendrerit gravida rutrum quisque non tellus orci ac auctor. Cursus euismod quis viverra nibh cras pulvinar mattis nunc. Leo a diam sollicitudin tempor id eu nisl.</p>
|
||||
|
||||
<p>Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Urna neque viverra justo nec. Nec sagittis aliquam malesuada bibendum arcu. Sit amet consectetur adipiscing elit ut aliquam purus sit. Vestibulum lorem sed risus ultricies tristique nulla aliquet enim tortor. Massa tempor nec feugiat nisl pretium fusce id. Potenti nullam ac tortor vitae purus. Tortor at auctor urna nunc id cursus metus aliquam eleifend. Amet massa vitae tortor condimentum lacinia quis vel. Nulla facilisi cras fermentum odio eu. Elit pellentesque habitant morbi tristique senectus et netus et. Cursus in hac habitasse platea dictumst quisque sagittis. Sit amet porttitor eget dolor morbi non arcu. Nunc sed id semper risus.</p>
|
||||
|
||||
<p>Commodo quis imperdiet massa tincidunt nunc. In massa tempor nec feugiat nisl pretium fusce. Congue nisi vitae suscipit tellus mauris a. Quis eleifend quam adipiscing vitae proin sagittis nisl. Accumsan sit amet nulla facilisi. Vel pharetra vel turpis nunc eget lorem. Sed odio morbi quis commodo. Blandit libero volutpat sed cras ornare arcu dui vivamus. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci a. Interdum posuere lorem ipsum dolor sit amet consectetur. Condimentum lacinia quis vel eros donec ac odio tempor orci. Laoreet sit amet cursus sit amet dictum. Urna nunc id cursus metus.</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" type="text/css" href="css/style.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Contact</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
|
||||
<ul>
|
||||
|
||||
<a href="index.html"><li>Home</li></a>
|
||||
<a href="contact.html"><li>Contact</li></a>
|
||||
<a href="about.html"><li>About</li></a>
|
||||
<a href="order.html"><li>Order</li></a>
|
||||
|
||||
</ul>
|
||||
|
||||
<h1>Contact</h1>
|
||||
|
||||
</nav>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consectetur lorem donec massa sapien faucibus et molestie ac. Senectus et netus et malesuada fames ac turpis. Integer malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Libero justo laoreet sit amet cursus. Montes nascetur ridiculus mus mauris vitae ultricies leo. Eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Habitant morbi tristique senectus et netus et malesuada fames. Ultricies integer quis auctor elit sed vulputate mi sit. Nullam ac tortor vitae purus faucibus ornare.</p>
|
||||
|
||||
<p>Elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Massa enim nec dui nunc mattis enim ut tellus. Ipsum suspendisse ultrices gravida dictum fusce ut placerat orci. Sapien pellentesque habitant morbi tristique senectus et netus et. Potenti nullam ac tortor vitae. Pharetra vel turpis nunc eget lorem dolor sed viverra. Amet risus nullam eget felis eget nunc lobortis. Pretium quam vulputate dignissim suspendisse in. Lacus laoreet non curabitur gravida arcu. Sit amet tellus cras adipiscing. Ut morbi tincidunt augue interdum velit euismod in. Sed id semper risus in hendrerit. Placerat orci nulla pellentesque dignissim enim sit. Sollicitudin ac orci phasellus egestas tellus. Convallis posuere morbi leo urna molestie at. In vitae turpis massa sed. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Eget arcu dictum varius duis.</p>
|
||||
|
||||
<p>Faucibus pulvinar elementum integer enim neque volutpat ac. Ut lectus arcu bibendum at varius vel. Viverra nam libero justo laoreet sit amet cursus sit amet. Elit at imperdiet dui accumsan sit amet nulla facilisi morbi. Urna molestie at elementum eu facilisis. Non diam phasellus vestibulum lorem sed. Cras semper auctor neque vitae tempus. In hendrerit gravida rutrum quisque non tellus orci ac auctor. Cursus euismod quis viverra nibh cras pulvinar mattis nunc. Leo a diam sollicitudin tempor id eu nisl.</p>
|
||||
|
||||
<p>Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Urna neque viverra justo nec. Nec sagittis aliquam malesuada bibendum arcu. Sit amet consectetur adipiscing elit ut aliquam purus sit. Vestibulum lorem sed risus ultricies tristique nulla aliquet enim tortor. Massa tempor nec feugiat nisl pretium fusce id. Potenti nullam ac tortor vitae purus. Tortor at auctor urna nunc id cursus metus aliquam eleifend. Amet massa vitae tortor condimentum lacinia quis vel. Nulla facilisi cras fermentum odio eu. Elit pellentesque habitant morbi tristique senectus et netus et. Cursus in hac habitasse platea dictumst quisque sagittis. Sit amet porttitor eget dolor morbi non arcu. Nunc sed id semper risus.</p>
|
||||
|
||||
<p>Commodo quis imperdiet massa tincidunt nunc. In massa tempor nec feugiat nisl pretium fusce. Congue nisi vitae suscipit tellus mauris a. Quis eleifend quam adipiscing vitae proin sagittis nisl. Accumsan sit amet nulla facilisi. Vel pharetra vel turpis nunc eget lorem. Sed odio morbi quis commodo. Blandit libero volutpat sed cras ornare arcu dui vivamus. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci a. Interdum posuere lorem ipsum dolor sit amet consectetur. Condimentum lacinia quis vel eros donec ac odio tempor orci. Laoreet sit amet cursus sit amet dictum. Urna nunc id cursus metus.</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,80 @@
|
||||
* {
|
||||
|
||||
margin: 0;
|
||||
|
||||
}
|
||||
|
||||
body {
|
||||
|
||||
font-family: Lato, sans-serif;
|
||||
background-color: #4A245E;
|
||||
|
||||
}
|
||||
|
||||
ul {
|
||||
|
||||
float: right;
|
||||
margin-top: .6em;
|
||||
|
||||
}
|
||||
|
||||
nav {
|
||||
|
||||
background-color: white;
|
||||
|
||||
}
|
||||
|
||||
li {
|
||||
|
||||
padding-top: .5em;
|
||||
padding-bottom: .5em;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
|
||||
display: inline-block;
|
||||
background-color: #4A245E;
|
||||
|
||||
}
|
||||
|
||||
li:hover {
|
||||
|
||||
background-color: white;
|
||||
color: #4A245E;
|
||||
|
||||
}
|
||||
|
||||
a {
|
||||
|
||||
font-size: 2em;
|
||||
font-style: normal;
|
||||
background-color: #4A245E;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
|
||||
}
|
||||
|
||||
a:hover {
|
||||
|
||||
background-color: white;
|
||||
color: #4A245E;
|
||||
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
||||
padding-left: 1em;
|
||||
|
||||
font-size: 5em;
|
||||
color: #4A245E;
|
||||
|
||||
}
|
||||
|
||||
p {
|
||||
|
||||
font-size: 1em;
|
||||
color: white;
|
||||
padding: 1em;
|
||||
padding-bottom: 2em;
|
||||
text-align: justify;
|
||||
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" type="text/css" href="css/style.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Home</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
|
||||
<ul>
|
||||
|
||||
<a href="index.html"><li>Home</li></a>
|
||||
<a href="contact.html"><li>Contact</li></a>
|
||||
<a href="about.html"><li>About</li></a>
|
||||
<a href="order.html"><li>Order</li></a>
|
||||
|
||||
</ul>
|
||||
|
||||
<h1>Home</h1>
|
||||
|
||||
</nav>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consectetur lorem donec massa sapien faucibus et molestie ac. Senectus et netus et malesuada fames ac turpis. Integer malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Libero justo laoreet sit amet cursus. Montes nascetur ridiculus mus mauris vitae ultricies leo. Eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Habitant morbi tristique senectus et netus et malesuada fames. Ultricies integer quis auctor elit sed vulputate mi sit. Nullam ac tortor vitae purus faucibus ornare.</p>
|
||||
|
||||
<p>Elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Massa enim nec dui nunc mattis enim ut tellus. Ipsum suspendisse ultrices gravida dictum fusce ut placerat orci. Sapien pellentesque habitant morbi tristique senectus et netus et. Potenti nullam ac tortor vitae. Pharetra vel turpis nunc eget lorem dolor sed viverra. Amet risus nullam eget felis eget nunc lobortis. Pretium quam vulputate dignissim suspendisse in. Lacus laoreet non curabitur gravida arcu. Sit amet tellus cras adipiscing. Ut morbi tincidunt augue interdum velit euismod in. Sed id semper risus in hendrerit. Placerat orci nulla pellentesque dignissim enim sit. Sollicitudin ac orci phasellus egestas tellus. Convallis posuere morbi leo urna molestie at. In vitae turpis massa sed. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Eget arcu dictum varius duis.</p>
|
||||
|
||||
<p>Faucibus pulvinar elementum integer enim neque volutpat ac. Ut lectus arcu bibendum at varius vel. Viverra nam libero justo laoreet sit amet cursus sit amet. Elit at imperdiet dui accumsan sit amet nulla facilisi morbi. Urna molestie at elementum eu facilisis. Non diam phasellus vestibulum lorem sed. Cras semper auctor neque vitae tempus. In hendrerit gravida rutrum quisque non tellus orci ac auctor. Cursus euismod quis viverra nibh cras pulvinar mattis nunc. Leo a diam sollicitudin tempor id eu nisl.</p>
|
||||
|
||||
<p>Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Urna neque viverra justo nec. Nec sagittis aliquam malesuada bibendum arcu. Sit amet consectetur adipiscing elit ut aliquam purus sit. Vestibulum lorem sed risus ultricies tristique nulla aliquet enim tortor. Massa tempor nec feugiat nisl pretium fusce id. Potenti nullam ac tortor vitae purus. Tortor at auctor urna nunc id cursus metus aliquam eleifend. Amet massa vitae tortor condimentum lacinia quis vel. Nulla facilisi cras fermentum odio eu. Elit pellentesque habitant morbi tristique senectus et netus et. Cursus in hac habitasse platea dictumst quisque sagittis. Sit amet porttitor eget dolor morbi non arcu. Nunc sed id semper risus.</p>
|
||||
|
||||
<p>Commodo quis imperdiet massa tincidunt nunc. In massa tempor nec feugiat nisl pretium fusce. Congue nisi vitae suscipit tellus mauris a. Quis eleifend quam adipiscing vitae proin sagittis nisl. Accumsan sit amet nulla facilisi. Vel pharetra vel turpis nunc eget lorem. Sed odio morbi quis commodo. Blandit libero volutpat sed cras ornare arcu dui vivamus. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci a. Interdum posuere lorem ipsum dolor sit amet consectetur. Condimentum lacinia quis vel eros donec ac odio tempor orci. Laoreet sit amet cursus sit amet dictum. Urna nunc id cursus metus.</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" type="text/css" href="css/style.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Order</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
|
||||
<ul>
|
||||
|
||||
<a href="index.html"><li>Home</li></a>
|
||||
<a href="contact.html"><li>Contact</li></a>
|
||||
<a href="about.html"><li>About</li></a>
|
||||
<a href="order.html"><li>Order</li></a>
|
||||
|
||||
</ul>
|
||||
|
||||
<h1>Order</h1>
|
||||
|
||||
</nav>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consectetur lorem donec massa sapien faucibus et molestie ac. Senectus et netus et malesuada fames ac turpis. Integer malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Libero justo laoreet sit amet cursus. Montes nascetur ridiculus mus mauris vitae ultricies leo. Eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Habitant morbi tristique senectus et netus et malesuada fames. Ultricies integer quis auctor elit sed vulputate mi sit. Nullam ac tortor vitae purus faucibus ornare.</p>
|
||||
|
||||
<p>Elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Massa enim nec dui nunc mattis enim ut tellus. Ipsum suspendisse ultrices gravida dictum fusce ut placerat orci. Sapien pellentesque habitant morbi tristique senectus et netus et. Potenti nullam ac tortor vitae. Pharetra vel turpis nunc eget lorem dolor sed viverra. Amet risus nullam eget felis eget nunc lobortis. Pretium quam vulputate dignissim suspendisse in. Lacus laoreet non curabitur gravida arcu. Sit amet tellus cras adipiscing. Ut morbi tincidunt augue interdum velit euismod in. Sed id semper risus in hendrerit. Placerat orci nulla pellentesque dignissim enim sit. Sollicitudin ac orci phasellus egestas tellus. Convallis posuere morbi leo urna molestie at. In vitae turpis massa sed. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Eget arcu dictum varius duis.</p>
|
||||
|
||||
<p>Faucibus pulvinar elementum integer enim neque volutpat ac. Ut lectus arcu bibendum at varius vel. Viverra nam libero justo laoreet sit amet cursus sit amet. Elit at imperdiet dui accumsan sit amet nulla facilisi morbi. Urna molestie at elementum eu facilisis. Non diam phasellus vestibulum lorem sed. Cras semper auctor neque vitae tempus. In hendrerit gravida rutrum quisque non tellus orci ac auctor. Cursus euismod quis viverra nibh cras pulvinar mattis nunc. Leo a diam sollicitudin tempor id eu nisl.</p>
|
||||
|
||||
<p>Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Urna neque viverra justo nec. Nec sagittis aliquam malesuada bibendum arcu. Sit amet consectetur adipiscing elit ut aliquam purus sit. Vestibulum lorem sed risus ultricies tristique nulla aliquet enim tortor. Massa tempor nec feugiat nisl pretium fusce id. Potenti nullam ac tortor vitae purus. Tortor at auctor urna nunc id cursus metus aliquam eleifend. Amet massa vitae tortor condimentum lacinia quis vel. Nulla facilisi cras fermentum odio eu. Elit pellentesque habitant morbi tristique senectus et netus et. Cursus in hac habitasse platea dictumst quisque sagittis. Sit amet porttitor eget dolor morbi non arcu. Nunc sed id semper risus.</p>
|
||||
|
||||
<p>Commodo quis imperdiet massa tincidunt nunc. In massa tempor nec feugiat nisl pretium fusce. Congue nisi vitae suscipit tellus mauris a. Quis eleifend quam adipiscing vitae proin sagittis nisl. Accumsan sit amet nulla facilisi. Vel pharetra vel turpis nunc eget lorem. Sed odio morbi quis commodo. Blandit libero volutpat sed cras ornare arcu dui vivamus. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci a. Interdum posuere lorem ipsum dolor sit amet consectetur. Condimentum lacinia quis vel eros donec ac odio tempor orci. Laoreet sit amet cursus sit amet dictum. Urna nunc id cursus metus.</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Vendored
BIN
Binary file not shown.
BIN
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;
|
||||
|
||||
}
|
||||
BIN
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&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>
|
||||
BIN
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>
|
||||
Binary file not shown.
@@ -0,0 +1,107 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
|
||||
|
||||
|
||||
<!-- CSS only -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
|
||||
<link href="css/style.css" rel="stylesheet">
|
||||
|
||||
<audio>
|
||||
<source src="img/notify.mp3"/>
|
||||
Your browser isn't invited for super fun audio time.
|
||||
</audio>
|
||||
|
||||
<title>Joshua Ashton</title>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Navigation -->
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
<a class="navbar-brand" href="">Josh Ashton</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav nav-fill w-100">
|
||||
<a class="nav-link" target="_blank" href="tables">
|
||||
<li class="nav-item">YouTube</li>
|
||||
</a>
|
||||
<a class="nav-link" target="_blank" href="image-map">
|
||||
<li class="nav-item">Map</li>
|
||||
</a>
|
||||
<a class="nav-link" target="_blank" href="superheroes">
|
||||
<li class="nav-item">Heroes</li>
|
||||
</a>
|
||||
<a class="nav-link" target="_blank" href="little-boxes">
|
||||
<li class="nav-item">Boxes</li>
|
||||
</a>
|
||||
<a class="nav-link" target="_blank" href="horizontal-menu">
|
||||
<li class="nav-item">Menus</li>
|
||||
</a>
|
||||
<a class="nav-link" target="_blank" href="pizza-2">
|
||||
<li class="nav-item">Pizza</li>
|
||||
</a>
|
||||
<a class="nav-link" target="_blank" href="js-birthday">
|
||||
<li class="nav-item">Birthday</li>
|
||||
</a>
|
||||
<a class="nav-link" target="_blank" href="lottery">
|
||||
<li class="nav-item">Lottery</li>
|
||||
</a>
|
||||
<a class="nav-link" target="_blank" href="mad-lib">
|
||||
<li class="nav-item">Mad Libs</li>
|
||||
</a>
|
||||
<a class="nav-link" target="_blank" href="tic-tac-toe">
|
||||
<li class="nav-item">Tic-Tac-Toe</li>
|
||||
</a>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="custom-container" id="splash">
|
||||
|
||||
<h1 class="light-text">Hi, I'm Josh Ashton!</h1>
|
||||
|
||||
<h2 class="light-text">Aspiring developer at SLCC</h2>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="custom-container" id="quoter">
|
||||
|
||||
<h2 class="dark-text">Random Quote Generator</h2>
|
||||
|
||||
<span class="bar"></span>
|
||||
|
||||
<h3 class="dark-text" id="quote">"Hello there!"</h3>
|
||||
<p class="dark-text" id="person">-Obi-Wan Kenobi</p>
|
||||
|
||||
<button class="light-text" id="getNewQuote" onclick="getQuote()">New Quote</button>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="custom-container">
|
||||
|
||||
<h2 class="light-text">Reflection</h2>
|
||||
<p>One of the things that made this web development class so enjoyable was the immediate application of the concepts we were learning. After learning new concepts, we had the opportunity to put those concepts into practice right away through hands-on projects. It was very satisfying to see my own creations come to life and be able to apply the skills I was learning in a real-world context.</p>
|
||||
<p>Another aspect of the coursework that I found enjoyable was the variety of projects we worked on. We covered a range of topics, from basic HTML and CSS to more advanced concepts like responsive design and JavaScript. Each project presented a new challenge and allowed me to explore different areas of web development. I really appreciated the opportunity to try out different techniques and approaches, and it helped to keep things interesting and engaging.</p>
|
||||
<p>Overall, I found the web development class to be a highly enjoyable and rewarding learning experience. The combination of clear explanations, hands-on projects, and a supportive instructor made it a truly enjoyable experience.</p>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
<footer>
|
||||
|
||||
<!-- JavaScript Bundle with Popper -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
|
||||
<script src="js/script.js"></script>
|
||||
|
||||
</footer>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,19 @@
|
||||
body {
|
||||
|
||||
background-color: rgb(57, 36, 57);
|
||||
color: white;
|
||||
font-family: Lato, Helvetica, sans-serif;
|
||||
|
||||
}
|
||||
|
||||
h1, p {
|
||||
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
||||
font-size: 5em;
|
||||
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0" lang="en">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<script src="js/script.js"></script>
|
||||
<title>JS Birthday</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 id="personalizedGreetings"></h1>
|
||||
|
||||
<p>It's your special time of the year, where you're another year older! What new adventures await for the next year? Only time will tell...</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,17 @@
|
||||
var userName = prompt("What is your name?");
|
||||
var userAge = prompt("What is your age?");
|
||||
|
||||
if(userAge < 50) {
|
||||
|
||||
alert("Welcome, " + userName +"! You're " + userAge + ". You're so young!");
|
||||
|
||||
} else {
|
||||
|
||||
alert("Welcome, " + userName +"! You're " + userAge + ".\n\nWhat was it like when dinosaurs roamed the Earth?");
|
||||
|
||||
}
|
||||
window.onload = function() {
|
||||
|
||||
document.getElementById('personalizedGreetings').innerHTML = "Happy " + userAge + " birthday, " + userName + "!"
|
||||
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
const quotes = [
|
||||
"The greatest glory in living lies not in never falling, but in rising every time we fall.",
|
||||
"The way to get started is to quit talking and begin doing.",
|
||||
"Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma – which is living with the results of other people's thinking.",
|
||||
"If life were predictable it would cease to be life, and be without flavor.",
|
||||
"If you look at what you have in life, you'll always have more. If you look at what you don't have in life, you'll never have enough.",
|
||||
"If you set your goals ridiculously high and it's a failure, you will fail above everyone else's success.",
|
||||
"Life is what happens when you're busy making other plans.",
|
||||
"Spread love everywhere you go. Let no one ever come to you without leaving happier.",
|
||||
"When you reach the end of your rope, tie a knot in it and hang on.",
|
||||
"Always remember that you are absolutely unique. Just like everyone else.",
|
||||
"Don't judge each day by the harvest you reap but by the seeds that you plant.",
|
||||
"The future belongs to those who believe in the beauty of their dreams.",
|
||||
"Tell me and I forget. Teach me and I remember. Involve me and I learn.",
|
||||
"The best and most beautiful things in the world cannot be seen or even touched — they must be felt with the heart.",
|
||||
"It is during our darkest moments that we must focus to see the light.",
|
||||
"Whoever is happy will make others happy too.",
|
||||
"Do not go where the path may lead, go instead where there is no path and leave a trail."
|
||||
];
|
||||
|
||||
const people =[
|
||||
"-Nelson Mandela",
|
||||
"-Walt Disney",
|
||||
"-Steve Jobs",
|
||||
"-Eleanor Roosevelt",
|
||||
"-Oprah Winfrey",
|
||||
"-James Cameron",
|
||||
"-John Lennon",
|
||||
"-Mother Teresa",
|
||||
"-Franklin D. Roosevelt",
|
||||
"-Margaret Mead",
|
||||
"-Robert Louis Stevenson",
|
||||
"-Eleanor Roosevelt",
|
||||
"-Benjamin Franklin",
|
||||
"-Helen Keller",
|
||||
"-Aristotle",
|
||||
"-Anne Frank",
|
||||
"-Ralph Waldo Emerson"
|
||||
];
|
||||
|
||||
let audio = document.getElementsByTagName("audio")[0];
|
||||
|
||||
function getQuote() {
|
||||
|
||||
audio.currentTime = 0;
|
||||
|
||||
let num = Math.floor(Math.random() * quotes.length);
|
||||
|
||||
document.getElementById("quote").innerHTML = "\"" + quotes[num] + "\"";
|
||||
document.getElementById("person").innerHTML = people[num];
|
||||
|
||||
audio.play();
|
||||
|
||||
}
|
||||
BIN
Binary file not shown.
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"livePreview.defaultPreviewPath": "d:\\school\\FALL 2022\\CSIS1430\\csis1430\\public_html\\little-boxes\\index.html"
|
||||
}
|
||||
@@ -0,0 +1,462 @@
|
||||
/*Background color*/
|
||||
html {
|
||||
|
||||
background-color: #4A245E;
|
||||
|
||||
}
|
||||
|
||||
/*HEAD & HAIR*/
|
||||
|
||||
/* Position, size, color, and shape of the head */
|
||||
#head {
|
||||
|
||||
margin: 10em;
|
||||
|
||||
height: 775px;
|
||||
width: 600px;
|
||||
|
||||
background-color: #d2a679;
|
||||
|
||||
border: 2px solid black;
|
||||
border-radius: 90% 90% 100% 100%;
|
||||
|
||||
}
|
||||
|
||||
/*Position, size, color, and shape of the hair.*/
|
||||
.hair {
|
||||
|
||||
position: relative;
|
||||
bottom: 33px;
|
||||
left: 13px;
|
||||
|
||||
}
|
||||
|
||||
#topHair {
|
||||
|
||||
width: 576px;
|
||||
height: 170px;
|
||||
|
||||
background-color: #1a0d00;
|
||||
|
||||
border-radius: 10% 10% 0% 0% / 90% 90% 0% 0%;
|
||||
|
||||
}
|
||||
|
||||
#leftHair {
|
||||
|
||||
top: 170px;
|
||||
left: 0;
|
||||
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
||||
border-bottom: 60px solid transparent;
|
||||
|
||||
border-left: 60px solid #1a0d00;
|
||||
|
||||
}
|
||||
|
||||
#rightHair {
|
||||
|
||||
top: 110px;
|
||||
left: 516px;
|
||||
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
||||
border-bottom: 60px solid transparent;
|
||||
|
||||
border-right: 60px solid #1a0d00;
|
||||
|
||||
}
|
||||
|
||||
/*HEADPHONES*/
|
||||
|
||||
/*Position, size, and shape of headphone headband.*/
|
||||
#headrest {
|
||||
|
||||
position: relative;
|
||||
bottom: 2em;
|
||||
height: 5em;
|
||||
|
||||
background-color: black;
|
||||
|
||||
border: 1px solid black;
|
||||
border-radius: 130% 130% 40% 40%;
|
||||
|
||||
}
|
||||
|
||||
/*Position of the headphone's stems.*/
|
||||
#leftStem,
|
||||
#rightStem {
|
||||
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
/*Position, size, color, and shape of the left headphone stem.*/
|
||||
#leftStem {
|
||||
|
||||
right: 2.3em;
|
||||
float: left;
|
||||
|
||||
height: 500px;
|
||||
width: 50px;
|
||||
|
||||
background-color: black;
|
||||
|
||||
border-radius: 200% 10% 70% 25%;
|
||||
|
||||
}
|
||||
|
||||
/*Position, size, color, and shape of the left headphone's ear-cup.*/
|
||||
#leftEar {
|
||||
|
||||
position: relative;
|
||||
top: 17.05em;
|
||||
right: 5em;
|
||||
|
||||
height: 225px;
|
||||
width: 100px;
|
||||
|
||||
background-color: black;
|
||||
|
||||
border: 1px solid black;
|
||||
border-radius: 45% 0% 0% 45%;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
/*Position, size, color, and shape of the right headphone stem.*/
|
||||
#rightStem {
|
||||
|
||||
left: 2.4em;
|
||||
bottom: 5em;
|
||||
float: right;
|
||||
|
||||
height: 500px;
|
||||
width: 50px;
|
||||
|
||||
background-color: black;
|
||||
|
||||
border-radius: 10% 200% 25% 70%;
|
||||
|
||||
}
|
||||
|
||||
/*Position, size, color, and shape of the right headphone's ear-cup.*/
|
||||
#rightEar {
|
||||
|
||||
position: relative;
|
||||
top: 17.05em;
|
||||
left: 2em;
|
||||
|
||||
height: 225px;
|
||||
width: 100px;
|
||||
|
||||
background-color: black;
|
||||
|
||||
border: 1px solid black;
|
||||
border-radius: 0% 45% 45% 0%;
|
||||
|
||||
}
|
||||
|
||||
/*EYEBROWS*/
|
||||
|
||||
/*Position and size of the eyebrow container.*/
|
||||
.eyebrowContainer {
|
||||
|
||||
margin-top: 10%;
|
||||
|
||||
height: 1.3em;
|
||||
width: 600px;
|
||||
|
||||
}
|
||||
|
||||
/*Size and color of the eyebrows.*/
|
||||
#leftBrow,
|
||||
#rightBrow {
|
||||
|
||||
width: 12em;
|
||||
height: 1.5em;
|
||||
|
||||
background-color: #261a0d;
|
||||
|
||||
}
|
||||
|
||||
/*Position and shape of the left eyebrow.*/
|
||||
#leftBrow {
|
||||
|
||||
float: left;
|
||||
|
||||
border-radius: 180% 20% 30% 45%;
|
||||
|
||||
}
|
||||
|
||||
/*Position and shape of the right eyebrow.*/
|
||||
#rightBrow {
|
||||
|
||||
float: right;
|
||||
|
||||
border-radius: 20% 180% 45% 30%;
|
||||
|
||||
}
|
||||
|
||||
/*EYES*/
|
||||
|
||||
/* Positioning the eyes relative to the head */
|
||||
#eyeArea {
|
||||
|
||||
margin-top: 5%;
|
||||
margin-left: 20%;
|
||||
margin-right: 20%;
|
||||
|
||||
}
|
||||
|
||||
/*Positioning all contents of the eye class to the center of (x,y), and making the size, color, and shape of the eye.*/
|
||||
.eye {
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
|
||||
background-color: #d9d9d9;
|
||||
|
||||
border-radius: 50%;
|
||||
|
||||
}
|
||||
|
||||
/*Position, size, color, and shape of the eye-color.*/
|
||||
.eyeColor {
|
||||
|
||||
position: absolute;
|
||||
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
|
||||
background-color: #392613;
|
||||
|
||||
border-radius: 50%;
|
||||
|
||||
}
|
||||
|
||||
/*Center of the eye class, the pupil is the smallest circle within the eye. Position in z-index,
|
||||
size, color, and shape of the pupil.*/
|
||||
.pupil {
|
||||
|
||||
position: absolute;
|
||||
|
||||
height: 13px;
|
||||
width: 13px;
|
||||
|
||||
background-color: black;
|
||||
|
||||
border-radius: 50%;
|
||||
|
||||
}
|
||||
|
||||
.topLid {
|
||||
|
||||
position: relative;
|
||||
bottom: 25px;
|
||||
|
||||
height: 25px;
|
||||
width: 100px;
|
||||
|
||||
background-color: #cc9966;
|
||||
border: 1px solid #d2a679;
|
||||
|
||||
border-radius: 125px 125px 0 0;
|
||||
|
||||
}
|
||||
|
||||
.bottomLid {
|
||||
|
||||
position: relative;
|
||||
top: 25px;
|
||||
|
||||
height: 30px;
|
||||
width: 100px;
|
||||
background-color: #cc9966;
|
||||
border: 1px solid #d2a679;
|
||||
|
||||
border-radius: 0 0 200px 200px;
|
||||
|
||||
}
|
||||
|
||||
/*Position of the left eye.*/
|
||||
#leftEye {
|
||||
|
||||
float: left;
|
||||
|
||||
}
|
||||
|
||||
/*Position of the right eye.*/
|
||||
#rightEye {
|
||||
|
||||
float: right;
|
||||
|
||||
}
|
||||
|
||||
/*GLASSES*/
|
||||
|
||||
/*Position, size, color, and shape of the glasses.*/
|
||||
.glasses {
|
||||
|
||||
position: absolute;
|
||||
z-index: 50;
|
||||
|
||||
height: 140px;
|
||||
width: 200px;
|
||||
|
||||
border: 4px solid black;
|
||||
border-radius: 35%;
|
||||
border-width: 5px;
|
||||
|
||||
}
|
||||
|
||||
/*Position, size, and color of the glasses' ear hooks. Also applied to the nose bridge part of the
|
||||
glasses.*/
|
||||
.earHook,
|
||||
#bridge {
|
||||
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
height: 4px;
|
||||
width: 140px;
|
||||
|
||||
background-color: black;
|
||||
|
||||
}
|
||||
|
||||
/*Positions the glasses' left ear hook.*/
|
||||
#leftEarHook {
|
||||
|
||||
float: left;
|
||||
right: 180px;
|
||||
|
||||
}
|
||||
|
||||
/*Positions and re-sizes the glasses' nose bridge.*/
|
||||
#bridge {
|
||||
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
|
||||
}
|
||||
|
||||
/*Positions the glasses' right ear hook.*/
|
||||
#rightEarHook {
|
||||
|
||||
float: right;
|
||||
left: 180px;
|
||||
|
||||
}
|
||||
|
||||
/*NOSE*/
|
||||
|
||||
/*Position and size of the nose container.*/
|
||||
.nose {
|
||||
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
left: 21px;
|
||||
|
||||
width: 115px;
|
||||
height: 150px;
|
||||
|
||||
}
|
||||
|
||||
/*Position, size, color, and shape of the nose's ridge.*/
|
||||
#noseRidge {
|
||||
|
||||
position: relative;
|
||||
left: 25px;
|
||||
z-index: 1;
|
||||
|
||||
height: 140px;
|
||||
width: 60px;
|
||||
|
||||
background-color: #d2a679;
|
||||
border: 3px solid #cc9966;
|
||||
|
||||
border-radius: 100% 100% 75% 75%;
|
||||
|
||||
}
|
||||
|
||||
/*Common position, size, color, and shape of the left and right nostril.*/
|
||||
#leftNostril,
|
||||
#rightNostril {
|
||||
|
||||
position: relative;
|
||||
bottom: 50px;
|
||||
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
|
||||
border: 4px solid #cc9966;
|
||||
|
||||
border-radius: 50%;
|
||||
|
||||
}
|
||||
|
||||
/*Left nostril's specific positioning.*/
|
||||
#leftNostril {
|
||||
|
||||
float: left;
|
||||
left: 10px;
|
||||
|
||||
}
|
||||
|
||||
/*Left nostril's specific positioning.*/
|
||||
#rightNostril {
|
||||
|
||||
float: right;
|
||||
right: 10px;
|
||||
|
||||
}
|
||||
|
||||
/*MOUTH*/
|
||||
|
||||
/*Position and size of the mouth container.*/
|
||||
.mouthContainer {
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
bottom: 20px;
|
||||
left: 125px;
|
||||
|
||||
width: 350px;
|
||||
height: 200px;
|
||||
|
||||
}
|
||||
|
||||
/*Size, color, and shape of the mouth.*/
|
||||
#mouth {
|
||||
|
||||
height: 70px;
|
||||
width: 220px;
|
||||
|
||||
background-color: #cc9966;
|
||||
|
||||
border-radius: 60px 60px 175px 175px;
|
||||
|
||||
}
|
||||
|
||||
/*Size, color, and shape of the mouth's lips together.*/
|
||||
#lips {
|
||||
|
||||
height: 30px;
|
||||
|
||||
border-top: none;
|
||||
border-bottom: 3px solid #bf8040;
|
||||
|
||||
border-radius: 60px 60px 175px 175px;
|
||||
|
||||
}
|
||||
@@ -0,0 +1,114 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" type="text/css" href="css/style.css">
|
||||
<title>Self-portrait | Little-Boxes</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="head">
|
||||
|
||||
<div class="headphone">
|
||||
|
||||
<div id="leftStem">
|
||||
|
||||
<div id="leftEar"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="headrest"></div>
|
||||
|
||||
<div id="rightStem">
|
||||
|
||||
<div id="rightEar"></div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="hair" id="topHair">
|
||||
|
||||
<div class="hair" id="leftHair"></div>
|
||||
<div class="hair" id="rightHair"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="eyebrowContainer">
|
||||
|
||||
<div id="leftBrow"></div>
|
||||
|
||||
<div id="rightBrow"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="eyeArea">
|
||||
|
||||
<div class="earHook" id="leftEarHook"></div>
|
||||
<div class="earHook" id="rightEarHook"></div>
|
||||
<div id="bridge"></div>
|
||||
|
||||
<div class="face eye" id="leftEye">
|
||||
|
||||
<div class="eyeColor"></div>
|
||||
|
||||
<div class="eyeLid">
|
||||
|
||||
<div class="topLid"></div>
|
||||
<div class="bottomLid"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="glasses"></div>
|
||||
|
||||
<div class="pupil"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="face eye" id="rightEye">
|
||||
|
||||
<div class="eyeColor"></div>
|
||||
|
||||
<div class="eyeLid">
|
||||
|
||||
<div class="topLid"></div>
|
||||
<div class="bottomLid"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="glasses"></div>
|
||||
|
||||
<div class="pupil"></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="nose">
|
||||
|
||||
<div id="noseRidge"></div>
|
||||
|
||||
<div id="leftNostril"></div>
|
||||
|
||||
<div id="rightNostril"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mouthContainer">
|
||||
|
||||
<div id="mouth">
|
||||
|
||||
<div id="lips"></div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,45 @@
|
||||
body {
|
||||
|
||||
margin: auto;
|
||||
position: relative;
|
||||
|
||||
background-color: #4A245E;
|
||||
font-family: Lato sans-serif;
|
||||
color: white;
|
||||
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
||||
padding: 25px;
|
||||
font-size: 5em;
|
||||
|
||||
}
|
||||
|
||||
div {
|
||||
|
||||
display: inline-block;
|
||||
margin: auto;
|
||||
|
||||
}
|
||||
|
||||
button {
|
||||
|
||||
background-color: white;
|
||||
color: #4A245E;
|
||||
border: none;
|
||||
padding: 25px;
|
||||
text-decoration: none;
|
||||
font-size: 1.5em;
|
||||
font-family: Lato sans-serif;
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
|
||||
p {
|
||||
|
||||
padding : 25px;
|
||||
font-size: 2em;
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
body {
|
||||
|
||||
margin: auto;
|
||||
position: relative;
|
||||
|
||||
background-color: #4A245E;
|
||||
font-family: Lato sans-serif;
|
||||
color: white;
|
||||
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
||||
padding: 25px;
|
||||
font-size: 5em;
|
||||
|
||||
}
|
||||
|
||||
div {
|
||||
|
||||
display: inline-block;
|
||||
margin: auto;
|
||||
width: 50%;
|
||||
|
||||
}
|
||||
|
||||
button {
|
||||
|
||||
background-color: white;
|
||||
color: #4A245E;
|
||||
border: none;
|
||||
padding: 25px;
|
||||
text-decoration: none;
|
||||
font-size: 1.5em;
|
||||
font-family: Lato sans-serif;
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
|
||||
p {
|
||||
|
||||
padding : 25px;
|
||||
font-size: 2em;
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
|
||||
<meta name = "viewport" content = "width=device-width, initial-scale=1" charset="UTF-8">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
|
||||
<title>Lottery</title>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Ashton's Lottery</h1>
|
||||
|
||||
<div>
|
||||
|
||||
<button onclick="refresh()">Play Again!</button>
|
||||
|
||||
<p id="output">Awaiting player...</p>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
<footer>
|
||||
|
||||
<script src="js/script.js"></script>
|
||||
|
||||
</footer>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,71 @@
|
||||
|
||||
//function userPrompt() {
|
||||
|
||||
let size = prompt("Please enter the lottery size you\'d like:");
|
||||
|
||||
console.log(size);
|
||||
|
||||
function clickRegistered() {
|
||||
|
||||
console.log("Click registered, printing to console.");
|
||||
|
||||
}
|
||||
|
||||
//}
|
||||
|
||||
|
||||
/*
|
||||
const playButton = document.querySelector("#playbutton")
|
||||
|
||||
function userPrompt() {
|
||||
|
||||
let size = prompt("Please enter the lottery size you\'d like:");
|
||||
|
||||
if((size == null) || (size < 1) || (size < 10)) {
|
||||
|
||||
userPrompt();
|
||||
|
||||
} else {
|
||||
|
||||
createArray(size);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function createArray(size) {
|
||||
|
||||
const lotteryPool = [];
|
||||
|
||||
for(let i = 0; i < size; i ++) {
|
||||
|
||||
lotteryPool[i] = Math.floor(Math.random() * 100);
|
||||
|
||||
}
|
||||
|
||||
displayOutput(lotteryPool);
|
||||
|
||||
}
|
||||
|
||||
function displayOutput(lotteryPool) {
|
||||
|
||||
let result = "";
|
||||
|
||||
for(let i = 0; i < lotteryPool.length; i++) {
|
||||
|
||||
if(i < lotteryPool.length - 1) {
|
||||
|
||||
result += lotteryPool[i] + "-";
|
||||
|
||||
} else {
|
||||
|
||||
result += lotteryPool[i];
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
document.getElementById("output").innerHtml = result;
|
||||
|
||||
}
|
||||
*/
|
||||
@@ -0,0 +1,61 @@
|
||||
const size = prompt("Please enter the size of the lottery pool:");
|
||||
|
||||
const lotteryValues = [];
|
||||
|
||||
window.onLoad = start();
|
||||
|
||||
function start() {
|
||||
|
||||
createArray();
|
||||
|
||||
}
|
||||
|
||||
function refresh() {
|
||||
|
||||
createArray();
|
||||
|
||||
}
|
||||
|
||||
function createArray() {
|
||||
|
||||
for(let i = 0; i < size; i++) {
|
||||
|
||||
lotteryValues[i] = getRandomInt();
|
||||
|
||||
}
|
||||
|
||||
generateOutput();
|
||||
|
||||
}
|
||||
|
||||
function generateOutput() {
|
||||
|
||||
let output = "";
|
||||
|
||||
for(let i = 0; i < lotteryValues.length; i++) {
|
||||
|
||||
output += lotteryValues[i];
|
||||
|
||||
if(i < lotteryValues.length - 1) {
|
||||
|
||||
output += "-";
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
document.getElementById("output").innerHTML = output
|
||||
|
||||
}
|
||||
|
||||
function getRandomInt() {
|
||||
|
||||
let min = 1;
|
||||
let max = 100;
|
||||
|
||||
min = Math.ceil(min);
|
||||
max = Math.floor(max);
|
||||
|
||||
return Math.floor(Math.random() * (max - min) + min);
|
||||
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
* {
|
||||
|
||||
margin: auto;
|
||||
position: relative;
|
||||
|
||||
font-family: Lato sans-serif;
|
||||
font-size: 1em;
|
||||
color: white;
|
||||
|
||||
background-color: #4A245E;
|
||||
|
||||
}
|
||||
|
||||
form {
|
||||
|
||||
width: 60%;
|
||||
|
||||
}
|
||||
|
||||
input {
|
||||
|
||||
padding: 1em;
|
||||
margin: .5em;
|
||||
|
||||
min-width: 6.1em;
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
|
||||
color: #4A245E;
|
||||
background-color: white;
|
||||
|
||||
transition: 500ms;
|
||||
|
||||
}
|
||||
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
|
||||
color: #4A245E;
|
||||
|
||||
}
|
||||
|
||||
input:focus {
|
||||
|
||||
background-color: #4A245E;
|
||||
color: white;
|
||||
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
||||
margin: auto;
|
||||
position:relative;
|
||||
font-size: 5em;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
h4 {
|
||||
|
||||
margin: auto;
|
||||
position: relative;
|
||||
width: 60%;
|
||||
font-size: 2em;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
p {
|
||||
|
||||
margin: auto;
|
||||
position: relative;
|
||||
width: 50%;
|
||||
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
|
||||
<meta name = "viewport" content = "width=device-width, initial-scale=1" charset="UTF-8">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
|
||||
<title>Mad Libs</title>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Mad Libs!</h1>
|
||||
|
||||
<h4>Leave boxes blank for random words when you click submit!</h4>
|
||||
|
||||
<form>
|
||||
|
||||
<input type="text" name="noun1" placeholder="Noun">
|
||||
<input type="text" name="noun2" placeholder="Noun">
|
||||
|
||||
<input type="text" name="pronoun1" placeholder="Pronoun">
|
||||
<input type="text" name="pronoun2" placeholder="Pronoun">
|
||||
|
||||
<input type="text" name="verb1" placeholder="Verb">
|
||||
<input type="text" name="verb2" placeholder="Verb">
|
||||
|
||||
<input type="text" name="adj1" placeholder="Adjective">
|
||||
<input type="text" name="adj2" placeholder="Adjective">
|
||||
|
||||
<input type="text" name="adv1" placeholder="Adverb">
|
||||
<input type="text" name="adv2" placeholder="Adverb">
|
||||
|
||||
<input type="text" name="prep1" placeholder="Preposition">
|
||||
<input type="text" name="prep2" placeholder="Preposition">
|
||||
|
||||
<input type="text" name="con1" placeholder="Conjunction">
|
||||
<input type="text" name="con2" placeholder="Conjunction">
|
||||
|
||||
<input type="text" name="inter1" placeholder="Interjection">
|
||||
<input type="text" name="inter2" placeholder="Interjection">
|
||||
|
||||
<input type="button" value="Submit" id="submit" onclick="generateStory()">
|
||||
<input type="button" value="Clear" id="refresh" onclick="clearAndSet()">
|
||||
|
||||
</form>
|
||||
|
||||
|
||||
<p id="output"></p>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
<footer>
|
||||
|
||||
<script src="js/script.js"></script>
|
||||
|
||||
</footer>
|
||||
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
Vendored
BIN
Binary file not shown.
@@ -0,0 +1,22 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>About</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="contact.html">Contact</a></li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
<li><a href="order.html">Order</a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
<h1>About</h1>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Contact</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="contact.html">Contact</a></li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
<li><a href="order.html">Order</a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
<h1>Contact</h1>
|
||||
|
||||
<form action="https://www.stonecoldprofessor.com/pizza-contact.php" method="post">
|
||||
|
||||
<label for="first-name">First Name:</label><br>
|
||||
<input type="text" name="first-name"><br>
|
||||
|
||||
<label for="last-name">Last Name:</label><br>
|
||||
<input type="text" name="last-name"><br>
|
||||
|
||||
<label for="email">Email:</label><br>
|
||||
<input type="text" name="email"><br>
|
||||
|
||||
<label for="message">Message:</label><br>
|
||||
<textarea name="message"></textarea><br><br><br>
|
||||
|
||||
<input type="submit" value="Send">
|
||||
<input type="reset" name="Clear">
|
||||
|
||||
</form>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,22 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Home</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="contact.html">Contact</a></li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
<li><a href="order.html">Order</a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
<h1>Home</h1>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,22 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Order</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="contact.html">Contact</a></li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
<li><a href="order.html">Order</a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
<h1>Order</h1>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Vendored
BIN
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.comment::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="Extra Extra-Small">
|
||||
<label for="XXS">ExtraExtra-Small | 6"</label><br>
|
||||
<input id="XS" type="radio" name="size" value="Extra-Small">
|
||||
<label for="XS">Extra-Small | 10"</label><br>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="newRow">
|
||||
|
||||
<input id="S" type="radio" name="size" value="Small">
|
||||
<label for="S">Small | 12"</label><br>
|
||||
<input id="M" type="radio" name="size" value="Medium">
|
||||
<label for="M">Medium | 14"</label><br>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="newRow">
|
||||
|
||||
<input id="L" type="radio" name="size" value="Large">
|
||||
<label for="L">Large | 16"</label><br>
|
||||
<input id="XL" type="radio" name="size" value="Extra-Large">
|
||||
<label for="XL">Extra-Large | 20"</label><br>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="newRow">
|
||||
|
||||
<input id="XXL" type="radio" name="size" value="Extra Extra-Large">
|
||||
<label for="XXL">ExtraExtra-Large | 24"</label><br>
|
||||
<input id="XXXL" type="radio" name="size" value="Triple X-Large">
|
||||
<label for="XXXL">Triple-Large | 30"</label><br>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="newRow">
|
||||
|
||||
<input id="XXXXL" type="radio" name="size" value="Quadro-Large">
|
||||
<label for="XXXXL">Quadro-Large | 36"</label><br>
|
||||
<input id="XXXXXL" type="radio" name="size" value="Quinti-Large">
|
||||
<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" value="Bacon Bits">
|
||||
<label for="baconBits">Bacon Bits</label>
|
||||
<input type="checkbox" name="toppings[]" id="ham" value="Ham">
|
||||
<label for="ham">Ham</label>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="newRow">
|
||||
|
||||
<input type="checkbox" name="toppings[]" id="sausageHot" value="Hot Sausage">
|
||||
<label for="sausageHot">Hot Sausage</label>
|
||||
<input type="checkbox" name="toppings[]" id="baconStrips" value="Bacon Strips">
|
||||
<label for="baconStrips">Bacon Strips</label>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="newRow">
|
||||
|
||||
<input type="checkbox" name="toppings[]" id="chicken" value="Chicken">
|
||||
<label for="chicken">Chicken</label>
|
||||
|
||||
<input type="checkbox" name="toppings[]" id="beef" value="Beef">
|
||||
<label for="beef">Ground Beef</label>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="newRow">
|
||||
|
||||
<input type="checkbox" name="toppings[]" id="pep" value="Pepperoni">
|
||||
<label for="pep">Pepperoni</label>
|
||||
<input type="checkbox" name="toppings[]" id="sausageMild" value="Mild Sausage">
|
||||
<label for="sausageMild">Mild Sausage</label>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="newRow">
|
||||
|
||||
<input type="checkbox" name="toppings[]" id="steak" value="Steak">
|
||||
<label for="steak">Steak</label>
|
||||
<input type="checkbox" name="toppings[]" id="anchovies" value="Anchovies">
|
||||
<label for="anchovies">Anchovies</label>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- VEGETABLES -->
|
||||
|
||||
<br>
|
||||
<h4>GREENS</h4>
|
||||
<br>
|
||||
<div class="newRow">
|
||||
|
||||
<input type="checkbox" name="toppings[]" id="tomatoes" value="Tomatoes">
|
||||
<label for="tomatoes">Tomatoes</label>
|
||||
<input type="checkbox" name="toppings[]" id="sunTomatoes" value="Sun-Dried Tomatoes">
|
||||
<label for="sunTomatoes">Sun-Dried Tomatoes</label>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="newRow">
|
||||
|
||||
<input type="checkbox" name="toppings[]" id="olivesBlack" value="Black Olives">
|
||||
<label for="olivesBlack">Black Olives</label>
|
||||
<input type="checkbox" name="toppings[]" id="olivesGreen" value="Green Olives">
|
||||
<label for="olivesGreen">Olives Green</label>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="newRow">
|
||||
|
||||
<input type="checkbox" name="toppings[]" id="spinach" value="Spinach">
|
||||
<label for="spinach">Spinach</label>
|
||||
<input type="checkbox" name="toppings[]" id="broccoli" value="Broccoli">
|
||||
<label for="broccoli">Broccoli</label>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="newRow">
|
||||
|
||||
<input type="checkbox" name="toppings[]" id="pepperRed" value="Red Peppers">
|
||||
<label for="pepperRed">Roasted Red Peppers</label>
|
||||
<input type="checkbox" name="toppings[]" id="pepperGreen" value="Green Peppers">
|
||||
<label for="pepperGreen">Green Peppers</label>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="newRow">
|
||||
|
||||
<input type="checkbox" name="toppings[]" id="pepperBanana" value="Bananna Peppers">
|
||||
<label for="pepperBanana">Banana Peppers</label>
|
||||
<input type="checkbox" name="toppings[]" id="jalepenos" value="Jalepenos">
|
||||
<label for="jalepenos">Jalepenos</label>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="newRow">
|
||||
|
||||
<input type="checkbox" name="toppings[]" id="pineapple" value="Pineapple">
|
||||
<label for="pineapple">Pineapple</label>
|
||||
<input type="checkbox" name="toppings[]" id="mushrooms" value="Mushrooms">
|
||||
<label for="mushrooms">Mushrooms</label>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="newRow">
|
||||
|
||||
<input type="checkbox" name="toppings[]" id="onion" value="Onion">
|
||||
<label for="onion">Onion</label>
|
||||
<input type="checkbox" name="toppings[]" id="avacado" value="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" value="ricotta">
|
||||
<label for="ricotta">Ricotta</label>
|
||||
<input type="checkbox" name="toppings[]" id="feta" value="feta">
|
||||
<label for="feta">Feta</label>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="newRow">
|
||||
|
||||
<input type="checkbox" name="toppings[]" id="blue" value="blue">
|
||||
<label for="blue">Blue Cheese</label>
|
||||
<input type="checkbox" name="toppings[]" id="provolone" value="provolone">
|
||||
<label for="provolone">Provolone</label>
|
||||
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="newRow">
|
||||
|
||||
<textarea class="comment" name="comments" 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>
|
||||
BIN
Binary file not shown.
@@ -0,0 +1,52 @@
|
||||
body {
|
||||
|
||||
font-family: Lato, sans-serif;
|
||||
font-size: 1em;
|
||||
|
||||
color: white;
|
||||
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
||||
font-size: 4em;
|
||||
font-style: italic;
|
||||
|
||||
}
|
||||
|
||||
h2 {
|
||||
|
||||
font-size: 2em;
|
||||
|
||||
}
|
||||
|
||||
p {
|
||||
|
||||
padding-left: 3em;
|
||||
padding-right: 3em;
|
||||
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
}
|
||||
|
||||
p:hover {
|
||||
|
||||
white-space: normal;
|
||||
|
||||
}
|
||||
|
||||
.dc {
|
||||
|
||||
background-color: darkblue;
|
||||
padding: 1em;
|
||||
|
||||
}
|
||||
|
||||
.marvel {
|
||||
|
||||
background-color: darkred;
|
||||
padding: 1em;
|
||||
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>CSS Practice</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/style.css">
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
html {
|
||||
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="dc">
|
||||
<h1>DC Comics</h1>
|
||||
<div class="batman">
|
||||
<h2>Batman</h2>
|
||||
<p>Batman is a fictional superhero appearing in American comic books published by DC Comics. The character was created by artist Bob Kane and writer Bill Finger,[4][5] and first appeared in Detective Comics #27 (1939). Originally named the "Bat-Man", the character is also referred to by such epithets as the Caped Crusader, the Dark Knight, and the World's Greatest Detective.[6]</p>
|
||||
</div>
|
||||
<div class="wonder-woman">
|
||||
<h2>Wonder Woman</h2>
|
||||
<p>Wonder Woman is a fictional superhero appearing in American comic books published by DC Comics.[2] The character is a founding member of the Justice League, goddess, and Ambassador-at-Large of the Amazonian people. The character first appeared in All Star Comics #8 in October 1941 and first cover-dated on Sensation Comics #1, January 1942. In her homeland, the island nation of Themyscira, her official title is Princess Diana of Themyscira, Daughter of Hippolyta. When blending into the society of "Man's World", she adopts her civilian identity Diana Prince. The character is also referred to by such epithets as the "Amazing Amazon", the "Spirit of Truth", "Themyscira's Champion", and the "Goddess of Love and War".</p>
|
||||
</div>
|
||||
<div class="superman">
|
||||
<h2>Superman</h2>
|
||||
<p>Superman is a fictional superhero appearing in American comic books published by DC Comics. The character was created by writer Jerry Siegel and artist Joe Shuster, high school students living in Cleveland, Ohio, in 1933. They sold Superman to Detective Comics, the future DC Comics, in 1938. Superman debuted in Action Comics #1 (cover-dated June 1938) and subsequently appeared in various radio serials, newspaper strips, television programs, films, and video games. With this success, Superman helped to create the superhero archetype and establish its primacy within the American comic book.[2] The character is also referred to by such epithets as the Big Blue Boy Scout, the Man of Steel, the Man of Tomorrow, and the Last Son of Krypton.[3]</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="marvel">
|
||||
<h1 style="font-style: italic;">Marvel Comics</h1>
|
||||
<div class="spiderman">
|
||||
<h2>Spiderman</h2>
|
||||
<p>Spider-Man is a fictional superhero appearing in American comic books published by Marvel Comics. The character was created by writer-editor Stan Lee and writer-artist Steve Ditko, and first appeared in the anthology comic book Amazing Fantasy #15 (August 1962) in the Silver Age of Comic Books. Lee and Ditko conceived the character as an orphan being raised by his Aunt May and Uncle Ben in New York City after his parents Richard and Mary Parker were killed in a plane crash, and as a teenager, having to deal with the normal struggles of adolescence in addition to those of a costumed crime-fighter. Spider-Man's creators gave him super strength and agility, the ability to cling to most surfaces, shoot spider-webs using wrist-mounted devices of his own invention, which he calls "web-shooters", and react to danger quickly with his "spider-sense", enabling him to combat his foes.</p>
|
||||
</div>
|
||||
<div class="iron-man">
|
||||
<h2>Iron Man</h2>
|
||||
<p>Iron Man is a fictional superhero appearing in American comic books published by Marvel Comics. The character was created by writer and editor Stan Lee, developed by scripter Larry Lieber, and designed by artists Don Heck and Jack Kirby. The character made his first appearance in Tales of Suspense #39 (cover dated March 1963).</p>
|
||||
</div>
|
||||
<div class="thor">
|
||||
<h2>Thor</h2>
|
||||
<p>Thor (Thor Odinson) is a fictional superhero appearing in American comic books published by Marvel Comics. The character, based on the Norse mythological deity of the same name, is the Asgardian god of thunder and possesses the enchanted hammer Mjolnir, which grants him the ability of flight and weather manipulation amongst his other superhuman attributes.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
BIN
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
@@ -0,0 +1,116 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<title>YouTube Video Page</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1 class="center">My Favorite Youtube Videos</h1>
|
||||
<h2 class="center">(in no particular order)</h2>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<p>
|
||||
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/jfKfPfyJRdk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
</p>
|
||||
|
||||
<p id="embedCaption">Play this video while going through this page!</p>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<table class="center">
|
||||
|
||||
<th>Video Name</th>
|
||||
<th>Creator</th>
|
||||
<th>Creator Profile</th>
|
||||
<th>Video Description</th>
|
||||
<th>Video Length</th>
|
||||
|
||||
<tr>
|
||||
<td><a href="https://youtube.com/playlist?list=PLFsQleAWXsj_4yDeebiIADdH5FMayBiJo">Important Videos Playlist</a></td>
|
||||
<td><a href="https://www.youtube.com/channel/UCqjLgu2L35BoHNnhQLzmlfQ">kierancaspian's channel</a></td>
|
||||
<td><img src="img/kieran_LOGO.jpeg" class="profilePic"/></td>
|
||||
<td class="descrip">A playlist of 312 short videos epitomizing "internet humor". A necessary watch for any new internet user.</td>
|
||||
<td>~1:11:39</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><a href="https://youtu.be/HTSjbkTabpI">The Batman Arkham Series</a></td>
|
||||
<td><a href="https://www.youtube.com/c/LukeStephensTV">Luke Stephens' channel</a></td>
|
||||
<td><img src="img/LukeStephens_Logo.jpeg" class="profilePic"/></td>
|
||||
<td class="descrip">A thorough analysis of the Batman Arkham games trilogy, from gameplay and story, to character development and atmosphere.</td>
|
||||
<td>3:24:53</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><a href="https://youtu.be/yBw6UXAiq0A">Introduction to Competitive Pokemon</a></td>
|
||||
<td><a href="https://www.youtube.com/c/WolfeyVGC">WolfeyVGC's channel</a></td>
|
||||
<td><img src="img/WolfeyVGC_logo.jpeg" class="profilePic"/></td>
|
||||
<td class="descrip">Part 1 to a 3 part series teaching fundamental concepts to excel in competitive Pokemon.</td>
|
||||
<td>1:04:22</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><a href="https://youtu.be/zPmqbtKwtgw">Making a Home Server</a></td>
|
||||
<td><a href="https://www.youtube.com/c/LinusTechTips">Linus Tech Tips' channel</a></td>
|
||||
<td><img src="img/LTT_logo.jpeg" class="profilePic"/></td>
|
||||
<td class="descrip">An inspiring video on converting an old PC or laptop to act as a home server.</td>
|
||||
<td>11:06</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><a href="https://youtu.be/JovIgd9B9RQ">Beserk Soundtrack Analysis</a></td>
|
||||
<td><a href="https://www.youtube.com/channel/UC2SVUGk_kWw62xkFxOGI7Ig">Internet Pitstop's channel</a></td>
|
||||
<td><img src="img/internetPitstop_logo.jpeg" class="profilePic"/></td>
|
||||
<td class="descrip">A video analyzing and discussing the Berserk 97 Soundtrack Legendary Wind Sword.</td>
|
||||
<td>34:20</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><a href="https://youtu.be/osxJ5-_Ccp0">rain</a></td>
|
||||
<td><a href="https://www.youtube.com/c/JackStauber">JackStauber's channel</a></td>
|
||||
<td><img src="img/JackStauber_logo.jpeg" class="profilePic"/></td>
|
||||
<td class="descrip">One of my favorite artists, I love his unique style and animation while exploring difficult subjects.</td>
|
||||
<td>0:35</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><a href="https://youtu.be/7G62pp8gstQ">Samsung Z Flip 3 Teardown</a></td>
|
||||
<td><a href="https://www.youtube.com/c/JerryRigEverything">JerryRigEverything's channel</a></td>
|
||||
<td><img src="img/JerryRigEverything_logo.jpeg" class="profilePic"/></td>
|
||||
<td class="descrip">A thorough examination of the innards that compose the Samsung Z Flip 3. I work in electronics repair, and recently got to work on this beautiful phone.</td>
|
||||
<td>9:38</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><a href="https://youtu.be/eDAgxaNtgWc">Isopod Colonies are Fun</a></td>
|
||||
<td><a href="https://www.youtube.com/c/LifeinJars">Life in Jars? channel</a></td>
|
||||
<td><img src="img/LifeinJars_logo.jpeg" class="profilePic"/></td>
|
||||
<td class="descrip">"I'm working with the species Porcellio scaber (common rough woodlouse). In this video I show you how to make a terrarium for an isopod colony and also how much fun and how interesting it is to have an isopod colony yourselves."</td>
|
||||
<td>10:54</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td><a href="https://youtu.be/i-3ZpFu8cr8">Weekly Pkmncast Podcast video</a></td>
|
||||
<td><a href="https://www.youtube.com/c/Pkmncast">Pkmncast channel</a></td>
|
||||
<td><img src="img/Pkmncast_logo.jpeg" class="profilePic"/></td>
|
||||
<td class="descrip">In this podcast episode, Steve, Greg, and Will talk about the recent Pokemon Worlds event in London and the reveal of a potential pre-evolved form of the upcoming legendaries of Pokemon Scarlet and Violet.</td>
|
||||
<td>2:06:27</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,63 @@
|
||||
.center{
|
||||
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
body, a {
|
||||
|
||||
font-family: Lato, sans-serif;
|
||||
color: white;
|
||||
background-color: #4A245E;
|
||||
font-size: .9em;
|
||||
|
||||
}
|
||||
|
||||
p {
|
||||
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
#embedCaption {
|
||||
|
||||
font-size: .8em;
|
||||
|
||||
}
|
||||
|
||||
table, th, td {
|
||||
border: 1px solid white;
|
||||
border-collapse: collapse;
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
th {
|
||||
|
||||
font-size: 1.3em;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
|
||||
}
|
||||
|
||||
a {
|
||||
|
||||
font-style: italic;
|
||||
text-decoration: underline;
|
||||
|
||||
}
|
||||
|
||||
.profilePic {
|
||||
|
||||
width: 125px;
|
||||
height: 125px;
|
||||
|
||||
}
|
||||
|
||||
.descrip {
|
||||
|
||||
text-align: left;
|
||||
|
||||
}
|
||||
+5
@@ -0,0 +1,5 @@
|
||||
# Default ignored files
|
||||
/shelf/
|
||||
/workspace.xml
|
||||
# Editor-based HTTP Client requests
|
||||
/httpRequests/
|
||||
+8
@@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectModuleManager">
|
||||
<modules>
|
||||
<module fileurl="file://$PROJECT_DIR$/.idea/tic-tac-toe.iml" filepath="$PROJECT_DIR$/.idea/tic-tac-toe.iml" />
|
||||
</modules>
|
||||
</component>
|
||||
</project>
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module type="WEB_MODULE" version="4">
|
||||
<component name="NewModuleRootManager">
|
||||
<content url="file://$MODULE_DIR$">
|
||||
<excludeFolder url="file://$MODULE_DIR$/temp" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/tmp" />
|
||||
</content>
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
</module>
|
||||
Binary file not shown.
@@ -0,0 +1,12 @@
|
||||
* {
|
||||
|
||||
margin: auto;
|
||||
position: relative;
|
||||
|
||||
font-family: Lato sans-serif;
|
||||
font-size: 1em;
|
||||
|
||||
background-color: #4A245E;
|
||||
color: white;
|
||||
|
||||
}
|
||||
Binary file not shown.
@@ -0,0 +1,67 @@
|
||||
* {
|
||||
|
||||
font-family: Lato sans-serif;
|
||||
|
||||
background-color: #4A245E;
|
||||
color: white;
|
||||
|
||||
}
|
||||
|
||||
body {
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
|
||||
.grid {
|
||||
|
||||
margin-top: 10em;
|
||||
position: absolute;
|
||||
|
||||
display: grid;
|
||||
|
||||
grid-template-columns: 10em 10em 10em;
|
||||
grid-template-rows: 10em 10em 10em;
|
||||
|
||||
width: 75%;
|
||||
|
||||
}
|
||||
|
||||
.box {
|
||||
|
||||
font-size: 5em;
|
||||
|
||||
border: 3px solid #4A245E;
|
||||
|
||||
padding: 1em;
|
||||
|
||||
display: flex;
|
||||
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
margin: 0;
|
||||
|
||||
background-color: white;
|
||||
color: #4A245E;
|
||||
|
||||
}
|
||||
|
||||
#output {
|
||||
|
||||
position: relative;
|
||||
padding: 5em;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
button {
|
||||
|
||||
background-color: white;
|
||||
color: #4A245E;
|
||||
padding: 1em;
|
||||
font-size: 1em;
|
||||
border-radius: 15px;
|
||||
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
|
||||
<meta name = "viewport" content = "width=device-width, initial-scale=1" charset="UTF-8">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
|
||||
<title>Tic-Tac-Toe</title>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="output">
|
||||
|
||||
<h1 id="output-text"></h1>
|
||||
<button id="clear" onclick="resetAndClear()" hidden>Clear</button>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
|
||||
<div class="box" id="0" onclick="clickTracker(this)"></div>
|
||||
<div class="box" id="1" onclick="clickTracker(this)"></div>
|
||||
<div class="box" id="2" onclick="clickTracker(this)"></div>
|
||||
|
||||
<div class="box" id="3" onclick="clickTracker(this)"></div>
|
||||
<div class="box" id="4" onclick="clickTracker(this)"></div>
|
||||
<div class="box" id="5" onclick="clickTracker(this)"></div>
|
||||
|
||||
<div class="box" id="6" onclick="clickTracker(this)"></div>
|
||||
<div class="box" id="7" onclick="clickTracker(this)"></div>
|
||||
<div class="box" id="8" onclick="clickTracker(this)"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<table>
|
||||
|
||||
<tr>
|
||||
|
||||
<th id="playerX"></th>
|
||||
<th id="playerO"></th>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td id="xScore"></td>
|
||||
<td id="oScore"></td>
|
||||
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
|
||||
</body>
|
||||
|
||||
<footer>
|
||||
|
||||
<script src="js/script.js"></script>
|
||||
|
||||
</footer>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
@@ -0,0 +1,197 @@
|
||||
const playerX = prompt("Please enter player one's name:");
|
||||
const playerO = prompt("Please enter player two's name:");
|
||||
|
||||
const boxes = document.getElementsByClassName("box");
|
||||
|
||||
let currentPlayer = playerX;
|
||||
|
||||
const posX = [];
|
||||
let indexX = 0;
|
||||
|
||||
const posO = [];
|
||||
let indexO = 0;
|
||||
|
||||
let marks = 0;
|
||||
|
||||
document.getElementById("output-text").innerHTML = currentPlayer + "\'s turn."
|
||||
document.getElementById("clear").hidden = true;
|
||||
|
||||
function clickTracker(button) {
|
||||
|
||||
if(button.innerHTML === "") {
|
||||
|
||||
mark(button.id);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function mark(index) {
|
||||
|
||||
let winstate = false;
|
||||
|
||||
marks++;
|
||||
|
||||
if(currentPlayer === playerX) {
|
||||
|
||||
boxes[index].innerHTML = "X"
|
||||
|
||||
posX[indexX] = index;
|
||||
indexX++;
|
||||
|
||||
if(marks > 4) {
|
||||
|
||||
winstate = checkForWin(posX);
|
||||
|
||||
}
|
||||
|
||||
if(winstate === 1) {
|
||||
|
||||
document.getElementById("output-text").innerHTML = currentPlayer + " WON!"
|
||||
document.getElementById("clear").hidden = false;
|
||||
|
||||
} else if(winstate === 2) {
|
||||
|
||||
document.getElementById("output-text").innerHTML = "It's a tic-tac-tie!";
|
||||
document.getElementById("clear").hidden = false;
|
||||
|
||||
} else {
|
||||
|
||||
currentPlayer = playerO;
|
||||
document.getElementById("output-text").innerHTML = currentPlayer + "'s turn."
|
||||
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
boxes[index].innerHTML = "O"
|
||||
|
||||
posO[indexO] = index;
|
||||
indexO++;
|
||||
|
||||
if(marks > 4) {
|
||||
|
||||
winstate = checkForWin(posO);
|
||||
|
||||
}
|
||||
|
||||
if(winstate === 1) {
|
||||
|
||||
document.getElementById("output-text").innerHTML = currentPlayer + " WON!"
|
||||
document.getElementById("clear").hidden = false;
|
||||
|
||||
} else if(winstate === 2) {
|
||||
|
||||
document.getElementById("output-text").innerHTML = "It's a tic-tac-tie!";
|
||||
document.getElementById("clear").hidden = false;
|
||||
|
||||
} else {
|
||||
|
||||
currentPlayer = playerX;
|
||||
document.getElementById("output-text").innerHTML = currentPlayer + "'s turn."
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
function checkForWin(player) {
|
||||
|
||||
const winstates = [
|
||||
|
||||
[0,1,2],
|
||||
[3,4,5],
|
||||
[6,7,8],
|
||||
[0,3,6],
|
||||
[1,4,7],
|
||||
[2,5,8],
|
||||
[0,4,8],
|
||||
[2,4,6]
|
||||
|
||||
];
|
||||
|
||||
let count = 0;
|
||||
|
||||
for(let j = 0; j < winstates.length; j++) {
|
||||
|
||||
for(let k = 0; k < player.length; k++) {
|
||||
|
||||
for(let i = 0; i < winstates[j].length; i++) {
|
||||
|
||||
if(player[k] == winstates[j][i]) {
|
||||
|
||||
count++;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if(count === 3) {
|
||||
|
||||
for (let i = 0; i < winstates[j].length; i++) {
|
||||
|
||||
boxes[winstates[j][i]].style.backgroundColor = "#4A245E";
|
||||
boxes[winstates[j][i]].style.color = "white";
|
||||
|
||||
}
|
||||
|
||||
return 1;
|
||||
|
||||
} else if(marks === 9) {
|
||||
|
||||
return 2;
|
||||
|
||||
} else {
|
||||
|
||||
count = 0;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return -1;
|
||||
|
||||
}
|
||||
|
||||
function resetAndClear() {
|
||||
|
||||
for(let i = 0; i < boxes.length; i++) {
|
||||
|
||||
boxes[i].innerHTML = ""
|
||||
boxes[i].style.backgroundColor = "white";
|
||||
boxes[i].style.color = "#4A245E";
|
||||
|
||||
}
|
||||
|
||||
if(currentPlayer === playerX) {
|
||||
|
||||
currentPlayer = playerO;
|
||||
|
||||
} else {
|
||||
|
||||
currentPlayer = playerX;
|
||||
|
||||
}
|
||||
|
||||
for(let i = 0; i < posX.length; i++) {
|
||||
|
||||
posX[i] = -1;
|
||||
|
||||
}
|
||||
|
||||
for(let i = 0; i < posO.length; i++) {
|
||||
|
||||
posO[i] = -1;
|
||||
|
||||
}
|
||||
|
||||
marks = 0;
|
||||
|
||||
document.getElementById("output-text").innerHTML = currentPlayer + "\'s turn"
|
||||
document.getElementById("clear").hidden = true;
|
||||
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
.navbar {
|
||||
|
||||
border: none;
|
||||
|
||||
}
|
||||
|
||||
.bg-dark {
|
||||
|
||||
background-color: #4A245E;
|
||||
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-nav > li > a {
|
||||
|
||||
color: white;
|
||||
transition: color 300ms;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
|
||||
transition: background-color 300ms;
|
||||
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
|
||||
background-color: white;
|
||||
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-nav > li > a:focus, .navbar-inverse .navbar-nav > li > a:hover {
|
||||
|
||||
color: #4A245E;
|
||||
background-color: transparent;
|
||||
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-nav > .active > a,
|
||||
.navbar-inverse .navbar-nav > .active > a:hover,
|
||||
.navbar-inverse .navbar-nav > .active > a:focus {
|
||||
|
||||
background-color: white;
|
||||
color: #4A245E;
|
||||
|
||||
}
|
||||
@@ -0,0 +1,185 @@
|
||||
/* GENERAL */
|
||||
body {
|
||||
margin:0;
|
||||
height:100vh;
|
||||
background:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
hsl(279deg 33% 47%) 0%,
|
||||
hsl(279deg 40% 33%) 39%,
|
||||
hsl(279deg 62% 19%) 61%,
|
||||
hsl(279deg 94% 7%) 100%
|
||||
);
|
||||
background-size:300% 100%,cover;
|
||||
animation:change 4s linear infinite;
|
||||
animation-direction: alternate;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
@keyframes change {
|
||||
from {
|
||||
background-position: right,center;
|
||||
}
|
||||
}
|
||||
/* TEXT */
|
||||
* {
|
||||
font-family: Lato, sans-serif;
|
||||
color: white;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 5vw 0 5vw 0;
|
||||
font-size: 8vw;
|
||||
}
|
||||
|
||||
|
||||
h2 {
|
||||
font-size: 4vw;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 3vw;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 2vw;
|
||||
}
|
||||
|
||||
.dark-text {
|
||||
color: #4A245E;
|
||||
}
|
||||
|
||||
.light-text {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* NAV-BAR */
|
||||
.bg-light {
|
||||
background-color: white !important;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
padding-left: .5vw;
|
||||
color: #4A245E;
|
||||
font-size: 2vw;
|
||||
font-weight: bold;
|
||||
|
||||
animation: 500ms;
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.navbar-toggler:focus {
|
||||
box-shadow: none;
|
||||
border:none;
|
||||
}
|
||||
|
||||
.navbar-light .navbar-toggler-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(74, 36, 94, 1)' stroke-width='3.5' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.navbar-brand:hover {
|
||||
color: #4A245E;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: 1.5vw;
|
||||
}
|
||||
|
||||
.nav-link, .nav-link > .nav-item {
|
||||
color: #4A245E;
|
||||
font-size: 1.3vw;
|
||||
|
||||
animation: 500ms;
|
||||
}
|
||||
|
||||
.nav-link:hover, .nav-link:hover > .nav-item {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
background-color: #4A245E;
|
||||
}
|
||||
|
||||
/* MISC */
|
||||
|
||||
.custom-container {
|
||||
align-content: center;
|
||||
|
||||
padding: 5vw;
|
||||
|
||||
width: 90% !important;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.bar {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-top: 5px #4A245E solid;
|
||||
padding-bottom: 1vw;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.card {
|
||||
flex: 1;
|
||||
background-color: white;
|
||||
color: #4A245E;
|
||||
}
|
||||
|
||||
#getNewQuote {
|
||||
margin-top: 5vw;
|
||||
font-size: 2vw;
|
||||
border: 5px #4A245E solid;
|
||||
border-radius: 1vw;
|
||||
padding: 1vw;
|
||||
background-color: #4A245E;
|
||||
color: white;
|
||||
|
||||
animation: 500ms;
|
||||
}
|
||||
|
||||
#getNewQuote:hover {
|
||||
background-color: white;
|
||||
color: #4A245E;
|
||||
border: 5px #4A245E solid;
|
||||
}
|
||||
|
||||
#person {
|
||||
padding: 1vw;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
|
||||
h1 {
|
||||
font-size: 12vw;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 8vw;
|
||||
}
|
||||
|
||||
h3, .navbar-brand {
|
||||
font-size: 6vw;
|
||||
}
|
||||
|
||||
p, .nav-link, .nav-link > .nav-item {
|
||||
font-size: 3vw;
|
||||
}
|
||||
|
||||
.nav-link > .nav-item {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -0,0 +1,76 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>HTML5 Canvas</title>
|
||||
<link rel="icon" href="https://fav.farm/🔥" />
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li id="0" class="color">Red</li>
|
||||
<li id="122" class="color">Green</li>
|
||||
<li id="255" class="color">Blue</li>
|
||||
</ul>
|
||||
<canvas id="draw" width="800" height="800"></canvas>
|
||||
<script>
|
||||
|
||||
let isDrawing = false;
|
||||
let lastX = 0;
|
||||
let lastY = 0;
|
||||
|
||||
const canvas = document.querySelector('#draw');
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
canvas.addEventListener('mousemove', draw);
|
||||
canvas.addEventListener('mouseup', () => isDrawing = false);
|
||||
canvas.addEventListener('mouseout', () => isDrawing = false);
|
||||
|
||||
canvas.addEventListener('mousedown', (e) => {
|
||||
isDrawing = true;
|
||||
[lastX, lastY] = [e.offsetX, e.offsetY];
|
||||
});
|
||||
|
||||
const ctx = canvas.getContext('2d');
|
||||
ctx.strokeStyle = '#BADA55';
|
||||
ctx.lineJoin = 'round';
|
||||
ctx.lineCap = 'round';
|
||||
|
||||
const buttons = document.querySelectorAll('.color');
|
||||
buttons.forEach(button => button.addEventListener('click', updateColor));
|
||||
|
||||
function updateColor() {
|
||||
ctx.strokeStyle = `hsl(${this.id}, 100%, 50%)`;
|
||||
}
|
||||
|
||||
function draw(e) {
|
||||
if(!isDrawing) return;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(lastX, lastY);
|
||||
[lastX, lastY] = [e.offsetX, e.offsetY];
|
||||
ctx.lineTo(lastX, lastY);
|
||||
ctx.stroke();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: inline-block;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
float: left;
|
||||
display: block;
|
||||
padding: 5px;
|
||||
border: 2px solid black;
|
||||
}
|
||||
</style>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+54
-12
@@ -1,27 +1,69 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-sclae=1" charset+"UTF-8">
|
||||
<link rel="stylehseet" href="css/style.css">
|
||||
<head>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
|
||||
<title>Josh Ashton | Jr Dev</title>
|
||||
</head>
|
||||
|
||||
|
||||
<!-- CSS only -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
|
||||
<link href="css/style.css" rel="stylesheet">
|
||||
|
||||
<audio>
|
||||
Your browser isn't invited for super fun audio time.
|
||||
</audio>
|
||||
|
||||
<title>Joshua Ashton</title>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<a href="home"><li></li></a>
|
||||
<a href="about"><li></li></a>
|
||||
<a href="contact"><li></li></a>
|
||||
<!-- Navigation -->
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
<a class="navbar-brand" href="">Josh Ashton</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav nav-fill w-100">
|
||||
<a class="nav-link" target="_blank" href="1430">
|
||||
<li class="nav-item">CSIS 1430</li>
|
||||
</a>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section></section>
|
||||
<div class="custom-container" id="splash">
|
||||
|
||||
<h1 class="light-text">Hi, I'm Josh Ashton!</h1>
|
||||
|
||||
<h2 class="light-text">Aspiring developer at SLCC</h2>
|
||||
|
||||
</div>
|
||||
|
||||
<h3 class="light-text">Projects I'm Proud of</h3>
|
||||
<div class="cards">
|
||||
<div class="custom-container card">
|
||||
<h4 class="dark-text">1st Project to Highlight</h4>
|
||||
</div>
|
||||
<div class="custom-container card">
|
||||
<h4 class="dark-text">2nd Project to Highlight</h4>
|
||||
</div>
|
||||
<div class="custom-container card">
|
||||
<h4 class="dark-text">3rd Project to Highlight</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
<footer>
|
||||
|
||||
<!-- JavaScript Bundle with Popper -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
|
||||
<script src="js/script.js"></script>
|
||||
|
||||
</footer>
|
||||
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user