Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                .df__container#flyer
  .df__header
    .df__logo
  .df__content
    .df__datetime
      .df__icon.df__icon--calendar
      // DATA DA PALESTRA 
      h3.df__date 01/12
      // HORA DA PALESTRA 
      h3.df__time 19:00
    .df__divider
    .df__talkinfo
      // TITULO DA PALESTRA 
      h4.df__title Palestrandis no DevTalkis
      // DESCRIÇÃO DO PALESTRANTE
      p.df__desc Mussum Ipsum, cacilds vidis litro abertis. Admodum accumsan disputationi eu sit. Vide electram sadipscing et per. A ordem dos tratores não altera o pão duris. Paisis, filhis, espiritis santis. Nec orci ornare consequat. Praesent lacinia ultrices consectetur. Sed non ipsum felis. 
    .df__userinfo
      .df__useravatar
        // FOTO D0 PALESTRANTE 
        img(src="http://www.diariodocentrodomundo.com.br/wp-content/uploads/2014/07/mussum-1.jpg", alt="speaker image")
      // NOME D0 PALESTRANTE
      strong.df__username Mussum
      // EMPRESA D0 PALESTRANTE
      span.df__usercompany @trapalhoes
  .df__location
    .df__icon.df__icon--location
    .df__directions
      // LOCAL DA PALESTRA 
      .df__place Company Name
      .df__address Wall Street
      .df__zip Bauru - SP, CEP 17030-204
  .df__footer
    .df__support
      label Apoio:
      // LOGO DA EMPRESA APOIADORA 
      img.df__partner(src="http://www.newdesignfile.com/postpic/2016/05/facebook-logo-icon-white_399793.png", alt="company name")
    .df__social
      label Social:
      span @devtalksbauru
      // REDES SOCIAIS DOS APOIADORES 
      span @outroapoio
      
      
a.button(href="#", download="my-file-name.png", id="downloadLink") DOWNLOAD
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Open+Sans|Quicksand');

html,
body {
  height: 100%;
  width: 100%;
}

* {
  box-sizing: border-box;
  color: white;
}

