[Mashups] Week02

This time, I built a single page that includes the information I can copy from a JSON file.
I found an example of JSON formatted recipe information. It is from this site: https://developers.google.com/search/docs/data-types/recipe
and it looks like below:

{
  "@context": "http://schema.org/",
  "@type": "Recipe",
  "name": "Perfect Apple Pie",
  "author": "Gin Blanco",
   "image": [
    "https://example.com/photos/1x1/photo.jpg",
    "https://example.com/photos/4x3/photo.jpg",
    "https://example.com/photos/16x9/photo.jpg"
   ],
  "description": "A classic apple pie takes a shortcut with easy Pillsbury® unroll-fill refrigerated pie crust.",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.5",
    "reviewCount": "276",
    "bestRating": "5",
    "worstRating": "1"
  },
  "prepTime": "PT30M",
  "totalTime": "PT3H",
  "recipeYield": "8",
  "nutrition": {
    "@type": "NutritionInformation",
    "servingSize": "1 medium slice",
    "calories": "230 calories",
    "fatContent": "1 g",
    "carbohydrateContent": "43 g",
    "cholesterolContent": "0 mg",
    "fiberContent": "1 g",
    "proteinContent": "1 g",
    "saturatedFatContent": "2 ½ g",
    "sodiumContent": "200 mg",
    "sugarContent": "27 g",
    "transFatContent": "0 g"
  },
  "recipeIngredient": [
    "1 box Pillsbury™ refrigerated pie crusts, softened as directed on box",
    "6 cups thinly sliced, peeled apples (6 medium)",
    "3/4 cup sugar",
    "2 tablespoons all-purpose flour",
    "3/4 teaspoon ground cinnamon",
    "1/4 teaspoon salt",
    "1/8 teaspoon ground nutmeg",
    "1 tablespoon lemon juice"
  ],
  "recipeInstructions": [
    "1 Heat oven to 425°F. Place 1 pie crust in ungreased 9-inch glass pie plate. Press firmly against side and bottom.",
    "2 In large bowl, gently mix filling ingredients; spoon into crust-lined pie plate. Top with second crust. Wrap excess top crust under bottom crust edge, pressing edges together to seal; flute. Cut slits or shapes in several places in top crust.",
    "3 Bake 40 to 45 minutes or until apples are tender and crust is golden brown. Cover edge of crust with 2- to 3-inch wide strips of foil after first 15 to 20 minutes of baking to prevent excessive browning. Cool on cooling rack at least 2 hours before serving."
   ]
}

I first decided which information I would show on my page and then designed its form in Sketch.

Then translated it into HTML code.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Homemade Recipes</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
      <h1>Homemade Recipes</h1>
      <h4>Live well for less</h4>
    </header>

    <div class="main">
      <section class="subject">
        <img class="subject_img" src = "https://images-gmi-pmc.edge-generalmills.com/83c96245-22eb-4ef1-9446-ef21a746b0a7.jpg">
        <div class="subject_text">
          <div class="rating">
            <img class="one_point" src="svg/fullstar.svg">
            <img class="one_point" src="svg/fullstar.svg">
            <img class="one_point" src="svg/fullstar.svg">
            <img class="one_point" src="svg/fullstar.svg">
            <img class="half_point" src="svg/halfstar.svg">
          </div>
          <p class="name">Perfect Apple pie</p>
          <p class="description">A classic apple pie takes a shortcut with easy Pillsbury® unroll-fill refrigerated pie crust</p>
        </div>
      </section>
      <div class="blocks">
        <div class="ingredients">
          <div class="colour_box"></div>
          <div class="content">
            <h3>Ingredients</h3>
            <ul>
              <li>1 box Pillsbury™ refrigerated pie crusts, softened as directed on box</li>
              <li>6 cups thinly sliced, peeled apples (6 medium)</li>
              <li>3/4 cup sugar</li>
              <li>3/4 teaspoon ground cinnamon</li>
              <li>1/4 teaspoon salt</li>
              <li>1/8 teaspoon ground nutmeg</li>
              <li>1 tablespoon lemon juice</li>
            </ul>
          </div>
        </div>
        <div class="nutrition">
          <div class="colour_box"></div>
          <div class="content">
            <h3>Nutrition</h3>
            <table class="additional_info">
              <tr><th>Serving Size</th><td>1 medium size</td></tr>
            </table>
            <hr>
            <table class="list">
              <tr><th>Calories</th> <td>230cal</td></tr>
              <tr><th>Fat</th><td>1g</td></tr>
              <tr><th>Carbohydrate</th><td>43g</td></tr>
              <tr><th>Cholesterol</th><td>0mg</td></tr>
              <tr><th>Fiber</th><td>1g</td></tr>
              <tr><th>Protein</th><td>1g</td></tr>
              <tr><th>Saturated Fat</th><td>2 ½ g</td></tr>
              <tr><th>Sodium</th><td>200mg</td></tr>
              <tr><th>Sugar</th><td>27g</td></tr>
              <tr><th>Trans Fat</th><td>0g</td></tr>
            </table>
          </div>
        </div>
        <div class="instruction">
          <div class="colour_box"></div>
          <div class="content">
            <h3>How to Cook</h3>
            <table class="additional_info">
              <tr><th>Prep Time</th><td>30 min</td></tr>
              <tr><th>Total Time</th><td>3 h</td></tr>
            </table>
            <hr>
            <ol>
              <li><span>Heat oven to 425°F. Place 1 pie crust in ungreased 
