intro-to-html-css/recipe-07.html at gh-pages · ndelage/intro-to-html-css · GitHub

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
<html>

<head>
  <title>Irish Tacos</title>
  <style>
    html {
      background-color: green;
      font-family: "Helvetica";
    }

    body {
      /* the content inside the <body> HTML tag will
         be 50% with width of it's parent's element (<html)
      */
      width: 50%;
      background-color: silver;

      /* to center blocks of content (like a <body> tag)
         we set an automatic amount of left & right margin

         margin is the space between one element and another.
         in this case since the width of the <body> is 50%
         of the <html> tag, we have 50% leftover. The
         browser automatically divides that between the left
         and the right.
      */
      margin-left: auto;
      margin-right: auto;

      /* Padding is the space on the inside edge of an
         element. Here we reserve 3% for dead space. This
         is purely for asthetic reasons
      */
      padding: 3%;
    }

    .author-introduction {
      background-color: #F6F3A1;
      padding: 3%;
      line-height: 120%;
    }

    .author-introduction .byline {
      color: gray;
    }

    .timing {
      text-align: center;
    }

    .time-block {
      width: 33%;
      float: left;
      background-color: #333333;
      padding-top: 5%;
      padding-bottom: 5%;
      margin-bottom: 5%;
    }

    .time-block .description {
      color: white;
    }

    .time-block .time {
      color: orange;
      font-size: 2em;
    }

  </style>
</head>

<body>
  <nav>
    <a href="http:///www.allrecipes.com">All Recipes</a> |
    <a href="http://allrecipes.com/Recipes/Main-Dish/Sandwiches-and-Wraps/Main.aspx">Sandwiches & Wraps</a> |
    <a href="http://allrecipes.com/Recipes/Main-Dish/Sandwiches-and-Wraps/Beef/Main.aspx">Beef</a>
  </nav>

  <h1>Irish Tacos</h2>

  <img src="http://images.media-allrecipes.com/userphotos/250x250/00/96/87/968734.jpg"/>

  <blockquote class="author-introduction">
    "We had these at an Irish Pub, they were to die for. A combination we thought wouldn't taste too good but all the patrons said it was the best thing on the menu, and they were right! Corned beef, coleslaw and sauce inside a flour tortilla."
    <p class="byline">Recipe by PacNWCook</p>
  </blockquote>


  <h2>Ingredients</h2>
  <ul>
    <li>2 cups plain yogurt</li>
    <li>1/2 cup mayonnaise</li>
    <li>1 lime, juiced</li>
    <li>2 tablespoons chopped fresh cilantro</li>
    <li>1 pinch cayenne pepper</li>
    <li>salt to taste</li>
    <li>1 1/2 cups shredded corn beef</li>
    <li>8 (10") flour tortillas</li>
    <li>1 pound coleslaw</li>
  </ul>

  <div class="timing">
    <div class="time-block">
      <span class="time">15 minutes</span><br/>
      <span class="description">Prep<span>
    </div>

    <div class="time-block">
      <span class="time">10 minutes</span><br/>
      <span class="description">Cook<span>
    </div>

    <div class="time-block">
      <span class="time">25 minutes</span><br/>
      <span class="description">Ready In<span>
    </div>
  </div>

  <h2>Directions</h2>
  <ol>
    <li>Mix together the yogurt, mayonnaise, lime juice, cilantro, cayenne pepper, and salt in a bowl until smooth.</li>
    <li>Place the corned beef in a saucepan over medium-low heat just until hot. Place a tortilla into a heavy skillet over medium heat until hot and just beginning to show brown spots, about 30 seconds per side. To assemble, arrange about 2 tablespoons of coleslaw on a tortilla; follow with 3 tablespoons of corned beef. Drizzle with 2 tablespoons of the yogurt sauce; roll up to serve.</li>
  </ol>
</body>

</html>