Skip to content
Snippets Groups Projects
Unverified Commit 1cc4926a authored by chr1st7an's avatar chr1st7an Committed by GitHub
Browse files

Add files via upload

parents
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 418 additions and 0 deletions
Basic Website(HTML, CSS, JS)/about.html 0 → 100644
+ 86
− 0
View file @ 1cc4926a
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>About_CollegeCooks_INFO151_HW2_cmr458</title>
<!--this is the in head styling for most of my webpage-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="ccstyle.css">
<style>
body {background-color: cornsilk; font-family:courier;}
h1 {font-family:courier; color:black;}
p {text-align:center; font-family:courier; background-color:forestgreen; color:white;}
/*CSS comment about selector id with table and border code*/
#selector {
background-color: white;
border-collapse: collapse;
}
#selector {
border-style: dotted;
}
#divselector {
border-style: solid;
border-color: brown;
border-radius: 15px;
}
</style>
</head>
<body>
<header>
<h1><a href="home.html">College Cooks</a></h1>
<h2>about us</h2>
</header>
<!--cmr458: class selector for the side navigation styling in the CSS document-->
<div class="sidenav">
<img src="chef.png" style="width: 20px; min-width: 110px;">
<a href="home.html">home</a>
<a href="about.html">about</a>
<a href="product.html">product</a>
<a href="contact.html">contact us</a>
</div>
<article>
<div id="divselector">
<h1 href="#top"><strong>About</strong> College Cooks</h1>
<p>College Cooks' mission is to give struggling students an outlet to easily learn how to feed themselves.<br> Every college student knows how much money is spent eating out...it is way more than they can afford.<br> How about putting a fraction of that money to a monthly subscription that includes a video-guided recipe along with all of the ingredients needed? <br> A culinary universe delivered to your doorsteps for half of the money you would spend at a fast food restaurant.<br> Our mission is to educate students on the art of cooking while feeding them and saving them their precious money!</p>
<h2>Learn more...</h2>
<ul>
<li>Pricing/Packages</li>
<li>Available Colleges and Universities</li>
<li>Reviews</li>
</ul>
</div>
<!--cmr458:This link will open a new window-->
<a href="product.html" target="_blank">Compare plans and prices!</a>
<a href=https://www.hellofresh.com/?c=HE-KL5Y2HCIR&gclid=EAIaIQobChMIvZK6tvGi7AIVBYTICh1GDQsOEAAYASAAEgL3yPD_BwE&locale=en-US>Our Competition</a>
<!--Table with embedded images and border-->
<table id="selector"; border="1">
<tr>
<th>Competing Brands</th>
<th>Average Rating</th>
</tr>
<tr>
<td><strong>Hello Fresh</strong></td>
<td><img src="images/3star.jpg" alt="rating" width="100" height="50"</td>
<tr>
<td><strong>Blue Apron</strong></td>
<td><img src="images/2star.jpg" alt="rating" width="100" height="50"</td>
</tr>
<tr>
<td><strong>COLLEGE COOKS</strong></td>
<td><img src="images/5star.jpg" alt="rating" width="100" height="50"></td>
</tr>
</table>
<h3>Drexel Student Discount!</h3>
<!--cmr458:Image with hyperlink-->
<a href="http://drexel.edu">
<img src="images/dragon.jpg" alt="Drexel logo" width="300" height="200">
</a>
<!--cmr458:company slogan tooltip embedded into the header-->
<h3 id="slogan" title="Our Company Slogan">Full Stomach and a Full Wallet</h3>
<!--cmr458:Image adjusted with name and dimensions-->
<img src="images/homecook.jpg" alt="young chefs" width="600" height="200">
<a href="#top"> Jump to top</a>
</article>
</body>
</html>
\ No newline at end of file
Basic Website(HTML, CSS, JS)/ccstyle.css 0 → 100644
+ 81
− 0
View file @ 1cc4926a
/*cmr458: external CSS document*/
h1 {
text-shadow: 1px 2px; /*will add more effect on company title*/
}
* {
Font-family:"Lucida Console", Courier, monospace;
}
* {
Background-color: cornsilk;
}
/*cmr458: this targets the tables found on the product and about page*/
Table, th, td {
Border-style: solid;
Width: 100%;
Border-collapse: collapse;
}
th {
Border-style: solid;
Border-color: black;
Background-color: green;
Color: white;
}
Td:hover {
Border-style: solid;
Background-color: white;
Color: black;
}
/*cmr458: styles the location and appearance of the title of the company across all of the webpage*/
Header {
Display: block;
Border: 1px solid green;
Background-color: cornsilk;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 70px;
padding-left: 80px;
Text-align: center;
}
/*BEGINNING: side navigation and webpage layout code*/
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.sidenav {
height: 100%;
width: 200px;
position: fixed;
z-index: 3;
top: 0;
left: 0;
background-color: green;
overflow-x: hidden;
}
article {
margin-left: 200px;
padding-left: 20px;
}
.sidenav, a {
color: white;
padding: 16px;
text-decoration: none;
display: block;
Background-color: green;
}
.sidenav, a:hover {
background-color: cornsilk;
color: green;
}
/*END: side navigation and webpage layout code*/
\ No newline at end of file
Basic Website(HTML, CSS, JS)/contact.html 0 → 100644
+ 67
− 0
View file @ 1cc4926a
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>About_CollegeCooks_INFO151_HW2_cmr458</title>
<!--this is the in head styling for most of my webpage-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="ccstyle.css">
<script>
function get_contact_info() {
var fname = document.getElementById("fname").value;
var email = document.getElementById("email").value;
var contact_info = fname + " " + email;
alert("Thank you We will reach out soon: " + contact_info + ".");
document.getElementById("contactinfo").innerHTML = contact_info;
};
</script>
<style>
#survey {
text-align: center;
}
</style>
</head>
<body>
<header>
<h1><a href="home.html">College Cooks</a></h1>
<h2>contact</h2>
</header>
<!--cmr458: class selector for the side navigation styling in the CSS document-->
<div class="sidenav">
<img src="chef.png" style="width: 20px; min-width: 110px;">
<a href="home.html">home</a>
<a href="about.html">about</a>
<a href="product.html">product</a>
<a href="contact.html">contact us</a>
</div>
<div id="survey">
<h1>Submit Your Information</h1>
<p>We Values Your Feedback! </p>
Full Name: <br>
<input type="text" value="Johnny appleseed" id="fname" name="fname"> <br>
Email: <br>
<input type="text" value="@" id="email" name="email"> <br>
<h2> Plan in Question </h2>
<input type="checkbox" name="Beginner Plan">
Beginner <br>
<input type="checkbox" name="Dorm Cook Plan">
DormCook <br>
<input type="checkbox" name="Master College Cook Plan">
MasterCollegeCook <br>
<h2> Thank You <span id="contactinfo"> </span>! </h2>
<input type="button" value="Done" onclick="get_contact_info()">
</form>
</div>
</body>
</html>
\ No newline at end of file
Basic Website(HTML, CSS, JS)/home.html 0 → 100644
+ 94
− 0
View file @ 1cc4926a
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>HOME</title>
<link rel="stylesheet" href="ccstyle.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
exception {
color: green;
}
.slideborder {
border-style: solid;
border-color: black;
}
/*cmr458: CSS Box Model*/
#boxmodel {
border: 15px solid green;
padding: 10px;
margin: 20px;
}
/*cmr458: child selector */
header > h1 {
background-color: green;
}
</style>
<!--cmr458: javascript code for slideshow in the home webpage-->
<script>
// cmr458: declaring and assigning a string to a variable (i)
var i = 0;
var images = [];
var time = 3000;
// cmr458: list of all images in slideshow
images[0] = "images/tikka.jpg";
images[1] = "images/spag.jpg";
images[2] = "images/mac.jpg";
images[3] = "images/steak.jpg";
// cmr458: defined function
function changeImg(){
document.slideshow.src = images[i];
if(i < images.length - 1){
// Add 1 to Index
i++;
} else {
// Reset Back To O
i = 0;
}
setTimeout("changeImg()", time);
}
window.onload=changeImg;
</script>
</head>
<body>
<header>
<h1>College Cooks</h1>
<h2>home</h2>
</header>
<!--cmr458:example of an element selector in the form of class-->
<div class="sidenav">
<img src="chef.png" style="width: 20px; min-width: 69px;">
<a href="home.html">home</a>
<a href="about.html">about</a>
<a href="product.html">product</a>
<a href="contact.html">contact us</a>
</div>
<article>
<p id="boxmodel">Welcome to College Cooks! Feel free to look around and let your taste buds guide you! For more information, visit our about page!
<div class="slideborder">
<img name="slideshow" width="100%" height="500px" />
</div>
<p id="coupon" style="display:none">20% off with code "Winter2022" at checkout!</p>
<!--cmr458: onnclick attribute for javascript button feature-->
<button type="button" onclick="document.getElementById('coupon').style.display='block'">Today's Coupon!</button>
</article>
</body>
</html>
\ No newline at end of file
Basic Website(HTML, CSS, JS)/images/2star.jpg 0 → 100644
+ 0
− 0
View file @ 1cc4926a
Basic Website(HTML, CSS, JS)/images/2star.jpg

146 KiB

Basic Website(HTML, CSS, JS)/images/3star.jpg 0 → 100644
+ 0
− 0
View file @ 1cc4926a
Basic Website(HTML, CSS, JS)/images/3star.jpg

28.6 KiB

Basic Website(HTML, CSS, JS)/images/5star.jpg 0 → 100644
+ 0
− 0
View file @ 1cc4926a
Basic Website(HTML, CSS, JS)/images/5star.jpg

18 KiB

Basic Website(HTML, CSS, JS)/images/chef.jpg 0 → 100644
+ 0
− 0
View file @ 1cc4926a
Basic Website(HTML, CSS, JS)/images/chef.jpg

81.2 KiB

Basic Website(HTML, CSS, JS)/images/chef.png 0 → 100644
+ 0
− 0
View file @ 1cc4926a
Basic Website(HTML, CSS, JS)/images/chef.png

7.72 KiB

Basic Website(HTML, CSS, JS)/images/chickn.jpg 0 → 100644
+ 0
− 0
View file @ 1cc4926a
Basic Website(HTML, CSS, JS)/images/chickn.jpg

234 KiB

Basic Website(HTML, CSS, JS)/images/dragon.jpg 0 → 100644
+ 0
− 0
View file @ 1cc4926a
Basic Website(HTML, CSS, JS)/images/dragon.jpg