<br>9-inch glass pie plate. Press firmly against side and bottom.</span></li>
              <li>In large bowl, gently mix filling ingredients; spoon into crust-lined pie plate. Top with second crust. Wrap excess top crust under bottom crust edge, pressing edges together to seal; flute. Cut slits or shapes in several places in top crust.</li>
              <li>Bake 40 to 45 minutes or until apples are tender and crust is golden brown. Cover edge of crust with 2- to 3-inch wide strips of foil after first 15 to 20 minutes of baking to prevent excessive browning. Cool on cooling rack at least 2 hours before serving.</li>
            </ol>
          </div>
        </div>
      </div>
    </div>
  </body>
  <footer>
    <p>© Yeonhee Lee<br><i>2018 Mashups, ITP, NYU</i></p>
  </footer>
</html>

  




Following is how the HTML page looked like without any CSS file:

The CSS code I added later is like below:

* {
  margin: 0;
  padding: 0;
  font-family: Times;
}

html {
  background-color: #F2F2F2;
}

header {
  margin-top: 128px;
  margin-bottom: 128px;
}

h1 {
  font-weight: 900;
  font-size: 72px;
  color: #2E2E2E;
  letter-spacing: -1.6px;
  text-align: center;
}

h4 {
  margin-top: 22px;
  font-style: italic;
  font-weight: 100;
  font-size: 30px;
  color: #A89F95;
  letter-spacing: 0;
  line-height: 32px;
  text-align: center;
}

.main {
  position: relative;
  width: 1140px;
  margin: auto;
}

.subject {
  position: relative;
  width: 1140px;
  height: 571px;
  overflow: hidden;
}

.subject_img {
  width: 1458px;
  height: 820px;
  margin: -124px 0 125px -318px;
}

.subject_text {
  position: absolute;
  width: 263px;
  height: 571px;
  top: 0;
  right: 0;
  padding: 0 15px 0 25px;
  background-image: linear-gradient(0deg, rgba(245,216,181,0.60) 0%, rgba(230,126,34,0.60) 100%);

}

.rating {
  margin-top: 166px;
}

.one_point {
  width: 17px;
  height: 16px;
}

.half_point {
  width: 8px;
  height: 15px;
}

.name {
  font-weight: 900;
  font-size: 55px;
  color: #2E2E2E;
/*	color: white; */
  letter-spacing: -1.0px;
  line-height: 55px;

  margin-top: 23px;
  margin-bottom: 16px;
}


.description {
  font-style: italic;
  font-size: 20px;
  color: #4B2600;
  /* color: ECECEC; */
  letter-spacing: 0;
  line-height: 26px;
}

.blocks {
  position: relative;
  margin-top: 40px;
  width: 1140px;
}

.ingredients {
  position: relative; 
  /*display: block;*/
  top: 0;
  left: 0;
  width: 567px;
  background-color: white
}

.colour_box {
  width: 567px;
  height: 7px;
  background: #E9C082;
}

.content {
  position: relative; 
  /*display: block;*/
  width: 467px;
  padding: 50px;
  /*background-color: white;*/
}

h3 {
  font-weight: 900;
  font-size: 36px;
  color: #2E2E2E;
  letter-spacing: -0.8px;
  margin-bottom: 50px;
}

.content ul, ol {
  margin-left: 20px;
  font-weight: 200;
  font-size: 20px;
  color: #572901;
  letter-spacing: 0;
  line-height: 32px;
}

ul li {
  padding-left: 10px;
}


.nutrition {
  position: relative; 
  /*display: block;*/
  margin-top: 6px;
  width: 567px;
  background-color: white
}

.instruction {
  position: absolute;
  width: 567px;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: white
}

.additional_info {
  width: 467px;
}

th {
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0;
  line-height: 32px;
  text-align: left;
}

td {
  font-weight: 100;
  font-size: 20px;
  letter-spacing: 0;
  line-height: 32px;
  text-align: right;
}

.additional_info th {
  color: #C5BDB0;
}

.additional_info td {
  color: #C5BDB0;
}

hr {
  margin: 11px 0 11px 0;
  border: 1px solid #E5DDD0;
}


.list {
  width: 467px;
}

.list th {
  color: #572901;
}

.list td {
  color: #572901;
}

ol li {
  padding-left: 20px;
  margin-bottom: 30px;
}

footer {
/*	height: 135px;
*/	padding: 124px 0 124px 0;
}

footer p {
  font-weight: 100;
  font-size: 14px;
  color: #CECCCC;
  letter-spacing: 0;
  line-height: 18px;
  text-align: center;

/*	position: relative;
  top: 50px;*/
}

Finally, I got a single web page. It looks exactly what I wanted!

The full source code is available here, and this link is for the actual web page.

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *