Untitled

unknown
plain_text
a year ago
3.9 kB
Indexable
Never
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>