97.7 KiB

Basic Website(HTML, CSS, JS)/images/homecook.jpg 0 → 100644
+ 0
− 0
View file @ 1cc4926a
Basic Website(HTML, CSS, JS)/images/homecook.jpg

1010 KiB

Basic Website(HTML, CSS, JS)/images/mac.jpg 0 → 100644
+ 0
− 0
View file @ 1cc4926a
Basic Website(HTML, CSS, JS)/images/mac.jpg

55.9 KiB

Basic Website(HTML, CSS, JS)/images/spag.jpg 0 → 100644
+ 0
− 0
View file @ 1cc4926a
Basic Website(HTML, CSS, JS)/images/spag.jpg

2.23 MiB

Basic Website(HTML, CSS, JS)/images/steak.jpg 0 → 100644
+ 0
− 0
View file @ 1cc4926a
Basic Website(HTML, CSS, JS)/images/steak.jpg

555 KiB

Basic Website(HTML, CSS, JS)/images/taco.jpg 0 → 100644
+ 0
− 0
View file @ 1cc4926a
Basic Website(HTML, CSS, JS)/images/taco.jpg

1.42 MiB

Basic Website(HTML, CSS, JS)/images/tikka.jpg 0 → 100644
+ 0
− 0
View file @ 1cc4926a
Basic Website(HTML, CSS, JS)/images/tikka.jpg

139 KiB

Basic Website(HTML, CSS, JS)/product.html 0 → 100644
+ 90
− 0
View file @ 1cc4926a
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>PRODUCT</title>
<link rel="stylesheet" href="ccstyle.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#plan {
background-color: white;
}
</style>
</head>
<body>
<header>
<!--cmr458:jumps to new tab-->
<h1><a href="home.html" target="_blank">College Cooks</a></h1>
<h2>product</h2>
</header>
<div class="sidenav">
<img src="chef.png" style="width: 20px; min-width: 100px;">
<a href="home.html">home</a>
<a href="about.html">about</a>
<a href="product.html">product</a>
<a href="contact.html">contact us</a>
</div>
<article>
<h1>Product</h1>
<h2>Our Plans!</h2>
<!--cmr458: id anchor-->
<h3 id="plan">Beginner Plan:</h3>
<p>At $75 a month, you will be sent 4 meals of your choosing a week! This all averages out at around 5 dollars a meal for the month, and there are no better recipes to start off with on the basic menu!
</p>
<h3 id="plan">Dorm Cook Plan:</h3>
<p> For only $150 a month, you will have access to 24 meals throughout the month. Subscribers can chose off of the basic menu as well as the deluxe menu!
</p>
<h3 id="plan">Master College Cook:</h3>
<p>at $250 a month, College Cooks will send you 31 deluxe menu meals throughout the month at a higher portion size! Perfect for those who do not eat out!
</p>
<h2>Our Menus!</h2>
<h3>Basic</h3>
<table id="basic">
<tr>
<th>Dish</th>
<th>Description</th>
<th>Portion Sizes</th>
</tr>
<tr>
<td>Macaroni and Cheese <img src="images/mac.jpg" style="width: 20vw; min-width: 100px; padding-right: 10px">
</td>
<td>A classic crowd pleaser. Choose from our wide variety of cheeses to create your perfect cheesy dream</td>
<td>2,4, and 6 servings</td>
</tr>
<tr>
<td>Chicken and Rice <img src="images/chickn.jpg" style="width: 20vw; min-width: 100px; padding-right: 10px"></td>
<td>A beautiful simple dish. Many different types of rice and seasonings for your chicken to chose from. Customize it to your taste bud's desire!</td>
<td>2 or 4 servings</td>
</tr>
<tr>
<td>Spaghetti and Meatballs <img src="images/spag.jpg" style="width: 20vw; min-width: 100px; padding-right: 10px"></td>
<td>An Italian classic! Delicious pasta coated in red sauce. You choose from our many additional flavors!</td>
<td>2,4, and 6 servings</td>
</tr>
</table>
<h3>Deluxe</h3>
<table id="Deluxe">
<tr>
<th>Dish</th>
<th>Description</th>
<th>Portion Sizes</th>
</tr>
<tr>
<td>Chicken Tikka Masala <img src="images/tikka.jpg" style="width: 20vw; min-width: 100px; padding-right: 10px"></td>
<td>An Indian staple! Beautiful creamy orange curry with chunks of tender juicy chicken. Decide on what type of rice and additional sides to create!</td>
<td>2,4, and 6 servings</td>
</tr>
<tr>
<td>Beef Tacos <img src="images/taco.jpg" style="width: 20vw; min-width: 100px; padding-right: 10px"></td>
<td>Create a taste of Mexico with all the ingredients needed to create some deliicious tacos. You decide what toppings you want to whip up</td>
<td>2,4, or 6 servings</td>
</tr>
<tr>
<td>Steak and Potatoes <img src="images/steak.jpg" style="width: 20vw; min-width: 100px; padding-right: 10px"></td>
<td>Cook your perfect steak! Nothing better than a beautifully prepared steak with a side of mashed potatoes. Additional sides and varieties available</td>
<td>2 or 4 servings</td>
</tr>
</table>
</article>
</body>
</html>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment