Skip to content

Instantly share code, notes, and snippets.

@AndrewMcSwain

AndrewMcSwain/SassMeister-input-HTML.html

Created May 24, 2015 03:54
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/f24b85c42d97355459c3 to your computer and use it in GitHub Desktop.
Save AndrewMcSwain/f24b85c42d97355459c3 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<main id="grid">
<h1 id="main_heading">INTENSIVAO</h1>
<h2 id="main_subheading">DE INGLES</h2>
<h1 id="info_text_place">Paulista</h1>
<h2 id="info_text_day">Sabados</h2>
<h3 id="info_text_time">8h00 - 11h00</h3>
<h3 id="info_text_time_2"12h00 - 15h00</h3>
<h2 id="info_text_startday_explain">turmas começam<h2>
<h1 id="info_text_startday">10 de Maio</h1>
<h3 id="main_sidebar_subheading">com Andrew</h3>
<p id="main_sidebar_text">Aprende Inglês CONVERSANDO com Professores Nativos</p>
<h1 id="CTA_top_text">Ready to Start Speaking?</h1>
<p id="CTA_top_button_text">Vem Fazer Aula Conosco</p>
<h1 id="aulas_heading_1">Aulas de Inglês</h1>
<h2 id="aulas_subheading_2">Práticas Imersivas</h2>
<h1 id="aulas_heading_2">Aulas</h1>
<h2 id="aulas_subheading_2">com Professores Nativos</h2>
<h1 id="aprende_heading">VOCE APRENDE</h1>
<h2 id="aprende_subheading">Fluidez na hora de Falar</h2>
<p id="aprende_text">Com Pronúncia Perfeita</p>
<p id="CTA_middle_text">Assine Agora</p>
<h1 id="fale_heading_1">Fale que nem um</h1>
<h2 id="fale_subheading_2">GRINGO</h2>
<h1 id="fale_heading_2">Fale que nem um</h1>
<h2 id="fale_subheading_2">GRINGO</h2>
<h1 id="melhor_heading">A melhor forma de aprender algo,</h1>
<h2 id="melhor_subheading">é no ATO</h2>
<h1 id="conquistar_heading">Aprende a Falar
<h2 id="conquistar_subheading">Falando com Gringos</h2>
<p id="conquistar text">Vamos conquistar este Inglês</p>
<h1 id="final_heading">Venha Fazer Parte da Nossa História</h1>
<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>
</main>
Raw
SassMeister-input.scss
// ----
// 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";
$susy: (debug:(image : show));
$primary_font: Arial, sans-serif;
$secondary_font: Helvetica;
$color_1: teal;
$color_2: red;
$color_3: black;
$color_4: white;
#grid{
@include container(12);
gutter-width: 5%;
}
/******* UNIVSERSAL ******/
.hero_container{width:960px; height:1200px; display: inline-block;}
/******* FIRST SECTION *******/
/* */
/* CONTAINERS */
/* */
#main_background_container{img;}
#main_sidebar_container{$binaryColor1;}
#main_border_container{;}
#info_text_1_container{;}
#info_times_container{$binaryColor1 ;opacity}
#info_startday_container{transparent;}
#CTA_Top_container{$binaryColor1;}
#portrait_frame_container{transparent;}
#CTA_Top_container{white;}
/* */
/* IMAGES */
/* */
#portrait{;}
#signature{;}
#cityscape_text_box_bg{;}
is
/* */
/* TEXT */
/* */
#main_heading
#main_subheading
#main_sidebar_subheading
#main_sidebar_text
/*class info*/
#info_text_place
#info_text_day
#info_text_time
#info_text_time_2
#info_text_startday_explain
#info_text_startday
/*CTA*/
#CTA_top_button_text
#CTA_top_text
/* */
/* BUTTONS */
/* */
#CTA_Top
/* */
/* DIVIDERS AND SHAPES */
/* */
#background_overlay_top{$binaryColor1; opaque;}
#background_overlay_bottom{@extend;}
#background_overlay_text_enhance_1{ $binaryColor0; opaque; gradient}/*use gradient producer webtool*/}
#background_overlay_text_enhance_2{
extend;}
#startday_box{$binaryColor1; border:8px solid $binaryColor0;}
#startday_box_drawer{$binaryColor1 light;}
#CTA_Text_box{$binaryColor0;}
#section_1_divider{$binaryColor1 light plus a little rd;}
/******* SECOND SECTION *******/
/* */
/* CONTAINERS */
/* */
#aulas_container_top{bg_img;}
#aulas_container_bottom{bgimg}
#aulas_heading_textbox{$binaryColor1;}
#aulas_title_box{image;}
/* */
/* IMAGES */
/* */
#aulas_image_titlebox
#aulas_image_bg
/* */
/* TEXT */
/* */
#aulas_heading_1{$binaryColor0;}
#aulas_subheading_1{$binaryColor0;}
#aulas_heading_2{$binaryColor1;}
#aulas_subheading_2{$binaryColor1;}
/* */
/* BUTTONS */
/* */
/* */
/* DIVIDERS AND SHAPES */
/* */
#aulas_heading_1_band{$binaryColor0;}
#aulas_subheading_1_band{$binaryColor1;}
#aulas_subheading_2_band{$binaryColor0;}
#aulas_subheading_2_text_effect{$binaryColor0;}
/* */
/******* THIRD SECTION *******/
/* */
/* CONTAINERS */
/* */
#aprende_container{$binaryColor1;}
#aprende_heading_container{;}
#aprende_subheading_container{;}
#aprende_text_container{;}
/* */
/* IMAGES */
/* */
/* */
/* TEXT */
/* */
#aprende_heading{$primaryTextColor;}
#aprende_subheading{$primaryTextColor;}
#aprende_text{$SecondaryTextColor;}
/* */
/* BUTTONS */
/* */
/* */
/* DIVIDERS AND SHAPES */
/* */
#aprende_band_1{$primarycolor}
#aprende_band_1b{$primarycolor dark;}
#aprende_band_2{$primarycolor lighter;}
#aprende_band_2b{$primarycolor light;}
#aprende_text_effect{grey opaque}/*move shadow up a bit*/
/******* FOURTH SECTION *******/
/* */
/* CONTAINERS */
/* */
#fale_container{;}
#CTA_middle_container{$binaryColor0; rounded }
#Fale_band_1{$offsetColor2;}
#Fale_band_2{$binaryColor1 superlight;}
#Fale_Textbox_1{$binaryColor0;}
#Fale_Textbox_2{$binaryColor0;}
#Fale_Textbox_3{$binaryColor0;}
#Fale_Textbox_4{$binaryColor0;}
#Fale_Textbox_5{$binaryColor0;}
/* */
/* IMAGES */
/* */
/* */
/* TEXT */
/* */
#CTA_middle_text{primaryTextColor;;}
#fale_heading_1{$primaryTextColor;;}
#fale_heading_2{$primaryTextColor;;}
#fale_subheading_1{$primaryTextColor;}
#fale_subheading_2{$primaryTextColor;}
/* */
/* BUTTONS */
/* */
#CTA_middle{offsetColor1;}
/* */
/* DIVIDERS AND SHAPES */
/* */
#CTA_middle_button_effect{$binaryColor1}
/******* FIFTH SECTION *******/
/* */
/* CONTAINERS */
/* */
#melhor_container{$binaryColor0;}
#melhor_ato_textbox{$offsetColor2;}
/* */
/* IMAGES */
/* */
/* */
/* TEXT */
/* */
#melhor_heading{$binaryColor1;}
#melhor_subheading{$binaryColor1;}
/* */
/* BUTTONS */
/* */
/* */
/* DIVIDERS AND SHAPES */
#melhor_heading_textbox_1{$binaryColor0;}
#melhor_heading_textbox_2{$binaryColor0;}
#melhor_heading_textbox_3{$binaryColor0;}
/******* SIXTH SECTION *******/
/* */
/* CONTAINERS */
/* */
#conquistar_container{$binaryColor1;}
#heading_container{;}
#subheading_container{$binaryColor2;}
/* */
/* IMAGES */
/* */
#conquistar_bg{;}
/* */
/* TEXT */
/* */
#conquistar_heading{$binaryColor0;}
#conquistar_subheading{$binaryColor1;}
#conquistar_text{$binaryColor1;}
/* */
/* BUTTONS */
/* */
/* */
/* DIVIDERS AND SHAPES */
/******* SEVENTH SECTION *******/
/* */
/* CONTAINERS */
/* */
#final_container{;}
#final_form_container{white;}
/* */
/* IMAGES */
/* */
/* */
/* TEXT */
/* */
#final_heading{$binaryColor0;}
#final_form_text{black;}
#final_button_text{$binaryColor0;}
/* */
/* BUTTONS */
/* */
#final_form_button{$offsetColor2;}
/* */
/* DIVIDERS AND SHAPES */
#final_heading_band{$binaryColor1;}
#final_emaiL_input{$binaryColor0;}
#social_media_buttons{;}
Raw
SassMeister-output.css
Invalid CSS after "...d_container{img": expected "{", was ";}"
Raw
SassMeister-rendered.html
<main id="grid">
<h1 id="main_heading">INTENSIVAO</h1>
<h2 id="main_subheading">DE INGLES</h2>
<h1 id="info_text_place">Paulista</h1>
<h2 id="info_text_day">Sabados</h2>
<h3 id="info_text_time">8h00 - 11h00</h3>
<h3 id="info_text_time_2"12h00 - 15h00</h3>
<h2 id="info_text_startday_explain">turmas começam<h2>
<h1 id="info_text_startday">10 de Maio</h1>
<h3 id="main_sidebar_subheading">com Andrew</h3>
<p id="main_sidebar_text">Aprende Inglês CONVERSANDO com Professores Nativos</p>
<h1 id="CTA_top_text">Ready to Start Speaking?</h1>
<p id="CTA_top_button_text">Vem Fazer Aula Conosco</p>
<h1 id="aulas_heading_1">Aulas de Inglês</h1>
<h2 id="aulas_subheading_2">Práticas Imersivas</h2>
<h1 id="aulas_heading_2">Aulas</h1>
<h2 id="aulas_subheading_2">com Professores Nativos</h2>
<h1 id="aprende_heading">VOCE APRENDE</h1>
<h2 id="aprende_subheading">Fluidez na hora de Falar</h2>
<p id="aprende_text">Com Pronúncia Perfeita</p>
<p id="CTA_middle_text">Assine Agora</p>
<h1 id="fale_heading_1">Fale que nem um</h1>
<h2 id="fale_subheading_2">GRINGO</h2>
<h1 id="fale_heading_2">Fale que nem um</h1>
<h2 id="fale_subheading_2">GRINGO</h2>
<h1 id="melhor_heading">A melhor forma de aprender algo,</h1>
<h2 id="melhor_subheading">é no ATO</h2>
<h1 id="conquistar_heading">Aprende a Falar
<h2 id="conquistar_subheading">Falando com Gringos</h2>
<p id="conquistar text">Vamos conquistar este Inglês</p>
<h1 id="final_heading">Venha Fazer Parte da Nossa História</h1>
<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>
</main>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment