/* Твои кастомные стили начинаются здесь */




body {
	
 font-family: 'Roboto', sans-serif;	
    background-color: #f8f9fa;
}



h1 {
    margin-top: 50px;
    color: #343a40;
}

.header {
	background-color: #ffffff;
	padding:15px;
}

.phone { font-size: 20pt; font-weight: bold; padding-left: 20px;}
.address {font-size: 16pt;}


.slider { text-align: center; background-image: url("../images/hero.jpg"); background-size: cover; min-height: 600px; 
	
	  display: flex;           /* Включаем Flexbox */
    flex-direction: column;  /* Располагаем элементы вертикально (в колонку) */
    justify-content: center; /* Центрирование по вертикали (вдоль колонки) */
    align-items: center;     /* Центрирование по горизонтали (поперек колонки) */
   
	
		

}
.sl1 {font-size: 50px; color:white; font-weight: bold; text-align: left; display:block ; text-shadow: 2px 2px 4px #000000;
}

.sl2 {font-size: 35px; color:white; font-weight: normal; text-align: center; display:block ;text-shadow: 2px 2px 4px #000000;
}

.sl3 {font-size: 30px; color:white; font-weight: 200; text-align: center; display:block ; margin-top: 30px ;text-shadow: 2px 2px 4px #000000;
}


.mes {margin-top: 10px;}
.pull-right { text-align: right}

.factory {background-color: black; margin-top: 0px; position: relative; padding-bottom: 20px;}
.factory h1 {margin: 0px; font-size: 20pt; background-color: white; display: inline-block; padding:10px; padding-right:100px; position: absolute; margin-top: -51px; }

.hr {border-bottom:1px solid gray;}

.factory p {color: white; padding-top:20px; font-weight: 100; font-size:14pt; }



.text-content {
    overflow: hidden;
    max-height: 250px; /* Высота для первых двух абзацев */
    transition: max-height 0.5s ease;
    position: relative;
	color:white;
	font-size: 14pt
}

.more-text {
    display: none;
}

.read-more-link {
    color: white;
    text-decoration:underline;
    cursor: pointer;
    display: block;
    margin-top: 10px;
	text-align: right;
}

.trubka_block1 {background-color: #E5E5E2; text-align: center;	padding-bottom:50px;}


.image1 {
	
	 position:relative;
	display: inline-block; 
	padding-right: 150px;

		 
		 
		 
		 
		 
}
.trubka_block1 img {margin: auto; max-width: 1100px;}

.trubka_block2 {background-color: #EFEFEF; text-align: center;	padding-bottom:50px;}


.trubka_block2 img {margin: auto;max-width: 1100px; }
.image2 {
	
	 position:relative;
	display: inline-block; 
	padding-right: 150px;
	padding-left: 165px;


		 
		 
		 
		 
		 
}

h2 {font-weight: bold; padding-top: 30px; font-size: 30pt;}
h3 {font-size: 14pt; font-weight: bold;}
.desc { text-align: left;
	font-family: 'Roboto-light', sans-serif;	
	webkit-box-shadow: 1px 4px 8px 0px rgba(34, 60, 80, 0.2);
-moz-box-shadow: 1px 4px 8px 0px rgba(34, 60, 80, 0.2);
box-shadow: 1px 4px 8px 0px rgba(34, 60, 80, 0.2);
	padding:15px; border-radius:10px; 
	font-size:12pt; background-color: white; color:black; position: absolute;
	
}

.trubka_block1 .desc_block1 {width:250px;  top:50px; left:120px;}
.trubka_block1 .desc_block1_line {
	
	position: absolute; top:100px; left:310px;
	
	
}


.trubka_block1 .desc_block2 {width:250px;  top:55px; left:960px;}

.trubka_block1 .desc_block2_line {
	
	position: absolute; top:300px; left:850px;
	
	
}



.trubka_block1 .desc_block3 {width:220px;  top:270px; left:0px;}

.trubka_block1 .desc_block3_line {
	
	position: absolute; top:500px; left:45px;
	
	
}




.trubka_block1 .desc_block4 {width:250px;  top:375px; left:600px;}

.trubka_block1 .desc_block4_line {
	
	position: absolute; top:300px; left:800px; 
	
	
}









.trubka_block2 .desc_block1 {width:400px;  top:0px; left:00px;}
.trubka_block2 .desc_block1_line {
	
	position: absolute; top:50px; left:390px;
	
	
}


.trubka_block2 .desc_block2 {width:250px;  top:100px; left:960px;}

.trubka_block2 .desc_block2_line {
	
	position: absolute; top:245px; left:730px;
	
	
}



.trubka_block2 .desc_block3 {width:220px;  top:370px; left:80px;}

.trubka_block2 .desc_block3_line {
	
	position: absolute; top:540px; left:300px;
	
	
}




.trubka_block2 .desc_block4 {width:250px;  top:390px; left:930px;}

.trubka_block2 .desc_block4_line {
	
	position: absolute; top:390px; left:770px; 
	
	
}










.telegram-button {
   
    padding: 15px 30px;
    background-color: #000000; /* Черный фон */
    color: #ffffff; /* Белый текст */
    border: none;
    border-radius: 10px; /* Закругленные углы */
    font-family: Arial, sans-serif;
    font-size: 24px; /* Размер шрифта */
    font-weight: bold; /* Жирный шрифт */
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s ease;
	width: 200px;
}

.telegram-button:hover {
    background-color: #006705; /* Эффект при наведении */
}

.telegram-button img {
    width: 28px; /* Размер иконки */
    height: 28px;
    margin-right: 15px; /* Отступ между иконкой и текстом */
}










Start free trial

Share
I created a toggle script for the Read More/Less feature, with smooth expansion using CSS transitions and JavaScript to adjust height dynamically based on content. Next, I will prepare CSS for the "Order" button with a Telegram icon.

I've prepared CSS for the "Order" button with a Telegram icon and created HTML for demo purposes, moving toward finalizing the styling.

Lite
Я подготовил CSS-стили для вашей кнопки «Заказать» на основе предоставленного изображения. Она выполнена в черном цвете с закругленными углами и белым текстом.
CSS Код
CSS
.telegram-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 30px;
    background-color: #000000; /* Черный фон */
    color: #ffffff; /* Белый текст */
    border: none;
    border-radius: 10px; /* Закругленные углы */
    font-family: Arial, sans-serif;
    font-size: 24px; /* Размер шрифта */
    font-weight: bold; /* Жирный шрифт */
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.telegram-button:hover {
    background-color: #333333; /* Эффект при наведении */
}

.telegram-button img {
    width: 28px; /* Размер иконки */
    height: 28px;
    margin-right: 15px; /* Отступ между иконкой и текстом */
}






form.css
.form-container {
    max-width: 500px;
    margin: 50px auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.contact-form .form-group {
    margin-bottom: 20px;
}

.contact-form input[type="text"],
.contact-form input[type="tel"],
.contact-form textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 16px;
    color: #333;
    background-color: #f8f8f8;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.3s ease;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #a0a0a0;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #007bff;
}

.contact-form textarea {
    resize: vertical;
    min-height: 120px;
}

.contact-form .submit-button {
    width: 100%;
    padding: 15px;
    background: linear-gradient(to right, #333333, #000000); /* Градиент как на изображении */
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s ease;
}

.contact-form .submit-button:hover {
    background: linear-gradient(to right, #555555, #222222);
}

.error-message {
    color: #dc3545;
    font-size: 14px;
    margin-top: 5px;
    display: none; /* Скрываем по умолчанию */
}

/* Стили для сообщения об успешной отправке */
.success-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.3s ease;
}

.success-overlay.show {
    visibility: visible;
    opacity: 1;
}

.success-content {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.success-content p {
    font-size: 22px;
    color: #28a745;
    margin-bottom: 20px;
}

.success-content .close-button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.success-content .close-button:hover {
    background-color: #0056b3;
}