Skip to content

Instantly share code, notes, and snippets.

@JoshOohAhhAi

JoshOohAhhAi/index.html

Created October 12, 2024 07:41
Show Gist options
  • Save JoshOohAhhAi/11fff9da5386711aa1712e97bd2d5658 to your computer and use it in GitHub Desktop.
Save JoshOohAhhAi/11fff9da5386711aa1712e97bd2d5658 to your computer and use it in GitHub Desktop.
Download ZIP
Isometric eCommerce CSS Grid
Raw
index.html
<ul>
<li class="adidas">
<div>
<h2>I-5923 RUNNER PRIDE</h2>
<p>£99.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas01.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>TIGER ALLY</h2>
<p>£95.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger05.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>NMD_R1</h2>
<p>£109.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas02.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>CALIFORNIA 78</h2>
<p>£75.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/trainer01.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>TUBULAR DUSK PRIMEKNIT</h2>
<p>£109.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas05.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>GSM</h2>
<p>£80.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger04.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>NMD_CS2 PRIMEKNIT</h2>
<p>£149.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas04.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>MEXICO 66</h2>
<p>£75.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger02.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>STAN SMITH</h2>
<p>£74.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas03.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>ALVARADO</h2>
<p>£70.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger03.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>I-5923 RUNNER PRIDE</h2>
<p>£99.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas01.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>TIGER ALLY</h2>
<p>£95.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger05.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>NMD_R1</h2>
<p>£109.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas02.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>CALIFORNIA 78</h2>
<p>£75.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/trainer01.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>TUBULAR DUSK PRIMEKNIT</h2>
<p>£109.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas05.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>GSM</h2>
<p>£80.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger04.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>NMD_CS2 PRIMEKNIT</h2>
<p>£149.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas04.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>MEXICO 66</h2>
<p>£75.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger02.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>STAN SMITH</h2>
<p>£74.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas03.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>ALVARADO</h2>
<p>£70.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger03.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>I-5923 RUNNER PRIDE</h2>
<p>£99.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas01.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>TIGER ALLY</h2>
<p>£95.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger05.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>NMD_R1</h2>
<p>£109.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas02.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>CALIFORNIA 78</h2>
<p>£75.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/trainer01.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>TUBULAR DUSK PRIMEKNIT</h2>
<p>£109.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas05.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>GSM</h2>
<p>£80.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger04.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>NMD_CS2 PRIMEKNIT</h2>
<p>£149.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas04.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>MEXICO 66</h2>
<p>£75.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger02.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>STAN SMITH</h2>
<p>£74.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas03.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>ALVARADO</h2>
<p>£70.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger03.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>I-5923 RUNNER PRIDE</h2>
<p>£99.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas01.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>TIGER ALLY</h2>
<p>£95.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger05.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>NMD_R1</h2>
<p>£109.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas02.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>CALIFORNIA 78</h2>
<p>£75.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/trainer01.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>TUBULAR DUSK PRIMEKNIT</h2>
<p>£109.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas05.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>GSM</h2>
<p>£80.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger04.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>NMD_CS2 PRIMEKNIT</h2>
<p>£149.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas04.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>MEXICO 66</h2>
<p>£75.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger02.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>STAN SMITH</h2>
<p>£74.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas03.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>ALVARADO</h2>
<p>£70.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger03.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>I-5923 RUNNER PRIDE</h2>
<p>£99.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas01.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>TIGER ALLY</h2>
<p>£95.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger05.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>NMD_R1</h2>
<p>£109.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas02.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>CALIFORNIA 78</h2>
<p>£75.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/trainer01.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>TUBULAR DUSK PRIMEKNIT</h2>
<p>£109.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas05.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>GSM</h2>
<p>£80.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger04.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>NMD_CS2 PRIMEKNIT</h2>
<p>£149.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas04.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>MEXICO 66</h2>
<p>£75.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger02.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>STAN SMITH</h2>
<p>£74.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas03.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>ALVARADO</h2>
<p>£70.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger03.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>I-5923 RUNNER PRIDE</h2>
<p>£99.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas01.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>TIGER ALLY</h2>
<p>£95.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger05.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>NMD_R1</h2>
<p>£109.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas02.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>CALIFORNIA 78</h2>
<p>£75.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/trainer01.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>TUBULAR DUSK PRIMEKNIT</h2>
<p>£109.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas05.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>GSM</h2>
<p>£80.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger04.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>NMD_CS2 PRIMEKNIT</h2>
<p>£149.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas04.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>MEXICO 66</h2>
<p>£75.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger02.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>STAN SMITH</h2>
<p>£74.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas03.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>ALVARADO</h2>
<p>£70.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger03.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>I-5923 RUNNER PRIDE</h2>
<p>£99.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas01.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>TIGER ALLY</h2>
<p>£95.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger05.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>NMD_R1</h2>
<p>£109.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas02.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>CALIFORNIA 78</h2>
<p>£75.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/trainer01.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>TUBULAR DUSK PRIMEKNIT</h2>
<p>£109.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas05.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>GSM</h2>
<p>£80.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger04.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>NMD_CS2 PRIMEKNIT</h2>
<p>£149.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas04.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>MEXICO 66</h2>
<p>£75.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger02.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>STAN SMITH</h2>
<p>£74.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas03.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>ALVARADO</h2>
<p>£70.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger03.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>I-5923 RUNNER PRIDE</h2>
<p>£99.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas01.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>TIGER ALLY</h2>
<p>£95.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger05.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>NMD_R1</h2>
<p>£109.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas02.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>CALIFORNIA 78</h2>
<p>£75.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/trainer01.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>TUBULAR DUSK PRIMEKNIT</h2>
<p>£109.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas05.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>GSM</h2>
<p>£80.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger04.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>NMD_CS2 PRIMEKNIT</h2>
<p>£149.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas04.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>MEXICO 66</h2>
<p>£75.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger02.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>STAN SMITH</h2>
<p>£74.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas03.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>ALVARADO</h2>
<p>£70.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger03.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>I-5923 RUNNER PRIDE</h2>
<p>£99.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas01.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>TIGER ALLY</h2>
<p>£95.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger05.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>NMD_R1</h2>
<p>£109.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas02.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>CALIFORNIA 78</h2>
<p>£75.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/trainer01.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>TUBULAR DUSK PRIMEKNIT</h2>
<p>£109.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas05.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>GSM</h2>
<p>£80.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger04.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>NMD_CS2 PRIMEKNIT</h2>
<p>£149.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas04.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>MEXICO 66</h2>
<p>£75.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger02.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>STAN SMITH</h2>
<p>£74.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas03.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>ALVARADO</h2>
<p>£70.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger03.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>I-5923 RUNNER PRIDE</h2>
<p>£99.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas01.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>TIGER ALLY</h2>
<p>£95.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger05.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>NMD_R1</h2>
<p>£109.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas02.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>CALIFORNIA 78</h2>
<p>£75.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/trainer01.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>TUBULAR DUSK PRIMEKNIT</h2>
<p>£109.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas05.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>GSM</h2>
<p>£80.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger04.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>NMD_CS2 PRIMEKNIT</h2>
<p>£149.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas04.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>MEXICO 66</h2>
<p>£75.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger02.png' alt='' />
</li>
<li class="adidas">
<div>
<h2>STAN SMITH</h2>
<p>£74.95</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas03.png' alt='' />
</li>
<li class="tiger">
<div>
<h2>ALVARADO</h2>
<p>£70.00</p>
</div>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger03.png' alt='' />
</li>
</ul>
Raw
isometric-ecommerce-css-grid.markdown
Raw
style.css
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700');
:root {
--columns: 3;
}
body{
color: #5A626F;
background-color: #E7FFF4;
font-family: 'Open Sans Condensed', sans-serif;
}
ul{
margin: 100px 0;
display: grid;
grid-template-columns: repeat(var(--columns),1fr);
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 600 1040' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2'%3E%3Cpath d='M0 0l300 173.205v346.41L0 346.41V0z' fill='url(%23_Linear1)'/%3E%3Cpath d='M300 519.615L600 692.82v346.411L300 866.025v-346.41z' fill='url(%23_Linear2)'/%3E%3Cpath d='M600 0L300 173.205v346.41L600 346.41V0z' fill='url(%23_Linear3)'/%3E%3Cpath d='M300 519.615L0 692.82v346.411l300-173.206v-346.41z' fill='url(%23_Linear4)'/%3E%3Cdefs%3E%3ClinearGradient id='_Linear1' x1='0' y1='0' x2='1' y2='0' gradientUnits='userSpaceOnUse' gradientTransform='rotate(-30 646.41 173.205) scale(346.41)'%3E%3Cstop offset='0' stop-color='%23b7ccc3'/%3E%3Cstop offset='1' stop-color='%23cde2d9'/%3E%3C/linearGradient%3E%3ClinearGradient id='_Linear2' x1='0' y1='0' x2='1' y2='0' gradientUnits='userSpaceOnUse' gradientTransform='rotate(-30 1766.025 -126.796) scale(346.41)'%3E%3Cstop offset='0' stop-color='%23b7ccc3'/%3E%3Cstop offset='1' stop-color='%23cde2d9'/%3E%3C/linearGradient%3E%3ClinearGradient id='_Linear3' x1='0' y1='0' x2='1' y2='0' gradientUnits='userSpaceOnUse' gradientTransform='rotate(-150 346.41 92.82) scale(346.41)'%3E%3Cstop offset='0' stop-color='%23e8dad1'/%3E%3Cstop offset='1' stop-color='%23fff0e7'/%3E%3C/linearGradient%3E%3ClinearGradient id='_Linear4' x1='0' y1='0' x2='1' y2='0' gradientUnits='userSpaceOnUse' gradientTransform='rotate(-150 266.025 392.82) scale(346.41)'%3E%3Cstop offset='0' stop-color='%23e8dad1'/%3E%3Cstop offset='1' stop-color='%23fff0e7'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
background-size: calc(200%/(var(--columns)));
}
li{
grid-column-end: span 2;
position: relative;
padding-bottom: 86.66%;
}
li:nth-child(2n-1){
grid-column-start:2;
}
li:before{
content: "";
position: absolute;
right: 0;
width: 50%;
height: 100%;
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png);
background-position: 90% 27%;
opacity: 0.6;
transform: skewy(30deg);
background-size: 40%;
background-repeat: no-repeat;
}
.adidas:before{
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png);
}
.tiger:before{
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png);
}
div{
position: absolute;
width: 50%;
font-size: calc(15vw/var(--columns));
transform: skewy(-30deg);
margin-top: 14%;
padding: 3%;
}
p{
font-size: 2em;
}
img{
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 62%;
bottom: -10%;
-webkit-filter: drop-shadow(0 50px 20px rgba(0, 0, 0, 0.20));
filter: drop-shadow(0 50px 20px rgba(0, 0, 0, 0.20));
transition-property: bottom, filter, -webkit-filter;
transition-duration: .3s;
}
img:hover{
bottom: 0;
-webkit-filter: drop-shadow(0 80px 40px rgba(0, 0, 0, 0.20));
filter: drop-shadow(0 80px 30px rgba(0, 0, 0, 0.20));
}
@media (min-width:600px){
:root {
--columns: 5;
}
li:nth-child(2n-1){
grid-column-start:auto;
}
li:nth-child(4n-3){
grid-column-start:2;
}
}
@media (min-width:900px){
:root {
--columns: 7;
}
li:nth-child(4n-3){
grid-column-start:auto;
}
li:nth-child(6n-5){
grid-column-start:2;
}
}
@media (min-width:1200px){
:root {
--columns: 9;
}
li:nth-child(6n-5){
grid-column-start:auto;
}
li:nth-child(8n-7){
grid-column-start:2;
}
}
@media (min-width:1500px){
:root {
--columns: 11;
}
li:nth-child(8n-7){
grid-column-start:auto;
}
li:nth-child(10n-9){
grid-column-start:2;
}
}
@media (min-width:1800px){
:root {
--columns: 13;
}
li:nth-child(10n-9){
grid-column-start:auto;
}
li:nth-child(12n-11){
grid-column-start:2;
}
}
@media (min-width:2100px){
:root {
--columns: 15;
}
li:nth-child(12n-11){
grid-column-start:auto;
}
li:nth-child(14n-13){
grid-column-start:2;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment