CodePen Embed - Untitled


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
    <link rel="stylesheet" href="./style/css.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Raleway:ital,wght@0,100..900;1,100..900&family=Righteous&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
</head>
<body>
    <div class="wrapper">
        <header class="header">
            <div class="header__nav">
                <nav>
                    <ul class="nav__header">
                        <li>Мастер-классы</li>
                        <li>Мебель на заказ</li>
                        <li><img src="./style/img/logo.png" alt="" class="nav__logo"></li>
                        <li>Контакты</li>
                        <li>О нас</li>
                    </ul>
                </nav>
            </div>
        </header>

        <div class="workshop-about">
            <div class="workshop-about__content">

                <div class="workshop-about__img">
                    <img src="./style/img/restovration img.png" alt="" class="workshop">
                </div> 
     
                <div class="workshop-about__text-workshop">
                    <div class="text-workshop__subtitle">
                        Столярная мастерская NIKASON BRAND
                    </div>
                    <div class="text-workshop__title">
                        Изготовление и реставрация мебели 
                    </div>
                     <div class="text-workshop__about">
                        Авторская мебель ручной работы, сделанная с душой и трепетом.
                    </div>
                    <div class="text-workshop__btn">
                        <button class="btn__services">
                            Смотреть услуги
                        </button>
                    </div>

                    <div class="social-networks">
                        <div class="telegram">
                             <img src="./style/img/arcticons_telegram.png" alt="" class="telegram__img">
                        </div>
        
                        <div class="instagram">
                            <img src="./style/img/akar-icons_instagram-fill.png" alt="" class="instagram__img">
                        </div>
        
                        <div class="whatsapp">
                            <img src="./style/img/akar-icons_whatsapp-fill.png" alt="" class="whatsapp__img">
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="nikason__about">
                <div class="general__wrapper">
                    <div class="nikason__title">
                        NIKASON BRAND это  
                    </div>
                     <div class="nikason-about__text">
                        <div class="nikason-about__text-item">
                            Производство авторской <div class="empty">мебели из массива</div>
                        </div>
                        <div class="nikason-about__text-item">
                            Реставрация, редизайн, ремонт <div class="empty">деревянной мебели</div>
                        </div>
                        <div class="nikason-about__text-item">
                            Производство мебели по <div class="empty">индивидуальным размерам</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="produce">
                <div class="general__wrapper">
                    <div class="produce__cards">
                        <div class="doors produce__card">
                            <div class="produce__img">
                                <img src="./style/img/door-2 1.png" alt="" class="doors__img">
                            </div>

                            <span class="produce__subtitle">
                                Двери
                            </span>
                        </div>

                        <div class="closet produce__card">
                            <div class="produce__img">
                                <img src="./style/img/шкаф.png" alt="" class="closet__img">
                            </div>

                            <span class="produce__subtitle">
                                Шкафы
                            </span>
                        </div>

                        <div class="tables-and-chairs produce__card">
                            <div class="produce__img">
                                <img src="./style/img/столы и стулья.png" alt="" class="tables-and-chairs__img">
                            </div>

                            <span class="produce__subtitle">
                                Столы и стулья
                            </span>
                        </div>

                        <div class="dressers produce__card">
                            <div class="produce__img">
                                <img src="./style/img/комоды.png" alt="" class="dressers__img">
                            </div>

                            <span class="produce__subtitle">
                                Комоды
                            </span>
                        </div>

                        <div class="curbstones produce__card">
                            <div class="produce__img">
                                <img src="./style/img/тумба.png" alt="" class="curbstones">
                            </div>

                            <span class="produce__subtitle">
                                Тумбы
                            </span>
                        </div>

                        <div class="arches produce__card">
                            <div class="produce__img">
                                <img src="./style/img/арки.png" alt="" class="arches__img">
                            </div>

                            <span class="produce__subtitle">
                                Арки
                            </span>
                        </div>

                        <div class="partitions produce__card">
                            <div class="produce__img">
                                <img src="./style/img/перегородка.png" alt="" class="partitions__img">
                            </div>
                            <span class="produce__subtitle">
                                Перегородки
                            </span>
                        </div> 

                         <div class="beds produce__card">
                            <div class="produce__img">
                                <img src="./style/img/bed 1.png" alt="" class="beds__img">
                            </div>
                            <span class="produce__subtitle">
                                Кровати
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            

            <div class="family-workshop">
                <div class="family-workshop__title">
                    NIKASON BRAND это семейная мастеркая
                </div>

                <div class="family-workshop__content-family">
                    <div class="content-family__img">
                        <img src="./style/img/NikitosAndSister.png" alt="" class="family">
                    </div>

                    <div class="content-family__text">
                        <div class="family-names family-text">
                            Саргылана и Никита Колодезниковы-<div class="matchitovi">Матчитовы</div>
                        </div>

                        <div class="text__sirgilana family-text">
                            Саргылана - рестовратор-декоратор, преображает и дарит <div class="second-life">вторую жизнь старой мебели.</div>
                        </div>

                        <div class="text__nikita family-text">
                            Никита - мастер по дереву, вся мебель делается его <div class="hands">умелыми руками.</div>
                        </div>
                        <div class="content-family__btn">
                            <button class="btn__learn-more">
                                Подробнее о нас
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <section class="video-about-us">
                <div class="video-about-us__title">
                    Посмотрите видео о нас
                </div>
            </section>

            <section class="found-services">
                <div class="found-services__title">
                    Наши услуги
                </div>
                <div class="services__furniture">
                    <div class="furniture__custom">
                        <div class="furniture__flex-container">
                            <div class="custom__img">
                                <img src="./style/img/мебель на заказ.png" alt="" class="img__custom">
                            </div>
    
                            <div class="found-services__about">
                                <div class="found-services__subtitle">
                                    Мебель на заказ
                                </div>
    
                                <div class="found-services__text">
                                    Мебель под заказ по индивидуальным размерам это гарантия 
                                    отличного качества, долговечность, экологичность и 
                                    эксклюзивность наших изделий. 
                                    Возможность создания своего неповторимого стиля, уникальность 
                                    и неповторимость каждого изделия.
                                </div>
                                <div class="found-services__btn">
                                    <button class="btn__order-furniture">Заказать мебель</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="furniture__master-class">
                        <div class="furniture__flex-container">
                            <div class="master-class__img">
                                <img src="./style/img/мастер-классы.png" alt="" class="img__master-class">
                            </div>
    
                            <div class="found-services__about">
                                <div class="found-services__subtitle">
                                    Мастер-классы
                                </div>
    
                                <div class="found-services__text">
                                    Что делать, если память о предках хочется сохранить, но к вашему 
                                    интерьеру старая и испорченная мебель не подходит? 
                                    Правильно, отреставрировать его и наслаждаться не 
                                    только обновлённым видом мебели, но и с теплотой помнить, 
                                    что эта мебель была сделана талантливыми предками.
                                </div>
                                <div class="found-services__btn">
                                    <button class="btn__buy-master-class">Купить мастер-класс</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>


            <section class="warranty">
                <div class="warranty__wrapper">
                    <div class="warranty__content">
                        <div class="warranty__head">
                            <div class="warranty__title">
                                Гарантия качества мебели <div class="warranty__subtitle">от NIKASON BRAND</div>
                            </div>
                        </div>

                        <div class="warranty__text">
                            На каждое изделие ставим авторский логотип (клеймо) как знак качества 
                            и узнаваемости мастера. Таким образом мастер несёт ответственность за 
                            каждое изделие помеченное печатью. Есть гарантия на 12 месяцев. 
                        </div>

                        <div class="warranty__logo">
                            <img src="./style/img/logo end.png" alt="" class="logo__warranty">
                        </div>
                    </div>
                </div>
            </section>



            <footer class="footer">
                <div class="footer__nav">
                    <div class="footer-nav__data-of-company">
                        <div class="footer-nav__item1">
                            <div class="owners">
                                ИП Колодезников-Матчитов Н.И.
                            </div>

                            <div class="tax-number">
                                ИНН 143515646663
                            </div>
                        </div>
                    </div>
 
                    <div class="footer-nav__item">
                        <div class="nav__master-class">
                            Мастер-классы
                        </div>

                        <div class="nav__furniture-custom">
                            Мебель на заказ
                        </div>
                    </div>

                    <div class="footer-nav__item">
                        <div class="nav__contacts">
                            Контакты
                        </div> 

                         <div class="nav__about-us">
                            О нас
                        </div>
                    </div>

                    <div class="footer-nav__item">
                        <div class="confidentiality">
                            Политика кофиденциальности
                        </div>

                        <div class="agreement">
                            Договор оферты
                        </div>
                    </div>

                    <div class="footer-nav__social-network">
                        <div class="nav__telegram">
                            <img src="./style/img/Vector.png" alt="" class="footer-nav__img">                            
                        </div>

                        <div class="nav__instagram">
                            <img src="./style/img/Group.png" alt="" class="footer-nav__img">
                        </div>

                        <div class="nav__whatsapp">
                            <img src="./style/img/Group-1.png" alt="" class="footer-nav__img"> -->
                        </div>
                    </div>
                </div>
            </footer>
</body>
</html>

* {
    box-sizing: border-box;
}
img {
    display: block;
}
body {
    margin: 0;
    padding: 0;
}
.wrapper {
    max-width: 100%;
}
.nav__header {
    list-style: none;
    display: flex;
    justify-content: space-around;
    margin: 0;
    padding: 0;
    align-items: center;
    border-bottom: solid 1px black;
    padding: 28px 0 21px 0;
}
/* workshop-about */

.workshop-about__content {
    display: flex;
    align-items: center;
    gap: 37px;
    flex-wrap: wrap;
    border-bottom: 1px solid black;
}
.workshop-about__text-workshop {
    max-width: 50%;
}
.text-workshop__subtitle {
    font-family: "Open Sans", sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 24px;
    color: #323232;
    padding-bottom: 17px;
}
.text-workshop__title {
    color: #57463A;
    font-family: "Tenor Sans", sans-serif;
    font-weight: 400;
    font-size: 48px;
    line-height: 57.6px;
    max-width: 62%;
    padding-bottom: 40px;
}
.text-workshop__about {
    font-family: "Open Sans", sans-serif;
    font-weight: 300;
    font-size: 18px;
    line-height: 27px;
    color: #323232;
    padding-bottom: 70px;
}
.btn__services {
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    background-color: #A1B29F;
    padding: 18px 57px 18px 57px;
    color: white;
    border: none;
}
.btn__services:hover {
    background-color: #2a6823;
}
.btn__services:active {
    background-color: #d1dad0;
    color: #715B4B;
}
.telegram__img, .instagram__img, .whatsapp__img {
    max-width: 18px;
    min-height: 18px;
    /* border: #715B4B 1px solid;
    border-radius: 55%;
    padding: 15px 15px 15px 15px; */
}
.social-networks {
    display: flex;
    gap: 40px;
    justify-content: end;
    align-items: end;
}
.telegram, .instagram, .whatsapp {
    border: #715B4B 1px solid;
    border-radius: 55%;
    padding: 10px 10px 10px 10px;
}

