Good-Production/template-for-verstka
13
2
Fork 0
Code Pull Requests Releases Wiki Activity

save

Browse Source
This commit is contained in:
Kirill Pet
2024-10-07 05:51:19 +03:00
parent 33cc2d9c6e
commit e52537abeb
7 changed files with 1167 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
assets/css/gp-style-core.css
View File

@@ -100,6 +100,7 @@
--text-black: #121212;
--text-dark: #2b2b3b;
--text-grey: #999;
--text-red: #fa0505;
--text-0: #000;
--text-3: #333;
--text-6: #666;
@@ -535,6 +536,10 @@ button{
.button--white:hover{
opacity: .8;
}
.button--white.active{
background: var(--background-black);
color: var(--background-white);
}
.button--gradient{
background: var(--gradient-turquoise);
border: none;
@@ -588,6 +593,9 @@ button{
background: var(--background-black);
border: 1px solid var(--text-white);
}
.button--red-48-px{
border-radius: 48px;
}
.to-know{
width: 100%;
@@ -1040,6 +1048,13 @@ button{
.toggle-content__element--width-perc-50{
width: calc(50% - 24px);
}
.toggle__text{
font-family: var(--font-family);
font-weight: 400;
font-size: 20px;
line-height: 120%;
color: var(--text-black);
}
/* toggle */
/* checkbox */

290
assets/css/gp-style-desktop.css
View File

@@ -385,6 +385,20 @@
.product-item-label__tag--sale{
background: var(--gradient-red);
}
.product-item-label__tag--black{
background: var(--background-black);
color: var(--text-white);
}
.product-item-label__tag--title{
padding: 4px 2px;
font-size: 16px;
line-height: 125%;
color: var(--text-black);
display: flex;
align-items: center;
}
.product-item__product-card{
height: 274px;
@@ -559,6 +573,8 @@
/* footer */
.footer{
margin-top: 80px;
padding: 40px 24px;
background: var(--background-black);
@@ -653,6 +669,280 @@
}
/* footer */
/* detail */
.detail{
margin: 48px 24px 24px 24px;
display: flex;
flex-wrap: wrap;
}
.detail__images{
margin: -12px;
width: calc(50% - 24px);
display: flex;
flex-wrap: wrap;
}
.detail__image{
margin: 12px;
border-radius: 24px;
display: flex;
align-items: center;
justify-content: center;
background: var(--background-grey);
cursor: pointer;
}
.detail__image--width-perc-100{
width: calc(100% - 24px);
height: 600px;
}
.detail__image--width-perc-50{
width: calc(50% - 24px);
height: 288px;
}
.detail__image--width-perc-100 img{
width: 90%;
height: 90%;
object-fit: contain;
}
.detail__image--width-perc-50 img{
width: 100%;
height: 100%;
object-fit: contain;
}
.detail__content{
margin-left: 48px;
width: calc(50% - 24px);
}
.detail__label{
margin: -2px;
display: flex;
align-items: center;
}
.detail__label .product-item-label__tag:last-child{
margin-left: auto;
}
.detail__label .product-item-label__tag:first-child{
margin-left: 0;
}
.detail__title{
margin-top: 8px;
font-family: var(--font-family);
font-weight: 700;
font-size: 36px;
line-height: 111%;
text-transform: uppercase;
color: var(--text-black);
}
.detail__block-price{
margin-top: 24px;
display: flex;
align-items: center;
}
.detail-block-price__price{
font-family: var(--font-family);
font-weight: 700;
font-size: 36px;
line-height: 111%;
text-transform: uppercase;
color: #121212;
}
.detail-block-price__price::after{
content: '₽';
}
.detail-block-price__sale{
margin-left: 22px;
display: flex;
align-items: center;
}
.detail-block-price-sale__text{
font-family: var(--font-family);
font-weight: 700;
font-size: 20px;
line-height: 120%;
text-transform: uppercase;
text-decoration: line-through;
color: var(--text-6);
}
.detail-block-price-sale__text::after{
content: '₽';
}
.detail-block-price-sale__perc{
margin-left: 9px;
font-family: var(--font-family);
font-weight: 500;
font-size: 12px;
line-height: 133%;
color: var(--text-red);
}
.detail-block-price-sale__perc::before{
content: '-';
}
.detail-block-price-sale__perc::after{
content: '%';
}
.detail-block__form{
margin-top: 48px;
display: flex;
flex-direction: column;
}
.detail-block-form__item{
margin-top: 24px;
min-width: 345.89px;
display: flex;
align-items: center;
}
.detail-block-form__item--radio{
margin: 16px -8px -8px -8px;
}
.detail-block-form__item:first-child{
margin-top: 0;
}
.detail-block-form__item button{
margin: 8px;
}
.detail-block-form__submit{
min-width: 345.89px;
}
.detail__warning{
padding: 3px;
border-radius: 24px;
background: var(--gradient-turquoise);
}
.detail-warning__content{
padding: 26px;
border-radius: 22px;
background: var(--background-white);
}
.detail-warning__title{
font-family: var(--font-family);
font-weight: 700;
font-size: 24px;
line-height: 100%;
text-transform: uppercase;
color: var(--text-black);
}
.detail-warning__text{
margin-top: 16px;
font-family: var(--font-family);
font-weight: 400;
font-size: 20px;
line-height: 120%;
color: var(--text-black);
}
.detail__toggle{
margin-top: 48px;
margin-bottom: 48px;
}
.detail__catalot{
margin: 12px -12px -12px -12px;
width: 100%;
display: flex;
}
.toggle__table{
margin-top: 32px;
display: flex;
flex-wrap: wrap;
}
.toggle__table:first-child{
margin-top: 0;
}
.toggle__table--three .toggle-table__block:nth-child(1){
width: 40%;
}
.toggle__table--three .toggle-table__block:nth-child(2){
width: 40%;
}
.toggle__table--three .toggle-table__block:nth-child(3){
width: 20%;
}
.toggle__table--two .toggle-table__block{
width: calc(50% - 20px);
}
.toggle__table--two .toggle-table__block:nth-child(even){
margin-left: 40px;
}
.toggle-table__block{
}
.toggle-table__item{
margin-top: 8px;
width: 100%;
display: flex;
justify-content: space-between;
}
.toggle-table__item p{
display: block;
font-family: var(--font-family);
font-weight: 400;
font-size: 20px;
line-height: 120%;
color: var(--text-black);
flex-shrink: 0;
}
.toggle-table__item .warning{
width: 100%;
}
.toggle-table__item .warning p{
font-family: var(--font-family);
font-weight: 600;
font-size: 20px;
line-height: 120%;
text-align: center;
}
.toggle-table__title{
margin-bottom: 16px;
font-family: var(--font-family);
font-weight: 700;
font-size: 16px;
line-height: 125%;
color: var(--text-black);
}
.toggle-table__title--center{
text-align: center;
}
.toggle-table-item__line{
margin: 23px 8px 0 8px;
width: 100%;
height: 1px;
background: linear-gradient(to right, transparent 50%, #fff 50%), linear-gradient(to right, #333, #333);
background-size: 4px 2px, 100% 2px;
opacity: .6;
}
/* detail */
@media only screen and (max-width: 1600px) {
.wrapper{

3
assets/css/gp-style-tablet.css
View File

@@ -39,6 +39,9 @@
/* header */
/* footer */
.footer{
margin-top: 0;
}
.footer__about{
justify-content: center;
}

87
catalog.html
View File

@@ -490,6 +490,93 @@
</div>
</main>
<footer class="footer">
<div class="footer__wrapper wrapper">
<div class="footer__content">
<img src="assets/img/svg/logo/logo-gradient.svg" alt="" class="footer__logo">
<address class="footer__address">
123182 г. Москва, <br>
4-й Красногорский пр., <br>
д. 2/4, стр. 1, этаж/ком. 3/1
</address>
<div class="footer__list">
<div class="footer-list__item">
<p class="footer-list__title">Отзывы и предложения</p>
<a href="mailto:pro@cosmopet.shop" class="footer-list__link">
pro@cosmopet.shop
</a>
</div>
<div class="footer-list__item">
<p class="footer-list__title">Связь с ветеринаром</p>
<a href="mailto:vetvopros@cosmopet.shop" class="footer-list__link">
vetvopros@cosmopet.shop
</a>
</div>
<div class="footer-list__item">
<p class="footer-list__title">Заявки для оптовых покупателей</p>
<a href="mailto:pro@cosmopet.shop" class="footer-list__link">
pro@cosmopet.shop
</a>
</div>
<div class="footer-list__item">
<button class="button button--black button--100-perc">
Чат бот с ветеринаром
</button>
</div>
</div>
<div class="footer__about">
<div class="social-media">
<a href="#" class="social-media__item">
<img src="assets/img/svg/social-media/vk.svg" alt="" class="social-media__icon">
</a>
<a href="#" class="social-media__item">
<img src="assets/img/svg/social-media/tg.svg" alt="" class="social-media__icon">
</a>
<a href="#" class="social-media__item">
<img src="assets/img/svg/social-media/ya.svg" alt="" class="social-media__icon">
</a>
</div>
<a href="#" class="footer-about__text">Соглашение о конфиденциальности</a>
</div>
</div>
<div class="footer__form">
<form class="form" method="post" action="/send-telegram.php">
<p class="form__title">
Форма обратной связи
</p>
<div class="form__item">
<input class="form__input" type="text" name="name" placeholder="Ваше имя" required>
</div>
<div class="form__item">
<input class="form__input" type="text" name="name" placeholder="Эл.почта" required>
</div>
<div class="form__item">
<textarea class="form__input form__input--textarea" name="" id="" placeholder="Текст обращения"></textarea>
</div>
<div class="form__item">
<input class="form__button" type="submit" value="Отправить">
</div>
</form>
</div>
<div class="social-media footer__social-media">
<a href="#" class="social-media__item">
<img src="assets/img/svg/social-media/vk.svg" alt="" class="social-media__icon">
</a>
<a href="#" class="social-media__item">
<img src="assets/img/svg/social-media/tg.svg" alt="" class="social-media__icon">
</a>
<a href="#" class="social-media__item">
<img src="assets/img/svg/social-media/ya.svg" alt="" class="social-media__icon">
</a>
</div>
</div>
</footer>
<script src="assets/js/gp-main.js"></script>
</body>
</html>

88
modal-basket.html
View File

@@ -761,6 +761,94 @@
</aside>
</div>
<footer class="footer">
<div class="footer__wrapper wrapper">
<div class="footer__content">
<img src="assets/img/svg/logo/logo-gradient.svg" alt="" class="footer__logo">
<address class="footer__address">
123182 г. Москва, <br>
4-й Красногорский пр., <br>
д. 2/4, стр. 1, этаж/ком. 3/1
</address>
<div class="footer__list">
<div class="footer-list__item">
<p class="footer-list__title">Отзывы и предложения</p>
<a href="mailto:pro@cosmopet.shop" class="footer-list__link">
pro@cosmopet.shop
</a>
</div>
<div class="footer-list__item">
<p class="footer-list__title">Связь с ветеринаром</p>
<a href="mailto:vetvopros@cosmopet.shop" class="footer-list__link">
vetvopros@cosmopet.shop
</a>
</div>
<div class="footer-list__item">
<p class="footer-list__title">Заявки для оптовых покупателей</p>
<a href="mailto:pro@cosmopet.shop" class="footer-list__link">
pro@cosmopet.shop
</a>
</div>
<div class="footer-list__item">
<button class="button button--black button--100-perc">
Чат бот с ветеринаром
</button>
</div>
</div>
<div class="footer__about">
<div class="social-media">
<a href="#" class="social-media__item">
<img src="assets/img/svg/social-media/vk.svg" alt="" class="social-media__icon">
</a>
<a href="#" class="social-media__item">
<img src="assets/img/svg/social-media/tg.svg" alt="" class="social-media__icon">
</a>
<a href="#" class="social-media__item">
<img src="assets/img/svg/social-media/ya.svg" alt="" class="social-media__icon">
</a>
</div>
<a href="#" class="footer-about__text">Соглашение о конфиденциальности</a>
</div>
</div>
<div class="footer__form">
<form class="form" method="post" action="/send-telegram.php">
<p class="form__title">
Форма обратной связи
</p>
<div class="form__item">
<input class="form__input" type="text" name="name" placeholder="Ваше имя" required>
</div>
<div class="form__item">
<input class="form__input" type="text" name="name" placeholder="Эл.почта" required>
</div>
<div class="form__item">
<textarea class="form__input form__input--textarea" name="" id="" placeholder="Текст обращения"></textarea>
</div>
<div class="form__item">
<input class="form__button" type="submit" value="Отправить">
</div>
</form>
</div>
<div class="social-media footer__social-media">
<a href="#" class="social-media__item">
<img src="assets/img/svg/social-media/vk.svg" alt="" class="social-media__icon">
</a>
<a href="#" class="social-media__item">
<img src="assets/img/svg/social-media/tg.svg" alt="" class="social-media__icon">
</a>
<a href="#" class="social-media__item">
<img src="assets/img/svg/social-media/ya.svg" alt="" class="social-media__icon">
</a>
</div>
</div>
</footer>
<script src="assets/js/gp-main.js"></script>

87
modal-filter.html
View File

@@ -756,6 +756,93 @@
</aside>
</div>
<footer class="footer">
<div class="footer__wrapper wrapper">
<div class="footer__content">
<img src="assets/img/svg/logo/logo-gradient.svg" alt="" class="footer__logo">
<address class="footer__address">
123182 г. Москва, <br>
4-й Красногорский пр., <br>
д. 2/4, стр. 1, этаж/ком. 3/1
</address>
<div class="footer__list">
<div class="footer-list__item">
<p class="footer-list__title">Отзывы и предложения</p>
<a href="mailto:pro@cosmopet.shop" class="footer-list__link">
pro@cosmopet.shop
</a>
</div>
<div class="footer-list__item">
<p class="footer-list__title">Связь с ветеринаром</p>
<a href="mailto:vetvopros@cosmopet.shop" class="footer-list__link">
vetvopros@cosmopet.shop
</a>
</div>
<div class="footer-list__item">
<p class="footer-list__title">Заявки для оптовых покупателей</p>
<a href="mailto:pro@cosmopet.shop" class="footer-list__link">
pro@cosmopet.shop
</a>
</div>
<div class="footer-list__item">
<button class="button button--black button--100-perc">
Чат бот с ветеринаром
</button>
</div>
</div>
<div class="footer__about">
<div class="social-media">
<a href="#" class="social-media__item">
<img src="assets/img/svg/social-media/vk.svg" alt="" class="social-media__icon">
</a>
<a href="#" class="social-media__item">
<img src="assets/img/svg/social-media/tg.svg" alt="" class="social-media__icon">
</a>
<a href="#" class="social-media__item">
<img src="assets/img/svg/social-media/ya.svg" alt="" class="social-media__icon">
</a>
</div>
<a href="#" class="footer-about__text">Соглашение о конфиденциальности</a>
</div>
</div>
<div class="footer__form">
<form class="form" method="post" action="/send-telegram.php">
<p class="form__title">
Форма обратной связи
</p>
<div class="form__item">
<input class="form__input" type="text" name="name" placeholder="Ваше имя" required>
</div>
<div class="form__item">
<input class="form__input" type="text" name="name" placeholder="Эл.почта" required>
</div>
<div class="form__item">
<textarea class="form__input form__input--textarea" name="" id="" placeholder="Текст обращения"></textarea>
</div>
<div class="form__item">
<input class="form__button" type="submit" value="Отправить">
</div>
</form>
</div>
<div class="social-media footer__social-media">
<a href="#" class="social-media__item">
<img src="assets/img/svg/social-media/vk.svg" alt="" class="social-media__icon">
</a>
<a href="#" class="social-media__item">
<img src="assets/img/svg/social-media/tg.svg" alt="" class="social-media__icon">
</a>
<a href="#" class="social-media__item">
<img src="assets/img/svg/social-media/ya.svg" alt="" class="social-media__icon">
</a>
</div>
</div>
</footer>
<script src="assets/js/gp-main.js"></script>

597
product.html Normal file
View File

File diff suppressed because one or more lines are too long