Skip to content

Commit

Permalink
планшет начало
Browse files Browse the repository at this point in the history
  • Loading branch information
@eldarsarkynov
eldarsarkynov committed May 8, 2024
1 parent 5319022 commit 384a4bc
Show file tree
Hide file tree
Showing 8 changed files with 214 additions and 62 deletions.
42 changes: 18 additions & 24 deletions source/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,30 +152,24 @@ <h2 class="example__title">Живой пример</h2>
<section class="slider">
<div class="slider__wrapper">
<h2 class="visually-hidden">Слайдер кота до и после</h2>
<div class="slider__bar">
<div class="slider__before">
<picture>
<source media="(min-width: 1200px)" width="560" height="512" type="image/jpeg" srcset="images/cat-before-deskstop@1x.png, images/cat-before-deskstop@2x.png 2x">
<source media="(min-width: 768px)" width="560" height="512" type="image/jpeg" srcset="images/cat-before-deskstop@1x.png, images/cat-before-deskstop@2x.png 2x">
<img class="slider__cat" src="images/cat-before-mobile@1x.png" srcset="images/cat-before-mobile@2x.png 2x" width="280" height="256" alt="Фото толстого кота до питания">
</picture>
</div>
<div class="slider__group">
<div class="slider__scale">
<div class="slider__button">
<button class="slider__toggle" type="button">
<span class="visually-hidden">кнопка уменьшения цены</span>
</button>
</div>
</div>
</div>
<div class="slider__after">
<picture>
<source media="(min-width: 1200px)" width="560" height="512" type="image/jpeg" srcset="images/cat-after-deskstop@1x.png, images/cat-after-deskstop@2x.webp 2x">
<source media="(min-width: 768px)" width="560" height="512" type="image/jpeg" srcset="images/cat-after-deskstop@1x.png, images/cat-after-deskstop@2x.webp 2x">
<img class="slider__cat" src="images/cat-after-mobile@1x.png" srcset="images/cat-after-mobile@2x.png 2x" width="280" height="256" alt="Фото стройного кота после питания">
</picture>
</div>
<div class="slider__before">
<picture>
<source media="(min-width: 1200px)" width="560" height="512" type="image/jpeg" srcset="images/cat-before-deskstop@1x.png, images/cat-before-deskstop@2x.png 2x">
<source media="(min-width: 768px)" width="560" height="512" type="image/jpeg" srcset="images/cat-before-deskstop@1x.png, images/cat-before-deskstop@2x.png 2x">
<img class="slider__cat-before" src="images/cat-before-mobile@1x.png" srcset="images/cat-before-mobile@2x.png 2x" width="280" height="256" alt="Фото толстого кота до питания">
</picture>
</div>
<div class="slider__scale">
<button class="slider__toggle" type="button">
<span class="visually-hidden">кнопка уменьшения цены</span>
</button>
</div>
<div class="slider__after">
<picture>
<source media="(min-width: 1200px)" width="560" height="512" type="image/jpeg" srcset="images/cat-after-deskstop@1x.png, images/cat-after-deskstop@2x.webp 2x">
<source media="(min-width: 768px)" width="560" height="512" type="image/jpeg" srcset="images/cat-after-deskstop@1x.png, images/cat-after-deskstop@2x.webp 2x">
<img class="slider__cat-after" src="images/cat-after-mobile@1x.png" srcset="images/cat-after-mobile@2x.png 2x" width="280" height="256" alt="Фото стройного кота после питания">
</picture>
</div>
</div>
</section>
Expand Down
6 changes: 6 additions & 0 deletions source/styles/blocks/container.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,9 @@
padding: 0;
}

@media (min-width: $tablet-width) {
.container {
margin: 0;
padding: 0;
}
}
29 changes: 29 additions & 0 deletions source/styles/blocks/main-header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,32 @@
z-index: 1;
}

@media (min-width: $tablet-width) {
.main-header {
display: block;
padding-top: 25px;
margin: 0;
}
}

.main-header__wrapper {
display: flex;
width: 280px;
margin: 0 auto;
flex-direction: column;
}

@media (min-width: $tablet-width) {
.main-header__wrapper {
display: flex;
justify-content: space-between;
width: 704px;
padding: 0;
flex-direction: row;
margin: 0 auto;
}
}

.main__block {
display: flex;
flex-direction: row;
Expand All @@ -22,6 +41,16 @@
margin-top: 8px;
}

@media (min-width: $tablet-width) {
.main__block {
display: flex;
width: 174px;
flex-direction: row;
justify-content: space-between;
margin: 0;
}
}

.main-header__logo {

}
8 changes: 8 additions & 0 deletions source/styles/blocks/main-nav.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,14 @@
width: 280px;
}

@media (min-width: $tablet-width) {
.main-nav__wrapper {
margin: 0;
padding: 14px 0 12px;
width: 436px;
}
}

.main-nav__list {
padding: 0;
margin: 0;
Expand Down
25 changes: 25 additions & 0 deletions source/styles/blocks/program.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,18 @@
padding: 0;
}

@media (min-width: $tablet-width) {
.program__wrapper {
width: 244px;
margin: 0;
padding: 0;
position: relative;
z-index: 1;
top: -168px;
left: 122px;
}
}

.program__link {
font-size: 16px;
line-height: 20px;
Expand All @@ -20,3 +32,16 @@
padding: 10px 63.5px;
display: block;
}

@media (min-width: $tablet-width) {
.program__link {
font-size: 20px;
line-height: 26px;
text-transform: uppercase;
text-decoration: none;
color: $base-color-button-text;
background-color: $base-color-background;
padding: 14px 26px;
display: block;
}
}
74 changes: 58 additions & 16 deletions source/styles/blocks/promo.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,21 @@
font-family: "Oswald", sans-serif;
margin: 0;
padding: 0;
min-height: 320px;
min-width: 320px;
display: flex;
flex-direction: column;
margin-top: -100px;
}

.promo__wrapper {
margin: 0 auto;
padding: 0;
width: 280px;
@media (min-width: $tablet-width) {
.promo {
font-family: "Oswald", sans-serif;
margin: 0;
padding: 0;
min-width: 708px;
display: flex;
flex-direction: column;
}
}

.promo__block {
Expand All @@ -20,28 +25,31 @@
background-size: contain;
min-width: 320px;
height: 275px;
margin: 0;
padding-top: 27px;
position: relative;
}

@media (min-width: $tablet-width) {
.promo__block {
background-image: none;
margin: 0;
padding-top: 62px;
}
}

.promo__wrapper {
margin: 0 auto;
padding: 0;
}

@media (min-width: $desktop-width) {
.promo__block {
background-image: linear-gradient(rgba(104, 183, 56, 0.85), rgba(104, 183, 56, 0.85)), url("../../images/index-background-desktop@1x.png");
background-repeat: no-repeat;
background-size: contain;
min-width: 1200px;
@media (min-width: $tablet-width) {
.promo__wrapper {
width: 708px;
margin: 0 auto;
}
}

.promo__title {
display: block;
font-size: 36px;
line-height: 36px;
color: #ffffff;
Expand All @@ -50,9 +58,32 @@
text-align: center;
}

@media (min-width: $tablet-width) {
.promo__title {
font-size: 60px;
font-weight: 400;
line-height: 58px;
text-align: left;
color: $base-color-title;
margin-left: 91px;
padding: 0;
}
}

.promo__header {
margin: 0;
margin: 0 auto;
padding: 0;
position: relative;
width: 280px;
}

@media (min-width: $tablet-width) {
.promo__header {
margin: 0 auto;
padding: 0;
position: relative;
width: 708px;
}
}

.promo__slogan {
Expand All @@ -64,9 +95,20 @@
margin: 25px 0 0;
}

@media (min-width: $tablet-width) {
.promo__slogan {
font-size: 20px;
font-weight: 400;
line-height: 20px;
color: $base-color-title;
width: 283px;
padding: 0;
margin: 42px 0 0 91px;
}
}

.promo__background {
position: absolute;
display: block;
margin: 0;
padding: 0;
top: 43px;
}
49 changes: 41 additions & 8 deletions source/styles/blocks/site-list.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,18 @@
margin-top: 33px;
}

@media (min-width: $tablet-width) {
.site-list {
display: flex;
flex-flow: row wrap;
list-style: none;
padding: 0;
text-align: center;
gap: 33px;
margin: 0;
}
}

.site-list a {
font-family: "Oswald", sans-serif;
font-size: 20px;
Expand All @@ -18,14 +30,9 @@
}

@media (min-width: $tablet-width) {
.site-list {
width: 436px;
}
}

@media (min-width: $tablet-width) {
.site-list {
width: 475px;
.site-list a {
font-size: 18px;
line-height: 24px;
}
}

Expand All @@ -47,3 +54,29 @@
width: 322px;
height: 1px;
}

@media (min-width: $tablet-width) {
.site-list__item--current {
position: relative;
}

.site-list__item--current::after {
content: " ";
position: absolute;
top: 31px;
left: 0;
background: #68b738;
width: 64px;
height: 2px;
}
}

@media (min-width: $tablet-width) {
.site-list__item:last-child {
margin: 0;
}

.site-list__item::before {
display: none;
}
}

0 comments on commit 384a4bc

Please sign in to comment.