Please help this is my final project. Here are the Final Project instructions. D
ID: 3815843 • Letter: P
Question
Please help this is my final project.
Here are the Final Project instructions.
Design an entire website which must contain the following items but can contain anything else you want to add. The list below is the list of minimum requirements.
The site must have three pages. Each page must link to the other two.
You must use CSS styles for presentational aspects of your page. You should have an external (linked) style sheet for a consistent "look and feel" to the whole site but you can also use any combination of inline and embedded styles to modify specific items. The entire site should have one design theme. The color scheme should be reflected on all the pages unless there is a good reason for one page to deviate from the rest.
The Page Title should tell the viewer what your site is about and what aspect of the site each page is about. The Page Titles on all the pages should relate to the subject of your site.
The CSS box model should be used to control the spacing between elements on your pages and to display any borders or backgrounds.
The site must use a consistent navigation scheme.
At least one page should have a 2-column or 3-column layout.
Your page should use Responsive Web Design, as described in Chapter 8.
Your site should have at least one image with an image swap, map, and/or rollover. Be sure to use free images if you get images from the web and give credit where credit is due! The credit should include a link to the site where you found the image as well as the aritist or photographer's name, if available The same, of course, is true for any information you copy from another website.
There must be a minimum of two lists: an ordered or unordered list and a description list.
There must be at least one table somewhere in the site.
If there are misspellings and/or grammar mistakes in your text, you will lose points. We are at the point of becoming professional web designers and nothing makes a web page look more amateur than misspellings and poor grammar!
The entire site should be in a folder named final_project on the ITE server. All image files must be in an images folder and your css pages should be in a styles folder.
Important: Under the URL please list where the following items appear in your site:
the 2- or 3- column page
the image swap, map, or rollover
the two lists
the table
Explanation / Answer
responsive.html
<!DOCTYPE html>
<html>
<head>
<title>Your title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="style/style.css">
<style>
.area {
background:#fff;
display:block;
height:475px;
opacity:0;
position:absolute;
width:50%;
}
#area2 {
right:25%;
}
#area1:hover, #area2:hover {
opacity:0.2;
}
img {
max-width: 100%;
height: auto;
}
.imgswap img:last-child{
display:none
}
.imgswap:hover img:first-child{
display:none
}
.imgswap:hover img:last-child{
display:inline-block
}
</style>
<script type="text/javascript">
$(function(){
var image_is_loaded = false;
$("#img_map").on('load', function() {
$(this).data('width', $(this).attr('width')).data('height', $(this).attr('height'));
$($(this).attr('usemap')+" area").each(function(){
$(this).data('coords', $(this).attr('coords'));
});
$(this).css('width', '100%').css('height','auto').show();
image_is_loaded = true;
$(window).trigger('resize');
});
$(window).on('resize', function(){
if (image_is_loaded) {
var img = $("#img_map");
var ratio = img.width()/img.data('width');
$("#fishmap area").each(function(){
$(this).attr('coords', ratioCoords($(this).data('coords'), ratio));
});
}
});
function ratioCoords (coords, ratio) {
coord_arr = coords.split(",");
for(i=0; i < coord_arr.length; i++) {
coord_arr[i] = Math.round(ratio * coord_arr[i]);
}
return coord_arr.join(',');
}
});
</script>
</head>
<body>
<div class="header">
<h1>Sample Images</h1>
</div>
<div class="row">
<div class="col-3 menu">
<ul>
<li>The Swap</li>
<li>The Map</li>
</ul>
</div>
<div class="col-3">
<p> Image Swap</p>
<a class="imgswap" href="#">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Saimiri_sciureus-1_Luc_Viatour.jpg/640px-Saimiri_sciureus-1_Luc_Viatour.jpg" width="640" height="475" />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Hawaii_turtle_2.JPG/800px-Hawaii_turtle_2.JPG" width="640" height="475">
</a>
<div>
<ul>
<li>You can add description here</li>
<li>Desc 1</li>
<li>Desc 2</li>
</ul>
</div>
</div>
<div class="col-3"><p>Click on fish to view closer(Image Map)</p>
<img id="img_map" src="http://www.worldanimalfoundation.org/i/FishInTanks.jpg" width="640" height="475" alt="fish" usemap="#fishmap">
<map name="fishmap" id="fishmap">
<area shape="circle" coords="0,0,180,180" alt="fish" href="black_fish.html">
<area shape="circle" coords="190,190,110,110" alt="fish" href="yellow_fish.html">
</map>
<div>
<ul>
<li>You can add description here</li>
<li>Desc 1</li>
<li>Desc 2</li>
</ul>
</div>
</div>
</div>
<div class="footer">
<!--Table-->
<tfoot>
<tr>
<td height=30>© Your footer here, 2017</td>
</tr>
</tfoot>
</div>
</body>
</html>
black_fish.html
<!DOCTYPE html>
<html>
<head>
<title>Your title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="style/style.css">
<style>
.area {
background:#fff;
display:block;
height:475px;
opacity:0;
position:absolute;
width:50%;
}
#area2 {
right:25%;
}
#area1:hover, #area2:hover {
opacity:0.2;
}
img {
max-width: 100%;
height: auto;
}
.imgswap img:last-child{
display:none
}
.imgswap:hover img:first-child{
display:none
}
.imgswap:hover img:last-child{
display:inline-block
}
</style>
<script type="text/javascript">
$(function(){
var image_is_loaded = false;
$("#img_map").on('load', function() {
$(this).data('width', $(this).attr('width')).data('height', $(this).attr('height'));
$($(this).attr('usemap')+" area").each(function(){
$(this).data('coords', $(this).attr('coords'));
});
$(this).css('width', '100%').css('height','auto').show();
image_is_loaded = true;
$(window).trigger('resize');
});
$(window).on('resize', function(){
if (image_is_loaded) {
var img = $("#img_map");
var ratio = img.width()/img.data('width');
$("#fishmap area").each(function(){
alert('sdsds'+image_is_loaded);
$(this).attr('coords', ratioCoords($(this).data('coords'), ratio));
});
}
});
function ratioCoords (coords, ratio) {
coord_arr = coords.split(",");
for(i=0; i < coord_arr.length; i++) {
coord_arr[i] = Math.round(ratio * coord_arr[i]);
}
return coord_arr.join(',');
}
});
</script>
</head>
<body>
<div class="header">
<h1>Sample Images</h1>
</div>
<div class="row">
<div class="col-3 menu">
<ul>
<li>The Swap</li>
<li>The Map</li>
</ul>
</div>
<div class="col-3">
<p> Image Swap</p>
<a class="imgswap" href="#">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Saimiri_sciureus-1_Luc_Viatour.jpg/640px-Saimiri_sciureus-1_Luc_Viatour.jpg" width="640" height="475" />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Hawaii_turtle_2.JPG/800px-Hawaii_turtle_2.JPG" width="640" height="475">
</a>
<div>
<ul>
<li>You can add description here</li>
<li>Desc 1</li>
<li>Desc 2</li>
</ul>
</div>
</div>
<div class="col-3"><p>Click on fish image to move back(Image Map)</p>
<img id="img_map" src="https://s-media-cache-ak0.pinimg.com/originals/8e/e3/94/8ee394c7540ba4f545b76d019113ba3b.jpg" width="640" height="475" usemap="#fishmap"/>
<map name="fishmap" id="fishmap">
<area shape="circle" coords="0,0,350,350" alt="fish" href="responsive.html">
</map>
<div>
<ul>
<li>You can add description here</li>
<li>Desc 1</li>
<li>Desc 2</li>
</ul>
</div>
</div>
</div>
<div class="footer">
<!--Table-->
<tfoot>
<tr>
<td height=30>© Your footer here, 2017</td>
</tr>
</tfoot>
</div>
</body>
</html>
yellow_fish.html
<!DOCTYPE html>
<html>
<head>
<title>Your title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="style/style.css">
<style>
.area {
background:#fff;
display:block;
height:475px;
opacity:0;
position:absolute;
width:50%;
}
#area2 {
right:25%;
}
#area1:hover, #area2:hover {
opacity:0.2;
}
img {
max-width: 100%;
height: auto;
}
.imgswap img:last-child{
display:none
}
.imgswap:hover img:first-child{
display:none
}
.imgswap:hover img:last-child{
display:inline-block
}
</style>
<script type="text/javascript">
$( document ).ready(function() {
var image_is_loaded = false;
$("#img_map").on('load', function() {
$(this).data('width', $(this).attr('width')).data('height', $(this).attr('height'));
$($(this).attr('usemap')+" area").each(function(){
$(this).data('coords', $(this).attr('coords'));
});
$(this).css('width', '100%').css('height','auto').show();
image_is_loaded = true;
$(window).trigger('resize');
});
$(window).on('resize', function(){
if (image_is_loaded) {
var img = $("#img_map");
var ratio = $(this).attr('width')/img.data('width');
$("#fishmap area").each(function(){
$(this).attr('coords', ratioCoords($(this).data('coords'), ratio));
});
}
});
function ratioCoords (coords, ratio) {
coord_arr = coords.split(",");
for(i=0; i < coord_arr.length; i++) {
coord_arr[i] = Math.round(ratio * coord_arr[i]);
}
return coord_arr.join(',');
}
});
</script>
</head>
<body>
<div class="header">
<h1>Sample Images</h1>
</div>
<div class="row">
<div class="col-3 menu">
<ul>
<li>The Swap</li>
<li>The Map</li>
</ul>
</div>
<div class="col-3">
<p> Image Swap</p>
<a class="imgswap" href="#">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Saimiri_sciureus-1_Luc_Viatour.jpg/640px-Saimiri_sciureus-1_Luc_Viatour.jpg" width="640" height="475" />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Hawaii_turtle_2.JPG/800px-Hawaii_turtle_2.JPG" width="640" height="475">
</a>
<div>
<ul>
<li>You can add description here</li>
<li>Desc 1</li>
<li>Desc 2</li>
</ul>
</div>
</div>
<div class="col-3"><p>Click on fish image to move back(Image Map)</p>
<img src="https://s-media-cache-ak0.pinimg.com/originals/18/92/13/189213dcfa0ba02d4913e5115c67eae8.jpg" width="640" height="475" usemap="#fishmap"/>
<map name="fishmap" id="fishmap">
<area shape="circle" coords="0,0,350,350" alt="fish" href="responsive.html">
</map>
<div>
<ul>
<li>You can add description here</li>
<li>Desc 1</li>
<li>Desc 2</li>
</ul>
</div>
</div>
</div>
<div class="footer">
<!--Table-->
<tfoot>
<tr>
<td height=30>© Your footer here, 2017</td>
</tr>
</tfoot>
</div>
</body>
</html>
style.css
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
.footer {
background-color: #9933cc;
color: #ffffff;
padding: 5px;
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.