-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
147 lines (145 loc) · 10.1 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
136
137
138
139
140
141
142
143
144
145
146
147
<!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">
<title>A boostrap responsive page designed by Nga Manning</title>
<!-- Bootstrap -->
<!-- <link href="css/bootstrap.css" rel="stylesheet"> -->
<link href="css/bootstrap-3.3.7.css" rel="stylesheet" type="text/css">
<!--In the file submmited it was ..cs/boostrap-3.3.7.css -->
<link href="https://fonts.googleapis.com/css?family=Teko" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Italianno" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<link href="css/main.css" rel="stylesheet" type="text/css">
<link href="css/home.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body style="padding-bottom:135px;">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="col-lg-6 col-md-6 col-sm-6">
<a class="navbar-brand" href="index.html"><img src="images/logo.png" alt="logo" class="img-responsive logo"></a>
</div>
<div class="navbar-header col-lg-6 col-md-6 col-sm-6">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topFixedNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="glyphicon glyphicon-menu-hamburger"></span></button>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="topFixedNavbar1">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">About<span class="sr-only">(current)</span></a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Salt<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Pork</a></li>
<li><a href="#">Chicken</a></li>
<li><a href="#">Seafood</a></li>
<li><a href="#">Vegan</a></li>
</ul>
</li>
<li><a href="#">Sugar</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
</nav>
<img src="images/header-bg.jpg" class="img-responsive header-hero" alt="header-bg">
</header>
<div class="container-fluid">
<div class="row home-heading">
<h1>About</h1>
<article class="col-lg-8 col-md-8">
<p>Wem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non iaculis orci. Donec volutpat dolor vel ipsum hendrerit, a rutrum ligula dapibus. Phasellus dignissim facilisis augue in tristique. Aenean commodo odio vitae laoreet tincidunt. Etiam in ipsum quam. Suspendisse tempus velit non libero venenatis condimentum. Suspendisse nec interdum mauris, malesuada vehicula felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras a justo et lacus aliquet sollicitudin. Nullam aliquet tincidunt enim vitae fringilla. Pellentesque volutpat pharetra nulla, non pellentesque justo vehicula sed. Vestibulum scelerisque fermentum volutpat. Sed sed mauris nisi.</p>
</article>
<div class="col-lg-4 col-md-4 sub-logo">
<img src="images/rice-korean.png" alt="com-korean logo" class="img-responsive">
</div>
</div>
<section class="row feature">
<h2>Featured recipes</h2>
<article class="col-lg-4 col-md-12">
<div class="row">
<h3>Banana blossom salads</h3>
<img src="images/banana-salad.jpg" alt="banana blossom salads" class="col-lg-12 col-md-4 col-sm-6">
<p class="col-lg-12 col-md-8 col-sm-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non iaculis orci. Donec volutpat dolor vel ipsum hendrerit, a rutrum ligula dapibus. Phasellus dignissim facilisis augue in tristique. Aenean commodo odio vitae laoreet tincidunt. Etiam in ipsum quam. Suspendisse tempus velit non libero venenatis condimentum. Suspendisse nec interdum mauris, malesuada vehicula felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras a justo et lacus aliquet sollicitudin.</p>
</div>
</article>
<article class="col-lg-4 col-md-12">
<div class="row">
<h3>Bun cha- grilled pork with noodle</h3>
<img src="images/bun-cha.jpg" alt="bun cha" class="col-lg-12 col-md-4 col-sm-6">
<p class="col-lg-12 col-md-8 col-sm-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non iaculis orci. Donec volutpat dolor vel ipsum hendrerit, a rutrum ligula dapibus. Phasellus dignissim facilisis augue in tristique. Aenean commodo odio vitae laoreet tincidunt. Etiam in ipsum quam. Suspendisse tempus velit non libero venenatis condimentum. Suspendisse nec interdum mauris, malesuada vehicula felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras a justo et lacus aliquet sollicitudin.</p>
</div>
</article>
<article class="col-lg-4 col-md-12">
<div class="row">
<h3>Chicken salads bowl</h3>
<img src="images/salad-bowl.jpg" alt="salad bowls" class="col-lg-12 col-md-4 col-sm-6">
<p class="col-lg-12 col-md-8 col-sm-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non iaculis orci. Donec volutpat dolor vel ipsum hendrerit, a rutrum ligula dapibus. Phasellus dignissim facilisis augue in tristique. Aenean commodo odio vitae laoreet tincidunt. Etiam in ipsum quam. Suspendisse tempus velit non libero venenatis condimentum. Suspendisse nec interdum mauris, malesuada vehicula felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras a justo et lacus aliquet sollicitudin.</p>
</div>
</article>
</section>
<div id="carousel1" class="carousel slide" data-ride="carousel">
<h2>Food galerry</h2>
<ol class="carousel-indicators">
<li data-target="#carousel0" data-slide-to="0" class="active"></li>
<li data-target="#carousel1" data-slide-to="1"></li>
<li data-target="#carousel2" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active" id="carousel0">
<img src="images/salad-healthy-diet-spinach.jpg" alt="First slide image" class="center-block">
<!--image source: www.pexels.com - Best free stock photos in one place --->
</div>
<div class="item" id="carousel1">
<img src="images/salmon.jpeg" alt="Second slide image" class="center-block">
<!--image source: www.pexels.com - Best free stock photos in one place --->
</div>
<div class="item" id=carousel2>
<img src="images/chicken-wings.jpeg" alt="Third slide image" class="center-block">
<!--image source: www.pexels.com - Best free stock photos in one place --->
</div>
</div>
<a class="left carousel-control" href="#carousel1" role="button"
data-slide="prev"><span class="glyphicon glyphicon-chevron-left"
aria-hidden="true"></span><span class="sr-only">Previous</span></a>
<a class="right carousel-control" href="#carousel1" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span></a>
</div>
<section class="row featured-article">
<article class="col-lg-6 col-md-6 col-sm-6">
<h3 class="feature-article-heading">Aenean commodo odio vitae</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non iaculis orci. Donec volutpat dolor vel ipsum hendrerit, a rutrum ligula dapibus. Phasellus dignissim facilisis augue in tristique. Aenean commodo odio vitae laoreet tincidunt. Etiam in ipsum quam. Suspendisse tempus velit non libero venenatis condimentum. Suspendisse nec interdum mauris, malesuada vehicula felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras a justo et lacus aliquet sollicitudin.</p>
</article>
<article class="col-lg-6 col-md-6 col-sm-6">
<h3 class="feature-article-heading">Aenean commodo odio vitae</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non iaculis orci. Donec volutpat dolor vel ipsum hendrerit, a rutrum ligula dapibus. Phasellus dignissim facilisis augue in tristique. Aenean commodo odio vitae laoreet tincidunt. Etiam in ipsum quam. Suspendisse tempus velit non libero venenatis condimentum. Suspendisse nec interdum mauris, malesuada vehicula felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras a justo et lacus aliquet sollicitudin.</p>
</article>
</section>
</div>
<footer class="navbar navbar-fixed-bottom">
<div class="container-fluid">
<p class="col-lg-6 col-md-6">© Copyright 2017 - Nga Manning</p>
<ul class="social-sprite col-lg-6 col-md-6">
<li><a href="https://www.facebook.com/" target="_blank" title="facebook" class="facebook"></a></li>
<li><a href="https://twitter.com/?lang=en" target="_blank" title="twitter" class="twitter"></a></li>
<li><a href="https://www.pinterest.com/" target="_blank" title="pinterest" class="pinterest"></a></li>
<li><a href="mailto:[email protected]" title="email" class="email"></a></li>
</ul>
</div>
</footer>
<script src="js/jquery-3.4.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap-3.3.7.js"></script>
</body>
</html>