Para tratar la creación de columnas de texto vamos a empezar un fichero html nuevo, que se va a llamar 'servicios.html', y que vamos a crear a partir de la base de 'index.html' (se mantiene el <header>, el <nav> y el <footer>).
El texto resaltado en rojo es aquel que cambia respecto al código html de 'index.html'.
Modificamos el <title> de la página.
En el caso del primer elemento (Quiénes somos), como antes no era enlace y ahora sí, le añadimos la etiqueta <a href="index.html"> al principio de Quiénes somos y </a> al final.
En el caso del segundo elemento (Servicios) pasa lo contrario, en 'index.html' era un enlace, pero ahora no lo tiene que ser, por lo que eliminamos la etiqueta <a href="servicios.html"> que había al principio de Servicios y el </a> que había al final en la versión anterior.
En este caso hemos cambiado el nombre del <section> que contiene todo el contenido ya que necesitaremos cambiarle la anchura. Modificamos el título que hay justo antes del contenido de la página por (Servicios), y añadimos una frase como explicación del contenido.
En el siguiente punto sustituiremos <!-- Contenido --> por todo el código de la página.
El siguiente código sustituye (o va detrás de) <!-- Contenido --> del código anterior.
<div id="presentacion">
Centramos nuestros servicios profesionales en la
creación de contenidos multimedia e interactivos
para cualquier plataforma o tecnología moderna
conocida (ordenadores, portátiles, tablets, móviles
y otros nuevos dispositivos "la nueva gama de
frigórificos, lavadoras, televisores o cafeteras a
pedales conectados a Internet". Así, la
compatibilidad de estos contenidos se hace posible
gracias a la utilización de <b>HTML5</b>, <b>CSS3
</b> y sobre todo <b>JavaScript</b> a través de la
biblioteca <b>jQuery</b>, que facilita enormemente
la creación de código al hacer parte del trabajo.
</div>
Todo el contenido que ise mostrará en varias columnas lo escribimos dentro de un <div> con un id="presentacion".
Dentro del texto se han colocado algunos <b>...</b> para resaltar en negrita algunas palabras interesantes.
Es importante remarcar que realmente quien coloca el texto anterior en varias columnas y define la separación que habrá entre ambas, así como el estilo de la línea de separación es CSS3, que es lo que vamos a tratar a continuación:
presentacion es la caja (o div) que agrupa a todo el texto que irá en columnas. Primero definimos un margen (margin) superior e inferior de 25px y derecha e izquierda de 0 píxeles.
Con column-count definimos el número de columnas que queremos. Con column-gap definimos la separación (en píxeles) entre las diferentes columnas. Con column-rule definimos el grosor, el tipo de línea y el color (en este orden) de la línea vertical que separará las diferentes columnas.
Como estas etiquetas todavía no están implementadas en todos los navegadores hay que utilizar los diferentes prefijos para hacerlo compatible con:
Modificamos el <title> de la página.
