Ответы пользователя по тегу Вёрстка
  • Как обозвать блоки и элементы по БЭМ?

    Yevhen89
    @Yevhen89
    Front-end developer
    я бы примерно так сделал)
    spoiler
    >
    <section class="poster">
        <div class="container">
    
            <h2 class="poster__title">Buy Poster Prints</h2>
            <div class="poster__line"></div>
    
            <div class="poster__container">
    
                <div class="poster__left">
                    <p class="poster__left-text">Stay <br>
                        True, <br>
                        Stay <br>
                        gentleman
                    </p>
                    <a href="#" class="poster__buy">buy now</a>
                    <a href="#" class="poster__share">share</a>
                </div>
    
                <div class="poster__right">
    
                    <div class="poster__nature">
                        <p class="poster__nature-text">And muse of nature
                            with a poet’s eye
                        </p>
                        <p class="poster__nature-author">Thomas Campbell</p>
                        <a href="#" class="poster__buy">buy now</a>
                    </div>
                    <div class="poster__container">
                        <div class="poster__coffe">
                            <p class="poster__coffe-text">Make Work
                                Fun & Play
                            </p>
                            <a href="#" class="poster__buy">buy now</a>
                            <a href="#" class="poster__share">share</a>
                        </div>
    
                        <div class="poster__silence">
                            <p class="poster__silence-text">Silence is <br>
                                <span class="poster__silence-text--bold">Golden</span></p>
                            <a href="#" class="poster__buy">buy now</a>
                            <a href="#" class="poster__share">share</a>
                        </div>
                    </div>
    
                </div>
    
            </div>
            <button class="poster__btn">browse posters</button>
        </div>
    </section>


    .poster {
        padding-bottom: 120px;
        background-color: #eaeef1;
    
        &__title {
            font-size: 3.75rem;
            font-weight: 700;
            margin-bottom: 28px;
            line-height: 3rem;
        }
    
        &__line {
            width: 80px;
            height: 2px;
            margin-bottom: 99px;
            background-color: #000000;
        }
    
        &__container {
            display: flex;
            margin-bottom: 50px;
        }
    
        &__left {
            position: relative;
            width: 35rem;
            height: 47.5rem;
            margin-right: 100px;
            background-image: url(../images/man.png);
            background-repeat: no-repeat;
            background-position: center;
            box-shadow: 0 0 65px #000000;
    
            &-text {
                width: 21.125rem;
                height: 21.188rem;
                font-size: 3rem;
                font-weight: 400;
                margin-left: 104px;
                margin-top: 204px;
                line-height: 1.5;
                text-align: center;
                color: #ffffff;
                text-transform: uppercase;
            }
        }
    
        &__buy {
            position: absolute;
            bottom: 3%;
            left: 3%;
            font-family: Montserrat;
            font-size: 1.25rem;
            font-weight: 700;
            color: #ffffff;
            letter-spacing: 0.25rem;
            line-height: 1.875rem;
            text-transform: uppercase;
            transition: .3s;
    
            &:hover {
                color: #000000;
                text-decoration: none;
            }
    
        }
    
        &__share {
            position: absolute;
            right: 12%;
            bottom: 3%;
            font-family: Montserrat;
            font-size: 0.938rem;
            font-weight: 700;
            color: #ffffff;
            line-height: 1.875rem;
            text-transform: uppercase;
            letter-spacing: 0.188rem;
            transition: .3s;
    
            &:hover {
                color: #c6b098;
                text-decoration: none;
            }
    
            &:after {
                display: block;
                content: "";
                width: 1.875rem;
                height: 1.25rem;
                @include sprite($arrow);
                @include center-y;
                right: -30px;
            }
    
        }
    
        &__nature {
            position: relative;
            width: 46.25rem;
            height: 23.125rem;
            margin-bottom: 50px;
            padding-top: 90px;
            padding-left: 78px;
            background-image: url(../images/nature.png);
            background-repeat: no-repeat;
            background-position: center;
    
            &-text {
                width: 18.563rem;
                font-size: 1.8rem;
                font-weight: 400;
                margin-bottom: 30px;
                color: #000000;
                font-style: italic;
            }
        }
    
        &__coffe {
            position: relative;
            width: 20.625rem;
            height: 21.25rem;
            margin-right: 80px;
            padding-top: 20px;
            background-color: #e6e6e6;
            background-image: url(../images/coffe.png);
            background-repeat: no-repeat;
            background-position: center;
    
            &-text {
                width: 9.625rem;
                height: 3.875rem;
                text-align: center;
                margin: 0 auto;
                font-size: 1.6rem;
                font-weight: bold;
                color: #000000;
            }
        }
    
        &__silence {
            position: relative;
            width: 20.625rem;
            height: 21.25rem;
            text-align: center;
            padding-top: 173px;
            background-image: url(../images/silence.png);
            background-repeat: no-repeat;
            background-position: center;
    
            &-text {
                font-size: 1.875rem;
                font-weight: 400;
                text-align: center;
                color: #fefefe;
                text-transform: uppercase;
    
                &--bold {
                    font-size: 2.4rem;
                    font-weight: bold;
                    margin-left: -5px;
                }
            }
        }
    
        &__btn {
            display: block;
            margin: 0 auto;
            font-family: Montserrat;
            font-weight: 700;
            line-height: 1.875rem;
            text-transform: uppercase;
            width: 17.5rem;
            height: 3.75rem;
            border-radius: 0.25rem;
            border: 0.125rem solid #000000;
            letter-spacing: 0.188rem;
            background-color: transparent;
            transition: .3s;
    
            &:hover {
                background-color: #3e65e3;
            }
        }
    }

    Ответ написан