sigo haciendo esta pagina y me gustaria saber como podría alinear el Sushi en el centro, para que quede abajo pero exactamente en el centro de Onigiri. Por cuestión de estetica simplemente
Lo que quiero es algo asi, que quede el Sushi alineado al centro, y no al costado.
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: #333;
font-size: 1.2rem;
line-height: 1.6em;
margin: 0%;
}
h1 {
font-size: 2rem;
line-height: 1.3em;
}
p {
margin-bottom: 1.6em;
}
.container {
width: 85%;
max-width: 850px;
margin: 0 auto;
}
.header {
background: #121212;
color: white;
padding: 0rem 0;
font-family: 'Koulen', cursive;
z-index: 1;
position: fixed;
left: 0;
top: 0;
right: 0;
}
.header a {
color: white;
text-decoration: none;
}
.logo-nav-container {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0;
flex-wrap: wrap;
}
.menu-icon {
display: none;
}
.navigation {
justify-content: end;
}
.navigation ul {
margin: 0;
padding: 0;
list-style: none;
}
.navigation ul li {
display: inline-block;
}
.navigation ul li a {
display: block;
padding: 0.5rem 1rem;
transition: all 0.4s linear;
border-radius: 5px;
}
.navigation ul li a:hover {
background-color: #4a4a4a;
}
.main {
padding-top: 7rem;
}
.logoimagen {
display: flex;
width: 100px;
}
.sushi {
display: block;
}
.banner {
width: 100%;
height: 600px;
animation: banner 10s infinite linear alternate;
background-size: 100% 100%;
position: relative;
display: flex;
justify-content: center;
font-family: 'Roboto Condensed', sans-serif;
}
@keyframes banner {
0%,
20% {
background-image: url(./sushi1.jpg);
}
25%,
45% {
background-image: url(./sushi2.jpg);
}
50%,
70% {
background-image: url(./sushi3.jpg);
}
75%,
100% {
background-image: url(./sushi4.jpg);
}
}
.capa {
width: 100%;
padding-top: 150px;
height: 75%;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.6)
}
.info {
z-index: 1;
width: 100%;
max-width: 1300px;
text-align: center;
}
.info h1 {
color: white;
font-size: 45px;
margin-bottom: 20px;
letter-spacing: 1px;
}
.info p {
color: #c8c8c8;
line-height: 1.7;
margin-bottom: 30px;
}
.info a {
color: #fff;
text-decoration: none;
background: #3088e0;
padding: 16px 37px;
display: inline-block;
border-radius: 50px;
}
.parrafo1 {
margin: 0;
}
.parrafo2 {
margin: 0;
}
@media only screen and (max-width: 787px) {
.menu-icon {
display: block;
cursor: pointer;
padding: 0rem 1rem;
}
.navigation {
width: 100%;
margin-top: 1rem;
}
.navigation ul {
display: none;
}
.navigation ul.show {
display: block;
}
.navigation ul li {
display: block;
}
.navigation ul li a {
display: block;
padding: 0.5rem 0rem;
transition: all 0.4s linear;
border-radius: 5px;
}
.navigation ul li a:hover {
background-color: #4a4a4a;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Onigiri Sushi</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="header">
<div></div>
<div class="container logo-nav-container">
<div class="logoimagen">
<img class="logo" src="onigiri.png" alt="" width="120px" height="120px">
<h1 class="">Onigiri Sushi</h1>
</div>
<span class="menu-icon">Ver menu</span>
<nav class="navigation">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Nosotros</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
<link href="https://fonts.googleapis.com/css2?family=Koulen&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@1,700&display=swap" rel="stylesheet">
</header>
<main class="main">
<div class="banner">
<div class="capa">
<div class="info">
<h1>¿Tenés antojo de Sushi?</h1>
<p class="parrafo2">¡Nosotros también, mira nuestro menú y deleitate con nuestra selección de los mejores rolls solo para vos!</p>
<a href="#">Ver mas</a>
</div>
</div>
</div>
</main>
<footer class="footer">
<div class="container">
<p>Página diseñada por Santino Fernandez</p>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>