diff --git a/.parcel-cache/data.mdb b/.parcel-cache/data.mdb index d03e1c6..dc7157b 100644 Binary files a/.parcel-cache/data.mdb and b/.parcel-cache/data.mdb differ diff --git a/.parcel-cache/lock.mdb b/.parcel-cache/lock.mdb index 40cefed..b72d665 100644 Binary files a/.parcel-cache/lock.mdb and b/.parcel-cache/lock.mdb differ diff --git a/src/assets/images/platform/app-store.png b/src/assets/images/platform/app-store.png new file mode 100644 index 0000000..e55bbe2 Binary files /dev/null and b/src/assets/images/platform/app-store.png differ diff --git a/src/assets/images/platform/chplay.png b/src/assets/images/platform/chplay.png new file mode 100644 index 0000000..c5d5d54 Binary files /dev/null and b/src/assets/images/platform/chplay.png differ diff --git a/src/assets/images/platform/main-image-desktop.png b/src/assets/images/platform/main-image-desktop.png new file mode 100644 index 0000000..7b65e94 Binary files /dev/null and b/src/assets/images/platform/main-image-desktop.png differ diff --git a/src/assets/images/platform/main-image-mobile.png b/src/assets/images/platform/main-image-mobile.png new file mode 100644 index 0000000..83150d2 Binary files /dev/null and b/src/assets/images/platform/main-image-mobile.png differ diff --git a/src/index.pug b/src/index.pug index 7422c13..4a5a086 100644 --- a/src/index.pug +++ b/src/index.pug @@ -24,3 +24,4 @@ html(lang="en") include layouts/offer include layouts/service include layouts/menu + include layouts/platform diff --git a/src/layouts/platform.pug b/src/layouts/platform.pug new file mode 100644 index 0000000..36cdd57 --- /dev/null +++ b/src/layouts/platform.pug @@ -0,0 +1,34 @@ +- var platform_image_path = "./assets/images/platform/"; + +section.platform + .platform__container + .platform__image-container + picture + source( + media="(min-width: 1200px)", + srcset=platform_image_path + "main-image-desktop.png" + ) + img.platform__main-image( + src=platform_image_path + "main-image-mobile.png", + alt="The image introduce the platform" + ) + .platform__content + h2.platform__heading It's Now + = " " + span.primary-text More Easy + = " to " + span.secondary-text Order + = " by Our Mobile " + span.primary-text App + p.platform__description All you need to do is downlode one of the best delivery apps, makes a and most companies are opting for mobile app devlopment for food delivery. + .platform__store-container + .platform__google-store + img.platform__google-store-image( + src=platform_image_path + "chplay.png", + alt="Google store image" + ) + .platform__app-store + img.platform__app-store-image( + src=platform_image_path + "app-store.png", + alt="App store image" + ) diff --git a/src/styles/layouts/_platform.scss b/src/styles/layouts/_platform.scss new file mode 100644 index 0000000..34dbb24 --- /dev/null +++ b/src/styles/layouts/_platform.scss @@ -0,0 +1,93 @@ +.platform { + &__container { + max-width: 428px; + margin-inline: auto; + padding-top: 26px; + padding-bottom: 58px; + + background: linear-gradient( + 0, + rgba(253, 197, 94, 0.15) 0%, + rgba(253, 197, 94, 0.05) 50%, + rgba(253, 197, 94, 0) 100% + ); + } + + &__image-container { + @include size(auto, 502px); + + position: relative; + max-width: 100%; + } + + &__main-image { + @extend %absolute; + @include set-absolute-and-location($top: 0, $right: 0); + } + + &__content { + padding-top: 52px; + padding-left: 20px; + } + + &__heading { + font-size: $fs-x-lg; + font-weight: 700; + max-width: 371px; + } + + &__description { + font-size: $fs-md; + color: $black; + margin-top: 23px; + max-width: 366px; + } + + &__store-container { + @extend %d-flex; + @include flex-layout($gap: 27px); + + margin-top: 43px; + } +} + +@media screen and (min-width: 840px) { + .platform { + &__container { + @include flex-layout($direction: row-reverse, $align: center); + + display: flex; + max-width: 1440px; + max-height: 632px; + padding-top: 50px; + } + + &__image-container { + @include size(704px, 786px); + } + + &__main-image { + @include set-absolute-and-location($top: 160px, $right: 0); + } + + &__heading { + max-width: 643px; + } + + &__description { + max-width: 550px; + } + } +} + +@media screen and (min-width: 1200px) { + .platform { + &__container { + padding-top: 170px; + } + + &__main-image { + @include set-absolute-and-location($top: 70px, $right: 0); + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index 29a80c9..ce5e078 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -20,3 +20,4 @@ @import "./layouts/offer"; @import "./layouts/service"; @import "./layouts/menu"; +@import "./layouts/platform";