Position the image to the right relative to the text HTML CSS

anonymous
November 1, 2023
81 views
0 votes
2 Answers

I’m making a website for my school project but I have a problem with my image. I want the picture to be on the right relative to the text.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
* {
  padding: 0;
  margin: 0;
  outline: none;
  border: none;
  box-sizing: border-box;
}

img {
  width: 100%;
  display: flex;
  cursor: default;
}

a {
  text-decoration: none;
}

body {
  font-family: 'Poppins', sans-serif;
  background-color: #18181B;
}

nav {
  max-width: 1200px;
  margin: auto;
  padding: 2rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.nav-logo {
  max-width: 100px;
}

.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 3rem;
}

.link a {
  position: relative;
  padding-bottom: 0.75rem;
  color: #fff;
}

.link a::after {
  content: "";
  position: absolute;
  height: 2px;
  width: 0;
  bottom: 0;
  left: 0;
  background-color: #23b5ce;
  transition: all 0.3s ease;
}

.link a:hover::after {
  width: 70%;
}

.btn {
  padding: 1rem 2rem;
  border-radius: 5px;
  color: #fff;
  font-size: 1rem;
  background-color: #1c9eb5;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn:hover {
  background-color: #1a8b9f;
}

.container {
  max-width: 1200px;
  margin: auto;
  padding: 5rem 2rem;
}

.blur {
  position: absolute;
  box-shadow: 0 0 1000px 50px #1a8b9f;
  z-index: -100;
}

header {
  position: relative;
  padding-top: 2rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  gap: 2rem;
}

.content {
  color: #fff;
}

.content p {
  padding-bottom: 100px;
}

