admin管理员组

文章数量:1124166

I need to check this section, which contains the product and its image. The image with the "main-product-image" class should be located on the left in the section, and on the right there should be a block with the price and information. The image should also go under the header. The section should contain an image that is located under the heading (it should be semi-transparent).I need to somehow position the image of the large black headphones so that they do not leave the general flow of the document, so that the block of information to the right of the headphones is exactly there, and the image is pressed to the top through the header (as in the image)

How it should be:

I tried to match it with absolute positioning, but apparently my knowledge is not enough.

:root {
  --dark-bg-color: #2B2835;
  --dark-header-opacity-color: #191720;
  --light-color: #ffffff;
  --yellow-color: #FFC700;
  --light-bg-color: #FBFCFF;
  --product-pink-color: #DD5656;
  --black-color: #000000;
  --price-color: #9D8220;
  --base-font-color: "Montserrat";
}

body {
  background-color: var(--dark-bg-color);
  font-family: var(--base-font-color);
  position: relative;
}

a {
  color: inherit;
  text-decoration: none;
}

.header {
  background-color: rgba(25, 23, 32, 0.5);
  color: var(--light-color);
}

.header-container {
  padding-inline: 4.948vw;
  padding-block: 14px;

}

.header-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 47px;
}

.header-logo {}

.header-nav-list {
  display: flex;
  column-gap: 5.729vw;
}

.header-nav-list-item {
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px;
  position: relative;
  display: flex;
  justify-content: center;
}

.header-nav-list-item::after {
  content: "";
  display: block;
  height: 2px;
  width: 0%;
  position: absolute;
  background-color: var(--light-color);
  bottom: 0;
  transition: width 0.2s;
}

.header-nav-list-item:hover::after,
.header-nav-list-item:focus::after {
  width: 100%;
  transition: width 0.2s;
}

.header-nav-actions-list {
  display: flex;
  column-gap: 47px;
}


.main-product-image {
  position: absolute;
  top: 0;
  left: -15%;
  z-index: -100;
}

.main-black-info {
  display: inline-flex;
  justify-content: flex-end;

}
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- <link rel="stylesheet" href="index.css"> -->
  <title>Beats Production</title>
</head>