body {
  align-items: center;
  display: flex;
  flex-direction: column;
  font-family: "Open Sans", sans-serif;
  justify-content: center;
  background-attachment: fixed;
  background-image: linear-gradient( 135deg, #90F7EC 10%, #C2FFD8 100%);
  min-height: 1500px;
  padding: 6em;
}

label {
  font-family: "Quicksand", sans-serif;
  font-size: 30px;
  font-weight: bold;
  letter-spacing: -3px;
  margin: 0 42px 0 0;
}

strong {
  font-size: 21px;
}

span {
  font-style: italic;
  font-size: 20px;
  font-weight: lighter;
  
  & + & {
    margin: 0 0 0 20px;
  }
}

.button {
  background-color: #E91E63;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  margin: 40px 0 0;
  padding: 15px 30px;
  text-decoration: none;
  
  &:hover {
    background-color: darken(#E91E63, 10);
  }
}

.df {
  
  &__container {
    background-color: #1f1f1f;
    min-height: 1280px;
    max-width: 905px;
    overflow: hidden;
    position: relative;
    width: 100%;
    z-index: 1;
  }
  
  &__header {
    background-image: url('https://raw.githubusercontent.com/DevTalksBauru/devtalksbauru.github.io/develop/assets/flyer-bg.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
    align-items: center;
    display: flex;
    justify-content: center;
    height: 400px;
    width: 100%;
  }
  
  &__logo {
    @extend %logo;
    height: 100%;
    width: 50%;
    background-position: center center;
    background-repeat: no-repeat;
  }
  
  &__content {
    align-items: center;
    background-color: #ef4a2f;
    border-bottom: 7px solid white;
    border-top: 7px solid white;
    display: flex;
    height: 374px;
    padding: 33px;
  }
  
  &__divider {
    background-color: white;
    border-radius: 25px;
    height: 208px;
    margin: 0 32px;
    padding: 0 4px;
    width: 1px;
  }
  
  &__datetime {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  &__date,
  &__time {
    font-size: 40px;
    margin: 0;
  }
  
  &__date {
    font-weight: lighter;
    margin-top: 25px;
  }
    
  &__time {
    margin-top: 10px;
  }
  
  &__title {
    font-size: 30px;
    font-weight: lighter;
    margin-bottom: 32px;
    text-transform: uppercase;
  }
  
  &__desc {
    font-size: 24px;
    font-weight: lighter;
  }
  
  &__icon {
    
    &--calendar {
      @extend %icon-calendar;
      height: 62px;
      width: 62px;
    }
    
    &--location {
      @extend %icon-location;
      height: 109px;
      margin-right: 40px;
      width: 91px;
    }
  }
  
  &__userinfo {
    align-items: center;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    margin: -33px -33px -33px 20px;
    height: calc(100% + 66px);
    padding: 0 20px 0 0;
    
    &,
    > * {
      position: relative;
    }
    
    &::before {
      background-color: #a13d2c;
      position: absolute;
      width: 140%;
      height: 130%;
      content: '';
      transform: skew(40deg);
      right: -210px;
    }
  }
  
  &__useravatar {
    border-radius: 50%;
    height: 190px;
    margin: -160px 0 40px;
    position: relative;
    width: 206px;
    z-index: 3;
    
    &::before {
      @extend %icon-avatar;
      content: '';
      position: absolute;
      z-index: 5;
      height: 209px;
      width: 206px;
      top: 0;
    }
    
    img {
      border-radius: 50%;
      position: absolute;
      left: 0;
      top: -5px;
      max-height: 217px;
      width: 100%;
      padding: 12px;
      z-index: 2;
    }
  }
  
  &__usercompany {
    margin-top: 15px;
  }
  
  &__location {
    align-items: center;
    background-color: #2c2c2c;
    height: 283px;
    display: flex;
    padding: 0 47px;
  }
  
  &__directions * {
    color: #f1e8d9;
    font-size: 28px;
    font-weight: lighter;
    letter-spacing: -1px;
    
    &:not(:last-of-type) {
      margin-bottom: 15px;
    }
  }
  
  &__footer {
    justify-content: space-around;
    flex-direction: column;
    display: flex;
    height: 222px;
    padding: 0 48px;
    
    > * {
      align-items: center;
      display: flex;
      height: 50%;
    }
  }
  
  &__partner {
    max-width: 100px;
    
    & + & {
      margin: 0 0 0 20px;
    }
  }
}

// BASE64 URLS
%logo {
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20692.531%20293.375%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%20%7B%20fill%3A%20%23191818%3B%20%7D%20.cls-1%2C%20.cls-2%2C%20.cls-3%20%7B%20fill-rule%3A%20evenodd%3B%20%7D%20.cls-2%20%7B%20fill%3A%20%23ef4a2f%3B%20%7D%20.cls-3%20%7B%20fill%3A%20%23f1e8d9%3B%20%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22Balloon_%22%20data-name%3D%22Balloon%20%26lt%3B%2F%26gt%3B%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M599.03%20186.77a93.815%2093.815%200%200%201-22.89-2.822L542.26%20190l6.47-17.878a93.537%2093.537%200%201%201%2050.3%2014.65z%22%2F%3E%3Cg%20id%3D%22Sign%22%3E%3Cg%20id%3D%22_%22%20data-name%3D%22%26lt%3B%22%3E%3Cpath%20id%3D%22Rounded_Rectangle_1_copy_5%22%20data-name%3D%22Rounded%20Rectangle%201%20copy%205%22%20class%3D%22cls-2%22%20d%3D%22M529.79%2089.438l29.26%2029.138a8.48%208.48%200%200%201%20.04%2011.93%208.327%208.327%200%200%201-11.84.04l-29.26-29.137a8.48%208.48%200%200%201-.04-11.93%208.327%208.327%200%200%201%2011.84-.043z%22%2F%3E%3Cpath%20id%3D%22Rounded_Rectangle_1%22%20data-name%3D%22Rounded%20Rectangle%201%22%20class%3D%22cls-2%22%20d%3D%22M517.52%2088.635l29-29.333a8.395%208.395%200%201%201%2011.91%2011.834l-29%2029.332a8.394%208.394%200%201%201-11.91-11.833z%22%2F%3E%3C%2Fg%3E%3Cpath%20id%3D%22_2%22%20data-name%3D%22%2F%22%20class%3D%22cls-3%22%20d%3D%22M558.95%20143.215L617.57%2038.17a8.395%208.395%200%201%201%2014.66%208.183L573.61%20151.4a8.395%208.395%200%201%201-14.66-8.185z%22%2F%3E%3Cg%20id%3D%22_3%22%20data-name%3D%22%26gt%3B%22%3E%3Cpath%20id%3D%22Rounded_Rectangle_1_copy_6%22%20data-name%3D%22Rounded%20Rectangle%201%20copy%206%22%20class%3D%22cls-2%22%20d%3D%22M679.13%20101.256l-28.73%2029.26a8.273%208.273%200%200%201-11.76.04%208.413%208.413%200%200%201-.04-11.844l28.72-29.26a8.285%208.285%200%200%201%2011.77-.04%208.422%208.422%200%200%201%20.04%2011.844z%22%2F%3E%3Cpath%20id%3D%22Rounded_Rectangle_1_copy_6-2%22%20data-name%3D%22Rounded%20Rectangle%201%20copy%206%22%20class%3D%22cls-2%22%20d%3D%22M667.97%20100.455L638.99%2071.39a8.5%208.5%200%200%201-.04-11.9%208.21%208.21%200%200%201%2011.73-.04l28.98%2029.064a8.51%208.51%200%200%201%20.04%2011.9%208.21%208.21%200%200%201-11.73.04z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3Cpath%20id%3D%22Talks%22%20class%3D%22cls-3%22%20d%3D%22M309.718%20180.5a9.6%209.6%200%200%200-9.626-9.625h-74.726a9.49%209.49%200%200%200-9.625%209.625%209.747%209.747%200%200%200%209.627%209.8h27.65v93.45a9.6%209.6%200%200%200%209.626%209.625%209.49%209.49%200%200%200%209.625-9.625V190.3h27.825a9.864%209.864%200%200%200%209.626-9.8zm53.723%2034.826a9.375%209.375%200%200%200-9.273-9.45c-4.55%200-8.05%203.325-9.1%207.7a39.892%2039.892%200%200%200-23.275-7.7A40.3%2040.3%200%200%200%20292.04%20219a44.16%2044.16%200%200%200-11.9%2030.8%2044.79%2044.79%200%200%200%2011.9%2030.8%2040.653%2040.653%200%200%200%2029.75%2012.775%2039.743%2039.743%200%200%200%2023.276-7.525%209.527%209.527%200%200%200%209.1%207.525%209.336%209.336%200%200%200%209.275-9.275v-68.776zm-25.373%2052.5a22.62%2022.62%200%200%201-16.275%206.825%2022.043%2022.043%200%200%201-16.275-6.823%2026.252%2026.252%200%200%201-6.65-18.026c0-7.35%202.45-13.65%206.65-18.024a21.1%2021.1%200%200%201%2016.276-7.175%2021.632%2021.632%200%200%201%2016.276%207.176%2025.734%2025.734%200%200%201%206.824%2018.025%2026.374%2026.374%200%200%201-6.824%2018.026zm31.147-87.326v103.25a9.714%209.714%200%200%200%2019.428%200V180.5a9.714%209.714%200%200%200-19.427%200zm34.478%20112.877a9.75%209.75%200%200%200%209.8-9.625v-15.4l9.62-9.626%2025.73%2031.15a9.287%209.287%200%200%200%207.35%203.5%209.185%209.185%200%200%200%206.12-2.274%209.7%209.7%200%200%200%201.4-13.65l-26.95-32.376%2026.25-26.25a9.51%209.51%200%200%200%200-13.65%209.828%209.828%200%200%200-13.65%200l-35.87%2035.875V180.5a9.75%209.75%200%200%200-9.8-9.625%209.6%209.6%200%200%200-9.63%209.625v103.25a9.6%209.6%200%200%200%209.63%209.625zm67.9-12.075c7%205.6%2017.5%2011.9%2031.15%2012.075a39.827%2039.827%200%200%200%2022.75-7c6.3-4.55%2011.02-11.725%2011.02-20.3a22.66%2022.66%200%200%200-3.32-11.55%2027.2%2027.2%200%200%200-12.43-10.326%2062.953%2062.953%200%200%200-16.27-5.073h-.18l-.17-.175c-5.95-1.05-10.5-2.624-12.78-4.2a4.686%204.686%200%200%201-1.92-1.75%201.886%201.886%200%200%201-.35-1.4c0-.874.52-2.45%202.8-4.024a17.8%2017.8%200%200%201%2010.5-3.15c5.6%200%2010.5%202.8%2016.1%206.475a9.262%209.262%200%200%200%2012.95-2.45%209.673%209.673%200%200%200-2.8-12.95c-5.6-3.85-14.18-9.625-26.25-9.625a37.67%2037.67%200%200%200-21.53%206.476c-5.77%204.376-10.32%2011.2-10.32%2019.25a21.258%2021.258%200%200%200%202.97%2011.026%2029.226%2029.226%200%200%200%2012.08%2010.15%2067.208%2067.208%200%200%200%2015.22%204.55h.18c6.3%201.225%2011.55%203.15%2014%204.9a5.216%205.216%200%200%201%202.27%202.1%202.618%202.618%200%200%201%20.53%201.75c0%201.4-.7%203.15-3.15%205.25a23.366%2023.366%200%200%201-11.9%203.326c-6.83.175-14.7-3.85-19.25-7.7a9.106%209.106%200%200%200-13.13%201.4%209.337%209.337%200%200%200%201.23%2012.948z%22%2F%3E%3Cpath%20id%3D%22Dev%22%20class%3D%22cls-2%22%20d%3D%22M9.64%20293.375h20.65a61.25%2061.25%200%200%200%200-122.5H9.64A9.49%209.49%200%200%200%20.015%20180.5v103.25a9.6%209.6%200%200%200%209.625%209.625zm9.8-103.077h10.85a41.826%2041.826%200%200%201%200%2083.652H19.44V190.3zm114.8%20103.077c12.425%200%2022.75-3.675%2031.325-11.55%204.025-3.675%202.275-8.925%200-11.375-2.275-2.8-9.45-3.325-13.125.525-4.375%203.325-11.9%204.9-18.2%204.375-6.126-.525-13.126-3.675-16.8-7.875-3.15-2.976-5.075-7.526-5.95-11.55h55.65c4.9%200%208.576-2.8%209.1-7a4.845%204.845%200%200%200%20.176-1.576v-.877c-1.4-23.625-19.425-40.6-42.175-40.6-23.974%200-42.524%2019.95-42.7%2043.75.175%2023.8%2018.725%2043.576%2042.7%2043.75zm0-70.876c15.225%201.223%2024.15%2011.55%2025.9%2018.55h-49.526c1.4-7.177%208.75-17.85%2023.626-18.55zm107.8-14.527c-4.55-2.1-9.8.35-11.725%205.075l-20.3%2047.6-20.125-47.6c-2.1-4.726-7.525-7.177-11.725-5.076-4.9%202.1-7.175%207.175-5.075%2011.9l28.35%2067.9a2.073%202.073%200%200%200%20.7%201.225c0%20.174%200%20.174.175.174a5.318%205.318%200%200%201%20.875%201.226.35.35%200%200%200%20.35.174%205.94%205.94%200%200%200%201.05%201.05.17.17%200%200%201%20.175.175%2015.772%2015.772%200%200%200%201.575.874h.35v.174a4.12%204.12%200%200%201%201.4.35h.35a6.028%206.028%200%200%200%201.575.174%206.565%206.565%200%200%200%201.75-.175h.35a3.3%203.3%200%200%201%201.4-.35v-.176h.35a3.14%203.14%200%200%200%201.225-.875.17.17%200%200%201%20.175-.176%205.94%205.94%200%200%200%201.05-1.05.17.17%200%200%200%20.175-.175c.35-.35.7-.875%201.05-1.225a.17.17%200%200%200%20.176-.175%203.756%203.756%200%200%200%20.7-1.226l28.7-67.9c2.098-4.725-.177-9.8-5.077-11.9z%22%2F%3E%3C%2Fsvg%3E');
}

%icon-location {
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2291%22%20height%3D%22109%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23F1E8D9%22%20d%3D%22M84.04%2070.2c-3.59%206.567-8.567%2013.22-14.793%2019.777-10.493%2011.05-20.862%2017.993-21.3%2018.283-.74.493-1.594.74-2.447.74-.854%200-1.707-.247-2.448-.74-.437-.29-10.806-7.233-21.3-18.283C15.528%2083.42%2010.55%2076.767%206.96%2070.2%202.34%2061.755%200%2053.408%200%2045.392c0-12.125%204.732-23.524%2013.326-32.097C21.92%204.72%2033.346%200%2045.5%200c12.153%200%2023.58%204.72%2032.173%2013.295C86.267%2021.868%2091%2033.267%2091%2045.392c0%208.016-2.34%2016.363-6.96%2024.808zM45.5%208.806c-20.222%200-36.673%2016.412-36.673%2036.586%200%2024.806%2028.1%2047.462%2036.673%2053.794%208.57-6.33%2036.673-28.986%2036.673-53.794%200-20.174-16.452-36.586-36.673-36.586zm0%2054.65c-9.986%200-18.11-8.103-18.11-18.064%200-9.962%208.125-18.066%2018.11-18.066s18.11%208.104%2018.11%2018.066c0%209.96-8.125%2018.065-18.11%2018.065zm0-27.324c-5.118%200-9.282%204.154-9.282%209.26%200%205.105%204.164%209.26%209.282%209.26s9.282-4.155%209.282-9.26c0-5.106-4.164-9.26-9.282-9.26z%22%2F%3E%3C%2Fsvg%3E');
}

%icon-calendar {
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2262%22%20height%3D%2262%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22%23FFF%22%20d%3D%22M7.75%209.687v-7.75C7.75.867%208.617%200%209.687%200s1.938.867%201.938%201.937v7.75c0%201.07-.867%201.938-1.938%201.938-1.07%200-1.937-.867-1.937-1.938zm32.937%201.938c1.07%200%201.938-.867%201.938-1.938v-7.75C42.625.867%2041.758%200%2040.687%200c-1.07%200-1.937.867-1.937%201.937v7.75c0%201.07.867%201.938%201.937%201.938zM62%2046.5C62%2055.06%2055.06%2062%2046.5%2062%2037.94%2062%2031%2055.06%2031%2046.5%2031%2037.94%2037.94%2031%2046.5%2031%2055.06%2031%2062%2037.94%2062%2046.5zm-3.875%200c0-6.41-5.215-11.625-11.625-11.625S34.875%2040.09%2034.875%2046.5%2040.09%2058.125%2046.5%2058.125%2058.125%2052.91%2058.125%2046.5zM15.5%2023.25H7.75V31h7.75v-7.75zM7.75%2042.625h7.75v-7.75H7.75v7.75zM19.375%2031h7.75v-7.75h-7.75V31zm0%2011.625h7.75v-7.75h-7.75v7.75zm-15.5%203.49v-26.74H46.5v7.75h3.875V12.01c0-2.353-1.877-4.26-4.197-4.26h-1.616v1.937c0%202.135-1.736%203.875-3.875%203.875-2.138%200-3.875-1.74-3.875-3.875V7.75h-23.25v1.937c0%202.135-1.736%203.875-3.875%203.875-2.138%200-3.874-1.74-3.874-3.875V7.75H4.2C1.88%207.75%200%209.657%200%2012.01v34.104c0%202.346%201.88%204.26%204.2%204.26h22.925V46.5H4.2c-.177%200-.325-.182-.325-.386zM38.75%2031v-7.75H31V31h7.75zm13.563%2015.5H46.5v-5.813c0-1.07-.867-1.937-1.938-1.937-1.07%200-1.937.867-1.937%201.937v7.75c0%201.07.867%201.938%201.937%201.938h7.75c1.07%200%201.938-.867%201.938-1.937s-.867-1.938-1.937-1.938z%22%2F%3E%3C%2Fsvg%3E');
}

%icon-avatar {
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22206%22%20height%3D%22209%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20stroke-width%3D%229%22%20stroke%3D%22%23FFF%22%20fill%3D%22none%22%20d%3D%22M103%20196.27c-7.897%200-15.563-.982-22.888-2.823l-33.878%206.05L52.7%20181.62c-25.977-16.59-43.2-45.654-43.2-78.735C9.5%2051.31%2051.36%209.5%20103%209.5s93.5%2041.81%2093.5%2093.385c0%2051.576-41.86%2093.386-93.5%2093.386z%22%2F%3E%3C%2Fsvg%3E');
}
              
            
!

JS

              
                $(".button").on("click", function(event) {
    var button = document.getElementById('downloadLink');
    event.preventDefault();
    html2canvas(document.body, {
        allowTaint: true,
        taintTest: false,
        onrendered: function(canvas) {
          window.open(canvas.toDataURL('image/png'));
          button.href = dataURL;
        }
    });
});
              
            
!
999px

Console