Created
February 7, 2018 00:04
-
-
Save electricg/24bb8efa78c9bbe436eeefce4138ed41 to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/wireji
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| *, *:after, *:before { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background: pink; | |
| color: #111; | |
| font-family: sans-serif; | |
| font-size: 12px; | |
| } | |
| a { | |
| color: inherit; | |
| text-decoration: none; | |
| } | |
| /* cards */ | |
| .card__group { | |
| align-items: stretch; | |
| display: flex; | |
| flex-direction: row; | |
| flex-wrap: wrap; | |
| background: #FFF; | |
| padding: 0 24px 24px; | |
| max-width: 700px; | |
| margin: 0 auto; | |
| } | |
| .card__item { | |
| width: 100%; | |
| margin: 24px 0 0; | |
| } | |
| .card__item--river:after { | |
| content: ""; | |
| display: block; | |
| width: 100%; | |
| border-top: 1px solid #e3e3e3; | |
| } | |
| .card__item--river:last-child:after { | |
| display: none; | |
| } | |
| .card__container { | |
| display: block; | |
| } | |
| .card__thumbnail-wrapper { | |
| background: #ccc; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .card__thumbnail-wrapper::before { | |
| display: block; | |
| line-height: 0; /* needed for certain browsers */ | |
| } | |
| .card__thumbnail-wrapper-fb::before { | |
| content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E"); | |
| } | |
| .card__thumbnail-wrapper-hero::before { | |
| content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 5'%3E%3C/svg%3E"); | |
| } | |
| .card__thumbnail-wrapper-main::before { | |
| content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 3'%3E%3C/svg%3E"); | |
| } | |
| .card__thumbnail-wrapper-square::before { | |
| content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E"); | |
| } | |
| .card__thumbnail-wrapper-promo::before { | |
| content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 4'%3E%3C/svg%3E"); | |
| } | |
| .card__thumbnail-wrapper::after { | |
| background: #f00; | |
| color: #fff; | |
| padding: 0 2px; | |
| position: absolute; | |
| top: 0; | |
| } | |
| .card__thumbnail-wrapper-fb::after { | |
| content: '16:9'; | |
| } | |
| .card__thumbnail-wrapper-hero::after { | |
| content: '16:5'; | |
| } | |
| .card__thumbnail-wrapper-main::after { | |
| content: '4:3'; | |
| } | |
| .card__thumbnail-wrapper-square::after { | |
| content: '1:1'; | |
| } | |
| .card__thumbnail-wrapper-promo::after { | |
| content: '3:4'; | |
| } | |
| .card__thumbnail { | |
| position: absolute; | |
| top: 0; | |
| width: 100%; | |
| } | |
| .card__details { | |
| padding: 24px 0; | |
| } | |
| .card__details p { | |
| margin: 0; | |
| padding: 0; | |
| overflow : hidden; | |
| text-overflow: ellipsis; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 2; | |
| -webkit-box-orient: vertical; | |
| } | |
| @media (min-width: 500px) { | |
| .card__container { | |
| align-items: flex-start; | |
| display: flex; | |
| } | |
| .card__item--river:after { | |
| margin-top: 24px; | |
| } | |
| .card__thumbnail-wrapper { | |
| flex: 0 0 auto; | |
| width: 50%; | |
| } | |
| .card__details { | |
| flex: 0 0 auto; | |
| width: 50%; | |
| padding: 0 0 0 24px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="card__group card__group--river"> | |
| <div class="card__item card__item--river"> | |
| <a href="#" class="card__container"> | |
| <div class="card__thumbnail-wrapper card__thumbnail-wrapper-hero"> | |
| <img src="https://cdn.cliqueinc.com/posts/248670/who-what-wear-spring-2018-collection-target-248670-1517849176178-square.600x0c.jpg?quality=70&interlace=true" class="card__thumbnail card__thumbnail--hero"> | |
| </div> | |
| <div class="card__details"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum perferendis animi dolore nihil quibusdam hic, impedit officiis maxime culpa doloremque?</p></div> | |
| </a> | |
| </div> | |
| <div class="card__item card__item--river"> | |
| <a href="#" class="card__container"> | |
| <div class="card__thumbnail-wrapper card__thumbnail-wrapper-square"> | |
| <img src="https://cdn.cliqueinc.com/posts/248670/who-what-wear-spring-2018-collection-target-248670-1517849176178-square.600x0c.jpg?quality=70&interlace=true" class="card__thumbnail card__thumbnail--square"> | |
| </div> | |
| <div class="card__details"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum perferendis animi dolore nihil quibusdam hic, impedit officiis maxime culpa doloremque?</p></div> | |
| </a> | |
| </div> | |
| <div class="card__item card__item--river"> | |
| <a href="#" class="card__container"> | |
| <div class="card__thumbnail-wrapper card__thumbnail-wrapper-main"> | |
| <img src="https://cdn.cliqueinc.com/posts/248670/who-what-wear-spring-2018-collection-target-248670-1517849176178-square.600x0c.jpg?quality=70&interlace=true" class="card__thumbnail card__thumbnail--main"> | |
| </div> | |
| <div class="card__details"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum perferendis animi dolore nihil quibusdam hic, impedit officiis maxime culpa doloremque?</p></div> | |
| </a> | |
| </div> | |
| <div class="card__item card__item--river"> | |
| <a href="#" class="card__container"> | |
| <div class="card__thumbnail-wrapper card__thumbnail-wrapper-fb"> | |
| <img src="https://cdn.cliqueinc.com/posts/248670/who-what-wear-spring-2018-collection-target-248670-1517849176178-square.600x0c.jpg?quality=70&interlace=true" class="card__thumbnail card__thumbnail--fb"> | |
| </div> | |
| <div class="card__details"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum perferendis animi dolore nihil quibusdam hic, impedit officiis maxime culpa doloremque?</p></div> | |
| </a> | |
| </div> | |
| <div class="card__item card__item--river"> | |
| <a href="#" class="card__container"> | |
| <div class="card__thumbnail-wrapper card__thumbnail-wrapper-promo"> | |
| <img src="https://cdn.cliqueinc.com/posts/248670/who-what-wear-spring-2018-collection-target-248670-1517849176178-square.600x0c.jpg?quality=70&interlace=true" class="card__thumbnail card__thumbnail--promo"> | |
| </div> | |
| <div class="card__details"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum perferendis animi dolore nihil quibusdam hic, impedit officiis maxime culpa doloremque?</p></div> | |
| </a> | |
| </div> | |
| </div> | |
| <script id="jsbin-source-css" type="text/css">*, *:after, *:before { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background: pink; | |
| color: #111; | |
| font-family: sans-serif; | |
| font-size: 12px; | |
| } | |
| a { | |
| color: inherit; | |
| text-decoration: none; | |
| } | |
| /* cards */ | |
| .card__group { | |
| align-items: stretch; | |
| display: flex; | |
| flex-direction: row; | |
| flex-wrap: wrap; | |
| background: #FFF; | |
| padding: 0 24px 24px; | |
| max-width: 700px; | |
| margin: 0 auto; | |
| } | |
| .card__item { | |
| width: 100%; | |
| margin: 24px 0 0; | |
| } | |
| .card__item--river:after { | |
| content: ""; | |
| display: block; | |
| width: 100%; | |
| border-top: 1px solid #e3e3e3; | |
| } | |
| .card__item--river:last-child:after { | |
| display: none; | |
| } | |
| .card__container { | |
| display: block; | |
| } | |
| .card__thumbnail-wrapper { | |
| background: #ccc; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .card__thumbnail-wrapper::before { | |
| display: block; | |
| line-height: 0; /* needed for certain browsers */ | |
| } | |
| .card__thumbnail-wrapper-fb::before { | |
| content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E"); | |
| } | |
| .card__thumbnail-wrapper-hero::before { | |
| content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 5'%3E%3C/svg%3E"); | |
| } | |
| .card__thumbnail-wrapper-main::before { | |
| content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 3'%3E%3C/svg%3E"); | |
| } | |
| .card__thumbnail-wrapper-square::before { | |
| content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E"); | |
| } | |
| .card__thumbnail-wrapper-promo::before { | |
| content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 4'%3E%3C/svg%3E"); | |
| } | |
| .card__thumbnail-wrapper::after { | |
| background: #f00; | |
| color: #fff; | |
| padding: 0 2px; | |
| position: absolute; | |
| top: 0; | |
| } | |
| .card__thumbnail-wrapper-fb::after { | |
| content: '16:9'; | |
| } | |
| .card__thumbnail-wrapper-hero::after { | |
| content: '16:5'; | |
| } | |
| .card__thumbnail-wrapper-main::after { | |
| content: '4:3'; | |
| } | |
| .card__thumbnail-wrapper-square::after { | |
| content: '1:1'; | |
| } | |
| .card__thumbnail-wrapper-promo::after { | |
| content: '3:4'; | |
| } | |
| .card__thumbnail { | |
| position: absolute; | |
| top: 0; | |
| width: 100%; | |
| } | |
| .card__details { | |
| padding: 24px 0; | |
| } | |
| .card__details p { | |
| margin: 0; | |
| padding: 0; | |
| overflow : hidden; | |
| text-overflow: ellipsis; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 2; | |
| -webkit-box-orient: vertical; | |
| } | |
| @media (min-width: 500px) { | |
| .card__container { | |
| align-items: flex-start; | |
| display: flex; | |
| } | |
| .card__item--river:after { | |
| margin-top: 24px; | |
| } | |
| .card__thumbnail-wrapper { | |
| flex: 0 0 auto; | |
| width: 50%; | |
| } | |
| .card__details { | |
| flex: 0 0 auto; | |
| width: 50%; | |
| padding: 0 0 0 24px; | |
| } | |
| }</script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| *, *:after, *:before { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background: pink; | |
| color: #111; | |
| font-family: sans-serif; | |
| font-size: 12px; | |
| } | |
| a { | |
| color: inherit; | |
| text-decoration: none; | |
| } | |
| /* cards */ | |
| .card__group { | |
| align-items: stretch; | |
| display: flex; | |
| flex-direction: row; | |
| flex-wrap: wrap; | |
| background: #FFF; | |
| padding: 0 24px 24px; | |
| max-width: 700px; | |
| margin: 0 auto; | |
| } | |
| .card__item { | |
| width: 100%; | |
| margin: 24px 0 0; | |
| } | |
| .card__item--river:after { | |
| content: ""; | |
| display: block; | |
| width: 100%; | |
| border-top: 1px solid #e3e3e3; | |
| } | |
| .card__item--river:last-child:after { | |
| display: none; | |
| } | |
| .card__container { | |
| display: block; | |
| } | |
| .card__thumbnail-wrapper { | |
| background: #ccc; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .card__thumbnail-wrapper::before { | |
| display: block; | |
| line-height: 0; /* needed for certain browsers */ | |
| } | |
| .card__thumbnail-wrapper-fb::before { | |
| content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E"); | |
| } | |
| .card__thumbnail-wrapper-hero::before { | |
| content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 5'%3E%3C/svg%3E"); | |
| } | |
| .card__thumbnail-wrapper-main::before { | |
| content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 3'%3E%3C/svg%3E"); | |
| } | |
| .card__thumbnail-wrapper-square::before { | |
| content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E"); | |
| } | |
| .card__thumbnail-wrapper-promo::before { | |
| content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 4'%3E%3C/svg%3E"); | |
| } | |
| .card__thumbnail-wrapper::after { | |
| background: #f00; | |
| color: #fff; | |
| padding: 0 2px; | |
| position: absolute; | |
| top: 0; | |
| } | |
| .card__thumbnail-wrapper-fb::after { | |
| content: '16:9'; | |
| } | |
| .card__thumbnail-wrapper-hero::after { | |
| content: '16:5'; | |
| } | |
| .card__thumbnail-wrapper-main::after { | |
| content: '4:3'; | |
| } | |
| .card__thumbnail-wrapper-square::after { | |
| content: '1:1'; | |
| } | |
| .card__thumbnail-wrapper-promo::after { | |
| content: '3:4'; | |
| } | |
| .card__thumbnail { | |
| position: absolute; | |
| top: 0; | |
| width: 100%; | |
| } | |
| .card__details { | |
| padding: 24px 0; | |
| } | |
| .card__details p { | |
| margin: 0; | |
| padding: 0; | |
| overflow : hidden; | |
| text-overflow: ellipsis; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 2; | |
| -webkit-box-orient: vertical; | |
| } | |
| @media (min-width: 500px) { | |
| .card__container { | |
| align-items: flex-start; | |
| display: flex; | |
| } | |
| .card__item--river:after { | |
| margin-top: 24px; | |
| } | |
| .card__thumbnail-wrapper { | |
| flex: 0 0 auto; | |
| width: 50%; | |
| } | |
| .card__details { | |
| flex: 0 0 auto; | |
| width: 50%; | |
| padding: 0 0 0 24px; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment