Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Декоративные элементы главной страницы #7

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Декоративные элементы главной страницы #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1a21a49
добавляет адаптивные элементы главной страницы
mamifr May 15, 2022
004f999
вносит поправки названия класса и свойств css
mamifr May 15, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions source/img/logo-black.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions source/img/quotes.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
53 changes: 27 additions & 26 deletions source/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,30 +15,30 @@
<div class="main-header-container">
<div class="header-header">
<div class="wrapper">
<nav class="main-nav">
<nav class="main-nav main-nav--opened">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

В текущем состоянии вёрстки класс main-nav--opened никакой смысловой нагрузки не несёт: а) для него не определены стили; б) он должен применяться к тегу только в коде JS. Изначально в вёрстку его добавлять не нужно. В этом классе нужно задать свойства для абсолютного позиционирования меню поверх контента.

Другой класс main-nav--closed имеет противоположную функцию - в нём будет только одно свойство для скрытия меню. Класс также используется совместно с JS.

<a class="main-nav__logo" href="index.html">
<img class="main-nav__pink-logo" src="img/logo.svg" width="74" height="23" alt="Логотип Pink">
</a>
<button class="main-nav__toggle" type="button"><span class="visually-hidden"></span></button>
<div class="main-nav__wrapper">
<ul class="main-nav__list site-list">
<li class="site-list__item site-list__item--active">
<a>
<a class="site-list__item-legend">
Главная
</a>
</li>
<li class="site-list__item">
<a href="catalog.html">
<a class="site-list__item-legend" href="catalog.html">
Фотографии
</a>
</li>
<li class="site-list__item">
<a href="form.html">
<a class="site-list__item-legend" href="form.html">
Конкурс
</a>
</li>
<li class="site-list__item">
<a href="https://htmlacademy.ru/intensive/adaptive">
<a class="site-list__item-legend" href="https://htmlacademy.ru/intensive/adaptive">
HTML Academy
</a>
</li>
Expand All @@ -55,18 +55,14 @@
<div class="header-footer__download download">
<ul class="download__list">
<li class="download__item">
<a class="download__link download__link--apple" href="https://www.apple.com/ru/app-store/">Загрузить
на
apple</a>
<a class="download__link download__link--apple" href="https://www.apple.com/ru/app-store/"></a>
</li>
<li class="download__item">
<a class="download__link download__link--android"
href="https://play.google.com/store/apps?hl=ru&gl=US">Загрузить на android</a>
href="https://play.google.com/store/apps?hl=ru&gl=US"></a>
</li>
<li class="download__item">
<a class="download__link download__link--windows" href="https://www.microsoft.com/store/">Загрузить
на
windows</a>
<a class="download__link download__link--windows" href="https://www.microsoft.com/store/"></a>
</li>
</ul>
<p class="download__notes">Доступно для iPhone, iPad, Android, Windows Phone, OS X, Windows 8</p>
Expand Down Expand Up @@ -135,9 +131,9 @@ <h3 class="review__owner">Николай Петров</h3>
</li>
</ul>
<p class="review__toggles slider__toggles">
<button class="slider__toggle slider-toggle-current" type="button">1</button>
<button class="slider__toggle" type="button">2</button>
<button class="slider__toggle" type="button">3</button>
<button class="slider__toggle slider__toggle-current" type="button"></button>
<button class="slider__toggle" type="button"></button>
<button class="slider__toggle" type="button"></button>
</p>
</div>
</div>
Expand Down Expand Up @@ -254,9 +250,9 @@ <h2 class="visually-hidden">Перечень тарифов</h2>
</tbody>
</table>
<p class="price__toggles slider__toggles">
<button class="slider__toggle" type="button">1</button>
<button class="slider__toggle slider__toggle-current" type="button">2</button>
<button class="slider__toggle" type="button">3</button>
<button class="slider__toggle slider__toggle-price" type="button"></button>
<button class="slider__toggle slider__toggle-price slider__toggle-current" type="button"></button>
<button class="slider__toggle slider__toggle-price" type="button"></button>
</p>
</div>
</div>
Expand All @@ -281,32 +277,37 @@ <h2 class="visually-hidden">Наши контакты</h2>
</li>
</ul>
</div>
<iframe class="contacts__iframe"
src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d7987.290429285352!2d30.3174089!3d59.968266!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x5f2ac55f567b2400!2sHTML%20Academy!5e0!3m2!1sru!2sru!4v1652284072304!5m2!1sru!2sru"
width="320" height="200" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
<div class="contacts__image"></div>
</section>
</main>
<footer class="main-footer">
<div class="wrapper">
<div class="main-footer__container">
<div class="main-footer__logo main-footer__logo-glasses">
<img src="img/logo.svg" width="74" height="23" alt="Логотип Pink">
</div>
<a class="main-footer__logo main-footer__logo-glasses">
<img class="main-footer__pink-logo" src="img/logo-black.svg" width="74" height="23" alt="Логотип Pink">
</a>
<div class="main-footer__social social">
<ul class="social__list">
<li class="social__item">
<a class="social__link social__link--vkontakte" href="https://vk.com/htmlacademy">Мы в Вконтакте</a>
<a class="social__link social__link--vkontakte" href="https://vk.com/htmlacademy"></a>
</li>
<li class="social__item">
<a class="social__link social__link--telegram" href="https://t.me/htmlacademy">Мы в Телеграме</a>
<a class="social__link social__link--telegram" href="https://t.me/htmlacademy"></a>
</li>
<li class="social__item">
<a class="social__link social__link--youtube" href="https://www.youtube.com/user/htmlacademyru">Мы в
Ютубе</a>
<a class="social__link social__link--youtube" href="https://www.youtube.com/user/htmlacademyru"></a>
</li>
</ul>
</div>
<div class="main-footer__copyright copyright">
<p class="copyright__text">Разработано:</p>
<a class="copyright__link" href="https://htmlacademy.ru/intensive/adaptive">HTML Academy</a>
<a class="copyright__link" href="https://htmlacademy.ru/intensive/adaptive">
<img class="copyright__img" src="img/htmlacademy.svg" alt="Логотип htmlacademy" width="27"
height="34"></a>
</div>
</div>
</div>
Expand Down
26 changes: 19 additions & 7 deletions source/sass/blocks/index/contacts.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
}

