A Pen by Hailjake

Thumbnail
This awesome code was written by hailjake, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright hailjake ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Hailjake</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="row">
  <div class="xs-12 md-5 lg-6">lg column 1</div>
  <div class="xs-12 md-7 lg-6">lg column 2</div>
</div>

<div class="row">
  <div class="md-6">med column 1</div>
  <div class="md-6">med column 2</div>
</div>

<div class="row">
  <div class="sm-6">sm column 1</div>
  <div class="sm-6">sm column 2</div>
</div>

<div class="row">
  <div class="xs-6">xs column 1</div>
  <div class="xs-6">xs column 2</div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/hailjake/a-pen-by-hailjake-MGvdpx */
body,
html {
  height: 100%;
}
.xs-12,
body {
  width: 100%;
}
html {
  box-sizing: border-box;
  overflow-x: hidden;
}
*,
:after,
:before {
  box-sizing: inherit;
}
.row {
  margin-left: -15px;
  margin-right: -15px;
  overflow: auto;
}
.columnsMixin {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  float: left;
}
[class^="xs-"] {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  float: left;
}
.xs-12 {
  width: 100%;
}
.xs-11 {
  width: 91.66666667%;
}
.xs-10 {
  width: 83.33333333%;
}
.xs-9 {
  width: 75%;
}
.xs-8 {
  width: 66.66666667%;
}
.xs-7 {
  width: 58.33333333%;
}
.xs-6 {
  width: 50%;
}
.xs-5 {
  width: 41.66666667%;
}
.xs-4 {
  width: 33.33333333%;
}
.xs-3 {
  width: 25%;
}
.xs-2 {
  width: 16.66666667%;
}
.xs-1 {
  width: 8.33333333%;
}
.xs-offset-12 {
  margin-left: 100%;
}
.xs-offset-11 {
  margin-left: 91.66666667%;
}
.xs-offset-10 {
  margin-left: 83.33333333%;
}
.xs-offset-9 {
  margin-left: 75%;
}
.xs-offset-8 {
  margin-left: 66.66666667%;
}
.xs-offset-7 {
  margin-left: 58.33333333%;
}
.xs-offset-6 {
  margin-left: 50%;
}
.xs-offset-5 {
  margin-left: 41.66666667%;
}
.xs-offset-4 {
  margin-left: 33.33333333%;
}
.xs-offset-3 {
  margin-left: 25%;
}
.xs-offset-2 {
  margin-left: 16.66666667%;
}
.xs-offset-1 {
  margin-left: 8.33333333%;
}
.xs-offset-0 {
  margin-left: 0%;
}
[class^="sm-"] {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  float: left;
}
@media (min-width: 768px) {
  .sm-12 {
    width: 100%;
  }
  .sm-11 {
    width: 91.66666667%;
  }
  .sm-10 {
    width: 83.33333333%;
  }
  .sm-9 {
    width: 75%;
  }
  .sm-8 {
    width: 66.66666667%;
  }
  .sm-7 {
    width: 58.33333333%;
  }
  .sm-6 {
    width: 50%;
  }
  .sm-5 {
    width: 41.66666667%;
  }
  .sm-4 {
    width: 33.33333333%;
  }
  .sm-3 {
    width: 25%;
  }
  .sm-2 {
    width: 16.66666667%;
  }
  .sm-1 {
    width: 8.33333333%;
  }
  .sm-offset-12 {
    margin-left: 100%;
  }
  .sm-offset-11 {
    margin-left: 91.66666667%;
  }
  .sm-offset-10 {
    margin-left: 83.33333333%;
  }
  .sm-offset-9 {
    margin-left: 75%;
  }
  .sm-offset-8 {
    margin-left: 66.66666667%;
  }
  .sm-offset-7 {
    margin-left: 58.33333333%;
  }
  .sm-offset-6 {
    margin-left: 50%;
  }
  .sm-offset-5 {
    margin-left: 41.66666667%;
  }
  .sm-offset-4 {
    margin-left: 33.33333333%;
  }
  .sm-offset-3 {
    margin-left: 25%;
  }
  .sm-offset-2 {
    margin-left: 16.66666667%;
  }
  .sm-offset-1 {
    margin-left: 8.33333333%;
  }
  .sm-offset-0 {
    margin-left: 0%;
  }
}
[class^="md-"] {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  float: left;
}
@media (min-width: 1024px) {
  .md-12 {
    width: 100%;
  }
  .md-11 {
    width: 91.66666667%;
  }
  .md-10 {
    width: 83.33333333%;
  }
  .md-9 {
    width: 75%;
  }
  .md-8 {
    width: 66.66666667%;
  }
  .md-7 {
    width: 58.33333333%;
  }
  .md-6 {
    width: 50%;
  }
  .md-5 {
    width: 41.66666667%;
  }
  .md-4 {
    width: 33.33333333%;
  }
  .md-3 {
    width: 25%;
  }
  .md-2 {
    width: 16.66666667%;
  }
  .md-1 {
    width: 8.33333333%;
  }
  .md-offset-12 {
    margin-left: 100%;
  }
  .md-offset-11 {
    margin-left: 91.66666667%;
  }
  .md-offset-10 {
    margin-left: 83.33333333%;
  }
  .md-offset-9 {
    margin-left: 75%;
  }
  .md-offset-8 {
    margin-left: 66.66666667%;
  }
  .md-offset-7 {
    margin-left: 58.33333333%;
  }
  .md-offset-6 {
    margin-left: 50%;
  }
  .md-offset-5 {
    margin-left: 41.66666667%;
  }
  .md-offset-4 {
    margin-left: 33.33333333%;
  }
  .md-offset-3 {
    margin-left: 25%;
  }
  .md-offset-2 {
    margin-left: 16.66666667%;
  }
  .md-offset-1 {
    margin-left: 8.33333333%;
  }
  .md-offset-0 {
    margin-left: 0%;
  }
}
[class^="lg-"] {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  float: left;
}
@media (min-width: 1366px) {
  .lg-12 {
    width: 100%;
  }
  .lg-11 {
    width: 91.66666667%;
  }
  .lg-10 {
    width: 83.33333333%;
  }
  .lg-9 {
    width: 75%;
  }
  .lg-8 {
    width: 66.66666667%;
  }
  .lg-7 {
    width: 58.33333333%;
  }
  .lg-6 {
    width: 50%;
  }
  .lg-5 {
    width: 41.66666667%;
  }
  .lg-4 {
    width: 33.33333333%;
  }
  .lg-3 {
    width: 25%;
  }
  .lg-2 {
    width: 16.66666667%;
  }
  .lg-1 {
    width: 8.33333333%;
  }
  .lg-offset-12 {
    margin-left: 100%;
  }
  .lg-offset-11 {
    margin-left: 91.66666667%;
  }
  .lg-offset-10 {
    margin-left: 83.33333333%;
  }
  .lg-offset-9 {
    margin-left: 75%;
  }
  .lg-offset-8 {
    margin-left: 66.66666667%;
  }
  .lg-offset-7 {
    margin-left: 58.33333333%;
  }
  .lg-offset-6 {
    margin-left: 50%;
  }
  .lg-offset-5 {
    margin-left: 41.66666667%;
  }
  .lg-offset-4 {
    margin-left: 33.33333333%;
  }
  .lg-offset-3 {
    margin-left: 25%;
  }
  .lg-offset-2 {
    margin-left: 16.66666667%;
  }
  .lg-offset-1 {
    margin-left: 8.33333333%;
  }
  .lg-offset-0 {
    margin-left: 0%;
  }
}
[class^="xl-"] {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  float: left;
}
@media (min-width: 1600px) {
  .xl-12 {
    width: 100%;
  }
  .xl-11 {
    width: 91.66666667%;
  }
  .xl-10 {
    width: 83.33333333%;
  }
  .xl-9 {
    width: 75%;
  }
  .xl-8 {
    width: 66.66666667%;
  }
  .xl-7 {
    width: 58.33333333%;
  }
  .xl-6 {
    width: 50%;
  }
  .xl-5 {
    width: 41.66666667%;
  }
  .xl-4 {
    width: 33.33333333%;
  }
  .xl-3 {
    width: 25%;
  }
  .xl-2 {
    width: 16.66666667%;
  }
  .xl-1 {
    width: 8.33333333%;
  }
  .xl-offset-12 {
    margin-left: 100%;
  }
  .xl-offset-11 {
    margin-left: 91.66666667%;
  }
  .xl-offset-10 {
    margin-left: 83.33333333%;
  }
  .xl-offset-9 {
    margin-left: 75%;
  }
  .xl-offset-8 {
    margin-left: 66.66666667%;
  }
  .xl-offset-7 {
    margin-left: 58.33333333%;
  }
  .xl-offset-6 {
    margin-left: 50%;
  }
  .xl-offset-5 {
    margin-left: 41.66666667%;
  }
  .xl-offset-4 {
    margin-left: 33.33333333%;
  }
  .xl-offset-3 {
    margin-left: 25%;
  }
  .xl-offset-2 {
    margin-left: 16.66666667%;
  }
  .xl-offset-1 {
    margin-left: 8.33333333%;
  }
  .xl-offset-0 {
    margin-left: 0%;
  }
}
.hidden {
  display: none !important;
}
@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hidden-sm {
    display: none !important;
  }
}
@media (min-width: 1024px) and (max-width: 1365px) {
  .hidden-md {
    display: none !important;
  }
}
@media (min-width: 1366px) and (max-width: 1599px) {
  .hidden-lg {
    display: none !important;
  }
}
@media (min-width: 1600px) {
  .hidden-xl {
    display: none !important;
  }
}

Comments