Skip to content

Instantly share code, notes, and snippets.

@JaeDukSeo

JaeDukSeo/index.html

Created June 26, 2020 10:58
Show Gist options
  • Save JaeDukSeo/1ce8b4344919101432c140faf8bd2a36 to your computer and use it in GitHub Desktop.
Save JaeDukSeo/1ce8b4344919101432c140faf8bd2a36 to your computer and use it in GitHub Desktop.
Download ZIP
Playing card CSS Grid eCommerce layout
Raw
index.html
<ul>
<li>
<div class="details">
<h2>Nike Odyssey React Shield</h2>
<p>$130</p>
<p>$130</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike01a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike01b.png">
</div>
</li>
<li>
<div class="details">
<h2>LeBron 16</h2>
<p>$185</p>
<p>$185</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike02a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike02b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Epic React Flyknit</h2>
<p>$150</p>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike03a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike03b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Air Max 97 Premium</h2>
<p>$180</p>
<p>$180</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike04a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike04b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Free RN Motion Flyknit 2018</h2>
<p>$150</p>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike05a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike05b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Free RN Flyknit 2018</h2>
<p>$120</p>
<p>$120</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike06a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike06b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Rise React Flyknit LMTD</h2>
<p>$175</p>
<p>$175</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike07a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike07b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Flyknit Racer G</h2>
<p>$175</p>
<p>$175</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike08a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike08b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike EXP-X14 Premium iD</h2>
<p>$160</p>
<p>$160</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike09a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike09b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Free x Retcon</h2>
<p>$120</p>
<p>$120</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike10a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike10b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Air Force 1 '07 Suede</h2>
<p>$90</p>
<p>$90</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike11a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike11b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Metcon 4 iD</h2>
<p>$150</p>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike12a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike12b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Odyssey React Shield</h2>
<p>$130</p>
<p>$130</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike01a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike01b.png">
</div>
</li>
<li>
<div class="details">
<h2>LeBron 16</h2>
<p>$185</p>
<p>$185</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike02a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike02b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Epic React Flyknit</h2>
<p>$150</p>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike03a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike03b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Air Max 97 Premium</h2>
<p>$180</p>
<p>$180</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike04a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike04b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Free RN Motion Flyknit 2018</h2>
<p>$150</p>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike05a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike05b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Free RN Flyknit 2018</h2>
<p>$120</p>
<p>$120</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike06a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike06b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Rise React Flyknit LMTD</h2>
<p>$175</p>
<p>$175</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike07a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike07b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Flyknit Racer G</h2>
<p>$175</p>
<p>$175</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike08a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike08b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike EXP-X14 Premium iD</h2>
<p>$160</p>
<p>$160</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike09a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike09b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Free x Retcon</h2>
<p>$120</p>
<p>$120</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike10a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike10b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Air Force 1 '07 Suede</h2>
<p>$90</p>
<p>$90</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike11a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike11b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Metcon 4 iD</h2>
<p>$150</p>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike12a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike12b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Odyssey React Shield</h2>
<p>$130</p>
<p>$130</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike01a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike01b.png">
</div>
</li>
<li>
<div class="details">
<h2>LeBron 16</h2>
<p>$185</p>
<p>$185</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike02a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike02b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Epic React Flyknit</h2>
<p>$150</p>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike03a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike03b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Air Max 97 Premium</h2>
<p>$180</p>
<p>$180</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike04a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike04b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Free RN Motion Flyknit 2018</h2>
<p>$150</p>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike05a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike05b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Free RN Flyknit 2018</h2>
<p>$120</p>
<p>$120</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike06a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike06b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Rise React Flyknit LMTD</h2>
<p>$175</p>
<p>$175</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike07a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike07b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Flyknit Racer G</h2>
<p>$175</p>
<p>$175</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike08a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike08b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike EXP-X14 Premium iD</h2>
<p>$160</p>
<p>$160</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike09a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike09b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Free x Retcon</h2>
<p>$120</p>
<p>$120</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike10a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike10b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Air Force 1 '07 Suede</h2>
<p>$90</p>
<p>$90</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike11a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike11b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Metcon 4 iD</h2>
<p>$150</p>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike12a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike12b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Odyssey React Shield</h2>
<p>$130</p>
<p>$130</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike01a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike01b.png">
</div>
</li>
<li>
<div class="details">
<h2>LeBron 16</h2>
<p>$185</p>
<p>$185</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike02a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike02b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Epic React Flyknit</h2>
<p>$150</p>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike03a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike03b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Air Max 97 Premium</h2>
<p>$180</p>
<p>$180</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike04a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike04b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Free RN Motion Flyknit 2018</h2>
<p>$150</p>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike05a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike05b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Free RN Flyknit 2018</h2>
<p>$120</p>
<p>$120</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike06a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike06b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Rise React Flyknit LMTD</h2>
<p>$175</p>
<p>$175</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike07a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike07b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Flyknit Racer G</h2>
<p>$175</p>
<p>$175</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike08a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike08b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike EXP-X14 Premium iD</h2>
<p>$160</p>
<p>$160</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike09a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike09b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Free x Retcon</h2>
<p>$120</p>
<p>$120</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike10a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike10b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Air Force 1 '07 Suede</h2>
<p>$90</p>
<p>$90</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike11a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike11b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Metcon 4 iD</h2>
<p>$150</p>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike12a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike12b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Odyssey React Shield</h2>
<p>$130</p>
<p>$130</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike01a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike01b.png">
</div>
</li>
<li>
<div class="details">
<h2>LeBron 16</h2>
<p>$185</p>
<p>$185</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike02a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike02b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Epic React Flyknit</h2>
<p>$150</p>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike03a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike03b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Air Max 97 Premium</h2>
<p>$180</p>
<p>$180</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike04a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike04b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Free RN Motion Flyknit 2018</h2>
<p>$150</p>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike05a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike05b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Free RN Flyknit 2018</h2>
<p>$120</p>
<p>$120</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike06a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike06b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Rise React Flyknit LMTD</h2>
<p>$175</p>
<p>$175</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike07a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike07b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Flyknit Racer G</h2>
<p>$175</p>
<p>$175</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike08a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike08b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike EXP-X14 Premium iD</h2>
<p>$160</p>
<p>$160</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike09a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike09b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Free x Retcon</h2>
<p>$120</p>
<p>$120</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike10a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike10b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Air Force 1 '07 Suede</h2>
<p>$90</p>
<p>$90</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike11a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike11b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Metcon 4 iD</h2>
<p>$150</p>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike12a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike12b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Odyssey React Shield</h2>
<p>$130</p>
<p>$130</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike01a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike01b.png">
</div>
</li>
<li>
<div class="details">
<h2>LeBron 16</h2>
<p>$185</p>
<p>$185</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike02a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike02b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Epic React Flyknit</h2>
<p>$150</p>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike03a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike03b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Air Max 97 Premium</h2>
<p>$180</p>
<p>$180</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike04a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike04b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Free RN Motion Flyknit 2018</h2>
<p>$150</p>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike05a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike05b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Free RN Flyknit 2018</h2>
<p>$120</p>
<p>$120</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike06a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike06b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Rise React Flyknit LMTD</h2>
<p>$175</p>
<p>$175</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike07a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike07b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Flyknit Racer G</h2>
<p>$175</p>
<p>$175</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike08a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike08b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike EXP-X14 Premium iD</h2>
<p>$160</p>
<p>$160</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike09a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike09b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Free x Retcon</h2>
<p>$120</p>
<p>$120</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike10a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike10b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Air Force 1 '07 Suede</h2>
<p>$90</p>
<p>$90</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike11a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike11b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Metcon 4 iD</h2>
<p>$150</p>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike12a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike12b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Odyssey React Shield</h2>
<p>$130</p>
<p>$130</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike01a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike01b.png">
</div>
</li>
<li>
<div class="details">
<h2>LeBron 16</h2>
<p>$185</p>
<p>$185</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike02a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike02b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Epic React Flyknit</h2>
<p>$150</p>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike03a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike03b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Air Max 97 Premium</h2>
<p>$180</p>
<p>$180</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike04a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike04b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Free RN Motion Flyknit 2018</h2>
<p>$150</p>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike05a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike05b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Free RN Flyknit 2018</h2>
<p>$120</p>
<p>$120</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike06a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike06b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Rise React Flyknit LMTD</h2>
<p>$175</p>
<p>$175</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike07a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike07b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Flyknit Racer G</h2>
<p>$175</p>
<p>$175</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike08a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike08b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike EXP-X14 Premium iD</h2>
<p>$160</p>
<p>$160</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike09a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike09b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Free x Retcon</h2>
<p>$120</p>
<p>$120</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike10a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike10b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Air Force 1 '07 Suede</h2>
<p>$90</p>
<p>$90</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike11a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike11b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Metcon 4 iD</h2>
<p>$150</p>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike12a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike12b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Odyssey React Shield</h2>
<p>$130</p>
<p>$130</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike01a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike01b.png">
</div>
</li>
<li>
<div class="details">
<h2>LeBron 16</h2>
<p>$185</p>
<p>$185</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike02a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike02b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Epic React Flyknit</h2>
<p>$150</p>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike03a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike03b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Air Max 97 Premium</h2>
<p>$180</p>
<p>$180</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike04a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike04b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Free RN Motion Flyknit 2018</h2>
<p>$150</p>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike05a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike05b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Free RN Flyknit 2018</h2>
<p>$120</p>
<p>$120</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike06a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike06b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Rise React Flyknit LMTD</h2>
<p>$175</p>
<p>$175</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike07a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike07b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Flyknit Racer G</h2>
<p>$175</p>
<p>$175</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike08a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike08b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike EXP-X14 Premium iD</h2>
<p>$160</p>
<p>$160</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike09a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike09b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Free x Retcon</h2>
<p>$120</p>
<p>$120</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike10a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike10b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Air Force 1 '07 Suede</h2>
<p>$90</p>
<p>$90</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike11a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike11b.png">
</div>
</li>
<li>
<div class="details">
<h2>Nike Metcon 4 iD</h2>
<p>$150</p>
<p>$150</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike12a.png">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/nike12b.png">
</div>
</li>
</ul>
Raw
style.css
@import url('https://fonts.googleapis.com/css?family=Raleway');
body{
background: #5c746a;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAIElEQVQoU2NcWuD6v2nfFwZcgFFdz/I/TlkGBobhoQAAGHYPccmxFlIAAAAASUVORK5CYII=) repeat;
color: #1c1c1c;
font-family: 'Raleway', sans-serif;
font-size: 5vw;
}
ul {
display: grid;
grid-template-columns: repeat(1,1fr);
transform-origin: top right;
transform: skewY(-4.398705355deg);
margin: 0 6.4vw 0 28%;
}
li{
transform-origin: top left;
transform: skewY(4.398705355deg) rotatez(14.03624deg);
padding-top: 150%;
z-index: 1;
transition-property: z-index;
transition-duration: .3s;
}
.details{
position: absolute;
z-index: 2;
width: 98%;
height: 95%;
top: 0;
background-color: #DADDDF;
border-radius: 2vw;
box-shadow: inset 0px 0px 0px 7vw #FCF8F4;
box-sizing: border-box;
webkit-filter: drop-shadow(2px 6px 3px rgba(0, 0, 0, 0.4));
filter: drop-shadow(2px 6px 3px rgba(0, 0, 0, 0.4));
transform: rotate(0deg) translate(0, 0);
transition-property: transform;
transition-duration: .3s;
}
h2, p, img {
position: absolute;
z-index: 4;
}
p{
font-size:1.4em;
background-color: #FCF8F4;
padding: 2% 2.5% 2% 2.5%;
}
p:nth-child(2n){
top: 3%;
left: 5%;
}
p:nth-child(2n+1){
transform: rotatez(180deg);
bottom: 3%;
right: 5%;
}
h2{
text-align: center;
width: 122%;
left: -11%;
top: 46%;
transform: rotatez(-45deg);
background-color: #FCF8F4;
line-height: 140%;
transition-property: top;
transition-duration: .3s;
}
img{
width: 84%;
top: 50%;
left: 50%;
}
img:nth-child(2n){
transform: translateX(-30%) translateY(5%) rotatez(135deg);
transition-property: width,transform;
transition-duration: .3s;
}
img:nth-child(2n+1){
transform: translateX(-70%) translateY(-105%) rotatez(-45deg);
transition-property: width,transform;
transition-duration: .3s;
}
li:hover{
z-index: 4;
}
li:hover h2{
top: 64%;
}
li:hover .details{
transform: rotate(-14.03624deg) translate(5.5%, 15%) scale(1.5);
}
li:hover img:nth-child(2n){
width: 60%;
transform: translateX(-15%) translateY(60%) rotatez(135deg);
}
li:hover img:nth-child(2n+1){
width: 120%;
transform: translateX(-65%) translateY(-75%) rotatez(-45deg);
}
@media (min-width:300px) {
body{
font-size: 2.75vw;
}
ul {
grid-template-columns: repeat(2,1fr);
grid-column-gap: 3vw;
margin: 0 3.9vw 0 15vw;
}
.details{
box-shadow: inset 0px 0px 0px 4vw #FCF8F4;
}
}
@media (min-width:600px) {
body{
font-size: 1.95vw;
}
ul {
grid-template-columns: repeat(3,1fr);
grid-column-gap: 2vw;
margin: 0 2.8vw 0 10vw;
}
.details{
box-shadow: inset 0px 0px 0px 2.8vw #FCF8F4;
}
}
@media (min-width:900px) {
body{
font-size: 1.5vw;
}
ul {
grid-template-columns: repeat(4,1fr);
grid-column-gap: 1.5vw;
margin: 0 2.2vw 0 8vw;
}
.details{
box-shadow: inset 0px 0px 0px 2.2vw #FCF8F4;
}
}
@media (min-width:1200px) {
body{
font-size: 1.25vw;
}
ul {
grid-template-columns: repeat(5,1fr);
grid-column-gap: 1vw;
margin: 0 1.8vw 0 6.5vw;
}
.details{
box-shadow: inset 0px 0px 0px 1.8vw #FCF8F4;
}
}
@media (min-width:1500px) {
body{
font-size: 1vw;
}
ul {
grid-template-columns: repeat(6,1fr);
grid-column-gap: 1vw;
margin: 0 1.5vw 0 5.5vw;
}
.details{
box-shadow: inset 0px 0px 0px 1.5vw #FCF8F4;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment