Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

lesson-2 #16

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

lesson-2 #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions README.md
View file
Open in desktop

This file was deleted.

13 changes: 13 additions & 0 deletions css/materialize.min.css
View file
Open in desktop

Large diffs are not rendered by default.

75 changes: 75 additions & 0 deletions css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
/* colours */
:root{
--primary: #FFE9D2;
--secondary: #FFE1C4;
--title: #FF8816;
}

/* layout styles */
nav{
background: var(--primary);
border-bottom: 10px solid var(--secondary);
}
nav a{
text-transform: uppercase;
color: var(--title);
}
nav a span{
font-weight: bold;
}
nav .sidenav-trigger{
margin: 0;
}

/* recipe styles */
.recipes{
margin-top: 20px;
}
.card-panel.recipe{
border-radius: 8px;
padding: 10px;
box-shadow: 0px 1px 3px rgba(90,90,90,0.1);
display: grid;
grid-template-columns: 2fr 6fr 1fr;
grid-template-areas: "image details delete";
position: relative;
}
.recipe img{
grid-area: image;
max-width: 60px;
}
.recipe-details{
grid-area: details;
margin-top: 6px;
}
.recipe-delete{
grid-area: delete;
position: absolute;
bottom: 0px;
right: 0px;
}
.recipe-delete i{
font-size: 18px;
}
.recipe-title{
font-weight: bold;
}
.recipe-ingredients{
font-size: 0.8em;
}

