-1
Good night.
I’m creating a Nav that contains an H1 on the left as logo and a ul on the right and I need to align the two to the center vertically, I’ve tried everything I know and it’s no use.
Then in main you will have two menus, one on the left and one on the direct but they are also not aligned.
I’m a beginner and I’m creating this page as a way to test my knowledge so far.
PS: I also didn’t understand how to put the css correctly here and on the wiki there is nothing very specific. I’ll put an image of the page layout.
I accept other feedback and thank you for your help.
HTML and CS
/* Estilos gerais da página */
body {
background-color: #ebebeb;
font-family: Arial, Helvetica, sans-serif;
font-size: 120%;
line-height: 1.5;
}
header {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
aside {
float: right;
clear: right;
}
p {
width: 220px;
height: 120px;
background-color: white;
display: inline-block;
text-align: justify;
}
li {
text-decoration: none;
display: inline-block;
padding-left: 20px;
}
a {
color: white;
text-decoration: none;
}
ul {
text-align: right;
margin: 0;
float: right;
vertical-align: middle;
}
header {
background-color: #ff5757;
height: 8%;
}
h1 {
font-family: "Faustina", serif;
font-size: 48px;
color: white;
text-transform: uppercase;
display: inline-block;
margin: 0;
}
h2 {
margin-top: 12%;
}
h3 {
margin-bottom: 0;
}
h2,
h3 {
color: #ff5757;
}
footer a {
color: #ff914d;
}
/* classes */
.container {
width: 70%;
margin: 0 auto;
}
.bottom-footer {
width: 100%;
height: 50px;
clear: both;
background-color: #ff5757;
margin-top: 50px;
}
.tags {
color: #ff5757;
}
.label {
color: #38b6ff;
}
.main-footer {
color: #ff914d;
}
/* ids */
<header>
<nav class="container">
<!-- Logo e menu de navegação -->
<h1>CF</h1>
<ul>
<li><a href="#">receitas</a></li>
<li><a href="#">dicas</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">eventos</a></li>
<li><a href="#">login</a></li>
</ul>
</nav>
</header>
<main class="container">
<h2>Receitas mais votadas da semana</h2>
<div>
<h3>Macarrão bolonhesa</h3>
<img src="macarrao.jfif" alt="Macarrão bolonhesa" height="220" width="220">
<p>Lorem ipsum dolor sit amet dalar restrict du so</br>
<i class="material-icons tags">label</i><a href="#" class="label">Veja a receita!</a>
</p>
<footer class="main-footer">Tags: <a href="#">macarrao</a>, <a href="#">molhos</a></footer>
</div>
<div>
<h3>Macarrão bolonhesa</h3>
<img src="macarrao.jfif" alt="Macarrão bolonhesa" height="220" width="220">
<p>Lorem ipsum dolor sit amet dalar restrict du so
</br>
<i class="material-icons tags">label</i><a href="#" class="label">Veja a receita!</a>
</p>
<footer class="main-footer">Tags: <a href="#">macarrao</a>, <a href="#">molhos</a></footer>
</div>
<div>
<h3>Macarrão bolonhesa</h3>
<img src="macarrao.jfif" alt="Macarrão bolonhesa" height="220" width="220">
<p>Lorem ipsum dolor sit amet dalar restrict du so
</br>
<i class="material-icons tags">label</i><a href="#" class="label">Veja a receita!</a>
</p>
<footer class="main-footer">Tags: <a href="#">macarrao</a>, <a href="#">molhos</a></footer>
</div>
<aside>
<h2>Destaques</h2>
<div>
<h3>Enchilada mexicana</h3>
<img src="enrolado.jfif" alt="Macarrão bolonhesa" height="220" width="220">
<p>Lorem ipsum dolor sit amet dalar restrict du so
</br>
<i class="material-icons tags">label</i><a href="#" class="label">Veja a receita!</a>
</p>
<footer class="main-footer">Tags: <a href="#">macarrao</a>, <a href="#">molhos</a></footer>
</div>
<div>
<h3>Enchilada mexicana</h3>
<img src="enrolado.jfif" alt="Macarrão bolonhesa" height="220" width="220">
<p>Lorem ipsum dolor sit amet dalar restrict du so
</br>
<i class="material-icons tags">label</i><a href="#" class="label">Veja a receita!</a>
</p>
<footer class="main-footer">Tags: <a href="#">enrolado</a>, <a href="#">comida mexicana</a></footer>
</div>
</aside>
</main>
<footer class="bottom-footer">
<div class="container">
© CozinhaFácil - 2019
<ul>
<li><a href="#"><i class="material-icons">tag_faces</i></a></li>
<li><a href="#"><i class="material-icons">photo_camera</i></a></li>
<li><a href="#"><i class="material-icons">notifications</i></a></li>
</ul>
</div>
</footer>