Skip to content

Instantly share code, notes, and snippets.

@lexyking

lexyking/index.html

Created April 1, 2019 23:24
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save lexyking/ef5292d23fd3f83a7a3a8f422b3bb88b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save lexyking/ef5292d23fd3f83a7a3a8f422b3bb88b to your computer and use it in GitHub Desktop.
Download ZIP
Cake today // source https://jsbin.com/xoqejic
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Cake today</title>
<style id="jsbin-css">
/* Base styles */
body {
background-color: #ddd;
font-family: Arial;
}
img {
width: 100%;
}
.small {
font-size: 12px;
}
.image-style {
padding: 5px;
border-radius: 5px;
}
/* Header */
.header {
background-color: white;
height: 80px;
margin-bottom: 20px;
}
.header__logo {
height: 100%;
width: 200px;
}
.header__logo img {
background-color: #aaa;
}
/* Nav */
.navigation {
background-color: white;
margin-bottom: 20px;
}
.navigation__list {
display: flex;
padding-top: 10px;
padding-bottom: 10px;
margin: 0;
padding: 0;
}
.navigation__list-item {
display: inline-flex;
background-color: #aaa;
height: 100%;
width: 100px;
padding: 5px 10px;
margin: 5px 10px;
}
.navigation__list-item:hover {
background-color: #333;
}
.navigation__list-item-link {
text-decoration: none;
color: white;
width: 100%;
text-align: center;
}
/* Main */
.main-content {
/* display: flex; */
}
.company-info {
background-color: white;
margin-bottom: 20px;
}
.company-info__greeting {
padding: 10px;
}
.company-info__greeting h6 {
margin: 10px 0;
line-height: 1.4;
}
/* Carousel */
.carousel {
background-color: white;
margin-bottom: 20px;
padding: 10px;
}
.carousel__main-image {
height: 70%;
/* width: 100%; */
background-color: #aaa;
margin-bottom: 10px;
overflow: hidden;
}
.carousel__thumbnail-wrapper {
height: calc(30% - 10px);
max-height: 70px;
/* width: 100%; */
margin-bottom: 10px;
display: flex;
}
.carousel__thumbnail {
height: 100%;
/* width: 25%; */
border: 1px solid #aaa;
}
.carousel__thumbnail img {
background-color: #aaa;
}
/* Highlights */
.highlights {
background-color: white;
margin-bottom: 20px;
padding: 0;
/* display: flex;
flex-wrap: wrap;
flex-direction: row; */
}
.highlights__thumbnail-wrapper {
height: 100%;
width: 100%;
border: 2px solid red;
}
.highlights__thumbnail-image{
border: 2px solid blue;
}
.highlights__thumbnail-image img {
background-color: #aaa;
border: 1px solid #aaa;
}
/* GRID */
/* Custom grid */
* {
box-sizing: border-box;
/* background: red; */
}
/* Containers */
.container {
max-width: 100%; /* default from breakpoint 0, until another breakpoint overrides it */
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 576px) {
.container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
/* Wrap each bundle of content blocks in a row */
/* For example, 4 blocks that 'live' together in a row, and then get stacked on mobile */
/* they should be together inside a wrapper with the class 'row' */
.row {
display: flex;
flex-wrap: wrap;
/* margin-right: -15px;
margin-left: -15px; */
}
/* Default styles for all col-classes */
.xs-col-1, .xs-col-2, .xs-col-3, .xs-col-4, .xs-col-5, .xs-col-6, .xs-col-7, .xs-col-8, .xs-col-9, .xs-col-10, .xs-col-11, .xs-col-12,
.sm-col-1, .sm-col-2, .sm-col-3, .sm-col-4, .sm-col-5, .sm-col-6, .sm-col-7, .sm-col-8, .sm-col-9, .sm-col-10, .sm-col-11, .sm-col-12,
.md-col-1, .md-col-2, .md-col-3, .md-col-4, .md-col-5, .md-col-6, .md-col-7, .md-col-8, .md-col-9, .md-col-10, .md-col-11, .md-col-12,
.lg-col-1, .lg-col-2, .lg-col-3, .lg-col-4, .lg-col-5, .lg-col-6, .lg-col-7, .lg-col-8, .lg-col-9, .lg-col-10, .lg-col-11, .lg-col-12,
.xl-col-1, .xl-col-2, .xl-col-3, .xl-col-4, .xl-col-5, .xl-col-6, .xl-col-7, .xl-col-8, .xl-col-9, .xl-col-10, .xl-col-11, .xl-col-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
/* INDIVIDUAL BREAKPOINTS */
/* Extra Small */
@media (min-width: 320px) {
.xs-col-1 {
width: 8.333333%;
}
.xs-col-2 {
width: 16.666666%;
}
.xs-col-3 {
width: 25%;
}
.xs-col-4 {
width: 33.333333%;
}
.xs-col-5 {
width: 41.666666%;
}
.xs-col-6 {
width: 50%;
}
.xs-col-7 {
width: 58.333%;
}
.xs-col-8 {
width: 66.666666%;
}
.xs-col-9 {
width: 75%;
}
.xs-col-10 {
width: 83.333333%;
}
.xs-col-11 {
width: 91.666677%;
}
.xs-col-12 {
width: 100%;
}
}
/* Small */
@media (min-width: 576px) {
.sm-col-1 {
width: 8.333333%;
}
.sm-col-2 {
width: 16.666666%;
}
.sm-col-3 {
width: 25%;
}
.sm-col-4 {
width: 33.333333%;
}
.sm-col-5 {
width: 41.666666%;
}
.sm-col-6 {
width: 50%;
}
.sm-col-7 {
width: 58.333%;
}
.sm-col-8 {
width: 66.666666%;
}
.sm-col-9 {
width: 75%;
}
.sm-col-10 {
width: 83.333333%;
}
.sm-col-11 {
width: 91.666677%;
}
.sm-col-12 {
width: 100%;
}
}
/* Medium */
@media (min-width: 768px) {
.md-col-1 {
width: 8.333333%;
}
.md-col-2 {
width: 16.666666%;
}
.md-col-3 {
width: 25%;
}
.md-col-4 {
width: 33.333333%;
}
.md-col-5 {
width: 41.666666%;
}
.md-col-6 {
width: 50%;
}
.md-col-7 {
width: 58.333%;
}
.md-col-8 {
width: 66.666666%;
}
.md-col-9 {
width: 75%;
}
.md-col-10 {
width: 83.333333%;
}
.md-col-11 {
width: 91.666677%;
}
.md-col-12 {
width: 100%;
}
}
/* Large */
@media (min-width: 992px) {
.lg-col-1 {
width: 8.333333%;
}
.lg-col-2 {
width: 16.666666%;
}
.lg-col-3 {
width: 25%;
}
.lg-col-4 {
width: 33.333333%;
}
.lg-col-5 {
width: 41.666666%;
}
.lg-col-6 {
width: 50%;
}
.lg-col-7 {
width: 58.333%;
}
.lg-col-8 {
width: 66.666666%;
}
.lg-col-9 {
width: 75%;
}
.lg-col-10 {
width: 83.333333%;
}
.lg-col-11 {
width: 91.666677%;
}
.lg-col-12 {
width: 100%;
}
}
/* Extra Large */
@media (min-width: 1200px) {
.xl-col-1 {
width: 8.333333%;
}
.xl-col-2 {
width: 16.666666%;
}
.xl-col-3 {
width: 25%;
}
.xl-col-4 {
width: 33.333333%;
}
.xl-col-5 {
width: 41.666666%;
}
.xl-col-6 {
width: 50%;
}
.xl-col-7 {
width: 58.333%;
}
.xl-col-8 {
width: 66.666666%;
}
.xl-col-9 {
width: 75%;
}
.xl-col-10 {
width: 83.333333%;
}
.xl-col-11 {
width: 91.666677%;
}
.xl-col-12 {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<header class="header">
<div class="header__logo">
<img src="/" alt="">
</div>
</header>
<nav class="navigation">
<ul class="navigation__list">
<li class="navigation__list-item">
<a class="navigation__list-item-link" href="">Link</a>
</li>
<li class="navigation__list-item">
<a class="navigation__list-item-link" href="">Link</a>
</li>
<li class="navigation__list-item">
<a class="navigation__list-item-link" href="">Link</a>
</li>
<li class="navigation__list-item">
<a class="navigation__list-item-link" href="">Link</a>
</li>
<li class="navigation__list-item">
<a class="navigation__list-item-link" href="">Link</a>
</li>
</ul>
</nav>
<main>
<section class="main-content row">
<section class="company-info xs-col-12 md-col-4">
<div class="company-info__greeting">
<h3>Hello there, welcome to Cake Today</h3>
<h6>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus dolor, eum perferendis, nesciunt natus itaque magni sapiente dolorem, quae modi molestiae tempora blanditiis exercitationem repellendus aspernatur impedit corrupti expedita veniam?</h6>
</div>
</section>
<section class="carousel xs-col-12 md-col-8">
<div class="image-style">
<div class="carousel__main-image xs-col-12">
<img src="https://i.postimg.cc/wMH9n352/anastasia-dulgier-1155210-unsplash.jpg" alt="">
</div>
</div>
<div class="carousel__thumbnail-wrapper xs-col-12">
<div class="carousel__thumbnail xs-col-4">
<img src="https://i.postimg.cc/wMH9n352/anastasia-dulgier-1155210-unsplash.jpg" alt="">
</div>
<div class="carousel__thumbnail xs-col-4">
<img src="/" alt="">
</div>
<div class="carousel__thumbnail xs-col-4">
<img src="/" alt="">
</div>
<div class="carousel__thumbnail xs-col-4">
<img src="/" alt="">
</div>
</div>
</section>
</section>
<section class="highlights">
<div class="highlights__thumbnail-wrapper row">
<div class="highlights__thumbnail xs-col-12 md-col-6 lg-col-3">
<div class="highlights__thumbnail-image xs-col-12">
<img src="https://staticmedia.fauchon.com/media/catalog/product/cache/2/image_a/600x/9df78eab33525d08d6e5fb8d27136e95/1/0/1014427-2.jpg" alt="">
</div>
<div class="highlights__thumbnail-caption">
<p class="small">Image description</p>
</div>
</div>
<div class="highlights__thumbnail xs-col-12 md-col-6 lg-col-3">
<div class="highlights__thumbnail-image xs-col-12">
<img src="https://staticmedia.fauchon.com/media/catalog/product/cache/2/image_a/600x/9df78eab33525d08d6e5fb8d27136e95/1/0/1014427-2.jpg" alt="">
</div>
<div class="highlights__thumbnail-caption">
<p class="small">Image description</p>
</div>
</div>
<div class="highlights__thumbnail xs-col-12 md-col-6 lg-col-3">
<div class="highlights__thumbnail-image xs-col-12">
<img src="https://staticmedia.fauchon.com/media/catalog/product/cache/2/image_a/600x/9df78eab33525d08d6e5fb8d27136e95/1/0/1014427-2.jpg" alt="">
</div>
<div class="highlights__thumbnail-caption">
<p class="small">Image description</p>
</div>
</div>
<div class="highlights__thumbnail xs-col-12 md-col-6 lg-col-3">
<div class="highlights__thumbnail-image xs-col-12">
<img src="https://staticmedia.fauchon.com/media/catalog/product/cache/2/image_a/600x/9df78eab33525d08d6e5fb8d27136e95/1/0/1014427-2.jpg" alt="">
</div>
<div class="highlights__thumbnail-caption">
<p class="small">Image description</p>
</div>
</div>
</div>
</section>
</main>
<footer class="footer">
<nav class="navigation">
<ul class="navigation__list">
<li class="navigation__list-item">
<a class="navigation__list-item-link" href="">Link</a>
</li>
<li class="navigation__list-item">
<a class="navigation__list-item-link" href="">Link</a>
</li>
<li class="navigation__list-item">
<a class="navigation__list-item-link" href="">Link</a>
</li>
<li class="navigation__list-item">
<a class="navigation__list-item-link" href="">Link</a>
</li>
<li class="navigation__list-item">
<a class="navigation__list-item-link" href="">Link</a>
</li>
</ul>
</nav>
</footer>
</div>
<script id="jsbin-source-css" type="text/css">/* Base styles */
body {
background-color: #ddd;
font-family: Arial;
}
img {
width: 100%;
}
.small {
font-size: 12px;
}
.image-style {
padding: 5px;
border-radius: 5px;
}
/* Header */
.header {
background-color: white;
height: 80px;
margin-bottom: 20px;
}
.header__logo {
height: 100%;
width: 200px;
}
.header__logo img {
background-color: #aaa;
}
/* Nav */
.navigation {
background-color: white;
margin-bottom: 20px;
}
.navigation__list {
display: flex;
padding-top: 10px;
padding-bottom: 10px;
margin: 0;
padding: 0;
}
.navigation__list-item {
display: inline-flex;
background-color: #aaa;
height: 100%;
width: 100px;
padding: 5px 10px;
margin: 5px 10px;
}
.navigation__list-item:hover {
background-color: #333;
}
.navigation__list-item-link {
text-decoration: none;
color: white;
width: 100%;
text-align: center;
}
/* Main */
.main-content {
/* display: flex; */
}
.company-info {
background-color: white;
margin-bottom: 20px;
}
.company-info__greeting {
padding: 10px;
}
.company-info__greeting h6 {
margin: 10px 0;
line-height: 1.4;
}
/* Carousel */
.carousel {
background-color: white;
margin-bottom: 20px;
padding: 10px;
}
.carousel__main-image {
height: 70%;
/* width: 100%; */
background-color: #aaa;
margin-bottom: 10px;
overflow: hidden;
}
.carousel__thumbnail-wrapper {
height: calc(30% - 10px);
max-height: 70px;
/* width: 100%; */
margin-bottom: 10px;
display: flex;
}
.carousel__thumbnail {
height: 100%;
/* width: 25%; */
border: 1px solid #aaa;
}
.carousel__thumbnail img {
background-color: #aaa;
}
/* Highlights */
.highlights {
background-color: white;
margin-bottom: 20px;
padding: 0;
/* display: flex;
flex-wrap: wrap;
flex-direction: row; */
}
.highlights__thumbnail-wrapper {
height: 100%;
width: 100%;
border: 2px solid red;
}
.highlights__thumbnail-image{
border: 2px solid blue;
}
.highlights__thumbnail-image img {
background-color: #aaa;
border: 1px solid #aaa;
}
/* GRID */
/* Custom grid */
* {
box-sizing: border-box;
/* background: red; */
}
/* Containers */
.container {
max-width: 100%; /* default from breakpoint 0, until another breakpoint overrides it */
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 576px) {
.container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
/* Wrap each bundle of content blocks in a row */
/* For example, 4 blocks that 'live' together in a row, and then get stacked on mobile */
/* they should be together inside a wrapper with the class 'row' */
.row {
display: flex;
flex-wrap: wrap;
/* margin-right: -15px;
margin-left: -15px; */
}
/* Default styles for all col-classes */
.xs-col-1, .xs-col-2, .xs-col-3, .xs-col-4, .xs-col-5, .xs-col-6, .xs-col-7, .xs-col-8, .xs-col-9, .xs-col-10, .xs-col-11, .xs-col-12,
.sm-col-1, .sm-col-2, .sm-col-3, .sm-col-4, .sm-col-5, .sm-col-6, .sm-col-7, .sm-col-8, .sm-col-9, .sm-col-10, .sm-col-11, .sm-col-12,
.md-col-1, .md-col-2, .md-col-3, .md-col-4, .md-col-5, .md-col-6, .md-col-7, .md-col-8, .md-col-9, .md-col-10, .md-col-11, .md-col-12,
.lg-col-1, .lg-col-2, .lg-col-3, .lg-col-4, .lg-col-5, .lg-col-6, .lg-col-7, .lg-col-8, .lg-col-9, .lg-col-10, .lg-col-11, .lg-col-12,
.xl-col-1, .xl-col-2, .xl-col-3, .xl-col-4, .xl-col-5, .xl-col-6, .xl-col-7, .xl-col-8, .xl-col-9, .xl-col-10, .xl-col-11, .xl-col-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
/* INDIVIDUAL BREAKPOINTS */
/* Extra Small */
@media (min-width: 320px) {
.xs-col-1 {
width: 8.333333%;
}
.xs-col-2 {
width: 16.666666%;
}
.xs-col-3 {
width: 25%;
}
.xs-col-4 {
width: 33.333333%;
}
.xs-col-5 {
width: 41.666666%;
}
.xs-col-6 {
width: 50%;
}
.xs-col-7 {
width: 58.333%;
}
.xs-col-8 {
width: 66.666666%;
}
.xs-col-9 {
width: 75%;
}
.xs-col-10 {
width: 83.333333%;
}
.xs-col-11 {
width: 91.666677%;
}
.xs-col-12 {
width: 100%;
}
}
/* Small */
@media (min-width: 576px) {
.sm-col-1 {
width: 8.333333%;
}
.sm-col-2 {
width: 16.666666%;
}
.sm-col-3 {
width: 25%;
}
.sm-col-4 {
width: 33.333333%;
}
.sm-col-5 {
width: 41.666666%;
}
.sm-col-6 {
width: 50%;
}
.sm-col-7 {
width: 58.333%;
}
.sm-col-8 {
width: 66.666666%;
}
.sm-col-9 {
width: 75%;
}
.sm-col-10 {
width: 83.333333%;
}
.sm-col-11 {
width: 91.666677%;
}
.sm-col-12 {
width: 100%;
}
}
/* Medium */
@media (min-width: 768px) {
.md-col-1 {
width: 8.333333%;
}
.md-col-2 {
width: 16.666666%;
}
.md-col-3 {
width: 25%;
}
.md-col-4 {
width: 33.333333%;
}
.md-col-5 {
width: 41.666666%;
}
.md-col-6 {
width: 50%;
}
.md-col-7 {
width: 58.333%;
}
.md-col-8 {
width: 66.666666%;
}
.md-col-9 {
width: 75%;
}
.md-col-10 {
width: 83.333333%;
}
.md-col-11 {
width: 91.666677%;
}
.md-col-12 {
width: 100%;
}
}
/* Large */
@media (min-width: 992px) {
.lg-col-1 {
width: 8.333333%;
}
.lg-col-2 {
width: 16.666666%;
}
.lg-col-3 {
width: 25%;
}
.lg-col-4 {
width: 33.333333%;
}
.lg-col-5 {
width: 41.666666%;
}
.lg-col-6 {
width: 50%;
}
.lg-col-7 {
width: 58.333%;
}
.lg-col-8 {
width: 66.666666%;
}
.lg-col-9 {
width: 75%;
}
.lg-col-10 {
width: 83.333333%;
}
.lg-col-11 {
width: 91.666677%;
}
.lg-col-12 {
width: 100%;
}
}
/* Extra Large */
@media (min-width: 1200px) {
.xl-col-1 {
width: 8.333333%;
}
.xl-col-2 {
width: 16.666666%;
}
.xl-col-3 {
width: 25%;
}
.xl-col-4 {
width: 33.333333%;
}
.xl-col-5 {
width: 41.666666%;
}
.xl-col-6 {
width: 50%;
}
.xl-col-7 {
width: 58.333%;
}
.xl-col-8 {
width: 66.666666%;
}
.xl-col-9 {
width: 75%;
}
.xl-col-10 {
width: 83.333333%;
}
.xl-col-11 {
width: 91.666677%;
}
.xl-col-12 {
width: 100%;
}
}</script>
</body>
</html>
Raw
jsbin.xoqejic.css
/* Base styles */
body {
background-color: #ddd;
font-family: Arial;
}
img {
width: 100%;
}
.small {
font-size: 12px;
}
.image-style {
padding: 5px;
border-radius: 5px;
}
/* Header */
.header {
background-color: white;
height: 80px;
margin-bottom: 20px;
}
.header__logo {
height: 100%;
width: 200px;
}
.header__logo img {
background-color: #aaa;
}
/* Nav */
.navigation {
background-color: white;
margin-bottom: 20px;
}
.navigation__list {
display: flex;
padding-top: 10px;
padding-bottom: 10px;
margin: 0;
padding: 0;
}
.navigation__list-item {
display: inline-flex;
background-color: #aaa;
height: 100%;
width: 100px;
padding: 5px 10px;
margin: 5px 10px;
}
.navigation__list-item:hover {
background-color: #333;
}
.navigation__list-item-link {
text-decoration: none;
color: white;
width: 100%;
text-align: center;
}
/* Main */
.main-content {
/* display: flex; */
}
.company-info {
background-color: white;
margin-bottom: 20px;
}
.company-info__greeting {
padding: 10px;
}
.company-info__greeting h6 {
margin: 10px 0;
line-height: 1.4;
}
/* Carousel */
.carousel {
background-color: white;
margin-bottom: 20px;
padding: 10px;
}
.carousel__main-image {
height: 70%;
/* width: 100%; */
background-color: #aaa;
margin-bottom: 10px;
overflow: hidden;
}
.carousel__thumbnail-wrapper {
height: calc(30% - 10px);
max-height: 70px;
/* width: 100%; */
margin-bottom: 10px;
display: flex;
}
.carousel__thumbnail {
height: 100%;
/* width: 25%; */
border: 1px solid #aaa;
}
.carousel__thumbnail img {
background-color: #aaa;
}
/* Highlights */
.highlights {
background-color: white;
margin-bottom: 20px;
padding: 0;
/* display: flex;
flex-wrap: wrap;
flex-direction: row; */
}
.highlights__thumbnail-wrapper {
height: 100%;
width: 100%;
border: 2px solid red;
}
.highlights__thumbnail-image{
border: 2px solid blue;
}
.highlights__thumbnail-image img {
background-color: #aaa;
border: 1px solid #aaa;
}
/* GRID */
/* Custom grid */
* {
box-sizing: border-box;
/* background: red; */
}
/* Containers */
.container {
max-width: 100%; /* default from breakpoint 0, until another breakpoint overrides it */
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 576px) {
.container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
/* Wrap each bundle of content blocks in a row */
/* For example, 4 blocks that 'live' together in a row, and then get stacked on mobile */
/* they should be together inside a wrapper with the class 'row' */
.row {
display: flex;
flex-wrap: wrap;
/* margin-right: -15px;
margin-left: -15px; */
}
/* Default styles for all col-classes */
.xs-col-1, .xs-col-2, .xs-col-3, .xs-col-4, .xs-col-5, .xs-col-6, .xs-col-7, .xs-col-8, .xs-col-9, .xs-col-10, .xs-col-11, .xs-col-12,
.sm-col-1, .sm-col-2, .sm-col-3, .sm-col-4, .sm-col-5, .sm-col-6, .sm-col-7, .sm-col-8, .sm-col-9, .sm-col-10, .sm-col-11, .sm-col-12,
.md-col-1, .md-col-2, .md-col-3, .md-col-4, .md-col-5, .md-col-6, .md-col-7, .md-col-8, .md-col-9, .md-col-10, .md-col-11, .md-col-12,
.lg-col-1, .lg-col-2, .lg-col-3, .lg-col-4, .lg-col-5, .lg-col-6, .lg-col-7, .lg-col-8, .lg-col-9, .lg-col-10, .lg-col-11, .lg-col-12,
.xl-col-1, .xl-col-2, .xl-col-3, .xl-col-4, .xl-col-5, .xl-col-6, .xl-col-7, .xl-col-8, .xl-col-9, .xl-col-10, .xl-col-11, .xl-col-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
/* INDIVIDUAL BREAKPOINTS */
/* Extra Small */
@media (min-width: 320px) {
.xs-col-1 {
width: 8.333333%;
}
.xs-col-2 {
width: 16.666666%;
}
.xs-col-3 {
width: 25%;
}
.xs-col-4 {
width: 33.333333%;
}
.xs-col-5 {
width: 41.666666%;
}
.xs-col-6 {
width: 50%;
}
.xs-col-7 {
width: 58.333%;
}
.xs-col-8 {
width: 66.666666%;
}
.xs-col-9 {
width: 75%;
}
.xs-col-10 {
width: 83.333333%;
}
.xs-col-11 {
width: 91.666677%;
}
.xs-col-12 {
width: 100%;
}
}
/* Small */
@media (min-width: 576px) {
.sm-col-1 {
width: 8.333333%;
}
.sm-col-2 {
width: 16.666666%;
}
.sm-col-3 {
width: 25%;
}
.sm-col-4 {
width: 33.333333%;
}
.sm-col-5 {
width: 41.666666%;
}
.sm-col-6 {
width: 50%;
}
.sm-col-7 {
width: 58.333%;
}
.sm-col-8 {
width: 66.666666%;
}
.sm-col-9 {
width: 75%;
}
.sm-col-10 {
width: 83.333333%;
}
.sm-col-11 {
width: 91.666677%;
}
.sm-col-12 {
width: 100%;
}
}
/* Medium */
@media (min-width: 768px) {
.md-col-1 {
width: 8.333333%;
}
.md-col-2 {
width: 16.666666%;
}
.md-col-3 {
width: 25%;
}
.md-col-4 {
width: 33.333333%;
}
.md-col-5 {
width: 41.666666%;
}
.md-col-6 {
width: 50%;
}
.md-col-7 {
width: 58.333%;
}
.md-col-8 {
width: 66.666666%;
}
.md-col-9 {
width: 75%;
}
.md-col-10 {
width: 83.333333%;
}
.md-col-11 {
width: 91.666677%;
}
.md-col-12 {
width: 100%;
}
}
/* Large */
@media (min-width: 992px) {
.lg-col-1 {
width: 8.333333%;
}
.lg-col-2 {
width: 16.666666%;
}
.lg-col-3 {
width: 25%;
}
.lg-col-4 {
width: 33.333333%;
}
.lg-col-5 {
width: 41.666666%;
}
.lg-col-6 {
width: 50%;
}
.lg-col-7 {
width: 58.333%;
}
.lg-col-8 {
width: 66.666666%;
}
.lg-col-9 {
width: 75%;
}
.lg-col-10 {
width: 83.333333%;
}
.lg-col-11 {
width: 91.666677%;
}
.lg-col-12 {
width: 100%;
}
}
/* Extra Large */
@media (min-width: 1200px) {
.xl-col-1 {
width: 8.333333%;
}
.xl-col-2 {
width: 16.666666%;
}
.xl-col-3 {
width: 25%;
}
.xl-col-4 {
width: 33.333333%;
}
.xl-col-5 {
width: 41.666666%;
}
.xl-col-6 {
width: 50%;
}
.xl-col-7 {
width: 58.333%;
}
.xl-col-8 {
width: 66.666666%;
}
.xl-col-9 {
width: 75%;
}
.xl-col-10 {
width: 83.333333%;
}
.xl-col-11 {
width: 91.666677%;
}
.xl-col-12 {
width: 100%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment