Skip to content

Commit

Permalink
footer
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ayronhayd
Ayronhayd committed Aug 27, 2024
1 parent 099b85c commit e642645
Show file tree
Hide file tree
Showing 5 changed files with 237 additions and 43 deletions.
3 changes: 3 additions & 0 deletions source/img/sprite/pin-filled.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
79 changes: 40 additions & 39 deletions source/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -938,44 +938,45 @@ <h2 class="form__title">Остались вопросы?</h2>


<footer class="footer" data-test="footer" id="footer">
<div class="footer__contact contact" id="contact">
<h2 class="contact__title title">Контакты</h2>
<p>Свяжитесь с нами любым удобным для вас способом или приходите к нам в гости. Мы будем рады поделиться
увлекательными историями и подобрать для вас тур.</p>
<ul class="contact__list">
<li class="contact__item contact__item--tel">Телефон
<span>
<a class="contact__link" href="tel:+79837454545">+7 983 745-45-45</a>
</span>
</li>
<li class="contact__item contact__item--mail">Email
<span>
<a class="contact__link" href="mailto:[email protected]">[email protected]</a>
</span>
</li>
<li class="contact__item contact__item--addres">Адрес
<address class="contact__link">
г. Москва, пр-т Мира,<br>д. 14, офис 101
</address>
</li>
</ul>
</div>
<div class="contact__map">
<picture>
<source type="image/webp" width="600" height="324" media="(min-width: 1440px)"
srcset="./img/footer/map-desctop.webp 1x, ./img/footer/[email protected] 2x">
<source type="image/webp" width="768" height="340" media="(min-width: 768px)"
srcset="./img/footer/map-tablet.webp 1x, ./img/footer/[email protected] 2x">
<source type="image/webp" width="320" height="343"
srcset="./img/footer/map-mobil.webp 1x, ./img/footer/[email protected] 2x">

<source type="image/jpeg" width="600" height="324" media="(min-width: 1440px)"
srcset="./img/footer/map-desctop.jpg 1x, ./img/footer/[email protected] 2x">
<source type="image/jpeg" width="768" height="340" media="(min-width: 768px)"
srcset="./img/footer/map-tablet.jpg 1x, ./img/footer/[email protected] 2x">
<img class="contact__img" src="./img/footer/map-mobil.jpg" srcset="./img/footer/[email protected]" width="320"
height="343" alt="г.Москва, пр-т Мира, д.14, офис 101.">
</picture>
<div class="footer__conteiner">
<div class="footer__contact contact" id="contact">
<h2 class="contact__title title" data-shadow="Контакты">Контакты</h2>
<p>Свяжитесь с нами любым удобным для вас способом или приходите к нам в гости. Мы будем рады поделиться
увлекательными историями и подобрать для вас тур.</p>
<ul class="contact__list">
<li class="contact__item contact__item--tel">Телефон
<span>
<a class="contact__link" href="tel:+79837454545">+7 983 745-45-45</a>
</span>
</li>
<li class="contact__item contact__item--mail">Email
<span>
<a class="contact__link" href="mailto:[email protected]">[email protected]</a>
</span>
</li>
<li class="contact__item contact__item--addres">Адрес
<address class="contact__link">
г. Москва, пр-т Мира, <br>д. 14, офис 101
</address>
</li>
</ul>
</div>
<div class="contact__map">
<picture>
<source type="image/webp" width="600" height="324" media="(min-width: 1440px)"
srcset="./img/footer/map-desctop.webp 1x, ./img/footer/[email protected] 2x">
<source type="image/webp" width="768" height="340" media="(min-width: 768px)"
srcset="./img/footer/map-tablet.webp 1x, ./img/footer/[email protected] 2x">
<source type="image/webp" width="320" height="343"
srcset="./img/footer/map-mobil.webp 1x, ./img/footer/[email protected] 2x">
<source type="image/jpeg" width="600" height="324" media="(min-width: 1440px)"
srcset="./img/footer/map-desctop.jpg 1x, ./img/footer/[email protected] 2x">
<source type="image/jpeg" width="768" height="340" media="(min-width: 768px)"
srcset="./img/footer/map-tablet.jpg 1x, ./img/footer/[email protected] 2x">
<img class="contact__img" src="./img/footer/map-mobil.jpg" srcset="./img/footer/[email protected]" width="320"
height="343" alt="г.Москва, пр-т Мира, д.14, офис 101.">
</picture>
</div>
</div>


Expand Down Expand Up @@ -1006,7 +1007,7 @@ <h2 class="contact__title title">Контакты</h2>
</ul>

<div class="footer__tel tel">
<a class="footer__link tel__link" href="tel:+78000000000">8 800 000-00-00</a>
<a class="footer__link tel__link" href="tel:+78007253232">8 800 725-32-32</a>
</div>
</div>

Expand Down
118 changes: 116 additions & 2 deletions source/sass/blocks/contact.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,16 @@
width: 320px;
margin: 0 auto;

@media (min-width: $tablet-width) {
padding: 0 40px 0 45px;
width: 768px;
}

@media (min-width: $desktop-width) {
width: auto;
padding: 0;
}

p {
font-size: 14px;
line-height: 20px;
Expand All @@ -12,12 +22,33 @@
@media (min-width: $tablet-width) {
font-size: 16px;
line-height: 24px;
width: 570px;
margin: 0 0 40px;
}

@media (min-width: $desktop-width) {
margin: 0 0 50px;
width: auto;
padding-right: 50px;
}
}
}

.contact__title {
margin: 0 0 28px;

@media (min-width: $tablet-width) {
margin: 0 0 21px;
}

@media (min-width: $desktop-width) {
margin: 0 0 23px;
}
}

.contact__title[data-shadow]::after {
top: -15px;
left: 20px;
}

.contact__list {
Expand All @@ -28,6 +59,18 @@
flex-direction: column;
gap: 30px;
margin-bottom: 30px;
flex-wrap: wrap;

@media (min-width: $tablet-width) {
flex-direction: row;
gap: 40px;
margin-bottom: 40px;
}

@media (min-width: $desktop-width) {
flex-direction: column;
gap: 35px;
}
}

.contact__item {
Expand All @@ -39,8 +82,18 @@
font-size: 14px;
font-weight: 600;
line-height: 14px;

padding-left: 32px;

@media (min-width: $tablet-width) {
font-size: 16px;
line-height: 16px;
padding-left: 34px;
}

@media (min-width: $desktop-width) {
font-size: 18px;
padding-left: 56px;
}
}

.contact__item--tel::after,
Expand All @@ -57,16 +110,54 @@
.contact__item--tel::after {
background-color: $icon-basic;
mask-image: url("/__spritemap#sprite-phone-view");

@media (min-width: $tablet-width) {
top: -1px;
width: 24px;
height: 24px;
}

@media (min-width: $desktop-width) {
top: 11px;
width: 26px;
height: 26px;
}
}

.contact__item--mail::after {
background-color: $icon-basic;
mask-image: url("/__spritemap#sprite-mail-view");

@media (min-width: $tablet-width) {
top: -1px;
width: 24px;
height: 24px;
}

@media (min-width: $desktop-width) {
top: 11px;
width: 26px;
height: 26px;
}
}

.contact__item--addres::after {
background-color: $icon-basic;
mask-image: url("/__spritemap#sprite-pin-stroke-view");

@media (min-width: $tablet-width) {
top: -1px;
left: 1px;
width: 24px;
height: 24px;
}

@media (min-width: $desktop-width) {
top: 11px;
left: 0;
width: 26px;
height: 26px;
}
}

.contact__link {
Expand All @@ -78,10 +169,33 @@
color: $color-basic;
display: block;
margin-top: 8px;

@media (min-width: $tablet-width) {
font-size: 14px;
line-height: 22px;
margin-top: 5px;
}

@media (min-width: $desktop-width) {
font-size: 16px;
line-height: 24px;
margin-top: 10px;
}
}

.contact__link br {
@media (min-width: $tablet-width) {
display: none;
}
}

.contact__img {
display: block;
width: 100%;
height: 343px;
}

.contact__map {
@media (min-width: $desktop-width) {
margin-top: 26px;
}
}
65 changes: 63 additions & 2 deletions source/sass/blocks/footer.scss
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,72 @@
.footer {
padding-top: 37px;
padding-bottom: 20px;

@media (min-width: $tablet-width) {
padding-top: 60px;
}

@media (min-width: $desktop-width) {
padding: 124px 0 28px;
}
}

.footer__conteiner {
@media (min-width: $desktop-width) {
padding: 0 120px;
display: grid;
grid-template-columns: repeat(2, 1fr);
max-width: 1440px;
margin: 0 auto;
}
}

.footer--logo {
display: block;
margin: 0 auto 19px;

@media (min-width: $tablet-width) {
margin: 0;
margin-right: 36px;
}

@media (min-width: $desktop-width) {
margin-right: 136px;
}
}

.footer__nav {
margin-top: 19px;
padding-top: 23px;
border-top: 1px solid rgba($color-basic, 0.2);

@media (min-width: $tablet-width) {
margin-top: 39px;
padding: 34px 45px;
display: flex;
}

@media (min-width: $desktop-width) {
grid-column: 1 / -1;
border-top: 2px solid rgba($color-basic, 0.2);
padding: 40px 120px 31px 149px;
max-width: 1440px;
margin: 53px auto 0;
}
}

.footer__tel {
display: none;

@media (min-width: $desktop-width) {
display: block;
font-family: $font-600;
font-size: 18px;
font-weight: 600;
line-height: 18px;
color: $color-basic;
margin-top: 14px;
margin-left: auto;
}
}

Expand All @@ -28,6 +76,17 @@
text-align: center;
gap: 7px 20px;
margin-bottom: 19px;

@media (min-width: $tablet-width) {
display: flex;
margin: 0;
gap: 12px;
align-self: center;
}

@media (min-width: $desktop-width) {
gap: 19px;
}
}

.footer--link {
Expand All @@ -42,8 +101,6 @@
padding: 3px 5px;

@media (min-width: $tablet-width) {
font-size: 16px;
line-height: 16px;
letter-spacing: 0;
}

Expand All @@ -52,6 +109,10 @@
font-weight: 400;
letter-spacing: 0;
text-transform: none;
font-size: 16px;
line-height: 16px;
display: block;
margin-top: 1px;
}

&:hover {
Expand Down
Loading

0 comments on commit e642645

Please sign in to comment.