Html Web Design Need help for coding. Here are the example files and requirentment files BCS-302E MIDTERM PROJECT/HTML FA 2021.xlsx Sheet1 Item Desc

Html Web Design Need help for coding. Here are the example files and requirentment files BCS-302E MIDTERM PROJECT/HTML FA 2021.xlsx

Sheet1

Item Description below. Note you can have as many codes as you want in the project to make it look the way you want it but only 5 will be counted towards the grade for each code used Quantity max 5 code per line counted towards project grade Points do not change point value Total Page Students place information below identify which page the code is located

Create an additional 3 pages minimal 6 pages total including the mid term pages. this part will be graded on presentation layout and look. Your web page should include text, images, buttons, links
There should be no “getting stuck” on any screen. It should always be possible to navigate from a screen in your web page to some other screen.
Your program code should follow good style.
Your page should have a background color or image that does not block the view of the page. Your user interface should be intuitive to use. You can add codes to your mid term pages as well to edit enhance those pages. You need to list the page in which you added the code. You can name your pages anything you feel is approriate make it consistent through our your site 3 10 30 place the information as to where the code is example page 1-3

HTML Code Example Part 4 required at least 3 of the following 1-22 codes from the word document list below any of codes to create a sign up page for new customers. You can use more and you pick which ones

Example text input 1 10 10 page 5

example radio button 1 10 10 page 3 notice you can add to your mid term pages as well

example field code 1 10 10 page 2

list the code you want to add and the quantities next to cloumn 1 10 10

list the code you want to add and the quantities next to cloumn 1 10 10

list the code you want to add and the quantities next to cloumn 1 10 10

Webpage Code 5 required at least 3of the following 1-11 codes list below You can use more and you pick which ones

Example Open a link new tab 1 10 10 page 4

Example Bootstrap containing 1 10 10 page 5

list the code you want to add and the quantities next to cloumn 1 10 10 page 6 , 2, 3

list the code you want to add and the quantities next to cloumn 1 10 10

list the code you want to add and the quantities next to cloumn 1 10 10

list the code you want to add and the quantities next to cloumn 1 10 10

list the code you want to add and the quantities next to cloumn 1 10 10

Webpage Code 6 required at least 3 any of the codes listed in the document 1-8. You can use more and you pick which ones

Exaample toggled tabs 1 10 10 page 4

example brand and logo nav bar 1 10 10 page 5

list the code you want to add and the quantities next to cloumn 1 10 10 page 6

list the code you want to add and the quantities next to cloumn

Use any code from web page code examples 1 – 3 at your discretion

list the code you want to add and the quantities next to cloumn 5 10 50 page 4

list the code you want to add and the quantities next to cloumn 2 10 20 page 5

list the code you want to add and the quantities next to cloumn 1 10 10 page 6

list the code you want to add and the quantities next to cloumn 1 10 10 page 4

list the code you want to add and the quantities next to cloumn 1 10 10 page 5

list the code you want to add and the quantities next to cloumn 1 10 10 page 6

Total 300

BCS-302E MIDTERM PROJECT/img.zip

img/chicken kebab.jpg

img/IMG_8975.jpg

img/IMG_9136_2.jpg

img/IMG_9263_2.jpg

img/KARA-Restaurant-Drinks.jpg

img/Kara-restaurant-lamb-shank.jpg

img/KARA-Restaurant-Starters.jpg

img/KARA-Turkish-Restaurant.jpg

img/turkish-mediterian-Menu.jpg

BCS-302E MIDTERM PROJECT/img/chicken kebab.jpg

BCS-302E MIDTERM PROJECT/img/chicken_kebab.jpg

BCS-302E MIDTERM PROJECT/img/IMG_8975.jpg

BCS-302E MIDTERM PROJECT/img/IMG_9136_2.jpg

BCS-302E MIDTERM PROJECT/img/IMG_9263_2.jpg

BCS-302E MIDTERM PROJECT/img/iskender-kebab.png

BCS-302E MIDTERM PROJECT/img/KARA-Restaurant-Drinks.jpg

BCS-302E MIDTERM PROJECT/img/Kara-restaurant-lamb-shank.jpg

BCS-302E MIDTERM PROJECT/img/KARA-Restaurant-Starters.jpg

BCS-302E MIDTERM PROJECT/img/KARA-Turkish-Restaurant.jpg

BCS-302E MIDTERM PROJECT/img/turkish-mediterian-Menu.jpg

BCS-302E MIDTERM PROJECT/index.html

Home | Menu | Contact
Welcome to KARA Restaurant

The Oxus, also know as the Amu Darya is a major river that flows through multiple countries in Southwest Asia and is considered to be the union of cultures. The river is a symbol of the world’s melting pot, knowing no borders, flags, nor barriers.

We aim to cook our dishes with the same lesson the river teaches us. Our food features fragrant flavors of Mediterranean & Turkish Cuisine.

Delightful Courses

Delicious Starters

Traditional Drinks

Contact Us

If you have any questions you can reach us anytime.

ekara201@wuv.edu

(703)478-4393

About Our Company

There are many award-winning dining places around the DMW area to get impeccable food and service, but sometimes you want a little more from your meal. For a truly memorable dining experience, visit our authentic restaurant around the comfort and savor more than the delicious entrees.

Copyright: This site is intended for educational purposes only. All information on this website is used for practicing HTML code.

Project By Elcin Kara Media

BCS-302E MIDTERM PROJECT/menu.html

Home | Menu | Contact
OUR MENU

Rain or shine, it’s time to dine.

Lamb Shank $18.99

Chicken Kebab $15.99

Adana Kebab $17.99

Grape Leaves $7.99

Ezme $8.99

Lentil Soup $5.99

Contact Us

If you have any questions you can reach us anytime.

ekara201@wuv.edu

(703)478-4393

Start Simple with MyPlate

The benefits of healthy eating add up over time, bite by bite. Small changes matter. Start Simple with MyPlate.

Read More

Copyright: This site is intended for educational purposes only. All information on this website is used for practicing HTML code.

Project By Elcin Kara Media

BCS-302E MIDTERM PROJECT/Project Requirentments.docx
· Your web page should include text, images, buttons, links

· There should be no “getting stuck” on any screen.It should always be possible to navigate from a screen in your web page

· to some other screen.

· Your program code should follow good style.

· Your page should have a background color or image that does not block the view of the page

· Your user interface should be intuitive to use.

On Excel Sheet

1. You need to list the codes you used under cell B starting after number 4 examples in red.

2. The quantity of codes under cell C examples in red max 5 per code. Meaning you can have 20 images codes or any other codes multiple times through out your site but only 5 will be counted in the final. Mid term is separate and graded.

3. The page you added the code. under cell F examples in red

The formulas are already in place in the spreadsheet and will compute automatically.

Items in red are ones you can place at your own discretion.

BCS-302E MIDTERM PROJECT/style.css
/* Core Styles */

body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background: #333;
color: #fff;
font-size: 1.1em;
line-height: 1.5;
text-align: center;
}

img {
display: block;
width: 100%;
height: auto;
}

h1,
h2,
h3 {
margin: 0;
padding: 1em 0;
}

p {
margin: 0;
padding: 1em 0;
}

.btn {
display: inline-block;
background: #333;
color: #fff;
text-decoration: none;
padding: 1em 2em;
border: 1px solid #666;
margin: 0.5em 0;
}

.btn:hover {
width: 50px;
height: 40px;
background: blue;
transition: width 0.5s;
background: #eaeaea;
color: #4863A0;
}

/* Header Showcase */

#showcase {
min-height: 450px;
color: #fff;
text-align: center;
}

#showcase .bg-image {
position: absolute;
background: #333
url(“img/turkish-mediterian-Menu.jpg”);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 450px;
z-index: -1;
opacity: 0.4;
}

#showcase h1 {
padding-top: 100px;
padding-bottom: 0;
}

#showcase .content-wrap,
#section-a .content-wrap {
padding: 0 1.5em;
}

/* Section A */

#section-a {
background: #eaeaea;
color: #333;
padding-bottom: 2em;
}

/* Section B */

#section-b {
padding: 2em 1em 1em;
}

#section-b ul {
list-style: none;
margin: 0;
padding: 0;
}

#section-b li {
margin-bottom: 1em;
background: #fff;
color: #333;
}

.card-content {
padding: 1.5em;
}

/* Section C */

#section-c {
background: #fff;
color: #333;
padding: 2em;
}

/* Section D / Boxes */

#section-d .box { border: 0.5rem outset white;
margin: 1rem;
padding: 1em;
color: #fff;
}

#section-d .box:first-child {
background: #2690d4;
}

/* Footer */

#main-footer {
padding: 2em;
background: #000;
color: #fff;
text-align: center;
}

#main-footer a {
color: #2690d4;
text-decoration: none;
}

/* Media Queries */

@media (min-width: 700px) {
.grid {
display: grid;
grid-template-columns: 1fr repeat(2, minmax(auto, 25em)) 1fr;
}

#section-a .content-text {
columns: 2;
column-gap: 2em;
}

#section-a .content-text p {
padding-top: 0;
}

.content-wrap,
#section-b ul {
grid-column: 2/4;
}

.box,
#main-footer div {
grid-column: span 2;
}

#section-b ul {
display: flex;
justify-content: space-around;
}

#section-b li {
width: 31%;
}
}

BCS-302E MIDTERM PROJECT/Word Documents/HTML Code Example Part 4.docx

HTM Code Example Part 4

1.
Text input

Text Input

First name:

Last name:

Note that the form itself is not visible.

Also note that the default width of a text input field is 20 characters.

2.
Radio button

Radio Buttons

Male

Female

Other

3.
Reset value

Reset Button

The input type=”reset” defines a reset button that will reset all form values to their default values:

First name:

Last name:

If you change the input values and then click the “Reset” button, the form-data will be reset to the default values.

4.
Check box

Checkboxes

The input type=”checkbox” defines a checkbox:

I have a bike

I have a car

5.
Date field

Date Field

The input type=”date” is used for input fields that should contain a date.

Depending on browser support:
A date picker can pop-up when you enter the input field.

Birthday:

Note: type=”date” is not supported in Safari or Internet Explorer 11 and earlier versions.

6.

Color Picker

The input type=”color” is used for input fields that should contain a color.

Depending on browser support:
A color picker can pop-up when you enter the input field.

Select your favorite color:

Note: type=”color” is not supported in Internet Explorer 11 and earlier versions or Safari 9.1 and earlier versions.

7. Email Field

Email Field

The input type=”email” is used for input fields that should contain an e-mail address:

E-mail:

Note:type=”email” is not supported in IE9 and earlier.

8. Month Field

Month Field

The input type=”month” allows the user to select a month and year.

Depending on browser support:
A date picker can pop-up when you enter the input field.

Birthday (month and year):

Note: type=”month” is not supported in Firefox, Safari, or Internet Explorer 11 and earlier versions.

9. Number field

Number Field

The input type=”number” defines a numeric input field.

You can use the min and max attributes to add numeric restrictions in the input field:

Quantity (between 1 and 5):

Note: type=”number” is not supported in IE9 and earlier.

10. Number steps

Numeric Steps

Depending on browser support:
Fixed steps will apply in the input field.

Quantity:

Note:type=”number” is not supported in IE9 and earlier.

11. Search Field

Search Field

The input type=”search” is used for search fields (behaves like a regular text field):

Search Google:

12.
Different images sizing

Show Different Images Depending on Browser Width

Resize the browser width and the image will change at 600px and 1500px.

Flowers

13.
Media queries block of text to the left

Media Queries

Resize the browser window.

Make sure you reach the breakpoint at 800px when resizing this frame.

Left Menu

Main Content

Right Content

14.
Response Web page size changes with view of page max middle

Hello World

Lorum Ipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

About

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

© copyright w3schools.com

15.
The divide element

London

LA is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

16.
Audio control

17 try it function

When you click “Try it”, a function will be called.

The function will display a message.

Click “Try it” to call a function with arguments

18 vertical basic form

Vertical (basic) Form

22.
Log in option for your webpage

Part 2

1. Change the color of a hyper link

NOVA.EDU

How to add a submit button and have it link to another page.

Below replace page1.html with the page you want it to link

BCS-302E MIDTERM PROJECT/Word Documents/HTML Code Examples Drop downs and Images Part 3 (2).docx

Drop downs and Images

1. Popover links

Bootstrap Example

Popover Example

Popovers are not CSS-only plugins, and must therefore be initialized with jQuery: select the specified element and call the popover() method.

Toggle popover

2. Drop down menu

Dropdown Menu

Move the mouse over the button to open the dropdown menu.

Note: We use href=”#” for test links. In a real web site this would be URLs.

3. Drop down with links

Dropdowns

The .dropdown class is used to indicate a dropdown menu.

Use the .dropdown-menu class to actually build the dropdown menu.

To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle=”dropdown”.

4. Popup drop down

Bootstrap Example

Popover Example

Popovers are not CSS-only plugins, and must therefore be initialized with jQuery: select the specified element and call the popover() method.

Toggle popover

Images

5. Add text to image

Image Text

Add some text to an image in the top right corner:

Cinque Terre

Top Right

6. Image with text next to it

In this example, the image will float to the left in the paragraph, and the text in the paragraph will wrap around the image.

Pineapple

Example of text .

7. image with text to right next to it

In this example, the image will float to the right in the paragraph, and the text in the paragraph will wrap around the image.

Pineapple

Many text can be placed here as well as xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.

8. radius image

Rounded Images

Use the border-radius property to create circled images:

Paris

9. to have only 1 image change effect

First Page

Second Page Link

In this example, the image will float to the left in the paragraph, and the text in the paragraph will wrap around the image.

Image1

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.

Image Text

Add some text to an image in the top right corner:

Cinque Terre

Top Right

alternative text

My second lovely paragraph. We can make paragraphs forever.

This is some text! Yes I can

Insert Picture Below

alternative text

This text will be center-aligned.

BCS-302E MIDTERM PROJECT/Word Documents/Webpage Code 5.docx

Webpage Code 5

1. Open a link new tab

Visit W3Schools.com!

2. Bootstrap 4

Bootstrap Example

Looking for this or a Similar Assignment? Click below to Place your Order