<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <ul class="cards"> <li class="cards__item"> <div class="card"> <div class="card__image card__image--fence"></div> <div class="card__content"> <div class="card__title">Flex</div> <p class="card__text">This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. Default is 0 1 auto. </p> <button class="btn btn--block card__btn">Button</button> </div> </div> </li> <li class="cards__item"> <div class="card"> <div class="card__image card__image--river"></div> <div class="card__content"> <div class="card__title">Flex Grow</div> <p class="card__text">This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.</p> <button class="btn btn--block card__btn">Button</button> </div> </div> </li> <li class="cards__item"> <div class="card"> <div class="card__image card__image--record"></div> <div class="card__content"> <div class="card__title">Flex Shrink</div> <p class="card__text">This defines the ability for a flex item to shrink if necessary. Negative numbers are invalid.</p> <button class="btn btn--block card__btn">Button</button> </div> </div> </li> <li class="cards__item"> <div class="card"> <div class="card__image card__image--flowers"></div> <div class="card__content"> <div class="card__title">Flex Basis</div> <p class="card__text">This defines the default size of an element before the remaining space is distributed. It can be a length (e.g. 20%, 5rem, etc.) or a keyword. The auto keyword means "look at my width or height property."</p> <button class="btn btn--block card__btn">Button</button> </div> </div> </li> </ul>

*, *::before, *::after { box-sizing: border-box; } html { background-color: #f0f0f0; } body { color: #999999; font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-weight: 400; letter-spacing: 0; padding: 1rem; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-font-feature-settings: "liga" on; } img { height: auto; max-width: 100%; vertical-align: middle; } .btn { background-color: white; border: 1px solid #cccccc; color: #696969; padding: 0.5rem; text-transform: lowercase; } .btn--block { display: block; width: 100%; } .cards { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .cards__item { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 1rem; } @media (min-width: 40rem) { .cards__item { width: 50%; } } @media (min-width: 56rem) { .cards__item { width: 33.3333%; } } .card { background-color: white; border-radius: 0.25rem; box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; overflow: hidden; } .card:hover .card__image { -webkit-filter: contrast(100%); filter: contrast(100%); } .card__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 1rem; } .card__image { background-position: center center; background-repeat: no-repeat; background-size: cover; border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; -webkit-filter: contrast(70%); filter: contrast(70%); overflow: hidden; position: relative; -webkit-transition: -webkit-filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91); transition: -webkit-filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91); transition: filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91); transition: filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91), -webkit-filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91); } .card__image::before { content: ""; display: block; padding-top: 56.25%; } @media (min-width: 40rem) { .card__image::before { padding-top: 66.6%; } } .card__image--flowers { background-image: url(https://unsplash.it/800/600?image=82); } .card__image--river { background-image: url(https://unsplash.it/800/600?image=11); } .card__image--record { background-image: url(https://unsplash.it/800/600?image=39); } .card__image--fence { background-image: url(https://unsplash.it/800/600?image=59); } .card__title { color: #696969; font-size: 1.25rem; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; } .card__text { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; font-size: 0.875rem; line-height: 1.5; margin-bottom: 1.25rem; }