Sup, tryna make it have the text, and title, and buttun to the left, and a image to the right like this: also heres my code
<!DOCTYPE html>
<html>
<head>
<title>weebwashere</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
/* Add some styles to the navigation bar */
nav {
background-color: transparent;
overflow: hidden;
display: flex; /* add display property to flex */
justify-content: center; /* align items to center */
}
/* Style the links inside the navigation bar */
nav a {
color: white;
text-align: center;
padding: 16px 16px;
text-decoration: none;
border-bottom: 2px solid transparent;
transition: border-bottom 0.25s ease-in-out;
}
/* Change the color of links on hover */
nav a:hover {
background-color: transparent;
color: white;
border-bottom: 2px solid white;
}
nav a:not(:last-child) {
margin-right: 20px; /* add margin to space out the links */
}
.container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-top: 130px; /* add margin to the top to move the container down */
}
.text {
text-align: center;
max-width: 600px; /* set the max-width of the text to 500px */
margin-top: 15px; /* add margin to the top to space out the text from the navigation bar */
}
h1 {
text-align: center;
color: white;
font-size: 36px;
margin-top: 0px;
}
.highlight {
color: #F5C400; /* set the color to yellow */
}
/* Add styles for the button */
.button-container {
display: flex;
justify-content: center;
margin-top: 0px;
margin-right: 20px; /* add some space between the text and the button */
}
.my-button {
display: inline-block;
outline: none;
cursor: pointer;
font-weight: 500;
border-radius: 3px;
padding: 0 24px; /* increase the padding to make the button bigger */
border-radius: 4px;
color: #fff;
background: #F5C400; /* change the background color to #F5C400 */
line-height: 1.15;
font-size: 16px; /* increase the font size to match the button size */
height: 48px; /* increase the height to match the button size */
word-spacing: 0px;
letter-spacing: .0892857143em;
text-decoration: none;
text-transform: uppercase;
min-width: 120px; /* increase the min-width to match the button size */
border: none;
text-align: center;
box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.my-button:hover {
background: #FFD600; /* add a hover color */
box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
}
</style>
</head>
<body>
<nav>
<a href="index.html">Home</a>
<a href="#">About</a>
<a href="#">Server</a>
</nav>
<div class="container">
<div class="text">
<h1>Meet <span class="highlight">Reminder</span></h1>
<p>Reminder, A bot that can create and manage your reminders with ease. what are you waiting for? add it to your server today!</p>
</div>
<div class="button-container">
<a href="https://www.guilded.gg/b/2e702266-2dfe-4796-b61c-ccbb0536444c"><button class="my-button">invite</button></a>
</div>
</div>
</body>
</html>