Get 20% discount on your hosting plan: https://buildnearn.com/best-hosting/
Get tutorial based resources: https://buildnearn.com/hostinger-website-builder-tutorial-make-a-delicious-food-cover-landing-page/
Want to know the SECRET to getting more customers for your restaurant? It starts with an incredible landing page design! In this Hostinger Website Builder tutorial, we'll show you the complete, step-by-step guidance on how to create a food restaurant landing page that converts visitors into happy diners. This guide is perfect for anyone looking to build & earn a professional online presence easily—no coding required!
Full Description
Welcome to BuildNEarn! Today, we dive deep into the ultimate Hostinger website builder tutorial to create a high-converting, animated, and eye-catching online presence for your eatery.
You'll learn exactly how to create a landing page in Hostinger that showcases your menu, special offers, and location. We focus on a stunning food flyer design strategy within the builder, so you can attract local customers searching for the best food in town.
We break down the entire process, including:
Selecting the perfect template for a restaurant.
Integrating an engaging animated food website section.
Stop relying on expensive designers and start your Build N Earn journey now! Hostinger Website Builder makes it easy for anyone to create a professional, fast website.
#hostingerwebsite #website #websitedesign #websitedevelopment #webdesign #buildnearn
how to create a website on hostinger website builder
How to make a mobile responsive website on Hostinger Wesite Builder
hostinger website builder tutorial
hostinger website builder review
food flyer design in hostinger website builder
flyer design for restaurant
food flyer website design
how to make a restaurant landing page
how to make a website
is hostinger website builder good
hostinger AI builder
no code website builder tutorial
drag and drop website builder
How to create a restaurant landing page using Hostinger Website Builder
easy website builder
best website builder
hostinger ai website builder
restaurant website
restaurant website design
website builder
building a website
restaurant website hostinger
how to make a restaurant landing page
Get tutorial based resources: https://buildnearn.com/hostinger-website-builder-tutorial-make-a-delicious-food-cover-landing-page/
Want to know the SECRET to getting more customers for your restaurant? It starts with an incredible landing page design! In this Hostinger Website Builder tutorial, we'll show you the complete, step-by-step guidance on how to create a food restaurant landing page that converts visitors into happy diners. This guide is perfect for anyone looking to build & earn a professional online presence easily—no coding required!
Full Description
Welcome to BuildNEarn! Today, we dive deep into the ultimate Hostinger website builder tutorial to create a high-converting, animated, and eye-catching online presence for your eatery.
You'll learn exactly how to create a landing page in Hostinger that showcases your menu, special offers, and location. We focus on a stunning food flyer design strategy within the builder, so you can attract local customers searching for the best food in town.
We break down the entire process, including:
Selecting the perfect template for a restaurant.
Integrating an engaging animated food website section.
Stop relying on expensive designers and start your Build N Earn journey now! Hostinger Website Builder makes it easy for anyone to create a professional, fast website.
#hostingerwebsite #website #websitedesign #websitedevelopment #webdesign #buildnearn
how to create a website on hostinger website builder
How to make a mobile responsive website on Hostinger Wesite Builder
hostinger website builder tutorial
hostinger website builder review
food flyer design in hostinger website builder
flyer design for restaurant
food flyer website design
how to make a restaurant landing page
how to make a website
is hostinger website builder good
hostinger AI builder
no code website builder tutorial
drag and drop website builder
How to create a restaurant landing page using Hostinger Website Builder
easy website builder
best website builder
hostinger ai website builder
restaurant website
restaurant website design
website builder
building a website
restaurant website hostinger
how to make a restaurant landing page
Category
🤖
TechTranscript
00:00In this video tutorial, I'm going to show you how you can create a food cover flyer landing
00:04page website using hosting a website builder.
00:07To create this website, you do not need to have any kind of coding knowledge.
00:11All you have to do is just drag the element and drop them on the plain canvas and boom,
00:17your website is ready.
00:18But before starting this tutorial, I request you to subscribe to this channel.
00:22Make sure to click on the bell icon and share this video with your friends.
00:25Now let's start our tutorial.
00:30Hostinger website builder itself is a free tool, but you must have a hosting from the
00:36Hostinger to use it.
00:38And if you want to purchase a hosting, you will find a link in this video's description.
00:44Just click on it and you will land on this website.
00:47Just scroll down on this website and after scrolling it, click on get 20% discount.
00:53And it will take you towards the official Hostinger website.
00:55Make sure you go through this link and also make sure you see this you are invited to
01:01Hostinger.
01:02Get an extra 20% discount.
01:04Otherwise, you will not get any discount.
01:07So to claim it, click on claim deal and it will show you all its plans.
01:13You can see their premium plan, business plan and cloud startup.
01:16You can also see their prices and all of these plans include hosting a website builder.
01:23The difference is their storage and space, which you can compare and decide whether you
01:29want to go with premium business or cloud startup.
01:32The only difference amongst all these three plans is only the speed and the number of websites
01:38or the other features you host on these plans.
01:42So compare them.
01:43And after comparing, if you decided to choose a plan, just click on choose plan.
01:49Like I just click on cloud startup and it will redirect us to the cart page.
01:54So it is our cart page and by default 48 months plan is chosen.
02:00And you can see that you will get this hosting at $3 or $6 or $3 or $7 for 4 years and you
02:09will get a flat $77 discount, 20% discount because of that link you followed from the description
02:17of this video.
02:18You can even reduce the number of period you want to select.
02:23So you can see that as I have choose 12 months period.
02:28So our price reduced to $96 and you will get a $24 discount on this plan.
02:35You will also get a free domain for one year if you purchase this plan.
02:40Also if you choose this plan for four years, you will get additional two months for your
02:46hosting.
02:47So instead of 48 months, you will get 50 months hosting.
02:51You can also choose a 24 months plan, but you will have to pay the price of double amount
02:58of this hosting at the time of renewal.
03:00So it will be better if you purchase it for 48 months to avoid additional charges.
03:06So after choosing a plan, just click on continue.
03:11Now register your account using your email address, Gmail or GitHub account and then pay
03:16for your hosting plan.
03:18You can choose your PayPal or bank account.
03:22Even you can use cryptocurrencies to make a purchase.
03:25Sign up and payment process is very simple.
03:27So I'm not going to waste any time.
03:29After making a purchase, log into your hosting account and you will see this kind of dashboard.
03:34Just go to the websites and click on add website button and then choose hosting a website builder.
03:40You will see a blank section here because I have already added few websites.
03:46So mine is not blank, but yours will be.
03:48So after choosing hosting a website builder, it will take you towards this page where you
03:53can choose AI chat builder.
03:56And I have already made a video how you can create a website using hosting a chat builder.
04:02And you will get its link in the video's description, but for this video, we want to create a website
04:06from scratch.
04:07So I will scroll down and choose pre-made templates.
04:12And it will take you towards this page where you can choose any template.
04:16You will get plenty of templates here, but I am going to use a blank template.
04:22So I will click on blank templates and here is a number of blank templates.
04:26So I will choose this select star from scratch.
04:31So I will click on select template.
04:35And it will open us a blank canvas where we can drag our elements and create our website.
04:42And there is one more thing I want to tell you is that there is a header on our website,
04:47which is not visible right now.
04:49But if I hover over here, so you can see it shows a section here, but it is hidden.
04:58So it will not appear on our website until you make it visible.
05:02And all this food flyer website do not need a header.
05:05So we will keep it hidden.
05:07So now let's just start creating our website.
05:11So to create our website, we need to add a section here first.
05:14So I will click on add section and add a blank section.
05:19So a section has been added and now we can place our elements here.
05:23But before that, I need to change its background color.
05:27So I will click on edit section.
05:30Then click on this white circle next to section color.
05:34And instead of solid, I will go to the gradient and I will add two colors.
05:38For the first color, I will add a reddish type of color.
05:41So I will just choose any color from this color picker.
05:47And then for the second color, I will choose a black color.
05:51So that's great.
05:53After that, I will increase the height of this container.
05:59And instead of this dark red color, I think I have to choose a lighter one.
06:05So this color looks good.
06:08Now I will increase its height a little bit.
06:12And then I will start adding elements here.
06:16So I have changed the color one more time.
06:18Now I will add element here.
06:20To add elements, I will go to elements and add a text element here.
06:24And I will drag it right towards the top of our page.
06:28And then I will add it to text and type delicious deal.
06:32And now I will make its alignment to center.
06:35And then change its color from black to white.
06:38And now I have to change its font.
06:41But the font I want to use here is not already here.
06:45So I will have to upload it.
06:47You will get another link in the video's description.
06:49When you open it, you will land here.
06:52Now just click on get video resources.
06:55And it will take you to Google Drive from where you can download all the resources and fonts
07:05I am going to use in this website.
07:08All you have to do is just download them.
07:10And some users might need to extract them.
07:13So download them and let's continue our tutorial.
07:17After downloading, you need to upload your font here.
07:19So click on upload.
07:22And after extracting the font, you will get this file, just upload it.
07:30And your font will start uploading.
07:33So our font have been added and you can see it is right under my fonts code script.
07:39And this font have been added.
07:40Now I have to change its color from white to something yellowish like this.
07:49And I have to place it over here.
07:52After that, I have to place another element.
07:55But before adding the other element, I have to increase the height of this heading.
08:02So I will go to added text and instead of 48, I will make it 66.
08:08And that's good.
08:10And now we need to add a subheading here.
08:12So for that, I will go to elements again.
08:16And add a text element here.
08:18And I will change its text from write your text here to fresh and healthy.
08:24Then I will make its alignment to center.
08:26And then I will change its font size to 24 and change its font style to poppins regular.
08:36And change its color to white.
08:38After that, if I try to change its position, but I think the previous one looks better.
08:48So after that, I have to add image element here.
08:51So I will add image element.
08:53And then I will drag it towards the down side.
08:55Then I will go to change image and I will upload all the images from that drive file.
09:03So I will select all the images and drag them over here.
09:07I have to select them again.
09:09And then I will drag them over here.
09:12And all the images are now started uploading.
09:16For this image element, I will choose the image of this burger.
09:20So I will click on select.
09:24And that image will be added here after a few seconds.
09:29So this is our main image.
09:32So I will adjust it by grabbing it.
09:36And I think I have to increase its size.
09:39So now I will place it at the center of our page and drag it towards the down side.
09:47And after that, I will place it here.
09:52I think I have to increase its size a little bit more.
09:55And now I have to drag it here.
09:58So after adding our first image, I have to add another image element.
10:03So I will go to elements.
10:05And I will add the image element again.
10:08And I will place it at the left side of our main image.
10:12And then I will change its image and add this french fries image here.
10:19Now I have to adjust its height and size.
10:22For that I will increase its height to add entire image.
10:26And then I will place it over here.
10:30And grab it right here.
10:34Now to place this image at the back side of the burger image, I will send this image towards
10:40its backward.
10:41After that, I need to place another image.
10:43So I will go to elements and add another image element here.
10:47And this time I will place it at the right side of this burger image.
10:52And this time I will select this bottle can.
10:57Now I will adjust its size and increase its height.
11:03So that's looking good here.
11:07And now that's perfect.
11:11Now I have to place it towards the back side again.
11:14Also I have to add animations.
11:16So I will go to edit image.
11:19And this time I will go to animation.
11:21And I will choose this fade animation or slide.
11:26I think slide animation will be fine here.
11:31So I will choose this and for this one, I will go to added image again and on the animation
11:36I will choose another animation style here.
11:41And I think scale will be fine here.
11:44Yes scale will look good here.
11:47So this time I have to add the animation to the scan.
11:51And I think I choose slide.
11:56So this time I will also choose slide animation for the scan.
12:00So now our images are done.
12:03So I will save it and make sure to save it in order to avoid any loss.
12:09So now after adding these images, I have to add price tag here.
12:14So to add a price tag, I have to add this shape element here.
12:20And I will add it and this time I will choose this round shape.
12:24And cross it and I will make its color to yellow.
12:29Like the heading color.
12:30And I will drag it right towards here and reduce its size.
12:35After that I will add a text element here.
12:37And drag it towards here.
12:40And I will edit it and add a price here.
12:45So I think I will add $35 and then make it centered align.
12:51Then I will change its font style to Poppins.
12:55And I will reduce its width from both the sides.
12:59And now I will place it at the center of this price tag.
13:03And after that I will have to scroll down and place another image here.
13:08So I will go to the elements and place an image here.
13:13And this time I will choose another image.
13:17And to do that I will go to the change image.
13:22And this time I will choose the image of this pizza.
13:27So I will click on select.
13:31And the image will be added.
13:33But instead of this square shape I want this image to be in this circular form.
13:38So to change its shape I will have to go to the added image.
13:42And this time I will go to the shape.
13:45And I will choose this circle.
13:47And that's perfect.
13:49Also I want to increase the height of this container.
13:51So I will increase its height and also increase the size of this image.
13:58And after that I will place it at the center and drag it right above the burger image.
14:06And place it right here.
14:08After that I need to add another image.
14:10So instead of adding another element I will just duplicate this image.
14:15And drag it towards the right side also I need to decrease its size.
14:19So I will decrease its size and place it at the center of this image.
14:25And then I will change its image.
14:27So this time I will add the image of this shawarma.
14:30So I will click on select.
14:32And this image will be replaced with the image of shawarma.
14:36Also you can see there is an issue with the image.
14:39Instead of circular image you can see that there are edges on the top and bottom.
14:45So to bring it back to its original shape.
14:47We need to decrease its size a little bit.
14:50And then I have to increase and then decrease its height.
14:54And now you can see its circular shape is back now.
14:57Now I have to increase its size a little bit.
15:00And then place it at the center of our first image.
15:03And then I have to increase its size a little bit more.
15:06And now that's looking good here.
15:09And I think its centered here.
15:13Also I have to duplicate this one again and then place it at the left side.
15:18And I have to place it at the center of these both images.
15:25So let me make its alignment to the center of these both images.
15:30You can follow these lines guides.
15:34And I think now it is at the center of these both images.
15:38So now I have to change its image.
15:40And this time I will choose this barbecue image.
15:45And that's perfect.
15:46After that I need to bring these images at the back side.
15:49So I will right click here.
15:51Right click on this image.
15:53And then I will send it to backwards.
15:56And I will send it backwards again.
15:59I will do the same with this image.
16:01And now you can see these both are looking perfect now.
16:05So after these images I need to add text here.
16:07So I will go to the elements.
16:10And this time I will add the text element here.
16:14And place it right under this pizza image.
16:17And then I will replace this text with pizza.
16:20And then make it centered a line.
16:22And then I will make its color to white.
16:25And make its font to pop-ins.
16:29And decrease its size from 48 to 32.
16:32Also I will drag it towards the lower side.
16:36And then I will reduce its width.
16:38And then place it at the center over here.
16:41And after that I will duplicate this text.
16:44And place it right under this shower my image.
16:47And then I will change its text to shower my.
16:50Then I will increase its width.
16:55And after that I will place it at the center of this image.
17:02Also I will duplicate this.
17:04And place it right under this barbecue image.
17:08And I will place it at the center of this text.
17:11And then I will write barbecue.
17:15And let me check if it is centered aligned to this image.
17:18So that's perfectly aligned.
17:21After that we need to add price tags.
17:23So I will add this shape icon.
17:26And make it circle.
17:27Also I will change its color to yellow.
17:30And then I will place it on this barbecue image.
17:33And place it right here.
17:35And then I will add text element here.
17:40So I will place it right here.
17:45And this time I will write I guess $20 will be good.
17:51Or I think not the $20.
17:54I think $15 will be good here.
17:56Not the $145.
17:57$15 will be good.
17:58Then I will make it centered aligned and for the color I will leave it as it is.
18:04And then I will reduce its width and place it on this price tag.
18:09And then I will change its font size.
18:13I think not 104.
18:16I think 40 seems good here.
18:18Then also I will make it pop in medium this time.
18:23And make it at this place it at the center of this image.
18:26And then duplicate this shape.
18:29And also I will duplicate this price.
18:33And place it right at the center of this shape.
18:38And here it is centered.
18:41And then I will write I guess $20.
18:44I guess $20 seems fair.
18:48And make sure to check if this price is centered or not.
18:53Then again I will duplicate this price tag or shape.
18:58And then I will place it here.
19:02And also I will duplicate this price text.
19:05And place it over here.
19:07Right at the center of this shape.
19:09And then I will change its price to I guess $12 seems fair here.
19:13And now our section is done.
19:16How simple was that?
19:18So as this section is done I will reduce its height.
19:22And now that seems great here.
19:26And after creating this section I will need to add another section.
19:29So I will add a section and add a blank section.
19:33This time I will go to the added section.
19:35And instead of this color I will add an image.
19:38And this time I will choose this image.
19:41So I will select it as the background of this section.
19:46And you can see this image have been added.
19:49So I will reduce its height.
19:51I will reduce the height of this container.
19:54And I think I have to reduce its height a little bit more.
19:58So that's great here.
20:02Now at this section I need to add our footer sections for this landing page.
20:09And let's make it a little bit more shorter in height.
20:15And then I will go to the elements.
20:17And I will add a button here.
20:19I will add a button this time.
20:22And I will drag it towards the left side.
20:27And place it over here.
20:29And then I will go to the added button.
20:32And instead of this text I will type by now or order now.
20:39Then I will go to its style tab.
20:41And I do not need to change its color.
20:43Instead I will have to make its border radius circular instead of this shape.
20:49So I will give it a full radius which is 25.
20:55And then I do not think I need to change its active color.
21:01And then I will place it at the center of this section right here.
21:06And I think I have to change its hover color.
21:09So I will go to the style.
21:11On the hover I will make its fill color to that yellow color.
21:15And text color to the black color.
21:18And you can see this is how the hover animation or hover style works.
21:22After the button I need to add social media links.
21:25So I will add social icons.
21:27And I will place it right towards this side at the center of this button.
21:33And then I will go to this style and increase its icon size to 25 I think.
21:39And 25 seems good here.
21:42And then I will place it at the center.
21:44Align with this button.
21:46And to change these social media links you just need to go to the links and click on
21:51this gear icon and go to the edit.
21:53And replace these links with your social media links.
21:57Also you can delete any icon from here as well.
22:00You can also adjust the layout of these social media icons.
22:04Just go to the layout.
22:06And icon spacing or stretch you can even make them vertical.
22:12But that's irrelevant to our this design.
22:15So I will make it back to its horizontal shape.
22:20And this is our entire footer section.
22:25And at the end of this section I want to add a copyright section.
22:30So I will edit this text and I will enter my copyright section which will be alright reserved.
22:38After that I will reduce its size to 18 and then I will make its alignment to center.
22:44And I will make its font to Poppins regular and reduce this boldness.
22:50And after that I need to increase the height of this container.
22:54And then drag it a little bit towards the lower side.
22:56And after that I need to save this entire progress.
23:02And then I need to give this website some finishing touch like increasing a little bit
23:07height of this container and select all these elements from the footer and make sure they
23:13are at the center of this container.
23:16And that's it.
23:17Now I just need to click on go live to publish our website as we have completed all the designing
23:26process of our desktop version.
23:29So now let's take a preview of how our website is looking like on real web.
23:33So our website is published now.
23:35I will click on view site.
23:37And you can see this is how our website is looking like on the actual web.
23:44So that's looking perfectly amazing.
23:47But you might have noticed that it is on a temporary domain.
23:52But you will get a live domain.
23:55You will get a free domain which you can claim and use it on your website.
24:01Although our website is live and anyone with this link can access to our website.
24:05But as it is on a temporary domain.
24:08So search engines will not rank it when someone search these websites through their name.
24:14So it is better to link them with a proper domain.
24:19And that's how our website is looking like.
24:21Isn't it cool?
24:22If I go towards the mobile devices.
24:24So you can see this is how our website is looking like on the mobile devices.
24:30So that's totally a mess.
24:33So we are going to improve it in this video.
24:37So I will get back to the editor.
24:39And this time I will open the mobile editor.
24:41It's already opened because I have get back from the mobile preview mode.
24:47So this time I will update these things.
24:51So first of all I need to adjust these both the headings and drag them a little bit towards
24:58the lower side or down side whatever you want to call.
25:01After that I need to increase the height of this heading.
25:07So I will go to the added text and then I will increase its size from this 32 and I will
25:16make it 48 and that's amazingly perfect.
25:20After that I need to reduce the size of this subheading.
25:26So I will reduce its size to 18 and if I try to place it here.
25:35So that's perfect.
25:36Now I have to adjust these images.
25:39So to adjust them I will first grab this image of burger and then reduce its size and
25:47height.
25:48Then I will drag it at the center of this window or page and then I will place this fries image
25:57and reduce its size and I will drag it right towards the left side of this burger image
26:04and then I will do the same with this scan image.
26:08I will drag it towards the upside and reduce its size and then I will place it over here.
26:13I think I have to increase its size a little bit more and height as well.
26:19So this time that seems great here and also I need to increase its size and I have to drag
26:31it a bit more and now that's now that seems great here.
26:38After that I need to place that price tag over this image so I will drag this price tag and
26:47place it right over this image.
26:50So I will drag it all the way towards the upper side and reduce its size and now I will place
26:57it right here and then I will have to drag this price as well.
27:02So I will drag it all the way towards the upper side and then I will reduce its width as well
27:12from both the sides and place it right here.
27:16Then I will reduce its size from 32 to 24 I guess and 24 seems good here and then I will
27:24place it at the center of this price tag.
27:26After that I need to place these images under these upper images so I will grab them or
27:33I think I have to grab them at once so I can take them towards the upper side without coming
27:41back again and again.
27:42So I will grab them all and take them right under these images and now I have to adjust
27:48the sizes of these images.
27:50So our first image is this pizza image but before that I need to make space for this.
27:58So I will reduce the height and now that's image is properly aligned so that's perfect.
28:07Now I will reduce the height and then I have to increase its size and that seems fine.
28:17Now I have to place it at the center of this image.
28:21After that I will do the same with this shwarma image.
28:24So I will reduce its size and then increase its height and then I will reduce its size and
28:32now I will place it towards the right side of this pizza image and that's perfect.
28:38Now I will do the same with this barbecue image.
28:41So I will do the same with this.
28:42Now I will do the same with this.
28:43So I will do the same with this.
28:44So I will do the same with this.
28:45So I will increase its height and then I will reduce its size.
28:48So that's perfectly circle and now I reduce its size a little bit more and now that's perfectly
28:59aligned with all these images and I think that's.
29:06And that's perfectly centered here.
29:19After that I need to place the other elements here like the titles, the price tags and the
29:26price as well.
29:27So I will select all of them together instead of coming here again and again and grabbing
29:34elements one by one.
29:36So I will select them all and now I have selected all the elements but these two are left behind.
29:47So I will select them as well and place them with the other elements and then I will grab
29:53them all and take them towards the upper side.
29:57So I will grab them all.
29:59This time I have selected all the elements and nothing left behind.
30:03So I will grab them all the way towards the upper side right under these food images
30:09and that's perfect here.
30:11Now I have to place that titles here.
30:14So I will reduce the height, reduce the size to 16 and then I will place it here and then
30:25I will reduce its width.
30:27And now I will place it at the center of, at the centered align with this image.
30:33And I will do the same with this text as well.
30:35So I will reduce its size to 16 and then I will reduce its width as well.
30:42And I will place it under this shawarma image right here.
30:46And I will do the same with this barbecue and I will reduce its size to 16 and reduce its
30:53width as well.
30:55And then I will place it under this barbecue image and make it aligned with this shawarma
31:00text.
31:02And now that's aligned with this and now that's aligned.
31:07So now you can see barbecue and shawarma texts are aligned and pizza text is right under it.
31:13Now we need to add these price tags.
31:15So I will select this one, reduce its size and I will place it right here.
31:24And for the barbecue I will choose a price from here.
31:29I have placed them right under here.
31:33So I will select this 15 and place it right over that text.
31:40But before that I need to reduce its size to 16 and then I also have to reduce its weight.
31:47Now I will place it over that price tag right here.
31:52Also I think I need to make some adjustments to make it centered align and now that's perfectly
31:57centered.
31:58Now I will do the same with the other price tag.
32:00I will reduce its size and place it over the pizza image and I will place it right here.
32:08I think I have to place it at the left side instead of this right side.
32:12So now that's seems great here.
32:16Now I will add this $20 price over this tag.
32:21So I will reduce its size to 16 and then also I will reduce its width as well.
32:28And now I will place it on that price tag.
32:33So that text went back to this price tag and I have to right click over it and bring it towards
32:41the front.
32:42And now that's over this price tag.
32:45Now I also have to increase the height of this price tag a little bit more to make that price
32:52fully aligned over that price tag.
32:56So that's perfect.
32:57So that's perfect.
32:58Now I have to do the same with this third price tag.
33:00So I will grab it on that Shawa image.
33:06So I will reduce its size and place it over the right side of the Shawa my image and then
33:13I will place that price $12 on that price tag.
33:19But before that I have to reduce its size to 16 and then also I have to reduce its width.
33:27And now I have to place it over that price tag and then I have to increase the height of
33:34that icon.
33:36So I will increase its height and now I will place it over here.
33:47And that's perfect.
33:48After that I need to place these text towards the lower side.
33:52So I will place the labels and drag them a bit towards the lower side.
33:57So there will be a suitable gap amongst the text and images.
34:04So that's perfect and I have to make and that's perfect.
34:11After that I will have to reduce the height of this container.
34:15So I will grab it and drag it all the way towards the upper side and reduce the height
34:23of this container.
34:25Just like this and now that's perfect.
34:30Now we have to adjust this footer.
34:33For that let me try to make the button and social media icons one after another.
34:39So I will try to resize the button and I think I have to make some adjustment in this button
34:49size.
34:51And that's great.
34:52Now I have to place it at the left side.
34:55Now I have to reduce the gap between the social media icons and then I have to reduce their
35:01size to a little bit lower.
35:04I think 20 seems fair here and then I will place them one after another and that's centered
35:13to each other.
35:14Now I will reduce the height of this text to 14 I guess.
35:19And if I drag it here and now that's not seems good.
35:28That seems a little weird.
35:30So I will place them like they were before and that seems great here.
35:41And I will have to increase this size a little bit more.
35:45And then I will drag them a little towards the lower side and that's perfect.
35:51So after that if we preview our changes.
35:54So this is how our website is looking like on the mobile devices.
35:59So that's really amazing and perfect.
36:03So this is how you can create a food flyer website on the hosting a website and make it
36:10responsive on mobile.
36:11So that's it for today.
36:13Hope you like this video.
36:14If you like this video make sure to subscribe to this channel and share this video with your
36:22friends.
36:23Thank you very much.
Recommended
1:33
|
Up next
11:02
5:00
3:08
6:12
5:50
8:18
3:27
4:46
6:19
6:03
6:15
3:45
5:38
11:09
10:24
5:49
13:02
4:00
8:19
Be the first to comment