Omnifood-Study-Project

Website of allegedly a well known restaurant with many branches and a quick delivery mobile app.

this project is written only with HTML & CSS.

Steps i did:

• Header - As you see, the flow is smooth and the colors are fitting great together.Its suppose to be welcoming so we have the main navigation and the logo first with beautiful background image while its used with 'linear-gradient' attribute to dark it out a bit and make the rest of the elements more clear to read and see.

• Features section - As you scroll a little down, you can see the main benefits of the business. In this section I learned about logo integration and the grid.css system.

• Favorite meals section - Here comes the boom. Let the surfers visualize the menu so good so it can almost be tasted. In this section i grouped 4 pictures in separate 'ul' with the 'figure' element for each 'li'. CSS wise, i used the element 'transform' with the 'scale' attribute, the 'opacity' element and then the 'transition' element for both.

• How it works - So after we tempted out potantial costumers, we need to show them how things work and how they can enjoy our services. Here i learned about 'first child', 'last child' and 'last of type' selectors. I used again the grid.css system but for two in this case. P.S I have added background color of light gray for visual hierarchy.

• Cities - Show the cities branches of our restaurant. I practiced my new skill set, I learned how to align small icons with some text and how to style generic links.

• Testimonials - Very important section, to improve our credibility. I learned how to make a parallax background images with the 'background-attachment: fixed;' property and how to design beautifull customers testimonials. And ofcurse with alot of good practice of the basics.

• Sign-up/Pricing - Our customer need to make a decision (smart one) so we are giving him the details he need for that. I practiced some of the "old" tricks and learned some new one, such as box shadow and border radius.

• Form - We need to hear from our customers so we created the 'form' section. Here i learned how to make a solid form in HTML and how to "CSS" it with more specific targeting like: "input[type=checkbox] {}".

• Footer - Ofcurse we need to markup the finel part of our website with some memos. I did this section in a darker gray color for good seperation hierarchy. I make a color on hover effect for each social icon.

I finish with the CSS & HTML lactures and now I'll start making this website responsive with media queries and some optimizing while I learn new stuff.