Html Web Design

BCS-302EHTMLPROJECT.zip

Home >Computer Science homework help >Html Web Design

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.

alternative text

Delightful Courses
alternative text

Delicious Starters
alternative text

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

<h2>Text Input</h2>

<form>

First name:<br>

<br>

Last name:<br>

</form>

<p>Note that the form itself is not visible.</p>

<p>Also note that the default width of a text input field is 20 characters.</p>

2. Radio button

<h2>Radio Buttons</h2>

<form>

<input type="radio" name="gender" value="female"> Female<br>

<input type="radio" name="gender" value="other"> Other

</form>

3. Reset value

<h2>Reset Button</h2>

<p>The <strong>input type="reset"</strong> defines a reset button that will reset all form values to their default values:</p>

First name:<br>

<br>

Last name:<br>

</form>

<p>If you change the input values and then click the "Reset" button, the form-data will be reset to the default values.</p>

4. Check box

<h2>Checkboxes</h2>

<p>The <strong>input type="checkbox"</strong> defines a checkbox:</p>

<input type="checkbox" name="vehicle1" value="Bike">I have a bike

<br>

<input type="checkbox" name="vehicle2" value="Car">I have a car

</form>

5. Date field

<h2>Date Field</h2>

<p>The <strong>input type="date"</strong> is used for input fields that should contain a date.</p>

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

Birthday:

</form>

<p><strong>Note:</strong> type="date" is not supported in Safari or Internet Explorer 11 and earlier versions.</p>

6. <h2>Color Picker</h2>

<p>The <strong>input type="color"</strong> is used for input fields that should contain a color.</p>

<p>Depending on browser support:<br>A color picker can pop-up when you enter the input field.</p>

Select your favorite color:

</form>

<p><b>Note:</b> type="color" is not supported in Internet Explorer 11 and earlier versions or Safari 9.1 and earlier versions.</p>

7. Email Field

<h2>Email Field</h2>

<p>The <strong>input type="email"</strong> is used for input fields that should contain an e-mail address:</p>

E-mail:

</form>

<p>

<b>Note:</b>type="email" is not supported in IE9 and earlier.</p>

8. Month Field

<h2>Month Field</h2>

<p>The <strong>input type="month"</strong> allows the user to select a month and year.</p>

<p>Depending on browser support:<br>A date picker can pop-up when you enter the input field.</p>

Birthday (month and year):

</form>

<p><strong>Note:</strong> type="month" is not supported in Firefox, Safari, or Internet Explorer 11 and earlier versions.</p>

9. Number field

<h2>Number Field</h2>

<p>The <strong>input type="number"</strong> defines a numeric input field.</p>

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

Quantity (between 1 and 5):

</form>

<p><b>Note:</b> type="number" is not supported in IE9 and earlier.</p>

10. Number steps

<h2>Numeric Steps</h2>

<p>Depending on browser support:<br>Fixed steps will apply in the input field.</p>

Quantity:

<input type="number" name="quantity"

min="0" max="100" step="10" value="30">

</form>

<p><b>Note:</b>type="number" is not supported in IE9 and earlier.

</p>

11. Search Field

<h2>Search Field</h2>

<p>The <strong>input type="search"</strong> is used for search fields (behaves like a regular text field):</p>

Search Google:

</form>

<body>

12. Different images sizing

<h2>Show Different Images Depending on Browser Width</h2>

<p>Resize the browser width and the image will change at 600px and 1500px.</p>

</picture>

13. Media queries block of text to the left

<style>

* {

box-sizing:border-box;

}

.left {

background-color:#2196F3;

padding:20px;

float:left;

width:20%; /* The width is 20%, by default */

}

.main {

background-color:#f1f1f1;

padding:20px;

float:left;

width:60%; /* The width is 60%, by default */

}

.right {

background-color:#4CAF50;

padding:20px;

float:left;

width:20%; /* The width is 20%, by default */

}

/* Use a media query to add a break point at 800px: */

@media screen and (max-width:800px) {

.left, .main, .right {

width:100%; /* The width is 100%, when the viewport is 800px or smaller */

}

</style>

</head>

<body>

<h2>Media Queries</h2>

<p>Resize the browser window.</p>

<p>Make sure you reach the breakpoint at 800px when resizing this frame.</p>

</div>

<p>Main Content</p>

</div>

<p>Right Content</p>

</div>

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

<style>

* {

box-sizing: border-box;

}

.menu {

float:left;

width:20%;

text-align:center;

}

.menu a {

background-color:#e5e5e5;

padding:8px;

margin-top:7px;

display:block;

width:100%;

color:black;

}

.main {

float:left;

width:60%;

padding:0 20px;

}

.right {

background-color:#e5e5e5;

float:left;

width:20%;

padding:15px;

margin-top:7px;

text-align:center;

}

@media only screen and (max-width:620px) {

/* For mobile phones: */

.menu, .main, .right {

width:100%;

}

</style>

</head>

<h1>Hello World</h1>

</div>

</div>

<h2>Lorum Ipsum</h2>

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

</div>

<h2>About</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

</div>

<div style="background-color:#e5e5e5;text-align:center;padding:10px;margin-top:7px;">© copyright w3schools.com</div>

15. The divide element

<h2>London</h2>

<p>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.</p>

<p>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.</p>

</div>

16. Audio control

Your browser does not support the audio element.

</audio>

17 try it function

function myFunction() {

document.getElementById("demo").innerHTML = "Hello World!";

}

</script>

</head>

<body>

<p>When you click "Try it", a function will be called.</p>

<p>The function will display a message.</p>

</body>

</html>

<p>Click "Try it" to call a function with arguments</p>

function myFunction(name,job) {

document.getElementById("demo").innerHTML = "Welcome " + name + ", the " + job + ".";

}

</script>

18 vertical basic form

<head>

</head>

<body>

<h2>Vertical (basic) Form</h2>

<form>

<label for="email">Email:</label>

</div>

<label for="pwd">Password:</label>

</div>

<label><input type="checkbox"> Remember me</label>

</div>

<button type="submit" class="btn btn-default">Submit</button>

</form>

</div>

</body>

22. Log in option for your webpage

<HEAD>

function LogIn(){

loggedin=false;

alert("Correct")

username="";

password="";

username=prompt("Username: all lowercase 'username'","");

username=username.toLowerCase();

password=prompt("Password: all lowercase 'password'","");

password=password.toLowerCase();

if (username=="username" && password=="password") {

loggedin=true;

window.location=" http://www.nvcc.edu ";

}

if (loggedin==false) {

alert("Invalid login!");

window.location=" firstpage.html";

}

</SCRIPT>

</center>

Part 2

1. Change the color of a hyper link

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

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

<h3>Popover Example</h3>

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

<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>

</div>

$(document).ready(function(){

$('[data-toggle="popover"]').popover();

});

</script>

</body>

</html>

2. Drop down menu

<head>

<style>

.dropbtn {

background-color: #4CAF50;

color: white;

padding: 16px;

font-size: 16px;

border: none;

cursor: pointer;

}

.dropdown {

position: relative;

display: inline-block;

}

.dropdown-content {

display: none;

position: absolute;

background-color: #f9f9f9;

min-width: 160px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

z-index: 1;

}

.dropdown-content a {

color: black;

padding: 12px 16px;

text-decoration: none;

display: block;

}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {

display: block;

}

.dropdown:hover .dropbtn {

background-color: #3e8e41;

}

</style>

</head>

<body>

<h2>Dropdown Menu</h2>

<p>Move the mouse over the button to open the dropdown menu.</p>

<button class="dropbtn">Dropdown</button>

</div>

<p><strong>Note:</strong> We use href="#" for test links. In a real web site this would be URLs.</p>

3. Drop down with links

<head>

<style>

#navlist {

position: relative;

}

#navlist li {

margin: 0;

padding: 0;

list-style: none;

position: absolute;

top: 0;

}

#navlist li, #navlist a {

height: 44px;

display: block;

}

#home {

left: 0px;

width: 46px;

background: url('img_navsprites.gif') 0 0;

}

#prev {

left: 63px;

width: 43px;

background: url('img_navsprites.gif') -47px 0;

}

#next {

left: 129px;

width: 43px;

background: url('img_navsprites.gif') -91px 0;

}

</style>

</head>

<body>

</ul>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h2>Dropdowns</h2>

<p>The .dropdown class is used to indicate a dropdown menu.</p>

<p>Use the .dropdown-menu class to actually build the dropdown menu.</p>

<p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</p>

<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example

<li><a href="#">JavaScript</a></li>

</ul>

</div>

4. Popup drop down

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<head>

<title>Bootstrap Example</title>

</head>

<body>

<h3>Popover Example</h3>

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

<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>

</div>

$(document).ready(function(){

$('[data-toggle="popover"]').popover();

});

</script>

</body>

</html>

Images

5. Add text to image

<!DOCTYPE html>

<html>

<head>

<style>

.container {

position: relative;

}

.topright {

position: absolute;

top: 8px;

right: 16px;

font-size: 18px;

}

img {

width: 100%;

height: auto;

opacity: 0.3;

}

</style>

</head>

<body>

<h2>Image Text</h2>

<p>Add some text to an image in the top right corner:</p>

<div class="topright">Top Right</div>

</div>

</body>

</html>

6. Image with text next to it

<head>

<style>

img {

float: left;

}

</style>

</head>

<body>

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

Example of text .</p>

</body>

7. image with text to right next to it

<head>

<style>

img {

float: right;

}

</style>

</head>

<body>

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

Many text can be placed here as well as xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.</p>

</body>

8. radius image

<head>

<style>

img {

border-radius: 50%;

}

</style>

</head>

<body>

<h2>Rounded Images</h2>

<p>Use the border-radius property to create circled images:</p>

</body>

9. to have only 1 image change effect

<!Doctype html>

<html>

<head>

<title>First Page </title>

<a href="secondpage.html">Second Page Link</a>

<head>

<style>

#img1 {

float: right;

border-radius: 50%;

}

</style>

</head>

<body>

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

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.</p>

</head>

<head>

<style>

.container {

position: relative;

}

.topright {

position: absolute;

top: 8px;

right: 16px;

font-size: 18px;

}

img{

width: 100%;

height: auto;

opacity: 0.3;

}

#img1{

width: 100%;

height: auto;

opacity: 1.0;

}

</style>

</head>

<body>

<h2>Image Text</h2>

<p>Add some text to an image in the top right corner:</p>

<div class="topright">Top Right</div>

</div>

</body>

<body>

<p><center>My second lovely paragraph. We can make paragraphs forever.</center></p>

<h2>Insert Picture Below </h2>

<center>This text will be center-aligned.</center>

</body>

</html>

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

Webpage Code 5

1. Open a link new tab

<a href="https://www.w3schools.com" target="_blank">Visit W3Schools.com!</a>

2. Bootstrap 4

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

<h1>My First Bootstrap Page</h1>

<p>This part is inside a .container class.</p>

<p>The .container class provides a responsive fixed width container.</p>

<p>Resize the browser window to see that its width (max-width) will change at different breakpoints.</p>

</div>

</body>

</html>

3. Bootstrap containing

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

<h1>My First Bootstrap Page</h1>

<p>This part is inside a .container-fluid class.</p>

<p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>

</div>

</body>

</html>

4. Bootstrap column color

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

<h1>My First Bootstrap Page</h1>

<p>This container has a border and some extra padding and margins.</p>

</div>

<h1>My First Bootstrap Page</h1>

<p>This container has a dark background color and a white text, and some extra padding and margins.</p>

</div>

<h1>My First Bootstrap Page</h1>

<p>This container has a blue background color and a white text, and some extra padding and margins.</p>

</div>

</body>

</html>

5. Responsive Containers Resize the browser window to see the effect.

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

<h1>Responsive Containers</h1>

<p>Resize the browser window to see the effect.</p>

</div>

<div class="container-sm border">.container-sm</div>

<div class="container-md mt-3 border">.container-md</div>

<div class="container-lg mt-3 border">.container-lg</div>

<div class="container-xl mt-3 border">.container-xl</div>

</body>

</html>

6. Three equal width columns

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

<h1>Three equal width columns</h1>

<p>Note: Try to add a new div with class="col" inside the row class - this will create three equal-width columns.</p>

</div>

</body>

</html>

7. Responsive Columns

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

<h1>Responsive Columns</h1>

<p>Resize the browser window to see the effect.</p>

<p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>

</div>

</body>

</html>

8. Hover Rows table

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

<h2>Hover Rows</h2>

<p>The .table-hover class enables a hover state (grey background on mouse over) on table rows:</p>

<thead>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Email</th>

</tr>

</thead>

<tbody>

<tr>

<td>john@example.com</td>

</tr>

<tr>

<td>mary@example.com</td>

</tr>

<tr>

<td>Dooley</td>

<td>july@example.com</td>

</tr>

</tbody>

</table>

</div>

</body>

</html>

9. Hover table with color

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

<h2>Hoverable Dark Table</h2>

<p>The .table-hover class adds a hover effect (grey background color) on table rows:</p>

<thead>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Email</th>

</tr>

</thead>

<tbody>

<tr>

<td>john@example.com</td>

</tr>

<tr>

<td>mary@example.com</td>

</tr>

<tr>

<td>Dooley</td>

<td>july@example.com</td>

</tr>

</tbody>

</table>

</div>

</body>

</html>

10. Simple collapse

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Example</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<h2>Simple Collapsible</h2>

<a href="#demo" class="btn btn-primary" data-toggle="collapse">Simple collapsible</a>

<div id="demo" class="collapse">

This is the promotion we wish to offer our most valuable members .

</div>

</body>

</html>

11. accordion example

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

<h2>Accordion Example</h2>

<p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>

Collapsible Group Item #1

</a>

</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

</div>

Collapsible Group Item #2

</a>

</div>

</div>

Collapsible Group Item #3

</a>

</div>

</div>

</body>

</html>

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

Webpage 6 Nav

1. Toggled tabs

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

<br>

<h2>Toggleable Tabs</h2>

<br>

</li>

</li>

</li>

</ul>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

</div>

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

</div>

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>

</div>

</body>

</html>

2. Brand and logo nav bar

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

</li>

</li>

</li>

</ul>

</nav>

<h3>Brand / Logo</h3>

<p>The .navbar-brand class is used to highlight the brand/logo/project name of your page.</p>

</div>

</body>

</html>

3. Brand and logo

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

</a>

</li>

</li>

</li>

</ul>

</nav>

<h3>Brand / Logo</h3>

<p>When using the .navbar-brand class on images, Bootstrap 4 will automatically style the image to fit the navbar.</p>

</div>

</body>

</html>

4. Collapse nav bar

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

<a class="navbar-brand" href="#">Navbar</a>

</button>

</li>

</li>

</li>

</ul>

</div>

</nav>

<br>

<h3>Collapsible Navbar</h3>

<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).</p>

<p>Only when the button is clicked, the navigation bar will be displayed.</p>

<p>Tip: You can also remove the .navbar-expand-md class to ALWAYS hide navbar links and display the toggler button.</p>

</div>

</body>

</html>

5. Nav bar with drop down

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

</li>

</li>

Dropdown link

</a>

</div>

</li>

</ul>

</nav>

<br>

<h3>Navbar With Dropdown</h3>

<p>This example adds a dropdown menu in the navbar.</p>

</div>

</body>

</html>

6. Nav bar with form with buttons

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

<button class="btn btn-success" type="submit">Search</button>

</form>

</nav>

<br>

<h3>Navbar Forms</h3>

<p>Use the .form-inline class to align form elements side by side inside the navbar.</p>

</div>

</body>

</html>

7. Fix nav bar scroll up and down

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

</head>

</li>

</li>

</ul>

</nav>

<h3>Top Fixed Navbar</h3>

<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>

<h1>Scroll this page to see the effect</h1>

</div>

</body>

</html>

8. Sticky nav bar

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

</head>

<br>

<h3>Sticky Navbar</h3>

<p>A sticky navigation bar stays fixed at the top of the page when you scroll past it.</p>

<p>Scroll this page to see the effect. <strong>Note:</strong> sticky-top does not work in IE11 and earlier.</p>

</div>

</li>

</li>

</ul>

</nav>

<p>Some example text. Some example text. Some example text. Some example text. Some example text.</p>

</div>

</body>

</html>

Html Web Design

BCS-302E MIDTERM PROJECT/HTML FA 2021.xlsx

Sheet1

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

Welcome to KARA Restaurant

Delightful Courses

Delicious Starters

Traditional Drinks

Contact Us

About Our Company

BCS-302E MIDTERM PROJECT/menu.html

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

Start Simple with MyPlate

BCS-302E MIDTERM PROJECT/Project Requirentments.docx

BCS-302E MIDTERM PROJECT/style.css

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

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

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

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