Skip to content

Instantly share code, notes, and snippets.

@myasseen

myasseen/SassMeister-input-HTML.html

Created February 16, 2016 08:28
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save myasseen/ae6e383c9f26622ddb22 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. myasseen created this gist Feb 16, 2016.
    157 changes: 157 additions & 0 deletions SassMeister-input-HTML.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,157 @@
    <section class="tariffs">
    <div class="container">
    <div class="row">
    <div class="h2 text-center">Top tariffs</div>
    <div class="tariff alfa col-xs-12 col-sm-4 col-sm-push-4">
    <div class="panel panel-default">
    <div class="h3">Alfa</div>
    <div class="price">
    <div class="first">
    <span>$169</span> per first page
    </div>
    <div class="second">
    <span>$99</span> per first page
    </div>
    </div>
    <div class="description">
    Highest quality HTML5 / CSS3<br>
    compatible with all modern browsers and devices.
    </div>
    <ul class="options">
    <li>Retina display ready</li>
    <li>Microdata Schema.org</li>
    <li>Twitter Bootstrap</li>
    <li>WCAG 2.0 / Section 508</li>
    <li>IE12 compatibility</li>
    </ul>
    <a href="#" class="btn btn-danger btn-lg">Order</a>
    </div>
    </div>
    <div class="tariff col-xs-12 col-sm-4 col-sm-pull-4">
    <div class="panel panel-default">
    <div class="h3">Omega</div>
    <div class="price">
    <div class="first">
    <span>$149</span> per first page
    </div>
    <div class="second">
    <span>$84</span> per first page
    </div>
    </div>
    <div class="description">
    Highest quality HTML5 / CSS3<br>
    compatible with all modern browsers and devices.
    </div>
    <ul class="options">
    <li>Retina display ready</li>
    <li>Microdata Schema.org</li>
    <li>Twitter Bootstrap</li>
    </ul>
    <a href="#" class="btn btn-warning btn-lg">Order</a>
    </div>
    </div>
    <div class="tariff col-xs-12 col-sm-4">
    <div class="panel panel-default">
    <div class="h3">Epsilon</div>
    <div class="price">
    <div class="first">
    <span>$129</span> per first page
    </div>
    <div class="second">
    <span>$69</span> per first page
    </div>
    </div>
    <div class="description">
    Highest quality HTML5 / CSS3<br>
    compatible with all modern browsers and devices.
    </div>
    <ul class="options">
    <li>Twitter Bootstrap</li>
    <li>WCAG 2.0 / Section 508</li>
    <li>IE12 compatibility</li>
    </ul>
    <a href="#" class="btn btn-warning btn-lg">Order</a>
    </div>
    </div>
    </div>
    </div>
    </section>

    <section class="tariffs tariffs-full">
    <div class="container">
    <div class="row">
    <div class="h2 text-center">Bottom tariffs</div>
    <div class="tariff alfa">
    <div class="panel panel-default">
    <div class="h3">Alfa</div>
    <div class="price">
    <div class="first">
    <span>$169</span> per first page
    </div>
    <div class="second">
    <span>$99</span> per first page
    </div>
    </div>
    <div class="description">
    Highest quality HTML5 / CSS3<br>
    compatible with all modern browsers and devices.
    </div>
    <ul class="options">
    <li>Retina display ready</li>
    <li>Microdata Schema.org</li>
    <li>Twitter Bootstrap</li>
    <li>WCAG 2.0 / Section 508</li>
    <li>IE12 compatibility</li>
    </ul>
    <a href="#" class="btn btn-danger btn-lg">Order</a>
    </div>
    </div>
    <div class="tariff omega">
    <div class="panel panel-default">
    <div class="h3">Omega</div>
    <div class="price">
    <div class="first">
    <span>$149</span> per first page
    </div>
    <div class="second">
    <span>$84</span> per first page
    </div>
    </div>
    <div class="description">
    Highest quality HTML5 / CSS3<br>
    compatible with all modern browsers and devices.
    </div>
    <ul class="options">
    <li>Retina display ready</li>
    <li>Microdata Schema.org</li>
    <li>Twitter Bootstrap</li>
    </ul>
    <a href="#" class="btn btn-warning btn-lg">Order</a>
    </div>
    </div>
    <div class="tariff epsilon">
    <div class="panel panel-default">
    <div class="h3">Epsilon</div>
    <div class="price">
    <div class="first">
    <span>$129</span> per first page
    </div>
    <div class="second">
    <span>$69</span> per first page
    </div>
    </div>
    <div class="description">
    Highest quality HTML5 / CSS3<br>
    compatible with all modern browsers and devices.
    </div>
    <ul class="options">
    <li>Twitter Bootstrap</li>
    <li>WCAG 2.0 / Section 508</li>
    <li>IE12 compatibility</li>
    </ul>
    <a href="#" class="btn btn-warning btn-lg">Order</a>
    </div>
    </div>
    </div>
    </div>
    </section>
    175 changes: 175 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,175 @@
    // ----
    // Sass (v3.4.12)
    // Compass (v1.0.3)
    // Bootstrap Sass (v3.3.3)
    // Bourbon (v4.2.0)
    // ----

    @import "bourbon/bourbon";
    @import "bootstrap";

    // shadow
    %z-depth-2 {
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }

    // main sections
    section {
    padding: 20px 0;
    &:nth-child(odd) {
    background: #ccc;
    }
    }

    // List Reset
    %listreset {
    margin: 0;
    padding: 0;
    list-style: none;
    }

    // tariff
    .tariff {
    .panel {
    padding: 20px 0;
    text-align: center;
    background: #efefef;
    border-radius: 0;
    border: 0;
    border-top: 4px solid $brand-primary;
    @extend %z-depth-2;
    }

    .h3 {
    margin: 0;
    font-size: 20px;
    text-transform: uppercase;
    }

    .price {
    margin-top: 1em;
    font-size: 16px;
    span {
    font-weight: bold;
    color: #333;
    }
    }

    .description {
    padding: 20px;
    font-size: 14px;
    }

    .options {
    @extend %listreset;
    text-align: left;
    box-shadow: 0 3px 3px -1px rgba(black, .1);
    margin-bottom: 2em;
    li {
    padding: 8px 20px;
    box-shadow: inset 0 3px 3px -1px rgba(black, .1);
    }
    }
    }


    // Top tariffs
    .tariffs {
    text-align: center;
    .h2 {
    margin-bottom: 1.3em;
    }
    .tariff {
    &.alfa {
    z-index: 1;
    margin-top: -1.5em;

    .panel {
    border-top-width: 8px;
    background: #fff;

    z-index: 399;
    }
    }
    }
    }

    // Bottom tariffs
    .tariffs-full {
    .row {
    @include make-row(0); // remove left and right margins
    }
    .tariff {
    @include make-xs-column(12, 0); // remove left and right paddings
    @include make-sm-column(4, 0); // remove left and right paddings

    .panel {
    box-shadow: none;
    }

    &.alfa {
    @include make-sm-column-push(4);

    .panel {
    @extend %z-depth-2;
    }
    }

    &.omega {
    @include make-sm-column-pull(4);
    }
    }
    }


    // form Bootswatch
    @mixin btn($class,$bg){
    .btn-#{$class} {
    @include radial-gradient(circle, $bg 80%, darken($bg, 6%) 81%);
    background-size: 200%;
    background-position: 50%;
    transition: background-size 2s;

    &:hover {
    background-size: 100%;
    border-color: darken($bg, 6%);
    }

    &:active {
    background-color: darken($bg, 6%);
    @include radial-gradient(circle, darken($bg, 6%) 10%, $bg 11%);
    background-size: 1000%;
    box-shadow: 2px 2px 2px rgba(0,0,0,.3);
    }
    }
    }

    @include btn(default,$btn-default-bg);
    @include btn(primary,$btn-primary-bg);
    @include btn(success,$btn-success-bg);
    @include btn(info,$btn-info-bg);
    @include btn(warning,$btn-warning-bg);
    @include btn(danger,$btn-danger-bg);

    .btn {
    text-transform: uppercase;
    border-right: none;
    border-bottom: none;
    box-shadow: 1px 1px 2px rgba(0,0,0,.3);
    transition: background 0.2s ease;
    border-radius: 0;

    &-link {
    box-shadow: none;

    &:hover,
    &:focus {
    color: $brand-primary;
    text-decoration: none;
    }
    }

    &-default.disabled {
    border: 1px solid $btn-default-border;
    }
    }
    7,385 changes: 7,385 additions & 0 deletions SassMeister-output.css
    View file
    7,385 additions, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
    157 changes: 157 additions & 0 deletions SassMeister-rendered.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,157 @@
    <section class="tariffs">
    <div class="container">
    <div class="row">
    <div class="h2 text-center">Top tariffs</div>
    <div class="tariff alfa col-xs-12 col-sm-4 col-sm-push-4">
    <div class="panel panel-default">
    <div class="h3">Alfa</div>
    <div class="price">
    <div class="first">
    <span>$169</span> per first page
    </div>
    <div class="second">
    <span>$99</span> per first page
    </div>
    </div>
    <div class="description">
    Highest quality HTML5 / CSS3<br>
    compatible with all modern browsers and devices.
    </div>
    <ul class="options">
    <li>Retina display ready</li>
    <li>Microdata Schema.org</li>
    <li>Twitter Bootstrap</li>
    <li>WCAG 2.0 / Section 508</li>
    <li>IE12 compatibility</li>
    </ul>
    <a href="#" class="btn btn-danger btn-lg">Order</a>
    </div>
    </div>
    <div class="tariff col-xs-12 col-sm-4 col-sm-pull-4">
    <div class="panel panel-default">
    <div class="h3">Omega</div>
    <div class="price">
    <div class="first">
    <span>$149</span> per first page
    </div>
    <div class="second">
    <span>$84</span> per first page
    </div>
    </div>
    <div class="description">
    Highest quality HTML5 / CSS3<br>
    compatible with all modern browsers and devices.
    </div>
    <ul class="options">
    <li>Retina display ready</li>
    <li>Microdata Schema.org</li>
    <li>Twitter Bootstrap</li>
    </ul>
    <a href="#" class="btn btn-warning btn-lg">Order</a>
    </div>
    </div>
    <div class="tariff col-xs-12 col-sm-4">
    <div class="panel panel-default">
    <div class="h3">Epsilon</div>
    <div class="price">
    <div class="first">
    <span>$129</span> per first page
    </div>
    <div class="second">
    <span>$69</span> per first page
    </div>
    </div>
    <div class="description">
    Highest quality HTML5 / CSS3<br>
    compatible with all modern browsers and devices.
    </div>
    <ul class="options">
    <li>Twitter Bootstrap</li>
    <li>WCAG 2.0 / Section 508</li>
    <li>IE12 compatibility</li>
    </ul>
    <a href="#" class="btn btn-warning btn-lg">Order</a>
    </div>
    </div>
    </div>
    </div>
    </section>

    <section class="tariffs tariffs-full">
    <div class="container">
    <div class="row">
    <div class="h2 text-center">Bottom tariffs</div>
    <div class="tariff alfa">
    <div class="panel panel-default">
    <div class="h3">Alfa</div>
    <div class="price">
    <div class="first">
    <span>$169</span> per first page
    </div>
    <div class="second">
    <span>$99</span> per first page
    </div>
    </div>
    <div class="description">
    Highest quality HTML5 / CSS3<br>
    compatible with all modern browsers and devices.
    </div>
    <ul class="options">
    <li>Retina display ready</li>
    <li>Microdata Schema.org</li>
    <li>Twitter Bootstrap</li>
    <li>WCAG 2.0 / Section 508</li>
    <li>IE12 compatibility</li>
    </ul>
    <a href="#" class="btn btn-danger btn-lg">Order</a>
    </div>
    </div>
    <div class="tariff omega">
    <div class="panel panel-default">
    <div class="h3">Omega</div>
    <div class="price">
    <div class="first">
    <span>$149</span> per first page
    </div>
    <div class="second">
    <span>$84</span> per first page
    </div>
    </div>
    <div class="description">
    Highest quality HTML5 / CSS3<br>
    compatible with all modern browsers and devices.
    </div>
    <ul class="options">
    <li>Retina display ready</li>
    <li>Microdata Schema.org</li>
    <li>Twitter Bootstrap</li>
    </ul>
    <a href="#" class="btn btn-warning btn-lg">Order</a>
    </div>
    </div>
    <div class="tariff epsilon">
    <div class="panel panel-default">
    <div class="h3">Epsilon</div>
    <div class="price">
    <div class="first">
    <span>$129</span> per first page
    </div>
    <div class="second">
    <span>$69</span> per first page
    </div>
    </div>
    <div class="description">
    Highest quality HTML5 / CSS3<br>
    compatible with all modern browsers and devices.
    </div>
    <ul class="options">
    <li>Twitter Bootstrap</li>
    <li>WCAG 2.0 / Section 508</li>
    <li>IE12 compatibility</li>
    </ul>
    <a href="#" class="btn btn-warning btn-lg">Order</a>
    </div>
    </div>
    </div>
    </div>
    </section>