Skip to content

Commit

Permalink
add mobile version before 360px
Browse files Browse the repository at this point in the history
  • Loading branch information
IliaKani committed Mar 19, 2024
1 parent 6cd3d7c commit a832cc4
Show file tree
Hide file tree
Showing 66 changed files with 367 additions and 179 deletions.
7 changes: 7 additions & 0 deletions blocks/cards/__description/cards__description.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,10 @@ font-weight: normal;
margin-bottom: 0px;
margin-top: 0px;
}


@media only screen and (max-width: 360px) {
.cards__description {
font-size: 10px;
}
}
12 changes: 12 additions & 0 deletions blocks/cards/__image/cards__image.css
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,15 @@
width: 160px;
margin: 60px 40px 43px 40px;
}


@media only screen and (max-width: 360px) {
.cards__image {
height: 90px;
width: 55px;
margin: auto;
display: block;
margin-left: auto;
margin-right: auto
}
}
9 changes: 9 additions & 0 deletions blocks/cards/__item/cards__item.css
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,12 @@
.cards__item:nth-of-type(3n) {
margin-right: 0px;
}


@media only screen and (max-width: 360px) {
.cards__item {
width: 100px;
margin: auto;
margin-bottom: 15px;
}
}
8 changes: 8 additions & 0 deletions blocks/cards/__title/cards__title.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,11 @@
font-weight: bold;
text-align: center;
}


@media only screen and (max-width: 360px) {
.cards__title {
font-size: 12px;
margin-bottom: 0px;
}
}
6 changes: 6 additions & 0 deletions blocks/cards/cards.css
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,9 @@
display: flex;
flex-wrap: wrap;
}

@media only screen and (max-width: 360px) {
.cards {
width: 300px;
}
}
14 changes: 13 additions & 1 deletion blocks/countdown-timer/countdown-timer.css
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
text-align: center;
font-weight: 500;
color: black;
font-size: 1.5em;
font-size: 1.7em;
}

#time div span {
Expand Down Expand Up @@ -95,3 +95,15 @@
display: block;
margin-top: 20px;
}

@media only screen and (max-width: 360px) {
#time {
flex-wrap: wrap;
}
#time .circle {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
}
7 changes: 7 additions & 0 deletions blocks/description/description.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,10 @@
padding-top: 100px;
padding-bottom: 100px;
}

@media only screen and (max-width: 360px) {
.description {
padding-top: 20px;
padding-bottom: 20px;
}
}
7 changes: 7 additions & 0 deletions blocks/digits/digits.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,10 @@
padding-top: 100px;
padding-bottom: 100px;
}

@media only screen and (max-width: 360px) {
.digits {
padding-top: 30px;
padding-bottom: 30px;
}
}
11 changes: 9 additions & 2 deletions blocks/feinman/__img/feinman__img.css
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,13 @@
bottom: 0px;
position: absolute;
width: 800px;
height: 600px;
background-image: url(../../../images/Klopp\ J\ \(2\).png);
height: 600px;
}

@media only screen and (max-width: 360px) {
.feinman__img {
width: 350px;
height: 250px;
position: relative;
}
}
7 changes: 7 additions & 0 deletions blocks/feinman/__link/feinman__link.css
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,10 @@
.feinman__link:hover {
opacity: 0.6;
}

@media only screen and (max-width: 360px) {
.feinman__link {
font-size: 18px;
top: 80%;
}
}
7 changes: 7 additions & 0 deletions blocks/feinman/__title/feinman_title.css
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,10 @@
z-index: 1;
text-align: center;
}

@media only screen and (max-width: 360px) {
.feinman__title {
font-size: 40px;
margin-bottom: 20px;
}
}
8 changes: 8 additions & 0 deletions blocks/feinman/feinman.css
Original file line number Diff line number Diff line change
Expand Up @@ -12,3 +12,11 @@
padding-top: 80px;
background-color: #f2f2f2;
}


@media only screen and (max-width: 360px) {
.feinman {
min-height: 450px;
padding-top: 30px;
}
}
6 changes: 6 additions & 0 deletions blocks/footer/__author/footer__author.css
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,9 @@
font-weight: normal;
color: #f2f2f2;
}

@media only screen and (max-width: 360px) {
.footer__author {
margin-top: 0;
}
}
7 changes: 7 additions & 0 deletions blocks/footer/__column-heading/footer__column-heading.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,10 @@
margin-top: 0px;
margin-bottom: 0px;
}

@media only screen and (max-width: 360px) {
.footer__column-heading {
line-height: 18px;
font-size: 12px;
}
}
7 changes: 7 additions & 0 deletions blocks/footer/__column-link/footer__column-link.css
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,10 @@
.footer__column-link:hover {
opacity: 0.6;
}

@media only screen and (max-width: 360px) {
.footer__column-link {
line-height: 18px;
font-size: 12px;
}
}
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.footer__column_content_copyright {
flex-basis: 711px;
flex-basis: 30%;
justify-content: space-between;
}
9 changes: 8 additions & 1 deletion blocks/footer/footer.css
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,16 @@
@import url(./__social-icon/footer__social-icon.css);

.footer {
min-height: 350px;
min-height: 50px;
box-sizing: border-box;
background-color: #1f1f1f;
padding-top: 60px;
padding-bottom: 40px;
}

@media only screen and (max-width: 360px) {
.footer {
padding-top: 20px;
padding-bottom: 20px;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,12 @@
bottom: 0;
z-index: 1;
}


@media only screen and (max-width: 360px) {
.header__main-illustration {
width: 250px;
height: 200px;
top: 64px;
}
}
8 changes: 8 additions & 0 deletions blocks/header/__square-pic/header__square-pic.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,11 @@
top: 64px;
right: 0;
}


@media only screen and (max-width: 360px) {
.header__square-pic {
height: 160px;
width: 160px;
}
}
7 changes: 7 additions & 0 deletions blocks/header/__subtitle/header__subtitle.css
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,10 @@
position: absolute;
z-index: 3;
}

@media only screen and (max-width: 360px) {
.header__subtitle {
left: 0px;
width: 360px;
}
}
9 changes: 9 additions & 0 deletions blocks/header/__title/header__title.css
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,12 @@
font-family: 'UEFA Euro Extrabold Narrow';
text-align: center;
}

@media only screen and (max-width: 360px) {
.header__title {
margin-left: 0px;
font-size: 30px;
position: absolute;
top: 270px;
}
}
15 changes: 15 additions & 0 deletions blocks/header/header.css
Original file line number Diff line number Diff line change
Expand Up @@ -15,3 +15,18 @@
overflow: hidden;
/* выше установили ограничения для секции */
}


@media only screen and (max-width: 780px) {
.header {
padding: 28px 24px 48px 24px;
max-width: 780px;
}
}

@media only screen and (max-width: 360px) {
.header {
padding: 16px 16px 48px 16px;
min-height: 450px;
}
}
8 changes: 8 additions & 0 deletions blocks/kaufman/__triangle/kaufman__triangle.css
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,11 @@
background-image: url(../../../images/logo/kaufman-triangle.svg);
background-size: contain;
}

@media only screen and (max-width: 360px) {
.kaufman__triangle {
width: 300px;
height: 300px;
right: -90px;
}
}
7 changes: 7 additions & 0 deletions blocks/kaufman/kaufman.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,10 @@
position: relative;
overflow: hidden;
}


@media only screen and (max-width: 360px) {
.kaufman {
padding: 20px;
}
}
6 changes: 6 additions & 0 deletions blocks/khan/__author/khan__author.css
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,9 @@
font-size: 30px;
font-weight: normal;
}

@media only screen and (max-width: 360px) {
.khan__author {
font-size: 18px;
}
}
8 changes: 8 additions & 0 deletions blocks/khan/__book-pic/khan__book-pic.css
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,11 @@ margin-right: 48px;
object-fit: cover;
object-position: left top;
}

@media only screen and (max-width: 360px) {
.khan__book-pic {
width: 250px;
height: 250px;
margin-right: 0px;
}
}
9 changes: 9 additions & 0 deletions blocks/khan/__buy-link/khan__buy-link.css
Original file line number Diff line number Diff line change
Expand Up @@ -12,3 +12,12 @@
.khan__buy-link:hover {
opacity: 0.6;
}


@media only screen and (max-width: 360px) {
.khan__buy-link {
font-size: 12px;
line-height: 18px;
align-self: flex-end;
}
}
9 changes: 8 additions & 1 deletion blocks/khan/__quote/khan__quote.css
Original file line number Diff line number Diff line change
@@ -1,8 +1,15 @@
.khan__quote {
width: 790px;
width: 100%;
margin: 0;
margin-bottom: 36px;
line-height: 34px;
font-size: 24px;
font-weight: normal;
}

@media only screen and (max-width: 360px) {
.khan__quote {
line-height: 18px;
font-size: 12px;
}
}
8 changes: 8 additions & 0 deletions blocks/khan/__title/khan__title.css
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,11 @@
font-size: 60px;
font-weight: bold;
}


@media only screen and (max-width: 360px) {
.khan__title {
font-size: 24px;
margin-bottom: 25px;
}
}
6 changes: 6 additions & 0 deletions blocks/khan/khan.css
Original file line number Diff line number Diff line change
Expand Up @@ -12,3 +12,9 @@
padding-top: 105px;
background-color: #f2f2f2;
}

@media only screen and (max-width: 360px) {
.khan {
padding-top: 30px;
}
}
Loading

0 comments on commit a832cc4

Please sign in to comment.