Como faço para deixar a imagem que está no print ao lado do texto utilizando Flexbox? segue o código.
body {
margin: 0;
padding: 0;
box-sizing: content-box;
}
header {
display: flex;
justify-content: center;
height: 430px;
}
.container {
display: flex;
max-width: 900px;
width: 100%;
background-image: radial-gradient(#2a3297, #1c1f60);
}
.column{
display: flex;
flex-direction: column;
}
.clock_info {
display: flex;
justify-content: center;
flex-direction: column;
flex: 1;
}
.clock_info h1 {
margin: 0;
padding: 0;
color: #FFFFFF;
width: 600px;
font-size:60px;
text-transform: uppercase;
text-shadow: 0px 1px 0 #000000;
}
.clock_info h2 {
margin: 0;
padding: 0;
color: #FFFFFF;
width: 500px;
font-size:20px;
margin-top: 30px;
}
.clock_img {
margin: 0;
padding: 0;
flex: 1;
}
#banner{
display:flex;
justify-content:center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta id="viewport" name="viewport" content="width=device-width, user-scalable=no">
<link rel="stylesheet" type="text/css" href="../Landing Page/assets/css/style.css" />
<title>Landing Page</title>
</head>
<body>
<header id="banner">
<div class="container column">
<div class="clock_info">
<h1>New Release: Smart Watch YX</h1>
<h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos modi sit repudiandae commodi quae nihil assumenda repellendus.</h2>
</div>
<div class="clock_img">
<img src="../Landing Page/assets/images/relogio.jpg" />
</div>
</div>
</header>
<main></main>
<footer></footer>
</body>
</html>