Сделал для проекта сайтик за два дня , кривой пиздец , но мб кому то понадобиться , так что строго не судите как выглядит сам сайт хтмл <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap" rel="stylesheet"> <title>constructor</title> <link rel="stylesheet" href="assets/style.css"> </head> <body> <!-- Header --> <header class="header" > <div class="container"> <nav class="word"> <a href="#head" class="logo">Каркасный Конструктор </a> <ul class="menu"> <li><a href="#video">Иновации</a></li> <li><a href="#product">Примеры наших работ</a></li> <li><a href="#contact">Контакты</a></li> </ul> </nav> </div> </header> <section id="head"> </section> <!-- preview --> <section id="vieo" class="head"> <div class="container"> <h1>Коркасный конструктор</h1> <p>позволяет пользователям быстро и легко собирать сложные конструкции без необходимости глубоких знаний</p> </div> </section> <!-- Video --> <section class="video" id="video"> <div class="container"> <h2>Квинтэссенция изобретений</h2> <video controls width="560" height="315"> <source src="../constructor/assets/images/met.mp4" type="video/mp4"> Ваш браузер не поддерживает тег video. </video> <video controls width="560" height="315"> <source src="../constructor/assets/images/meta.mp4" type="video/mp4"> Ваш браузер не поддерживает тег video. </video> </div> </section> <!-- Patent --> <section id="patent" class="patent"> <div class="container"> <h2>Патенты на изобретение</h2> <p>Официальный патент на изобретение конструктора в первом видео <a href="https://lolz.live/members/7316307/" target="_blank">документация (WIPO) </a></p> <p>А также дополнительные блоки к изначальной конструкции в втором видео <a href="https://lolz.live/members/7316307/" target="_blank">документация (WIPO) </a></p> </div> </section> <!-- 5 info --> <section id="info" class="info"> <div class="container"> <h2>Отличительные особенности</h2> <div class ="carl"> <p> <!-- 6 загаловок --> <h3>Детали</h3> <!-- 7 разделение текста --> <ul> <li>Минимум разнообразных</li> <li>Возможность и простота получения их прямо на месте конструирования</li> <li>Производство деталей из профильной трубы, перфорированием множества отверстий</li> </ul> <ul> </ul> <h3>Сопряжение деталей</h3> <ul> <li>Простое</li> <li>Прочное</li> <li>Может быть подвижным</li> <li>Соединительный элемент распространённый, является осью шарнира</li> </ul> <h3>Максимальная степень свободы деталей в точке сопряжения</h3> <ul> <li>Полусфера</li> </ul> <h3>Масштаб применения конструирования</h3> <ul> <li>От малого, настольный (в том числе детское творчество)</li> <li>До большого, строений и сооружений</li> </ul> </div> </div> </section> <!-- product --> <section id="product" class="product"> <div class="container"> <h1>Наши продукты</h1> <div class="product1"> <img src="../constructor/assets/images/bed.jpg" alt="Service 1"> <div class="mini"> <h3>Кровать-Чердак</h3> <div class="text-content"> <p>Из профильной и круглой перфорированной трубы, набор деталей 6 видов 35 шт. + столешница и 3 мебельных щита.</p> <h5>Основные особенности:</h5> <ul> <li>Добавляет жесткости каркасной конструкции и создает зоны путем разделения пространства.</li> <li>Можно изменять высоту размещения «ложа» под матрас, расположение и количество ступеней, высоту ограничительного борта.</li> <li>Множество отверстий позволяют надежно закрепить гаджеты, приборы, приспособления и другие нужные для пользователя вещи.</li> <li>Задрапировать, украсить, натянуть сеть – придать индивидуальности для собранной модели.</li> </ul> <h5>Размеры и вес:</h5> <ul> <li>Высота модели: не более 2120 мм</li> <li>Ширина: 1160 мм</li> <li>Длина: 2120 мм</li> <li>Вес: 106 кг</li> </ul> <h5>Комплектация крепежей:</h5> <ul> <li>Болт-гайка М10*60 – 16 шт;</li> <li>Болт-гайка М10*50 – 58 шт.</li> </ul> <h5>Рекомендации по установке:</h5> <p>Рекомендуется закрепить нижние горизонтальные (к полу) или вертикальные (к стене) опоры через имеющиеся отверстия.</p> <h5>Дополнительные возможности:</h5> <ul> <li>Выдерживает значительные нагрузки, задуманные пользователем не по назначению предложенной модели, а также видоизменённые по собственному конструкторскому замыслу.</li> <li>Трансформируется, изменяя форму и назначение с сохранением прочностных характеристик.</li> <li>Детали можно отрезать до нужного размера для задуманного проекта.</li> <li>Возможность изменения углов и мест сопряжения деталей.</li> <li>Установка стандартной заглушки для труб подходящего размера (не входит в комплект поставки).</li> </ul> <h5>Примечание:</h5> <p>Матрас, стул, подушка в комплект поставки не входят.</p> </div> </div> </div> <div class="product1"> <img src="../constructor/assets/images/fbed.jpg" alt="Service 2"> <div class="mini"> <h3>Концепт "Парящей" Кровати</h3> <div class="text-content"> <p>Концепт "парящей" кровати с изменяемой геометрией плоскости ложа представляет собой инновационное решение в области мебели. Эта уникальная конструкция позволяет создать иллюзию парения благодаря использованию скрытых опор и подсветки.</p> <h5>Особенности Концепта:</h5> <ul> <li>Изменение геометрии плоскости ложа осуществляется с помощью скрытых и спрятанных в центре опор, позволяющих адаптировать высоту под индивидуальные потребности пользователя.</li> <li>Подсветка придает интерьеру ощущение легкости и воздушности, усиливая эффект "парения".</li> <li>Интегрированные механизмы обеспечивают плавное изменение угла наклона отдельных участков кровати, делая сон максимально комфортным и расслабляющим.</li> </ul> <h5>Преимущества:</h5> <ul> <li>Уникальный дизайн, создающий эффект невесомости и привлекающий внимание.</li> <li>Максимальный комфорт благодаря возможности индивидуальной настройки высоты и угла наклона.</li> <li>Современный и стильный элемент интерьера, подчеркивающий изысканный вкус владельца.</li> </ul> <h5>Применение:</h5> <p>Такая кровать станет идеальным выбором для тех, кто ценит инновации, комфорт и эксклюзивный дизайн. Она гармонично впишется в любой современный интерьер, придавая ему неповторимую атмосферу уюта и гармонии.</p> </div> </div> </div> <div class="product1"> <img src="../constructor/assets/images/swing.jpg" alt="Service 3"> <div class="mini"> <h3>Качели Двухместные Напольные</h3> <div class="text-content"> <p>Качели двухместные напольные (сад, офис, дом) металлические сборно-разборные трансформер, из профильной и круглой перфорированной трубы, набор деталей 4 вида 21шт.</p> <h5>Характеристики:</h5> <ul> <li>Высота модели: не более 1860 мм</li> <li>Ширина: 2120 мм</li> <li>Глубина: 2120 мм</li> <li>Вес: 44,5 кг</li> </ul> <h5>Комплектация крепежей:</h5> <ul> <li>Пара болт-гайка М10*90 - 6шт;</li> <li>Болт-гайка М10*50 - 22шт.</li> </ul> <h5>Устойчивость:</h5> <p>Широкое "пятно" основания опоры стоек обеспечивает устойчивость от опрокидывания, в разумных пределах раскачивания "маятника" качели.</p> <h5>Прочность и универсальность:</h5> <ul> <li>Выдержат значительные нагрузки, даже если будут использоваться не по прямому назначению.</li> <li>Модель легко трансформируется и изменяется по форме и назначению, сохраняя свою прочность.</li> <li>Детали можно отрезать до нужной длины для реализации собственных проектов.</li> <li>Возможно изменение углов и мест сопряжения деталей.</li> </ul> <h5>Варианты использования:</h5> <p>Пользователь может самостоятельно изменить длину детали отрезав нужный требуемый размер для задуманного, использовать под разное назначение в строительстве, производстве, быту как внутри помещений так и снаружи, учитывая характеристики материала изготовления.</p> <h5>Дополнительные возможности:</h5> <ul> <li>Показан вариант подвеса сиденья канатом и цепью (в комплект поставки данной модели не входит).</li> <li>Возможность изменить углы и места сопряжения деталей, "настроить модель под себя" или требуемую задачу.</li> <li>В торец всех деталей возможно установить стандартную заглушку для труб подходящего размера (в комплект поставки данной модели не входит).</li> </ul> </div> </div> </div> </div> </section> <!-- contact --> <section id="contact" class="contact"> <div class="end"> <a href="https://lolz.live/members/7316307/"><img src="../constructor/assets/images/telegram.jpg" alt="Картинка слева"></a> <p>Наши соцсети</p> <a href="https://lolz.live/members/7316307/"><img src="../constructor/assets/images/ozon.jpg" alt="Картинка слева"></a> </div> </section> <!-- 12 скприпт для плавной прокрутки --> <!-- jQuery --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function () { $('a[href^="#"]').on('click', function(event) { event.preventDefault(); var target = $(this).attr('href'); $('html, body').animate({ scrollTop: $(target).offset().top - 80 }, 1000); }); }); </script> </body> </html> <!-- эх вот бы щас пивка, а не вот это всё --> HTML <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap" rel="stylesheet"> <title>constructor</title> <link rel="stylesheet" href="assets/style.css"> </head> <body> <!-- Header --> <header class="header" > <div class="container"> <nav class="word"> <a href="#head" class="logo">Каркасный Конструктор </a> <ul class="menu"> <li><a href="#video">Иновации</a></li> <li><a href="#product">Примеры наших работ</a></li> <li><a href="#contact">Контакты</a></li> </ul> </nav> </div> </header> <section id="head"> </section> <!-- preview --> <section id="vieo" class="head"> <div class="container"> <h1>Коркасный конструктор</h1> <p>позволяет пользователям быстро и легко собирать сложные конструкции без необходимости глубоких знаний</p> </div> </section> <!-- Video --> <section class="video" id="video"> <div class="container"> <h2>Квинтэссенция изобретений</h2> <video controls width="560" height="315"> <source src="../constructor/assets/images/met.mp4" type="video/mp4"> Ваш браузер не поддерживает тег video. </video> <video controls width="560" height="315"> <source src="../constructor/assets/images/meta.mp4" type="video/mp4"> Ваш браузер не поддерживает тег video. </video> </div> </section> <!-- Patent --> <section id="patent" class="patent"> <div class="container"> <h2>Патенты на изобретение</h2> <p>Официальный патент на изобретение конструктора в первом видео <a href="https://lolz.live/members/7316307/" target="_blank">документация (WIPO) </a></p> <p>А также дополнительные блоки к изначальной конструкции в втором видео <a href="https://lolz.live/members/7316307/" target="_blank">документация (WIPO) </a></p> </div> </section> <!-- 5 info --> <section id="info" class="info"> <div class="container"> <h2>Отличительные особенности</h2> <div class ="carl"> <p> <!-- 6 загаловок --> <h3>Детали</h3> <!-- 7 разделение текста --> <ul> <li>Минимум разнообразных</li> <li>Возможность и простота получения их прямо на месте конструирования</li> <li>Производство деталей из профильной трубы, перфорированием множества отверстий</li> </ul> <ul> </ul> <h3>Сопряжение деталей</h3> <ul> <li>Простое</li> <li>Прочное</li> <li>Может быть подвижным</li> <li>Соединительный элемент распространённый, является осью шарнира</li> </ul> <h3>Максимальная степень свободы деталей в точке сопряжения</h3> <ul> <li>Полусфера</li> </ul> <h3>Масштаб применения конструирования</h3> <ul> <li>От малого, настольный (в том числе детское творчество)</li> <li>До большого, строений и сооружений</li> </ul> </div> </div> </section> <!-- product --> <section id="product" class="product"> <div class="container"> <h1>Наши продукты</h1> <div class="product1"> <img src="../constructor/assets/images/bed.jpg" alt="Service 1"> <div class="mini"> <h3>Кровать-Чердак</h3> <div class="text-content"> <p>Из профильной и круглой перфорированной трубы, набор деталей 6 видов 35 шт. + столешница и 3 мебельных щита.</p> <h5>Основные особенности:</h5> <ul> <li>Добавляет жесткости каркасной конструкции и создает зоны путем разделения пространства.</li> <li>Можно изменять высоту размещения «ложа» под матрас, расположение и количество ступеней, высоту ограничительного борта.</li> <li>Множество отверстий позволяют надежно закрепить гаджеты, приборы, приспособления и другие нужные для пользователя вещи.</li> <li>Задрапировать, украсить, натянуть сеть – придать индивидуальности для собранной модели.</li> </ul> <h5>Размеры и вес:</h5> <ul> <li>Высота модели: не более 2120 мм</li> <li>Ширина: 1160 мм</li> <li>Длина: 2120 мм</li> <li>Вес: 106 кг</li> </ul> <h5>Комплектация крепежей:</h5> <ul> <li>Болт-гайка М10*60 – 16 шт;</li> <li>Болт-гайка М10*50 – 58 шт.</li> </ul> <h5>Рекомендации по установке:</h5> <p>Рекомендуется закрепить нижние горизонтальные (к полу) или вертикальные (к стене) опоры через имеющиеся отверстия.</p> <h5>Дополнительные возможности:</h5> <ul> <li>Выдерживает значительные нагрузки, задуманные пользователем не по назначению предложенной модели, а также видоизменённые по собственному конструкторскому замыслу.</li> <li>Трансформируется, изменяя форму и назначение с сохранением прочностных характеристик.</li> <li>Детали можно отрезать до нужного размера для задуманного проекта.</li> <li>Возможность изменения углов и мест сопряжения деталей.</li> <li>Установка стандартной заглушки для труб подходящего размера (не входит в комплект поставки).</li> </ul> <h5>Примечание:</h5> <p>Матрас, стул, подушка в комплект поставки не входят.</p> </div> </div> </div> <div class="product1"> <img src="../constructor/assets/images/fbed.jpg" alt="Service 2"> <div class="mini"> <h3>Концепт "Парящей" Кровати</h3> <div class="text-content"> <p>Концепт "парящей" кровати с изменяемой геометрией плоскости ложа представляет собой инновационное решение в области мебели. Эта уникальная конструкция позволяет создать иллюзию парения благодаря использованию скрытых опор и подсветки.</p> <h5>Особенности Концепта:</h5> <ul> <li>Изменение геометрии плоскости ложа осуществляется с помощью скрытых и спрятанных в центре опор, позволяющих адаптировать высоту под индивидуальные потребности пользователя.</li> <li>Подсветка придает интерьеру ощущение легкости и воздушности, усиливая эффект "парения".</li> <li>Интегрированные механизмы обеспечивают плавное изменение угла наклона отдельных участков кровати, делая сон максимально комфортным и расслабляющим.</li> </ul> <h5>Преимущества:</h5> <ul> <li>Уникальный дизайн, создающий эффект невесомости и привлекающий внимание.</li> <li>Максимальный комфорт благодаря возможности индивидуальной настройки высоты и угла наклона.</li> <li>Современный и стильный элемент интерьера, подчеркивающий изысканный вкус владельца.</li> </ul> <h5>Применение:</h5> <p>Такая кровать станет идеальным выбором для тех, кто ценит инновации, комфорт и эксклюзивный дизайн. Она гармонично впишется в любой современный интерьер, придавая ему неповторимую атмосферу уюта и гармонии.</p> </div> </div> </div> <div class="product1"> <img src="../constructor/assets/images/swing.jpg" alt="Service 3"> <div class="mini"> <h3>Качели Двухместные Напольные</h3> <div class="text-content"> <p>Качели двухместные напольные (сад, офис, дом) металлические сборно-разборные трансформер, из профильной и круглой перфорированной трубы, набор деталей 4 вида 21шт.</p> <h5>Характеристики:</h5> <ul> <li>Высота модели: не более 1860 мм</li> <li>Ширина: 2120 мм</li> <li>Глубина: 2120 мм</li> <li>Вес: 44,5 кг</li> </ul> <h5>Комплектация крепежей:</h5> <ul> <li>Пара болт-гайка М10*90 - 6шт;</li> <li>Болт-гайка М10*50 - 22шт.</li> </ul> <h5>Устойчивость:</h5> <p>Широкое "пятно" основания опоры стоек обеспечивает устойчивость от опрокидывания, в разумных пределах раскачивания "маятника" качели.</p> <h5>Прочность и универсальность:</h5> <ul> <li>Выдержат значительные нагрузки, даже если будут использоваться не по прямому назначению.</li> <li>Модель легко трансформируется и изменяется по форме и назначению, сохраняя свою прочность.</li> <li>Детали можно отрезать до нужной длины для реализации собственных проектов.</li> <li>Возможно изменение углов и мест сопряжения деталей.</li> </ul> <h5>Варианты использования:</h5> <p>Пользователь может самостоятельно изменить длину детали отрезав нужный требуемый размер для задуманного, использовать под разное назначение в строительстве, производстве, быту как внутри помещений так и снаружи, учитывая характеристики материала изготовления.</p> <h5>Дополнительные возможности:</h5> <ul> <li>Показан вариант подвеса сиденья канатом и цепью (в комплект поставки данной модели не входит).</li> <li>Возможность изменить углы и места сопряжения деталей, "настроить модель под себя" или требуемую задачу.</li> <li>В торец всех деталей возможно установить стандартную заглушку для труб подходящего размера (в комплект поставки данной модели не входит).</li> </ul> </div> </div> </div> </div> </section> <!-- contact --> <section id="contact" class="contact"> <div class="end"> <a href="https://lolz.live/members/7316307/"><img src="../constructor/assets/images/telegram.jpg" alt="Картинка слева"></a> <p>Наши соцсети</p> <a href="https://lolz.live/members/7316307/"><img src="../constructor/assets/images/ozon.jpg" alt="Картинка слева"></a> </div> </section> <!-- 12 скприпт для плавной прокрутки --> <!-- jQuery --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function () { $('a[href^="#"]').on('click', function(event) { event.preventDefault(); var target = $(this).attr('href'); $('html, body').animate({ scrollTop: $(target).offset().top - 80 }, 1000); }); }); </script> </body> </html> <!-- эх вот бы щас пивка, а не вот это всё --> сталь.ксс Вы ток путь нормальный сделайте , а то он не встанет и хуйня получется /* Общие стили */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background-color: #f4f4f4; } .container { font-family: 'Montserrat', sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; } .carl { font-family: 'Montserrat', sans-serif; text-align: left; width: 1200px; margin: auto; } /* Header */ .header { background-color: #333; color: white; padding: 15px 0; position: fixed; top: 0; width: 100%; z-index: 999; } .word { display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 24px; text-decoration: none; color: white; } .menu { list-style-type: none; display: flex; } .menu li a { color: white; text-decoration: none; margin-left: 25px; transition: color 0.5s ease; } .menu li a:hover { color: red; } /* head */ .head { background: url(../assets/images/fff.jpg); background-position: center; background-size: cover; height: 900px; display: flex; justify-content: center; align-items: center; color: black; text-align: center; } .head h1 { font-size: 60px ; } .head p { font-size: 36px ; } /* info */ .info { background: #0c7497; text-align: center; padding: 50px 0; } .info h2 { font-size: 36px; margin-bottom: 20px; } .info p { font-size: 18px; line-height: 1.5; } /* product */ .product { background-color: #eaeaea; padding: 50px 0 } .product1 { display: flex; align-items: center; margin-bottom: 40px; } .product1 img { width: 2000; height: 600px; object-fit: cover; margin-right: 20px; border-radius: 20px; } /* contact */ .end { display: flex; gap: 50px; justify-content: center; align-items: center; padding: 20px; } .end img { max-height: 50px; height: auto; cursor: pointer; } .contact { background-color: #333; color: white; text-align: center; padding: 20px 0; } .contact p { margin: 0; } } HTML /* Общие стили */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background-color: #f4f4f4; } .container { font-family: 'Montserrat', sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; } .carl { font-family: 'Montserrat', sans-serif; text-align: left; width: 1200px; margin: auto; } /* Header */ .header { background-color: #333; color: white; padding: 15px 0; position: fixed; top: 0; width: 100%; z-index: 999; } .word { display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 24px; text-decoration: none; color: white; } .menu { list-style-type: none; display: flex; } .menu li a { color: white; text-decoration: none; margin-left: 25px; transition: color 0.5s ease; } .menu li a:hover { color: red; } /* head */ .head { background: url(../assets/images/fff.jpg); background-position: center; background-size: cover; height: 900px; display: flex; justify-content: center; align-items: center; color: black; text-align: center; } .head h1 { font-size: 60px ; } .head p { font-size: 36px ; } /* info */ .info { background: #0c7497; text-align: center; padding: 50px 0; } .info h2 { font-size: 36px; margin-bottom: 20px; } .info p { font-size: 18px; line-height: 1.5; } /* product */ .product { background-color: #eaeaea; padding: 50px 0 } .product1 { display: flex; align-items: center; margin-bottom: 40px; } .product1 img { width: 2000; height: 600px; object-fit: cover; margin-right: 20px; border-radius: 20px; } /* contact */ .end { display: flex; gap: 50px; justify-content: center; align-items: center; padding: 20px; } .end img { max-height: 50px; height: auto; cursor: pointer; } .contact { background-color: #333; color: white; text-align: center; padding: 20px 0; } .contact p { margin: 0; } } сайт на codepen и да если не в том разделе извиняюсь