Hola como veran no puedo alinear el asida de mi pagina.
lo quiero aquí.
https://i.ibb.co/1bmy1yr/2013-05-25-copia.jpg
Creo que estoy maquetando mal
lo quiero aquí.
https://i.ibb.co/1bmy1yr/2013-05-25-copia.jpg
Código (html4strict) [Seleccionar]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pati</title>
<link href="https://fonts.googleapis.com/css2?family=Baloo+Thambi+2:wght@700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<header class="cabecera text-aling">
<div class="caja izquierda">
<a href="index.html" class="ancla logo">PATI</a>
<p>Siempre pensando en la gente.</p>
</div>
<div class="caja derecha">
<p class="contratar">Contratar: 0388-123456</p>
<p class="emergencias">Emergencias: 0303456</p>
<a href="registro.html" class="ancla derecha">Ingresar</a>
</div>
</header>
<nav>
<a class="nav-enlace" href="#">Inicio</a>
<a class="nav-enlace" href="#">Programación</a>
<a class="nav-enlace" href="#">Noticias</a>
<a class="nav-enlace" href="#">Cocina</a>
<a class="nav-enlace" href="#">Animes</a>
<a class="nav-enlace" href="#">Contacto</a>
</nav>
<main>
<section class="flex">
<div class="izquierda">
<p class="titulo">¿Quienes somos?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi dolores odio odit? Quidem
asperiores,
iure enim reprehenderit libero ducimus voluptatibus pariatur veniam modi veritatis! Magni vel
sapiente
reiciendis nihil enim.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi dolores odio odit? Quidem
asperiores,
iure enim reprehenderit libero ducimus voluptatibus pariatur veniam modi veritatis! Magni vel
sapiente
reiciendis nihil enim.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi dolores odio odit? Quidem
asperiores,
iure enim reprehenderit libero ducimus voluptatibus pariatur veniam modi veritatis! Magni vel
sapiente
reiciendis nihil enim.</p>
<p> ...</p>
</div>
</section>
<section class="flex text-align">
<div class="columna">
<h1>Plan Joven</h1>
<p class="precio">$600</p>
<p>Lorem ipsum dolor, sit amet consectetur.</p>
<hr>
<p>Lorem ipsum dolor </p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<hr>
<a href="#" class="btn-comprar">Comprar</a>
</div>
<div class="columna">
<h1>Plan Adulto</h1>
<p class="precio">$900</p>
<p>Lorem ipsum dolor, sit amet consectetur.</p>
<hr>
<p>Lorem ipsum dolor </p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<hr>
<a href="#" class="btn-comprar">Comprar</a>
</div>
<div class="columna">
<h1>Plan Leyenda</h1>
<p class="precio">$1200</p>
<p>Lorem ipsum dolor, sit amet consectetur.</p>
<hr>
<p>Lorem ipsum dolor </p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<hr>
<a href="#" class="btn-comprar">Comprar</a>
</div>
</section>
</main>
<aside class="side">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore alias qui distinctio vero
repudiandae aliquam mollitia obcaecati cum, quis voluptatibus deleniti quia inventore, eius totam unde! Ad
corrupti voluptatem maiores!</p>
</aside>
<footer>
<ul>
<li><a href="aviso-legal.html">Aviso legal</a></li>
<li><a href="privacidad.html">Privacidad</a></li>
<li><a href="contactar.html">Contactar</a></li>
</ul>
</footer>
</body>
</html>
Creo que estoy maquetando mal
Código (css) [Seleccionar]
p {
margin: 0px auto;
}
.ancla {
text-decoration: none;
}
.logo {
font-size: 80px;
color: lightseagreen;
font-family: 'Baloo Thambi 2', cursive;
}
.titulo {
font-size: 40px;
color: lightseagreen;
font-family: 'Baloo Thambi 2', cursive;
}
.cabecera {
margin: 10px auto;
padding: 10px;
width: 90%;
padding-bottom: 180px;
}
.side{
margin: 0 auto;
float: right;
width: 24%;
}
.flex {
display: flex;
width: 70%;
}
.text-align {
text-align: center;
}
.caja {
margin: 10px auto;
padding: 10px;
width: 23%;
}
.izquierda {
float: left;
}
.derecha {
float: right;
}
.contratar {
background: rgb(85, 85, 247);
border-radius: 8px;
color: white;
text-align: center;
font-size: 26px;
margin: 10px auto;
}
.emergencias {
background: salmon;
border-radius: 8px;
color: white;
text-align: center;
font-size: 26px;
margin: 10px auto;
}
.columna {
background: rgb(238, 238, 238);
color: #333;
border: 1px solid #333;
margin: 10px auto;
padding: 10px;
border-radius: 5px;
box-shadow: 5px 5px;
width: 23%;
box-sizing: border-box;
display: inline-block;
}
.precio {
font-size: 50px;
color: lightseagreen;
}
.btn-comprar {
background: salmon;
display: block;
padding: 10px;
color: seashell;
text-decoration: none;
border-radius: 4px;
}
.btn-comprar:hover{
background: rgb(97, 97, 248);
}
nav {
padding: 10px;
display: flex;
justify-content: space-around;
}
.nav-enlace {
color: whitesmoke;
background-color: rgb(80, 80, 241);
padding: 10px 40px;
display: inline-block;
text-decoration: none;
font-size: 20px;
border-radius: 6px;
}
.nav-enlace:hover{
color: whitesmoke;
background-color: rgb(240, 143, 159);
padding: 10px 40px;
display: inline-block;
text-decoration: none;
font-size: 20px;
border-radius: 6px;
}
@media (max-width: 900px) {
.columna {
width: 46%;
}
}
@media (max-width: 600px) {
.columna {
width: 92%;
}
}