- Teoría
- Teoría
Distribuimos las columnas del pie
Ya repartimos el contenido del pie de página en tres columnas. Ahora definiremos su ancho y el espacio entre ellas.
Definir los anchos es sencillo, pero el espacio entre las columnas no es uniforme. Para obtener las dos separaciones del diseño, no basta con justify-content. Usaremos margin.
Un margen derecho automático en la primera columna empujará las otras dos hacia el extremo derecho del contenedor flex. Para separar la segunda de la tercera, usaremos un margen fijo en píxeles.
- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="portfolio-decorative.css">
<link rel="stylesheet" href="portfolio-outline.css">
<link rel="stylesheet" href="style.css">
<title>Portafolio</title>
</head>
<body>
<header class="page-header">
<h1 class="title">Mapache No Identificado</h1>
<p class="subtitle">Desarrollador web junior</p>
</header>
<main class="page-main">
<section class="bio">
<h2 class="section-title">Un poco sobre mí</h2>
<p>Puedo crear páginas web o no crearlas. Puedo hacer que otros las creen y atormentar a quienes lo hacen mal.</p>
<p>Puedo explicar por qué el presupuesto para crear 10 páginas alcanzó para 2 (una de ellas hecha por voluntarios) y todavía falta pagarle al diseñador por el desgaste del mouse. Puedo lograr que me crean.</p>
</section>
<section class="photo">
<h2 class="section-title">Fotografía</h2>
<img src="img/avatar.svg" width="200" height="200" alt="Foto de Mapache No Identificado">
<p class="photo-caption">Mapache No Identificado Jr.</p>
</section>
</main>
<footer class="page-footer">
<div class="container">
<p class="contacts">
<a href="mailto:unknown@raccoon.ru">unknown@raccoon.ru</a><br>
<a href="tel:+7999999999">+7 999 999-99-99</a>
</p>
<p class="copyright">© Mapache</p>
<img class="logo" src="img/raccoon_logo.svg" width="70" height="54" alt="Logotipo del mapache">
</div>
</footer>
</body>
</html>
CSS
body {
margin: 0;
}
.page-main {
display: flex;
justify-content: space-between;
width: 550px;
margin-right: auto;
margin-left: auto;
}
.bio {
width: 270px;
padding: 10px;
}
.photo {
width: 200px;
padding: 10px;
}
.container {
display: flex;
width: 550px;
margin: 0 auto;
padding: 10px;
}
Ha ido a otra página
Haga clic dentro del mininavegador para poner el foco en esta ventana.
ObjetivosRealizado
0
- Define un ancho de
160pxy un margen derecho automático para la primera columna, que tiene la clasecontacts. - Define un ancho de
170pxpara la segunda columna, que tiene la clasecopyright. - Define un ancho de
70pxy un margen izquierdo de20pxpara la tercera columna, que tiene la claselogo.