HTML:::

extends layout

block content
  h1= title
  p Hello, my name is
      strong #{name}
      and this is my personal webpage. I'm not a fan of fancy graphics, themes or effects and I hope you'll forgive me if you are.

  div(id="marcocentral")
    div(id="foto")
      img(src="/images/catfrog.jpg")
    div(id="textofoto")
      p mailto:
        a(href="mailto:esteban.s.f0@gmail.com") esteban.s.f0@gmail.com  (personal)

  div(id="textoabajo")
    ul(id="lista")
      li
        a(href="/about") About
      li
        a(href="http://twitter.com/fro_g") Twitter
      li
        <!--This one must me temporary, gotta set up my own private git/mercurial repo -->
        a(href="https://github.com/fr0gs") Code - Github
      li
        <!--This one must me temporary, gotta set up my own private git/mercurial repo -->
        a(href="https://bitbucket.org/fr0gs") Code - Bitbucket
      li
        a(href="http://deixapaso.wordpress.com") Blog (written in spanish)
      li
        a(href="/fun") Fun





CSS::::

@css {
  #lista {
    font-family: 'Gabriela', sans-serif;
    font-size: 18px;
  }
  ::selection {
      background:#FA5882;
      color:#555;
  }

  ::-moz-selection {
      background:#FA5882;
      color:#555;
  }

  ::-webkit-selection {
      background:#FA5882;
      color:#555;
  }
}
#cabecera
  font-family: 'Gabriela', sans-serif
  font-size: 24px

 (((AQUI ES DD NO TENGO NI IDEA, IGUALE S QUE DEBERIA HACER EL FLOAT
    RELATIVO AL DIV GRANDE QUE LOS CONTIENE, PERO NO SE COMO HACERLO )))

#foto
  float: left
#textofoto
  float: top


h1
  font-family: 'Lily Script One', cursive
  font-size: 36px
body
  padding: 50px
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif
a
  color: #00B7FF