Skip to content

Instantly share code, notes, and snippets.

@outoftime

outoftime/index.html

Created May 17, 2016 12:49
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 outoftime/4f5a5fcebcad83fe5f83cc1c8dae4cac to your computer and use it in GitHub Desktop.
Save outoftime/4f5a5fcebcad83fe5f83cc1c8dae4cac to your computer and use it in GitHub Desktop.
Download ZIP
Exported from Popcode. Click to import: https://popcode.org/?gist=4f5a5fcebcad83fe5f83cc1c8dae4cac
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>GWHS Cafe</title>
</head>
<body>
<div id="menu">
<h1> George Westinghouse Cafe</h1>
</div>
</body>
</html>
Raw
script.js
function addFood(object) {
var $container = $('<div class="food"></div>');
// ADD FOOD IMAGE
$('<img>').attr('src', object.image).appendTo($container);
var $textContainer = $('<div class="food-text"></div>').appendTo($container);
// ADD FOOD NAME
$('<div class="name"></div>').text(object.name).appendTo($textContainer);
// PRINT INGREDIENTS
if (object.ingredients) {
$('<span class="ingredient"></span>').text(object.ingredients[0]+" ").appendTo($textContainer);
}
$('#menu').append($container);
}
Raw
styles.css
.food {
max-width: 80%;
margin: 0 1em;
padding: 1em;
clear: both;
}
.food img {
width: 30%;
float: left;
}
.food-text {
width: 60%;
float: right;
padding: 20px;
}
.name {
font-size: 2em;
text-align: left;
}
body {
font-family: Helvetica;
background: #3CCFB9
}
h1 {
background: #F8FD86;
border-radius: 10px;
padding: 10px;
text-align: center;
}
#menu{
background: #FFFFFF;
margin: 50px;
padding: 20px;
border-radius: 10px;
clear:both;
}
#menu::after {
content: "";
display: table;
clear: both;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment