Introduction: In this task, we are going to create a website for online food ordering system for South-East Eat Street. We will use HTML5 and CSS3 to create this website. Our main focus of this website is the functionality. So we will try to make easier website for customer to browse and order something in easiest way. Also we will put every information about our dishes. For example: In Indian food which type of dishes are there and description of every dishes in details, so customer can easily order something as per their need. Also we will include opening hours, so customer can check easily. Also we will setup our front page of website with the map, so customer can easily check where the particular shop for the particular country food. In this website, we will add four countries food. Further Details I will add in next portfolio 1.1 to 1.6. Portfolio 1.1(Chapter1): Site title: South East-Eat Street Developer: Yagnikkumar Hirabhai Sutariya ID: 12030204 Course: Responsive Web Design (COIT20268) Focus: Our main goal in this website to make a responsive and easy website which is useful for every age of person in easiest way. Main Features: we can get the information about every dishes with price. Also we can from any page to the any other countries food. For this functionality we are going to use menu bar. Target Audience: Mainly our goal is to be satisfy the requirement for all types of people. For Example: Old people, Young People etc. Limiting Factors: In this current website you cannot order anything. Right now you can just browse the website and get the information about every dishes and prices as well. Portfolio 1.2(Chapter2): 1. Basic Design For Homepage of Website: Fig1: Homepage of Website Description: In this above figure, I draw basic diagram for my website about South-East Eat Street. In this Page, I put one map about Direction of Food street with country name. This all country name are clickable, so you can click on any name and you can go to the food list of that Country. Also in the Left Corner of the Website, I put Opening Hours tab. So Customer can find opening hours easily. 2. Webpage For All Particular Country Food: Fig2: Country Food List Description: In this page, customer can find food list of particular country. Also we have one menu on top of the website in header. So customer can go back and directly go on other page as well. Also customer can find the food name with images. 3. Webpage For Food Description with Price: Fig3: Food Description Page Description: In this Page, customer can find all description about food item. Also customer can find price of the food as well. So it is easy for the customer to what to choose with description of item. Portfolio 1.3(Chapter3): • Flowchart Of Webpage: In Below Three Figure, User can see the flow of the site. In First Page User find map of South-East Eat Street, Country name, Opening hours, Menu Bar. In Second Page, User can find the List of Particular Country food name with images. In Last Page, User can find the Particular Items details with price. We can see that, we included the menu Bar in the header of the website which is work as a forward and backward button. Because of Our site should be compatible with all device and brows Figure 1: Homepage Figure 2: Country Food Page Figure 3: Food Description Page • Goal of This Site: Our main focus in this site to create a responsive web design which is helpful for all age of people. Also every page is responsive, so you can go on any page from any other page with menu option. Also I will try to manage my space. Also we will use limited and very basic font for website. So Customer will be never irritated with fonts. Also all image size will not so much bigger, so it will not take so much space. Portfolio1.4(Chapter4): We know that, it is challenging to create cascading style sheet(css3), But In this website we will create a one css file which included all typography, colours, background, fonts, white spaces, borders etc. then we will save this css file in one folder and then we will link with html page according their requirement. For Example: In this website we created one css file which name is style. In this file we already included all the requirements which we need to create good website. • Class List for Body, Header and Footer: i) Class for Body: .outerDiv { width:1000px; margin-left:auto; margin-right:auto; } ii) Class for Header: .header { font-family: Papyrus,fantasy; height:70px; background-color:#373a3c; color: rgba(255,255,255,.75); text-shadow: 1px 1px 0.5px #FFF; font-size:32px; font-weight:bold; } .header_left { float:left; padding:9px; padding-left:220px; } .header_right { float:right; } .content{ //box-shadow: 0px 1px 5px 1px rgba(0,0,0,0.75); border:1px solid #B3B3B3; clear: both; overflow:auto; position:relative; } .product-card { margin-left: 4%; margin-right: 4%; margin-bottom: 8% !important; } .px-0 { padding-right: 0 !important; padding-left: 0 !important; } .card { position: relative; display: block; margin-bottom: 1rem; background-color: #fff; border-radius: .25rem; border: 1px solid rgba(0,0,0,.125); background-color:#F2F2F3; } .col-lg-3 { width: 100%; overflow: auto } .card-block { padding: 5px; text-align:center; } .img-set { max-width: 100%; height: auto; vertical-align: middle; border-style: none; } .product-title { cursor:pointer; transition:0.4s; } .product-title:hover{ color:#1D35EB; } .description { float:left; text-align:left; width:49%; } .opening { position:fixed; left:10px; bottom:10px; width:200px; } #timeline_bar { padding: 0; list-style: none; position: absolute; top: 30; bottom: 0; left: 49%; width: 15px; background-color: #3B3C3B; // border-radius: 10px; z-index:2; } .leftTable { float:left; width:50%; border-collapse: collapse; } .rightTable { float:right; width:50%; border-collapse: collapse; } .row { padding: 35px; clear: both; overflow:auto; } .col-sm-7 { float: left; width: 47%; padding-left:4%; } .col-sm-5 { color:#373a3c ; font-weight:normal; border-bottom: 1px dashed #999; } .about { border:1px solid #999; border-radius:5px; padding:10px; } .price { background-color:#ddd; padding:5px; } .country_link { padding:5px; position:absolute; left:10px; top:10px; background-color:#ddd; transition:0.5s; border-radius:2px; } .country_link:hover{ background-color:#B6B6B6; color:black; } .openingH { width:400px; border:1px solid #ddd; box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.75); } Portfolio1.5(Chapter5): 1. What will be the typefaces and styles for the body type and headings? Answer: A design for a set of characters. Popular typefaces include Times Roman, Helvetica, and Courier. The typeface represents one aspect of a font. The font also includes such characteristics as size, weight, italics, and so on. There are two general categories of typefaces: serif and sans serif. Sans serif typefaces are composed of simple lines, whereas serif typefaces use small decorative marks to embellish characters and make them easier to read. Helvetica is a sans serif type and Times Roman is a serif type. In styles we can use line-height. For Example, color: #217969; font-family: 'Helvetica Neue', sans-serif; font-style: italic; font-weight: normal; letter-spacing: normal; text-transform: none. 2. How many levels of headings are necessary? Answer: HTML defines six levels of headings. A heading element implies all the font changes, paragraph breaks before and after, and any white space necessary to render the heading. The heading elements are H1, H2, H3, H4, H5, and H6 with H1 being the highest (or most important) level and H6 the least. 3. What are the different weights and sizes of the headings? Answer: h1 { font-size: 2em; font-weight: bold; } h2 { font-size: 1.5em; font-weight: bold; } h3 { font-size: 1.17em; font-weight: bold; } h4 { font-weight: bold; } h5 { font-size:0.83em; font-weight: bold;} h6 { font-size: 0.67em; font-weight: bold;} 4. How will text be emphasized? Answer: Many attributes we can used for emphasize our website. We can use colours, fonts, weight, height, margin, padding, border, spacing etc. 5. How will you ensure the legibility and readability of your text? Answer: Generally legibility and readability are using for text size and fonts. This both things depends on, how much our website are responsive with this customize fonts. For Example. If we have some customize fonts in our website. May be it can occur error with some browser or may be it will take longer time to open website. Portfolio1.6(Chapter6): • Description of Box Convention: For every programmer, they have to use the space in logical way. If we are going to make a website, we have to aware about our spacing technique. That time html gives you one good direction towards your work, it is called box convention. In box convention we can create a one model box for particular content. But it is not enough for every content. We need some extra padding, margin and border as well. Padding means if we want some space in box before every line. Margin means we can put some space on outer side of the box as well and Border means particular line which we will use to create a box. For Example, in our website, we already used box convention in many page. In Every page of Country food we can find the box convention. Figure 4: Box convention Conclusion: In this Website, We already tried to create a responsive web design which is help full for every age of people to find food of particular countries. Also this compatible with all type of device and browsers. Also we used specific fonts, colour, borders, and images. So it is easy for every customer. But in this Website, We are not able to order online. References: Thomas, P 2010, ‘html and css the complete reference 5/e’. Whitworth, D 2001, ‘html programmer’s reference.