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

сделал footer

Browse Source
cosmopet--Memento-mori-dev
Kirill Pet 10 months ago
parent 1c58c42130
commit 33cc2d9c6e
5 changed files with 231 additions and 1 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. 17
      assets/css/gp-style-core.css
  2. 96
      assets/css/gp-style-desktop.css
  3. 25
      assets/css/gp-style-mobile.css
  4. 8
      assets/css/gp-style-tablet.css
  5. 84
      index.html

17
assets/css/gp-style-core.css
Unescape View File

@ -416,6 +416,11 @@ button{
}
.social-media__item{
margin-left: 32px;
transition: opacity .2s ease-out;
}
.social-media__item:hover{
opacity: .8;
}
.social-media__item:first-child{
margin-left: 0px;
@ -571,6 +576,18 @@ button{
background-repeat: no-repeat;
background-size: contain;
}
.button--black{
padding: 7px 15px;
font-family: var(--font-family);
font-weight: 500;
font-size: 24px;
line-height: 133%;
color: var(--text-white);
background: var(--background-black);
border: 1px solid var(--text-white);
}
.to-know{
width: 100%;

96
assets/css/gp-style-desktop.css
Unescape View File

@ -557,6 +557,102 @@
}
/* modal */
/* footer */
.footer{
padding: 40px 24px;
background: var(--background-black);
}
.footer__wrapper{
width: 100%;
display: flex;
}
.footer__content{
width: calc(100% - 364px);
}
.footer__logo{
width: 187px;
height: 43px;
}
.footer__address{
margin-top: 24px;
font-family: var(--font-family);
font-weight: 500;
font-size: 24px;
line-height: 133%;
color: var(--text-white);
font-style: normal;
}
.footer__list{
margin: 28px -12px -12px -12px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.footer-list__item{
margin: 12px;
width: calc(50% - 24px);
display: flex;
flex-direction: column;
}
.footer-list__item:nth-child(even){
width: 322px;
}
.footer-list__title{
font-family: var(--font-family);
font-weight: 700;
font-size: 16px;
line-height: 125%;
color: var(--text-white);
}
.footer-list__link{
margin-top: 4px;
font-family: var(--font-family);
font-weight: 500;
font-size: 24px;
line-height: 133%;
color: var(--text-white);
text-decoration: none;
}
.footer__form{
margin-left: 48px;
width: 364px;
}
.footer__about{
margin-top: 16px;
padding-top: 15px;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--text-white);
}
.footer-about__text{
font-family: var(--font-family);
font-weight: 500;
font-size: 20px;
line-height: 120%;
text-align: right;
color: var(--text-white);
opacity: 0.6;
text-decoration: none;
}
.footer__social-media{
display: none;
}
/* footer */
@media only screen and (max-width: 1600px) {
.wrapper{

25
assets/css/gp-style-mobile.css
Unescape View File

@ -41,6 +41,31 @@
}
/* modal */
/* footer */
.footer__about{
display: none;
}
.footer__wrapper{
flex-direction: column;
}
.footer__content{
width: 100%;
}
.footer__form{
margin-top: 24px;
margin-left: 0;
width: 100%;
}
.footer__social-media{
display: block;
margin-top: 24px;
}
.footer__list{
margin-top: 20px;
}
/* footer */
}
@media only screen and (max-width: 576px) {

8
assets/css/gp-style-tablet.css
Unescape View File

@ -38,6 +38,14 @@
}
/* header */
/* footer */
.footer__about{
justify-content: center;
}
.footer-about__text{
display: none;
}
/* footer */
}
@media only screen and (max-width: 980px) {

84
index.html
Unescape View File

@ -757,7 +757,91 @@
</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>

Write Preview
Loading…
Cancel
Save