It's a card layout, but shaped like pills! Inspired by Dr. Mario.
A Pen by Kumpon Sotsukpiam on CodePen.
Created
November 22, 2020 05:15
-
-
Save Kumpon-Sotsukpiam/cd547f812ae167921a6b73fa310c470b to your computer and use it in GitHub Desktop.
Dr. Mario pill cards (v2)
This file contains hidden or 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
| .container | |
| .card-left | |
| .card-image | |
| %img(src="https://images.pexels.com/photos/220072/pexels-photo-220072.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260") | |
| .card-text | |
| %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. | |
| .card-top | |
| .card-image | |
| %img(src="https://images.pexels.com/photos/1011334/pexels-photo-1011334.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260") | |
| .card-text | |
| %p Quisque cursus, metus vitae pharetra auctor. | |
| .card-right | |
| .card-image | |
| %img(src="https://images.pexels.com/photos/35828/soap-bubble-colorful-ball-soapy-water.jpg?auto=compress&cs=tinysrgb&h=750&w=1260") | |
| .card-text | |
| %p Ut eu diam at pede suscipit sodales. | |
| .card-right | |
| .card-image | |
| %img(src="https://images.pexels.com/photos/701855/pexels-photo-701855.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260") | |
| .card-text | |
| %p Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. | |
| .card-top | |
| .card-image | |
| %img(src="https://images.pexels.com/photos/668295/pexels-photo-668295.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260") | |
| .card-text | |
| %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. | |
| .card-bottom | |
| .card-image | |
| %img(src="https://images.pexels.com/photos/63238/pexels-photo-63238.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260") | |
| .card-text | |
| %p Ut eu diam at pede suscipit sodales. | |
| .card-left | |
| .card-image | |
| %img(src="https://images.pexels.com/photos/997725/pexels-photo-997725.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260") | |
| .card-text | |
| %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. | |
| .card-bottom | |
| .card-image | |
| %img(src="https://images.pexels.com/photos/585581/pexels-photo-585581.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260") | |
| .card-text | |
| %p Quisque cursus, metus vitae pharetra auctor. | |
| .card-right | |
| .card-image | |
| %img(src="https://images.pexels.com/photos/532561/pexels-photo-532561.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260") | |
| .card-text | |
| %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. | |
| .card-top | |
| .card-image | |
| %img(src="https://images.pexels.com/photos/279376/pexels-photo-279376.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260") | |
| .card-text | |
| %p Integer lacinia sollicitudin massa. Cras metus. | |
| .card-left | |
| .card-image | |
| %img(src="https://images.pexels.com/photos/701855/pexels-photo-701855.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260") | |
| .card-text | |
| %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. | |
| .card-left | |
| .card-image | |
| %img(src="https://images.pexels.com/photos/262577/pexels-photo-262577.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260") | |
| .card-text | |
| %p Ut eu diam at pede suscipit sodales. | |
| .card-top | |
| .card-image | |
| %img(src="https://images.pexels.com/photos/978342/pexels-photo-978342.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260") | |
| .card-text | |
| %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. | |
| .card-bottom | |
| .card-image | |
| %img(src="https://images.pexels.com/photos/305831/pexels-photo-305831.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260") | |
| .card-text | |
| %p Quisque cursus, metus vitae pharetra auctor. | |
| .card-top | |
| .card-image | |
| %img(src="https://images.pexels.com/photos/355728/pexels-photo-355728.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260") | |
| .card-text | |
| %p Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. | |
| .card-right | |
| .card-image | |
| %img(src="https://images.pexels.com/photos/775907/pexels-photo-775907.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260") | |
| .card-text | |
| %p Ut eu diam at pede suscipit sodales. |
This file contains hidden or 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
| $boxSpacing: 23px; | |
| $gridSize: 200px; | |
| $cornerRadius: $gridSize/2.1; | |
| body { | |
| margin: $boxSpacing; | |
| font-family: "Trebuchet MS", sans-serif; | |
| font-size: 15.5px; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| .container { | |
| width: 100%; | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax($gridSize, $gridSize)); | |
| grid-auto-rows: $gridSize; | |
| grid-auto-flow: row dense; | |
| grid-gap: $boxSpacing; | |
| justify-content: center; | |
| } | |
| .card-top, .card-right, .card-bottom, .card-left { | |
| display: flex; | |
| flex-wrap: nowrap; | |
| height: 100%; | |
| width: 100%; | |
| border-radius: $cornerRadius; | |
| box-shadow: 0px 3px 9px 1px rgba(0, 10, 20, 0.2); | |
| } | |
| .card-top { | |
| flex-direction: column; | |
| grid-column: auto / span 1; | |
| grid-row: auto / span 2; | |
| } | |
| .card-right { | |
| flex-direction: row-reverse; | |
| grid-column: auto / span 2; | |
| grid-row: auto / span 1; | |
| } | |
| .card-bottom { | |
| flex-direction: column-reverse; | |
| grid-column: auto / span 1; | |
| grid-row: auto / span 2; | |
| } | |
| .card-left { | |
| flex-direction: row; | |
| grid-column: auto / span 2; | |
| grid-row: auto / span 1; | |
| } | |
| .card-image { | |
| display: flex; | |
| } | |
| .card-top .card-image, .card-bottom .card-image { | |
| height: 50%; | |
| width: 100%; | |
| } | |
| .card-left .card-image, .card-right .card-image { | |
| height: 100%; | |
| width: 50%; | |
| } | |
| .card-image img { | |
| width: 100%; | |
| object-fit: cover; | |
| } | |
| .card-top img { | |
| border-radius: $cornerRadius $cornerRadius 0 0; | |
| } | |
| .card-right img { | |
| border-radius: 0 $cornerRadius $cornerRadius 0; | |
| } | |
| .card-bottom img { | |
| border-radius: 0 0 $cornerRadius $cornerRadius; | |
| } | |
| .card-left img { | |
| border-radius: $cornerRadius 0 0 $cornerRadius; | |
| } | |
| .card-text { | |
| align-self: center; | |
| padding: $boxSpacing; | |
| } | |
| .card-top .card-text { | |
| height: auto; | |
| width: auto; | |
| padding-bottom: $boxSpacing*1.6; | |
| } | |
| .card-right .card-text { | |
| height: auto; | |
| width: 50%; | |
| padding-left: $boxSpacing*1.6; | |
| } | |
| .card-bottom .card-text { | |
| height: auto; | |
| width: auto; | |
| padding-top: $boxSpacing*1.6; | |
| } | |
| .card-left .card-text { | |
| height: auto; | |
| width: 50%; | |
| padding-right: $boxSpacing*1.6; | |
| } | |
| .card-text p { | |
| margin: 0; | |
| line-height: 1.35em; | |
| color: #334455; | |
| } | |
| @media (max-width: 500px) { | |
| .card-top { | |
| flex-direction: row; | |
| grid-column: auto / span 2; | |
| grid-row: auto / span 1; | |
| } | |
| .card-bottom { | |
| flex-direction: row-reverse; | |
| grid-column: auto / span 2; | |
| grid-row: auto / span 1; | |
| } | |
| .card-top .card-image, .card-bottom .card-image { | |
| height: 100%; | |
| width: 50%; | |
| } | |
| .card-top img { | |
| border-radius: $cornerRadius 0 0 $cornerRadius; | |
| } | |
| .card-bottom img { | |
| border-radius: 0 $cornerRadius $cornerRadius 0; | |
| } | |
| .card-top .card-text { | |
| height: auto; | |
| width: 50%; | |
| padding-right: $boxSpacing*1.6; | |
| } | |
| .card-bottom .card-text { | |
| height: auto; | |
| width: 50%; | |
| padding-left: $boxSpacing*1.6; | |
| } | |
| } | |
| @media (max-width: 400px) { | |
| .card-image { | |
| width: 38% !important; | |
| } | |
| .card-text { | |
| width: 62% !important; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment