generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
132 lines (124 loc) · 4.9 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
<!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.0">
<meta name="description" content="Food Blog for foodie people">
<meta name="keywords" content="foodie, food blog, food, blog, recipe, food recipe, recipes">
<!-- favicon links -->
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon_io/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon_io/favicon-16x16.png">
<!-- css link -->
<link rel="stylesheet" href="assets/css/style.css" type="text/css">
<title>Food Blog</title>
</head>
<body>
<header>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<div id="logo">
<a href="index.html"> <img src="assets/image/logo.webp" alt="logo" width="280" height="120"></a>
</div>
<nav>
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="#about-me">About me</a>
</li>
<li>
<a href="#recipe-section">Recipes</a>
</li>
<li>
<a href="contact.html">Contact me</a>
</li>
</ul>
</nav>
</header>
<section class="hero">
<div class="hero-contents">
<h1>Welcome to my blog </h1>
<span>foodies!</span>
</div>
</section>
<section id="about-me">
<div class="about-me-text">
<h2 class="title">Hi Food Lovers</h2>
<p class="paragraph">
I love books. I love food. Ever since I was a little kid I have had this immense passion for cooking.
<br> <br> I thought to myself. Why not share with the rest of the world wholesome healthy foods and
ways to be happy and healthy that will keep even the most snobby foodie asking for more.
</p>
</div>
<div class="about-me-image">
<img src="assets/image/owner-img.webp" alt="image of a girl cooking in the kitchen">
</div>
</section>
<section id="recipe-section">
<h2>My Favourite recipes</h2>
<div class="container">
<div class="card">
<img src="assets/image/ramen1.webp" alt="">
<div class="card-contents">
<h3>Ramen</h3>
<p>
Ramen is a Japanese noodle dish. It consists of Chinese-style
wheat noodles.
</p>
<button class="button" onclick="location.href='recipes.html'">read more</button>
</div>
</div>
<div id="card-img2" class="card">
<img src="assets/image/oats1.webp" alt="">
<div class="card-contents">
<h3>Oats</h3>
<p>
Oats are an incredibly healthy whole grain and a great
source of many vitamins, minerals.
</p>
<button class="button" onclick="location.href='recipes.html'">read more</button>
</div>
</div>
<div class="card">
<img src="assets/image/poke.webp" alt="a bowl of poke">
<div class="card-contents">
<h3>Poke</h3>
<p>
Poke is diced raw fish served is one of the main dishes of Native Hawaiian cuisine
</p>
<button class="button" onclick="location.href='recipes.html'">read more</button>
</div>
</div>
</div>
</section>
<!-- the code has been taken and modifed from Love Running project -->
<footer>
<ol class="icons">
<li>
<a href="https://facebook.com" target="_blank" rel="noopener"
aria-label="visit my facebook page">
<i class="fab fa-facebook"></i>
</a>
</li>
<li>
<a href="https://instagram.com" target="_blank" rel="noopener"
aria-label="visit my instagram page">
<i class="fab fa-instagram"></i>
</a>
</li>
<li>
<a href="https://www.pinterest.com/" target="_blank" rel="noopener"
aria-label="visit my pinterest page">
<i class="fab fa-pinterest"></i>
</a>
</li>
</ol>
</footer>
<!-- font awesome script -->
<script src="https://kit.fontawesome.com/c7dbda0798.js" crossorigin="anonymous"></script>
</body>
</html>