.contacts__telephone {
text-decoration: none;
display: block;
font-weight: 300;
font-size: 24px;
Expand All @@ -17,6 +18,7 @@
}

.contacts__email {
text-decoration: none;
display: block;
font-weight: 300;
font-size: 24px;
Expand Down Expand Up @@ -46,15 +48,25 @@

}

.contacts__image {
height: 200px;
background-image: url("../img/map.png");
background-size: 100% auto;
background-repeat: no-repeat;
background-position: center;


.contacts__iframe {
display: block;
border: none;
margin: 0 auto;

@media (min-width: $tablet-width) {
width: 660px;
height: 374px;
}

@media (min-width: $desktop-width) {
width: 1200px;
height: 502px;
}
}

.contacts__deskription {
.contacts__description {
display: block;
font-weight: 700;
font-size: 18px;
Expand Down
10 changes: 9 additions & 1 deletion source/sass/blocks/index/copyright.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.copyright {
display: flex;
margin: 0 100px 40px 100px;
margin: 0 75px 40px 75px;

@media (min-width: $tablet-width) {
margin: 0;
Expand All @@ -11,6 +11,7 @@
.copyright__text {
font-size: 14px;
line-height: 18px;
margin: auto 15px auto 0px;

@media (min-width: $desktop-width) {
font-size: 18px;
Expand All @@ -19,4 +20,11 @@

.copyright__link {
display: block;
width: 27px;
height: 34px;
margin: auto 0;
}

.copyright__img {
align-self: center;
}
39 changes: 38 additions & 1 deletion source/sass/blocks/index/download.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,46 @@
}

.download__list {
display: flex;
display: grid;
grid-template-columns: 47px 43px 41px;
column-gap: 35px;
list-style-type: none;
margin-top: 32px;
margin-right: 38px;
margin-bottom: 28px;
margin-left: 38px;
align-items: center;
padding: 0;
//margin: 30 auto;
//@media (min-width: $tablet-width) {margin: 46 auto 38 auto;}
}

.download__link {
display: block;
background-repeat: no-repeat;
background-position: center;
}

.download__link--apple {
background-image: url("../img/apple-logo.svg");
width: 47px;
height: 56px;
background-size: 100% auto;
background-repeat: no-repeat;
}

.download__link--android {
background-image: url("../img/android-logo.svg");
width: 43px;
height: 47px;
background-size: 100% auto;
background-repeat: no-repeat;
}

.download__link--windows {
background-image: url("../img/microsoft-logo.svg");
width: 44px;
height: 41px;
background-size: 100% auto;
background-repeat: no-repeat;
}
6 changes: 4 additions & 2 deletions source/sass/blocks/index/header-header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
.header-header {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

В своё время не комментировал этот момент: название класса крайне неудачное header-header. (Также нужно будет поменять название файла).

margin: 0 auto;
background-color: #00000030;
//background-color: #00000030;
background-color: #283645;

//margin-bottom: 110px;

@media (min-width: $tablet-width) {
//margin-bottom: 74px;
}

@media (min-width: $desktop-width) {
//margin-bottom: 98px;
background-color: #00000030;
}
}
38 changes: 31 additions & 7 deletions source/sass/blocks/index/main-footer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
.main-footer__container {
padding-top: 57px;
display: flex;
flex-direction: column;
padding-top: 40px;
display: grid;
grid-template-columns: 280px;
//width: 100px;
row-gap: 38px;

@media (min-width: $tablet-width) {
width: auto;
display: flex;
padding-top: 36px;
padding-bottom: 37px;
margin: 0 20px;
margin: 0;
flex-direction: row;
justify-content: space-between;
}
Expand All @@ -18,12 +22,32 @@
}
}

.main-footer__logo {
margin: 0 87px 37px 159px;
.main-footer__pink-logo {
margin: 0 0 0 71px;
padding-top: 17px;


@media (min-width: $tablet-width) {
margin: 0;
display: block;
}

@media (min-width: $desktop-width) {}
}

.main-footer__logo {
display: block;
text-align: center;
//width: 145px;
//margin-left: 68px;
top: 0px;
left: 0px;
background-image: url("../img/glasses.svg");
width: 59px;
height: 40px;
background-repeat: no-repeat;

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