nezumi/html-css-practice-two
1
0
Fork 0
mirror of https://github.com/Nezumi-2711/html-css-practice-two.git synced 2026-09-22 20:01:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update code

Browse Source
This commit is contained in:
nezumi
2023-08-03 10:39:13 +07:00
parent d1715cd38f
commit cd59768e88
17 changed files with 333 additions and 316 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.pug
+7 -7
View File
@@ -1,15 +1,15 @@
include ./includes/mixins
doctype html
html(lang="en")
html(lang='en')
head
meta(charset="UTF-8")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
link(rel="stylesheet", href="./styles/main.scss")
meta(charset='UTF-8')
meta(name='viewport', content='width=device-width, initial-scale=1.0')
link(rel='stylesheet', href='./styles/_main.scss')
link(
rel="icon",
type="image/x-icon",
href="./assets/images/favicon-16x16.png"
rel='icon',
type='image/x-icon',
href='./assets/images/favicon-16x16.png'
)
title Food Hut
body
src/sections/menu.pug
+15 -14
View File
@@ -6,18 +6,19 @@
- var default_food_data = { price: '10', ratePoint: '4.5', foodName: 'Kebab', foodDescription: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry', avatarImageList: [{ avatarUrl: avatar_img_path + 'avatar-1.png' }, { avatarUrl: avatar_img_path + 'avatar-2.png' }, { avatarUrl: avatar_img_path + 'avatar-3.png' }] };
section.menu
.menu__container
h2.menu__heading
span.text--primary Menu
= ' That '
span.text--secondary Always
= ' Make You Fall In '
span.text--primary Love
.menu__list-category
each item in list_category
a.menu__category-item.link-text(href='javascript:void(0)')= item
.menu__card-list
each url in list_image_food
- var image_food = { imageUrl: url };
.wrapper
.menu__container
h2.menu__heading
span.text--primary Menu
= ' That '
span.text--secondary Always
= ' Make You Fall In '
span.text--primary Love
.menu__list-category
each item in list_category
a.menu__category-item.link-text(href='javascript:void(0)')= item
.menu__card-list
each url in list_image_food
- var image_food = { imageUrl: url };
+foodItemCard({ ...image_food, ...default_food_data })
+foodItemCard({ ...image_food, ...default_food_data })
src/sections/offer.pug
+22 -21
View File
@@ -9,24 +9,25 @@
- var list_food = [food_1, food_2, food_3, food_4];
section.offer
.offer__container
.offer__dot-background
img(
src=offer_img_path + 'dot-background.png',
alt='Dot background image'
)
h2.offer__heading Today
= ' '
span.text--primary Special
= ' Offers'
p.offer__description Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
.offer__card-list
each val in list_food
+foodItemCard(val)
.offer__rosemary-container
picture
source(
media='(min-width: 840px)',
srcset=offer_img_path + 'rosemary-desktop.png'
)
img(src=offer_img_path + 'rosemary-mobile.png', alt='Rosemary image')
.wrapper
.offer__container
.offer__dot-background
img(
src=offer_img_path + 'dot-background.png',
alt='Dot background image'
)
h2.offer__heading Today
= ' '
span.text--primary Special
= ' Offers'
p.offer__description Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
.offer__card-list
each val in list_food
+foodItemCard(val)
.offer__rosemary-container
picture
source(
media='(min-width: 840px)',
srcset=offer_img_path + 'rosemary-desktop.png'
)
img(src=offer_img_path + 'rosemary-mobile.png', alt='Rosemary image')
src/sections/platform.pug
+47 -46
View File
@@ -2,51 +2,52 @@
- var list_food_image_path = [{mobile_image_path: platform_image_path + "food-1-mobile.png", desktop_image_path: platform_image_path + "food-1-desktop.png"}, {mobile_image_path: platform_image_path + "food-2-mobile.png", desktop_image_path: platform_image_path + "food-2-desktop.png"}, {mobile_image_path: platform_image_path + "food-3-mobile.png", desktop_image_path: platform_image_path + "food-3-desktop.png"}, {mobile_image_path: platform_image_path + "food-4-mobile.png", desktop_image_path: platform_image_path + "food-4-desktop.png"}];
section.platform
.platform__container
.platform__image-container
each item in list_food_image_path
picture.platform__image-food
source(media='(min-width: 1200px)', srcset=item.desktop_image_path)
img(src=item.mobile_image_path, alt='Food image')
picture
source(
media='(min-width: 1200px)',
srcset=platform_image_path + 'background-desktop.png'
)
source(
media='(min-width: 600px)',
srcset=platform_image_path + 'background-tablet.png'
)
img.platform__background-img(
src=platform_image_path + 'background-mobile.png',
alt='Background image'
)
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.text--primary More Easy
= ' to '
span.text--secondary Order
= ' by Our Mobile '
span.text--primary App
p.platform__description All you need to do is downlode one of the best delivery apps, make 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'
.wrapper
.platform__container
.platform__image-container
each item in list_food_image_path
picture.platform__image-food
source(media='(min-width: 1200px)', srcset=item.desktop_image_path)
img(src=item.mobile_image_path, alt='Food image')
picture
source(
media='(min-width: 1200px)',
srcset=platform_image_path + 'background-desktop.png'
)
.platform__app-store
img.platform__app-store-image(
src=platform_image_path + 'app-store.png',
alt='App store image'
source(
media='(min-width: 600px)',
srcset=platform_image_path + 'background-tablet.png'
)
img.platform__background-img(
src=platform_image_path + 'background-mobile.png',
alt='Background image'
)
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.text--primary More Easy
= ' to '
span.text--secondary Order
= ' by Our Mobile '
span.text--primary App
p.platform__description All you need to do is downlode one of the best delivery apps, make 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'
)
src/sections/service.pug
+54 -53
View File
@@ -4,56 +4,57 @@
- var list_service_category = [list_service_category_1, list_service_category_2];
section.service
.service__container
.service__background-color
.service__img-container
picture
source(
media='(min-width: 1200px)',
srcset=service_img_path + 'background-desktop.png'
)
source(
media='(min-width: 600px)',
srcset=service_img_path + 'background-tablet.png'
)
img.service__background-img(
src=service_img_path + 'background-mobile.png',
alt='Background image'
)
picture
source(
media='(min-width: 1200px)',
srcset=service_img_path + 'main-character-desktop.png'
)
img.service__main-img(
src=service_img_path + 'main-character-mobile.png',
alt='Main character image'
)
picture
source(
media='(min-width: 1200px)',
srcset=service_img_path + 'vegetable-desktop.png'
)
img.service__vegetable-img(
src=service_img_path + 'vegetable-mobile.png',
alt='Vegetable background image'
)
.service__content
h2.service__heading We are
= ' '
span.text--primary more
= ' than '
span.text--secondary multiple
= ' service'
p.service__description This is a type of resturent which typically serves food and drink, in addition to light refreshments such as baked goods or snacks. The term comes frome the rench word meaning food
.service__category
each list in list_service_category
.service__category-list
each item in list
.service__category-item
img.service__icon-category(
src=item.url_icon,
alt='Icon category'
)
p.service__name-category= item.content
a.service__btn.btn(href='javascript:void(0)') About us
.wrapper
.service__container
.service__background-color
.service__img-container
picture
source(
media='(min-width: 1200px)',
srcset=service_img_path + 'background-desktop.png'
)
source(
media='(min-width: 600px)',
srcset=service_img_path + 'background-tablet.png'
)
img.service__background-img(
src=service_img_path + 'background-mobile.png',
alt='Background image'
)
picture
source(
media='(min-width: 1200px)',
srcset=service_img_path + 'main-character-desktop.png'
)
img.service__main-img(
src=service_img_path + 'main-character-mobile.png',
alt='Main character image'
)
picture
source(
media='(min-width: 1200px)',
srcset=service_img_path + 'vegetable-desktop.png'
)
img.service__vegetable-img(
src=service_img_path + 'vegetable-mobile.png',
alt='Vegetable background image'
)
.service__content
h2.service__heading We are
= ' '
span.text--primary more
= ' than '
span.text--secondary multiple
= ' service'
p.service__description This is a type of resturent which typically serves food and drink, in addition to light refreshments such as baked goods or snacks. The term comes frome the rench word meaning food
.service__category
each list in list_service_category
.service__category-list
each item in list
.service__category-item
img.service__icon-category(
src=item.url_icon,
alt='Icon category'
)
p.service__name-category= item.content
a.service__btn.btn(href='javascript:void(0)') About us
src/sections/welcome.pug
+141 -134
View File
@@ -2,141 +2,148 @@
- var list_food_image_mobile = [{img_mobile_path: welcome_img_path + "food-1-mobile.png", img_desktop_path: welcome_img_path + "food-1-desktop.png"}, {img_mobile_path: welcome_img_path + "food-2-mobile.png", img_desktop_path: welcome_img_path + "food-2-desktop.png"}, {img_mobile_path: welcome_img_path + "food-3-mobile.png", img_desktop_path: welcome_img_path + "food-3-desktop.png"}, {img_mobile_path: welcome_img_path + "food-4-mobile.png", img_desktop_path: welcome_img_path + "food-4-desktop.png"}];
section.welcome
.welcome__container
.welcome__banner
.welcome__banner-container
.welcome__main-image
picture
source(
media='(min-width: 1200px)',
srcset=welcome_img_path + 'welcome-image-desktop.png'
)
img.welcome__banner-img(
src=welcome_img_path + 'welcome-image-mobile.png',
alt='Welcome banner image'
)
each item in list_food_image_mobile
picture.welcome__food-img
source(media='(min-width: 1200px)', srcset=item.img_desktop_path)
img(src=item.img_mobile_path, alt='Food image')
picture
source(
media='(min-width: 1200px)',
srcset=welcome_img_path + 'review-card-desktop.png'
)
img.welcome__review-card(
src=welcome_img_path + 'review-card-mobile.png',
alt='Review card'
)
picture
source(
media='(min-width: 1200px)',
srcset=welcome_img_path + 'rate-card-desktop.png'
)
img.welcome__rate-card(
src=welcome_img_path + 'rate-card-mobile.png',
alt='Review card'
)
picture
source(
media='(min-width: 1200px)',
srcset=welcome_img_path + 'arrow-desktop.png',
alt='Arrow image'
)
img.welcome__arrow-img-up(
src=welcome_img_path + 'arrow-mobile.png',
alt='Arrow image'
)
.welcome__background-banner
picture
source(
media='(min-width: 1200px)',
srcset=welcome_img_path + 'lines-background-desktop.png'
)
img.welcome__lines-background(
src=welcome_img_path + 'lines-background-mobile.png',
alt='Lines background'
)
picture
source(
media='(min-width: 1200px)',
srcset=welcome_img_path + 'mint-desktop.png'
)
img.welcome__mint-img(
src=welcome_img_path + 'mint-mobile.png',
alt='Mint image'
)
.welcome__content
.welcome__arrow-down-img-wrapper
img.welcome__arrow-img-down(
src=welcome_img_path + 'arrow-desktop-2.png',
alt='Arrow image down'
)
.welcome__orange-img-wrapper
picture
source(
media='(min-width: 840px)',
srcset=welcome_img_path + 'orange-desktop.png'
.wrapper
.welcome__container
.welcome__banner
.welcome__banner-container
.welcome__main-image
picture
source(
media='(min-width: 1200px)',
srcset=welcome_img_path + 'welcome-image-desktop.png'
)
img.welcome__banner-img(
src=welcome_img_path + 'welcome-image-mobile.png',
alt='Welcome banner image'
)
each item in list_food_image_mobile
picture.welcome__food-img
source(
media='(min-width: 1200px)',
srcset=item.img_desktop_path
)
img(src=item.img_mobile_path, alt='Food image')
picture
source(
media='(min-width: 1200px)',
srcset=welcome_img_path + 'review-card-desktop.png'
)
img.welcome__review-card(
src=welcome_img_path + 'review-card-mobile.png',
alt='Review card'
)
picture
source(
media='(min-width: 1200px)',
srcset=welcome_img_path + 'rate-card-desktop.png'
)
img.welcome__rate-card(
src=welcome_img_path + 'rate-card-mobile.png',
alt='Review card'
)
picture
source(
media='(min-width: 1200px)',
srcset=welcome_img_path + 'arrow-desktop.png',
alt='Arrow image'
)
img.welcome__arrow-img-up(
src=welcome_img_path + 'arrow-mobile.png',
alt='Arrow image'
)
.welcome__background-banner
picture
source(
media='(min-width: 1200px)',
srcset=welcome_img_path + 'lines-background-desktop.png'
)
img.welcome__lines-background(
src=welcome_img_path + 'lines-background-mobile.png',
alt='Lines background'
)
picture
source(
media='(min-width: 1200px)',
srcset=welcome_img_path + 'mint-desktop.png'
)
img.welcome__mint-img(
src=welcome_img_path + 'mint-mobile.png',
alt='Mint image'
)
.welcome__content
.welcome__arrow-down-img-wrapper
img.welcome__arrow-img-down(
src=welcome_img_path + 'arrow-desktop-2.png',
alt='Arrow image down'
)
img(
src=welcome_img_path + 'orange.png',
alt='Orange background image'
)
.welcome__text-box
.welcome__icon-container
img.welcome__love-icon(
src=welcome_img_path + 'love-icon.png',
alt='Love icon'
)
.welcome__head-arrow-container
img(src=welcome_img_path + 'head-arrow.png', alt='Head arrow image')
p.welcome__text-box-content People Trust us
h1.welcome__heading We're
= ' '
span.text--primary serious
= ' for '
span.text--primary food
= ' & '
.delivery-text-box
span.text--secondary delivery
.welcome__underline-img-container
img.welcome__underline-img(
src=welcome_img_path + 'underline.png',
alt='Underline image'
.welcome__orange-img-wrapper
picture
source(
media='(min-width: 840px)',
srcset=welcome_img_path + 'orange-desktop.png'
)
= '.'
img(
src=welcome_img_path + 'orange.png',
alt='Orange background image'
)
.welcome__text-box
.welcome__icon-container
img.welcome__love-icon(
src=welcome_img_path + 'love-icon.png',
alt='Love icon'
)
.welcome__head-arrow-container
img(
src=welcome_img_path + 'head-arrow.png',
alt='Head arrow image'
)
p.welcome__text-box-content People Trust us
h1.welcome__heading We're
= ' '
span.text--primary serious
= ' for '
span.text--primary food
= ' & '
.delivery-text-box
span.text--secondary delivery
.welcome__underline-img-container
img.welcome__underline-img(
src=welcome_img_path + 'underline.png',
alt='Underline image'
)
= '.'
p.welcome__description Best cooks and best delivery guys all at your service. Hot tasty food will reach you in 60 minutes.
form.welcome__search-form(action='#')
.welcome__search-icon-wrapper
img.welcome__search-icon(
src=welcome_img_path + 'search-icon.png',
alt='Search icon'
)
input.welcome__text-input(type='text', placeholder='Search food')
button.welcome__submit-btn(type='submit')
img.welcome__search-icon-btn(
src=welcome_img_path + 'search-icon-btn.svg',
alt='Search button image'
)
.welcome__action-container
a.welcome__download-btn.btn(href='javascript:void(0)') Download App
a.welcome__watch-video-link.link-text(href='javascript:void(0)')
.welcome__play-icon-wrapper
svg.welcome__play-icon(
width='12',
height='12',
viewBox='0 0 12 13',
fill='none',
xmlns='http://www.w3.org/2000/svg'
p.welcome__description Best cooks and best delivery guys all at your service. Hot tasty food will reach you in 60 minutes.
form.welcome__search-form(action='#')
.welcome__search-icon-wrapper
img.welcome__search-icon(
src=welcome_img_path + 'search-icon.png',
alt='Search icon'
)
path(
d='M12 6.5L0.749999 12.9952L0.75 0.00480889L12 6.5Z',
fill='currentColor'
)
span.welcome__text-download-btn Watch Video
.welcome__slider-container
img.welcome__slider-img(
src=welcome_img_path + 'slider.png',
alt='Slider image'
)
input.welcome__text-input(type='text', placeholder='Search food')
button.welcome__submit-btn(type='submit')
img.welcome__search-icon-btn(
src=welcome_img_path + 'search-icon-btn.svg',
alt='Search button image'
)
.welcome__action-container
a.welcome__download-btn.btn(href='javascript:void(0)') Download App
a.welcome__watch-video-link.link-text(href='javascript:void(0)')
.welcome__play-icon-wrapper
svg.welcome__play-icon(
width='12',
height='12',
viewBox='0 0 12 13',
fill='none',
xmlns='http://www.w3.org/2000/svg'
)
path(
d='M12 6.5L0.749999 12.9952L0.75 0.00480889L12 6.5Z',
fill='currentColor'
)
span.welcome__text-download-btn Watch Video
.welcome__slider-container
img.welcome__slider-img(
src=welcome_img_path + 'slider.png',
alt='Slider image'
)
src/styles/main.scss → src/styles/_main.scss
+5 -5
View File
@@ -17,8 +17,8 @@
@import './layouts/footer';
//Sections
@import './sections/welcome';
@import './sections/offer';
@import './sections/service';
@import './sections/menu';
@import './sections/platform';
@import './pages/home/welcome';
@import './pages/home/offer';
@import './pages/home/service';
@import './pages/home/menu';
@import './pages/home/platform';
src/styles/bases/_base.scss
+11
View File
@@ -1,3 +1,14 @@
body {
min-width: 428px;
}
.wrapper {
max-width: 428px;
margin-inline: auto;
}
@media screen and (min-width: 600px) {
.wrapper {
max-width: $max-width;
}
}
src/styles/bases/_typography.scss
+12
View File
@@ -9,6 +9,8 @@ $font-path: '../assets/fonts';
src: url('#{$font-path}/sofia-pro-regular.woff2') format('woff2'),
url('#{$font-path}/sofia-pro-regular.ttf') format('truetype');
font-weight: 400;
font-display: swap;
}
@font-face {
@@ -16,6 +18,8 @@ $font-path: '../assets/fonts';
src: url('#{$font-path}/sofia-pro-medium.woff2') format('woff2'),
url('#{$font-path}/sofia-pro-medium.ttf') format('truetype');
font-weight: 600;
font-display: swap;
}
@font-face {
@@ -23,6 +27,8 @@ $font-path: '../assets/fonts';
src: url('#{$font-path}/sofia-pro-semi-bold.woff2') format('woff2'),
url('#{$font-path}/sofia-pro-semi-bold.ttf') format('truetype');
font-weight: 700;
font-display: swap;
}
@font-face {
@@ -30,18 +36,24 @@ $font-path: '../assets/fonts';
src: url('#{$font-path}/sofia-pro-bold.woff2') format('woff2'),
url('#{$font-path}/sofia-pro-bold.ttf') format('truetype');
font-weight: 900;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('#{$font-path}/inter.woff2') format('woff2'),
url('#{$font-path}/inter.ttf') format('truetype');
font-display: swap;
}
@font-face {
font-family: 'Poppins';
src: url('#{$font-path}/poppins-medium.woff2') format('woff2'),
url('#{$font-path}/poppins-medium.ttf') format('truetype');
font-display: swap;
}
* {
src/styles/components/_card-item.scss
+1 -1
View File
@@ -4,7 +4,7 @@
.card {
@extend %d-flex, %align-center-col;
@include size(auto, 516px);
@include size(310px, 516px);
position: relative;
src/styles/layouts/_footer.scss
-2
View File
@@ -8,7 +8,6 @@
padding-top: 116px;
padding-left: 24px;
max-width: 428px;
}
&__brand-name {
@@ -117,7 +116,6 @@
&__container {
display: grid;
grid-template-columns: 1fr 1fr;
max-width: $max-width;
width: auto;
column-gap: 10px;
padding-inline: 10px;
src/styles/layouts/_header.scss
-2
View File
@@ -30,8 +30,6 @@
@media screen and (min-width: 1020px) {
.header {
@include size(auto, auto);
max-width: $max-width;
}
.header__container {
src/styles/sections/_menu.scss → src/styles/pages/home/_menu.scss
+1 -5
View File
@@ -12,7 +12,6 @@
@extend %mr-inline-auto;
padding-top: 110px;
max-width: 424px;
}
&__heading {
@@ -74,10 +73,6 @@
@media screen and (min-width: 600px) {
.menu {
&__container {
max-width: $max-width;
}
&__heading {
max-width: 653px;
}
@@ -128,6 +123,7 @@
max-width: 1294px;
column-gap: 18px;
margin-top: 106px;
padding-inline: unset;
}
}
}
src/styles/sections/_offer.scss → src/styles/pages/home/_offer.scss
+1 -4
View File
@@ -1,6 +1,5 @@
.offer {
position: relative;
max-width: 428px;
margin-inline: auto;
&__container {
@@ -61,10 +60,8 @@
@media screen and (min-width: 600px) {
.offer {
max-width: $max-width;
&__container {
max-width: $max-width;
max-width: unset;
}
&__card-list {
src/styles/sections/_platform.scss → src/styles/pages/home/_platform.scss
+8 -14
View File
@@ -1,20 +1,18 @@
.platform {
background: linear-gradient(
0,
rgba(253, 197, 94, 0.15) 0%,
rgba(253, 197, 94, 0.05) 50%,
rgba(253, 197, 94, 0) 100%
);
&__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);
@include size(428px, 502px);
position: relative;
max-width: 100%;
@@ -81,10 +79,6 @@
@media screen and (min-width: 600px) {
.platform {
&__container {
max-width: $max-width;
}
&__image-container {
width: fit-content;
margin-inline: auto;
@@ -159,7 +153,7 @@
}
&__image-container {
@include size(auto, 632px);
@include size(622px, 652px);
padding-top: 20px;
text-align: right;
src/styles/sections/_service.scss → src/styles/pages/home/_service.scss
+2 -4
View File
@@ -1,5 +1,4 @@
.service {
max-width: 428px;
margin-inline: auto;
&__container {
@@ -22,9 +21,10 @@
}
&__img-container {
@include size(406px, 405px);
padding-top: 75px;
position: relative;
width: fit-content;
}
&__main-img {
@@ -97,8 +97,6 @@
@media screen and (min-width: 600px) {
.service {
max-width: $max-width;
&__img-container {
margin-inline: auto;
}
src/styles/sections/_welcome.scss → src/styles/pages/home/_welcome.scss
+6 -4
View File
@@ -18,14 +18,13 @@
@include flex-layout($justify: center, $direction: column);
margin: auto;
max-width: 428px;
padding-top: 67px;
}
// Start banner
&__banner-container {
@extend %d-flex;
@include size(428px, auto);
@include flex-layout($justify: center, $direction: column);
@include size(428px, 417px);
position: relative;
}
@@ -277,10 +276,12 @@
}
&__banner-container {
width: unset;
@include size(auto, auto);
}
&__main-image {
@include size(355px, 417px);
margin-inline: auto;
position: relative;
padding-left: 50px;
@@ -343,7 +344,6 @@
padding-top: 130px;
width: 100%;
max-width: $max-width;
}
// Start content
@@ -430,6 +430,8 @@
}
&__main-image {
@include size(570px, 655px);
padding-right: 29px;
}