-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbreakfast.html
140 lines (127 loc) · 3.47 KB
/
breakfast.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
<!DOCTYPE HTML>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Amatic SC" rel="stylesheet">
<title>Breakfast Recipie</title>
<style>
body, html {
height: 100%;
margin: 0;
}
img {
height: 100%;
float: left;
}
* {
box-sizing: border-box;
font-family: 'Amatic SC';
font-size: 1vw;
color: #06070E;
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
th, td {
text-align: center;
font-size: 1vw;
padding: 8px;
}
td span {
font-weight: bold;
color: #DC493A;
}
#background {
background-image: url(./src/background.jpg);
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
#board {
background: #F4F3EE;
border-radius: 0.2vw;
width: 60vw;
height: 35vw;
boxShadow: 1px 1px 12px;
}
#information {
display: block;
overflow-x: auto;
text-align: center;
justify-content: center;
align-items: center;
}
#title {
font-size: 2vw;
}
#recipie {
display: flex;
}
#recipie div {
flex: 10%;
text-align: center;
padding: 2vw;
}
#recipie li {
font-size: 1vw;
font-weight: normal;
}
.text {
font-size: 1vw;
}
</style>
</head>
<body>
<div id="background">
<div id="board">
<img src="./src/breakfast.jpg" alt="shakshuka">
<div id="information">
<h1 id="title">Shakshuka</h1>
<p>Shakshuka is by far the easiest way to impress your guests at brunch. It's mildly spicy, full of flavor, and has perfectly runny eggs.</p>
<table>
<tr>
<th>YIELDS</th>
<th>PREP TIME</th>
<th>TOTAL TIME</th>
</tr>
<tr>
<td><span>8 SERVINGS</span></td>
<td><span>10 MINS</span></td>
<td><span>1 HOUR</span></td>
</tr>
</table>
<div id="recipie">
<div>
<h2>Ingredients<h2>
<ul>
<li>2 tbsp. extra-virgin olive oil</li>
<li>1 tbsp. large onion, sliced</li>
<li>2 red bell peppers, sliced </li>
<li>3 cloves garlic, minced</li>
<li>8 large eggs</li>
<li>1/2 c. crumbled feta</li>
<li>1 tsp. paprika</li>
<li>2 (28-oz.) cans crushed tomatoes</li>
<li>Kosher salt, black papper</li>
</ul>
</div>
<div>
<h2>Directions<h2>
<ol>
<li>In a large skillet over medium heat, heat oil. Add onions. Add bell peppers and cook until soft, 5 minutes then add garlic. Pour in tomatoes,and spices.</li>
<li>Make 8 wells in sauce then crack an egg into each well. Cover with aluminum foil and bake 12 to 15 minutes.</li>
<li>Top with feta and garnish with parsley. Serve warm with bread.</li>
</ol>
</div>
</div>
</div>
</div>
</div>
</body>
<html>