Primeiro Teste

index.pug

doctype html
html(lang="pt-br")
  head
    meta(charset="UTF-8")
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    meta(http-equiv="X-UA-Compatible", content="ie=edge")
    title Primeiro Teste
  body
    div.text-center
      h1 CODEPEN Test
      button.btn.btn-verde#btn-test Botão Teste
      p Este é um pequeno teste para aprender as funcionalidades do CODEPEN.
      h2 FONTES
      p Neste teste estamos utilizando a fonte Titillim Web para os títulos e Raleway para o corpo da página.      

primeiro-teste.markdown

Primeiro Teste

A Pen by Gabriel Bertola Bocca on CodePen.

License.

script.babel

$(document).ready(() => {
  $('#btn-test').on('click', () => {
    swal('Teste no CODEPEN', 'BOTÂO TESTE', 'success')
  })
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.11.5/sweetalert2.min.js"></script>

style.sass

body
  background-color: #000
  color: #f0f0f0
  font-family: 'Raleway'
h1, h2, h3, h4, h5, h6
  font-family: 'Titillium Web'
.btn
  padding: .75rem
  border-radius: .25rem
  border: none
  font-size: 1.2rem
  font-family: 'Raleway'
  cursor: pointer
  // text-transform: uppercase
.btn-verde
  color: #fff
  background-color: #27ae60
.text-center
  text-align: center
  
  

styles

<link href="https://fonts.googleapis.com/css?family=Raleway|Titillium+Web" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.11.5/sweetalert2.min.css" rel="stylesheet" />