Demos Back to Demos

Who In The World Uses IE8

24 of 25
A card style container for grids explaining IE 8 usage by region.
Result HTML CSS
Edit Download

Result

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Who In The World Uses IE8? via Smashing Magazine | ZingGrid</title>
    <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
    <link href="https://fonts.googleapis.com/css?family=Lora:400,400i,700" rel="stylesheet">
  </head>
  <body>
    <h1 class="main">Who In The World Uses IE8?</h1>
    <p class="source">Source: <strong>"<a href="https://www.smashingmagazine.com/2019/03/web-on-internet-explorer-ie8/" target="_blank" crossorigin>I Used The Web For A Day On Internet Explorer 8</a>"</strong> by <a href="https://www.smashingmagazine.com/author/chrisbashton" target="_blank" crossorigin>Chris Ashton</a> for <a href="https://www.smashingmagazine.com/" target="_blank" crossorigin>Smashing Magazine</a></p>
    <div class="wrapper">
      <div class="container">
        <zing-grid
          compact
          sort
          layout="row"
          viewport-stop
          layout-controls="disabled"
          pager
          page-size="6"
          page-size-options="3,6,9">
          <zg-caption>
            <h1>Internet Explorer 8 Usage by Region</h1>
            <hr>
            <p>Per-continent IE8 desktop proportion<br> <em>February 2018 — January 2019</em></p>
          </zg-caption>
          <zg-data data='[
            { "Rank": "1", "continent": "Oceania", "Percentage": "0.09%"},
            { "Rank": "2", "continent": "Europe", "Percentage": "0.25%"},
            { "Rank": "3", "continent": "South America", "Percentage": "0.30%"},
            { "Rank": "4", "continent": "North America", "Percentage": "0.35%"},
            { "Rank": "5", "continent": "Africa", "Percentage": "0.48%"},
            { "Rank": "6", "continent": "Asia", "Percentage": "0.50%"}
          ]'></zg-data>
        </zing-grid>
      </div>
      <div class="container">
        <zing-grid
          compact
          sort
          layout="row"
          viewport-stop
          layout-controls="disabled"
          pager
          page-size="6"
          page-size-options="3,6,9">
          <zg-caption>
            <h1>Internet Explorer 8 Usage by Asian Region</h1>
            <hr>
            <p>Per-country IE8 desktop proportion<br> <em>February 2018 — January 2019</em></p>
          </zg-caption>
          <zg-data data='[
            { "Rank": "1", "country": "Iran", "Percentage": "3.99%"},
            { "Rank": "2", "country": "China", "Percentage": "1.99%"},
            { "Rank": "3", "country": "North Korea", "Percentage": "1.38%"},
            { "Rank": "4", "country": "Turkmenistan", "Percentage": "1.31%"},
            { "Rank": "5", "country": "Afghanistan", "Percentage": "1.27%"},
            { "Rank": "6", "country": "Cambodia", "Percentage": "1.05%"},
            { "Rank": "7", "country": "Yemen", "Percentage": "0.63%"},
            { "Rank": "8", "country": "Taiwan", "Percentage": "0.62%"},
            { "Rank": "9", "country": "Pakistan", "Percentage": "0.57%"}
          ]'></zg-data>
        </zing-grid>
      </div>
      <div class="container">
        <zing-grid
          compact
          sort
          layout="row"
          viewport-stop
          layout-controls="disabled"
          pager
          page-size="6"
          page-size-options="3,6,9">
          <zg-caption>
            <h1>Internet Explorer 8 Usage by African Region</h1>
            <hr>
            <p>Per-country IE8 desktop proportion<br> <em>February 2018 — January 2019</em></p>
          </zg-caption>
          <zg-data data='[
            { "Rank": "1", "country": "Eritrea", "Percentage": "3.24%"},
            { "Rank": "2", "country": "Botswana", "Percentage": "1.37%"},
            { "Rank": "3", "country": "Sudan & South Sudan", "Percentage": "1.33%"},
            { "Rank": "4", "country": "Niger", "Percentage": "1.29%"},
            { "Rank": "5", "country": "Mozambique", "Percentage": "1.19%"},
            { "Rank": "6", "country": "Mauritania", "Percentage": "1.18%"},
            { "Rank": "7", "country": "Guinea", "Percentage": "1.12%"},
            { "Rank": "8", "country": "Democratic Republic of the Congo", "Percentage": "1.07%"},
            { "Rank": "9", "country": "Zambia", "Percentage": "0.94%"}
          ]'></zg-data>
        </zing-grid>
      </div>
    </div>
  </body>
</html>

CSS

body{
  background:#f7f7f7;
  font-family: 'Lora', serif;
  padding-left: 20px;
  padding-right: 20px;
}

h1.main {
  font-size: 23px;
  font-weight: normal;
  color: #68798e;
  line-height: 1.5;
  text-align: center;
  padding: 50px 50px 0 50px;
  max-width: 450px;
  margin: 0 auto 20px auto;
}

p.source {
  color: #68798e;
  line-height: 1.5;
  text-align: center;
  font-style: italic;
  font-size: 13px;
  letter-spacing: .05em;
  max-width: 400px;
  margin: 0 auto 30px auto;
}

p.source a {
 	color: #00aeef;
  text-decoration: none;
}

.wrapper {
  display: flex;
	justify-content: center;
}

zing-grid {
  max-width: 450px;
  font-family: 'Lora', serif;
  color: #52565b;
  border: none;
  background: none;
	--theme-color-primary: #52565b;
}

zg-caption {
  padding: 10px 20px;
  background: none;
  border: 1px solid #eeeeee;
  background: #ffffff;
}

zg-caption h1 {
  font-size: 15px;
  font-weight: bold;
  color: #68798e;
  margin-bottom: 5px;
}

zg-caption p {
  font-size: 12px;
  color: #68798e;
  margin-top: 0;
  line-height: 1.6;
}

zg-caption hr {
 border-top: none;
  border-bottom: 1px solid #eeeeee;
}

zg-body,
zg-head {
  border: 1px solid #eeeeee;
  border-top: none;
}

zg-body {
  background: #ffffff;
}

zg-caption {
  border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  -webkit-border-radius: 10px 10px 0 0;
}

zg-head-cell {
  font-size: 12px;
  font-weight: bold;
  color: #68798e;
}

zg-column:first-child {
	max-width: 60px;
}

zg-column:nth-child(2) {
  background: #f7f7f7;
}

zg-pager {
  font-size: 10px;
  border: 1px solid #eeeeee;
  border-top: none;
  border-radius: 0 0 10px 10px;
  -moz-border-radius: 0 0 10px 10px;
  -webkit-border-radius: 0 0 10px 10px;
  background: #ffffff;
}

.container {
  margin: 20px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  box-shadow: 0 8px 25px 0 rgba(0,0,0,0.05),
      0 4px 8px 0 rgba(0,0,0,0.09);
	-webkit-box-shadow: 0 8px 25px 0 rgba(0,0,0,0.05),
      0 4px 8px 0 rgba(0,0,0,0.09);
	-moz-box-shadow: 0 8px 25px 0 rgba(0,0,0,0.05),
      0 4px 8px 0 rgba(0,0,0,0.09);
  max-width: 450px;
}

@media (max-width: 1100px) {
 .wrapper {
    display: block;
    justify-content: center;
  }    
  .container {
    margin: 0 auto 30px auto;
  }
}

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

Edit in Studio