<body>
  <header class="header">
    <div class="header-container">
      <nav class="header-navbar">
        <a href="#" class="header-logo-link"><img src="" alt="Beats-Logo" class="header-logo"></a>
        <ul class="header-nav-list">
          <li class="header-nav-list-item"><a class="header-nav-list-link" href="#">Headphones</a></li>
          <li class="header-nav-list-item"><a class="header-nav-list-link" href="#">Earphones</a></li>
          <li class="header-nav-list-item"><a class="header-nav-list-link" href="#">Speakers</a></li>
          <li class="header-nav-list-item"><a class="header-nav-list-link" href="#">Explore</a></li>
        </ul>
        <ul class="header-nav-actions-list">
          <li class="header-nav-actions-item">
            <a class="header-nav-actions-link" href="#">
                            <svg width="24.996" height="24.997" viewBox="0 0 24.996 24.997" fill="none"
                                xmlns="">
                                <path id="Fill 1"
                                    d="M9.99016 16.661C13.6445 16.6623 16.6604 13.6854 16.6653 10.0722C16.6703 6.33627 13.7128 3.33007 10.0303 3.32766C6.32636 3.32525 3.3334 6.30044 3.33192 9.98618C3.33053 13.6685 6.31433 16.6597 9.99016 16.661M15.7954 18.1439C11.1628 21.3754 5.27368 20.1388 2.15923 16.1977C-0.962804 12.2468 -0.67336 6.65794 2.8596 2.99498C6.30044 -0.572524 11.9509 -1.00539 15.9729 1.97877C20.1506 5.0785 21.422 11.186 18.1575 15.791C18.2132 15.8494 18.2697 15.911 18.3288 15.9701C20.3799 18.0216 22.433 20.0712 24.4818 22.1251C25.3965 23.042 25.0389 24.546 23.8161 24.917C23.1569 25.117 22.5861 24.9365 22.1033 24.4534C20.5053 22.8544 18.9063 21.2563 17.3078 19.6578C16.8064 19.1562 16.3053 18.6542 15.7954 18.1439"
                                    fill="#FFFFFF" fill-rule="evenodd" transform="translate(-0 -0)" />
                            </svg>
                        </a>
          </li>
          <li class="header-nav-actions-item">
            <a class="header-nav-actions-link" href="#">
                            <svg width="27" height="27" viewBox="0 0 27 27" fill="none"
                                xmlns="">
                                <path id="Shape"
                                    d="M23.046 17.454C21.5756 15.9837 19.8254 14.8952 17.9159 14.2363C19.9611 12.8277 21.3047 10.4703 21.3047 7.80469C21.3047 3.50119 17.8035 0 13.5 0C9.19651 0 5.69531 3.50119 5.69531 7.80469C5.69531 10.4703 7.03893 12.8277 9.08413 14.2363C7.17462 14.8952 5.42447 15.9837 3.95408 17.454C1.40426 20.0039 0 23.394 0 27L2.10938 27C2.10938 20.7192 7.21918 15.6094 13.5 15.6094C19.7808 15.6094 24.8906 20.7192 24.8906 27L27 27C27 23.394 25.5957 20.0039 23.046 17.454ZM13.5 13.5C10.3596 13.5 7.80469 10.9451 7.80469 7.80469C7.80469 4.66425 10.3596 2.10938 13.5 2.10938C16.6404 2.10938 19.1953 4.66425 19.1953 7.80469C19.1953 10.9451 16.6404 13.5 13.5 13.5Z"
                                    fill="#FFFFFF" />
                            </svg>
                        </a>
          </li>
          <li class="header-nav-actions-item">
            <a class="header-nav-actions-link" href="#">
                            <svg width="27" height="25" viewBox="0 0 27 25" fill="none"
                                xmlns="">
                                <path id="Shape"
                                    d="M25.8906 4.55174L4.77996 4.55174L4.46616 1.02007C4.41483 0.442532 3.93571 0 3.36175 0L1.10884 0C0.496445 0 0 0.501529 0 1.1202C0 1.73887 0.496445 2.2404 1.10884 2.2404L2.348 2.2404C3.02519 9.86212 1.27501 -9.83721 3.62333 16.5944C3.71383 17.6289 4.26715 18.7515 5.22033 19.5143C3.50178 21.7314 5.07201 25 7.86751 25C10.1877 25 11.8242 22.6622 11.0286 20.448L17.0974 20.448C16.3027 22.6594 17.9357 25 20.2585 25C22.1121 25 23.6202 23.4765 23.6202 21.6038C23.6202 19.7312 22.1121 18.2077 20.2585 18.2077L7.875 18.2077C7.03271 18.2077 6.2987 17.6943 5.98189 16.9463L23.7027 15.8942C24.1865 15.8655 24.5958 15.5226 24.7134 15.0476L26.9664 5.94361C27.1411 5.23767 26.6121 4.55174 25.8906 4.55174ZM7.86751 22.7596C7.23673 22.7596 6.7235 22.2411 6.7235 21.6038C6.7235 20.9665 7.23673 20.448 7.86751 20.448C8.49833 20.448 9.01157 20.9665 9.01157 21.6038C9.01157 22.2411 8.49833 22.7596 7.86751 22.7596ZM20.2584 22.7596C19.6276 22.7596 19.1143 22.2411 19.1143 21.6038C19.1143 20.9665 19.6276 20.448 20.2584 20.448C20.8892 20.448 21.4025 20.9665 21.4025 21.6038C21.4025 22.2411 20.8892 22.7596 20.2584 22.7596ZM22.7594 13.7059L5.6834 14.7197L4.97902 6.79208L24.4705 6.79208L22.7594 13.7059Z"
                                    fill="#FFFFFF" />
                            </svg>
                        </a>
          </li>
        </ul>
      </nav>
    </div>
  </header>
  <main class="main">
    <div class="main-container">
      <section class="main-black-beats-section">
        <img class="main-product-image" src="images\Bitmap2.png" alt="bears-headphones">
        <div class="main-black-info">
          <p class="main-black-info-name">Beats Studio3 Wireless</p>
          <h1 class="main-black-info-title">Experience your
            music like never before.</h1>
          <div class="main-black-pricing">
            <span class="black-price">
                            $299.95
                        </span>
            <button type="button" class="black-buy-button">Buy Now</button>
          </div>
          <p class="main-black-subinfo">$60 Apple Music gift card with purchase of select Beats products.*</p>
        </div>
      </section>
    </div>
  </main>

</body>

</html>

本文标签： htmlPlacement of the image climbing under the headerStack Overflow

版权声明：本文标题：html - Placement of the image climbing under the header - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1736617991a1945513.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。