Bom dia, estou fazendo um site com FlexBox porém estou com dificuldade de seguir o layout que criei no adobe XD.
Especificamente nesta parte.
Gostaria de saber como posso fazer aquele texto ali, alinhado e ter a imagem alinhada ao meio também.
Sou novo em html e css e to com bastante dificuldade pra alinhar as coisas e tudo mais
segue código
<title>Andre Fotografia</title>
</head>
<body>
<header>
<div class="container">
<div class="logo"> MEU LOGO </div>
<div class="menu">
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Portfolio</a></li>
<li><a href="">Discover</a></li>
<button> Contact Us</button>
</ul>
</nav>
</div>
</div>
</header>
<section id="banner">
<div class="container">
<div class="banner_headline"> Meu nome é André Luiz</div>
</div>
</section>
</body>
</html>
* {
font-family: SF Pro Display;
}
body {
margin: 0;
padding: 0;
}
header {
display: flex;
justify-content: center;
height: 90px;
}
.container {
display: flex;
justify-content: space-between;
width: 1000px;
}
.logo {
display: flex;
line-height: 80px;
align-items: center;
color: #0B9ED9;
font-weight: bold;
}
.menu {
display: flex;
line-height: 80px;
align-items: center;
}
nav ul,
nav li {
list-style: none;
margin: 0;
padding: 0;
}
nav ul {
display: flex;
}
nav a {
display: block;
text-decoration: none;
color: #707070;
padding: 20px;
}
button {
margin: auto;
border: none;
width: 130px;
height: 30px;
border-radius: 100px;
background-color: #F25CA2;
color: #FFFFFF;
}
/* section */
.banner_headline {
flex: 1;
background-color: red;
}
.imagem_principal {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
background-color: teal;
}
Obrigado!