Skip to content

Instantly share code, notes, and snippets.

@badri

badri/SassMeister-input-HTML.html

Created March 19, 2014 11:46
Show Gist options
  • Save badri/9640064 to your computer and use it in GitHub Desktop.
Save badri/9640064 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div id="page-wrapper">
<div id="page">
<div class="content-left">
<h2>content left</h2>
<div class="left-bar">
<h2>1. left bar</h2>
<div>
<p>dsfsadfsa safasdfsadf</p>
</div>
</div>
<div class="hotels">
<div class="row">
<div class="photo">
<h2>2. photo</h2>
</div>
<div class="descr">
<h2>3. other fields</h2>
</div>
</div>
<div class="row">
<div class="photo">
<h2>4. photo</h2>
</div>
<div class="descr">
<h2>5. other fields</h2>
</div>
</div>
<div class="row">
<div class="photo">
<h2>6. photo</h2>
</div>
<div class="descr">
<h2>7. other fields</h2>
</div>
</div>
</div> <!-- hotels -->
<div class="rating">
<div>
<p>8. hotel is rated 5 star</p>
</div>
</div>
<div class="more-info">
<div>
<p>9. more info</p>
</div>
</div>
</div>
<div class="content-right">
<h2>content right</h2>
</div>
</div>
</div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.3)
// Compass (v1.0.0.alpha.18)
// Breakpoint (v2.4.2)
// Susy (v2.1.1)
// ----
@import "compass";
@import "breakpoint";
@import "susyone";
// Media queries.
$media-narrow-up: min-width 800px;
// colors
$c1: #fae7b3;
$c2: #ea9fc3;
$c3: #ee9e9c;
$c4: #71dad2;
$c5: #eeddf7;
$c6: #eee;
$total-columns: 4;
$container-style: fluid;
div.content-left {
background-color: $c1;
}
div.left-bar {
background-color: $c4;
}
div.rating {
background-color: $c6;
}
div.more-info {
background-color: $c5;
}
div.photo {
background-color: $c3;
}
div.descr {
background-color: $c2;
}
p {
text-align: center;
}
h2 {
text-align: center;
font-size: 1rem;
padding-top: 1.8rem;
padding-bottom: 1.8rem;
text-transform: uppercase;
}
#page-wrapper {
@include container;
@include susy-grid-background;
}
div.content-right {
display: none;
}
@include breakpoint($media-narrow-up) {
$total-columns: 24;
$column-width: 80px;
$gutter-width: 5px;
$grid-padding: 0px;
$container-style: fluid;
#page-wrapper {
@include container;
@include susy-grid-background;
}
div.content-left {
background-color: $c1;
@include pre(3);
@include span-columns(13);
}
div.content-right {
background-color: $c2;
@include span-columns(8 omega);
}
div.left-bar {
@include span-columns(3, 13);
background-color: $c4;
}
div.rating {
@include span-columns(3, 13);
background-color: $c6;
}
div.more-info {
@include span-columns(3, 13);
background-color: $c5;
}
div.hotels {
@include span-columns(10 omega, 13);
}
div.photo {
@include span-columns(6, 10);
background-color: $c3;
margin-bottom: 10px;
}
div.descr {
@include span-columns(4 omega, 10);
background-color: $c2;
margin-bottom: 10px;
}
p {
text-align: center;
}
h2 {
text-align: center;
font-size: 1rem;
font-weight: bold;
padding-top: 1.8rem;
padding-bottom: 1.8rem;
text-transform: uppercase;
}
}
Raw
SassMeister-output.css
div.content-left {
background-color: #fae7b3;
}
div.left-bar {
background-color: #71dad2;
}
div.rating {
background-color: #eeeeee;
}
div.more-info {
background-color: #eeddf7;
}
div.photo {
background-color: #ee9e9c;
}
div.descr {
background-color: #ea9fc3;
}
p {
text-align: center;
}
h2 {
text-align: center;
font-size: 1rem;
padding-top: 1.8rem;
padding-bottom: 1.8rem;
text-transform: uppercase;
}
#page-wrapper {
*zoom: 1;
padding-left: 1em;
padding-right: 1em;
margin-left: auto;
margin-right: auto;
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(121, 121, 229, 0.25) 0%, rgba(79, 79, 221, 0.25) 21.05263%, rgba(0, 0, 0, 0) 21.05263%, rgba(0, 0, 0, 0) 26.31579%, rgba(121, 121, 229, 0.25) 26.31579%, rgba(79, 79, 221, 0.25) 47.36842%, rgba(0, 0, 0, 0) 47.36842%, rgba(0, 0, 0, 0) 52.63158%, rgba(121, 121, 229, 0.25) 52.63158%, rgba(79, 79, 221, 0.25) 73.68421%, rgba(0, 0, 0, 0) 73.68421%, rgba(0, 0, 0, 0) 78.94737%, rgba(121, 121, 229, 0.25) 78.94737%, rgba(79, 79, 221, 0.25) 100%, rgba(0, 0, 0, 0) 100%, rgba(0, 0, 0, 0) 100%);
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(121, 121, 229, 0.25) 0%, rgba(79, 79, 221, 0.25) 21.05263%, rgba(0, 0, 0, 0) 21.05263%, rgba(0, 0, 0, 0) 26.31579%, rgba(121, 121, 229, 0.25) 26.31579%, rgba(79, 79, 221, 0.25) 47.36842%, rgba(0, 0, 0, 0) 47.36842%, rgba(0, 0, 0, 0) 52.63158%, rgba(121, 121, 229, 0.25) 52.63158%, rgba(79, 79, 221, 0.25) 73.68421%, rgba(0, 0, 0, 0) 73.68421%, rgba(0, 0, 0, 0) 78.94737%, rgba(121, 121, 229, 0.25) 78.94737%, rgba(79, 79, 221, 0.25) 100%, rgba(0, 0, 0, 0) 100%, rgba(0, 0, 0, 0) 100%);
background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(121, 121, 229, 0.25) 0%, rgba(79, 79, 221, 0.25) 21.05263%, rgba(0, 0, 0, 0) 21.05263%, rgba(0, 0, 0, 0) 26.31579%, rgba(121, 121, 229, 0.25) 26.31579%, rgba(79, 79, 221, 0.25) 47.36842%, rgba(0, 0, 0, 0) 47.36842%, rgba(0, 0, 0, 0) 52.63158%, rgba(121, 121, 229, 0.25) 52.63158%, rgba(79, 79, 221, 0.25) 73.68421%, rgba(0, 0, 0, 0) 73.68421%, rgba(0, 0, 0, 0) 78.94737%, rgba(121, 121, 229, 0.25) 78.94737%, rgba(79, 79, 221, 0.25) 100%, rgba(0, 0, 0, 0) 100%, rgba(0, 0, 0, 0) 100%);
background-position: left top;
-moz-background-origin: content;
-o-background-origin: content-box;
-webkit-background-origin: content;
background-origin: content-box;
-moz-background-clip: content;
-o-background-clip: content-box;
-webkit-background-clip: content;
background-clip: content-box;
}
#page-wrapper:after {
content: "";
display: table;
clear: both;
}
div.content-right {
display: none;
}
@media (min-width: 800px) {
#page-wrapper {
*zoom: 1;
padding-left: 0px;
padding-left: 0rem;
padding-right: 0px;
padding-right: 0rem;
margin-left: auto;
margin-right: auto;
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(121, 121, 229, 0.25) 0%, rgba(79, 79, 221, 0.25) 3.9312%, rgba(0, 0, 0, 0) 3.9312%, rgba(0, 0, 0, 0) 4.1769%, rgba(121, 121, 229, 0.25) 4.1769%, rgba(79, 79, 221, 0.25) 8.10811%, rgba(0, 0, 0, 0) 8.10811%, rgba(0, 0, 0, 0) 8.35381%, rgba(121, 121, 229, 0.25) 8.35381%, rgba(79, 79, 221, 0.25) 12.28501%, rgba(0, 0, 0, 0) 12.28501%, rgba(0, 0, 0, 0) 12.53071%, rgba(121, 121, 229, 0.25) 12.53071%, rgba(79, 79, 221, 0.25) 16.46192%, rgba(0, 0, 0, 0) 16.46192%, rgba(0, 0, 0, 0) 16.70762%, rgba(121, 121, 229, 0.25) 16.70762%, rgba(79, 79, 221, 0.25) 20.63882%, rgba(0, 0, 0, 0) 20.63882%, rgba(0, 0, 0, 0) 20.88452%, rgba(121, 121, 229, 0.25) 20.88452%, rgba(79, 79, 221, 0.25) 24.81572%, rgba(0, 0, 0, 0) 24.81572%, rgba(0, 0, 0, 0) 25.06143%, rgba(121, 121, 229, 0.25) 25.06143%, rgba(79, 79, 221, 0.25) 28.99263%, rgba(0, 0, 0, 0) 28.99263%, rgba(0, 0, 0, 0) 29.23833%, rgba(121, 121, 229, 0.25) 29.23833%, rgba(79, 79, 221, 0.25) 33.16953%, rgba(0, 0, 0, 0) 33.16953%, rgba(0, 0, 0, 0) 33.41523%, rgba(121, 121, 229, 0.25) 33.41523%, rgba(79, 79, 221, 0.25) 37.34644%, rgba(0, 0, 0, 0) 37.34644%, rgba(0, 0, 0, 0) 37.59214%, rgba(121, 121, 229, 0.25) 37.59214%, rgba(79, 79, 221, 0.25) 41.52334%, rgba(0, 0, 0, 0) 41.52334%, rgba(0, 0, 0, 0) 41.76904%, rgba(121, 121, 229, 0.25) 41.76904%, rgba(79, 79, 221, 0.25) 45.70025%, rgba(0, 0, 0, 0) 45.70025%, rgba(0, 0, 0, 0) 45.94595%, rgba(121, 121, 229, 0.25) 45.94595%, rgba(79, 79, 221, 0.25) 49.87715%, rgba(0, 0, 0, 0) 49.87715%, rgba(0, 0, 0, 0) 50.12285%, rgba(121, 121, 229, 0.25) 50.12285%, rgba(79, 79, 221, 0.25) 54.05405%, rgba(0, 0, 0, 0) 54.05405%, rgba(0, 0, 0, 0) 54.29975%, rgba(121, 121, 229, 0.25) 54.29975%, rgba(79, 79, 221, 0.25) 58.23096%, rgba(0, 0, 0, 0) 58.23096%, rgba(0, 0, 0, 0) 58.47666%, rgba(121, 121, 229, 0.25) 58.47666%, rgba(79, 79, 221, 0.25) 62.40786%, rgba(0, 0, 0, 0) 62.40786%, rgba(0, 0, 0, 0) 62.65356%, rgba(121, 121, 229, 0.25) 62.65356%, rgba(79, 79, 221, 0.25) 66.58477%, rgba(0, 0, 0, 0) 66.58477%, rgba(0, 0, 0, 0) 66.83047%, rgba(121, 121, 229, 0.25) 66.83047%, rgba(79, 79, 221, 0.25) 70.76167%, rgba(0, 0, 0, 0) 70.76167%, rgba(0, 0, 0, 0) 71.00737%, rgba(121, 121, 229, 0.25) 71.00737%, rgba(79, 79, 221, 0.25) 74.93857%, rgba(0, 0, 0, 0) 74.93857%, rgba(0, 0, 0, 0) 75.18428%, rgba(121, 121, 229, 0.25) 75.18428%, rgba(79, 79, 221, 0.25) 79.11548%, rgba(0, 0, 0, 0) 79.11548%, rgba(0, 0, 0, 0) 79.36118%, rgba(121, 121, 229, 0.25) 79.36118%, rgba(79, 79, 221, 0.25) 83.29238%, rgba(0, 0, 0, 0) 83.29238%, rgba(0, 0, 0, 0) 83.53808%, rgba(121, 121, 229, 0.25) 83.53808%, rgba(79, 79, 221, 0.25) 87.46929%, rgba(0, 0, 0, 0) 87.46929%, rgba(0, 0, 0, 0) 87.71499%, rgba(121, 121, 229, 0.25) 87.71499%, rgba(79, 79, 221, 0.25) 91.64619%, rgba(0, 0, 0, 0) 91.64619%, rgba(0, 0, 0, 0) 91.89189%, rgba(121, 121, 229, 0.25) 91.89189%, rgba(79, 79, 221, 0.25) 95.8231%, rgba(0, 0, 0, 0) 95.8231%, rgba(0, 0, 0, 0) 96.0688%, rgba(121, 121, 229, 0.25) 96.0688%, rgba(79, 79, 221, 0.25) 100%, rgba(0, 0, 0, 0) 100%, rgba(0, 0, 0, 0) 100%);
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(121, 121, 229, 0.25) 0%, rgba(79, 79, 221, 0.25) 3.9312%, rgba(0, 0, 0, 0) 3.9312%, rgba(0, 0, 0, 0) 4.1769%, rgba(121, 121, 229, 0.25) 4.1769%, rgba(79, 79, 221, 0.25) 8.10811%, rgba(0, 0, 0, 0) 8.10811%, rgba(0, 0, 0, 0) 8.35381%, rgba(121, 121, 229, 0.25) 8.35381%, rgba(79, 79, 221, 0.25) 12.28501%, rgba(0, 0, 0, 0) 12.28501%, rgba(0, 0, 0, 0) 12.53071%, rgba(121, 121, 229, 0.25) 12.53071%, rgba(79, 79, 221, 0.25) 16.46192%, rgba(0, 0, 0, 0) 16.46192%, rgba(0, 0, 0, 0) 16.70762%, rgba(121, 121, 229, 0.25) 16.70762%, rgba(79, 79, 221, 0.25) 20.63882%, rgba(0, 0, 0, 0) 20.63882%, rgba(0, 0, 0, 0) 20.88452%, rgba(121, 121, 229, 0.25) 20.88452%, rgba(79, 79, 221, 0.25) 24.81572%, rgba(0, 0, 0, 0) 24.81572%, rgba(0, 0, 0, 0) 25.06143%, rgba(121, 121, 229, 0.25) 25.06143%, rgba(79, 79, 221, 0.25) 28.99263%, rgba(0, 0, 0, 0) 28.99263%, rgba(0, 0, 0, 0) 29.23833%, rgba(121, 121, 229, 0.25) 29.23833%, rgba(79, 79, 221, 0.25) 33.16953%, rgba(0, 0, 0, 0) 33.16953%, rgba(0, 0, 0, 0) 33.41523%, rgba(121, 121, 229, 0.25) 33.41523%, rgba(79, 79, 221, 0.25) 37.34644%, rgba(0, 0, 0, 0) 37.34644%, rgba(0, 0, 0, 0) 37.59214%, rgba(121, 121, 229, 0.25) 37.59214%, rgba(79, 79, 221, 0.25) 41.52334%, rgba(0, 0, 0, 0) 41.52334%, rgba(0, 0, 0, 0) 41.76904%, rgba(121, 121, 229, 0.25) 41.76904%, rgba(79, 79, 221, 0.25) 45.70025%, rgba(0, 0, 0, 0) 45.70025%, rgba(0, 0, 0, 0) 45.94595%, rgba(121, 121, 229, 0.25) 45.94595%, rgba(79, 79, 221, 0.25) 49.87715%, rgba(0, 0, 0, 0) 49.87715%, rgba(0, 0, 0, 0) 50.12285%, rgba(121, 121, 229, 0.25) 50.12285%, rgba(79, 79, 221, 0.25) 54.05405%, rgba(0, 0, 0, 0) 54.05405%, rgba(0, 0, 0, 0) 54.29975%, rgba(121, 121, 229, 0.25) 54.29975%, rgba(79, 79, 221, 0.25) 58.23096%, rgba(0, 0, 0, 0) 58.23096%, rgba(0, 0, 0, 0) 58.47666%, rgba(121, 121, 229, 0.25) 58.47666%, rgba(79, 79, 221, 0.25) 62.40786%, rgba(0, 0, 0, 0) 62.40786%, rgba(0, 0, 0, 0) 62.65356%, rgba(121, 121, 229, 0.25) 62.65356%, rgba(79, 79, 221, 0.25) 66.58477%, rgba(0, 0, 0, 0) 66.58477%, rgba(0, 0, 0, 0) 66.83047%, rgba(121, 121, 229, 0.25) 66.83047%, rgba(79, 79, 221, 0.25) 70.76167%, rgba(0, 0, 0, 0) 70.76167%, rgba(0, 0, 0, 0) 71.00737%, rgba(121, 121, 229, 0.25) 71.00737%, rgba(79, 79, 221, 0.25) 74.93857%, rgba(0, 0, 0, 0) 74.93857%, rgba(0, 0, 0, 0) 75.18428%, rgba(121, 121, 229, 0.25) 75.18428%, rgba(79, 79, 221, 0.25) 79.11548%, rgba(0, 0, 0, 0) 79.11548%, rgba(0, 0, 0, 0) 79.36118%, rgba(121, 121, 229, 0.25) 79.36118%, rgba(79, 79, 221, 0.25) 83.29238%, rgba(0, 0, 0, 0) 83.29238%, rgba(0, 0, 0, 0) 83.53808%, rgba(121, 121, 229, 0.25) 83.53808%, rgba(79, 79, 221, 0.25) 87.46929%, rgba(0, 0, 0, 0) 87.46929%, rgba(0, 0, 0, 0) 87.71499%, rgba(121, 121, 229, 0.25) 87.71499%, rgba(79, 79, 221, 0.25) 91.64619%, rgba(0, 0, 0, 0) 91.64619%, rgba(0, 0, 0, 0) 91.89189%, rgba(121, 121, 229, 0.25) 91.89189%, rgba(79, 79, 221, 0.25) 95.8231%, rgba(0, 0, 0, 0) 95.8231%, rgba(0, 0, 0, 0) 96.0688%, rgba(121, 121, 229, 0.25) 96.0688%, rgba(79, 79, 221, 0.25) 100%, rgba(0, 0, 0, 0) 100%, rgba(0, 0, 0, 0) 100%);
background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(121, 121, 229, 0.25) 0%, rgba(79, 79, 221, 0.25) 3.9312%, rgba(0, 0, 0, 0) 3.9312%, rgba(0, 0, 0, 0) 4.1769%, rgba(121, 121, 229, 0.25) 4.1769%, rgba(79, 79, 221, 0.25) 8.10811%, rgba(0, 0, 0, 0) 8.10811%, rgba(0, 0, 0, 0) 8.35381%, rgba(121, 121, 229, 0.25) 8.35381%, rgba(79, 79, 221, 0.25) 12.28501%, rgba(0, 0, 0, 0) 12.28501%, rgba(0, 0, 0, 0) 12.53071%, rgba(121, 121, 229, 0.25) 12.53071%, rgba(79, 79, 221, 0.25) 16.46192%, rgba(0, 0, 0, 0) 16.46192%, rgba(0, 0, 0, 0) 16.70762%, rgba(121, 121, 229, 0.25) 16.70762%, rgba(79, 79, 221, 0.25) 20.63882%, rgba(0, 0, 0, 0) 20.63882%, rgba(0, 0, 0, 0) 20.88452%, rgba(121, 121, 229, 0.25) 20.88452%, rgba(79, 79, 221, 0.25) 24.81572%, rgba(0, 0, 0, 0) 24.81572%, rgba(0, 0, 0, 0) 25.06143%, rgba(121, 121, 229, 0.25) 25.06143%, rgba(79, 79, 221, 0.25) 28.99263%, rgba(0, 0, 0, 0) 28.99263%, rgba(0, 0, 0, 0) 29.23833%, rgba(121, 121, 229, 0.25) 29.23833%, rgba(79, 79, 221, 0.25) 33.16953%, rgba(0, 0, 0, 0) 33.16953%, rgba(0, 0, 0, 0) 33.41523%, rgba(121, 121, 229, 0.25) 33.41523%, rgba(79, 79, 221, 0.25) 37.34644%, rgba(0, 0, 0, 0) 37.34644%, rgba(0, 0, 0, 0) 37.59214%, rgba(121, 121, 229, 0.25) 37.59214%, rgba(79, 79, 221, 0.25) 41.52334%, rgba(0, 0, 0, 0) 41.52334%, rgba(0, 0, 0, 0) 41.76904%, rgba(121, 121, 229, 0.25) 41.76904%, rgba(79, 79, 221, 0.25) 45.70025%, rgba(0, 0, 0, 0) 45.70025%, rgba(0, 0, 0, 0) 45.94595%, rgba(121, 121, 229, 0.25) 45.94595%, rgba(79, 79, 221, 0.25) 49.87715%, rgba(0, 0, 0, 0) 49.87715%, rgba(0, 0, 0, 0) 50.12285%, rgba(121, 121, 229, 0.25) 50.12285%, rgba(79, 79, 221, 0.25) 54.05405%, rgba(0, 0, 0, 0) 54.05405%, rgba(0, 0, 0, 0) 54.29975%, rgba(121, 121, 229, 0.25) 54.29975%, rgba(79, 79, 221, 0.25) 58.23096%, rgba(0, 0, 0, 0) 58.23096%, rgba(0, 0, 0, 0) 58.47666%, rgba(121, 121, 229, 0.25) 58.47666%, rgba(79, 79, 221, 0.25) 62.40786%, rgba(0, 0, 0, 0) 62.40786%, rgba(0, 0, 0, 0) 62.65356%, rgba(121, 121, 229, 0.25) 62.65356%, rgba(79, 79, 221, 0.25) 66.58477%, rgba(0, 0, 0, 0) 66.58477%, rgba(0, 0, 0, 0) 66.83047%, rgba(121, 121, 229, 0.25) 66.83047%, rgba(79, 79, 221, 0.25) 70.76167%, rgba(0, 0, 0, 0) 70.76167%, rgba(0, 0, 0, 0) 71.00737%, rgba(121, 121, 229, 0.25) 71.00737%, rgba(79, 79, 221, 0.25) 74.93857%, rgba(0, 0, 0, 0) 74.93857%, rgba(0, 0, 0, 0) 75.18428%, rgba(121, 121, 229, 0.25) 75.18428%, rgba(79, 79, 221, 0.25) 79.11548%, rgba(0, 0, 0, 0) 79.11548%, rgba(0, 0, 0, 0) 79.36118%, rgba(121, 121, 229, 0.25) 79.36118%, rgba(79, 79, 221, 0.25) 83.29238%, rgba(0, 0, 0, 0) 83.29238%, rgba(0, 0, 0, 0) 83.53808%, rgba(121, 121, 229, 0.25) 83.53808%, rgba(79, 79, 221, 0.25) 87.46929%, rgba(0, 0, 0, 0) 87.46929%, rgba(0, 0, 0, 0) 87.71499%, rgba(121, 121, 229, 0.25) 87.71499%, rgba(79, 79, 221, 0.25) 91.64619%, rgba(0, 0, 0, 0) 91.64619%, rgba(0, 0, 0, 0) 91.89189%, rgba(121, 121, 229, 0.25) 91.89189%, rgba(79, 79, 221, 0.25) 95.8231%, rgba(0, 0, 0, 0) 95.8231%, rgba(0, 0, 0, 0) 96.0688%, rgba(121, 121, 229, 0.25) 96.0688%, rgba(79, 79, 221, 0.25) 100%, rgba(0, 0, 0, 0) 100%, rgba(0, 0, 0, 0) 100%);
background-position: left top;
-moz-background-origin: content;
-o-background-origin: content-box;
-webkit-background-origin: content;
background-origin: content-box;
-moz-background-clip: content;
-o-background-clip: content-box;
-webkit-background-clip: content;
background-clip: content-box;
}
#page-wrapper:after {
content: "";
display: table;
clear: both;
}
div.content-left {
background-color: #fae7b3;
margin-left: 12.53071%;
width: 54.05405%;
float: left;
margin-right: 0.2457%;
display: inline;
}
div.content-right {
background-color: #ea9fc3;
width: 33.16953%;
float: right;
margin-right: 0;
*margin-left: -5px;
display: inline;
}
div.left-bar {
width: 22.72727%;
float: left;
margin-right: 0.45455%;
display: inline;
background-color: #71dad2;
}
div.rating {
width: 22.72727%;
float: left;
margin-right: 0.45455%;
display: inline;
background-color: #eeeeee;
}
div.more-info {
width: 22.72727%;
float: left;
margin-right: 0.45455%;
display: inline;
background-color: #eeddf7;
}
div.hotels {
width: 76.81818%;
float: right;
margin-right: 0;
*margin-left: -5px;
display: inline;
}
div.photo {
width: 59.76331%;
float: left;
margin-right: 0.59172%;
display: inline;
background-color: #ee9e9c;
margin-bottom: 10px;
}
div.descr {
width: 39.64497%;
float: right;
margin-right: 0;
*margin-left: -5px;
display: inline;
background-color: #ea9fc3;
margin-bottom: 10px;
}
p {
text-align: center;
}
h2 {
text-align: center;
font-size: 1rem;
font-weight: bold;
padding-top: 1.8rem;
padding-bottom: 1.8rem;
text-transform: uppercase;
}
}
Raw
SassMeister-rendered.html
<div id="page-wrapper">
<div id="page">
<div class="content-left">
<h2>content left</h2>
<div class="left-bar">
<h2>1. left bar</h2>
<div>
<p>dsfsadfsa safasdfsadf</p>
</div>
</div>
<div class="hotels">
<div class="row">
<div class="photo">
<h2>2. photo</h2>
</div>
<div class="descr">
<h2>3. other fields</h2>
</div>
</div>
<div class="row">
<div class="photo">
<h2>4. photo</h2>
</div>
<div class="descr">
<h2>5. other fields</h2>
</div>
</div>
<div class="row">
<div class="photo">
<h2>6. photo</h2>
</div>
<div class="descr">
<h2>7. other fields</h2>
</div>
</div>
</div> <!-- hotels -->
<div class="rating">
<div>
<p>8. hotel is rated 5 star</p>
</div>
</div>
<div class="more-info">
<div>
<p>9. more info</p>
</div>
</div>
</div>
<div class="content-right">
<h2>content right</h2>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment