new changes

This commit is contained in:
Meylis Gazakow 2021-11-23 22:13:37 +03:00
parent 4f3c20e76a
commit 1415dee373
9 changed files with 1637 additions and 37 deletions

539
shablon/add_post-3.html Normal file
View File

@ -0,0 +1,539 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/slick-theme.css">
<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="css/main.css">
<title>Add post 3 </title>
</head>
<body>
<!-- Header Top ========================================================= -->
<section class="header_top" id="head-top">
<div class="auto_container">
<div class="top_wrap">
<div class="info_block">
<div class="header_contact">
<div class="header_icon">
<img src="images/svg/phone-call.svg" alt="">
</div>
<div class="head_text">
+99312446015
</div>
</div>
<div class="header_contact">
<div class="header_icon">
<img src="images/svg/blue_mail.svg" alt="">
</div>
<a href="#" class="head_text">
info@exchange.gov.tm
</a>
</div>
</div>
<a href="#header" class="top_btn">
<img src="images/svg/up.svg" alt="">
</a>
<div class="info_block">
<div class="header_contact">
<div class="header_icon">
<img src="images/svg/trend_up.svg" alt="">
</div>
<div class="currency">
usd
</div>
<div class="head_num">
3.5000
</div>
</div>
<div class="header_contact">
<div class="header_icon">
<img src="images/svg/trending-down.svg" alt="">
</div>
<div class="currency">
eur
</div>
<div class="head_num">
4.3430
</div>
</div>
<div class="header_contact">
<div class="header_icon">
<img src="images/svg/trend_up.svg" alt="">
</div>
<div class="currency">
gbp
</div>
<div class="head_num">
3.4353
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Header Top end ========================================================= -->
<!--Header ============================================================= -->
<header class="header" id="header">
<div class="auto_container">
<div class="header_wrap">
<a href="index.html" class="header_logo">
<div class="header_img">
<img src="images/big_logo.png" alt="logo">
</div>
<div class="logo_text">
Государственная товарно-сырьевая <br>
биржа Туркменистана
</div>
</a>
<div class="profile">
<div class="profile_bio">
<div class="profile_head">
<div class="profile_icon">
<img src="images/svg/user-plus.svg" alt="">
</div>
<div class="profile_text">
Аман Аманов
</div>
<div class="prodile_arrow">
<img src="images/svg/arrow-down.svg" alt="">
</div>
</div>
<div class="profile_drop">
<a href="personal_data.html" class="profile_item">
<div class="profile_icon">
<img src="images/svg/user-plus.svg" alt="">
</div>
<div class="profile_text">
Персональные данные
</div>
</a>
<a href="my_post.html" class="profile_item">
<div class="profile_icon">
<img src="images/svg/clipboard.svg" alt="">
</div>
<div class="profile_text">
Мои объявления
</div>
</a>
<a href="#" class="profile_item">
<div class="profile_icon">
<img src="images/svg/inbox.svg" alt="">
</div>
<div class="profile_text">
Сообщения
</div>
</a>
<a href="#" class="profile_item">
<div class="profile_icon">
<img src="images/svg/log-out.svg" alt="">
</div>
<div class="profile_text">
Выйти
</div>
</a>
</div>
</div>
<a href="add_post.html" class="add_post_btn">
<div class="post_icon">
<img src="images/svg/add.svg" alt="">
</div>
<div class="post_text">
Добавить объявление
</div>
</a>
</div>
</div>
</div>
</header>
<!--Header end ========================================================= -->
<!--Navs ============================================================= -->
<nav class="navs" id="nav">
<div class="auto_container">
<div class="navs_wrap">
<div class="burger">
<img src="images/svg/menu.svg" alt="">
</div>
<div class="links_bg">
<div class="links">
<a href="category.html" class="nav_link">Категории</a>
<a href="product.html" class="nav_link">Условия торгов</a>
<a href="contact.html" class="nav_link">Обратная связь</a>
<div class="mobile_register">
<div class="register_btn">
<div class="btn_icon">
<img src="images/svg/user-plus-white.svg" alt="">
</div>
<div class="btn_text">
Регистрация
</div>
</div>
<div class="log_in">
<div class="btn_icon">
<img src="images/svg/log-in-white.svg" alt="">
</div>
<div class="btn_text">
Войти
</div>
</div>
</div>
<div class="mobile_profile">
<div class="profile_bio">
<div class="profile_head">
<div class="profile_icon">
<img src="images/svg/user-plus.svg" alt="">
</div>
<div class="profile_text">
Аман Аманов
</div>
<div class="prodile_arrow">
<img src="images/svg/arrow-down.svg" alt="">
</div>
</div>
<div class="profile_drop">
<a href="personal_data.html" class="profile_item">
<div class="profile_icon">
<img src="images/svg/user-plus.svg" alt="">
</div>
<div class="profile_text">
Персональные данные
</div>
</a>
<a href="my_post.html" class="profile_item">
<div class="profile_icon">
<img src="images/svg/clipboard.svg" alt="">
</div>
<div class="profile_text">
Мои объявления
</div>
</a>
<a href="#" class="profile_item">
<div class="profile_icon">
<img src="images/svg/inbox.svg" alt="">
</div>
<div class="profile_text">
Сообщения
</div>
</a>
<a href="#" class="profile_item">
<div class="profile_icon">
<img src="images/svg/log-out.svg" alt="">
</div>
<div class="profile_text">
Выйти
</div>
</a>
</div>
</div>
<a href="add_post.html" class="add_post_btn">
<div class="post_icon">
<img src="images/svg/add.svg" alt="">
</div>
<div class="post_text">
Добавить объявление
</div>
</a>
</div>
</div>
</div>
<div class="languages">
<a href="#" class="lang_item">eng</a>
<a href="#" class="lang_item active">рус</a>
<a href="#" class="lang_item">tkm</a>
</div>
</div>
</div>
</nav>
<!--Navs end ========================================================= -->
<!-- Add post ============================================================= -->
<section class="post">
<div class="auto_container">
<div class="post_wrap">
<div class="contact_title">
Добавить объявления (Step 3)
</div>
<div class="add_post-3">
<div class="add_post-box">
<div class="add_post-box-col">
<div class="add_post_box-item">
<div class="add_post_box-item-row">
<h4 class="add_post-box-title">
Harydyň ady (RUS)
</h4>
</div>
<div class="add_post_box-item-row">
<p class="add_post-box-text">
Test 1 (rus)
</p>
</div>
</div>
<div class="add_post_box-item">
<div class="add_post_box-item-row">
<h4 class="add_post-box-title">
Harydyň markasy
</h4>
</div>
<div class="add_post_box-item-row">
<p class="add_post-box-text">
Test mark
</p>
</div>
</div>
<div class="add_post_box-item">
<div class="add_post_box-item-row">
<h4 class="add_post-box-title">
Önäriji yurt
</h4>
</div>
<div class="add_post_box-item-row">
<p class="add_post-box-text">
Test mark
</p>
</div>
</div>
<div class="add_post_box-item">
<div class="add_post_box-item-row">
<h4 class="add_post-box-title">
Önäriji yurt
</h4>
</div>
<div class="add_post_box-item-row">
<p class="add_post-box-text">
Test mark
</p>
</div>
</div>
</div>
<div class="add_post-box-col">
<div class="add_post_box-item">
<div class="add_post_box-item-row">
<h4 class="add_post-box-title">
Harydyň ady (ENG)
</h4>
</div>
<div class="add_post_box-item-row">
<p class="add_post-box-text">
Test 1 (eng)
</p>
</div>
</div>
<div class="add_post_box-item">
<div class="add_post_box-item-row">
<h4 class="add_post-box-title">
Öndüriji
</h4>
</div>
<div class="add_post_box-item-row">
<p class="add_post-box-text">
Test
</p>
</div>
</div>
<div class="add_post_box-item">
<div class="add_post_box-item-row">
<h4 class="add_post-box-title">
Bazaryň görnöşi
</h4>
</div>
<div class="add_post_box-item-row">
<p class="add_post-box-text">
Test
</p>
</div>
</div>
<div class="add_post_box-item">
<div class="add_post_box-item-row">
<h4 class="add_post-box-title">
Bazaryň görnöşi
</h4>
</div>
<div class="add_post_box-item-row">
<p class="add_post-box-text">
Test
</p>
</div>
</div>
</div>
<div class="add_post-box-col">
<div class="add_post_box-item">
<div class="add_post_box-item-row">
<h4 class="add_post-box-title">
Harydyň ady (TKM)
</h4>
</div>
<div class="add_post_box-item-row">
<p class="add_post-box-text">
Test 1 (tkm)
</p>
</div>
</div>
<div class="add_post_box-item">
<div class="add_post_box-item-row">
<h4 class="add_post-box-title">
Pudak
</h4>
</div>
<div class="add_post_box-item-row">
<p class="add_post-box-text">
Nebit-himiýa önümleri
</p>
</div>
</div>
<div class="add_post_box-item">
<div class="add_post_box-item-row">
<h4 class="add_post-box-title">
Harydyň mukdary
</h4>
</div>
<div class="add_post_box-item-row">
<p class="add_post-box-text">
10
</p>
</div>
</div>
<div class="add_post_box-item">
<div class="add_post_box-item-row">
<h4 class="add_post-box-title">
Harydyň mukdary
</h4>
</div>
<div class="add_post_box-item-row">
<p class="add_post-box-text">
10
</p>
</div>
</div>
</div>
</div>
<div class="basket_info">
<div class="basket_info_title">
Стоимость
</div>
<div class="basket_info_item">
<div class="basket_info_box">
<div class="basket_info_name">
Цена за пост:
</div>
<div class="basket_info_cash">
500 TMT
</div>
</div>
</div>
<div class="basket_info_item">
<div class="basket_info_box">
<div class="basket_info_name">
Итоговая сумма
</div>
<div class="basket_info_cash">
5200 TMT
</div>
</div>
<a href="#" class="pay_link">
Перейти к оплате
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Add post end ========================================================= -->
<!--Footer ============================================================= -->
<footer class="footer">
<div class="auto_container">
<div class="footer_wrap">
<div class="footer_content">
<a href="index.html" class="foot_logo">
<div class="footer_img">
<img src="images/register_logo.png" alt="logo">
</div>
<div class="foot_logo_text">
Государственная товарно-сырьевая <br>
биржа Туркменистана
</div>
</a>
<div class="foot_outer">
<div class="foot_col">
<div class="foot_title">
Категории
</div>
<div class="foot_box">
<a href="#" class="foot_item">
Нефтехимия
</a>
<a href="#" class="foot_item">
Машиностроение
</a>
<a href="#" class="foot_item">
Легкая промышленность
</a>
<a href="#" class="foot_item">
Стройматериалы
</a>
</div>
</div>
<div class="foot_col">
<div class="foot_title">
Контакты
</div>
<div class="foot_box">
<div class="foot_item">
Тел: +99312446015
</div>
<div class="foot_item">
Эл. почта: info@exchange.gov.tm
</div>
<div class="foot_item">
Адрес: 744000, Туркменистан <br>
г.Ашгабат, Арчабиль шаелы 52
</div>
</div>
</div>
</div>
</div>
<div class="copyright">
© TDHСMB все права зашишены
</div>
</div>
</div>
</footer>
<!--Footer end ========================================================= -->
<script src="js/jquery.js"></script>
<script src="js/slick.js"></script>
<script src="js/slider.js"></script>
<script src="js/main.js"></script>
<script>
</script>
</body>
</html>

View File

@ -209,6 +209,42 @@
</p>
</div>
<div class="mobile_user-item accord">
<div class="mobile_user-item-icon">
<img src="images/svg/bell-b.svg" alt="bell">
</div>
<p class="mobile_user-item-text">
Уведомления
</p>
</div>
<div class="accord_notification" >
<a href="#" class="notification_area-item">
<h4 class="notification_are-title">
Some one wrote you some dummy text
</h4>
<p class="notification_area-time">
12:30
</p>
</a>
<a href="#" class="notification_area-item">
<h4 class="notification_are-title">
Some one wrote you some dummy text
</h4>
<p class="notification_area-time">
12:30
</p>
</a>
<a href="#" class="notification_area-item">
<h4 class="notification_are-title">
Some one wrote you some dummy text
</h4>
<p class="notification_area-time">
12:30
</p>
</a>
</div>
<a href="#" class="mobile_user-item">
<div class="mobile_user-item-icon">
<img src="images/svg/inbox.svg" alt="">
@ -365,10 +401,75 @@
</div> -->
</div>
</div>
<div class="languages">
<a href="#" class="lang_item">eng</a>
<a href="#" class="lang_item active">рус</a>
<a href="#" class="lang_item">tkm</a>
<div class="nav_wrap-box">
<div class="notification_box">
<div class="notification_header">
<div class="natification_icon">
<img src="images/svg/bell.svg" alt="bell">
</div>
<p> Уведомления</p>
</div>
<div class="notification_area">
<a href="#" class="notification_area-item">
<h4 class="notification_are-title">
Some one wrote you some dummy text
</h4>
<p class="notification_area-time">
12:30
</p>
</a>
<a href="#" class="notification_area-item">
<h4 class="notification_are-title">
Some one wrote you some dummy text
</h4>
<p class="notification_area-time">
12:30
</p>
</a>
<a href="#" class="notification_area-item">
<h4 class="notification_are-title">
Some one wrote you some dummy text
</h4>
<p class="notification_area-time">
12:30
</p>
</a>
<a href="#" class="notification_area-item">
<h4 class="notification_are-title">
Some one wrote you some dummy text
</h4>
<p class="notification_area-time">
12:30
</p>
</a>
<a href="#" class="notification_area-item">
<h4 class="notification_are-title">
Some one wrote you some dummy text
</h4>
<p class="notification_area-time">
12:30
</p>
</a>
<a href="#" class="notification_area-item">
<h4 class="notification_are-title">
Some one wrote you some dummy text
</h4>
<p class="notification_area-time">
12:30
</p>
</a>
</div>
</div>
<div class="languages">
<a href="#" class="lang_item">eng</a>
<a href="#" class="lang_item active">рус</a>
<a href="#" class="lang_item">tkm</a>
</div>
</div>
</div>
</div>

View File

@ -628,6 +628,7 @@ li {
/* margin-top: 0; */
top: 50px;
}
100% {
top: 0;
}
@ -638,11 +639,19 @@ li {
/* margin-top: 0; */
top: 50px;
}
100% {
top: 0;
}
}
.fill_balance-text {
margin: 30px 0 50px;
font-size: 16px;
line-height: 1.5;
font-weight: 400;
}
.post_form-3 {
display: flex;
align-items: end;
@ -930,6 +939,31 @@ li {
margin-right: 10px;
}
.link {
margin: 30px 0 0 0;
display: flex;
align-items: center;
justify-content: center;
}
.home_link {
display: block;
}
.home_link span {
display: block;
margin: 0 auto;
padding: 12px 40px;
background: var(--blue);
color: #fff;
font-size: 16px;
font-weight: 500;
line-height: 1.3;
border-radius: 5px;
cursor: pointer;
}
.header_img img {
width: 100%;
height: 100%;
@ -1030,8 +1064,176 @@ li {
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
-webkit-box-shadow: inset 0px 5px 3px 0px rgb(39, 39, 39);
box-shadow: inset 0px 5px 3px 0px rgb(39, 39, 39);
-webkit-box-shadow: inset 3px 5px 3px 0px rgb(39, 39, 39), ;
box-shadow: inset 3px 5px 3px 0px rgb(39, 39, 39);
}
.nav_wrap-box {
display: flex;
align-items: center;
}
.notification_box {
margin-right: 40px;
position: relative;
}
.notification_box::after {
content: '';
position: absolute;
top: 60%;
right: -20px;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
width: 10px;
height: 6px;
background: #fff;
clip-path: polygon(100% 0, 0 0, 50% 100%);
-webkit-clip-path: polygon(100% 0, 0 0, 50% 100%);
-o-clip-path: polygon(100% 0, 0 0, 50% 100%);
-ms-clip-path: polygon(100% 0, 0 0, 50% 100%);
-moz-clip-path: polygon(100% 0, 0 0, 50% 100%);
}
.notification_header {
display: flex;
align-items: center;
cursor: pointer;
}
.notification_header p {
color: #fff;
font-size: 18px;
line-height: 1.4;
font-weight: 400;
margin: 0 0 0 10px;
}
.natification_icon {
width: 14px;
height: 16px;
}
.natification_icon img {
width: 100%;
height: 100%;
object-fit: contain;
-o-object-fit: contain;
}
.notification_area {
position: absolute;
top: 100%;
left: 0;
width: 300px;
max-height: 400px;
overflow-y: auto;
background: #fff;
border-radius: 5px;
padding: 10px;
z-index: 10;
-webkit-box-shadow: 0px 6px 4px -1px var(--rgba-black), 0px -3px 4px -1px var(--rgba-black);
-moz-box-shadow: 0px 6px 4px -1px var(--rgba-black), 0px -3px 4px -1px var(--rgba-black);
box-shadow: 0px 6px 4px -1px var(--rgba-black), 0px -3px 4px -1px var(--rgba-black);
display: none;
}
.notification_area::-webkit-scrollbar {
height: 10px;
top: 20px;
width: 6px;
}
.notification_area::-webkit-scrollbar-thumb {
height: 5px;
background: #d5d5d5;
border-radius: 20px;
}
.notification_area.active {
display: block;
top: calc(100% + 40px);
}
.notification_area-item {
padding: 15px 10px;
position: relative;
display: block;
}
.notification_area-item::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: var(--blue);
opacity: .3;
}
.notification_area-item:last-child::after {
display: none;
}
.notification_are-title {
font-size: 15px;
font-weight: 500;
line-height: 1.4;
margin-bottom: 5px;
color: var(--blue);
}
.notification_area-time {
font-size: 14px;
font-weight: 400;
line-height: 1.4;
color: #b4b4b4;
}
.accord_notification {
max-height: 0;
overflow: hidden;
transition: max-height 0.1s ease-out;
-ms-transition: max-height 0.1s ease-out;
-moz-transition: max-height 0.1s ease-out;
-o-transition: max-height 0.1s ease-out;
-webkit-transition: max-height 0.1s ease-out;
background: rgb(235, 235, 235);
border-radius: 5px;
padding: 0 15px;
}
.accord_notification .notification_area-time {
color: #000;
}
.accord_notification .notification_area-item::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
-ms-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-o-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
width: 95%;
height: 1.3px;
z-index: 1;
background: var(--blue);
opacity: .6;
}
.accord_notification .notification_are-title {
font-size: 14px;
}
.links {
@ -1394,6 +1596,24 @@ li {
margin-bottom: 50px;
}
.product_head-row {
display: flex;
align-items: center;
}
.product_head-row .add_post_btn {
margin-left: 40px;
}
.mobile_add-btn {
display: none;
}
.my_advert-bg {
position: relative;
height: 500px;
}
.product_title {
font-size: var(--text-32);
font-weight: 700;
@ -3620,6 +3840,24 @@ li {
position: relative;
}
.pay_link {
display: block;
padding: 20px 10px;
background: var(--blue);
color: #fff;
font-size: 18px;
font-weight: 400;
line-height: 1.3;
border-radius: 5px;
margin-top: 50px;
width: 100%;
text-align: center;
}
.basket_info_item .basket_info_box:last-child {
margin-bottom: 0;
}
.basket_info_item::after {
content: '';
position: absolute;
@ -3738,6 +3976,92 @@ li {
/* Replenishment History end ======================================= */
/* Add post 3 ======================================= */
.add_post-3 {
display: flex;
align-items: flex-start;
}
.add_post-3 .basket_info {
width: 440px;
margin-left: 60px;
margin-top: 0;
}
.add_post-box {
width: calc(100% - 500px);
display: flex;
text-align: center;
}
.add_post-box-col {
width: calc(33.33% - 10px);
margin: 0 5px;
}
.add_post_box-item {
border: 2px solid #F2F6FF;
border-radius: 5px;
margin-bottom: 20px;
}
.add_post_box-item .add_post_box-item-row:first-child {
background: #F2F6FF;
}
.add_post_box-item:last-child {
margin-bottom: 0px;
}
.add_post_box-item-row {
padding: 20px 10px;
display: flex;
align-items: center;
justify-content: center;
}
.add_post-box-title {
color: #003197;
font-size: 16px;
font-weight: 400;
line-height: 1.4;
height: 40px;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}
.add_post-box-text {
color: #000;
font-size: 16px;
font-weight: 400;
line-height: 1.4;
height: 40px;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}
/* Add post 3 end ======================================= */
/* Media Query
======================================================= */
@ -3927,6 +4251,10 @@ li {
padding: 15px 30px;
}
.notification_area.active {
top: calc(100% + 30px);
}
.nav_link {
margin-right: 60px;
}
@ -4103,6 +4431,20 @@ li {
height: 80px;
}
/* Add post 3 ======================================= */
.add_post-box {
width: calc(100% - 430px);
}
.add_post-3 .basket_info {
margin-left: 30px;
width: 400px;
}
/* Add post 3 end ======================================= */
}
@media(max-width: 1200px) {
@ -4212,6 +4554,36 @@ li {
width: 1250px;
}
/* Add post 3 ======================================= */
.add_post-box {
flex-wrap: wrap;
-ms-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-o-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
width: 100%;
}
.add_post-3 {
flex-direction: column;
-ms-flex-direction: column;
-moz-flex-direction: column;
-webkit-flex-direction: column;
}
.add_post-3 .basket_info {
margin-left: 0;
margin-top: 50px;
}
.add_post-box-title,
.add_post-box-text {
font-size: 14px;
height: 39px;
}
}
@media(max-width: 1000px) {
@ -4231,6 +4603,10 @@ li {
display: block;
}
.notification_box {
display: none;
}
.links_bg {
position: fixed;
top: 0;
@ -4347,8 +4723,10 @@ li {
background: #fff;
padding: 30px;
overflow-y: auto;
-ms-overflow-style: none; /* IE 11 */
scrollbar-width: none; /* Firefox 64 */
-ms-overflow-style: none;
/* IE 11 */
scrollbar-width: none;
/* Firefox 64 */
transition: all .3s linear;
-ms-transition: all .3s linear;
@ -4541,6 +4919,14 @@ li {
padding: 0 0 0 10px;
}
.my_advert-bg {
height: 350px;
}
.my_advert-bg .chat_wall_text {
font-size: 18px;
}
/* Basket ============= */
.basket_table {
@ -4652,6 +5038,10 @@ li {
--text-20: 16px;
}
.notification_area.active {
top: calc(100% + 20px);
}
.navs_wrap {
padding: 10px 20px;
}
@ -4763,6 +5153,15 @@ li {
font-size: 22px;
}
.accord_notification {
padding: 0 10px;
}
.accord_notification .notification_area-title,
.accord_notification .notification_area-time {
font-size: 12px;
}
.register_body {
height: auto;
flex-direction: column;
@ -4822,6 +5221,10 @@ li {
margin: 0;
}
.fill_balance-text {
margin: 20px 0 30px;
}
/* Replenishment History ======================================= */
.history_table {
@ -5397,6 +5800,47 @@ li {
.detail_other {
margin-left: 30px;
}
.product_head {
flex-direction: column;
-ms-flex-direction: column;
-moz-flex-direction: column;
align-items: flex-start;
}
.product_head-row .add_post_btn {
display: none;
}
.mobile_add-btn {
display: flex;
align-items: center;
justify-content: center;
max-width: 250px;
margin: 10px auto;
}
.fill_balance-text {
margin: 20px 0 30px;
font-size: 14px;
}
/* Add post 3 ======================================= */
.add_post-box-col {
width: calc(50% - 10px);
margin-bottom: 20px;
}
.add_post-3 .basket_info {
width: 100%;
}
.pay_link {
padding: 15px 10px;
font-size: 14px;
}
}
@media(max-width: 500px) {
@ -5701,6 +6145,10 @@ li {
font-size: 14px;
}
.my_advert-bg {
height: 250px;
}
.foot_logo_text {
font-size: 12px;
}
@ -5732,4 +6180,18 @@ li {
font-size: 14px;
}
/* Add post 3 ======================================= */
.add_post-box-col {
width: calc(100% - 10px);
margin-bottom: 20px;
}
.add_post-box-title, .add_post-box-text {
display: block;
-webkit-line-clamp: unset;
overflow: unset;
height: unset;
}
}

View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16.403" height="18" viewBox="0 0 16.403 18">
<g id="bell" transform="translate(-2 -1)">
<path id="Path_3283" data-name="Path 3283" d="M15,6.8a4.8,4.8,0,1,0-9.6,0C5.4,12.4,3,14,3,14H17.4S15,12.4,15,6.8" fill="none" stroke="#003197" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Path_3284" data-name="Path 3284" d="M13.039,21a1.6,1.6,0,0,1-2.769,0" transform="translate(-1.453 -3.797)" fill="none" stroke="#003197" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 580 B

View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16.403" height="18" viewBox="0 0 16.403 18">
<g id="bell" transform="translate(-2 -1)">
<path id="Path_3283" data-name="Path 3283" d="M15,6.8a4.8,4.8,0,1,0-9.6,0C5.4,12.4,3,14,3,14H17.4S15,12.4,15,6.8" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Path_3284" data-name="Path 3284" d="M13.039,21a1.6,1.6,0,0,1-2.769,0" transform="translate(-1.453 -3.797)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 574 B

View File

@ -0,0 +1,4 @@
<svg width="61" height="61" viewBox="0 0 61 61" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30.3 0.300049C13.7152 0.300049 0.299988 13.7153 0.299988 30.3001C0.299988 46.8848 13.7152 60.3 30.3 60.3C46.8848 60.3 60.3 46.8848 60.3 30.3001C60.3 13.7153 46.8848 0.300049 30.3 0.300049ZM30.3 57.4254C15.3368 57.4254 3.17468 45.2632 3.17468 30.3001C3.17468 15.3369 15.3368 3.17474 30.3 3.17474C45.2631 3.17474 57.4253 15.3369 57.4253 30.3001C57.4253 45.2632 45.2631 57.4254 30.3 57.4254Z" fill="#003197"/>
<path d="M37.671 30.0789C38.9978 28.4573 39.7349 26.3934 39.7349 24.1821C39.7349 18.9487 35.4597 14.7472 30.3 14.7472C25.0666 14.7472 20.8651 19.0224 20.8651 24.1821C20.8651 26.3934 21.6759 28.4573 22.929 30.0789C18.2853 32.9536 15.1157 37.7447 14.4523 43.1993L17.2533 43.5678C17.843 38.7767 20.8651 34.4278 25.0666 32.0691C26.5408 33.0273 28.3098 33.617 30.2263 33.617C32.1428 33.617 33.9118 33.0273 35.386 32.0691C39.6612 34.4278 42.6096 38.7767 43.1993 43.5678L46.0002 43.1993C45.4843 37.7447 42.3147 32.9536 37.671 30.0789ZM23.7398 24.1821C23.7398 20.5703 26.6882 17.6219 30.3 17.6219C33.9118 17.6219 36.8602 20.5703 36.8602 24.1821C36.8602 27.7939 33.9118 30.7423 30.3 30.7423C26.6882 30.7423 23.7398 27.7939 23.7398 24.1821Z" fill="#003197"/>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -8,8 +8,8 @@ const selectElement = function (element) {
};
// selector end=============
let drop = document.querySelectorAll('.profile_drop');
let profile_head = document.querySelectorAll('.profile_head');
let drop = document.querySelector('.profile_drop');
let profile_head = document.querySelector('.profile_head');
let register = document.querySelector('.register');
let register_btn = document.querySelectorAll('.register_btn');
let log_in = document.querySelectorAll('.log_in');
@ -41,6 +41,9 @@ let seller_info = document.querySelector('.seller_info');
let mobile_user_profile = document.querySelector('.mobile_user-profile');
let mobile_profile_navs = document.querySelector('.mobile_profile-navs');
let notification_header = document.querySelector('.notification_header');
let notification_area = document.querySelector('.notification_area');
@ -49,16 +52,16 @@ let mobile_profile_navs = document.querySelector('.mobile_profile-navs');
window.onscroll = function () {
scrollFunc();
drop.forEach(drop => {
if (drop != undefined) {
drop.classList.remove('active');
}
}
);
// if (drop != undefined) {
// drop.classList.remove('active');
// drop.forEach(drop => {
// if (drop != undefined) {
// drop.classList.remove('active');
// }
// }
// );
if (drop != undefined) {
drop.classList.remove('active');
}
};
@ -85,22 +88,53 @@ function sleep(time) {
}
// timing ====================
// Accordion =============================
var accordion = document.getElementsByClassName("accord");
var z;
for (z = 0; z < accordion.length; z++) {
accordion[z].addEventListener("click", function () {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
panel.style.overflow = "auto";
panel.style.marginTop = "0px";
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
panel.style.overflow = "visible";
panel.style.marginTop = "10px";
}
});
} // Accordion end =========================
window.onclick = function (e) {
// if (drop != undefined) {
// if (drop.classList.contains('active') && !e.target.closest('.profile_head')) {
// drop.classList.remove('active');
// }
// }
drop.forEach(drop => {
if (drop != undefined) {
drop.classList.contains('active') && !e.target.closest('.profile_head');
drop.classList.remove('active')
if (drop != undefined) {
if (drop.classList.contains('active') && !e.target.closest('.profile_head')) {
drop.classList.remove('active');
}
}
);
if (notification_area != undefined) {
if (notification_area.classList.contains('active') && !e.target.closest('.notification_header')) {
notification_area.classList.remove('active');
}
}
// drop.forEach(drop => {
// if (drop != undefined) {
// drop.classList.contains('active');
// drop.classList.remove('active')
// }
// }
// );
if (register != undefined) {
if (register.classList.contains('active') && !e.target.closest('.register_body')) {
@ -159,14 +193,31 @@ selectElement('.burger').addEventListener('click', function () {
});
});
// if (profile_head != undefined) {
// profile_head.forEach(r => {
// r.addEventListener('click', function () {
// sleep(2).then(() => {
// drop.forEach(p => {
// p.classList.toggle('active');
// })
// })
// });
// });
// }
if (profile_head != undefined) {
profile_head.forEach(r => {
r.addEventListener('click', function () {
sleep(2).then(() => {
drop.forEach(p => {
p.classList.toggle('active');
})
})
profile_head.addEventListener('click', function () {
sleep(2).then(() => {
drop.classList.toggle('active');
});
});
}
if (notification_header != undefined) {
notification_header.addEventListener('click', function () {
sleep(2).then(() => {
notification_area.classList.toggle('active');
});
});
}

427
shablon/my_post-2.html Normal file
View File

@ -0,0 +1,427 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/slick-theme.css">
<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="css/main.css">
<title>My post</title>
</head>
<body>
<!-- Header Top ========================================================= -->
<section class="header_top" id="head-top">
<div class="auto_container">
<div class="top_wrap">
<div class="info_block">
<div class="header_contact">
<div class="header_icon">
<img src="images/svg/phone-call.svg" alt="">
</div>
<div class="head_text">
+99312446015
</div>
</div>
<div class="header_contact">
<div class="header_icon">
<img src="images/svg/blue_mail.svg" alt="">
</div>
<a href="#" class="head_text">
info@exchange.gov.tm
</a>
</div>
</div>
<a href="#header" class="top_btn">
<img src="images/svg/up.svg" alt="">
</a>
<div class="info_block">
<div class="header_contact">
<div class="header_icon">
<img src="images/svg/trend_up.svg" alt="">
</div>
<div class="currency">
usd
</div>
<div class="head_num">
3.5000
</div>
</div>
<div class="header_contact">
<div class="header_icon">
<img src="images/svg/trending-down.svg" alt="">
</div>
<div class="currency">
eur
</div>
<div class="head_num">
4.3430
</div>
</div>
<div class="header_contact">
<div class="header_icon">
<img src="images/svg/trend_up.svg" alt="">
</div>
<div class="currency">
gbp
</div>
<div class="head_num">
3.4353
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Header Top end ========================================================= -->
<!--Header ============================================================= -->
<header class="header" id="header">
<div class="auto_container">
<div class="header_wrap">
<a href="index.html" class="header_logo">
<div class="header_img">
<img src="images/big_logo.png" alt="logo">
</div>
<div class="logo_text">
Государственная товарно-сырьевая <br>
биржа Туркменистана
</div>
</a>
<!-- <div class="head_buttons">
<div class="register_btn">
<div class="btn_icon">
<img src="images/svg/user-plus-white.svg" alt="">
</div>
<div class="btn_text">
Регистрация
</div>
</div>
<div class="log_in">
<div class="btn_icon">
<img src="images/svg/log-in-white.svg" alt="">
</div>
<div class="btn_text">
Войти
</div>
</div>
</div> -->
<div class="profile">
<div class="profile_bio">
<div class="profile_head">
<div class="profile_icon">
<img src="images/svg/user-plus.svg" alt="">
</div>
<div class="profile_text">
Аман Аманов
</div>
<div class="prodile_arrow">
<img src="images/svg/arrow-down.svg" alt="">
</div>
</div>
<div class="profile_drop">
<a href="personal_data.html" class="profile_item">
<div class="profile_icon">
<img src="images/svg/user-plus.svg" alt="">
</div>
<div class="profile_text">
Персональные данные
</div>
</a>
<a href="my_post.html" class="profile_item">
<div class="profile_icon">
<img src="images/svg/clipboard.svg" alt="">
</div>
<div class="profile_text">
Мои объявления
</div>
</a>
<a href="#" class="profile_item">
<div class="profile_icon">
<img src="images/svg/inbox.svg" alt="">
</div>
<div class="profile_text">
Сообщения
</div>
</a>
<a href="#" class="profile_item">
<div class="profile_icon">
<img src="images/svg/log-out.svg" alt="">
</div>
<div class="profile_text">
Выйти
</div>
</a>
</div>
</div>
<a href="add_post.html" class="add_post_btn">
<div class="post_icon">
<img src="images/svg/add.svg" alt="">
</div>
<div class="post_text">
Добавить объявление
</div>
</a>
</div>
</div>
</div>
</header>
<!--Header end ========================================================= -->
<!--Navs ============================================================= -->
<nav class="navs" id="nav">
<div class="auto_container">
<div class="navs_wrap">
<div class="burger">
<img src="images/svg/menu.svg" alt="">
</div>
<div class="links_bg">
<div class="links">
<a href="category.html" class="nav_link">Категории</a>
<a href="product.html" class="nav_link">Условия торгов</a>
<a href="contact.html" class="nav_link">Обратная связь</a>
<div class="mobile_register">
<div class="register_btn">
<div class="btn_icon">
<img src="images/svg/user-plus-white.svg" alt="">
</div>
<div class="btn_text">
Регистрация
</div>
</div>
<div class="log_in">
<div class="btn_icon">
<img src="images/svg/log-in-white.svg" alt="">
</div>
<div class="btn_text">
Войти
</div>
</div>
</div>
<div class="mobile_profile">
<div class="profile_bio">
<div class="profile_head">
<div class="profile_icon">
<img src="images/svg/user-plus.svg" alt="">
</div>
<div class="profile_text">
Аман Аманов
</div>
<div class="prodile_arrow">
<img src="images/svg/arrow-down.svg" alt="">
</div>
</div>
<div class="profile_drop">
<a href="personal_data.html" class="profile_item">
<div class="profile_icon">
<img src="images/svg/user-plus.svg" alt="">
</div>
<div class="profile_text">
Персональные данные
</div>
</a>
<a href="my_post.html" class="profile_item">
<div class="profile_icon">
<img src="images/svg/clipboard.svg" alt="">
</div>
<div class="profile_text">
Мои объявления
</div>
</a>
<a href="#" class="profile_item">
<div class="profile_icon">
<img src="images/svg/inbox.svg" alt="">
</div>
<div class="profile_text">
Сообщения
</div>
</a>
<a href="#" class="profile_item">
<div class="profile_icon">
<img src="images/svg/log-out.svg" alt="">
</div>
<div class="profile_text">
Выйти
</div>
</a>
</div>
</div>
<a href="add_post.html" class="add_post_btn">
<div class="post_icon">
<img src="images/svg/add.svg" alt="">
</div>
<div class="post_text">
Добавить объявление
</div>
</a>
</div>
</div>
</div>
<div class="languages">
<a href="#" class="lang_item">eng</a>
<a href="#" class="lang_item active">рус</a>
<a href="#" class="lang_item">tkm</a>
</div>
</div>
</div>
</nav>
<!--Navs end ========================================================= -->
<!-- My post ========================================================= -->
<section class="library">
<div class="auto_container">
<div class="library_wrap">
<div class="product_head">
<div class="product_title">
Мои объявления
</div>
<div class="product_head-row">
<div class="sort_by">
<div class="sort_icon">
<svg id="inline" data-name="Иконка (Стиль 2)" xmlns="http://www.w3.org/2000/svg"
class="icon" viewBox="0 0 40 40">
<path id="Иконка_Стиль_2_2" data-name="Иконка (Стиль 2)"
d="M-177-64a2,2,0,0,1-2-2v-6a2,2,0,0,1,2-2h22a2,2,0,0,1,2,2v6a2,2,0,0,1-2,2Zm-14,0a2,2,0,0,1-2-2v-6a2,2,0,0,1,2-2h6a2,2,0,0,1,2,2v6a2,2,0,0,1-2,2Zm14-15a2,2,0,0,1-2-2v-6a2,2,0,0,1,2-2h22a2,2,0,0,1,2,2v6a2,2,0,0,1-2,2Zm-14,0a2,2,0,0,1-2-2v-6a2,2,0,0,1,2-2h6a2,2,0,0,1,2,2v6a2,2,0,0,1-2,2Zm14-15a2,2,0,0,1-2-2v-6a2,2,0,0,1,2-2h22a2,2,0,0,1,2,2v6a2,2,0,0,1-2,2Zm-14,0a2,2,0,0,1-2-2v-6a2,2,0,0,1,2-2h6a2,2,0,0,1,2,2v6a2,2,0,0,1-2,2Z"
transform="translate(193 104)" fill="#003197" />
</svg>
</div>
<div class="sort_icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" id="card"
class="icon active">
<path id="Иконка_Стиль_1_" data-name="Иконка (Стиль 1)"
d="M-169-64a2,2,0,0,1-2-2V-80a2,2,0,0,1,2-2h14a2,2,0,0,1,2,2v14a2,2,0,0,1-2,2Zm-22,0a2,2,0,0,1-2-2V-80a2,2,0,0,1,2-2h14a2,2,0,0,1,2,2v14a2,2,0,0,1-2,2Zm22-22a2,2,0,0,1-2-2v-14a2,2,0,0,1,2-2h14a2,2,0,0,1,2,2v14a2,2,0,0,1-2,2Zm-22,0a2,2,0,0,1-2-2v-14a2,2,0,0,1,2-2h14a2,2,0,0,1,2,2v14a2,2,0,0,1-2,2Z"
transform="translate(193 104)" fill="#003197" />
</svg>
</div>
</div>
<a href="add_post.html" class="add_post_btn">
<div class="post_icon">
<img src="images/svg/add.svg" alt="">
</div>
<div class="post_text">
Добавить объявление
</div>
</a>
</div>
</div>
<div class="my_advert-bg">
<div class="chat_wall">
<div class="chat_wall_img">
<img src="images/big_logo.png" alt="logo">
</div>
<div class="chat_wall_text">
В данный момент у вас нету <br>
активных объявлений
</div>
</div>
</div>
<div class="mobile_add-btn">
<a href="add_post.html" class="add_post_btn">
<div class="post_icon">
<img src="images/svg/add.svg" alt="">
</div>
<div class="post_text">
Добавить объявление
</div>
</a>
</div>
</div>
</div>
</section>
<!-- My post end ===================================================== -->
<p class="fill_balance-text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
</p>
<!--Footer ============================================================= -->
<footer class="footer">
<div class="auto_container">
<div class="footer_wrap">
<div class="footer_content">
<a href="index.html" class="foot_logo">
<div class="footer_img">
<img src="images/register_logo.png" alt="logo">
</div>
<div class="foot_logo_text">
Государственная товарно-сырьевая <br>
биржа Туркменистана
</div>
</a>
<div class="foot_outer">
<div class="foot_col">
<div class="foot_title">
Категории
</div>
<div class="foot_box">
<a href="#" class="foot_item">
Нефтехимия
</a>
<a href="#" class="foot_item">
Машиностроение
</a>
<a href="#" class="foot_item">
Легкая промышленность
</a>
<a href="#" class="foot_item">
Стройматериалы
</a>
</div>
</div>
<div class="foot_col">
<div class="foot_title">
Контакты
</div>
<div class="foot_box">
<div class="foot_item">
Тел: +99312446015
</div>
<div class="foot_item">
Эл. почта: info@exchange.gov.tm
</div>
<div class="foot_item">
Адрес: 744000, Туркменистан <br>
г.Ашгабат, Арчабиль шаелы 52
</div>
</div>
</div>
</div>
</div>
<div class="copyright">
© TDHСMB все права зашишены
</div>
</div>
</div>
</footer>
<!--Footer end ========================================================= -->
<script src="js/jquery.js"></script>
<script src="js/slick.js"></script>
<script src="js/slider.js"></script>
<script src="js/custom-select.js"></script>
<script src="js/main.js"></script>
</body>
</html>

View File

@ -0,0 +1,4 @@
<svg width="61" height="61" viewBox="0 0 61 61" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30.3 0.300049C13.7152 0.300049 0.299988 13.7153 0.299988 30.3001C0.299988 46.8848 13.7152 60.3 30.3 60.3C46.8848 60.3 60.3 46.8848 60.3 30.3001C60.3 13.7153 46.8848 0.300049 30.3 0.300049ZM30.3 57.4254C15.3368 57.4254 3.17468 45.2632 3.17468 30.3001C3.17468 15.3369 15.3368 3.17474 30.3 3.17474C45.2631 3.17474 57.4253 15.3369 57.4253 30.3001C57.4253 45.2632 45.2631 57.4254 30.3 57.4254Z" fill="#003197"/>
<path d="M37.671 30.0789C38.9978 28.4573 39.7349 26.3934 39.7349 24.1821C39.7349 18.9487 35.4597 14.7472 30.3 14.7472C25.0666 14.7472 20.8651 19.0224 20.8651 24.1821C20.8651 26.3934 21.6759 28.4573 22.929 30.0789C18.2853 32.9536 15.1157 37.7447 14.4523 43.1993L17.2533 43.5678C17.843 38.7767 20.8651 34.4278 25.0666 32.0691C26.5408 33.0273 28.3098 33.617 30.2263 33.617C32.1428 33.617 33.9118 33.0273 35.386 32.0691C39.6612 34.4278 42.6096 38.7767 43.1993 43.5678L46.0002 43.1993C45.4843 37.7447 42.3147 32.9536 37.671 30.0789ZM23.7398 24.1821C23.7398 20.5703 26.6882 17.6219 30.3 17.6219C33.9118 17.6219 36.8602 20.5703 36.8602 24.1821C36.8602 27.7939 33.9118 30.7423 30.3 30.7423C26.6882 30.7423 23.7398 27.7939 23.7398 24.1821Z" fill="#003197"/>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB