Aka all the junk that I eat when I pull my all-nighters.
A Pen by idahopotato1 on CodePen.
Created
April 3, 2021 21:41
-
-
Save idahopotato1/3ba88da1054bca267ae2fa59438a8895 to your computer and use it in GitHub Desktop.
CSS Grid: Coupons!
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
| main | |
| .name | |
| .logo | |
| - for (var i=0; i<56; i++) | |
| span.cookie-bit | |
| h1 Techfood. | |
| h5.headline Always stocked for your all-nighters and hackathons. | |
| p Offers end June 14 | |
| .callout | |
| h4 Save 20% off all items. | |
| h5 Exclusive for tech field enthusiasts! | |
| .sale-items | |
| .item | |
| .quote | |
| h2 From healthy food to complete junk. | |
| small Don't code with an empty stomach. | |
| .item | |
| .item__image | |
| img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/fruit.png") | |
| .item__text | |
| strong Dried Mangoes, Dried Apricots | |
| small 200g | |
| .item__price | |
| .discount.half-off | |
| p Buy 1 Get 2 | |
| h3 50 | |
| h4 % | |
| h5 off | |
| p.tiny Equal or lesser value | |
| p.small With card | |
| .item | |
| .item__image | |
| img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/chips.png") | |
| .item__text | |
| strong Pringles | |
| small 147g | |
| strong Cheetos | |
| small 226g | |
| strong Doritos | |
| small 198g | |
| .item__price | |
| .discount.default | |
| h4 | |
| span $ | |
| | 2.49 | |
| p.small with card | |
| .discount.more-saves | |
| p.small.divider Also save | |
| h5 | |
| span $ | |
| | 1 off | |
| p.tiny With retweet of store's latest tweet | |
| .item | |
| .item__image | |
| img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/tea.png") | |
| .item__text | |
| strong Twinings Tea | |
| small 20 per pack | |
| .item__price | |
| .discount.default | |
| h4 | |
| span $ | |
| | 9.99 | |
| p.small with card | |
| .item | |
| .item__image | |
| img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/nuts.png") | |
| .item__text | |
| strong Nature's Wonders Nuts | |
| small 220g-330g | |
| .item__price | |
| .discount.half-off | |
| p Buy 1 Get 1 | |
| h3 50 | |
| h4 % | |
| h5 off | |
| p.tiny Equal or lesser value | |
| .discount.more-saves | |
| p.small.divider Also save | |
| p.tiny When you show us your GitHub profile | |
| .item | |
| .item__image | |
| img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/chobani.png") | |
| .item__text | |
| strong Chobani Greek Style Yogurt | |
| small 170g | |
| .item__price | |
| .discount.default | |
| h4 | |
| span $ | |
| | 1.65 | |
| p.small with card | |
| .item | |
| .item__image | |
| img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/chocs.png") | |
| .item__text | |
| strong M&M's, Snickers, Kinder Bueno | |
| small 170-220g | |
| .item__price | |
| .discount.default | |
| h4 | |
| span $ | |
| | 5.99 | |
| p.small with card | |
| .coupons | |
| .item.horizontal | |
| .item__image | |
| img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/wine.png") | |
| .item__text | |
| strong Wolf Blass Yellow Label, Red or White | |
| small 750ml | |
| .item__price | |
| .discount.default | |
| h4 | |
| span $ | |
| | 21.99 | |
| p.small with card | |
| .item.alternate | |
| .item__image | |
| img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/bjs.png") | |
| .item__text | |
| strong Ben & Jerry's | |
| small 453ml-478ml | |
| .item__price | |
| .discount.half-off | |
| p Buy 1 Get 1 | |
| h3 50 | |
| h4 % | |
| h5 off | |
| p.tiny Equal or lesser value | |
| .discount.more-saves | |
| p.small.divider Also save | |
| h5 | |
| span $ | |
| | 2 off | |
| p.tiny With any social media follow | |
| .item | |
| .item__image | |
| img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/ramen.png") | |
| .item__text | |
| strong Samyang Ramen | |
| small 135g-140g | |
| .item__price | |
| .discount.bulk | |
| h4 3 | |
| p.small for | |
| h4 $ | |
| h3 9 | |
| .sale-items-2 | |
| .quote | |
| p For your caffeine needs. | |
| small Remember to drink responsibly. | |
| .item.horizontal | |
| .item__image | |
| img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/coffee.png") | |
| .item__text | |
| strong Starbucks Frappuccino Chilled Coffee Drink | |
| small 281ml | |
| .item__price | |
| .discount.bulk | |
| h4 2 | |
| p.small for | |
| h4 $ | |
| h3 8 | |
| .item | |
| .item__image | |
| img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/coke.png") | |
| .item__text | |
| strong Coca Cola Classic, Sprite Lemon-Lime | |
| small 12 x 320ml | |
| .item__price | |
| .discount.bulk | |
| h4 2 | |
| p.small for | |
| h4 $ | |
| h3 8 | |
| .item | |
| .item__image | |
| img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/monster.png") | |
| .item__text | |
| strong Monster Energy Drink | |
| small 500ml | |
| .item__price | |
| .discount.bulk | |
| h4 4 | |
| p.small for | |
| h4 $ | |
| h3 4 | |
| aside.context | |
| .explanation | |
| | Part of the | |
| a(href="https://codepen.io/collection/DQvYpQ/" target="_blank") CSS Grid collection! | |
| footer | |
| a(href="https://twitter.com/meowlivia_" target="_blank") | |
| i.icon-social-twitter.icons | |
| a(href="https://github.com/oliviale" target="_blank") | |
| i.icon-social-github.icons | |
| a(href="https://dribbble.com/oliviale" target="_blank") | |
| i.icon-social-dribbble.icons |
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
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> |
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
| body { | |
| background: #fff; | |
| color: #222; | |
| font-family: "Quicksand", sans-serif; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| strong { | |
| font-weight: 700; | |
| } | |
| aside.context { | |
| text-align: center; | |
| color: #333; | |
| line-height: 1.7; | |
| a { | |
| text-decoration: none; | |
| color: #333; | |
| padding: 3px 0; | |
| border-bottom: 1px dashed; | |
| &:hover { | |
| border-bottom: 1px solid; | |
| } | |
| } | |
| .explanation { | |
| max-width: 700px; | |
| margin: 6em auto 0; | |
| } | |
| } | |
| footer { | |
| text-align: center; | |
| margin: 4em auto; | |
| width: 100%; | |
| a { | |
| text-decoration: none; | |
| display: inline-block; | |
| width: 45px; | |
| height: 45px; | |
| border-radius: 50%; | |
| background: transparent; | |
| border: 1px dashed #333; | |
| color: #333; | |
| margin: 5px; | |
| &:hover { | |
| background: rgba(255, 255, 255, 0.1); | |
| } | |
| .icons { | |
| margin-top: 12px; | |
| display: inline-block; | |
| font-size: 20px; | |
| } | |
| } | |
| } | |
| $main-color: #4aafbc; | |
| $red-color: #c13458; | |
| $yellow-color: #ffd33c; | |
| main { | |
| width: 990px; | |
| display: grid; | |
| grid: max-content 1fr 25% / 76% 24%; | |
| background: #f9f9f9; | |
| margin: 4em auto; | |
| padding: 15px 15px 22px; | |
| box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.15), 1px 1px 10px rgba(0, 0, 0, 0.1); | |
| } | |
| .name { | |
| display: grid; | |
| grid: repeat(2, max-content) / max-content 1fr max-content; | |
| h1 { | |
| font: 900 100px/1 "Montserrat", sans-serif; | |
| text-transform: uppercase; | |
| grid-column: 2 / 4; | |
| letter-spacing: -1px; | |
| } | |
| p { | |
| font: 900 16px "Montserrat", sans-serif; | |
| text-transform: uppercase; | |
| margin: 0 0 10px; | |
| grid-row: 2; | |
| grid-column: 1 / 3; | |
| } | |
| h5.headline { | |
| font-weight: 700; | |
| } | |
| } | |
| .callout { | |
| margin-left: 10px; | |
| color: #fff; | |
| text-align: center; | |
| h4 { | |
| background: $red-color; | |
| padding: 15px; | |
| font: 700 24px/1 Montserrat; | |
| text-transform: uppercase; | |
| } | |
| h5 { | |
| background: $main-color; | |
| padding: 10px; | |
| font-size: 12px; | |
| font-weight: 700; | |
| } | |
| } | |
| .sale-items { | |
| display: grid; | |
| grid: repeat(2, 1fr) / 25% 8% 1fr 1fr 8% 25%; | |
| grid-auto-flow: dense; | |
| grid-row-gap: 12px; | |
| border: 6px solid $main-color; | |
| .item { | |
| padding: 0 8px; | |
| margin: 0 0 8px; | |
| &:nth-child(1) { | |
| grid-column: 3 / 5; | |
| background: $main-color; | |
| margin: 0; | |
| } | |
| &:nth-child(2) { | |
| grid-column: 1 / 3; | |
| } | |
| &:nth-child(3) { | |
| grid-column: 5 / 7; | |
| border-bottom: 0.5px solid #ddd; | |
| } | |
| &:nth-child(4) { | |
| border-right: 0.5px solid #ddd; | |
| } | |
| &:nth-child(5) { | |
| grid-column: span 2; | |
| border-right: 0.5px solid #ddd; | |
| } | |
| &:nth-child(6) { | |
| grid-column: span 2; | |
| border-right: 0.5px solid #ddd; | |
| } | |
| &:nth-child(2), | |
| &:nth-child(3) { | |
| border-bottom: 0.5px solid #ddd; | |
| margin: 0 8px; | |
| padding: 8px 0; | |
| } | |
| } | |
| .quote { | |
| grid-column: 1 / span 2; | |
| grid-row: 1 / span 3; | |
| display: grid; | |
| align-items: center; | |
| justify-content: center; | |
| color: #fff; | |
| padding: 10px; | |
| h2 { | |
| font: 900 34px/1 Montserrat; | |
| text-transform: uppercase; | |
| small { | |
| margin-top: 10px; | |
| display: block; | |
| text-transform: none; | |
| font: 16px/1.1 "Quicksand"; | |
| } | |
| } | |
| } | |
| } | |
| .coupons { | |
| display: grid; | |
| max-height: 100%; | |
| grid: repeat(3, 33.3333%) / 100%; | |
| padding: 0 0 15px 10px; | |
| .item { | |
| border: 3px dashed #111; | |
| &:nth-child(n + 2) { | |
| border-top: 0; | |
| } | |
| &:nth-child(1) { | |
| .item__text { | |
| margin: 0 0 4px 4px; | |
| } | |
| } | |
| &:nth-child(3) { | |
| .item__price { | |
| margin-right: 15px; | |
| } | |
| .item__text { | |
| margin-bottom: 5px; | |
| } | |
| } | |
| } | |
| } | |
| .sale-items-2 { | |
| grid-column: span 2; | |
| display: grid; | |
| grid: 100% / 20% repeat(3, 1fr); | |
| border: 6px solid $main-color; | |
| margin-top: -6px; | |
| .item { | |
| margin: 8px 0; | |
| &:nth-child(2), | |
| &:nth-child(3) { | |
| border-right: 0.5px solid #ddd; | |
| } | |
| &:nth-child(4) img { | |
| width: 70%; | |
| margin-top: 0; | |
| } | |
| &__price { | |
| justify-self: center; | |
| } | |
| &__text { | |
| margin-left: 12px; | |
| margin-bottom: 5px; | |
| } | |
| } | |
| .quote { | |
| background: $main-color; | |
| color: #fff; | |
| padding: 8px; | |
| p { | |
| font: 900 32px/1"Montserrat", sans-serif; | |
| text-transform: uppercase; | |
| margin: 5px 0 8px; | |
| } | |
| } | |
| } | |
| .discount { | |
| text-align: center; | |
| width: 95px; | |
| font-family: "Montserrat"; | |
| text-transform: uppercase; | |
| padding: 6px 8px; | |
| line-height: 1; | |
| h3 { | |
| font: 900 40px/1 "Montserrat"; | |
| } | |
| h4 { | |
| font: 900 22px/1 "Montserrat"; | |
| margin: 3px 0; | |
| } | |
| h5 { | |
| font: 900 20px/1 "Montserrat"; | |
| letter-spacing: 1px; | |
| margin: 3px 0; | |
| } | |
| h4, | |
| h5 { | |
| span { | |
| font-size: 60%; | |
| font-weight: 700; | |
| display: inline-block; | |
| margin-right: 4px; | |
| vertical-align: middle; | |
| } | |
| } | |
| p { | |
| font: 700 12px "Montserrat"; | |
| &.small { | |
| font-size: 70%; | |
| margin: 3px 0; | |
| } | |
| &.tiny { | |
| font-size: 7px; | |
| font-weight: 500; | |
| text-transform: none; | |
| margin: 1px 0; | |
| } | |
| } | |
| &.default { | |
| background: #f9f9f9; | |
| border: 3px solid $yellow-color; | |
| } | |
| &.half-off { | |
| background: $red-color; | |
| color: #fff; | |
| display: grid; | |
| grid: repeat(4, min-content) / min-content 1fr; | |
| grid-auto-flow: dense; | |
| align-items: center; | |
| h3 { | |
| &:nth-of-type(1) { | |
| grid-row: span 2; | |
| } | |
| } | |
| h5 { | |
| font-size: 13px; | |
| margin-top: -4px; | |
| } | |
| p { | |
| grid-column: span 2; | |
| } | |
| } | |
| &.bulk { | |
| display: grid; | |
| grid: repeat(3, min-content) / repeat(3, 1fr); | |
| grid-auto-flow: dense; | |
| p { | |
| &.small { | |
| grid-row: 2 / 3; | |
| grid-column: 1; | |
| margin-top: -3px; | |
| margin-right: 6px; | |
| } | |
| } | |
| h3 { | |
| grid-row: 1 / span 3; | |
| font-size: 60px; | |
| margin-top: -4px; | |
| } | |
| h4:nth-child(1) { | |
| font-size: 35px; | |
| margin-right: 6px; | |
| } | |
| h4:nth-child(3) { | |
| grid-row: 1 / span 2; | |
| font-size: 35px; | |
| font-weight: 700; | |
| margin-right: 4px; | |
| } | |
| } | |
| &.more-saves { | |
| background: $yellow-color; | |
| padding: 3px 2px 5px; | |
| } | |
| } | |
| .item { | |
| display: grid; | |
| grid: 80px 1fr / 1fr 1fr; | |
| grid-auto-flow: dense; | |
| padding: 8px; | |
| &__image { | |
| grid-column: span 2; | |
| overflow: visible; | |
| text-align: center; | |
| img { | |
| width: 80%; | |
| margin: auto; | |
| margin-top: 5px; | |
| } | |
| } | |
| &__text { | |
| padding-right: 8px; | |
| align-self: flex-end; | |
| font-size: 13px; | |
| line-height: 1.1; | |
| strong { | |
| vertical-align: middle; | |
| display: inline-block; | |
| margin-right: 5px; | |
| } | |
| small { | |
| color: #999; | |
| font-size: 10px; | |
| vertical-align: middle; | |
| } | |
| } | |
| &__price { | |
| align-self: end; | |
| justify-self: end; | |
| } | |
| &.horizontal { | |
| grid: 1fr max-content / 1fr 1fr; | |
| .item__image { | |
| grid-row: 1 / 3; | |
| grid-column-start: 1; | |
| } | |
| .item__text { | |
| grid-row: 1 / 2; | |
| grid-column-start: 2; | |
| } | |
| .item__price { | |
| grid-row: 2 / 3; | |
| grid-column-start: 2; | |
| } | |
| } | |
| &.alternate { | |
| .item__image { | |
| grid-column: 1 / 2; | |
| } | |
| .item__text { | |
| grid-column: 1 / 2; | |
| } | |
| .item__price { | |
| grid-row: 1 / 3; | |
| grid-column: 2 / 3; | |
| } | |
| } | |
| } | |
| .logo { | |
| display: grid; | |
| margin: 10px 15px 0 0; | |
| grid: repeat(7, 11px) / repeat(8, 11px); | |
| grid-auto-flow: dense; | |
| .cookie-bit { | |
| background: #d1a37c; | |
| &:nth-child(5n + 18) { | |
| background: #7b572f; | |
| } | |
| &:nth-child(-n + 12) { | |
| background: #f9f9f9; | |
| } | |
| &:nth-child(3) { | |
| grid-column: 7; | |
| } | |
| &:nth-child(4) { | |
| grid-column: 8; | |
| } | |
| &:nth-child(5) { | |
| grid-column: 1; | |
| grid-row: 2; | |
| } | |
| &:nth-child(6) { | |
| grid-column: 8; | |
| grid-row: 2; | |
| } | |
| &:nth-child(7) { | |
| grid-column: 1; | |
| grid-row: 6; | |
| } | |
| &:nth-child(8) { | |
| grid-column: 1; | |
| grid-row: 7; | |
| } | |
| &:nth-child(9) { | |
| grid-column: 2; | |
| grid-row: 7; | |
| } | |
| &:nth-child(10) { | |
| grid-column: 8; | |
| grid-row: 6; | |
| } | |
| &:nth-child(11) { | |
| grid-column: 7; | |
| grid-row: 7; | |
| } | |
| &:nth-child(12) { | |
| grid-column: 8; | |
| grid-row: 7; | |
| } | |
| &:nth-last-child(-n + 7) { | |
| background: #ba8046; | |
| } | |
| &:nth-last-child(7) { | |
| grid-column: 6; | |
| grid-row: 1; | |
| } | |
| &:nth-last-child(6) { | |
| grid-column: 7; | |
| grid-row: 2; | |
| } | |
| &:nth-last-child(5) { | |
| grid-column: 8; | |
| grid-row: 3; | |
| } | |
| &:nth-last-child(4) { | |
| grid-column: 8; | |
| grid-row: 4; | |
| } | |
| &:nth-last-child(3) { | |
| grid-column: 8; | |
| grid-row: 5; | |
| } | |
| &:nth-last-child(2) { | |
| grid-column: 7; | |
| grid-row: 6; | |
| } | |
| } | |
| } |
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
| <link href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment