Skip to content

Commit ac9c956

Browse files
fontcubertafontcuberta
committed
First commit
0 parents commit ac9c956

File tree

11 files changed

+143
-0
lines changed

11 files changed

+143
-0
lines changed

‎README.md‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
![Ironhack logo](https://i.imgur.com/1QgrNNw.png)
2+
3+
# HTML & CSS | Recipes Clone
4+
5+
## Introduction
6+
7+
> ***Note:*** _This can be a pair programming activity or done independently._
8+
9+
10+
We've only learned the very basics today with HTML and CSS, so what the hell can we really build, right? Wrong, we can build some cool stuff already, and we're going to do just that.
11+
12+
We all have to eat (I think) so let's make some handy recipe pages for when we do. We're going to be recreating a French Onion Soup recipe, as well as an Apple Pie recipe.
13+
14+
Cloning something that already exists is the best way to get better at front end development, so check out the deliverable below to see what we're expecting.
15+
16+
There's a bit of starter code, so you can jump right into it.
17+
18+
## Requirements
19+
20+
- [Fork this repo](https://guides.github.com/activities/forking/)
21+
- Clone this repo into your `~/code/labs`
22+
- Make sure you use `class` and `id` selectors throughout your exercise. Remember, only use type selectors if you want to modify *every* element of that type
23+
- Use a single external CSS stylesheet to style all pages
24+
- Use the images provided to construct the appropriate elements on the page:
25+
- The background with a picture of the apple pie / french onion soup
26+
- The recipe servings / nutrients section
27+
- The prep section
28+
29+
## Submission
30+
31+
Upon completion, run the following commands
32+
```
33+
$ git add .
34+
$ git commit -m "done"
35+
$ git push origin master
36+
```
37+
Navigate to your repo and create a Pull Request -from your master branch to the original repository master branch.
38+
39+
In the Pull request name, add your name and last names separated by a dash "-"
40+
41+
## Starter code
42+
43+
The starter-code contains all the files, images, and text content needed to create the page. The text is in the `index.html`, and a css file is created in `main.css`.
44+
45+
## Deliverable
46+
47+
Please find a screenshot of the expected results below:
48+
49+
![Apple Pie](https://i.imgur.com/lGGM68Q.jpg)
50+
![French Onion](https://i.imgur.com/uepu2DO.jpg)
51+
52+
## Extra Resources
53+
54+
- [CSS Reference from MDN](https://developer.mozilla.org/en-US/docs/Web/CSS)
55+

‎starter-code/apple-pie-starter-code/css/main.css‎

Whitespace-only changes.

‎starter-code/apple-pie-starter-code/images/apple-pie.jpg‎

1.47 MB
Loading

‎starter-code/apple-pie-starter-code/images/cooking-info.png‎

14.9 KB
Loading

‎starter-code/apple-pie-starter-code/images/recipe-info.png‎

13.3 KB
Loading

‎starter-code/apple-pie-starter-code/index.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Apple Pie Recipe</title>
5+
</head>
6+
<body>
7+
Apple Pie
8+
9+
This was my grandmother's apple pie recipe. I have never seen another one
10+
quite like it. It will always be my favorite and has won me several first place
11+
prizes in local competitions. I hope it becomes one of your favorites as well!
12+
13+
Ingredients
14+
1 recipe pastry for a 9 inch double crust pie
15+
1/2 cup unsalted butter
16+
3 tablespoons all-purpose flour
17+
1/4 cup water
18+
3 tablespoons all-purpose flour
19+
1/4 cup water
20+
1/2 cup white sugar
21+
1/2 cup packed brown sugar
22+
8 Granny Smith apples - peeled, cored and sliced
23+
24+
Directions
25+
Preheat oven to 425 degrees F (220 degrees C). Melt the butter in a saucepan. Stir in
26+
flour to form a paste. Add water, white sugar and brown sugar, and bring to a boil. Reduce
27+
temperature and let simmer.
28+
29+
Place the bottom crust in your pan. Fill with apples, mounded slightly. Cover with a
30+
lattice work crust. Gently pour the sugar and butter liquid over the crust. Pour slowly so
31+
that it does not run off.
32+
33+
Bake 15 minutes in the preheated oven. Reduce the temperature to 350 degrees F (175
34+
degrees C). Continue baking for 35 to 45 minutes, until apples are soft.
35+
</body>
36+
</html>

‎starter-code/french-onion-soup-starter-code/css/main.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/*Some necessary adjustments*/
2+
h1, body, html, main {
3+
margin: 0;
4+
}
5+
/*Import the font and set the default size*/
6+
html {
7+
font-family: 'Open Sans', sans-serif;
8+
font-size: 18px
9+
}

‎starter-code/french-onion-soup-starter-code/images/cooking-info.png‎

14.7 KB
Loading

‎starter-code/french-onion-soup-starter-code/images/recipe-info.png‎

13.2 KB
Loading

‎starter-code/french-onion-soup-starter-code/images/soup.jpg‎

1.81 MB
Loading

0 commit comments

Comments
 (0)