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

сделал footer

Browse Source
This commit is contained in:
Kirill Pet
2024-10-07 02:58:52 +03:00
parent 1c58c42130
commit 33cc2d9c6e
5 changed files with 231 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
assets/css/gp-style-core.css
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
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
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) {

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

@@ -37,7 +37,15 @@
top: 56px;
}
/* header */
/* footer */
.footer__about{
justify-content: center;
}
.footer-about__text{
display: none;
}
/* footer */
}
@media only screen and (max-width: 980px) {

84
index.html
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>