Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ 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

Save Automatically?

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

              
                html
  head
  body.A4
    .sheet
      button.btn.btn-print.btn-sm.btn-light(onClick='handlePrint()')
        | <i class="fa fa-print"></i>
        | Print
      .two-column.resume
        section.resume__section.resume__header
          .resume__content
            h1 Thiago Braga
            .info-item
              span.info-label
                i.fa.fa-location-arrow
              span.info-text
                | 770 Marçal de Arruda Campos St., Bauru, SP, Brazil,
                | Zip: 17063-060
            .info-item
              span.info-label
                i.fa.fa-envelope
              span.info-text contato@thiagobraga.org
            .info-item
              span.info-label
                i.fa.fa-phone
              span.info-text +55 14 99165 5873

        .resume__columns
          .resume__main
            section.resume__section.resume__summary
              .resume__content
                .resume__section-title
                  i.fa.fa-pencil-square-o
                  h2 Professional Summary
                .other
                  .other-info
                    p
                      | PHP & JavaScript developer + Devops Enthusiast with a
                      | decade of success leading teams in delivering appropriate
                      | technology solutions for desktop and mobile products.
                    p
                      | Comprehensive knowledge of enterprise architecture,
                      | agile methodologies, remote work, cloud services and
                      | web-based applications.

            section.resume__section.resume__experience
              .resume__content
                .resume__section-title
                  i.fa.fa-briefcase
                  h2 Employment History
                .xp-item
                  .xp-job
                    | Full Stack Developer / DevOps
                    | <span>@ Grupo Tesseract</span>
                    br
                    small Bauru, Sao Paulo
                  .xp-date Apr. 2017 – current
                  .xp-detail
                    ul
                      li
                        | Design, build or maintain web sites using Laravel,
                        | Bootstrap, Vue, React and WordPress
                      li Create scripting language tools
                      li Automate dev, builds and deploy tasks
                      li
                        | Maintain understanding of current web technologies or
                        | programming practices through continuing education,
                        | reading and sharing knowledge
                      li
                        | Develop databases that support web applications and
                        | web sites
                      li
                        | Develop and document style guidelines for web site
                        | content
                      li Recommend and implement performance improvements
                      li
                        | Select programming languages, design tools,
                        | or applications

                .xp-item
                  .xp-job
                    | Full Stack Developer
                    | <span>@ Jurid Publicações Eletrônicas</span>
                    br
                    small Bauru, Sao Paulo
                  .xp-date Aug. 2018 – Apr. 2020
                  .xp-detail
                    ul
                      li
                        | Build or maintain web sites using native PHP, Python
                        | and JavaScript
                      li
                        | Maintain and improve production databases running on
                        | Elasticsearch, Redis, PostgreSQL and MySQL
                      li Provide backup and maintenance of GNU/Linux servers
                      li Provide documentation for existent and new applications

          .resume__side
            section.resume__section.resume__skills
              .resume__content
                .resume__section-title
                  i.fa.fa-align-center
                  h2 Skills
                .resume__text
                  .extra
                    .extra-info
                      | PHP
                      br
                      small PHP 5 · PHP 7 · Laravel
                    .extra-details
                      .extra-details__progress(style='width:90%')
                  .extra
                    .extra-info
                      | JavaScript
                      br
                      small React · React Native · Vue
                    .extra-details
                      .extra-details__progress(style='width:87%')
                  .extra
                    .extra-info
                      | HTML
                      br
                      small HTML5 · Markdown · Pug
                    .extra-details
                      .extra-details__progress(style='width:100%')
                  .extra
                    .extra-info
                      | CSS
                      br
                      small Stylus · Sass · Bootstrap
                    .extra-details
                      .extra-details__progress(style='width:100%')
                  .extra
                    .extra-info
                      | DevOps
                      br
                      small Docker · Shell · AWS · CI/CD
                    .extra-details
                      .extra-details__progress(style='width:82%')
                  .extra
                    .extra-info
                      | Databases
                      br
                      small PostgreSQL · MySQL · Elasticsearch · Redis
                    .extra-details
                      .extra-details__progress(style='width:80%')
                  .extra
                    .extra-info
                      | Operating Systems
                      br
                      small
                        | <i class="fa fa-linux"></i> GNU/Linux ·
                        | <i class="fa fa-apple"></i> Mac OS ·
                        | <i class="fa fa-windows"></i> Windows
                    .extra-details
                      .extra-details__progress(style='width:90%')

            section.resume__section.resume__languages
              .resume__content
                .resume__section-title
                  i.fa.fa-globe
                  h2 Languages
                .extra
                  .extra-info Portuguese <small>(native)</small>
                  .extra-details
                    .extra-details__progress(style='width:100%')
                .extra
                  .extra-info English
                  .extra-details
                    .extra-details__progress(style='width:65%')
                .extra
                  .extra-info Spanish
                  .extra-details
                    .extra-details__progress(style='width:20%')

              
            
