Skip to content

Instantly share code, notes, and snippets.

@rbeauchamp12

rbeauchamp12/index.html Secret

Last active February 21, 2017 06:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rbeauchamp12/ca25c80fe0e3be74f9cb53e2296a075b to your computer and use it in GitHub Desktop.
Save rbeauchamp12/ca25c80fe0e3be74f9cb53e2296a075b to your computer and use it in GitHub Desktop.
Download ZIP
YokosKitchen.com (sample only-not live)
Raw
index.html
<!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">
<title>Yoko's Kitchen</title>
<link type="text/css" rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Signika" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<!-- navigation section begins -->
<h1 class="text-center"> <span style="color: #049372">Yoko's</span> Kitchen</h1>
<br>
<div class="container">
<nav class="navbar navbar-toggleable-md navbar-light">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-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">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Class Schedule</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav
</div>
<br>
<br>
<!-- Navigation section ends -->
<!-- Main Body section begins -->
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="thumbnail">
<img src="./images/bokchoi.png">
<figcaption><strong>Bok Choi Cooking Course</strong></figcaption>
<p>A five week introduction course introducing traditional Japenese vegetarian meals, teaching you a selection of rice and noodle dishes. </p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="./images/teriyakisauce.png">
<figcaption><strong>Teriyaki Saunce Workshop</strong></figcaption>
<p>An intensive one-day workshop that teaches how to create the most delicious sauces to be used in a wide range of Japenese dishes. </p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<h2>Popular Recipes</h2>
<ul class="list-unstyled">
<li> <strong>Yakitori</strong>: Grilled Chicken</li> <br>
<li> <strong>Tsukune </strong>: Minced Chicken Patties</li> <br>
<li><strong> Okonomiyaki </strong>: Savory Pancakes</li> <br>
<li><strong>Mizutaki </strong>: Chicken Stew</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Classes sections (table view) -->
<div class="table-responsive text-center">
<table class="table table-condensed table-hover table-bordered table-striped">
<tr class="active">Class Schedule</tr>
<tr>
<td class="info">Monday</td>
<td class="info">Tuesday</td>
<td class="info">Wednesday</td>
<td class="info">Thursday</td>
<td class="info">Friday</td>
<td class="info">Saturday</td>
<td class="info">Sunday</td>
</tr>
<!-- first row-->
<tr>
<td>10:45 AM</td>
<td>11:45 AM</td>
<td>1:30 PM</td>
<td>9:30 AM</td>
<td>11:00 AM</td>
<td>12:15 PM</td>
<td>No Class</td>
</tr>
<!-- second row -->
<tr>
<td>11:45 AM</td>
<td>12:45 PM</td>
<td>2:30 PM</td>
<td>10:30 AM</td>
<td>12:00 PM</td>
<td>1:15 PM</td>
<td>No Class</td>
</tr>
<!-- third row -->
<tr>
<td>12:45 PM</td>
<td>1:45 PM</td>
<td>3:30 PM</td>
<td>11:30 AM</td>
<td>1:00 PM</td>
<td>2:15 PM</td>
<td>No Class</td>
</tr>
<!--fourth row -->
<tr>
<td>1:45 PM</td>
<td>2:45 PM</td>
<td>4:30 PM</td>
<td>12:30 PM</td>
<td>2:00 PM</td>
<td>3:15 PM</td>
<td>No Class</td>
</tr>
</table>
</div>
<br>
<br>
<!-- About Yoko Section Begins -->
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="about">
<h3 class="text-center" ><strong>About Yoko's Kitchen</strong></h3>
<br>
<p class="lead">Yoko's Kitchen is a family owned business aimed to teach food lovers the different styles of true Japenese cuisine. Mauris imperdiet urna metus, id ornare tortor cursus sit amet. Vivamus condimentum nisl eu est rutrum, ut luctus neque sodales. Quisque sed varius justo. Quisque sed lobortis sapien. Curabitur ligula lectus, gravida sit amet consectetur ut, luctus a ipsum. Proin a aliquam purus. Aliquam tincidunt nunc lacus, nec eleifend ex efficitur sit amet. In hac habitasse platea dictumst. Fusce vel mi et velit faucibus tempor in a magna. Ut posuere pellentesque enim, et cursus massa venenatis et. Suspendisse ultrices mattis velit, ut cursus tortor rutrum vitae. Donec nec laoreet massa, vitae luctus eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. </p>
</div>
</div>
</div>
</div>
<!-- About Yoko Section Ends -->
<br>
<br>
<h3 class="text-center">Please fill out the form <br>
<small>Plase incude the days and times you would like to attend a class. We provides private lessons as well.</small></h3>
<br>
<!-- Contact form begins-->
<form>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-sm-6 form-group">
<input class="form-control" id="name" name="name" placeholder="Name" type="text" required>
</div>
<div class="col-sm-6 form-group">
<input class="form-control" id="email" name="email" placeholder="Email" type="email" required>
</div>
</div>
<textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea>
<br>
<div class="row">
<div class="col-md-12 form-group">
<button class="btn-default btn-primary" type="submit">Send</button>
</div>
</div>
</div>
</div>
</form>
<!--contact form ends -->
<br>
<br>
<!-- footer section begins -->
<div class="container">
<div class="row">
<div class="col-sm-12">
<footer class="text-center">
&copy; 2015 Yoko's Kitchen
&copy; Designed by Robert Beauchamp
</footer>
</div>
</div>
</div>
<!-- footer section ends -->
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
Raw
style.css
body, h1 h2 h3 h4 h5 h6{
font-family: "Times New Roman", Times, serif;
background-color: #D2D7D3 !important;
padding: 0;
font-color: black;
}
h1{
padding-top: 25px;
padding-bottom: 25px;
word-spacing: 5px;
}
.container{
display: block;
padding-top: 5px;
padding-bottom: 15px;
}
.thumbnail{
display: inline-block;
text-decoration: none;
margin-left: 0;
margin: 0;
}
li{
text-decoration: none;
}
.table{
background-color: #049372;
}
.btn-default{
float: right;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment