add offline city map

Author: 3004Kristina

landing_page/mainpage/js/main.js

@@ -1,3 +1,4 @@
+
 class LearnPython {
 
   constructor() {

landing_page/mainpage/static/css/style.css

@@ -4013,6 +4013,7 @@ ul.installment-plan li:before {
 .price-list {
     display: flex;
     flex-direction: row;
+    justify-content: center;
     margin: 0 -25px;
 }
 
@@ -4103,7 +4104,14 @@ ul.installment-plan li:before {
 
 .price-second .price-list .price-item {
     padding: 20px;
-    margin: 15px;
+    margin: 15px 100px;
+}
+
+@media (max-width: 1300px){
+    .price-second .price-list .price-item {
+        padding: 20px;
+        margin: 15px;
+    }
 }
 
 .price-second .price-item.payment-after {
@@ -4125,6 +4133,209 @@ ul.installment-plan li:before {
     border-box: none;
     background: #ffffff;
 }
+.offline-map{
+    padding: 100px 0;
+}
+
+.offline-map .pc-section-header{
+    padding-bottom: 67px;
+}
+
+.offline-map-wrapper{
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: stretch;
+}
+
+.offline-map-city-list{
+    width: 737px;
+    height: 826px;
+    flex-shrink: 0;
+    background-color: #333333;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    padding: 44px 25px 0 0;
+
+}
+
+.offline_city_content_wrapper h3{
+    font-family: 'Ubuntu', sans-serif;
+    font-style: normal;
+    font-weight: 700;
+    font-size: 32px;
+    line-height: 1;
+    text-transform: uppercase;
+    color: #333333;
+    margin: 0 0 34px;
+}
+
+.offline_city_content_list{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin: 0 -15px;
+}
+
+.offline_city_content_item{
+    width: calc(100%/2 - 30px);
+    margin: 0 15px;
+}
+
+.offline_city_content_item button{
+    width: 100%;
+    height: 46px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    background-color: #2D9CDB;
+    font-family: 'Ubuntu', sans-serif;
+    font-style: normal;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 1;
+    text-align: center;
+    color: #FFFFFF;
+    border-radius: 54px;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    transition: box-shadow 0.2s;
+}
+
+.offline_city_content_item button:hover{
+    box-shadow: 0 3px 0 #2e729e;
+}
+
+.offline_city_content_item button:disabled{
+    background-color: #D3D3D3;
+    color: #7B7B7B;
+    cursor: auto;
+}
+
+.offline_city_content_item button:disabled:hover{
+    box-shadow: none;
+}
+
+.offline_city_content_item .title{
+    font-family: 'Ubuntu', sans-serif;
+    font-style: normal;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 18px;
+    color: #333333;
+    margin: 0 0 5px;
+}
+
+.offline_city_content_item .offline_date{
+    font-family: 'Ubuntu', sans-serif;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 18px;
+    color: #333333;
+    margin: 0 0 10px;
+}
+
+.offline_city_content_item .offline_price{
+    font-family: 'Ubuntu', sans-serif;
+    font-style: normal;
+    font-weight: 700;
+    font-size: 28px;
+    line-height: 32px;
+    color: #333333;
+    margin: 0 0 6px;
+}
+
+.offline_city_content_item .decr-price{
+    text-decoration: none;
+    display: block;
+    font-family: 'Ubuntu', sans-serif;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 18px;
+    color: #333333;
+    margin: 0 0 33px;
+}
+
+#offline-map {
+    width: 100%;
+    height: 826px;
+}
+
+#offline-map .ymaps-2-1-78-balloon,
+#offline-map .ymaps-2-1-78-balloon *,
+#offline-map .ymaps-2-1-78-balloon *:before,
+#offline-map .ymaps-2-1-78-balloon *:after {
+    box-sizing: border-box !important;
+}
+
+#offline-map .ymaps-2-1-78-balloon__tail:after{
+    display: none;
+}
+
+#offline-map .ymaps-2-1-78-balloon__close+.ymaps-2-1-78-balloon__content{
+    padding: 0 !important;
+}
+
+#offline-map .ymaps-2-1-78-balloon__content {
+    padding: 0 !important;
+}
+
+#offline-map .ymaps-2-1-78-balloon__content > ymaps[id] {
+    /*width: 100% !important;*/
+    /*height: 100% !important;*/
+    /*overflow: visible !important;*/
+    padding: 30px;
+}
+
+#offline-map .ymaps-2-1-78-balloon__layout{
+    width: 100%;
+    height: 100%;
+}
+
+.city-list{
+    list-style: none;
+    margin: 0;
+    padding: 0 370px 0 0;
+
+}
+
+.city-list ::-webkit-scrollbar-thumb {
+    background: red;
+    border-radius: 10px;
+}
+
+.simplebar-scrollbar::before {
+    background-color: rgba(45, 156, 219, 0.6);
+    border-radius: 12px;
+    height: 472px;
+}
+
+.city-list li a{
+    display: block;
+    text-decoration: none;
+    font-family: 'Ubuntu', sans-serif;
+    font-style: normal;
+    font-weight: 700;
+    font-size: 36px;
+    line-height: 1.2;
+    text-transform: uppercase;
+    color: #FFFFFF;
+    padding: 16px 0;
+}
+
+.city-list li a.active{
+    color: #F2C94C;
+}
+
+.city-list li a:hover{
+    color: #F2C94C;
+}
+
 
 @media (max-width: 992px) {
     .labor-program .schedule-item h4 {