!

CSS

              
                // Tested colors
// #f68931 #5695cd #8b63bf #d0465f
$accentColor = #5695cd
$lightAccentColor = lighten($accentColor, 50%)
$progressBackground = #d1d9e1
$unicodeRange = U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, \
  U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, \
  U+FEFF, U+FFFD

// Google Fonts
@font-face
  font-family 'Open Sans'
  font-style normal
  font-weight 400
  font-display swap
  unicode-range $unicodeRange
  src local('Open Sans Regular'), local('OpenSans-Regular'), \
    url(https://fonts.gstatic.com/s/opensans/v16/mem8YaGs126MiZpBA-UFVZ0b.woff2) \
    format('woff2')

@font-face
  font-family 'Roboto'
  font-style normal
  font-weight 400
  font-display swap
  unicode-range $unicodeRange
  src local('Roboto'), local('Roboto-Regular'), \
    url(https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu4mxK.woff2) \
    format('woff2')

@page
  size A4

body
  color-adjust exact
  background-color #fff
  font-family 'Open Sans', sans-serif
  font-weight 300
  display flex
  justify-content center

.btn-print
  z-index 1
  position absolute
  right 20px
  top 20px

.resume
  display block
  font-family 'Roboto', sans-serif
  font-size 13.0736px
  font-weight 400
  line-height 1.5
  min-height 1090.41px

  h1
    font-size 2.86em
    font-weight 600
    letter-spacing -0.5px

  h2
    font-size 1.43em
    font-weight 600
    line-height 1
    margin-bottom 0

  p
    margin-bottom 1em
    &:last-child
      margin-bottom 0

  ul
    padding-left 20px

  .resume__header
  .resume__section
    font-family 'Open Sans', sans-serif
    font-size 0.95em

  .resume__header
    padding 6em 4em 0

  .resume__section
    margin-bottom 4em
    &:last-child
      padding-bottom 0

  .resume__section-title
    display flex
    align-items center
    margin-bottom 1.43em
    > i
      margin-right 0.63em
      font-size 1.14em
      background-color $accentColor
      color white
      border 0.25em solid $lightAccentColor
      border-radius 50%
      width 2.51em
      height 2.51em
      display flex
      align-items center
      justify-content center
      line-height 1.6

    > h2
      margin-top 0
      font-size 1.5em

  .resume__columns
    overflow hidden
    padding 4em
    padding-top 0

  .resume__main
    float left
    width 75%
    padding-right 6em

  .resume__side
    float left
    width 25%

  .other-info p > b
    color #555

  .info-item
    margin-bottom .2em
    font-weight 300
    &:last-child
      margin-bottom 0

  .info-label
    display inline-block
    padding-right 0.63em
    font-size 1.14em
    min-width 2.19em
    text-align center
    i
      color $accentColor

  .xp-item
    margin-bottom 4em
    &:last-child
      margin-bottom 0

  .xp-job
    font-size 1.14em
    font-weight 600
    line-height 1.25
    span
    small
      font-weight 400
    small
      font-size 0.9em

  .xp-date
    font-size 0.8em
    margin-top 0.3em
    margin-bottom 1em
    color $accentColor

  .extra
    margin-bottom 2em
    &:last-child
      margin-bottom 0

  .extra-info
    small
      color #666
      display inline-block
      font-size 0.7em

  .extra-details
  .extra-details__progress
    border-radius 6px

  .extra-details
    margin-top 0.5em
    background-color $progressBackground
    width 100%
    height 5px
    position relative

  .extra-details__progress
    background-color $accentColor
    height 5px
    position absolute
    top 0
    left 0

  .lang-item
    margin-bottom 2em
    &:last-child
      margin-bottom 0

  .lang-label
    width 8em

@media print
  // Override Bootstrap body rule
  body
    min-width initial !important

  .btn-print
    display none
              
            
!

JS

              
                const handlePrint = () => window.print()

              
            
!
999px

Console