merging new style to base open landing

templates/landing/base.html

@@ -14,7 +14,8 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="shortcut icon" type="image/png" href="{% static 'landing/img/letterlogo.png' %}">
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link href="css/template.css" rel="stylesheet">
+    <link href="css/globals.css" rel="stylesheet">
     
     <title></title>
     <style type="text/css">
@@ -33,4 +34,4 @@
     </script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
 </body>
-</html>
+</html>

templates/landing/css/globals.css

@@ -0,0 +1,532 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
+
+:root {
+    --main: #FFFFFF;
+    --accent: #479FF8;
+    --bg: #F8F9FD;
+    --blue-bg: #2C64BF;
+    --dark-blue-bg: #1D4685;
+    --unActive: #D8D8D8;
+
+    --main-text: #3C3C3C;
+    --second-text: #7E7E7E;
+    --danger-text: #EF3232;
+
+
+
+    --font-xl: 36px;
+    --font-xl2: 32px;
+    --font-rt: 24px;
+    --font-md: 16px;
+    --font-sm: 14px;
+
+    --font-bold: 700;
+    --font-thin: 400;
+
+    /* border-radius */
+
+    --br-xl: 15px;
+    --br-md: 10px;
+    --br-sm: 6px;
+
+    /* border */
+
+    --input-border: #D8D8D8;
+
+    /* margin */
+
+    --m-5xl: 50px;
+    --m-4xl: 40px;
+    --m-3xl: 30px;
+    --m-2xl: 24px;
+    --m-xl: 20px;
+    --m-md: 15px;
+    --m-sm: 10px;
+    --m-l: 8px;
+}
+
+h1 {
+    font-size: var(--font-xl);
+}
+
+.hideScrollbar::-webkit-scrollbar {
+    display: none;
+}
+
+.hideScrollbar {
+    -ms-overflow-style: none; 
+    scrollbar-width: none; 
+}
+
+.blue-text {
+    color: var(--accent);
+    position: relative;
+    display: inline-block;
+}
+.clicked-reference{
+    height: 72px;
+}
+.blue-text::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: -25px; 
+    width: 100%;
+    height: 5px;
+    background-color:  var(--accent);
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+}
+.underline{
+    text-decoration: underline;
+}
+
+/* Скрываем scrollbar для Chrome, Safari и Opera */
+.example::-webkit-scrollbar {
+    display: none;
+  }
+   
+  /* Скрываем scrollbar для IE, Edge и Firefox */
+  .example {
+    -ms-overflow-style: none;  /* IE и Edge */
+    scrollbar-width: none;  /* Firefox */
+  }
+
+ul, li, body{
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    color: var(--main-text);
+    background: var(--bg);
+    font-family: 'Open Sans', sans-serif;
+    box-sizing: border-box;
+}
+
+p {
+    line-height: 1.9;
+}
+
+.container {
+    width: 1340px;
+    margin: auto;
+    position: relative;
+}
+
+.menu-text a {
+    display: flex;
+    align-items: center;
+    margin-left: 50px;
+}
+
+.menu {
+    width: 100%;
+    height: 72px;
+
+    border-radius: var(--br-md);
+    margin-bottom: 50px;
+
+    background: var(--main);
+
+    top: 20px;
+
+    z-index: 1;
+    position: sticky;
+    justify-content: space-between;
+}
+
+.sharix-menu-text {
+    font-size: var(--font-rt);
+    font-weight: var(--font-thin);
+}
+
+.menu-text {
+    list-style: none;
+    display: flex;
+    flex-direction: row;
+}
+
+.menu-items {
+    margin-left: 50px;
+}
+
+.ShariX-icon {
+    margin-left: 24px;
+    margin-right: 10px;
+}
+
+.enter-icon {
+    margin-left: 57px;
+    margin-right: 29px;
+}
+
+.flex-row {
+    display: flex;
+    flex-direction: row;
+}
+
+.flex-row-center {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.title {
+    font-size: var(--font-xl);
+    font-weight: var(--font-bold);
+}
+.popup-burger-text li{
+    width: 200px;
+    height: 50px;
+    margin-top: 25px;
+    margin-bottom: 10px;
+    margin-left: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+}
+.list-none {
+    list-style: none;
+}
+.items-center{
+    display: flex;
+    align-items: center;
+}
+.text-center {
+    text-align: center;
+}
+
+.flex-column {
+    flex-direction: column;
+}
+
+.content-between {
+    display: flex;
+    justify-content: space-between;
+}
+
+footer {
+    width: 100%;
+    margin-top: 50px;
+    margin-bottom: 25px;
+    display: flex;
+    justify-content: space-around;
+    flex-direction: column;
+    border-radius: var(--br-md);
+    background-color: var(--main);
+}
+
+.footer-text {
+    color: var(--second-text);
+    margin-top: 20px;
+}
+
+.footer-text li {
+    margin-top: 20px;
+}
+
+.footer-row {
+    margin-top: 40px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+.wrap-footer{
+    flex-wrap: wrap;
+    justify-content: space-around;
+}
+.mt-25{
+    margin-top: 45px;
+}
+.ml-40 {
+    margin-left: 40px;
+}
+.footer-size{
+    font-size: var(--font-sm);
+}
+
+/* BUTTON STYLES */
+
+.proto-button {
+    padding: var(--m-l) var(--m-2xl);
+    border: none;
+    border-radius: var(--br-sm);
+
+    font-size: var(--font-sm);
+    font-weight: var(--font-bold);
+    letter-spacing: 0.4px;
+
+    color: var(--bg);
+    background-color: var(--accent);
+    
+    transition: 0.3s all;
+}
+
+button:hover {
+    background-color: var(--blue-bg);
+}
+
+button:active {
+    background-color: var(--dark-blue-bg);
+}
+
+button:disabled {
+    background-color: var(--unActive);
+}
+
+button:disabled:hover {
+    background-color: var(--unActive);
+}
+
+/* BUTTON STYLES */
+
+.partners-content {
+    justify-content: space-between;
+    margin-bottom: 308px;
+}
+
+.partners-text {
+    width: 645px;
+    line-height: 1.9;
+    text-align: justify;
+}
+
+.information-tasks {
+    padding-left: 20px;
+    padding-bottom: 100px;
+    color: var(--accent);
+}
+
+.information-tasks li {
+    margin-top: 20px;
+}
+
+.disk {
+    list-style-type: circle;
+    margin-left: 20px;
+}
+
+.m-auto {
+    text-align: center;
+}
+
+.content-center {
+    display: flex;
+    justify-content: center;
+}
+
+.footer-top {
+    margin-top: 300px;
+}
+
+.input-group {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    margin: 0.7rem 0;
+
+}
+
+.input-group {
+    margin-bottom: 65px;
+}
+.input-group p{
+    top: -110%;
+    left: -2%;
+    font-weight: 700;
+    color: var(--main-text);
+}
+.input-group:has(textarea) p{
+    top: -40%;
+}
+/* .input-group.active p {
+    top: -110%;
+    left: -2%;
+    font-weight: 700;
+    color: var(--main-text);
+    padding: 4px 2px;
+}
+
+.input-group.active:has(textarea) p{
+    top: -40%;
+} */
+
+.input-group p {
+    margin-left: 10px;
+    position: absolute;
+}
+
+.input-group input {
+    border: 1px solid var(--input-border);
+}
+
+.input-group input:focus {
+    outline: var(--accent) 1px solid;
+}
+
+.input-group .error-input {
+    position: absolute;
+    bottom: -70%;
+    color: var(--danger-text);
+}
+
+.second-input {
+    width: 100%;
+    min-height: 126px;
+    border-radius: var(--br-sm);
+    resize: none;
+}
+
+.second-input:focus {
+    outline: var(--accent) 1px solid;
+}
+
+.footer-image-margin {
+    margin-left: 10px;
+}
+.fixed-width a{
+    width: 100%;
+}
+.contacts-text {
+    width: 705px;
+}
+
+.content-around {
+    justify-content: space-around;
+}
+
+.decoration-none a {
+    color: inherit;
+    text-decoration: none;
+}
+
+.cursor-pointer {
+    cursor: pointer;
+}
+
+.services-footer{
+    width: 174px;
+}
+.burger{
+    width: 26px;
+    height: 16px;
+    margin-right: 25px;
+    display: none;
+
+}
+.line{
+    width: 100%;
+    height: 2px;
+    border-radius: 4px;
+    background-color: #3C3C3C;
+}
+
+.popup{
+    background-color: var(--main);
+    border-radius: 15px;
+}
+.login-btn{
+    background: none;
+    font-size: var(--font-md);
+    border-radius: var(--br-md);
+    border: 1px solid var(--accent);
+}
+.cover-enter-icon{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+@media screen and (max-width: 1340px) {
+    .container {
+        width: 1100px;
+    }
+}
+
+
+@media screen and (max-width: 1100px) {
+    .container {
+        width: 992px;
+    }
+}
+
+@media screen and (max-width: 992px) {
+    .container {
+        width: 768px;
+    }
+    .blue-text::after {
+        display: none;
+    }
+    .clicked-reference{
+        width: 100%;
+        height: 50px;
+    }
+    .popup{
+    width: 200px;
+    padding-top: 15px;
+    padding-right: 25px;
+    padding-left: 25px;
+    padding-bottom: 25px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    position: absolute;
+    top: 80px;
+    right: 0;
+    color: var(--accent);
+    }
+    .menu-text a {
+        margin: 0;
+        }
+    .menu-text {
+    gap: 25px;
+    height: 100%;
+        flex-direction: column;
+        justify-content: space-around;
+    }
+    .clicked-reference{
+        width: 450px;
+        height: 50px;
+    }
+    h1{
+        font-size: var( --font-xl2);
+    }
+
+    .flex-row.adaptive-992 {
+        display: flex;
+        flex-direction: column;
+    }
+    .burger{
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .container {
+        width: 576px;
+    }
+    .menu{
+        margin-bottom: 25px;
+    }
+    footer{
+    display: flex;
+    flex-wrap: wrap;
+    }
+
+    .content-around.adaptive-content-768{
+        gap: 50px;
+    }
+}
+@media screen and (max-width:576px) {
+    .container {
+        width: 476px;
+    }
+
+}
+.display-none{
+    display: none !important;
+}

templates/landing/css/template.css

@@ -0,0 +1,471 @@
+.text-style p {
+    color: var(--accent);
+}
+
+.servises-block h1 {
+    margin-left: 30px;
+    margin-bottom: 0;
+}
+
+.button-selection {
+    width: 270px;
+    height: 50px;
+
+    margin-left: 15px;
+    margin-top: 15px;
+    padding-left: 15px;
+
+    border-radius: var(--br-md);
+    border: none;
+
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+
+    transition: 0.3s all;
+
+    background: none;
+}
+
+.button-selection svg {
+    margin-right: 10px;
+}
+
+.button-selection:active svg>path {
+    fill: white;
+}
+
+.button-selection:hover {
+    background-color: #EBF5FE;
+}
+
+.button-selection:active {
+    background: #479FF8;
+}
+
+.button-selection p {
+    transition: 0.3s all;
+    font-size: var(--font-md);
+}
+
+.button-selection:active p {
+    color: white;
+    fill: white;
+}
+
+.service-wrapper {
+    width: 100%;
+    justify-content: space-between;
+}
+
+.servises-block {
+    width: 308px;
+    height: 301px;
+    border-radius: var(--br-xl);
+    top: 120px;
+    position: sticky;
+    background: var(--main);
+}
+
+.aboutCompany {
+    width: 982px;
+    margin-left: var(--m-5xl);
+}
+
+.aboutCompany p {
+    color: var(--main-text);
+}
+
+.icon-border {
+    border-radius: var(--br-md);
+}
+
+.under-header {
+    width: 100%;
+    height: 300px;
+    position: relative;
+    align-items: center;
+}
+
+figure.sixteen-nine-img {
+    width: 100%;
+    overflow: hidden;
+    margin: 0;
+    padding-top: 56.25%;
+    position: relative;
+    margin-top: 50px;
+    margin-bottom: 50px;
+
+    background: linear-gradient(288.75deg, #595959 2.2%, #3C3C3C 78.38%);
+    border-radius: var(--br-xl);
+}
+
+figure.sixteen-nine-img img {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    transform: translate(-50%, -50%);
+}
+
+.employee_avatar {
+    width: 256px;
+    height: 256px;
+
+    background: linear-gradient(288.75deg, #595959 2.2%, #3C3C3C 78.38%);
+    border-radius: var(--br-xl);
+
+    overflow: hidden;
+}
+
+.employees{
+    gap: 42px;
+}
+
+.w-100{
+    width: 100%;
+}
+.substrate{
+    width: 900px;
+    height: 150px;
+    border-radius: 15px;
+
+    background-color: var(--main);
+}
+.substrate-text{
+    margin-left: 25px;
+}
+.adaptive-img-none{
+    position: absolute;
+    right: 0;
+    bottom: 0;
+}
+@media screen and (max-width: 1340px) {
+    .aboutCompany {
+        width: 738px;
+    }
+    .substrate{
+        width: 550px;
+    }
+    .employee_avatar {
+        width: 218px;
+        height: 218px;
+        display: flex;
+        justify-content: center;
+    }
+
+}
+@media screen and (max-width: 1100px) {
+    .aboutCompany {
+        width: 550px;
+    }
+    .substrate{
+        width: 550px;
+        position: absolute;
+        z-index: 1;
+    }
+    .adaptive-img-none{
+        width: 500px;
+    }
+    .employees{
+        overflow-x: auto;
+    }
+}
+@media screen and (max-width: 992px) {
+    .aboutCompany {
+        width: 400px;
+        margin-left: 0;
+    }
+    .servises-block{
+        width: 100%;
+        height: 94px;
+        margin-bottom: 25px;
+        
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        flex-wrap: nowrap;
+        
+        position: static;
+        
+        overflow: auto;
+    }
+    .substrate{
+        width: 400px;
+        height: 200px;
+    }
+    .adaptive-img-none{
+        position: absolute;
+        right: 0;
+        width: 420px;
+    }
+    .service-wrapper{
+        flex-direction: column;
+    }
+    .aboutCompany {
+        width: 100%;
+        margin-left: 0;
+    }
+    .servises-block button {
+        flex-shrink: 0;
+    }
+    .servises-block h1 {
+        margin-bottom: 20px;
+    }
+}
+@media screen and (max-width: 768px) {
+    .servises-block h1 {
+        margin-bottom: 0;
+    }
+    .new-font-size{
+        font-size: var(--font-rt);
+    }
+    .adaptive-img-none{
+        display: none;
+    }
+    .servises-block{
+        width: 100%;
+        height: 94px;
+        margin-bottom: 25px;
+        
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        flex-wrap: nowrap;
+        
+        position: static;
+        
+        overflow: auto;
+    }
+
+    .service-wrapper{
+        flex-direction: column;
+    }
+    .aboutCompany{
+        width: 100%;
+        margin-left: 0;
+    }
+    .employees{
+        overflow-x: scroll;
+    }
+    .substrate{
+        background: none;
+        width: 100%;
+    }
+    .under-header {
+        height: 150px;
+        margin-top: 25px;
+        margin-bottom: 50px;
+        color: #EBF5FE;
+        background: linear-gradient(to left, #479FF8, #0081FF);
+        border-radius: 15px;
+    }
+}
+
+
+.data{
+    margin-right: 10px;
+}
+.map{
+    border-radius: var(--br-xl);
+    height: 310px;
+}
+.main-input{
+    width: 100%;
+    height: 40px;
+    border-radius: var(--br-sm);
+    padding-left: 10px;
+    background: var(--main);
+    border: none;
+}
+.email-margin{
+    margin-right: 25px;
+}
+.second-input{
+    width: 99%;
+    height: 130px;
+    background: var(--main);
+    border: solid 1px var(--input-border);
+    padding-top: 0;
+}
+.contacts-data{
+    width: 585px;
+    margin-left: 60px;
+    padding-top: 20px;
+
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+}
+.send{
+    margin-top: 30px;
+}
+.footer{
+    margin-top: 100px;
+}
+.comment-input{
+    max-width: 100%;
+}
+.deranged-data{
+    width: 700px;
+}
+
+@media screen and (max-width: 992px) {
+    .contacts-data{
+        margin: 0;
+    }
+    .contacts-text{
+        width: 100%;
+    }
+    .deranged-data{
+        width: 100%;
+    }
+    .contacts-data{
+        width: 100%;
+    }
+    .map{
+        width: 100%;
+    }
+}
+
+.background-popup{
+    width: 100%;
+    height: 100vh;
+
+    left: 0;
+    top: 0;
+
+    background-color: rgba(0, 0, 0, 0.205);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    position: fixed;
+
+    z-index: 100;
+}
+.table-popup{
+    width: 400px;
+    min-height: 400px;
+
+    padding: 25px;
+
+    position: relative;
+
+    background-color: var(--main);
+
+    border-radius: 10px;
+}
+.proposalPopup{
+    
+}
+.redCross{
+    position: absolute;
+    right: 30px;
+    top: 30px;
+}
+.first-proposal{
+    position: relative;
+}
+
+.Service{
+    margin-right: 400px;
+    padding-left: 60px;
+    white-space: nowrap;
+    vertical-align: top;
+}
+.active-table {
+    /* border: 1px solid var(--accent); */
+    border-radius: 10px;
+    /* position: absolute;
+    bottom: 0; */
+}
+.active-table1  {
+    border: 1px solid var(--accent);
+    border-radius: 10px;
+    /* position: absolute;
+    bottom: 0; */
+}
+.clarification {
+    color: var(--second-text);
+}
+.numbers{
+    vertical-align: top;
+}
+
+.information-table{
+    margin-top: 50px;
+    margin-bottom: 50px;
+
+    cursor: pointer;
+}
+.information-table p {
+    font-weight: 400;
+    font-size: 16px;
+}
+.tabular-line{
+    width: 100%;
+    border-radius: var(--br-md);
+    border: 1px solid var(--bg);
+    transition: 0.3s all;
+}
+.modal-table{
+    min-width: 400px;
+    border-radius: 10px;
+    padding: 25px;
+    position: fixed;
+    margin: auto;
+    z-index: 1;
+    background-color: var(--main);
+}
+.tabular-line:hover{
+    border: 1px solid var(--accent);
+}
+.information-table :nth-child(1):hover{
+    border: 1px solid var(--bg);
+}
+.tabular-line >*:nth-child(1){
+    width: 88px;
+    display: flex;
+    justify-content: center;
+}
+.tabular-line >*:nth-child(2){
+    width: 168px;
+}
+.tabular-line >*:nth-child(3){
+    width: 932px;
+}
+.tabular-line >*:nth-child(4){
+    width: 146px;
+    display: flex;
+    align-items: center;
+}
+.tabular-line >*:nth-child(5){
+    width: 146px;
+    display: flex;
+    align-items: center;
+}
+@media screen and (max-width: 1200px) {
+    .tabular-line > *:nth-child(3) {
+        width: 697px;
+    }
+}
+
+@media screen and (max-width: 992px) {
+    .tabular-line > *:nth-child(3) {
+        width: 488px;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .tabular-line > *:nth-child(3) {
+        width: 265px;
+    }
+}
+@media screen and (max-width: 576px) {
+    .tabular-line > *:nth-child(3) {
+        width: 144px;
+        margin: 0;
+    }
+}

templates/landing/footer.html

@@ -1,52 +1,44 @@
 {% load static %} 
-<style>
-@media screen and (max-width: 860px) {
-  .mob-footer {
-    display: none;
-  }
-}
-</style>
-<footer class="footer mt-auto py-3">
-    <div class="container mob-footer">
-        <div class="row m-1 mx-4" style="font-size: 14px;">
-            <div class="col-3" style="font-family: Lobster;">© <span id="date-year" style="font-family: Lobster;">2022</span> <a href="#" style="text-decoration: none; color: black; font-family: Lobster;"></a>ссылка на сайт</div>
-            
-            <div class="col-6 text-center">
-              <img src="{% static 'landing/img/letterlogo.png' %}" style="width: 40px;" />
-              <img src="{% static 'landing/img/main-logo.png' %}" style="width: 100px;" />
-            </div>
-            <div class="col-3 text-end" style="font-family: Lobster;">
-                телефон
-                <br>
-                 e-mail:<a href="#" style="text-decoration: none; color: black; font-family: Lobster;">email</a>
-            </div>
-          </div>
-          <div class="row m-1">
-            <div class="col-12">
-              <img
-                src="{% static 'landing/img/headerimage.png' %}"
-                style="width: 100%; height: 100%"
-              />
-            </div>
-          </div>
-          <div class="row " style="margin-top: -9px;">
-            <ul class="nav justify-content-center">
-              <li class="nav-item my-1 m-sm-1 mx-lg-4">
-                <a class="nav-link" href="{% url 'main' %}" style="color: #060936;"><h4>УСЛУГИ</h4></a>
-              </li>
-              <li class="nav-item my-1 m-sm-1 mx-lg-4">
-                <a class="nav-link" href="{% url 'order' %}" style="color: #060936;"><h4>ЗАКАЗ ОНЛАЙН</h4></a>
-              </li>
-              <li class="nav-item my-1 m-sm-1 mx-lg-4">
-                <a class="nav-link" href="{% url 'faq' %}" style="color: #060936;"><h4>FAQ</h4></a>
-              </li>
-              <li class="nav-item my-1 m-sm-1 mx-lg-4">
-                <a class="nav-link" href="{% url 'price' %}" style="color: #060936;"><h4>ЦЕНЫ</h4></a>
-              </li>
-              <li class="nav-item my-1 m-sm-1 mx-lg-4">
-                <a class="nav-link" href="{% url 'contact' %}" style="color: #060936;"><h4>КОНТАКТЫ</h4></a>
-              </li>
+
+<footer >
+    <div  class="flex-row content-between content-around wrap-footer footer-size adaptive-content-768">
+        <div  class="flex-column services-footer">
+            <h4>О компании</h4>
+            <ul class="list-none footer-text cursor-pointer">
+                <li>Партнерам</li>
+                <li><a href="{% url 'price' %}">Тарифы</a></li>
+                <li><a href="{% url 'contact' %}">Контакты</a></li>
             </ul>
-          </div>
+        </div>
+        <div class="flex-column services-footer">
+            <h4>О сервисе</h4>
+            <ul class="list-none footer-text cursor-pointer decoration-none">
+                <li>Преимущества</li>
+                <a href="../footer-pages/LegalInformation.html">
+                    <li>Правовая информация</li>
+                </a>
+                <li>Правила оказания услуг</li>
+            </ul>
+        </div>
+        <div class="flex-column services-footer">
+            <h4>Услуги</h4>
+            <ul class="list-none footer-text cursor-pointer">
+                <li>Услуга 1</li>
+                <li>Услуга 2</li>
+                <li>Услуга 3</li>
+            </ul>
+        </div>
+        <div class="flex-column services-footer">
+            <h4>О приложении</h4>
+            <ul class="list-none footer-text cursor-pointer">
+                <li>Скачать приложение</li>
+                <li>Подключиться</li>
+                <li><a href="/my/">Войти</a></li>
+            </ul>
+        </div>
+    </div>
+    <div class="text-center w-100 footer-row">
+        <p>2025 © powered by</p>
+        <img class="footer-image-margin" src="../images/sharix-footer-logo.svg" alt="sharix-footer-logo">
     </div>
-  </footer>
+</footer>

templates/landing/header.html

@@ -1,55 +1,45 @@
 {% load static %} 
-<style>
-  .header-line{
-    font-family:Roboto;
-    background-image: url("{% static 'landing/img/header-line.png' %}");
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-  }
-</style>
-<div class="container-sm">
-    <div class="row m-3">
-      <div class="col-6" style="font-size: 22px; font-family: Lobster;">Москва</div>
-      <div class="col-6 text-end" style="font-size: 22px; font-family: Lobster;">телефон</div>
+    
+    <div class="under-header flex-row content-between">
+        <div class="substrate">
+            <h1 class="substrate-text mt-25" style="margin-bottom: 0;">Шаблон лендинга ShariX Open!</h1>
+            <p class="substrate-text" >Измените его! Для входа в админ панель ищите конпку ВОЙТИ!</p>
+        </div>
+        <img class="adaptive-img-none" src="../images/two-persons.png" alt="two-persons">
     </div>
-    <div class="row m-3">
-      <div class="col-12" style="font-size: 22px; font-family: Arial;">Это шаблон лендинга, он специально страшный. Измените его! Но он рабочий, для входа в админ панель ищите конпку ВОЙТИ!</div>
-    </div>
-    <div class="row m-4">
-      <div class="col-12 text-center">
-        <img src="{% static 'landing/img/letterlogo.png' %}" alt="" />
-        <img src="{% static 'landing/img/main-logo.png' %}" alt="" />
-      </div>
-    </div>
-    <div class="row m-2">
-      <div class="col-12">
-        <img
-          src="{% static 'landing/img/headerimage.png' %}"
-          style="width: 100%; height: 100%"
-        />
-      </div>
-    </div>
-    <div class="row " style="margin-top: -9px;">
-      <ul
-        class="nav justify-content-center header-line">
-        <li class="nav-item my-1 m-sm-1 mx-lg-4">
-          <a class="nav-link" href="{% url 'main' %}" style="color: white; "><h4>УСЛУГИ</h4></a>
-        </li>
-        <li class="nav-item my-1 m-sm-1 mx-lg-4">
-          <a class="nav-link" href="{% url 'order' %}" style="color: white; "><h4>ЗАКАЗ ОНЛАЙН</h4></a>
-        </li>
-        <li class="nav-item my-1 m-sm-1 mx-lg-4">
-          <a class="nav-link" href="{% url 'faq' %}" style="color: white; "><h4>FAQ</h4></a>
-        </li>
-        <li class="nav-item my-1 m-sm-1 mx-lg-4">
-          <a class="nav-link" href="{% url 'price' %}" style="color: white; "><h4>ЦЕНЫ</h4></a>
-        </li>
-        <li class="nav-item my-1 m-sm-1 mx-lg-4">
-          <a class="nav-link" href="{% url 'contact' %}" style="color: white; "><h4>КОНТАКТЫ</h4></a>
-        </li>
-        <li class="nav-item my-1 m-sm-1 mx-lg-4">
-          <a class="nav-link" href="/my/" style="color: red; "><h4>ВОЙТИ</h4></a>
-        </li>
-      </ul>
-    </div>
-  </div>
+    
+    <header class="menu flex-row-center">
+        <div class="flex-row-center sharix-menu-text">
+            <img class="ShariX-icon" src="../images/sharix-logo 1.svg" alt="sharix-logo">
+            <p>ShariX OpenTemplate</p>
+        </div>
+        <div id="popup" class="popup">
+            <ul id="menu" class="menu-text decoration-none fixed-width">
+                <a class="cursor-pointer clicked-reference " href="{% url 'main' %}">
+                    <li class="blue-text">О нас</li>
+                </a>
+                <a class="cursor-pointer clicked-reference" href="{% url 'price' %}">
+                    <li>Услуги</li>
+                </a>
+                <a class="cursor-pointer clicked-reference" href=href="{% url 'faq' %}">
+                    <li>Партнерам</li>
+                </a>
+                <a class="cursor-pointer clicked-reference" href="{% url 'contact' %}">
+                    <li>Контакты</li>
+                </a>
+                <div class="cover-enter-icon">
+                <button id="login" class="blue-text clicked-reference login-btn display-none">Регистрация</button>
+                <a href="/my/"><img class="enter-icon" src="../images/enter.svg" alt="sharix-logo"></a>
+                </div>
+            </ul>
+        </div>
+        <div id="burgerMenu" class="flex-row-center display-none">
+            <div  class="burger">
+                <div class="line"></div>
+                <div class="line"></div>
+                <div class="line"></div>
+            </div>
+        </div>
+
+    </header>
+    

templates/landing/pages/contact.html

@@ -2,33 +2,52 @@
 {% load static %} 
 {% block container %}
 
-<div class="row" style="min-height: 500px;">
-    <div class="container-fluid">
-        <div class="row">
-            <div class="col-12 col-md-7" style=" overflow-wrap: break-word;">
-                <div style="position:relative;overflow:hidden; border-radius: 15px;  box-shadow: 1px 1px 5px gray; margin: 30px 10px 40px 10px;">
-                    <iframe src="#" 
-                    width="100%" height="400" frameborder="1" allowfullscreen="true" style="position:relative;"></iframe>
-                </div>
-            </div>
-            <div class="col-12 col-md-5" style="overflow-wrap: break-word;">
-                <div style="margin: 30px 10px 40px 10px;">
-                    <h2>КОНТАКТЫ:</h2>
-                    
-                    <h6>&nbsp;</h6>
-                    <h5>Адреса:</h5>
-                    <span style="font-size:18px; font-weight: bold;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae voluptatibus sunt nesciunt corporis fugit rem.</span>
-                    
-                    <h2>&nbsp;</h2>
-                    <h5>Телефон:</h5>
-                    <span style="font-size:18px; font-weight: bold;">телефон</span>
-                    
-                    <h2>&nbsp;</h2>
-                    <h5>E-mail:</h5>
-                    <span style="font-size:18px; font-weight: bold;"><a href="mailto: " style="text-decoration: none; color: black;">email</a></span>
-                </div>    
-            </div>
+<div class="flex-row adaptive-992">
+    <div class="deranged-data">
+        <h1>Свяжитесь с нами!</h1>
+        <p class="contacts-text">Здесь вы найдете всю необходимую информацию для связи с нашей компанией.
+            Мы стремимся к тому, чтобы наше сотрудничество было максимально комфортным
+             и продуктивным для всех наших клиентов и
+            партнеров.</p>
+        <div class="flex-row">
+            <img class="data" src="../images/arobase.svg" alt="arobase">
+            <p class="email-margin">email@sharix.org</p>
+            <img class="data" src="../images/phone.svg" alt="phone">
+            <p>+7 999 999 99 00</p>
         </div>
+        <div class="flex-row">
+            <img class="data" src="../images/mark.svg" alt="mark">
+            <p>г. Москва, ул. Большая Ордынка 5к3</p>
+        </div>
+        <iframe class="map"
+            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2245.7839946590307!2d37.622450612216845!3d55.744881992489226!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46b54aff269a51d7%3A0xc01707669cafbe93!2z0YPQuy4g0JHQvtC70YzRiNCw0Y8g0J7RgNC00YvQvdC60LAsIDUsINCc0L7RgdC60LLQsCwgMTE1MDM1!5e0!3m2!1sru!2sru!4v1706554474958!5m2!1sru!2sru"
+            width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
+            referrerpolicy="no-referrer-when-downgrade"></iframe>
+    </div>
+    <div class="contacts-data">
+        <div id="name" input-group="true" class="input-group">
+            <p>Как Вас зовут?</p>
+            <input autocomplete="off" class="main-input" type="text">
+            <label class="error-input"></label>
+        </div>
+        <div id="email" input-group="true" class="input-group">
+            <p>E-mail</p>
+            <input autocomplete="off" id="email" class="main-input" type="text">
+            <label class="error-input"></label>
+        </div>
+        <div id="phone" input-group="true" class="input-group">
+            <p>Телефон</p>
+            <input autocomplete="off" id="phone" class="main-input" type="text">
+            <label class="error-input"></label>
+        </div>
+        <div id="comment" input-group="true" class="input-group">
+            <p>Комментарий</p>
+            <textarea class="second-input comment-input"></textarea>
+            <label class="error-input"></label>
+        </div>
+        <button id="send_button" class=" proto-button send cursor-pointer">Отправить</button>
     </div>
 </div>
-{% endblock %}
+
+
+{% endblock %}

templates/landing/pages/main.html

@@ -2,58 +2,46 @@
 {% load static %} 
 {% block container %}
 
-<div class="row" style="min-height: 500px;">
-    <!-- видео -->
-    <div class="ratio ratio-21x9">
-        <iframe 
-        src="https://rutube.ru/play/embed/13dc8e0f0dab202617a6372b84a82bd1/">
-         </iframe>
-    </div>
-    
-    <div class="col-12 col-sm-6 col-md-5 col-lg-4 col-xxl-3 order-1 order-md-0">
-        {% include 'landing/menu.html' %}
-    </div>
-    
-    <div class="col-12 col-sm-6 col-md-7 col-lg-8 col-xxl-9 order-0 order-md-1" style="overflow-wrap: break-word;">
-        <!-- {% comment %} {{ flatpage.content|safe }} {% endcomment %}
-        {{ mainpage.content|safe }} -->
-        {% block about %}{% endblock %}
-        <h3>&nbsp;</h3>
-
-        <h1>О КОМПАНИИ</h1>
-      
-        <h4><span style="font-size:20px">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, culpa cum vel veniam, quaerat assumenda unde deserunt mollitia architecto nemo alias ullam omnis odit labore</span></h4>
-      
-        <h2>&nbsp;</h2>
-      
-        <h1>НАШИ ПРЕИМУЩЕСТВА</h1>
-      
-        <h4><span style="font-size:20px">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</span></h4>
-      
-        <h4><span style="font-size:20px">Lorem ipsum dolor sit amet consectetur adipisicing elit.</span></h4>
-      
-        <h4><span style="font-size:20px">Lorem ipsum, dolor sit amet consectetur adipisicing </span></h4>
-      
-        <h4><span style="font-size:20px">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</span></h4>
-      
-        <h4><span style="font-size:20px">Lorem ipsum dolor sit amet consectetur adipisicing elit.</span></h4>
-      
-        <h4><span style="font-size:20px">Lorem ipsum dolor sit amet consectetur adipisicing elit.</span></h4>
-      
-        <h2>&nbsp;</h2>
-      
-        {% comment %} <h1>ПАКЕТНОЕ ОБСЛУЖИВАНИЕ</h1>
-      
-        <h4><span style="font-size:20px">Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat impedit quas iure eos pariatur deserunt facilis architecto animi ipsum, atque, distinctio iusto dolores deleniti q</span></h4>
-      
-        <h4><span style="font-size:20px">Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias aliquam amet ulla</span></h4>
-      
-        <h4><span style="font-size:20px">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam quas iusto autem fugiat aut architecto quidem sit totam fugit adipisci? Odio, dolor</span></h4> {% endcomment %}
-        {% include 'landing/ser_btn.html' %}
-        
-    </div>
-    <div class="col-12 order-2">
-        <img src="{% static 'landing/img/bigimg.png' %}" style="width: 100%; height: 100%;" alt="">
+<div class="aboutCompany">
+    <h1>О компании</h1>
+    <p>В данном разделе должны быть представлены основные сведения о компании, ее история, миссия, цели
+        и ценности. Также можно упомянуть основные достижения и проекты, в которых участвовала компания,
+        и описать ее преимущества и уникальные предложения. Важно, чтобы информация была представлена
+        ясно и лаконично, чтобы посетители сайта могли
+        быстро ознакомиться с основными аспектами деятельности компании.</p>
+    <figure class="sixteen-nine-img">
+        <img alt="image-place">
+    </figure>
+    <h1>Наша команда</h1>
+    <p>В данном разделе представлены сведения о ключевых сотрудниках компании, их профессиональном опыте
+        и достижениях. Здесь можно рассказать о руководителях отделов, высококвалифицированных
+        специалистах и других сотрудниках, которые вносят значительный вклад в развитие компании. Важно,
+        чтобы информация была представлена в понятной форме и давала представление о том, какие кадры
+        работают в компании и как они способствуют ее успеху.</p>
+    <div class="employees flex-row content-between image-place">
+        <div>
+            <div class="employee_avatar">
+                <img class="icon-border" src="../images/first-employee.png" alt="first-employee">
+            </div>
+            <h2>Имя Фамилия</h2>
+            <p>Должность</p>
+        </div>
+        <div>
+            <div class="employee_avatar">
+                <img class="icon-border" src="../images/second-employee.png" alt="first-employee">
+            </div>
+            <h2>Имя Фамилия</h2>
+            <p>Должность</p>
+        </div>
+        <div>
+            <div class="employee_avatar">
+                <img class="icon-border" src="../images/third-employee.png" alt="first-employee">
+            </div>
+            <h2>Имя Фамилия</h2>
+            <p>Должность</p>
+        </div>
     </div>
 </div>
+</div>
+
 {% endblock %}

templates/landing/pages/price.html

@@ -2,104 +2,13 @@
 {% load static %} 
 {% block container %}
 
-<div class="row" style="min-height: 500px;">   
-    <div class="col-12 mt-5" style="overflow-wrap: break-word;">
-        <h2>УВАЖАЕМЫЕ ГОСПОДА!</h2> 
-        <hr>       
-        <h5>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci mollitia vitae ratione. Culpa, corporis sit aperiam voluptas laudantium, modi libero labore ab blanditiis eligendi porro dignissimos ratione ipsam, possimus eos? </h5>
-        <h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quae, sunt quis distinctio animi, illo atque dolores natus non voluptates quisquam a. Officia facilis provident magni? Praesentium?</h5>
-        <h5>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, optio!</h5>
-        <hr> 
-        <h2>&nbsp;</h2> 
-        <h2>СТОИМОСТЬ УСЛУГ</h2>
-        <table class="table table-striped">
-            <thead>
-              <tr>
-                <th scope="col">#</th>
-                <th scope="col">Услуга</th>
-                <th scope="col">Цена</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <th scope="row">1</th>
-                <td>Lorem ipsum dolor sit amet.</td>
-                <td>Lorem, ipsum.</td>
-              </tr>
-              <tr>
-                <th scope="row">2</th>
-                <td>Lorem ipsum dolor sit amet.</td>
-                <td>Lorem, ipsum.</td>
-              </tr>
-              <tr>
-                <th scope="row">3</th>
-                <td>Lorem ipsum dolor sit amet.</td>
-                <td>Lorem, ipsum.</td>
-              </tr>
-              <tr>
-                <th scope="row">4</th>
-                <td>Lorem ipsum dolor sit amet.</td>
-                <td>Lorem, ipsum.</td>
-              </tr>
-              <tr>
-                <th scope="row">5</th>
-                <td>Lorem ipsum dolor sit amet.</td>
-                <td>Lorem, ipsum.</td>
-              </tr>
-              <tr>
-                <th scope="row">6</th>
-                <td>Lorem ipsum dolor sit amet.</td>
-                <td>Lorem, ipsum.</td>
-              </tr>
-            </tbody>
-          </table>
-          
-          <h2>&nbsp;</h2> 
-          
-        <h2>ДОПОЛНИТЕЛЬНЫЕ УСЛУГИ</h2>
-        <table class="table table-striped">
-            <thead>
-              <tr>
-                <th scope="col">#</th>
-                <th scope="col">Услуга</th>
-                <th scope="col">Цена</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <th scope="row">1</th>
-                <td>Lorem ipsum dolor sit amet.</td>
-                <td>Lorem, ipsum.</td>
-              </tr>
-              <tr>
-                <th scope="row">2</th>
-                <td>Lorem ipsum dolor sit amet.</td>
-                <td>Lorem, ipsum.</td>
-              </tr>
-              <tr>
-                <th scope="row">3</th>
-                <td>Lorem ipsum dolor sit amet.</td>
-                <td>Lorem, ipsum.</td>
-              </tr>
-              <tr>
-                <th scope="row">4</th>
-                <td>Lorem ipsum dolor sit amet.</td>
-                <td>Lorem, ipsum.</td>
-              </tr>
-              <tr>
-                <th scope="row">5</th>
-                <td>Lorem ipsum dolor sit amet.</td>
-                <td>Lorem, ipsum.</td>
-              </tr>
-              <tr>
-                <th scope="row">6</th>
-                <td>Lorem ipsum dolor sit amet.</td>
-                <td>Lorem, ipsum.</td>
-              </tr>
-            </tbody>
-          </table>
-        {% include 'landing/ser_btn.html' %}
-        
-    </div>
+<h1>Уважаемые господа!</h1>
+<p>Здесь можно описать основные направления деятельности компании, перечень услуг, которые она оказывает, а
+    также примеры проектов, выполненных компанией в рамках этих услуг. Важно, чтобы информация была
+    представлена ясно и понятно, с подробным описанием услуг и их преимуществ для клиентов. Также можно
+    указать цены на услуги, если это применимо, или описать систему ценообразования компании.</p>
+    
+<div id="informationTable" class="information-table">
+    
 </div>
-{% endblock %}
+{% endblock %}

templates/landing/scripts/burger.js

@@ -0,0 +1,33 @@
+function Burger(){
+    const burgerMenu = document.getElementById('burgerMenu');
+    const popup = document.getElementById('popup');
+    const login = document.getElementById('login');
+    function togglePopup(){
+        if(popup.classList.contains('display-none')){
+            popup.classList.remove('display-none')
+        }
+        else{
+            popup.classList.add('display-none')
+        }
+    }
+    burgerMenu.addEventListener("click", togglePopup)
+
+    function checkWidth() {
+        if(window.innerWidth < 992){
+            login.classList.remove('display-none')
+            popup.classList.add('display-none');
+            burgerMenu.classList.remove('display-none');
+            }
+            else{
+            popup.classList.remove('display-none');
+            burgerMenu.classList.add('display-none');
+            login.classList.add('display-none')
+            }
+    }
+    checkWidth()
+
+    window.addEventListener('resize', checkWidth);
+}
+window.onload = function() {
+    Burger();
+};

templates/landing/scripts/input.js

@@ -0,0 +1,67 @@
+const validationFieldIDS = ['name', 'email', 'phone']
+const BUTTON_ID = 'send_button'
+
+function getGroupInputs(){
+    return document.querySelectorAll('[input-group="true"]')
+}
+
+function getInput(children){
+    return Array.from(children).find((item) => item.nodeName === 'INPUT' || item.nodeName === "TEXTAREA")
+}
+
+function initInput(){
+    const elems = getGroupInputs()
+    for(const elem of elems){
+        const input = getInput(elem.children)
+        if(input && elem){
+            elem.onclick = (e) => {
+                input.focus();
+                if(elem.classList.contains('active') ){
+                    if(!input.value) {
+                        input.blur()
+                        elem.classList.remove('active')
+                    }
+                }else{
+                    elem.classList.add('active')
+                }
+            }
+            input.addEventListener('blur', () => {
+                if(!input.value) {
+                    elem.classList.remove('active')
+                }
+            })
+        }     
+    }
+}
+
+function initValidate(){
+    const button = document.getElementById(BUTTON_ID)
+    const elems = Array.from(getGroupInputs()).filter((elem) => validationFieldIDS.includes(elem.id))
+    function validateFields(){
+        let validatedCount = 0
+        for(const elem of elems){
+            const input = getInput(elem.children)
+            if(input.value){
+                validatedCount++
+            }
+        }
+    
+        if(validationFieldIDS.length !== validatedCount){
+            button.disabled = true
+        }else{
+            button.disabled = false
+        }
+    }
+    
+    for(const elem of elems){
+        const input = getInput(elem.children)
+        input.addEventListener('input', validateFields)
+    }
+
+    validateFields()
+}
+
+
+initValidate()
+
+initInput()

templates/landing/scripts/service.js

@@ -0,0 +1,25 @@
+function validateInput(id){
+    const div = document.getElementById(id)
+    const input = div.children[1]
+    const error = div.children[2]
+
+    input.addEventListener('input', (e) => {
+        if(!e.target.value && !div.classList.contains('active')){
+            error.innerHTML = "Поле обязательно к заполению"
+        }else{
+            error.innerHTML = ""
+        }
+    })
+
+    input.addEventListener('blur', (e) => {
+        if(!e.target.value){
+            error.innerHTML = "Поле обязательно к заполению"
+        }else{
+            error.innerHTML = ""
+        }
+    })
+}
+
+validateInput('name')
+validateInput('email')
+validateInput('phone')

templates/landing/scripts/servises.js

@@ -0,0 +1,106 @@
+let items = [
+    {
+        id: 1,
+        title: "Дружбан-Плюс",
+        text: "Это система управления государством, источником власти в которой является сам народ. Именно народ решает, какие законы и нормы необходимы для гармоничного существования и развитиягосударства. Таким образом, каждый человек в демократическом обществе получает определенныйнабор свобод и обязательств сформированных с учетом интересов всего сообщества. Исходя извышесказанного, можно заключить, что демократия – это возможность для каждого человекасвободно участвовать в непосредственном управлении своим государством, обществом и личнойсудьбой в конечном счете.",
+        cost: "50 000 рублей"
+    },
+    {
+        id: 2,
+        title: "Дружбан-Прем",
+        text: "Это система управления государством, источником власти в которой является сам народ. Именно народ решает, какие законы и нормы необходимы для гармоничного существования и развитиягосударства. Таким образом, каждый человек в демократическом обществе получает определенныйнабор свобод и обязательств сформированных с учетом интересов всего сообщества. Исходя извышесказанного, можно заключить, что демократия – это возможность для каждого человекасвободно участвовать в непосредственном управлении своим государством, обществом и личнойсудьбой в конечном счете.",
+        cost: "50 000 рублей"
+    }
+]
+const redCross = document.getElementById('redCross')
+const informationTable = document.getElementById('informationTable')
+const backgroundPopup = document.getElementById('backgroundPopup')
+const contentPopup = document.getElementById('contentPopup')
+const proposalPopup = document.getElementById('proposalPopup')
+const tablePopup = document.getElementById('tablePopup')
+tablePopup.addEventListener('click',function(e){
+    e.stopPropagation()
+})
+function resize() {
+
+    informationTable.innerHTML=` 
+    <div class="tabular-line flex-row">
+                <b>#</b>
+                <b>Название</b>
+                <b>Описание</b>
+                <b>Стоимость</b>
+            </div>
+    `
+    for ( let item of items){
+
+
+
+        let div = document.createElement('div')
+        div.classList.add("tabular-line")
+        div.classList.add("flex-row")
+        let id = document.createElement('p')
+        let title = document.createElement('p')
+        let textContent = document.createElement('p')
+        textContent.classList.add('desc')
+
+        let cost = document.createElement('b')
+    
+        div.id = item.id
+        id.innerHTML= item.id
+        title.innerHTML = item.title
+        textContent.innerHTML = item.text.slice(0, 150) + '...'
+        cost.innerHTML = item.cost
+    
+    
+        div.appendChild(id)
+        div.appendChild(title)
+        div.appendChild(textContent)
+        div.appendChild(cost)
+    
+        if( window.screen.width < 576){
+            textContent.innerHTML = `<p class="blue-text">Подробнее...</p>`
+            backgroundPopup.addEventListener('click', function(e){
+                e.stopPropagation()
+                backgroundPopup.classList.add('display-none')
+                document.body.style.overflow = 'auto'
+            })
+            redCross.addEventListener('click', function(){
+                backgroundPopup.classList.add('display-none')
+                document.body.style.overflow = 'auto'
+
+            })
+            textContent.addEventListener('click', function(e){
+                document.body.style.overflow = 'hidden'
+                e.stopPropagation()
+                backgroundPopup.classList.remove('display-none')
+
+                proposalPopup.textContent = item.title
+                contentPopup.textContent = item.text
+            })
+        }
+
+        div.addEventListener('click', function(){
+            let arr = Array.from(informationTable.children)
+            for (let item of arr){
+            if(item.classList.contains('active') && item.id !== div.id){
+                item.classList.remove('active')
+                const child = Array.from(item.children).find(elem=>elem.classList.contains('desc'))
+                child.innerHTML = child.innerHTML.slice(0, 150) + '...'
+            }
+           }
+            if(div.classList.contains('active')){
+                div.classList.remove('active')
+                textContent.innerHTML = item.text.slice(0, 150) + '...'
+            }
+            else{
+                div.classList.add('active')
+                textContent.innerHTML = item.text
+            }
+        })
+        
+        informationTable.appendChild(div)
+    }
+}
+resize()
+
+window.addEventListener('resize', resize)