diff --git a/assets/images/money (1) 2.svg b/assets/images/money (1) 2.svg new file mode 100644 index 0000000..1090b7b --- /dev/null +++ b/assets/images/money (1) 2.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/index.html b/index.html index 1d4d0af..3867e4b 100644 --- a/index.html +++ b/index.html @@ -11,5 +11,97 @@
+
+ + + + laptop image banner + +
+
+

Lorem Ipsum

+

Dolor Sit Amet

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui.

+
+
+
+ + computers 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.

+
+
+
+
+
+
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. 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.

+
+
+
+
+ computer image +
+
+ +
+
+
+
+

Lorem ipsum dolor sit amet

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum. + Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis. + Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.

+
+
+
+
+ computer image +
+
+ +
+
+
+
+

Lorem ipsum dolor sit amet

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum. + Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis. + Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.

+
+
+ +
\ No newline at end of file diff --git a/styles/style.css b/styles/style.css index c51d38a..bbde2d9 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,7 +1,11 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap'); + * { margin: 0; padding: 0; box-sizing: border-box; + font-family: 'Inter', sans-serif; + color: #000000; } .page-header { @@ -13,4 +17,482 @@ .header-logo { padding: 29px 0px; display: block; +} + +.main-banner { + width: 100%; +} + +.first-content { + padding-top: 73px; + display: flex; + align-items: center; + justify-content: center; +} + +.first-content-text { + max-width: 766px; +} + +.first-content-h2 { + text-transform: uppercase; + font-weight: 400; + font-size: 32px; + line-height: 39px; + text-align: center; +} + +.first-content-h1 { + font-weight: 500; + font-size: 40px; + line-height: 58px; + text-transform: uppercase; + text-align: center; +} + +.first-content-p { + font-weight: 400; + font-size: 16px; + padding-top: 28px; +} + +.block { + width: 50%; + max-width: 315px; + display: block; + margin: auto; + padding: 73px 0px 179px 0px; +} + +.first-card { + width: auto; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 21px; + padding-bottom: 79px; +} + +.first-card-p { + padding: 27px; + padding-top: 27px; + text-align: center; + padding: 27px 25px; +} + +.first-card-image { + display: block; + margin: auto; + width: 103px; + padding: 35px 12px 0px 12px; +} + +.first-card-cards { + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); + max-width: 350px; +} + +.image-row-background { + background-color: #E0E0E0; + max-height: 530px; + padding: 0px 72px 0px 72px; +} + +.image-row-wrapper { + position: relative; + bottom: -50px; +} + +.image-row-desktop { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 39px; +} + +.row-image-desktop { + width: 100%; +} + +.image-row-mobile1 { + margin: auto; + display: flex; + justify-content: center; + align-items: center; + gap: 14px; +} + +.image-row-mobile2 { + margin: auto; + display: flex; + justify-content: center; + align-items: center; + padding-top: 24px; + max-width: 368px; +} + +.row-image-mobile { + width: 100%; + max-width: 177px; +} + +.row-image-mobile2 { + width: 100%; + max-width: 368px; +} + +.second-card { + width: auto; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 16px; + padding: 191px 72px 0px 72px; +} + +.second-card-p { + padding: 15px 32px 65px 32px; + text-align: center; +} + +.second-card-image { + display: block; + margin: auto; + height: 104px; + padding: 35px 12px 0px 12px; +} + +.second-card-cards { + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); + width: auto; +} + +.bottom-banner2 { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + margin: auto; + padding-top: 50px; +} + +.second-content { + padding-top: 108px; + display: flex; + align-items: center; + justify-content: center; + text-align: center; +} + +.second-content-text { + max-width: 550px; +} + +.second-content-h1 { + font-weight: 600; + font-size: 32px; + line-height: 39px; + text-transform: uppercase; + text-align: center; +} + +.first-content-p { + text-align: center; +} + +.bottom-banner { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + margin: auto; + padding-top: 50px; +} + +.second-content2 { + padding-top: 108px; + display: flex; + align-items: center; + justify-content: center; + text-align: center; +} + +.bottom-banner-desktop { + display: block; + width: 100%; +} + +.bottom-banner-mobile { + width: 100%; +} + +.bottom-banner-img { + max-width: 1360px; + width: 100%; + padding: 0px 30px 0px 30px; +} + +.end-footer { + background-color: #000000; + margin-top: 116px; +} + +.footer-images { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 16px; + padding: 38px 0px 16px 0px; +} + +.footer-p { + color: #BDBDBD; + text-align: center; + padding-bottom: 38px; +} + +@media screen and (min-width: 3500px){ + .header-logo { + width: 500px; + } + + .first-content-p { + font-size: xx-large; + } + + .first-content-h2 { + font-size: 70px; + } + + .first-content-p { + font-size: 30px; + } + + .block { + min-width: 500px; + min-height: 700px; + } + + .row-image-desktop { + width: 2000px; + } + + .bottom-banner-img { + min-width: 2000px; + } +} + +@media screen and (min-width: 2500px) { + .header-logo { + min-height: 130px; + } + + .first-content-h2 { + font-size: 50px; + } + + .first-content-h1 { + padding-top: 10px; + font-size: 60px; + } + + .first-content-p { + font-size: 26px; + } + + .first-card-image { + width: 200px; + } + + .first-card-p { + font-size: 30px; + } + + .image-row-background { + min-height: 650px; + } + + .row-image-desktop { + width: 700px; + } + + .second-card-image { + width: 500px; + height: 200px; + } + + .second-card-p { + font-size: 30px; + } + + .second-content-h2 { + font-size: 44px; + } + + .second-content-p { + font-size: 26px; + } + + .footer-img { + min-height: 35px; + } + + .footer-p { + font-size: 18px; + } +} + +@media screen and (max-width: 1024px) { + .first-content-text { + max-width: 367px; + padding: 0px 29px; + } + + .first-content-h2 { + font-size: 20px; + line-height: 24px; + } + + .first-content-h1 { + font-size: 28px; + line-height: 34px; + } + + .first-content-p { + text-align: center; + } + + .block { + padding-bottom: 90px; + } + + .first-card { + display: flex; + flex-direction: column; + } + + .image-row-wrapper { + bottom: -20px; + } + + .image-row-background { + height: 579px; + } + + .row-image-desktop { + display: none; + } + + .second-card { + display: flex; + flex-direction: column; + gap: 16px; + padding: 150px 23px 0px 23px; + } + + .second-card { + flex-direction: column; + } + + .second-card-p { + font-size: 14px; + max-width: 302px; + } + + .bottom-banner-desktop { + display: none; + } + + .bottom-banner-img { + width: 60%; + } + + .second-content { + padding: 50px 32px 0px; + } + + .bottom-banner { + display: none; + } + + .bottom-banner-img { + padding: 0px; + } + + .second-content2 { + display: none; + } +} + +@media screen and (min-width: 1025px){ + .image-row-mobile1 { + display: none; + } + + .image-row-mobile2 { + display: none; + } + + .bottom-banner-mobile { + display: none; + } + + .bottom-banner2 { + display: none; + } + + .second-content2 { + display: none; + } +} + +@media screen and (max-width: 500px) { + .block { + width: 200px; + } + + .row-image-mobile { + width: 75%; + } + + .image-row-background { + height: auto; + } + + .image-row-wrapper { + bottom: -30px; + } + + .row-image-mobile2 { + width: 160%; + } + + .bottom-banner-img { + width: 100%; + } +} + +@media screen and (max-width: 330px) { + .row-image-mobile { + width: 80%; + } + + .row-image-mobile2 { + width: 170%; + } + +} + +@media screen and (max-width: 300px) { + .row-image-mobile { + width: 90%; + } + + .row-image-mobile2 { + width: 185%; + } } \ No newline at end of file