主页 / user-673241

Рома Можаренко's questions

Martin Hope
Рома Можаренко
Asked: 2025-01-10 01:32:58 +0000 UTC
  • 5

在此输入图像描述大家好，我需要布局包含产品及其图像的部分。该部分必须包含位于标题下方的图像（它是半透明的）我尝试使用绝对定位来弥补它，但显然我的知识还不够:(

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Medium.woff2') format('woff2');
    font-weight: 500;
    font-weight: normal;
    font-display: swap;
}

/**
  Нормализация блочной модели
 */
*,
::before,
::after {
    box-sizing: border-box;
}

/**
    Убираем внутренние отступы слева тегам списков,
    у которых есть атрибут class
   */
:where(ul, ol):where([class]) {
    padding-left: 0;
}

/**
    Убираем внешние отступы body и двум другим тегам,
    у которых есть атрибут class
   */
body,
:where(blockquote, figure):where([class]) {
    margin: 0;
}

/**
    Убираем внешние отступы вертикали нужным тегам,
    у которых есть атрибут class
   */
:where(h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    ul,
    ol,
    dl):where([class]) {
    margin-block: 0;
}

:where(dd[class]) {
    margin-left: 0;
}

:where(fieldset[class]) {
    margin-left: 0;
    padding: 0;
    border: none;
}

/**
    Убираем стандартный маркер маркированному списку,
    у которого есть атрибут class
   */
:where(ul[class]) {
    list-style: none;
}

:where(address[class]) {
    font-style: normal;
}

/**
    Обнуляем вертикальные внешние отступы параграфа,
    объявляем локальную переменную для внешнего отступа вниз,
    чтобы избежать взаимодействие с более сложным селектором
   */
p {
    --paragraphMarginBottom: 24px;

    margin-block: 0;
}

/**
    Внешний отступ вниз для параграфа без атрибута class,
    который расположен не последним среди своих соседних элементов
   */
p:where(:not([class]):not(:last-child)) {
    margin-bottom: var(--paragraphMarginBottom);
}


/**
    Упрощаем работу с изображениями и видео
   */
img,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

/**
    Наследуем свойства шрифт для полей ввода
   */
input,
textarea,
select,
button {
    font: inherit;
}

html {
    /**
      Пригодится в большинстве ситуаций
      (когда, например, нужно будет "прижать" футер к низу сайта)
     */
    height: 100%;
    /**
      Убираем скачок интерфейса по горизонтали
      при появлении / исчезновении скроллбара
     */
    scrollbar-gutter: stable;
}

/**
    Плавный скролл
   */
html,
:has(:target) {
    scroll-behavior: smooth;
}

body {
    /**
      Пригодится в большинстве ситуаций
      (когда, например, нужно будет "прижать" футер к низу сайта)
     */
    /* min-height: 100%; */
    /**
      Унифицированный интерлиньяж
     */
    line-height: 1.5;
}

/**
    Нормализация высоты элемента ссылки при его инспектировании в DevTools
   */
a:where([class]) {
    display: inline-flex;
}

/**
    Курсор-рука при наведении на элемент
   */
button,
label {
    cursor: pointer;
}

/**
    Приводим к единому цвету svg-элементы
   */
[fill] {
    fill: currentColor
}

[stroke] {
    stroke: currentColor
}

/**
    Чиним баг задержки смены цвета при взаимодействии с svg-элементами
   */
svg * {
    transition-property: fill, stroke;
}

/**
    Приведение рамок таблиц в классический 'collapse' вид
   */
:where(table) {
    border-collapse: collapse;
    border-color: currentColor;
}

/**
    Удаляем все анимации и переходы для людей,
    которые предпочитают их не использовать
   */
@media (prefers-reduced-motion: reduce) {

    *,
    ::before,
    ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/*Создание цветовой палитры*/
: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;
}

.header-nav-actions-item {}

/*Стилизация первого блока*/
.main-container {}

.main-black-beats-sec {}

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

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

.main-black-info-name {}

.main-black-info-title {}

.main-black-pricing {}

.black-price {}

.black-buy-button {}

.main-black-subinfo {}
<!DOCTYPE html>
<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="icons/Logo.svg" 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="http://www.w3.org/2000/svg">
                                <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="http://www.w3.org/2000/svg">
                                <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="http://www.w3.org/2000/svg">
                                <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>

html