<header><h1>SNEAKERS</h1></header>
<ul id="productGrid">
<li>
<div class="holder">
<div class="star">
<h2>LeBron 16</h2>
<p>$185</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike02a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Odyssey React Shield</h2>
<p>$130</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike01a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Epic React Flyknit</h2>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike03a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Air Max 97 Premium</h2>
<p>$180</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike04a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Free RN Motion Flyknit</h2>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike05a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Free RN Flyknit 2018</h2>
<p>$120</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike06a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Rise React Flyknit</h2>
<p>$175</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike07a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Flyknit Racer G</h2>
<p>$175</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike08a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike EXP-X14 Premium iD</h2>
<p>$160</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike09a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Free x Retcon</h2>
<p>$120</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike10a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Air Force 1 '07 Suede</h2>
<p>$90</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike11a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Metcon 4 iD</h2>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike12a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>LeBron 16</h2>
<p>$185</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike02a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Odyssey React Shield</h2>
<p>$130</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike01a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Epic React Flyknit</h2>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike03a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Air Max 97 Premium</h2>
<p>$180</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike04a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Free RN Motion Flyknit</h2>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike05a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Free RN Flyknit 2018</h2>
<p>$120</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike06a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Rise React Flyknit</h2>
<p>$175</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike07a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Flyknit Racer G</h2>
<p>$175</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike08a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike EXP-X14 Premium iD</h2>
<p>$160</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike09a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Free x Retcon</h2>
<p>$120</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike10a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Air Force 1 '07 Suede</h2>
<p>$90</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike11a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Metcon 4 iD</h2>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike12a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>LeBron 16</h2>
<p>$185</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike02a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Odyssey React Shield</h2>
<p>$130</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike01a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Epic React Flyknit</h2>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike03a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Air Max 97 Premium</h2>
<p>$180</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike04a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Free RN Motion Flyknit</h2>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike05a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Free RN Flyknit 2018</h2>
<p>$120</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike06a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Rise React Flyknit</h2>
<p>$175</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike07a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Flyknit Racer G</h2>
<p>$175</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike08a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike EXP-X14 Premium iD</h2>
<p>$160</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike09a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Free x Retcon</h2>
<p>$120</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike10a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Air Force 1 '07 Suede</h2>
<p>$90</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike11a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Metcon 4 iD</h2>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike12a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>LeBron 16</h2>
<p>$185</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike02a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Odyssey React Shield</h2>
<p>$130</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike01a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Epic React Flyknit</h2>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike03a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Air Max 97 Premium</h2>
<p>$180</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike04a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Free RN Motion Flyknit</h2>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike05a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Free RN Flyknit 2018</h2>
<p>$120</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike06a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Rise React Flyknit</h2>
<p>$175</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike07a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Flyknit Racer G</h2>
<p>$175</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike08a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike EXP-X14 Premium iD</h2>
<p>$160</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike09a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Free x Retcon</h2>
<p>$120</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike10a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Air Force 1 '07 Suede</h2>
<p>$90</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike11a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Metcon 4 iD</h2>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike12a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>LeBron 16</h2>
<p>$185</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike02a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Odyssey React Shield</h2>
<p>$130</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike01a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Epic React Flyknit</h2>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike03a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Air Max 97 Premium</h2>
<p>$180</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike04a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Free RN Motion Flyknit</h2>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike05a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Free RN Flyknit 2018</h2>
<p>$120</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike06a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Rise React Flyknit</h2>
<p>$175</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike07a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Flyknit Racer G</h2>
<p>$175</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike08a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike EXP-X14 Premium iD</h2>
<p>$160</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike09a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Free x Retcon</h2>
<p>$120</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike10a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Air Force 1 '07 Suede</h2>
<p>$90</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike11a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Metcon 4 iD</h2>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike12a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>LeBron 16</h2>
<p>$185</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike02a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Odyssey React Shield</h2>
<p>$130</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike01a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Epic React Flyknit</h2>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike03a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Air Max 97 Premium</h2>
<p>$180</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike04a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Free RN Motion Flyknit</h2>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike05a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Free RN Flyknit 2018</h2>
<p>$120</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike06a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Rise React Flyknit</h2>
<p>$175</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike07a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Flyknit Racer G</h2>
<p>$175</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike08a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike EXP-X14 Premium iD</h2>
<p>$160</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike09a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Free x Retcon</h2>
<p>$120</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike10a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Air Force 1 '07 Suede</h2>
<p>$90</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike11a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Metcon 4 iD</h2>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike12a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>LeBron 16</h2>
<p>$185</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike02a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Odyssey React Shield</h2>
<p>$130</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike01a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Epic React Flyknit</h2>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike03a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Air Max 97 Premium</h2>
<p>$180</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike04a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Free RN Motion Flyknit</h2>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike05a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Free RN Flyknit 2018</h2>
<p>$120</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike06a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Rise React Flyknit</h2>
<p>$175</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike07a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Flyknit Racer G</h2>
<p>$175</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike08a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike EXP-X14 Premium iD</h2>
<p>$160</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike09a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Free x Retcon</h2>
<p>$120</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike10a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Air Force 1 '07 Suede</h2>
<p>$90</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike11a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Metcon 4 iD</h2>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike12a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>LeBron 16</h2>
<p>$185</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike02a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Odyssey React Shield</h2>
<p>$130</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike01a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Epic React Flyknit</h2>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike03a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Air Max 97 Premium</h2>
<p>$180</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike04a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Free RN Motion Flyknit</h2>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike05a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Free RN Flyknit 2018</h2>
<p>$120</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike06a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Rise React Flyknit</h2>
<p>$175</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike07a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Flyknit Racer G</h2>
<p>$175</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike08a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike EXP-X14 Premium iD</h2>
<p>$160</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike09a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Free x Retcon</h2>
<p>$120</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike10a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Air Force 1 '07 Suede</h2>
<p>$90</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike11a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Metcon 4 iD</h2>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike12a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>LeBron 16</h2>
<p>$185</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike02a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Odyssey React Shield</h2>
<p>$130</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike01a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Epic React Flyknit</h2>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike03a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Air Max 97 Premium</h2>
<p>$180</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike04a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Free RN Motion Flyknit</h2>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike05a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Free RN Flyknit 2018</h2>
<p>$120</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike06a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Rise React Flyknit</h2>
<p>$175</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike07a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Flyknit Racer G</h2>
<p>$175</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike08a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike EXP-X14 Premium iD</h2>
<p>$160</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike09a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Free x Retcon</h2>
<p>$120</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike10a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Air Force 1 '07 Suede</h2>
<p>$90</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike11a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Metcon 4 iD</h2>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike12a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>LeBron 16</h2>
<p>$185</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike02a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Odyssey React Shield</h2>
<p>$130</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike01a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Epic React Flyknit</h2>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike03a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Air Max 97 Premium</h2>
<p>$180</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike04a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Free RN Motion Flyknit</h2>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike05a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Free RN Flyknit 2018</h2>
<p>$120</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike06a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Rise React Flyknit</h2>
<p>$175</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike07a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Flyknit Racer G</h2>
<p>$175</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike08a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike EXP-X14 Premium iD</h2>
<p>$160</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike09a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Free x Retcon</h2>
<p>$120</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike10a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Air Force 1 '07 Suede</h2>
<p>$90</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike11a.png">
</div>
</div>
</li>
<li>
<div class="holder">
<div class="star">
<h2>Nike Metcon 4 iD</h2>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike12a.png">
</div>
</div>
</li>
</ul>
@import url('https://fonts.googleapis.com/css?family=Passion+One|Montserrat:400,700');
:root {
--cos30: 0.866;
--squareWidth: 1;
--hexWidth: 1.73205;
--hexHeight: 2;
--colWidth: 1.36603;
--rowHeight: 4.73205;
--hexOverCol: 126.79%;
--hexOffset: 13.397%;
--legsSquare: 3.73205;
--legsOverCol : 273.204%;
--legsOffset: 86.602%;
}
body{
background-color: #468189;
color: #1F271B;
overflow-x: hidden;
font-family: 'Passion One', sans-serif;
}
header{
z-index: 30;
background: #FCBA04;
text-align: center;
}
h1{
color: #2C363F;
font-size: 20vw;
line-height: 21vw;
}
ul {
z-index: -10;
display: grid;
position: absolute;
grid-template-columns: repeat(4,1fr);
width: 150%;
top: -5vw;
left: -25%;
}
li{
position: relative;
width: 100%;
height: 0;
padding-top: calc(100%*(var(--rowHeight)/var(--colWidth)));
}
.holder{
position: absolute;
width: 100%;
height: 100%;
}
li:nth-child(2n+1) .holder{
top: 25%;
}
li:nth-child(2n) .holder{
top: 75%;
}
.star{
width: var(--hexOverCol);
left: calc(var(--hexOffset) * -1);
height: 0;
padding-top: calc(100%*(var(--hexHeight)/var(--colWidth)));
margin-left: calc(var(--hexOffset) * -1);
}
.star::before{
pointer-events: none;
display: block;
position: absolute;
top: 0;
left: calc(var(--hexOffset) * -1);
width: var(--hexOverCol);
height: 0;
padding-top: calc(100%*(var(--hexHeight)/var(--colWidth)));
content: '';
background-color: #698F3F;
z-index: -10;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.star::after{
pointer-events: none;
position: absolute;
width: var(--legsOverCol);
height: 0;
padding-top: var(--legsOverCol);
top: calc(-1 * 100% * (var(--cos30)/var(--rowHeight)));
left: calc(var(--legsOffset) * -1);
content: '';
z-index: -20;
background-color: #DDD1C7;
clip-path: polygon(13.3975% 13.3975%, 36.603% 0%, 50% 23.205%, 63.397% 0%, 86.6025% 13.3975%, 73.205% 36.603%, 100% 36.603%, 100% 63.397%, 73.205% 63.397%, 86.6025% 86.6025%, 63.397% 100%, 50% 76.795%, 36.603% 100%, 13.3975% 86.6025%, 26.795% 63.397%, 0% 63.397%, 0% 36.603%, 26.795% 36.603%);
clip-path: polygon(13.3975% 13.3975%, 36.603% 0%, 50% 23.205%, 63.397% 0%, 86.6025% 13.3975%, 73.205% 36.603%, 100% 36.603%, 100% 63.397%, 73.205% 63.397%, 86.6025% 86.6025%, 63.397% 100%, 50% 76.795%, 36.603% 100%, 13.3975% 86.6025%, 26.795% 63.397%, 0% 63.397%, 0% 36.603%, 26.795% 36.603%);
}
li:hover{
z-index: 10;
}
.star:hover::before{
background-color: #F1615A;
}
.star:hover::after{
background-color: #E0F2E9;
}
.star:hover img{
transform: rotate(0) scale(1.8) translateZ(0);
filter: drop-shadow(0 20px 20px rgba(0, 0, 0, 0.70));
filter: drop-shadow(0 20px 20px rgba(0, 0, 0, 0.70));
}
.star:hover h2{
display: none;
}
h2{
font-size: 4.5vw;
position: absolute;
width: calc(var(--hexOverCol)/1.8);
left: 41%;
bottom: 64%;
text-align: center;
transform: rotate(-30deg);
pointer-events: none;
}
p{
font-size: 5.5vw;
position: absolute;
width: var(--hexOverCol);
left: -40%;
top: 5.5%;
text-align: center;
transform: rotate(-30deg);
pointer-events: none;
}
img{
position: absolute;
width: 130%;
left: -22%;
top: 6.5%;
transform: rotate(-30deg) translateZ(0);
pointer-events: none;
transition-property: transform;
transition-duration: .3s;
}
li:nth-child(4n+1) > .holder > .star > *, li:nth-child(4n) > .holder > .star > *{
visibility: hidden
}
li:nth-child(4n+1) > .holder > .star, li:nth-child(4n) > .holder > .star {
pointer-events: none;
}
@media (min-width:600px) {
ul{
grid-template-columns: repeat(6,1fr);
width: 125%;
top: 7vw;
left: -12.5%;
padding-bottom: 0vw;
margin-bottom: -55vw;
}
h2{
font-size: 2.85vw;
width: calc(var(--hexOverCol)/1.6);
left: 35%;
bottom: 63%;
}
p{
font-size: 3.5vw;
}
li:nth-child(4n+1) > .holder > .star > *, li:nth-child(4n) > .holder > .star > *{
visibility: visible
}
li:nth-child(4n+1) > .holder > .star, li:nth-child(4n) > .holder > .star {
pointer-events: auto;
}
li:nth-child(6n+1) > .holder > .star > *, li:nth-child(6n) > .holder > .star > *{
visibility: hidden
}
li:nth-child(6n+1) > .holder > .star, li:nth-child(6n) > .holder > .star {
pointer-events: none;
}
}
@media (min-width:900px) {
ul{
grid-template-columns: repeat(8,1fr);
width: 115%;
top: 10vw;
left: -7.5%;
padding-bottom: 0vw;
margin-bottom: -38vw;
}
p{
font-size: 2.5vw;
}
h2{
font-size: 2.05vw;
width: calc(var(--hexOverCol)/1.6);
left: 33%;
bottom: 63%;
}
li:nth-child(6n+1) > .holder > .star > *, li:nth-child(6n) > .holder > .star > *{
visibility: visible
}
li:nth-child(6n+1) > .holder > .star, li:nth-child(6n) > .holder > .star {
pointer-events: auto;
}
li:nth-child(8n+1) > .holder > .star > *, li:nth-child(8n) > .holder > .star > *{
visibility: hidden
}
li:nth-child(8n+1) > .holder > .star, li:nth-child(8n) > .holder > .star {
pointer-events: none;
}
}
@media (min-width:1200px) {
ul{
grid-template-columns: repeat(10,1fr);
width: 112%;
top: 9vw;
left: -6%;
padding-bottom: 9vw;
margin-bottom: 0vw;
}
h1{
font-size: 15vw;
line-height: 16vw;
}
p{
font-size: 2vw;
}
h2{
font-size: 1.64vw;
width: calc(var(--hexOverCol)/1.6);
left: 33%;
bottom: 63%;
}
li:nth-child(8n+1) > .holder > .star > *, li:nth-child(8n) > .holder > .star > *{
visibility: visible
}
li:nth-child(8n+1) > .holder > .star, li:nth-child(8n) > .holder > .star {
pointer-events: auto;
}
li:nth-child(10n+1) > .holder > .star > *, li:nth-child(10n) > .holder > .star > *{
visibility: hidden
}
li:nth-child(10n+1) > .holder > .star, li:nth-child(10n) > .holder > .star {
pointer-events: none;
}
}
@media (min-width:1500px) {
ul{
grid-template-columns: repeat(12,1fr);
width: 109%;
top: 10vw;
left: -4.5%;
padding-bottom: 0vw;
margin-bottom: -24vw;
}
p{
font-size: 1.9vw;
}
h2{
font-size: 1.3vw;
width: calc(var(--hexOverCol)/1.6);
left: 33%;
bottom: 63%;
}
li:nth-child(10n+1) > .holder > .star > *, li:nth-child(10n) > .holder > .star > *{
visibility: visible
}
li:nth-child(10n+1) > .holder > .star, li:nth-child(10n) > .holder > .star {
pointer-events: auto;
}
li:nth-child(12n+1) > .holder > .star > *, li:nth-child(12n) > .holder > .star > *{
visibility: hidden
}
li:nth-child(12n+1) > .holder > .star, li:nth-child(12n) > .holder > .star {
pointer-events: none;
}
}
@media (min-width:1800px) {
ul{
grid-template-columns: repeat(14,1fr);
width: 108%;
top: 8vw;
left: -4%;
padding-bottom: 0vw;
margin-bottom: -20vw;
}
h1{
font-size: 12vw;
line-height: 13vw;
}
p{
font-size: 1.7vw;
}
h2{
font-size: 1.1vw;
width: calc(var(--hexOverCol)/1.6);
left: 33%;
bottom: 63%;
}
li:nth-child(12n+1) > .holder > .star > *, li:nth-child(12n) > .holder > .star > *{
visibility: visible
}
li:nth-child(12n+1) > .holder > .star, li:nth-child(12n) > .holder > .star {
pointer-events: auto;
}
li:nth-child(14n+1) > .holder > .star > *, li:nth-child(14n) > .holder > .star > *{
visibility: hidden
}
li:nth-child(14n+1) > .holder > .star, li:nth-child(14n) > .holder > .star {
pointer-events: none;
}
li:nth-child(n+113){
display:none;
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.