/* nikason__about */


.general__wrapper {
    padding: 160px 140px 180px 160px;
}
.nikason__title {
    padding-bottom: 100px;
    color: #57463A;
    line-height: 57.6px;
    font-size: 48px;
    font-weight: 400;
    font-family: "Tenor Sans", sans-serif;
}
.nikason-about__text {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.nikason-about__text-item {
    border-bottom: 3px solid #715B4B;
    flex-basis: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    font-family: "Open Sans", sans-serif;
    font-weight: 300;
    font-size: 18px;
    line-height: 27px;
    padding-bottom: 8px;
}

/* produce */

.produce__cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.produce__card {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    gap: 20px;
    border: 1px solid black;
    padding: 50px 90px 50px 90px;
    font-family: "Open Sans", sans-serif; 
    font-weight: 300;
    font-size: 18px;
    line-height: 18.54px;
}
.partitions {
    flex-basis: 308.6px;
}

/* family-workshop */
.family-workshop__content-family {
    display: flex;
    flex-wrap: wrap;
}
.family-workshop__title {
    color: #57463A;
    line-height: 72px;
    font-size: 48px;
    font-weight: 400;
    font-family: "Tenor Sans", sans-serif;
    padding: 0 263px 120px 140px;
}
.content-family__text {
    background-color: #EBEEEB;
    padding: 68px 0px 48px 40px;
    flex-basis: 53.9%;
}
.content-family__text {
    display: flex;
    flex-flow: column wrap;
}
.family__text {
    display: flex;
    flex-flow: wrap column;
    align-items: end;
}
.family-names {
    padding-bottom: 40px;
    line-height: 36px;
    font-size: 24px;
    font-weight: 400;
    font-family: "Tenor Sans", sans-serif;
}
.text__sirgilana {
    padding-bottom: 25px;
}
.text__nikita {
    padding-bottom: 52px;
}
.text__sirgilana, .text__nikita {
    font-family: "Open Sans", sans-serif; 
    font-weight: 300;
    font-size: 18px;
    line-height: 27px;
}
.btn__learn-more {
    color: white;
    font-family: "Open Sans", sans-serif; 
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    padding: 18px 56px 18px 56px;
    background-color: #A1B29F;
    border: none;
}
.btn__learn-more:hover {
    background-color: #2a6823;
}
.btn__learn-more:active {
    background-color: #d1dad0;
    color: #715B4B;
}

/* video-about-us */

.video-about-us__title {
    line-height: 72px;
    font-size: 48px;
    font-weight: 400;
    font-family: "Tenor Sans", sans-serif;
    color: #57463A;
    padding: 160px 705px 1000px 140px;
}

/* found-services */
.found-services__title {
    padding: 0.1px 994px 100px 140px;
    color: #57463A;
    line-height: 72px;
    font-size: 48px;
    font-weight: 400;
    font-family: "Tenor Sans", sans-serif;
}
.furniture__custom {
    background-color: #E3DACE;
}

.furniture__master-class {
    background-color: #D4CDC3;
}
.furniture__flex-container {
    display: flex;
    /* flex-wrap: wrap; */
    /* flex-basis: 99%; */
}
.found-services__about {
    display: flex;
    flex-flow: column wrap;
    gap: 40px;
    padding: 110px 140px 100px 40px;
}
.found-services__subtitle {
    line-height: 36px;
    font-size: 24px;
    font-weight: 400;
    font-family: "Tenor Sans", sans-serif;
}
.found-services__about {
    font-family: "Open Sans", sans-serif; 
    font-weight: 300;
    font-size: 18px;
    line-height: 27px;
}
.btn__order-furniture {
    font-family: "Open Sans", sans-serif; 
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: white;
    background-color: #A1B29F;
    border: none;
    padding: 18px 57px 18px 57px;
}
.btn__order-furniture:hover {
    background-color: #2a6823;
}
.btn__order-furniture:active {
    background-color: #d1dad0;
    color: #715B4B;
}
.btn__buy-master-class {
    font-family: "Open Sans", sans-serif; 
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: white;
    background-color: #A1B29F;
    border: none;
    padding: 18px 42px 18px 42px;
}
.btn__buy-master-class:hover {
    background-color: #2a6823;
}
.btn__buy-master-class:active {
    background-color: #d1dad0;
    color: #715B4B;
}

/* warranty */

.warranty {
    margin: 210px 140px 210px 140px ;
}
.warranty__wrapper {
    padding: 8px 8px 8px 8px;
    border: 7px solid #A1B29F;
}
.warranty__content {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    gap: 40px;
    border: #715B4B 1px solid;
    padding: 92px 62px 38px 95px;
}
/* .logo__warranty {
    width: 150px;
    height: 150px;
    object-fit: cover;
} */
.warranty__logo {
    align-self: end;
}
.warranty__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #57463A;
    line-height: 72px;
    font-size: 48px;
    font-weight: 400;
    font-family: "Tenor Sans", sans-serif;
}
.warranty__text {
    font-family: "Open Sans", sans-serif; 
    font-weight: 300;
    font-size: 24px;
    line-height: 36px;
}

/* footer */
.footer {
    background-color: #715B4B;
}
.footer__nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: #F6F6F6;
    opacity: 80%;
    padding: 84px 140px 240px 140px;
}
.footer-nav__item {
    display: flex;
    flex-flow: column wrap;
    gap: 9px;
}
.footer-nav__img {
    border: #F6F6F6 1px solid;
    border-radius: 50%;
    padding: 15px 15px 15px 15px;
    object-fit: cover;
}
.footer-nav__social-network {
    display: flex;
    gap: 18px;
    align-items: center;
}

This Pen is owned by Горнг Голш on CodePen.

See more by @ggmmrbdi-the-decoder on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.