/* form-styles */
.add-btn{
background: var(--title) !important;
}
input{
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
.side-form button{
background: var(--title);
box-shadow: 1px 1px 3px rgba(90,90,90,0.2);
}
form .input-field{
margin-top: 30px;
}
Binary file added img/dish.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
107 changes: 107 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Food Ninja</title>
<!-- materialize icons, css & js -->
<link type="text/css" href="/css/materialize.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link type="text/css" href="/css/styles.css" rel="stylesheet">
<script type="text/javascript" src="/js/materialize.min.js"></script>
</head>
<body class="grey lighten-4">

<!-- top nav -->
<nav class="z-depth-0">
<div class="nav-wrapper container">
<a href="/">Food<span>Ninja</span></a>
<span class="right grey-text text-darken-1">
<i class="material-icons sidenav-trigger" data-target="side-menu">menu</i>
</span>
</div>
</nav>

<!-- side nav -->
<ul id="side-menu" class="sidenav side-menu">
<li><a class="subheader">FOODNINJA</a></li>
<li><a href="/" class="waves-effect">Home</a></li>
<li><a href="/pages/about.html" class="waves-effect">About</a></li>
<li><div class="divider"></div></li>
<li><a href="/pages/contact.html" class="waves-effect">
<i class="material-icons">mail_outline</i>Contact</a>
</li>
</ul>

<!-- recipes -->
<div class="recipes container grey-text text-darken-1">
<div class="card-panel recipe white row">
<img src="/img/dish.png" alt="recipe thumb">
<div class="recipe-details">
<div class="recipe-title">Edame Noodles</div>
<div class="recipe-ingredients">Edame Beans, Noodels, Garlic oil</div>
</div>
<div class="recipe-delete">
<i class="material-icons">delete_outline</i>
</div>
</div>
<div class="card-panel recipe white row">
<img src="/img/dish.png" alt="recipe thumb">
<div class="recipe-details">
<div class="recipe-title">Edame Noodles</div>
<div class="recipe-ingredients">Edame Beans, Noodels, Garlic oil</div>
</div>
<div class="recipe-delete">
<i class="material-icons">delete_outline</i>
</div>
</div>
<div class="card-panel recipe white row">
<img src="/img/dish.png" alt="recipe thumb">
<div class="recipe-details">
<div class="recipe-title">Edame Noodles</div>
<div class="recipe-ingredients">Edame Beans, Noodels, Garlic oil</div>
</div>
<div class="recipe-delete">
<i class="material-icons">delete_outline</i>
</div>
</div>
<div class="card-panel recipe white row">
<img src="/img/dish.png" alt="recipe thumb">
<div class="recipe-details">
<div class="recipe-title">Edame Noodles</div>
<div class="recipe-ingredients">Edame Beans, Noodels, Garlic oil</div>
</div>
<div class="recipe-delete">
<i class="material-icons">delete_outline</i>
</div>
</div>
</div>

<div class="center">
<a class="btn-floating btn-small btn-large add-btn sidenav-trigger" data-target="side-form">
<i class="material-icons">add</i>
</a>
</div>

<!-- add recipe side nav -->
<div id="side-form" class="sidenav side-form">
<form class="add-recipe container section">
<h6 >New Recipe</h6>
<div class="divider"></div>
<div class="input-field">
<input placeholder="e.g. Ninja soup" id="title" type="text" class="validate">
<label for="title">Recipe Title</label>
</div>
<div class="input-field">
<input placeholder="e.g. Tofu, mushroom, garlic" id="ingredients" type="text" class="validate">
<label for="ingredients">Ingredients</label>
</div>
<div class="input-field center">
<button class="btn-small">Add</button>
</div>
</form>
</div>

<script src="/js/ui.js"></script>
</body>
</html>
6 changes: 6 additions & 0 deletions js/materialize.min.js
View file
Open in desktop

Large diffs are not rendered by default.

8 changes: 8 additions & 0 deletions js/ui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
document.addEventListener('DOMContentLoaded', function() {
// nav menu
const menus = document.querySelectorAll('.side-menu');
M.Sidenav.init(menus, {edge: 'right'});
// add recipe form
const forms = document.querySelectorAll('.side-form');
M.Sidenav.init(forms, {edge: 'left'});
});
45 changes: 45 additions & 0 deletions pages/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Food Ninja</title>
<!-- materialize icons, css & js -->
<link type="text/css" href="/css/materialize.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link type="text/css" href="/css/styles.css" rel="stylesheet">
<script type="text/javascript" src="/js/materialize.min.js"></script>
</head>
<body class="grey lighten-4">

<!-- top nav -->
<nav class="z-depth-0">
<div class="nav-wrapper container">
<a href="/">Food<span>Ninja</span></a>
<span class="right grey-text text-darken-1">
<i class="material-icons sidenav-trigger" data-target="side-menu">menu</i>
</span>
</div>
</nav>

<!-- side nav -->
<ul id="side-menu" class="sidenav side-menu">
<li><a class="subheader">FOODNINJA</a></li>
<li><a href="/" class="waves-effect">Home</a></li>
<li><a href="/pages/about.html" class="waves-effect">About</a></li>
<li><div class="divider"></div></li>
<li><a href="/pages/contact.html" class="waves-effect">
<i class="material-icons">mail_outline</i>Contact</a>
</li>
</ul>

<!-- content -->
<div class="container grey-text">
<h5 class="center">About Food Ninja</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus, porro voluptatum illum veniam eaque sunt sit labore provident eligendi! Voluptate amet suscipit inventore unde maxime atque impedit officia nobis laboriosam!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam voluptatibus omnis, ea doloremque exercitationem id necessitatibus. Voluptatem officiis cupiditate commodi totam, hic laborum est ducimus amet iure, non dignissimos illo.</p>
</div>

<script src="/js/ui.js"></script>
</body>
</html>
50 changes: 50 additions & 0 deletions pages/contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Food Ninja</title>
<!-- materialize icons, css & js -->
<link type="text/css" href="/css/materialize.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link type="text/css" href="/css/styles.css" rel="stylesheet">
<script type="text/javascript" src="/js/materialize.min.js"></script>
</head>
<body class="grey lighten-4">

<!-- top nav -->
<nav class="z-depth-0">
<div class="nav-wrapper container">
<a href="/">Food<span>Ninja</span></a>
<span class="right grey-text text-darken-1">
<i class="material-icons sidenav-trigger" data-target="side-menu">menu</i>
</span>
</div>
</nav>

<!-- side nav -->
<ul id="side-menu" class="sidenav side-menu">
<li><a class="subheader">FOODNINJA</a></li>
<li><a href="/" class="waves-effect">Home</a></li>
<li><a href="/pages/about.html" class="waves-effect">About</a></li>
<li><div class="divider"></div></li>
<li><a href="/pages/contact.html" class="waves-effect">
<i class="material-icons">mail_outline</i>Contact</a>
</li>
</ul>

<!-- content -->
<div class="container grey-text">
<h5 class="center">Contact Us</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus, porro voluptatum illum veniam eaque sunt sit labore provident eligendi! Voluptate amet suscipit inventore unde maxime atque impedit officia nobis laboriosam!</p>
<div class="divider"></div>
<h6>Find us at:</h6>
<ul>
<li>123 Spicy Noodle Road</li>
<li>Manchester, UK</li>
</ul>
</div>

<script src="/js/ui.js"></script>
</body>
</html>