Skip to content

Instantly share code, notes, and snippets.

@AndrewMcSwain
Created June 3, 2015 14:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save AndrewMcSwain/d3d4e11e092b479f5486 to your computer and use it in GitHub Desktop.
Save AndrewMcSwain/d3d4e11e092b479f5486 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<main id="grid">
<section id="main_background_container">
<div id="main_side_img"></div></div>
<div id="main_heading_container">
<h1 id="main_heading">INTENSIVAO</h1>
<h2 id="main_subheading">DE INGLES</h2>
<div id="info_container">
<div id="info_text_container">
<h1 id="info_text_place">Paulista</h1>
<h2 id="info_text_day">Sabados</h2>
</div>
<div id="info_time_container">
<h3 id="info_text_time">8h00 - 11h00</h3>
<h3 id="info_text_time_2">12h00 - 15h00</h3>
</div>
<div id="info_startday_container">
<h2 id="info_text_startday_explain">turmas começam<h2>
<h1 id="info_text_startday">10 de Maio</h1>
</div>
</div>
</div>
<div id="main_sidebar_container">
<h3 id="main_sidebar_subheading">com Andrew</h3>
<div id="portrait_frame_container">
<img id="portrait" src="http://i.imgur.com/SXB368R.png"></img>
<img id="signature" src="http://i.imgur.com/90304O6.png"></img>
</div>
<p id="main_sidebar_text">Aprende Inglês CONVERSANDO com Professores Nativos</p>
</div>
<div id="main_border_container"></div>
<div id="CTA_top_container">
<h1 id="CTA_top_text">Ready to Start Speaking?</h1>
</div>
<div id="CTA_text_box">
<div id="CTA_textbox_abs">
<p id="CTA_top_button_text">Vem Fazer Aula Conosco</p>
</div>
</div>
<div id="main_divider"></div>
</section>
<section id="aulas_container">
<div id="aulas_container_top">
<h1 id="aulas_heading_1"><span class="highlight1">Aulas de Inglês</span></h1>
<h2 id="aulas_subheading_1">Práticas Imersivas</h2>
<!--<div id="aulas_heading_band_1"></div>//-->
</div>
<div id="aulas_container_bottom">
<h1 id="aulas_heading_2">Aulas</h1>
<h2 id="aulas_subheading_2"><span class="highlight">com Professores Nativos</span></h2>
<!--<div id="aulas_subheading_band">a</div>//-->
</div>
</section>
<section id="aprende_container">
<div id="aprende_heading_container">
<h1 id="aprende_heading">VOCE APRENDE</h1>
</div>
<div id="aprende_subheading_container">
<h2 id="aprende_subheading">Fluidez na hora de Falar</h2>
</div>
<div id="aprende_container_text">
<p id="aprende_text">Com Pronúncia Perfeita</p>
<div id="aprende_text_effect"></div>
</div>
</section>
<section id="fale_container">
<div id="CTA_middle_container">
<p id="CTA_middle_text">Assine Agora</p>
</div>
<div id="fale_textbox_0">
<h1 id="fale_heading_1"><span class="highlight0">Fale<br> que<br>nem<br>um</span></h1>
</div>
<div id="fale_textbox_2">
<h1 id="fale_heading_2">Rápido</h1>
</div>
<div id="fale_textbox_3">
<h2 id="fale_subheading_2">Sem Sotaque</h2>
</div>
<div id="fale_textbox_1">
<h2 id="fale_subheading_1">GRINGO</h2>
</div>
</section>
<section id="melhor_container">
<h1 id="melhor_heading"><span class="highlight0">A melhor forma<br>
de aprender<br> algo,</h1></span>
<h2 id="melhor_subheading"><span class="highlightOffset">é no ATO</span></h2>
</section>
<section id="conquistar_container">
<div id="heading_container">
<h1 id="conquistar_heading">Aprende a Falar</h1>
<h2 id="conquistar_subheading"><span class="highlight0">Falando com Gringos</span></h2>
</div>
<div id="p_container">
<p id="conquistar text">Vamos conquistar este Inglês</p>
</div>
</section>
<section id="final_container">
<div id="final_heading_band">
<h1 id="final_heading">Venha Fazer Parte da Nossa História</h1>
</div>
<div id="final_form_container">
<p id="final_form_text">Cadastra seu email para fazer uma aula teste com Prof. Andrew</p>
<p id="final_button_text">Estou Dentro</p>
</div>
</section>
</main>
// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// Breakpoint (v2.5.0)
// Normalize SCSS (v3.0.2)
// Susy (v2.1.3)
// ----
// SCSS
@import "susy";
@import "normalize";
// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// Breakpoint (v2.5.0)
// Normalize SCSS (v3.0.2)
// Susy (v2.1.3)
// ----
@import "susy";
@import "breakpoint";
@import "normalize-scss";
@import url(//fonts.googleapis.com/css?family=Open+Sans);
@import url(//fonts.googleapis.com/css?family=Roboto+Condensed);
$susy: (
columns: 15,
gutters:.001,
debug:(image: show,
output : overlay,)
)
;
$primary_font: Nimbus Sans L Regular, Open Sans;
$secondary_font: Helvetica;
$binaryColor0: white;
$binaryColor1: black;
$primaryColor: #358394;
$primaryColorDark: #1B414A;
$offsetColor: #ED1C24;
$offsetColor1Dark: #7C1A1A;
$offsetColor2: #D81E9D;
$greyColor1: #3F3C3C;
.highlight1{
background-color: $binaryColor1;
}
.highlight0{
background-color: $binaryColor0;
}
.highlightOffset{
background-color: $offsetColor;
}
/*create placeholders for vertical alignment increments*/
%align-bottom-offset{
position: relative;
top: 60%;
-webkit-transform: translateY(-60%);
-ms-transform: translateY(-60%);
transform: translateY(-60%);
}
%align-bottom{
position: relative;
top: 61%;
-webkit-transform: translateY(-68%);
-ms-transform: translateY(-68%);
transform: translateY(-68%);
}
%align-middle-offset{
position: relative;
top: 20%;
-webkit-transform: translateY(-20%);
-ms-transform: translateY(68%);
transform: translateY(68%);
}
%primaryColor{
background-color: teal;
}
%debug{
border: 1px solid red;
}
%bg-image {
max-width: 100%;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
%color-box-1{
background: rgb(27,65,74); /* Old browsers */
background: -moz-linear-gradient(top, rgba(27,65,74,1) 51%, rgba(18,44,50,1) 51%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(51%,rgba(27,65,74,1)), color-stop(51%,rgba(18,44,50,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(27,65,74,1) 51%,rgba(18,44,50,1) 51%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(27,65,74,1) 51%,rgba(18,44,50,1) 51%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(27,65,74,1) 51%,rgba(18,44,50,1) 51%); /* IE10+ */
background: linear-gradient(to bottom, rgba(27,65,74,1) 51%,rgba(18,44,50,1) 51%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1b414a', endColorstr='#122c32',GradientType=0 ); /* IE6-9 */
;}
%color-box-2{
background: rgb(91,154,168); /* Old browsers */
background: -moz-linear-gradient(top, rgba(91,154,168,1) 51%, rgba(53,131,148,1) 51%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(51%,rgba(91,154,168,1)), color-stop(51%,rgba(53,131,148,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(91,154,168,1) 51%,rgba(53,131,148,1) 51%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(91,154,168,1) 51%,rgba(53,131,148,1) 51%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(91,154,168,1) 51%,rgba(53,131,148,1) 51%); /* IE10+ */
background: linear-gradient(to bottom, rgba(91,154,168,1) 51%,rgba(53,131,148,1) 51%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5b9aa8', endColorstr='#358394',GradientType=0 ); /* IE6-9 */
}
html{
font-family: 'Open Sans';
}
#grid{
@include container(15);
@include background-grid;
gutter-width: 2%;
}
/* */
/* CONTAINERS */
/* */
#main_background_container{
@extend %bg-image;
@include span(15);
height:1000px;
float: right;
background-image: url("http://i.imgur.com/6l3Mm1X.jpg");
border: 1px solid red;
;}
#main_heading_container{
@include span(7);
@include push(2.3);
height: 77%;
}
#info_container{
float: left;
background: rgba(200, 54, 54, 0.5);
min-height: 100%;
@include span(full);
}
#info_text_container{
max-width: 100%;
;
}
#info_time_container{
max-width: 100%;
;
}
#info_startday_container{
max-width: 100%;
;
}
#portrait_frame_container{
position: relative;
max-width: 100%;
}
#main_sidebar_container{/*not confining to one column*/
position:relative;
float: right;
max-width: 100%;
@include span(3.5);
background-color: $binaryColor0;
min-height:78%;
}
#CTA_top_container{
margin-bottom: 0;
float: left;
background-color: $binaryColor1;
@include span(9.333);
min-height: 17%;
}
#main_divider{
@include span(full);
background-color: #181717;
height: 5%;
}
#CTA_text_box{
position:relative;
@include span(2 of 9);
background-color: $binaryColor0;
min-height: 17%;
}
#CTA_textbox_abs{
@extend %debug;
position: absolute;
z-index: 3;
top: -23%;
left: -22%;
height:110%;
width:130%;
min-height: 28%;
background-color: white;
}
/* */
/* IMAGES */
/* */
#portrait{
padding: 2%;
max-width: 92%;
transform: translate(2%);
transition: all .5s;
}
#portrait:hover{
brightness: (3);
transform: scale(1.06, 1.06);
}
#signature{
position:absolute;
top:52%;
left:49%;
max-width: 90%;
}
#info_box_gradient_1{;}
#CTA_top_text{
@include span(5 of 9);
color: $binaryColor0;
}
#CTA_top_button_text{
position: absolute;
top: 50%;
text-align: center;
}
#aulas_container{
background-position: center top;
@include span(full);
height:611px;
}
#aulas_container_top{
@include span(full);
height:40%;
position:relative;
@extend %bg-image;
background-image: url("http://i.imgur.com/6Tv6r7F.png");
}
#aulas_container_bottom{
height:60%;
@include span(full);
@extend %bg-image;
background-image: url("http://i.imgur.com/YfxsPWu.jpg");
;}
/* */
/* TEXT */
/* */
#aulas_heading_1{
@include span(full);
position: relative;
margin-top:10%;
font-size: 80px;
z-index: 3;
text-align: center;
color: $binaryColor0;}
#aulas_heading_1:before{
@include span(full);
content: "";
position:relative;
z-index: 1;
background-color: $binaryColor0;
margin-top: 2px ;
height: 1em;
}
#aulas_heading_1:after{
@include span(full);
content:"";
position: relative;
z-index: 2;
background-color: $binaryColor1;
margin-top: -0.2em;
height: 1.2em;
}
#aulas_subheading_1{
@include span(full);
//font-size
z-index:2;
text-align: center;
vertical-align: bottom;
bottom: 10%;
color: $binaryColor0;
}
#aulas_heading_2{
text-align: center;
font-size: 40em;
color: $binaryColor1;
}
#aulas_subheading_2{
font-size: 60px;
text-align: center;
vertical-align: bottom;
color:$binaryColor1;
@extend %align-bottom-offset;
}
/* */
/* DIVIDERS AND SHAPES */
/* */
#aulas_heading_band_1{
@include span(full);
height: 35%;
position:relative;
top: -40%;
background-color: $binaryColor1;
}
*#aulas_heading_band_1:before{
content:"";
position:relative;
top: -30%;//why the fuck do i have to use negatives? why does this start in the middle of the container if it's outside of the flow?
background-color: $binaryColor0;
@include span(full);
height: 50%;
display: block;
position: relative;
}
#aulas_subheading_band{
background-color: $binaryColor0;
height: 10%;
position:relative;
bottom:0%;//not on the bottom even though it's the bottom of the dom and the other element is in position relative//
}
/*
#aulas_subheading_2_band{
background-color: $binaryColor0;
height: 5%;
}*/
/******* THIRD SECTION *******/
#aprende_container{
height:373px;
;
}
#aprende_heading_container{
@include span(full);
@extend %color-box-1;
background-color: $primaryColorDark;
height: 102px;
}
#aprende_subheading_container{
@include span(full);
@extend %color-box-2;
height:100px;
}
#aprende_text_container{;}
/* */
/* TEXT */
/* */
#aprende_heading{
color: $binaryColor1;
}
#aprende_subheading{
color: $binaryColor1
/* */
/* CONTAINERS */
/* */
;
}
#aprende_text{
color: $binaryColor0;
}
/* */
/* DIVIDERS AND SHAPES */
/* */
#aprende_band{
@include span(full);
height:20%;
z-index: 1;
background-color: red;
}//not showing up at all!!!
#aprende_text_effect{background-color: grey ;} /*grey opacity*/
/******* FOURTH SECTION *******/
/* */
/* CONTAINERS */
/* */
#fale_container{
@include span(full);
background-color: $binaryColor1;
height: 800px;
}
#CTA_middle_container{
background-color: $binaryColor0;
margin: 0 auto;
width: 15em;
height: 7em;
border-radius: 20px 20px 20px 20px;
-moz-border-radius: 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px;
border: 2px solid #ffffff;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
/* */
/* TEXT */
/* */
/*colors not working*/
#CTA_middle_text{
margin: 0 auto;
-webkit-transform: translate(0%,10%);
transform: translate(0%,10%);
padding-top: 12%;
top: 7%;
background-color: $offsetColor2;
height: 85%;
width: 80%;
color: $binaryColor1;
text-align: center;
box-sizing: border-box;
}
/*#CTA_middle_text:hover{
color: $binaryColor0;
transform: scale(1.1);
transition: scale 1s;}*/
#fale_heading_1{
color: $binaryColor1;
}
#fale_heading_2{
color: $binaryColor1;
}
#fale_subheading_1{
color: $binaryColor1;
}
#fale_subheading_2{
color: $binaryColor1;
}
/* */
/* BUTTONS */
/* */
#CTA_middle{
color: offsetColor1;
}
/*#CTA_middle_button_effect{
color: $binaryColor1;
}*/
#fale_textbox_1{
@include span(full);
background-color: $binaryColor0;
}
#fale_textbox_2{
@include span(full);
background-color: $offsetColor1Dark;
}
#fale_textbox_3{
@include span(full);
background-color: $greyColor1;
}
/******* FIFTH SECTION *******/
/* */
/* CONTAINERS */
/* */
#melhor_container{
@include span(full);
height: 535px;
background-color: $binaryColor1;
}
/* */
/* TEXT */
/* */
#melhor_heading{
background-color: $binaryColor1;
}
#melhor_subheading{
color: $binaryColor0;
}
/******* SIXTH SECTION *******/
/* */
/* CONTAINERS */
/* */
#conquistar_container{
@include span(full);
height: 900px;
}
#heading_container{
background-color:$binaryColor1;
}
#subheading_container{
background-color: $binaryColor0;
}
#p_container{
@extend %bg-image;
background-image: url("http://i.imgur.com/mWo7x03.pnge.jpg");/*not showing image*/
}
#conquistar_heading{
color: $binaryColor0;
}
#final_container{
;
}
#final_form_container{
background-color: white;
}
/* */
/* TEXT */
/* */
#final_heading{
;
color: $binaryColor0;
}
#final_form_text{
color: black;
}
#final_button_text{
color: $binaryColor0;
}
/* */
/* BUTTONS */
/* */
#final_form_button{
background-color: $offsetColor2;
}
#social_media_buttons{;}
/* */
/* DIVIDERS AND SHAPES */
/* */
#final_heading_band{
background-color: black;
height: 100px;
color:white;
/*set % height*/
/*put this at the top of the container*/
}
#final_emaiL_input{
color: $binaryColor0;
}
/* normalize-scss 3.0.2+normalize.3.0.2 | MIT/GPLv2 License | bit.ly/normalize-scss */
/**
* Establish a vertical rhythm unit using $base-font-size, $base-line-height,
* and $rhythm-unit variables. Also, correct text resizing oddly in IE 6/7 when
* body `font-size` is set using `em` units.
*/
@import url(//fonts.googleapis.com/css?family=Open+Sans);
@import url(//fonts.googleapis.com/css?family=Roboto+Condensed);
html {
font-size: 100%;
line-height: 1.5em;
}
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif;
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11
* and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
audio,
canvas,
progress,
video {
display: inline-block;
/* 1 */
*display: inline;
*zoom: 1;
vertical-align: baseline;
/* 2 */
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address `[hidden]` styling not present in IE 8/9/10.
*/
[hidden] {
display: none;
}
/**
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
*/
template {
display: none;
}
/* Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* Text-level semantics
========================================================================== */
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Set 1 unit of vertical rhythm on the top and bottom margin.
*/
blockquote {
margin: 1.5em 40px;
}
/**
* Address styling not present in Safari and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/
h1 {
/* Set the font-size and line-height while keeping a proper vertical rhythm. */
font-size: 2em;
line-height: 1.5em;
/* Set 1 unit of vertical rhythm on the top and bottom margins. */
margin-top: 0.75em;
margin-bottom: 0.75em;
}
h2 {
font-size: 1.5em;
line-height: 2em;
margin-top: 1em;
margin-bottom: 1em;
}
h3 {
font-size: 1.17em;
line-height: 1.28205em;
margin-top: 1.28205em;
margin-bottom: 1.28205em;
}
h4 {
font-size: 1em;
line-height: 1.5em;
margin-top: 1.5em;
margin-bottom: 1.5em;
}
h5 {
font-size: 0.83em;
line-height: 1.80723em;
margin-top: 1.80723em;
margin-bottom: 1.80723em;
}
h6 {
font-size: 0.67em;
line-height: 2.23881em;
margin-top: 2.23881em;
margin-bottom: 2.23881em;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Set 1 unit of vertical rhythm on the top and bottom margin.
*/
p,
pre {
margin: 1.5em 0;
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* Lists
========================================================================== */
/**
* Address margins set differently in IE 6/7.
*/
dl,
menu,
ol,
ul {
margin: 1.5em 0;
}
dd {
margin: 0 0 0 40px;
}
/**
* Address paddings set differently in IE 6/7.
*/
menu,
ol,
ul {
padding: 0 0 0 40px;
}
/**
* Correct list images handled incorrectly in IE 7.
*/
nav ul,
nav ol {
list-style: none;
list-style-image: none;
}
/* Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9/10.
*/
img {
border: 0;
/* Improve image quality when scaled in IE 7. */
-ms-interpolation-mode: bicubic;
}
/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari.
*/
figure {
margin: 1.5em 40px;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* Contain overflow in all browsers.
*/
pre {
overflow: auto;
}
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
/* Forms
========================================================================== */
/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/
/**
* Correct margin displayed oddly in IE 6/7.
*/
form {
margin: 0;
}
/**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
* 4. Address `font-family` inconsistency between `textarea` and other form in IE 7
* 5. Improve appearance and consistency with IE 6/7.
*/
button,
input,
optgroup,
select,
textarea {
color: inherit;
/* 1 */
font: inherit;
/* 2 */
margin: 0;
/* 3 */
*font-family: sans-serif;
/* 4 */
*vertical-align: middle;
/* 5 */
}
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
overflow: visible;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
* 4. Remove inner spacing in IE 7 without affecting normal text inputs.
* Known issue: inner spacing remains in IE 6.
*/
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
/* 2 */
cursor: pointer;
/* 3 */
*overflow: visible;
/* 4 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
input {
line-height: normal;
}
/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
* 3. Remove excess padding in IE 7.
* Known issue: excess padding remains in IE 6.
*/
input[type="checkbox"],
input[type="radio"] {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
*height: 13px;
/* 3 */
*width: 13px;
/* 3 */
}
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield;
/* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
/* 2 */
/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/
}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Define consistent border, margin, and padding.
*/
fieldset {
margin: 0 2px;
/* Apply borders and padding that keep the vertical rhythm. */
border-color: #c0c0c0;
border-top-width: 0.0625em;
border-top-style: solid;
padding-top: 0.4625em;
border-bottom-width: 0.0625em;
border-bottom-style: solid;
padding-bottom: 0.9125em;
border-left-width: 0.0625em;
border-left-style: solid;
padding-left: 0.875em;
border-right-width: 0.0625em;
border-right-style: solid;
padding-right: 0.875em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
* 3. Correct alignment displayed oddly in IE 6/7.
*/
legend {
border: 0;
/* 1 */
padding: 0;
/* 2 */
*margin-left: -7px;
/* 3 */
}
/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/
textarea {
overflow: auto;
}
/**
* Don't inherit the `font-weight` (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/
optgroup {
font-weight: bold;
}
/* Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
/* normalize-scss 3.0.2+normalize.3.0.2 | MIT/GPLv2 License | bit.ly/normalize-scss */
/**
* Establish a vertical rhythm unit using $base-font-size, $base-line-height,
* and $rhythm-unit variables. Also, correct text resizing oddly in IE 6/7 when
* body `font-size` is set using `em` units.
*/
html {
font-size: 100%;
line-height: 1.5em;
}
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif;
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11
* and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
audio,
canvas,
progress,
video {
display: inline-block;
/* 1 */
*display: inline;
*zoom: 1;
vertical-align: baseline;
/* 2 */
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address `[hidden]` styling not present in IE 8/9/10.
*/
[hidden] {
display: none;
}
/**
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
*/
template {
display: none;
}
/* Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* Text-level semantics
========================================================================== */
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Set 1 unit of vertical rhythm on the top and bottom margin.
*/
blockquote {
margin: 1.5em 40px;
}
/**
* Address styling not present in Safari and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/
h1 {
/* Set the font-size and line-height while keeping a proper vertical rhythm. */
font-size: 2em;
line-height: 1.5em;
/* Set 1 unit of vertical rhythm on the top and bottom margins. */
margin-top: 0.75em;
margin-bottom: 0.75em;
}
h2 {
font-size: 1.5em;
line-height: 2em;
margin-top: 1em;
margin-bottom: 1em;
}
h3 {
font-size: 1.17em;
line-height: 1.28205em;
margin-top: 1.28205em;
margin-bottom: 1.28205em;
}
h4 {
font-size: 1em;
line-height: 1.5em;
margin-top: 1.5em;
margin-bottom: 1.5em;
}
h5 {
font-size: 0.83em;
line-height: 1.80723em;
margin-top: 1.80723em;
margin-bottom: 1.80723em;
}
h6 {
font-size: 0.67em;
line-height: 2.23881em;
margin-top: 2.23881em;
margin-bottom: 2.23881em;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Set 1 unit of vertical rhythm on the top and bottom margin.
*/
p,
pre {
margin: 1.5em 0;
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* Lists
========================================================================== */
/**
* Address margins set differently in IE 6/7.
*/
dl,
menu,
ol,
ul {
margin: 1.5em 0;
}
dd {
margin: 0 0 0 40px;
}
/**
* Address paddings set differently in IE 6/7.
*/
menu,
ol,
ul {
padding: 0 0 0 40px;
}
/**
* Correct list images handled incorrectly in IE 7.
*/
nav ul,
nav ol {
list-style: none;
list-style-image: none;
}
/* Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9/10.
*/
img {
border: 0;
/* Improve image quality when scaled in IE 7. */
-ms-interpolation-mode: bicubic;
}
/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari.
*/
figure {
margin: 1.5em 40px;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* Contain overflow in all browsers.
*/
pre {
overflow: auto;
}
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
/* Forms
========================================================================== */
/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/
/**
* Correct margin displayed oddly in IE 6/7.
*/
form {
margin: 0;
}
/**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
* 4. Address `font-family` inconsistency between `textarea` and other form in IE 7
* 5. Improve appearance and consistency with IE 6/7.
*/
button,
input,
optgroup,
select,
textarea {
color: inherit;
/* 1 */
font: inherit;
/* 2 */
margin: 0;
/* 3 */
*font-family: sans-serif;
/* 4 */
*vertical-align: middle;
/* 5 */
}
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
overflow: visible;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
* 4. Remove inner spacing in IE 7 without affecting normal text inputs.
* Known issue: inner spacing remains in IE 6.
*/
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
/* 2 */
cursor: pointer;
/* 3 */
*overflow: visible;
/* 4 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
input {
line-height: normal;
}
/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
* 3. Remove excess padding in IE 7.
* Known issue: excess padding remains in IE 6.
*/
input[type="checkbox"],
input[type="radio"] {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
*height: 13px;
/* 3 */
*width: 13px;
/* 3 */
}
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield;
/* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
/* 2 */
/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/
}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Define consistent border, margin, and padding.
*/
fieldset {
margin: 0 2px;
/* Apply borders and padding that keep the vertical rhythm. */
border-color: #c0c0c0;
border-top-width: 0.0625em;
border-top-style: solid;
padding-top: 0.4625em;
border-bottom-width: 0.0625em;
border-bottom-style: solid;
padding-bottom: 0.9125em;
border-left-width: 0.0625em;
border-left-style: solid;
padding-left: 0.875em;
border-right-width: 0.0625em;
border-right-style: solid;
padding-right: 0.875em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
* 3. Correct alignment displayed oddly in IE 6/7.
*/
legend {
border: 0;
/* 1 */
padding: 0;
/* 2 */
*margin-left: -7px;
/* 3 */
}
/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/
textarea {
overflow: auto;
}
/**
* Don't inherit the `font-weight` (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/
optgroup {
font-weight: bold;
}
/* Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
.highlight1 {
background-color: black;
}
.highlight0 {
background-color: white;
}
.highlightOffset {
background-color: #ed1c24;
}
/*create placeholders for vertical alignment increments*/
#aulas_subheading_2 {
position: relative;
top: 60%;
-webkit-transform: translateY(-60%);
-ms-transform: translateY(-60%);
transform: translateY(-60%);
}
#CTA_textbox_abs {
border: 1px solid red;
}
#main_background_container, #aulas_container_top, #aulas_container_bottom, #p_container {
max-width: 100%;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
#aprende_heading_container {
background: #1b414a;
/* Old browsers */
background: -moz-linear-gradient(top, #1b414a 51%, #122c32 51%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(51%, #1b414a), color-stop(51%, #122c32));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1b414a 51%, #122c32 51%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1b414a 51%, #122c32 51%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #1b414a 51%, #122c32 51%);
/* IE10+ */
background: linear-gradient(to bottom, #1b414a 51%, #122c32 51%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1b414a', endColorstr='#122c32',GradientType=0 );
/* IE6-9 */
}
#aprende_subheading_container {
background: #5b9aa8;
/* Old browsers */
background: -moz-linear-gradient(top, #5b9aa8 51%, #358394 51%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(51%, #5b9aa8), color-stop(51%, #358394));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #5b9aa8 51%, #358394 51%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #5b9aa8 51%, #358394 51%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #5b9aa8 51%, #358394 51%);
/* IE10+ */
background: linear-gradient(to bottom, #5b9aa8 51%, #358394 51%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5b9aa8', endColorstr='#358394',GradientType=0 );
/* IE6-9 */
}
html {
font-family: 'Open Sans';
}
#grid {
max-width: 100%;
margin-left: auto;
margin-right: auto;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjZmZiIgc3RvcC1vcGFjaXR5PSIwLjI1Ii8+PHN0b3Agb2Zmc2V0PSI5OS45MDAxJSIgc3RvcC1jb2xvcj0iI2IzYjNmZiIgc3RvcC1vcGFjaXR5PSIwLjI1Ii8+PHN0b3Agb2Zmc2V0PSI5OS45MDAxJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuNSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
background-size: 100%;
background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(102, 102, 255, 0.25)), color-stop(99.9001%, rgba(179, 179, 255, 0.25)), color-stop(99.9001%, rgba(0, 0, 0, 0))), -webkit-gradient(linear, 50% 0%, 50% 1, color-stop(100%, rgba(0, 0, 0, 0.5)), color-stop(100%, rgba(0, 0, 0, 0)));
background-image: -moz-linear-gradient(left, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 99.9001%, rgba(0, 0, 0, 0) 99.9001%), -moz-linear-gradient(top, rgba(0, 0, 0, 0.5) 1px, rgba(0, 0, 0, 0) 1px);
background-image: -webkit-linear-gradient(left, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 99.9001%, rgba(0, 0, 0, 0) 99.9001%), -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5) 1px, rgba(0, 0, 0, 0) 1px);
background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 99.9001%, rgba(0, 0, 0, 0) 99.9001%), linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 1px, rgba(0, 0, 0, 0) 1px);
background-size: 6.66711%, 100% 24px;
background-origin: content-box, border-box;
background-clip: content-box, border-box;
background-position: left top;
gutter-width: 2%;
}
#grid:after {
content: " ";
display: block;
clear: both;
}
head {
display: block;
position: fixed;
right: 10px;
top: 10px;
z-index: 999;
color: #333;
background: rgba(255, 255, 255, 0.25);
}
head:before {
content: "|||";
display: block;
padding: 5px 10px;
font-family: sans-serif;
font-size: 16px;
font-weight: bold;
}
head:hover {
background: rgba(255, 255, 255, 0.5);
color: red;
}
head:hover ~ #grid, head:hover ~ body #grid {
position: relative;
}
head:hover ~ #grid:before, head:hover ~ body #grid:before {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
content: " ";
z-index: 998;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjZmZiIgc3RvcC1vcGFjaXR5PSIwLjI1Ii8+PHN0b3Agb2Zmc2V0PSI5OS45MDAxJSIgc3RvcC1jb2xvcj0iI2IzYjNmZiIgc3RvcC1vcGFjaXR5PSIwLjI1Ii8+PHN0b3Agb2Zmc2V0PSI5OS45MDAxJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuNSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
background-size: 100%;
background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(102, 102, 255, 0.25)), color-stop(99.9001%, rgba(179, 179, 255, 0.25)), color-stop(99.9001%, rgba(0, 0, 0, 0))), -webkit-gradient(linear, 50% 0%, 50% 1, color-stop(100%, rgba(0, 0, 0, 0.5)), color-stop(100%, rgba(0, 0, 0, 0)));
background-image: -moz-linear-gradient(left, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 99.9001%, rgba(0, 0, 0, 0) 99.9001%), -moz-linear-gradient(top, rgba(0, 0, 0, 0.5) 1px, rgba(0, 0, 0, 0) 1px);
background-image: -webkit-linear-gradient(left, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 99.9001%, rgba(0, 0, 0, 0) 99.9001%), -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5) 1px, rgba(0, 0, 0, 0) 1px);
background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 99.9001%, rgba(0, 0, 0, 0) 99.9001%), linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 1px, rgba(0, 0, 0, 0) 1px);
background-size: 6.66711%, 100% 24px;
background-origin: content-box, border-box;
background-clip: content-box, border-box;
background-position: left top;
}
/* */
/* CONTAINERS */
/* */
#main_background_container {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
height: 1000px;
float: right;
background-image: url("http://i.imgur.com/6l3Mm1X.jpg");
border: 1px solid red;
}
#main_heading_container {
width: 46.66311%;
float: left;
margin-right: 0.00666%;
margin-left: 15.33435%;
height: 77%;
}
#info_container {
float: left;
background: rgba(200, 54, 54, 0.5);
min-height: 100%;
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
}
#info_text_container {
max-width: 100%;
}
#info_time_container {
max-width: 100%;
}
#info_startday_container {
max-width: 100%;
}
#portrait_frame_container {
position: relative;
max-width: 100%;
}
#main_sidebar_container {
/*not confining to one column*/
position: relative;
float: right;
max-width: 100%;
width: 23.32823%;
float: left;
margin-right: 0.00666%;
background-color: white;
min-height: 78%;
}
#CTA_top_container {
margin-bottom: 0;
float: left;
background-color: black;
width: 62.21748%;
float: left;
margin-right: 0.00666%;
min-height: 17%;
}
#main_divider {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
background-color: #181717;
height: 5%;
}
#CTA_text_box {
position: relative;
width: 22.21359%;
float: left;
margin-right: 0.0111%;
background-color: white;
min-height: 17%;
}
#CTA_textbox_abs {
position: absolute;
z-index: 3;
top: -23%;
left: -22%;
height: 110%;
width: 130%;
min-height: 28%;
background-color: white;
}
/* */
/* IMAGES */
/* */
#portrait {
padding: 2%;
max-width: 92%;
transform: translate(2%);
transition: all .5s;
}
#portrait:hover {
brightness: 3;
transform: scale(1.06, 1.06);
}
#signature {
position: absolute;
top: 52%;
left: 49%;
max-width: 90%;
}
#CTA_top_text {
width: 55.55062%;
float: left;
margin-right: 0.0111%;
color: white;
}
#CTA_top_button_text {
position: absolute;
top: 50%;
text-align: center;
}
#aulas_container {
background-position: center top;
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
height: 611px;
}
#aulas_container_top {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
height: 40%;
position: relative;
background-image: url("http://i.imgur.com/6Tv6r7F.png");
}
#aulas_container_bottom {
height: 60%;
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
background-image: url("http://i.imgur.com/YfxsPWu.jpg");
}
/* */
/* TEXT */
/* */
#aulas_heading_1 {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
position: relative;
margin-top: 10%;
font-size: 80px;
z-index: 3;
text-align: center;
color: white;
}
#aulas_heading_1:before {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
content: "";
position: relative;
z-index: 1;
background-color: white;
margin-top: 2px;
height: 1em;
}
#aulas_heading_1:after {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
content: "";
position: relative;
z-index: 2;
background-color: black;
margin-top: -0.2em;
height: 1.2em;
}
#aulas_subheading_1 {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
z-index: 2;
text-align: center;
vertical-align: bottom;
bottom: 10%;
color: white;
}
#aulas_heading_2 {
text-align: center;
font-size: 40em;
color: black;
}
#aulas_subheading_2 {
font-size: 60px;
text-align: center;
vertical-align: bottom;
color: black;
}
/* */
/* DIVIDERS AND SHAPES */
/* */
#aulas_heading_band_1 {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
height: 35%;
position: relative;
top: -40%;
background-color: black;
}
*#aulas_heading_band_1:before {
content: "";
position: relative;
top: -30%;
background-color: white;
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
height: 50%;
display: block;
position: relative;
}
#aulas_subheading_band {
background-color: white;
height: 10%;
position: relative;
bottom: 0%;
}
/*
#aulas_subheading_2_band{
background-color: $binaryColor0;
height: 5%;
}*/
/******* THIRD SECTION *******/
#aprende_container {
height: 373px;
}
#aprende_heading_container {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
background-color: #1b414a;
height: 102px;
}
#aprende_subheading_container {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
height: 100px;
}
/* */
/* TEXT */
/* */
#aprende_heading {
color: black;
}
#aprende_subheading {
color: black;
}
#aprende_text {
color: white;
}
/* */
/* DIVIDERS AND SHAPES */
/* */
#aprende_band {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
height: 20%;
z-index: 1;
background-color: red;
}
#aprende_text_effect {
background-color: gray;
}
/*grey opacity*/
/******* FOURTH SECTION *******/
/* */
/* CONTAINERS */
/* */
#fale_container {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
background-color: black;
height: 800px;
}
#CTA_middle_container {
background-color: white;
margin: 0 auto;
width: 15em;
height: 7em;
border-radius: 20px 20px 20px 20px;
-moz-border-radius: 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px;
border: 2px solid #ffffff;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
/* */
/* TEXT */
/* */
/*colors not working*/
#CTA_middle_text {
margin: 0 auto;
-webkit-transform: translate(0%, 10%);
transform: translate(0%, 10%);
padding-top: 12%;
top: 7%;
background-color: #d81e9d;
height: 85%;
width: 80%;
color: black;
text-align: center;
box-sizing: border-box;
}
/*#CTA_middle_text:hover{
color: $binaryColor0;
transform: scale(1.1);
transition: scale 1s;}*/
#fale_heading_1 {
color: black;
}
#fale_heading_2 {
color: black;
}
#fale_subheading_1 {
color: black;
}
#fale_subheading_2 {
color: black;
}
/* */
/* BUTTONS */
/* */
#CTA_middle {
color: offsetColor1;
}
/*#CTA_middle_button_effect{
color: $binaryColor1;
}*/
#fale_textbox_1 {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
background-color: white;
}
#fale_textbox_2 {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
background-color: #7c1a1a;
}
#fale_textbox_3 {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
background-color: #3f3c3c;
}
/******* FIFTH SECTION *******/
/* */
/* CONTAINERS */
/* */
#melhor_container {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
height: 535px;
background-color: black;
}
/* */
/* TEXT */
/* */
#melhor_heading {
background-color: black;
}
#melhor_subheading {
color: white;
}
/******* SIXTH SECTION *******/
/* */
/* CONTAINERS */
/* */
#conquistar_container {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
height: 900px;
}
#heading_container {
background-color: black;
}
#subheading_container {
background-color: white;
}
#p_container {
background-image: url("http://i.imgur.com/mWo7x03.pnge.jpg");
/*not showing image*/
}
#conquistar_heading {
color: white;
}
#final_form_container {
background-color: white;
}
/* */
/* TEXT */
/* */
#final_heading {
color: white;
}
#final_form_text {
color: black;
}
#final_button_text {
color: white;
}
/* */
/* BUTTONS */
/* */
#final_form_button {
background-color: #d81e9d;
}
/* */
/* DIVIDERS AND SHAPES */
/* */
#final_heading_band {
background-color: black;
height: 100px;
color: white;
/*set % height*/
/*put this at the top of the container*/
}
#final_emaiL_input {
color: white;
}
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<main id="grid">
<section id="main_background_container">
<div id="main_side_img"></div></div>
<div id="main_heading_container">
<h1 id="main_heading">INTENSIVAO</h1>
<h2 id="main_subheading">DE INGLES</h2>
<div id="info_container">
<div id="info_text_container">
<h1 id="info_text_place">Paulista</h1>
<h2 id="info_text_day">Sabados</h2>
</div>
<div id="info_time_container">
<h3 id="info_text_time">8h00 - 11h00</h3>
<h3 id="info_text_time_2">12h00 - 15h00</h3>
</div>
<div id="info_startday_container">
<h2 id="info_text_startday_explain">turmas começam<h2>
<h1 id="info_text_startday">10 de Maio</h1>
</div>
</div>
</div>
<div id="main_sidebar_container">
<h3 id="main_sidebar_subheading">com Andrew</h3>
<div id="portrait_frame_container">
<img id="portrait" src="http://i.imgur.com/SXB368R.png"></img>
<img id="signature" src="http://i.imgur.com/90304O6.png"></img>
</div>
<p id="main_sidebar_text">Aprende Inglês CONVERSANDO com Professores Nativos</p>
</div>
<div id="main_border_container"></div>
<div id="CTA_top_container">
<h1 id="CTA_top_text">Ready to Start Speaking?</h1>
</div>
<div id="CTA_text_box">
<div id="CTA_textbox_abs">
<p id="CTA_top_button_text">Vem Fazer Aula Conosco</p>
</div>
</div>
<div id="main_divider"></div>
</section>
<section id="aulas_container">
<div id="aulas_container_top">
<h1 id="aulas_heading_1"><span class="highlight1">Aulas de Inglês</span></h1>
<h2 id="aulas_subheading_1">Práticas Imersivas</h2>
<!--<div id="aulas_heading_band_1"></div>//-->
</div>
<div id="aulas_container_bottom">
<h1 id="aulas_heading_2">Aulas</h1>
<h2 id="aulas_subheading_2"><span class="highlight">com Professores Nativos</span></h2>
<!--<div id="aulas_subheading_band">a</div>//-->
</div>
</section>
<section id="aprende_container">
<div id="aprende_heading_container">
<h1 id="aprende_heading">VOCE APRENDE</h1>
</div>
<div id="aprende_subheading_container">
<h2 id="aprende_subheading">Fluidez na hora de Falar</h2>
</div>
<div id="aprende_container_text">
<p id="aprende_text">Com Pronúncia Perfeita</p>
<div id="aprende_text_effect"></div>
</div>
</section>
<section id="fale_container">
<div id="CTA_middle_container">
<p id="CTA_middle_text">Assine Agora</p>
</div>
<div id="fale_textbox_0">
<h1 id="fale_heading_1"><span class="highlight0">Fale<br> que<br>nem<br>um</span></h1>
</div>
<div id="fale_textbox_2">
<h1 id="fale_heading_2">Rápido</h1>
</div>
<div id="fale_textbox_3">
<h2 id="fale_subheading_2">Sem Sotaque</h2>
</div>
<div id="fale_textbox_1">
<h2 id="fale_subheading_1">GRINGO</h2>
</div>
</section>
<section id="melhor_container">
<h1 id="melhor_heading"><span class="highlight0">A melhor forma<br>
de aprender<br> algo,</h1></span>
<h2 id="melhor_subheading"><span class="highlightOffset">é no ATO</span></h2>
</section>
<section id="conquistar_container">
<div id="heading_container">
<h1 id="conquistar_heading">Aprende a Falar</h1>
<h2 id="conquistar_subheading"><span class="highlight0">Falando com Gringos</span></h2>
</div>
<div id="p_container">
<p id="conquistar text">Vamos conquistar este Inglês</p>
</div>
</section>
<section id="final_container">
<div id="final_heading_band">
<h1 id="final_heading">Venha Fazer Parte da Nossa História</h1>
</div>
<div id="final_form_container">
<p id="final_form_text">Cadastra seu email para fazer uma aula teste com Prof. Andrew</p>
<p id="final_button_text">Estou Dentro</p>
</div>
</section>
</main>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment