diff --git a/index.html b/index.html index d5aba2b..56ab319 100644 --- a/index.html +++ b/index.html @@ -37,23 +37,31 @@
-
-
laptop image
-
laptop image
-
laptop image
+
+
+
laptop image
+
laptop image
+
laptop image
+
+
+ laptop image + laptop image +
+
laptop image
-
- laptop image - laptop image -
-
laptop image
+
-
shop image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

-
bag shop image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

-
coin image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

-
coin image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+
shop image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+
bag shop image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+
coin image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+
coin image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+
+
+
+
+

diff --git a/styles/style.css b/styles/style.css index 56d9dd3..7798f22 100644 --- a/styles/style.css +++ b/styles/style.css @@ -75,10 +75,10 @@ } .first-card-p { - width: 299px; padding: 27px; padding-top: 27px; text-align: center; + padding: 27px 25px; } .first-card-image { @@ -90,11 +90,18 @@ .first-card-cards { box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); + max-width: 350px; } .image-row-background { - background-color: #E0E0E0;; - height: 530px; + background-color: #E0E0E0; + max-height: 530px; + padding: 62px 72px 0px 72px; +} + +.image-row-wrapper { + position: relative; + bottom: -25px; } .image-row-desktop { @@ -106,22 +113,34 @@ } .row-image-desktop { - margin-top:62px; + width: 100%; } .image-row-mobile1 { + margin: auto; display: flex; justify-content: center; align-items: center; gap: 14px; - padding-top: 32px; } .image-row-mobile2 { + margin: auto; + max-width: 368px; display: flex; justify-content: center; align-items: center; - padding: 24px 23px; + padding-top: 24px; +} + +.row-image-mobile { + width: 100%; + max-width: 177px; +} + +.row-image-mobile2 { + width: 100%; + max-width: 368px; } .second-card { @@ -130,28 +149,25 @@ flex-direction: row; justify-content: center; align-items: center; - gap: 21px; - padding-top: 191px; - padding-bottom: 79px; + gap: 16px; + padding: 191px 72px 79px 72px; } .second-card-p { - width: 299px; - padding: 27px; - padding-top: 27px; + padding: 15px 32px 65px 32px; text-align: center; } .second-card-image { display: block; margin: auto; - width: 103px; - height: 103px; + height: 104px; padding: 35px 12px 0px 12px; } .second-card-cards { box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); + width: auto; } @media screen and (max-width: 1024px) { @@ -187,18 +203,25 @@ display: flex; flex-direction: column; gap: 16px; - padding-top: 112px; + padding: 150px 23px 0px 23px; } -} -@media screen and (max-width: 1270px) { .second-card { flex-direction: column; } + + .second-card-p { + font-size: 14px; + max-width: 302px; + } + } -@media screen and (max-width: 1919px) { +@media screen and (max-width: 1270px) { +} + +@media screen and (max-width: 1024px) { .image-row-background { height: 579px; } @@ -208,7 +231,7 @@ } } -@media screen and (min-width: 1920px){ +@media screen and (min-width: 1025px){ .image-row-mobile1 { display: none; } @@ -216,4 +239,14 @@ .image-row-mobile2 { display: none; } +} + +@media screen and (max-width: 369px) { + .image-row-mobile1 { + width: 50%; + } + + .image-row-mobile2 { + width: 100px; + } } \ No newline at end of file