Demos Back to Docs

Most & Least Favorite Pizza Toppings in America (codepenchallenge cpc-circle)

2 of 124
February 2019 Challenge, Week 1: What's *your* favorite pizza topping? Celebrate National Pizza Day with our simple circular pizza illustrations highlighting the US's pizza topping preferences. Made with ZingGrid, this pen features card mode and image embeds.
Result Full HTML CSS JS
Edit Download

Most & Least Favorite Pizza Toppings in America

 [[index.percentage]]% voted for it

Based on YouGov data from January 23 - 24, 2019. Read the full article.

Full Code

<!DOCTYPE html>
<html class="zg-html">

<head>
  <meta charset="utf-8">
  <title>ZingGrid: Blank Grid</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    body {
      background: #642612;
      padding-top: 20px;
      font-family: 'Ubuntu', sans-serif;
    }

    zing-grid {
      max-width: 700px;
      margin: 0 auto;
      background: none;
      font-size: 14px;
      font-family: 'Ubuntu', sans-serif;
      border: none;
      --theme-color-primary: #F8AC0E;
      text-align: center;
    }

    zg-body,
    zg-caption {
      background: none;
      color: #ffffff;
    }

    zg-caption h1 {
      font-size: 30px;
      font-weight: 300;
      line-height: 1.3;
      color: #F8AC0E;
      margin-bottom: 30px;
      text-align: center;
    }

    zg-body {
      border-radius: 20px 20px 0 0;
      -webkit-border-radius: 20px 20px 0 0;
      -moz-border-radius: 20px 20px 0 0;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.20);
      -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.20);
      -moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.20);
      background: #FBCF7B;
      padding: 15px;
    }

    zg-row[layout="card"] {
      border-radius: 20px;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      background: #F8AC0E;
      border: none;
      -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.20);
      -moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.20);
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.20);
      margin: 5px;
      width: 100%;
    }

    zg-row[layout="card"]:hover {
      background: #E99D00;
      -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.40);
      -moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.40);
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.40);
    }

    zg-cell:before {
      font-weight: bold;
      color: #601327;
    }

    zg-cell:first-child {
      margin-top: -12px;
      padding-bottom: 5px;
      font-size: 11px;
      font-weight: bold;
      color: #8A5D00;
      background: #DE9600;
    }

    zg-cell:nth-child(2) {
      margin-top: -10px;
      font-size: 18px;
      font-weight: bold;
      color: #601327;
    }

    zg-cell:nth-child(3) {
      margin-top: -21px;
      font-size: 11px;
      font-style: italic;
      color: #601327;
      letter-spacing: .01em;
    }

    zg-cell img {
      margin: -15px auto 0 auto;
    }

    zg-footer {
      background: none;
      border-radius: 0 0 20px 20px;
      -webkit-border-radius: 0 0 20px 20px;
      -moz-border-radius: 0 0 20px 20px;
    }

    zg-footer p {
      font-size: 13px;
      color: #642612;
      text-align: center;
      line-height: 1.5;
      padding-bottom: 20px;
    }

    zg-footer a {
      color: #642612;
      font-weight: bold;
    }

    zg-footer a:hover {
      color: #F8AC0E;
    }

    .pre-handle-wrapper {
      max-width: 700px;
      height: 50px;
      margin-top: -13px;
      padding: 10px;
      background: #FBCF7B;
      border-radius: 0 0 20px 20px;
      -webkit-border-radius: 0 0 20px 20px;
      -moz-border-radius: 0 0 20px 20px;
    }

    .handle-wrapper {
      width: 100%;
      background: #642612;
    }

    .handle {
      background: #FBCF7B;
      width: 110px;
      height: 200px;
      margin: 0 auto;
      border-radius: 0 0 20px 20px;
      -webkit-border-radius: 0 0 20px 20px;
      -moz-border-radius: 0 0 20px 20px;
    }

    zg-watermark {
      background: none;
      border-top: 0;
      color: #F8AC0E;
    }

    zing-grid img {
      width: 100%;
    }

    zing-grid[loading] {
      height: 957px;
    }
  </style>
</head>