.code h4 {
  white-space: pre-wrap;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.5.0/remixicon.min.css">
  <title>PyProject-Assistant</title>
</head>

<body>
  <nav>
    <div class="nav-logo">
      <a href="#">
        <img src="https://ic.wampi.ru/2023/10/30/logo-GkOqSQerJ-transformed.png" border="0">
      </a>
    </div>
    <ul class="nav-links">
      <li class="link"><a href="#">Home</a></li>
      <li class="link"><a href="#">Pricing</a></li>
      <li class="link"><a href="#">About</a></li>
      <li class="link"><a href="#">Contact Us</a></li>
    </ul>
    <button class="btn">Support Me</button>
  </nav>
  <header class="container">
    <div class="content">
      <span class="blur"></span>
      <span class="blur"></span>
      <h4>WELCOME TO THE PyProject-Assistant WORLD</h4>
      <h1>Hi, I'm <span>Max</span>, young progremmer</h1>
      <p>who is trying to enroll in MEPhI</p>
      <button class="btn">Download</button>
      <div class="image" align="right">
        <img src="https://abrakadabra.fun/uploads/posts/2022-02/1646056685_22-abrakadabra-fun-p-frilans-art-49.png">
      </div>
      <div class="code">
        <h4>while (alive) {<br> eat();<br> sleep();<br> code();<br> repeat();<br>}</h4>
      </div>
    </div>
  </header>
  <script src="script.js">
  </script>
</body>

</html>

Thank you for your help, if you see some parts of my code that I can optimize tell me about them pls.

I tried to find the solution on the Internet. But unfortunately, nothing helps.

Answers

Here is my attempt

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
* {
  padding: 0;
  margin: 0;
  outline: none;
  border: none;
  box-sizing: border-box;
}

img {
  width: 100%;
  display: flex;
  cursor: default;
}

a {
  text-decoration: none;
}

body {
  font-family: 'Poppins', sans-serif;
  background-color: #18181B;
}

nav {
  max-width: 1200px;
  margin: auto;
  padding: 2rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.nav-logo {
  max-width: 100px;
}

.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 3rem;
}

.link a {
  position: relative;
  padding-bottom: 0.75rem;
  color: #fff;
}

.link a::after {
  content: "";
  position: absolute;
  height: 2px;
  width: 0;
  bottom: 0;
  left: 0;
  background-color: #23b5ce;
  transition: all 0.3s ease;
}

.link a:hover::after {
  width: 70%;
}

.btn {
  padding: 1rem 2rem;
  border-radius: 5px;
  color: #fff;
  font-size: 1rem;
  background-color: #1c9eb5;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn:hover {
  background-color: #1a8b9f;
}

.container {
  max-width: 1200px;
  margin: auto;
  padding: 5rem 2rem;
}

.blur {
  position: absolute;
  box-shadow: 0 0 1000px 50px #1a8b9f;
  z-index: -100;
}

header {
  position: relative;
  padding-top: 2rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  gap: 2rem;
}

.content {
  color: #fff;
}

.content p {
  padding-bottom: 100px;
}

.code h4 {
  white-space: pre-wrap;
}

.in-line {
  display: inline-block;
  width:calc(50% - 12px);
  vertical-align:top;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.5.0/remixicon.min.css">
  <title>PyProject-Assistant</title>
</head>

<body>
  <nav>
    <div class="nav-logo">
      <a href="#">
        <img src="https://ic.wampi.ru/2023/10/30/logo-GkOqSQerJ-transformed.png" border="0">
      </a>
    </div>
    <ul class="nav-links">
      <li class="link"><a href="#">Home</a></li>
      <li class="link"><a href="#">Pricing</a></li>
      <li class="link"><a href="#">About</a></li>
      <li class="link"><a href="#">Contact Us</a></li>
    </ul>
    <button class="btn">Support Me</button>
  </nav>
  <header class="container">
    <div class="content">
      <span class="blur"></span>
      <span class="blur"></span>
      <div class="in-line">
      <h4>WELCOME TO THE PyProject-Assistant WORLD</h4>
      <h1>Hi, I'm <span>Max</span>, young progremmer</h1>
      <p>who is trying to enroll in MEPhI</p>
      <button class="btn">Download</button>
      </div>
      <div class="image in-line" align="right">
        <img src="https://abrakadabra.fun/uploads/posts/2022-02/1646056685_22-abrakadabra-fun-p-frilans-art-49.png">
      </div>
      <div class="code">
        <h4>while (alive) {<br> eat();<br> sleep();<br> code();<br> repeat();<br>}</h4>
      </div>
    </div>
  </header>
  <script src="script.js">
  </script>
</body>

</html>

just made use of inline-block, vertical-align and custom width

Test here

Try this:

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap");
* {
  padding: 0;
  margin: 0;
  outline: none;
  border: none;
  box-sizing: border-box;
}

img {
  width: 100%;
  display: flex;
  cursor: default;
}

a {
  text-decoration: none;
}

body {
  font-family: "Poppins", sans-serif;
  background-color: #18181b;
}

nav {
  max-width: 1200px;
  margin: auto;
  padding: 2rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.nav-logo {
  max-width: 100px;
}

.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 3rem;

  flex-wrap: wrap;
}

.link a {
  position: relative;
  padding-bottom: 0.75rem;
  color: #fff;
}

.link a::after {
  content: "";
  position: absolute;
  height: 2px;
  width: 0;
  bottom: 0;
  left: 0;
  background-color: #23b5ce;
  transition: all 0.3s ease;
}

.link a:hover::after {
  width: 70%;
}

.btn {
  padding: 1rem 2rem;
  border-radius: 5px;
  color: #fff;
  font-size: 1rem;
  background-color: #1c9eb5;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn:hover {
  background-color: #1a8b9f;
}

.container {
  max-width: 1200px;
  margin: auto;
  padding: 5rem 2rem;
}

.blur {
  position: absolute;
  box-shadow: 0 0 1000px 50px #1a8b9f;
  z-index: -100;
}

header {
  position: relative;
  padding-top: 2rem;
  /* display: grid; */
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  gap: 2rem;
}

.content {
  color: #fff;
}

.content p {
  padding-bottom: 100px;
}

.code h4 {
  white-space: pre-wrap;
}

.text-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}

.image {
  max-width: 500px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.5.0/remixicon.min.css"
    />
    <title>PyProject-Assistant</title>
  </head>

  <body>
    <header>
      <nav>
        <div class="nav-logo">
          <a href="#">
            <img
              src="https://ic.wampi.ru/2023/10/30/logo-GkOqSQerJ-transformed.png"
              border="0"
            />
          </a>
        </div>
        <ul class="nav-links">
          <li class="link"><a href="#">Home</a></li>
          <li class="link"><a href="#">Pricing</a></li>
          <li class="link"><a href="#">About</a></li>
          <li class="link"><a href="#">Contact Us</a></li>
        </ul>
        <button class="btn">Support Me</button>
      </nav>
    </header>

    <div class="container">
      <div class="content">
        <span class="blur"></span>
        <span class="blur"></span>

        <div class="text-info">
          <div>
            <h4>WELCOME TO THE PyProject-Assistant WORLD</h4>
            <h1>Hi, I'm <span>Max</span>, young progremmer</h1>
            <p>who is trying to enroll in MEPhI</p>
            <button class="btn">Download</button>
          </div>

          <div class="image" align="right">
            <img
              src="https://abrakadabra.fun/uploads/posts/2022-02/1646056685_22-abrakadabra-fun-p-frilans-art-49.png"
            />
          </div>
        </div>

        <div class="code">
          <h4>
            while (alive) {<br />
            eat();<br />
            sleep();<br />
            code();<br />
            repeat();<br />}
          </h4>
        </div>
      </div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

I have separated the header tag for you so that it only contains the site header.

I enclosed the text and the image in a div with the .text-info class so as to move the image to the right.

Please signup or login to give your own answer.

Click here to cancel reply.