-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
133 lines (130 loc) · 7.27 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
<!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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Quicksand:wght@300;400;500;600&display=swap" rel="stylesheet">
<link rel='stylesheet' href="styles/recipe-style.css">
<meta name="description" content="KitchenMagic provides easy recipes for any level of baker to get in their kitchen
and make something delicious.">
<title>KitchenMagic Recipe Log</title>
</head>
<body>
<script src="https://kit.fontawesome.com/4fb5dd1cb7.js" crossorigin="anonymous"></script>
<div class="container">
<nav class="d-flex justify-content-between">
<a href="/index.html">
<img src="images/recipe-logo.png" class="logo d-none d-md-block" alt="kitchenmagic-logo" />
<img src="images/recipe-logo-small.png" class="logo d-block d-md-none" alt="kitchenmagic-logo-small" />
</a>
<ul>
<li class="active">
<a href="/" title="homepage">home</a>
</li>
<li>
<a href="/recipes.html" title="recipe vault">recipes</a>
</li>
<li>
<a href="about.html" title="about the butter fairy">about</a>
</li>
<li>
<a href="/contact.html" title="contact the butter fairy">contact</a>
</li>
</ul>
</nav>
</div>
<div class="home-hero">
<h2 class="text-center">recipes made for</h2>
<h1 class="ms-3 mb-5 text-center">the <em>hungry</em> ones</h1>
<a href="recipes.html" class="btn mx-auto mt-5 mb-5">let's get cooking 👩🏾🍳</a>
<h3 class="mt-5 text-center">hi! 👋🏾 i make easy to make recipes for any level of baker - so let's eat!</h3>
</div>
<br/>
<div class="container recipe-grid">
<div class="row mt-3 mb-3">
<div class="col d-none d-md-block">
<img src="images/lemon-poppyseed-single.jpg" class="img-fluid mb-3 rounded float-start home-image" alt="lemon-poppyseed-bars-image">
</div>
<div class="col">
<div class="recipe-description">
<h2 class="mb-3 text-center">lemon poppyseed bars</h2>
<p class="text-lowercase">
indulge in the perfect balance of zesty lemon flavor and crunch with these easy-to-make lemon poppyseed bars.
this recipe is a simple and delightful treat for any occasion.
</p>
</div>
<div>
<a href="recipe-pages/lemon-poppyseed-bars.html" class="btn body-button mx-auto mb-5" title="to the recipe!">learn more</a>
</div>
</div>
<br/>
<div class="row mt-3 mb-3">
<div class="col">
<div class="recipe-description">
<h2 class="text-center">buttermilk biscuits</h2>
<p class="text-lowercase">
Enjoy a Southern staple with these fluffy and buttery Buttermilk Biscuits.
With just three simple ingredients and easy-to-follow instructions,
this recipe is perfect for breakfast, brunch, or any time you're craving some classic comfort food.
</p>
</div>
<div class="mt-3">
<a href="/recipe-pages/buttermilk-biscuits.html" class="btn body-button mx-auto mb-3" title="to the recipe!">learn more</a>
</div>
</div>
<div class="col d-none d-md-block">
<img src="images/biscuit-grid.jpg" class="img-fluid mb-3 rounded float-end home-image" alt="buttermilk-biscuits-image">
</div>
</div>
<div class="row mb-3">
<div class="col d-none d-md-block">
<img src="images/smores-brownie.jpg" class="img-fluid mb-5 rounded home-image float-start" alt="smores-brownie-image">
</div>
<div class="col">
<div class="recipe-description">
<h2 class="mb-3 text-center">s'mores brownies</h2>
<p class="text-lowercase">
Satisfy your sweet tooth and your love for s'mores with these
decadent S'mores Brownies.
This recipe blends the classic flavors of graham crackers, marshmallows,
and chocolate with rich, fudgy brownies for the ultimate indulgence.
</p>
</div>
<div class="mt-3 mb-5">
<a href="recipe-pages/smores-brownies.html" class="btn primary-link body-button mx-auto mb-5" title="to the recipe!">learn more</a>
</div>
</div>
</div>
</div>
<footer>
<div class="contact-box justify-content-between mb-5 d-none d-md-flex">
<div>
<h4>work inquiry</h4>
<p class="text-muted">let's make something together!</p>
</div>
<div>
<a href="/contact.html" class="btn mt-2" title="contact">contact me</a>
</div>
</div>
<div class="d-flex justify-content-center mb-3">
<a href="mailto:thebutterfairybakes@gmail.com" class="email-link" target="_blank">thebutterfairybakes@gmail.com</a>
</div>
<div class="social-links d-flex justify-content-center">
<a href="https://www.instagram.com/the.butterfairy" target="_blank" title="instagram profile">
<i class="fa-brands fa-instagram"></i>
</a>
<a href="https://github.com/rachelynne-harvey" target="_blank" title="github profile">
<i class="fa-brands fa-github-alt"></i>
</a>
</div>
<p class="text-center mt-4">this project was coded by the butter fairy and it is
<a href="https://github.com/rachelynne-harvey/recipe-page" target="_blank">open-sourced</a> ✨
</p>
</footer>
</div>
</body>
</html>