-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
135 lines (126 loc) · 5.61 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Pancake Recipe</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/common.css" rel="stylesheet">
<link href="css/steps.css" rel="stylesheet">
<link href="css/slider.css" rel="stylesheet">
<link href="css/comments.css" rel="stylesheet">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/ingredients.css">
</head>
<body>
<div class="container">
<nav class="navbar ">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="collapsed navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9" aria-expanded="false">
<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a href="#" class="navbar-brand">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-9">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</nav>
<div class="page-header">
<h1>Pancakes <small>with Bootstrap and jQuery</small></h1>
</div>
<div class="row">
<div class="col-md-4">
<h2>Ingredients</h2>
<ul class="ingredients">
<li><span data-portion="1">1 </span> Egg</li>
<li><span data-portion="400">400</span> Grams of Plain Floor</li>
<li><span data-portion="1">1</span> Bar of Butter</li>
<li><span data-portion="2">2 </span> Table Spoons Sugar</li>
<li><span data-portion="2">2 </span> teaspoons baking powder</li>
<li>
<span data-portion="1">1 </span> Cup Milk</li>
</ul>
<label for="calculate">Calculate Servings</label>
<input type="number" class="form-control" id="calculate">
</div>
<div class="col-md-8 clearfix ">
<div class="row " id="slider">
<img class="active sliderimages" src="http://www.dreistern-food.de/wp-content/uploads/American-Pancakes1.png" />
<img class="sliderimages" src="http://www.ndtv.com/cooks/images/pancakes.jpg" />
<img class="sliderimages" src="https://d1jqyzxlehme6l.cloudfront.net/images/1223/61/3/7_4/american-pancakes.jpg" />
<img class="sliderimages" src="http://www.mondamin.de/images/Recipes/93_500x380.jpg" />
</div>
<div class="row clearfix ">
<div class="col-md-12 sliderthumb clearfix">
<img class=" thumbnail sliderthumbnail" src="http://www.dreistern-food.de/wp-content/uploads/American-Pancakes1.png" />
<img class=" thumbnail sliderthumbnail" src="http://www.ndtv.com/cooks/images/pancakes.jpg" />
<img class="thumbnail sliderthumbnail" src="https://d1jqyzxlehme6l.cloudfront.net/images/1223/61/3/7_4/american-pancakes.jpg"
/>
<img class="thumbnail sliderthumbnail" src="http://www.mondamin.de/images/Recipes/93_500x380.jpg" />
</div>
</div>
</div>
</div>
<hr>
<div class="row steps">
</div>
<div class="row">
<div class="col-md-12 progress">
<div class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<section id="morePhotos">
<h1>More Impressions
<button class="btn btn-primary" id="ajax_button">More Impressions</button>
</h1>
</section>
<h1>Comments</h1>
<!-- Comment section -->
<div class="row">
<!--profile pic -->
<div class="col-md-2">
<img src="https://www.placecage.com/80/80" alt="oops" id="comments_thump_pic">
</div>
<!-- text field for the comment -->
<form>
<div class="col-md-8">
<div class="form-group">
<textarea class="form-control resizeNot " id="Text_area_input" rows="3"></textarea>
</div>
</div>
<!--col-md-1o -->
<div class="col-md-2">
<button type="button" name="button" class="btn btn-lg btn-default comments_submit_btn " id="comments_submit_btn_js">Submit!</button>
</div>
</form>
</div>
<div class="row " id="comment_container">
</div>
</div>
<div class="container-fluid">
<div class="container">
footer
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/app.js"></script>
<script src="bootstrap-notify/bootstrap-notify.js"></script>
</script>
<!--<script src="js/slider.js"></script>
<script src="js/steps.js"></script>
<script src="js/ingredients.js"></script>
<script src="js/comments.js"></script>
<script src="js/photos.js"></script>-->
</body>
</html>