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

save

Browse Source
cosmopet--Memento-mori-dev
Kirill Pet 10 months ago
parent 33cc2d9c6e
commit e52537abeb
7 changed files with 1167 additions and 0 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 15
      assets/css/gp-style-core.css
  2. 290
      assets/css/gp-style-desktop.css
  3. 3
      assets/css/gp-style-tablet.css
  4. 87
      catalog.html
  5. 88
      modal-basket.html
  6. 87
      modal-filter.html
  7. 597
      product.html

15
assets/css/gp-style-core.css
Unescape 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
Unescape 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
Unescape View File

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

87
catalog.html
Unescape 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
Unescape 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
Unescape 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
View File

File diff suppressed because one or more lines are too long
Write Preview
Loading…
Cancel
Save