<body class="zg-body">

  <zing-grid layout="card" layout-controls="disabled" viewport-types='{"mobile": 500, "tablet-portrait": 700}' data='[
    {
      "toppingName": "Pepperoni",
      "toppingImg": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/pizza-toppings%2Fpepperoni.svg?alt=media&token=037b2a66-47cd-42b1-9753-fd9e4a63ff26",
      "likability": "#1 Favorite",
      "percentage": "53"
    },
    {
      "toppingName": "Sausage",
      "toppingImg": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/pizza-toppings%2Fsausage.svg?alt=media&token=d60e2151-4c9b-494e-aaee-868598b04952",
      "likability": "#2 Favorite",
      "percentage": "34"
    },
    {
      "toppingName": "Mushroom",
      "toppingImg": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/pizza-toppings%2Fmushroom.svg?alt=media&token=2ab9423b-214f-48c0-bfbb-5af564f437ba",
      "likability": "#3 Favorite",
      "percentage": "31"
    },
    {
      "toppingName": "Bacon",
      "toppingImg": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/pizza-toppings%2Fbacon.svg?alt=media&token=9653384c-8128-406d-97e5-0de70fae6492",
      "likability": "#4 Favorite",
      "percentage": "20"
    },
    {
      "toppingName": "Anchovies",
      "toppingImg": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/pizza-toppings%2Fanchovies.svg?alt=media&token=7da78c95-5a26-427b-81d0-675691d177fe",
      "likability": "#1 Least Favorite",
      "percentage": "49"
    },
    {
      "toppingName": "Eggplant",
      "toppingImg": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/pizza-toppings%2Feggplant.svg?alt=media&token=465ed5e0-f3bb-49d0-8ddf-51dfb2041ef4",
      "likability": "#2 Least Favorite",
      "percentage": "30"
    },
    {
      "toppingName": "Pineapple",
      "toppingImg": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/pizza-toppings%2Fpineapple.svg?alt=media&token=5755deb7-92f5-4ef6-bd4c-90a999a5b0f9",
      "likability": "#3 Least Favorite",
      "percentage": "24"
    },
    {
      "toppingName": "Artichokes",
      "toppingImg": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/pizza-toppings%2Fartichokes.svg?alt=media&token=2594ca18-8df8-4a7b-b7a5-09fa56b528ea",
      "likability": "#4 Least Favorite",
      "percentage": "24"
    }
  ]'>
    <zg-caption>
      <h1>Most & Least Favorite Pizza Toppings in America</h1>
    </zg-caption>
    <zg-colgroup>
      <zg-column index="likability" header=" "></zg-column>
      <zg-column index="toppingName" header=" "></zg-column>
      <zg-column index="percentage" type="number" header=" ">[[index.percentage]]% voted for it</zg-column>
      <zg-column index="toppingImg" type="image" header=" "></zg-column>
    </zg-colgroup>
    <zg-footer>
      <div class="pre-handle-wrapper">
        <p>Based on <a href="https://today.yougov.com/" target="_blank" crossorigin>YouGov</a> data from January 23 - 24, 2019. <a href="https://today.yougov.com/topics/food/articles-reports/2019/02/04/pineapple-pizza-toppings-pepperoni-popular?nh=find-solutions,omnibus" target="_blank" crossorigin>Read the full article.</a></p>
      </div>
      <div class="handle-wrapper">
        <div class="handle"></div>
      </div>
    </zg-footer>
  </zing-grid>

  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
  </script>
</body>

</html>
<!DOCTYPE html>
<html class="zg-html">
  <head>
    <meta charset="utf-8">
    <title>ZingGrid: Blank Grid</title>
    <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  </head>
  <body class="zg-body">
    
<zing-grid
  layout="card"
  layout-controls="disabled"
  viewport-types='{"mobile": 500, "tablet-portrait": 700}'
  data='[
    {
      "toppingName": "Pepperoni",
      "toppingImg": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/pizza-toppings%2Fpepperoni.svg?alt=media&token=037b2a66-47cd-42b1-9753-fd9e4a63ff26",
      "likability": "#1 Favorite",
      "percentage": "53"
    },
    {
      "toppingName": "Sausage",
      "toppingImg": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/pizza-toppings%2Fsausage.svg?alt=media&token=d60e2151-4c9b-494e-aaee-868598b04952",
      "likability": "#2 Favorite",
      "percentage": "34"
    },
    {
      "toppingName": "Mushroom",
      "toppingImg": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/pizza-toppings%2Fmushroom.svg?alt=media&token=2ab9423b-214f-48c0-bfbb-5af564f437ba",
      "likability": "#3 Favorite",
      "percentage": "31"
    },
    {
      "toppingName": "Bacon",
      "toppingImg": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/pizza-toppings%2Fbacon.svg?alt=media&token=9653384c-8128-406d-97e5-0de70fae6492",
      "likability": "#4 Favorite",
      "percentage": "20"
    },
    {
      "toppingName": "Anchovies",
      "toppingImg": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/pizza-toppings%2Fanchovies.svg?alt=media&token=7da78c95-5a26-427b-81d0-675691d177fe",
      "likability": "#1 Least Favorite",
      "percentage": "49"
    },
    {
      "toppingName": "Eggplant",
      "toppingImg": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/pizza-toppings%2Feggplant.svg?alt=media&token=465ed5e0-f3bb-49d0-8ddf-51dfb2041ef4",
      "likability": "#2 Least Favorite",
      "percentage": "30"
    },
    {
      "toppingName": "Pineapple",
      "toppingImg": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/pizza-toppings%2Fpineapple.svg?alt=media&token=5755deb7-92f5-4ef6-bd4c-90a999a5b0f9",
      "likability": "#3 Least Favorite",
      "percentage": "24"
    },
    {
      "toppingName": "Artichokes",
      "toppingImg": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/pizza-toppings%2Fartichokes.svg?alt=media&token=2594ca18-8df8-4a7b-b7a5-09fa56b528ea",
      "likability": "#4 Least Favorite",
      "percentage": "24"
    }
  ]'>
  <zg-caption>
    <h1>Most & Least Favorite Pizza Toppings in America</h1>
  </zg-caption>
  <zg-colgroup>
    <zg-column index="likability" header=" "></zg-column>
    <zg-column index="toppingName" header=" "></zg-column>
    <zg-column index="percentage" type="number" header=" ">[[index.percentage]]% voted for it</zg-column>
    <zg-column index="toppingImg" type="image" header=" "></zg-column>
  </zg-colgroup>
  <zg-footer>
    <div class="pre-handle-wrapper">
      <p>Based on <a href="https://today.yougov.com/" target="_blank" crossorigin>YouGov</a> data from January 23 - 24, 2019. <a href="https://today.yougov.com/topics/food/articles-reports/2019/02/04/pineapple-pizza-toppings-pepperoni-popular?nh=find-solutions,omnibus" target="_blank" crossorigin>Read the full article.</a></p>
    </div>
    <div class="handle-wrapper">
      <div class="handle"></div>
    </div>
  </zg-footer>
</zing-grid>
    
  </body>
</html>
body{
  background: #642612;
  padding-top: 20px;
  font-family: 'Ubuntu', sans-serif;
}

zing-grid {
  max-width: 700px;
  margin: 0 auto;
  background: none;
  font-size: 14px;
  font-family: 'Ubuntu', sans-serif;
  border: none;
  --theme-color-primary: #F8AC0E;
  text-align: center;
}

zg-body,
zg-caption {
  background: none;
  color: #ffffff;
}

zg-caption h1 {
	font-size: 30px;
  font-weight: 300;
  line-height: 1.3;
  color: #F8AC0E;
  margin-bottom: 30px;
  text-align: center;
}

zg-body {
  border-radius: 20px 20px 0 0;
  -webkit-border-radius: 20px 20px 0 0;
  -moz-border-radius: 20px 20px 0 0;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
  -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
  -moz-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
  background: #FBCF7B;
  padding: 15px;
}

zg-row[layout="card"] {
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  background: #F8AC0E;
  border: none;
	-webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
	-moz-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
  margin: 5px;
  width: 100%;
}

zg-row[layout="card"]:hover {
  background: #E99D00;
	-webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.40);
	-moz-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.40);
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.40);
}

zg-cell:before {
  font-weight: bold;
  color: #601327;
}

zg-cell:first-child {
  margin-top: -12px;
  padding-bottom: 5px;
  font-size: 11px;
  font-weight: bold;
  color: #8A5D00;
  background: #DE9600;
}

zg-cell:nth-child(2) {
  margin-top: -10px;
  font-size: 18px;
  font-weight: bold;
  color: #601327;
}

zg-cell:nth-child(3) {
  margin-top: -21px;
  font-size: 11px;
  font-style: italic;
  color: #601327;
  letter-spacing: .01em;
}

zg-cell img {
  margin: -15px auto 0 auto;
}

zg-footer {
  background: none;
  border-radius: 0 0 20px 20px;
  -webkit-border-radius: 0 0 20px 20px;
  -moz-border-radius: 0 0 20px 20px;}

zg-footer p {
	font-size: 13px;
  color: #642612;
  text-align: center;
  line-height: 1.5;
  padding-bottom: 20px;
}

zg-footer a {
  color: #642612;
  font-weight: bold;
}

zg-footer a:hover {
  color: #F8AC0E;
}

.pre-handle-wrapper {
  max-width: 700px;
  height: 50px;
  margin-top: -13px;
  padding: 10px;
  background: #FBCF7B;
  border-radius: 0 0 20px 20px;
  -webkit-border-radius: 0 0 20px 20px;
  -moz-border-radius: 0 0 20px 20px;
}

.handle-wrapper {
  width: 100%;
  background: #642612;
}

.handle {
  background: #FBCF7B;
  width: 110px;
  height: 200px;
  margin: 0 auto;
  border-radius: 0 0 20px 20px;
  -webkit-border-radius: 0 0 20px 20px;
  -moz-border-radius: 0 0 20px 20px;
}

zg-watermark {
  background: none;
  border-top: 0;
  color: #F8AC0E;
}

zing-grid img {
  width: 100%;
}
// No JS code

Related Docs

Interested in this demo? Modify it to your needs in ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!

Edit in Studio

Related Docs

Demo Gallery