I need help creating a website related to computer science. Thanks Create a webs
ID: 3804421 • Letter: I
Question
I need help creating a website related to computer science. Thanks
Create a website for your topic of choice: 1main page (index.html) with multiple sections 1 + more page with at least 2 sections 1 form 1 table to display data relevant to your topic 1 + -css file with your style (link to it for uniform look & feel) 1 + media query to adjust style based on screen size 1 + js file with your javascript 1 navigation bar with links to all other pages/sections within your site Include at least 1 image in your site (either as background or just as an image that is relevant to your site's content) Include either audio or video with controls so the user can choose to play or not Use a Button to submit the form content. You can use action:mailto to send via email, or for extra credit you can use javascript to store the data Use Javascript for your form to assure the required input is not empty/invalid 1 alert() when the form is not filled correctly Modify the style of invalid input so the user will see it and correct their inputExplanation / Answer
you have to download bootstrap jquery
I alredy developed the one html site as my roject and your requiremetn fits with this so i am shiaring this it will help you to learn
you have to download bootstrap jquery
I alredy developed the one html site as my roject and your requiremetn fits with this so i am shiaring this it will help you to learn
<!DOCTYPE html>
<!-- saved from url=(0077)https://d396qusza40orc.cloudfront.net/phoenixassets/web-frameworks/index.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ristorante Con Fusion</title>
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="css/bootstrap-social.css" rel="stylesheet">
<link href="css/mystyle.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--<a class="navbar-brand" href="index.html">Ristorante Con Fusion</a>-->
<a class="navbar-brand" href="#"><img src="img/img/logo.png" height=30 width=41></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html"><span class="glyphicon glyphicon-home"
aria-hidden="true"></span> Home</a></li>
<li><a href="AboutUs.html"><span class="glyphicon glyphicon-info-sign" area-hidden="true" > </span> About</a></li>
<!--<li><a href="#">Menu</a></li>-->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-list-alt" area-hidden="true"></span>
Menu <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Appetizers</a></li>
<li><a href="#">Main Courses</a></li>
<li><a href="#">Desserts</a></li>
<li><a href="#">Drinks</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Specials</li>
<li><a href="#">Lunch Buffet</a></li>
<li><a href="#">Weekend Brunch</a></li>
</ul>
</li>
<li><a href="contactus.html"><i class="fa fa-envelope-o"></i> Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a id="login" >
<span class="glyphicon glyphicon-log-in" ></span> Login</a>
</li>
</ul>
<!--<form class="form-inline" role="search">
<div class="form-group">
<input type="text" class="form-control" name="username" placeholder="Username">
</div>
<div class="form-group">
<input type="text" class="form-control" name="password" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Sign In</button>
</form>-->
</div>
</div>
</nav>
<!-- Login model starts-->
<div id="loginModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Login </h4>
</div>
<div class="modal-body">
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="email">Email address</label>
<input type="email" class="form-control input-sm" id="email" name="email" placeholder="Email"/>
</div>
<div class="form-group">
<label class="sr-only" for="password">Password</label>
<input type="password" class="form-control input-sm" id="password" name="password" placeholder="Password"/>
</div>
<div class="checkbox">
<label >
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-info btn-xs">Sign In</button>
<button type="button" class="btn btn-default btn-xs" data-dismiss="modal">Cancel</button>
</form>
</div>
</div>
</div>
</div>
<!-- Login model ends-->
<!-- Reserve table starts here -->
<div id="Reservetable" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Reserve Table </h4>
</div>
<div class="modal-body">
<form class="form-horizontal click" role="form" id="form" >
<div class="form-group">
<label class="control-label col-sm-2 " for="numberOfGuest" ><span>Number</span><br><span> Of Guests</span></label>
<div class="col-sm-7">
<label class="form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>
<label class="form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 4
</label>
<label class="form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 5
</label>
<label class="form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 6
</label>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2 " for="numberOfGuest" ><span>Section</span></label>
<div class="col-sm-7">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success active">
<input type="radio" name="options" id="option1" autocomplete="off" checked>Non-Smocking
</label>
<label class="btn btn-danger">
<input type="radio" name="options" id="option3" autocomplete="off">Smocking
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2 " for="numberOfGuest" ><span>Date and</span><br><span> Time</span></label>
<div class="col-sm-3">
<div class="form-group has-feedback >
<label class="controlabel" for="inputSuccess4"></label>
<input type="text" class="form-control" id="date" placeholder="Date">
<span class="glyphicon glyphicon-calendar form-control-feedback"></span>
</div>
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-3">
<div class="form-group has-feedback >
<label class="control-label" for="inputSuccess4"></label>
<input type="text" class="form-control" id="time" placeholder="Time">
<span class="glyphicon glyphicon-time form-control-feedback"></span>
</div>
</div>
</div>
<div class="form-group " >
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-primary" id="btn" >Reserve</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
<div class="form-group col-xs-offset-1 " >
<div class="alert alert-warning ">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Warning!</strong> Please<a href="#"> <b>Call</b> </a>us to reserve more than six guests
</div>
</div>
<!--<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-time"></span></span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>-->
</form>
<!--
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="email">Email address</label>
<input type="email" class="form-control input-sm" id="email" name="email" placeholder="Email"/>
</div>
<div class="form-group">
<label class="sr-only" for="password">Password</label>
<input type="password" class="form-control input-sm" id="password" name="password" placeholder="Password"/>
</div>
<div class="checkbox">
<label >
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-info btn-xs">Sign In</button>
<button type="button" class="btn btn-default btn-xs" data-dismiss="modal">Cancel</button>
</form>
-->
</div>
</div>
</div>
<!-- reserve table ends here -->
</div>
<header class="jumbotron">
<!-- Main component for a primary marketing message or call to action -->
<div class= "container" >
<div class="row row-header">
<div class="col-xs-12 col-sm-8" >
<h1>Ristorante con Fusion</h1>
<p></p>
<p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our lipsmacking creations will tickle your culinary senses!</p>
</div>
<div class="col-xs-12 col-sm-2">
<p></p>
<img src="img/img/logo.png" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-2">
<p></p>
<!-- add this for tooltip data-toggle="tooltip" title="Or Call us at +852 123456789" data-placement="bottom" -->
<a href="#form" class="btn btn-warning" id="table" >Reserve Table</a>
</div>
</div>
</div>
</header>
<div class="container">
<!-- row for carosole -->
<div class="row row-content">
<div class="col-xs-12">
<!-- indicator -->
<ol class="carousel-indicators">
<li data-target="#mycarousel" data-slide-to="0" class="active"></li>
<li data-target="#mycarousel" data-slide-to="1"></li>
<li data-target="#mycarousel" data-slide-to="2"></li>
</ol>
<!-- for adding carosole use following div-->
<div id="mycarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="img-responsive"
src="img/img/uthappizza.png" alt="Uthappizza">
<div class="carousel-caption">
<h2>Uthappizza <span class="label label-danger">Hot</span> <span class="badge">$4.99</span></h2>
<p>A unique combination of Indian Uthappam (pancake) and
Italian pizza, topped with Cerignola olives, ripe vine
cherry tomatoes, Vidalia onion, Guntur chillies and
Buffalo Paneer.</p>
<p><a class="btn btn-primary btn-xs" href="#">More »</a></p>
</div>
</div>
<div class="item">
<img class="img-responsive"
src="img/img/buffet.png" alt="buffet">
<div class="carousel-caption">
<h2>Weekend Grand Buffet <span class="label label-danger label-xs">New</span></h2>
<p>Featuring mouthwatering combinations with a choice of five different salads, six enticing appetizers, six main entrees and five choicest desserts. Free flowing bubbly and soft drinks. All for just $19.99 per person </p>
<p><a class="btn btn-primary btn-xs" href="#">More »</a></p>
</div>
</div>
<div class="item">
<img class="img-responsive"
src="img/img/alberto.png" alt="Alberto Somayya">
<div class="carousel-caption">
<h2>Alberto Somayya</h2>
<h4>Executive Chef</h4>
<p>Award winning three-star Michelin chef with wide
International experience having worked closely with
whos-who in the culinary world, he specializes in
creating mouthwatering Indo-Italian fusion experiences.
</p>
<p><a class="btn btn-primary btn-xs" href="#">More »</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#mycarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<div class="btn-group" id="carouselButtons">
<button class="btn btn-danger btn-xs" id="carousel-pause">
<span class="glyphicon glyphicon-pause" aria-hidden="true"></span>
</button>
<button class="btn btn-danger btn-xs" id="carousel-play">
<span class="glyphicon glyphicon-play" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
<!-- carosole ends here-->
<div class="row row-content">
<div class="col-xs-12 col-sm-3 col-sm-push-9">
<p></p>
<h3 align="center">Our Lipsmacking Culinary Creations</h3>
</div>
<div class="col-xs-12 col-sm-9 col-sm-pull-3">
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-thumbnail"
src="img/img/uthappizza.png" alt="Uthappizza">
</a>
</div>
<div class="media-body">
<h2 class="media-heading">Uthappizza <span class="label label-danger">Hot</span> <span class="badge">$4.99</span> </h2>
<p>A unique combination of Indian Uthappam (pancake) and
Italian pizza, topped with Cerignola olives, ripe vine
cherry tomatoes, Vidalia onion, Guntur chillies and
Buffalo Paneer.</p>
<p><a class="btn btn-primary btn-xs" href="#">More »</a></p>
</div>
</div>
</div>
</div>
<div class="row row-content">
<div class="col-xs-12 col-sm-3 ">
<p></p>
<h3 align="center">This Month's Promotions</h3>
</div>
<div class="col-xs-12 col-sm-9">
<div class="media">
<div class="media-body">
<h2 class="media-heading">Weekend Grand Buffet <span class="label label-danger">New</span></h2>
<p>Featuring mouthwatering combinations with a choice of five different salads, six enticing appetizers, six main entrees and five choicest desserts. Free flowing bubbly and soft drinks. All for just $19.99 per person </p>
<p><a class="btn btn-primary btn-xs" href="#">More »</a></p>
</div>
<div class="media-right media-middle">
<a href="#">
<img class="media-object img-thumbnail"
src="img/img/buffet.png" alt="Uthappizza">
</a>
</div>
</div>
</div>
</div>
<div class="row row-content">
<div class="col-xs-12 col-sm-3 col-sm-push-9">
<p></p>
<h3 align="center">Meet our Culinary Specialists</h3>
</div>
<div class="col-xs-12 col-sm-9 col-sm-pull-3">
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-thumbnail"
src="img/img/alberto.png" alt="Alberto Somayya">
</a>
</div>
<div class="media-body">
<h2 class="media-heading">Alberto Somayya</h2>
<h4>Executive Chef</h4>
<p>Award winning three-star Michelin chef with wide
International experience having worked closely with
whos-who in the culinary world, he specializes in
creating mouthwatering Indo-Italian fusion experiences.
</p>
<p><a class="btn btn-primary btn-xs" href="#">More »</a></p>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row row-footer">
<div class="col-xs-5 col-xs-offset-1 col-sm-2 col-sm-offset-1">
<h5>Links</h5>
<ul class="list-unstyled">
<li><a href="https://d396qusza40orc.cloudfront.net/phoenixassets/web-frameworks/index.html#" id="homelink">Home</a></li>
<li><a href="https://d396qusza40orc.cloudfront.net/phoenixassets/web-frameworks/index.html#">About</a></li>
<li><a href="https://d396qusza40orc.cloudfront.net/phoenixassets/web-frameworks/index.html#">Menu</a></li>
<li><a href="https://d396qusza40orc.cloudfront.net/phoenixassets/web-frameworks/index.html#">Contact</a></li>
</ul>
</div>
<div class="col-xs-6 col-sm-5">
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
<!--Tel.: +852 1234 5678<br>
Fax: +852 8765 4321<br>
Email: <a href="mailto:confusion@food.net">confusion@food.net</a>
-->
<i class="fa fa-phone"></i>: +852 1234 5678<br>
<i class="fa fa-fax"></i>: +852 8765 4321<br>
<i class="fa fa-envelope"></i>: <a href="mailto:confusion@food.net">confusion@food.net</a>
</address>
</div>
<div class="col-xs-12 col-sm-4">
<div class="nav navbar-nav">
<a class="btn btn-social-icon btn-google-plus" href="http://google.com/+"><i class="fa fa-google-plus"></i></a>
<a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id="><i class="fa fa-facebook"></i></a>
<a class="btn btn-social-icon btn-facebook" href="http://www.linkedin.com/in/"><i class="fa fa-linkedin"></i></a>
<a class="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i class="fa fa-twitter"></i></a>
<a class="btn btn-social-icon btn-youtube" href="http://youtube.com/"><i class="fa fa-youtube"></i></a>
<a class="btn btn-social-icon" href="mailto:"><i class="fa fa-envelope-o"></i></a>
</div>
</div>
<div class="col-xs-12">
<p></p>
<p align="center">© Copyright 2015 Ristorante Con Fusion</p>
</div>
</div>
</div>
</footer>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#mycarousel").carousel( { interval: 3000 } );
$('#carousel-pause').click(function(){
$("#mycarousel").carousel('pause');
// alert('hi');
});
$("#carousel-play").click(function(){
$("#mycarousel").carousel('cycle');
//alert('hi');
});
});
</script>
<script>
$(document).ready(function(){
$('#table').click(function(){
$('#Reservetable').modal({show:true});
});
});
$(document).ready(function(){
$('#login').click(function(){
$('#loginModal').modal({show:true});
});
});
</script>
</body></html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.