image and card/image side by side html css-CodePudding

I designed this using adobe XD, I am trying to set up a page where I have a picture and a card side by side under a navbar, I've already set up my navbar, but I cant manage to find a helpful answer online as to how I can achieve my goal, any help would be very much appreciated, thank you.

CodePudding user response：

best way to solve this case is using flexbox, here good article to learn about it

first wrap both card and image on the one div with container class then style the card or image to make it fit like your design

for navbar you can use yours but in my case. position, z-index and inset top is necessary

.navbar {
  z-index: 10000;
  position: fixed;
  top: 0px;
  width: 100vw;
  background-color: white;
}
.navbar ul {
  display: flex;
  justify-content: space-between;
  list-style-type: none;
}
.menus {
  display: flex;
  margin-right: 50px;
}
.container {
  display: flex;
  justify-content: center;
  margin-top: 70px;
  gap: 20px;
}
.card {
  width: 200px;
  height: 200px;
  background-color: aqua;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flexbox | Ex</title>
    <link rel="stylesheet" href="flexbox.css" />
  </head>
  <body>
    <nav >
      <ul>
        <li>Logo</li>
        <ul >
          <li>Menu</li>
          <li>About</li>
          <li>Contact</li>
        </ul>
      </ul>
    </nav>
    <div >
      <div >Card</div>
      <img src="http://placekitten.com/g/500/300" alt="banner" />
    </div>
  </body>
</html>

CodePudding user response：

Theres many ways to achieve this with html/css but the most popular would be using flexBox.

The question is too vague to give a specific answer but i recommend reading up on https://web.dev/learn/css/flexbox/