Неотображаемый текст в шапке сайта.

vladdvin · March 18

Верстаю макет с Фигмы - https://www.figma.com/file/2rdy1qjBTl7D6BAC8S4qlf/Webovio?node-id=0%3A1. Наверстал

Скрытый текст

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link href="https://fonts.googleapis.com/css?family=Poppins:regular,700&display=swap" rel="stylesheet" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">    
    <title>Webovio</title>
</head>
<body>
    <div class="wrapper">
        <main class="page">
            <div class="page__main-block main-block">
                <div class="main-block__container">
                    <div class="main-block__header">
                        <!--
                        <img src="img/triangles/white-triangle.png" class="main-block__logo_white_triangle" alt="logoheader">
                        <img src="img/triangles/yellow-triangle.png" class="main-block__logo_yellow_triangle" alt="logoheader">
                        -->
                        <img  src="img/header/logo/webovio.png" class="main-block__logo_name" alt="logoname">
                        <img  src="img/header/hamburger.png" class="main-block__logo_hamburger_icon" alt="logoname">                       
                    </div>
                    <div class="main-block__body">
                        <div class="main-block__smalltitle">A place where</div>
                        <h1 class="main-block__title">A creative agency for redemptive brands</h1>
                        <div class="main-block__text">
                            Anteelo is a leading strategic design firm that builds powerful digital solutions for startups and enterprises.
                          </div>
                        <div class="main-block__items">
                            <a href="" class="main-block__link main-block__link_yellow">  Get in touch</a>
                        </div>
                    </div>    
                </div>
                <div class="main-block__image _ibg">
                    <img src="img/mainblock/mainimage.png" alt="cover">
                </div>
            </div>
        </main>
    </div>    
</body>
</html>

CSS

Скрытый текст

/* Обнуление */
*,
*::before,
*::after {
        padding: 0;
        margin: 0;
        border: 0;
        box-sizing: border-box;
}
a {
        text-decoration: none;
}
ul,
ol,
li {
        list-style: none;
}
img {
        vertical-align: top;
}
h1,
h2,
h3,
h4,
h5,
h6 {
        font-weight: inherit;
        font-size: inherit;
}
html,
body {
        height: 100%;
        line-height: 1;
        background: #fafafa;
        font-size: 14px;
        color: #252b42;
        font-weight: 400;
        font-family: Poppins;
}


.wrapper {
    min-height: 100%;
    overflow: hidden;
        display: flex;
        flex-direction: column;
}

._container {
        max-width: 1046px;
        padding: 0px 15px;
        margin: 0px auto;
        box-sizing: content-box;
}

._ibg {
        position: relative;
}

._ibg img {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        object-fit: cover;
}


/* =========================================================================== */

.page {
}
.page__main-block {
}
.main-block {
}
.main-block__container {
}
.main-block__logo {
}
.main-block__body {
}

.main-block__smalltitle{
    height: 21px;
    margin-left: 166px;
    /*right: 83.77%;*/
    /*top: calc(50% - 21px/2 - 195.5px);*/
    margin-top: 130.96px;
    width: 100px;

    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    /* identical to box height */


    /*color: #FFFFFF;*/
    z-index: 10;
}

.main-block__title {
    margin-left: 166px;
    width: 616px;
    margin-top: 22px;
    /*bottom: 35.68%;*/
    
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-size: 60px;
    line-height: 74px;
    /* or 123% */
    
    
    /*color: #FFFFFF;*/
    z-index: 5;
}
.main-block__text {
}
.main-block__items {
}
.main-block__link {
}
.main-block__link_yellow {
}
.main-block__image {
    position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    z-index: 1;   
}

/* ============================================================================ */

.main-block__logo_white_triangle {
    width: 42px;
    height: 35px;
    left: 164px;
    top: 27.27px;
    
    background: #FFFFFF;
    /*transform: matrix(1, 0, 0, -1, 0, 0);*/
}
.main-block__logo_yellow_triangle {
    width: 29.21px;
    height: 24.35px;
    left: 176.78px;
    top: 27.27px;
    
    background: #F6F6F6
}

.main-block__logo_name {
    width: 179.23px;
    height: 33.05px;
    margin-left: 230.2px;
    margin-top: 23px;
    
    background: #FFFFFF;
    z-index: 15;
}

В результате отображается следующая картинка

в режиме инструментов разработчика. А вне режима вообще отображает

Подскажите как добиться отображения текста как на макете.

lixionix · March 21

Почему ты фоновое изображение не задашь через свойство background-image?

Edited March 21 by lixionix

ket-verbitskaya · March 22

Блоку с фоновым изображением задать свойство relative. Блоку, наложенному поверх изображения задать свойство absolute. И плюсую к верхнему комменту, что фоновое изображение лучше задавать через url в background-image.

Sign In

Неотображаемый текст в шапке сайта.

Question

vladdvin

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

lixionix

Link to comment

Share on other sites

ket-verbitskaya

Link to comment

Share on other sites

Join the conversation

Similar Content

Обсуждения

Forums

Important Information