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

              
                <div id="container">
  <h1><span>Eric Gill</span><br>
tip&oacute;grafo y escultor</h1>
  <section class="principal">
    <aside>
      <p>informaci&oacute;n personal:
        <br> Nacimiento: 22 de febrero de 1882, Brighton, Reino Unido.
        <br> Fallecimiento: 17 de noviembre de 1940, Municipio de Hillingdon, Reino Unido.
        <br> Nacionalidad: Brit&aacute;nica.
        <br> Educaci&oacute;n: Alma Mm&aacute;ter, Central School of Art and Design.</p>
      <p>informaci&oacute;n profesional:
        <br> Ocupaci&oacute;n: Creador tipogr&aacute;fico, escultor, dise&ntilde;ador gr&aacute;fico e ilustrador,empleador.
      </p>
    </aside>
    <main>

      <p>Arthur Eric Rowton Gill conocido como Eric Gill fue un tip&oacute;grafo y escultor ingl&eacute;s, conocido por su aportaci&oacute;n en el campo de la tipograf&iacute;a, donde cre&oacute; su famosa familia de tipos Gill Sans.</p>

      <h4>biograf&iacute;a y obra</h4>
      <p>Gill empez&oacute; a estudiar en la escuela de Arte de Chichester a la edad de 17 a&ntilde;os, luego continu&oacute; sus estudios en la Central School of Arts and Crafts en Londres, donde fue alumno del tip&oacute;grafo y cal&iacute;grafo Edward
        Johnston. Gill sol&iacute;a hacer trabajos arquitect&oacute;nicos y de escultura adem&aacute;s de crear portadas para diversos libros con base al grabado en madera.</p>

      <p>En 1906 se cas&oacute; con Ethel Moore; &eacute;l y su familia se mudaron a una comunidad de artistas en Ditchling, Sussex.</p>

      <p>En 1914 Gill conoci&oacute; a Stanley Morison, con quien colabor&oacute; haciendo trabajos en la editorial Burns & Oates.</p>

      <p>Entre 1913 y 1917 se dedic&oacute; principalmente a la talla de las Estaciones del Viacrucis de la Catedral de Westminster, la obra que lo puso en primera fila de los escultores ingleses contempor&aacute;neos.</p>

      <p>Durante 1925 Morison se encontraba trabajando para Monotype como consejero tipogr&aacute;fico. Fue entonces cuando se acerc&oacute; a Gill para as&iacute; crear una nueva tipograf&iacute;a, a pesar de que &eacute;ste &uacute;ltimo dec&iacute;a que
        su conocimiento en tipograf&iacute;a era nulo y que no formaba parte de su campo laboral. Despu&eacute;s de un largo periodo de trabajo, Gill cre&oacute; su primer tipo conocido como Perpetua, que en 1929 fue editada por Monotype.</p>

      <p>En 1931 public&oacute; su libro Essay on Typography en el cual utiliz&oacute; su propio tipo, Joanna. Aqu&iacute;, Gill describi&oacute; sus puntos de vista en tipograf&iacute;a y sobre el humanismo en plena era industrial.</p>

      <p>Eric Gill tambi&eacute;n es conocido por su excelente trabajo en el dise&ntilde;o e ilustraci&oacute;n de libros; uno de sus m&aacute;s notables trabajos fue en el libro The Four Gospels.</p>

      <p>Una de las frases c&eacute;lebres de Eric Gill en cuanto a la Tipograf&iacute;a fue: «Las letras son cosas, no dibujos de cosas».</p>

      <p>Hombre profundamente religioso, en sus diarios personales recogi&oacute; sus frecuentes abusos sexuales a sus propias hijas, la relaci&oacute;n incestuosa que manten&iacute;a con su hermana, as&iacute; como sus actividades zoof&iacute;licas con
        su perro.</p>

      <p>Falleci&oacute; el 17 de noviembre de 1940 de c&aacute;ncer en el pulm&oacute;n. Fue sepultado con una l&aacute;pida dise&ntilde;ada por &eacute;l mismo en la que especificaba que era grabador.</p>

      <h4>tipograf&iacute;as creadas por Eric Gill</h4>
      <ul>
        <li>Gill Sans (series 231 - 1928)</li>
        <li>Perpetua y su cursiva, Felicity (1929)</li>
        <li>Solus (1929)</li>
        <li>Golden Cockerel Roman (1930)</li>
        <li>Joanna (Hague & Gill - 1930)</li>
        <li>Bunyan (1934)</li>
      </ul>
    </main>
  </section>
  <footer>
    <p>Texto adaptado de <a href="https://es.wikipedia.org/wiki/Eric_Gill">Wikipedia</a></p>
  </footer>
</div>
              
            
!

CSS

              
                @import url(https://fonts.googleapis.com/css?family=Raleway);

/*h1,h4..*/

@import url(https://fonts.googleapis.com/css?family=Cinzel);

/*text*/

html {
  font-size: 100%;
  box-sizing: border-box;
  font-family: 'Raleway', sans-serif;
  color: #111;
  background: #fefefe;
}

* {
  margin: 0;
  padding: 0;
}

#container {
  max-width: 64rem;
  min-width:18.75rem;/* 300px / 16 */
  margin: 0 auto;
  padding: 1em;
}

h1,
h4 {
  font-family: 'Cinzel', serif;
  font-weight: normal;
  font-size: 1rem;
  padding: 1em 0;
}

h1 {
  display: block;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  border-bottom: 4px double darkorange;
}

h1:first-line {
  font-size: 3rem;
  letter-spacing: 0 .5em;
  /*text-transform:uppercase;*/
  font-variant: small-caps;
}

p {
  padding: .5em 0;
}


/* PRINCIPAL */

.principal {
  line-height: 1.5em;
  border-bottom: 1px solid darkorange;
}

.principal main p:first-child,
.principal aside p:first-of-type {
  margin-top: 0;
  padding-top: 0;
}


/* main */

.principal main {
  margin-top: 2em;
}

.principal main p:first-child:first-line {
  font-variant: small-caps;
  font-size: 120%;
  line-height: 120%;
}

.principal main p:first-child::first-letter {
  color: darkorange;
  font-weight: bold;
  font-size: 5rem;
  float: left;
  line-height: 30%;
  margin: 0 .1em .1em 0;
}

ul {
  list-style: none;
  margin-bottom: 2em;
}

li:before {
  content: "\025b8";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin: 0;
  padding: 0;
}


/* aside */

.principal aside {
  margin-top: 2em;
  font-style: italic;
  color: #555;
  font-family: serif;
  border-bottom: 1px solid #d9d9d9;
  padding: 0 0 1em 0;
}

.principal aside p:first-line {
  font-style: normal;
  /*text-transform:uppercase;*/
  font-variant: small-caps;
  font-size: 120%;
  line-height: 120%;
}


/* FOOTER */

footer {
  font-style: italic;
  color: #555;
  font-family: serif;
  margin-bottom: 2em;
}

footer a {
  cursor: pointer;
  text-decoration: underline;
  color:#555;
}

footer a:hover {
  color: darkorange;
}

@media screen and ( min-width: 40em) {
  h1:first-line {
    letter-spacing: .5em;
  }
  h1 span {
    padding-left: .5em;
  }
  #container {
    display: flex;
    flex-direction: column;
  }
  .principal {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
  .principal main {
    width: 75%;
    padding: 0 0 0 2em;
  }
  .principal aside {
    width: 25%;
    border: none;
    border-right: 1px solid #d9d9d9;
    padding: 0 2em 0 0;
    text-align: right;
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console