USA: +1 (725) 712-1730 
Sign in
Hello, can you please help me build or create a website using the following:
the java scripts are In the <HEAD> section, place the following JavaScript references:
<script type=”text/javascript” src=”javascript/jquery-1.3.2.js”></script>
<script type=”text/javascript” src = “javascript/slideShowFunc.js”></script>
I need to make sure I see a slideshow of images that appear every few seconds
<!DOCTYPE html>
< html>
<head>
<meta CHARSET = “UTF-8″>
<link rel=”stylesheet” type=”text/css” href=”../css/mainStyle.css” />
<title>Jonboy Tech Solutions – Fix my PC</title>
</head>
<body>
< div class = “wrapper”> <header>
< div id = “headerImage”></div>
< /header> <nav>
< ul>
<li><a href = “../index.html”>Home</a></li>
<li><a href = “about.html”>About</a></li>
<li><a href = “contact.html”>Contact</a></li>
<li><a href = “buildPC.html”>Build a PC</a></li>
<li><a href = “fixPC.html” class = “current” >Fix a PC</a></li>
< /ul>
< /nav>
< div id = “fixContent”>
<li>Once downloaded, double click the program to install. Use the default
options.</li>
<br />
<li>Once installed, make sure Launch Crossloop is checked then click finish.</li>
<br />
<li>When it opens it will ask you to create an account. Select “Later”</li>
<br />
<li>After the program loads, click on the “Share” tab at the top. It will
provide you with the code I need.</li>
<br />
<li>Once I have the code, click “Connect”.</li>
<br />
<li>After a few seconds a screen should appear saying that Jonboy Tech Solutions
would like to connect and share you computer. Please click “Yes”</li>
<br />
<li>At this point I can take care of everything from there. I will open
a notepad document as soon as I start in case you have any questions while
I am working.</li>
<br />
<li>Finally, after the work is done, you can enjoy a faster smoother computing
experience.</li>
</ol>
< /div>
< footer>
< p>Copyright 2014 © Jonboy Tech Solutions</p>
< /footer> </div>
</body>
< /html>3 – <!DOCTYPE html>
< html>
<head>
<meta CHARSET = “UTF-8″>
<link rel=”stylesheet” type=”text/css” href=”../css/mainStyle.css” />
<script type=”text/javascript” src = “../javascript/contactJava.js”></script>
<title>Jonboy Tech Solutions – Contactx</title>
</head>
<body>
< div class = “wrapper”> <header>
< div id = “headerImage”></div>
< /header> <nav>
< ul>
<li><a href = “../index.html”>Home</a></li>
<li><a href = “about.html”>About</a></li>
<li><a href = “contact.html” class = “current” >Contact</a></li>
<li><a href = “buildPC.html”>Build a PC</a></li>
<li><a href = “fixPC.html”>Fix a PC</a></li>
< /ul>
< /nav>
< div id = “contactMe”>
<form id = “contactForm” name = “contactForm” method = “post” action = “mailto:youremail@you.com” onSubmit = “thankYouFunc()”>
<fieldset id = “personalInfo”>
<legend>Personal Info</legend>
<span id = “required”>* indicates a required field</span>
</fieldset>
<fieldset id = “reasonInfo”>
<legend>Reason for Contact</legend>
<label>Pass me a note!</label>
<br />
<br />
< textarea></textarea>
</fieldset>
<button type = “submit” id = “sendContact”>Send</button>
<button type = “reset” id = “clearContact”>Clear</button>
</form>
< /div>
< footer>
< p>Copyright 2014 © Jonboy Tech Solutions</p>
< /footer> </div>
</body>
< /html>
1) <!DOCTYPE html>
< html>
<head>
<meta CHARSET = “UTF-8″>
<link rel=”stylesheet” type=”text/css” href=”../css/mainStyle.css” />
<title>Jonboy Tech Solutions – About</title>
</head>
<body>
< div class = “wrapper”> <header>
< div id = “headerImage”></div>
< /header> <nav>
< ul>
<li><a href = “../index.html”>Home</a></li>
<li><a href = “about.html” class = “current” >About</a></li>
<li><a href = “contact.html”>Contact</a></li>
<li><a href = “buildPC.html”>Build a PC</a></li>
<li><a href = “fixPC.html”>Fix a PC</a></li>
< /ul>
< /nav>
< div id = “aboutContent”>
<p>
<p> We do offer some repair on various pieces. For example, hard drive repair,
GPU repair, laptop screen replacement, and any OEM parts that you may need
replaced. We weill work with vendors to find the lowest possible prices
on any parts you will need.< /p>
< /div>
< footer>
< p>Copyright 2014 © Jonboy Tech Solutions</p>
< /footer> </div>
</body>
< /html>
2- <!DOCTYPE html>
< html>
<head>
<meta CHARSET = “UTF-8″>
<link rel=”stylesheet” type=”text/css” href=”../css/mainStyle.css” />
<script type=”text/javascript” src = “../javascript/buildJava.js”></script>
<title>Jonboy Tech Solutions – Build a PC</title>
</head>
<body>
< div class = “wrapper”> <header>
< div id = “headerImage”></div>
< /header> <nav>
< ul>
<li><a href = “../index.html”>Home</a></li>
<li><a href = “about.html”>About</a></li>
<li><a href = “contact.html”>Contact</a></li>
<li><a href = “buildPC.html” class = “current” >Build a PC</a></li>
<li><a href = “fixPC.html”>Fix a PC</a></li>
< /ul>
< /nav>
< div id = “buildContent”>
<p>Here you can build a custom pc from products we have in stock. If you don’t
wish to purchase a specific category please mark –none–. All complete,
custom built PC’s include an operating system and necessary cables. Specific
details about parts are available on request. If a lower price is found
online, we will match it.</p>
<form id = “buildForm” name = “buildForm” method = “post” action = “”>
< label>Case:</label>
<select name = “caseVal”>
<option value = “0”>–none–</option>
<option value = “139.99”>Cooler Master HAF – 139.99</option>
<option value = “119.99”>Phantom White Steel – 119.99</option>
</select>
<br />
<br />
< label>Ram:</label>
<select name = “ramVal”>
<option value = “0”>–none–</option>
<option value = “54.99”>G.Skill Sniper Series 8gb – 54.99</option>
<option value = “94.99”>G.Skill Ares Series 16gb – 94.99</option>
</select>
<br />
<br />
<label>Hard Drive:</label>
<select name = “hdVal”>
<option value = “0”>–none–</option>
<option value = “2”>WD 500GB 7200 RPM – 64.99</option>
<option value = “99.99”>WD 1TB 7200 RPM – 99.99</option>
<option value = “239.99”>OCZ Vertex 4 256GB SSD – 239.99</option>
</select>
<br />
<br />
<label>Mother Board:</label>
<select name = “moboVal”>
<option value = “0”>–none–</option>
<option value = “139.99”>AMD Gigabyte GA-990FXA AM3+ – 139.99</option>
<option value = “148.99”>Asus P8Z77 Intel Z77 – 148.99</option>
</select>
<br />
<br />
< label>Processor:</label>
<select name = “procVal”>
<option value = “0”>–none–</option>
<option value = “179.99”>AMD Zambezi AM3+ 3.6ghz 8 core – 179.99</option>
<option value = “229.99”>Intel i5 3570k 3.4ghz 4 core – 229.99< /option>
</select>
<br />
<br />
<label>Video Card:</label>
<select name = “gpuVal”>
<option value = “0”>–none–</option>
<option value = “199.99”>HSI Radeon HD 7850 2GB (AMD chipset) – 199.99</option>
<option value = “134.99”>MSI GTX 640 2GB (NVidia chipset) – 134.99</option>
</select>
<br />
<br />
<label>Optical Drive:</label>
<select name = “dvdVal”>
<option value = “0”>–none–</option>
<option value = “19.99”>DVD Burner – 19.99</option>
<option value = “79.99”>Bluray burner – 79.99</option>
</select>
<br />
<br />
<label>Power Supply</label>
<select name = “psuVal”>
<option value = “0”>–none–</option>
<option value = “49.99”>550 watt option – 49.99</option>
<option value = “129.99”>950 watt option – 129.99</option>
</select>
<br />
<br />
<button type = “button” id = “totalButton” onClick = “totalFunc()”> Total</button>
<button type = “reset” id = “clearButton”>Start Over</button>
<hr />
<label>Sub Total:</label>
<input type = “text” readonly = “readonly” id = “subInput” name = “subInput” />
<br />
<br />
< label>Tax:</label>
<input type = “text” readonly = “readonly” id = “taxInput” name = “taxInput” />
<br />
<br />
< label>Total:</label>
<input type = “text” readonly = “readonly” id = “totalInput” name = “totalInput” />
</form>
< /div>
< footer>
< p>Copyright 2014 © Jonboy Tech Solutions</p>
< /footer> </div>
</body>
< /html>
I need to insert the following:
In the
section, place the following JavaScript references:
Then I need to test to insure you see a slideshow of images that appear every few seconds. Can you please help me findout where my error is based on hte following: Please test the page with the follwoing link. can you let meknow what to do to get a perfect page: file:///C:/Users/mar28/Desktop/HCI%20WEEK%205/Course%20Project%20-%20Student%20Starter%20Files/index.html
The following is the Mainstyle notepad:
/* Copyright 2013 Herzing University
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*———-End of Meyer’s Reset———*/
html, body{
height: 100%;
margin: 0px;
/*font-family: “Lucida” Grande, sans-serif;*/
font-family: “Trebuchet MS”, Helvetica, sans-serif;
}
.wrapper{
width: 960px;
height: 1080px;
background-color: #ffffff;
margin: auto;
position: relative;
}
header{
width: 960px;
height:30px;
background-color: #101e2a;
margin: auto;
}
nav{
margin: 0px;
padding: 0px;
position: absolute;
left: 0px;
top: 55px;
}
nav ul{
display: inline;
margin: 0px;
padding: 0px;
text-align: center;
}
nav ul li{
display: inline-block;
width: 185px;
margin: 0px;
padding: 0px;
font-size: 20px;
}
#headerImage{
background-image: url(‘../images/jonboyLogoSmall.png’);
width: 165px;
height: 100px;
float: left;
z-index: -1;
}
footer{
background-color: #101e2a;
position: absolute;
bottom: 0px;
width: 960px;
height: 30px;
}
footer p{
text-align: center;
color: white;
margin: 0px;
margin-top: 5px;
}
/*——–Style for links and Nav———-*/
a.current{
color: #559edc;
}
a:hover{
color: #30a723 ;
}
a{
color: #284c6a;
text-decoration: none;
}
/*————-End Link Style———-*/
#leftContent{
width: 400px;
height: 500px;
clear: left;
float: left;
margin-left: 15px;
margin-top: 50px;
/*background-color: black;*/
border: 2px solid #284c6a;
box-shadow: 10px 10px 5px #888888;
}
#leftContent p{
margin: 15px 25px;
color: #284c6a;
text-align: justify;
}
#leftContent hr{
width: 300px;
margin: auto;
}
#rightContent{
width: 500px;
height: 300px;
float: right;
margin-right: 15px;
margin-top: 50px;
/*background-color: black;*/
border: 2px solid #284c6a;
box-shadow: 10px 10px 5px #888888;
}
#rightContent h1{
color: #284c6a;
text-align: center;
}
#rightContent p{
margin: 15px 5px;
color: #284c6a;
text-align: justify;
}
#aboutContent{
width: 700px;
height: 600px;
margin: 75px auto;
/*background-color: black;*/
border: 2px solid #284c6a;
box-shadow: 10px 10px 5px #888888;
}
#aboutContent p{
margin: 15px 25px;
color: #284c6a;
text-align: justify;
}
#contactMe{
width: 700px;
height: 600px;
margin: 75px auto;
/*background-color: black;*/
border: 2px solid #284c6a;
box-shadow: 10px 10px 5px #888888;
}
#contactForm{
color: #284c6a;
margin: 0px;
padding: 0px;
width: 100%;
}
#contactForm label{
display: inline-block;
width: 130px;
margin-left: 10px;
}
fieldset{
padding: 0px;
margin: 0px;
}
fieldset#personalInfo{
display: inline-block;
width: 660px;
height: 120px;
margin-left: 18px;
margin-top: 15px;
}
fieldset#reasonInfo{
display: inline-block;
margin-left: 100px;
margin-top: 50px;
width: 500px;
height: 300px;
}
fieldset#reasonInfo label{
display: inline-block;
width: 150px;
margin-left: 180px;
}
fieldset#reasonInfo textarea{
width: 440px;
height: 175px;
margin-left: 30px;
}
#buildContent{
width: 700px;
height: 650px;
margin: 75px auto;
/*background-color: black;*/
border: 2px solid #284c6a;
box-shadow: 10px 10px 5px #888888;
}
#fixContent{
width: 700px;
height: 600px;
margin: 75px auto;
/*background-color: black;*/
border: 2px solid #284c6a;
box-shadow: 10px 10px 5px #888888;
}
#fixContent ol li{
margin-left: 35px;
margin-right: 10px;
}
/*———————-New Additions for Week 4 Course Project———–*/
#leftContent p:first-letter{
font-size: 48px;
}
#aboutContent p:first-letter{
font-size: 48px;
}
#buildContent p:first-letter{
font-size: 48px;
}
#partners{
width: 100%;
height: 105px;
position: absolute;
bottom: 30px;
}
#partners img{
}
#partnerLogo1{
width: 219px;
height: 49px;
float: left;
margin-left: 10px;
margin-top: 20px;
}
#partnerLogo2{
width: 216px;
height: 102px;
float: left;
margin-left: 10px;
}
#partnerLogo3{
width: 246px;
height: 55px;
float: left;
margin-left: 10px;
margin-top: 20px;
}
#partnerLogo4{
width: 232px;
height: 56px;
float: left;
margin-left: 10px;
margin-top: 20px;
}
.inlineLink{
text-decoration: underline;
}
#buildContent p{
margin: 15px 25px;
color: #284c6a;
text-align: justify;
}
#buildForm{
width: 650px;
height: 440px;
border: 1px solid #284c6a;
margin: auto;
padding-top: 25px;
}
#buildForm hr{
width: 600px;
}
#buildForm label{
display: inline-block;
float: left;
width: 125px;
margin-left: 95px;
}
#buildForm select{
display: inline-block;
float: left;
width: 325px;
}
#totalButton{
width: 150px;
margin-left: 170px;
border-radius: 5px;
background-color: #284c6a;
color: #559edc;
}
#clearButton{
width: 150px;
margin-left: 4px;
border-radius: 5px;
color: #559edc;
background-color: #284c6a;
}
#rightContent p{
background-image: url(“../images/quote.png”);
background-repeat: no-repeat;
background-position: top left;
padding-left: 32px;
padding-top: 12px;
}
#fixContent p{
margin: 15px 25px;
color: #284c6a;
text-align: justify;
}
#sendContact{
width: 150px;
margin-left: 205px;
border-radius: 5px;
background-color: #284c6a;
color: #559edc;
}
#clearContact{
width: 150px;
margin-left: 10px;
border-radius: 5px;
background-color: #284c6a;
color: #559edc;
}
#required{
color: red;
}
/*——————-Slide Show Styles————————–*/
#photoShow {
height:225px;
width:300px;
position: absolute;
top: 500px;
right: 115px;
border: 2px solid #284c6a;
box-shadow: 10px 10px 5px #888888;
}
#photoShow div {
position:absolute;
z-index: 0;
}
#photoShow div.previous {
z-index: 1;
}
#photoShow div.current {
z-index: 2;
}
Expert Answer
I created a slideshow at the top of your page content which appears for few seconds, repeats the slideshow and hides. Please comment if you have doubts or need changes.
The errors I found in your HTML, CSS and JS file
**HTML File
1. The HTML code is given thrice above.
2. Use jquery_version.min.js file for better performance. Using is a CDN is the best approach.
3. Didn’t mention where to add the slideshow. Please mention.
**CSS File
1. You add some CSS properties to an id called photoShow. But I could not find any div with this id in the HTML code.
**So I added a simple slideshow at the top of your HTML page. To place the slideshow where you want, cut and paste the below HTML at your desired location.
Lines adding in the HTML File:
<div class=”fadein”>
<img src=”path/img1″ class=”active”>
<img src=”path/img2″>
<img src=”path/img3″>
</div>
Lines adding in the CSS File:(mainStyle.css)
.fadein { position:relative; width:800px; height:532px; }
.fadein img { position:absolute; left:0; top:0; }
Lines adding in the JS File:(sildeShowFunc.js)
$(function(){
setInterval(function(){
$(‘.fadein’).toggle();
},4000);
$(‘.fadein img:gt(0)’).hide();
setInterval(function(){
$(‘.fadein :first-child’).fadeOut()
.next(‘img’).fadeIn()
.end().appendTo(‘.fadein’);},
3000);
});
**Complete HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta CHARSET = “UTF-8″>
<script type=”text/javascript” src=”javascript/jquery-1.3.2.js”></script>
<script type=”text/javascript” src = “javascript/slideShowFunc.js”></script>
<link rel=”stylesheet” type=”text/css” href=”../css/mainStyle.css” />
<script type=”text/javascript” src = “../javascript/buildJava.js”></script>
<title>Jonboy Tech Solutions – Build a PC</title>
</head>
<body>
<div class=”fadein”>
<img src=”path/img1″ class=”active”>
<img src=”path/img2″>
<img src=”path/img3″>
</div>
<div class = “wrapper”> <header>
<div id = “headerImage”></div>
</header> <nav>
<ul>
<li><a href = “../index.html”>Home</a></li>
<li><a href = “about.html”>About</a></li>
<li><a href = “contact.html”>Contact</a></li>
<li><a href = “buildPC.html” class = “current” >Build a PC</a></li>
<li><a href = “fixPC.html”>Fix a PC</a></li>
</ul>
</nav>
<div id = “buildContent”>
<p>Here you can build a custom pc from products we have in stock. If you don’t
wish to purchase a specific category please mark –none–. All complete,
custom built PC’s include an operating system and necessary cables. Specific
details about parts are available on request. If a lower price is found
online, we will match it.</p>
<form id = “buildForm” name = “buildForm” method = “post” action = “”>
<label>Case:</label>
<select name = “caseVal”>
<option value = “0”>–none–</option>
<option value = “139.99”>Cooler Master HAF – 139.99</option>
<option value = “119.99”>Phantom White Steel – 119.99</option>
</select>
<br />
<br />
<label>Ram:</label>
<select name = “ramVal”>
<option value = “0”>–none–</option>
<option value = “54.99”>G.Skill Sniper Series 8gb – 54.99</option>
<option value = “94.99”>G.Skill Ares Series 16gb – 94.99</option>
</select>
<br />
<br />
<label>Hard Drive:</label>
<select name = “hdVal”>
<option value = “0”>–none–</option>
<option value = “2”>WD 500GB 7200 RPM – 64.99</option>
<option value = “99.99”>WD 1TB 7200 RPM – 99.99</option>
<option value = “239.99”>OCZ Vertex 4 256GB SSD – 239.99</option>
</select>
<br />
<br />
<label>Mother Board:</label>
<select name = “moboVal”>
<option value = “0”>–none–</option>
<option value = “139.99”>AMD Gigabyte GA-990FXA AM3+ – 139.99</option>
<option value = “148.99”>Asus P8Z77 Intel Z77 – 148.99</option>
</select>
<br />
<br />
<label>Processor:</label>
<select name = “procVal”>
<option value = “0”>–none–</option>
<option value = “179.99”>AMD Zambezi AM3+ 3.6ghz 8 core – 179.99</option>
<option value = “229.99”>Intel i5 3570k 3.4ghz 4 core – 229.99</option>
</select>
<br />
<br />
<label>Video Card:</label>
<select name = “gpuVal”>
<option value = “0”>–none–</option>
<option value = “199.99”>HSI Radeon HD 7850 2GB (AMD chipset) – 199.99</option>
<option value = “134.99”>MSI GTX 640 2GB (NVidia chipset) – 134.99</option>
</select>
<br />
<br />
<label>Optical Drive:</label>
<select name = “dvdVal”>
<option value = “0”>–none–</option>
<option value = “19.99”>DVD Burner – 19.99</option>
<option value = “79.99”>Bluray burner – 79.99</option>
</select>
<br />
<br />
<label>Power Supply</label>
<select name = “psuVal”>
<option value = “0”>–none–</option>
<option value = “49.99”>550 watt option – 49.99</option>
<option value = “129.99”>950 watt option – 129.99</option>
</select>
<br />
<br />
<button type = “button” id = “totalButton” onClick = “totalFunc()”> Total</button>
<button type = “reset” id = “clearButton”>Start Over</button>
<hr />
<label>Sub Total:</label>
<input type = “text” readonly = “readonly” id = “subInput” name = “subInput” />
<br />
<br />
<label>Tax:</label>
<input type = “text” readonly = “readonly” id = “taxInput” name = “taxInput” />
<br />
<br />
<label>Total:</label>
<input type = “text” readonly = “readonly” id = “totalInput” name = “totalInput” />
</form>
</div>
<footer>
<p>Copyright 2014 © Jonboy Tech Solutions</p>
</footer> </div>
</body>
</html>
**Complete CSS Code
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*———-End of Meyer’s Reset———*/
html, body{
height: 100%;
margin: 0px;
/*font-family: “Lucida” Grande, sans-serif;*/
font-family: “Trebuchet MS”, Helvetica, sans-serif;
}
.wrapper{
width: 960px;
height: 1080px;
background-color: #ffffff;
margin: auto;
position: relative;
}
header{
width: 960px;
height:30px;
background-color: #101e2a;
margin: auto;
}
nav{
margin: 0px;
padding: 0px;
position: absolute;
left: 0px;
top: 55px;
}
nav ul{
display: inline;
margin: 0px;
padding: 0px;
text-align: center;
}
nav ul li{
display: inline-block;
width: 185px;
margin: 0px;
padding: 0px;
font-size: 20px;
}
#headerImage{
background-image: url(‘../images/jonboyLogoSmall.png’);
width: 165px;
height: 100px;
float: left;
z-index: -1;
}
footer{
background-color: #101e2a;
position: absolute;
bottom: 0px;
width: 960px;
height: 30px;
}
footer p{
text-align: center;
color: white;
margin: 0px;
margin-top: 5px;
}
/*——–Style for links and Nav———-*/
a.current{
color: #559edc;
}
a:hover{
color: #30a723 ;
}
a{
color: #284c6a;
text-decoration: none;
}
/*————-End Link Style———-*/
#leftContent{
width: 400px;
height: 500px;
clear: left;
float: left;
margin-left: 15px;
margin-top: 50px;
/*background-color: black;*/
border: 2px solid #284c6a;
box-shadow: 10px 10px 5px #888888;
}
#leftContent p{
margin: 15px 25px;
color: #284c6a;
text-align: justify;
}
#leftContent hr{
width: 300px;
margin: auto;
}
#rightContent{
width: 500px;
height: 300px;
float: right;
margin-right: 15px;
margin-top: 50px;
/*background-color: black;*/
border: 2px solid #284c6a;
box-shadow: 10px 10px 5px #888888;
}
#rightContent h1{
color: #284c6a;
text-align: center;
}
#rightContent p{
margin: 15px 5px;
color: #284c6a;
text-align: justify;
}
#aboutContent{
width: 700px;
height: 600px;
margin: 75px auto;
/*background-color: black;*/
border: 2px solid #284c6a;
box-shadow: 10px 10px 5px #888888;
}
#aboutContent p{
margin: 15px 25px;
color: #284c6a;
text-align: justify;
}
#contactMe{
width: 700px;
height: 600px;
margin: 75px auto;
/*background-color: black;*/
border: 2px solid #284c6a;
box-shadow: 10px 10px 5px #888888;
}
#contactForm{
color: #284c6a;
margin: 0px;
padding: 0px;
width: 100%;
}
#contactForm label{
display: inline-block;
width: 130px;
margin-left: 10px;
}
fieldset{
padding: 0px;
margin: 0px;
}
fieldset#personalInfo{
display: inline-block;
width: 660px;
height: 120px;
margin-left: 18px;
margin-top: 15px;
}
fieldset#reasonInfo{
display: inline-block;
margin-left: 100px;
margin-top: 50px;
width: 500px;
height: 300px;
}
fieldset#reasonInfo label{
display: inline-block;
width: 150px;
margin-left: 180px;
}
fieldset#reasonInfo textarea{
width: 440px;
height: 175px;
margin-left: 30px;
}
#buildContent{
width: 700px;
height: 650px;
margin: 75px auto;
/*background-color: black;*/
border: 2px solid #284c6a;
box-shadow: 10px 10px 5px #888888;
}
#fixContent{
width: 700px;
height: 600px;
margin: 75px auto;
/*background-color: black;*/
border: 2px solid #284c6a;
box-shadow: 10px 10px 5px #888888;
}
#fixContent ol li{
margin-left: 35px;
margin-right: 10px;
}
/*———————-New Additions for Week 4 Course Project———–*/
#leftContent p:first-letter{
font-size: 48px;
}
#aboutContent p:first-letter{
font-size: 48px;
}
#buildContent p:first-letter{
font-size: 48px;
}
#partners{
width: 100%;
height: 105px;
position: absolute;
bottom: 30px;
}
#partners img{
}
#partnerLogo1{
width: 219px;
height: 49px;
float: left;
margin-left: 10px;
margin-top: 20px;
}
#partnerLogo2{
width: 216px;
height: 102px;
float: left;
margin-left: 10px;
}
#partnerLogo3{
width: 246px;
height: 55px;
float: left;
margin-left: 10px;
margin-top: 20px;
}
#partnerLogo4{
width: 232px;
height: 56px;
float: left;
margin-left: 10px;
margin-top: 20px;
}
.inlineLink{
text-decoration: underline;
}
#buildContent p{
margin: 15px 25px;
color: #284c6a;
text-align: justify;
}
#buildForm{
width: 650px;
height: 440px;
border: 1px solid #284c6a;
margin: auto;
padding-top: 25px;
}
#buildForm hr{
width: 600px;
}
#buildForm label{
display: inline-block;
float: left;
width: 125px;
margin-left: 95px;
}
#buildForm select{
display: inline-block;
float: left;
width: 325px;
}
#totalButton{
width: 150px;
margin-left: 170px;
border-radius: 5px;
background-color: #284c6a;
color: #559edc;
}
#clearButton{
width: 150px;
margin-left: 4px;
border-radius: 5px;
color: #559edc;
background-color: #284c6a;
}
#rightContent p{
background-image: url(“../images/quote.png”);
background-repeat: no-repeat;
background-position: top left;
padding-left: 32px;
padding-top: 12px;
}
#fixContent p{
margin: 15px 25px;
color: #284c6a;
text-align: justify;
}
#sendContact{
width: 150px;
margin-left: 205px;
border-radius: 5px;
background-color: #284c6a;
color: #559edc;
}
#clearContact{
width: 150px;
margin-left: 10px;
border-radius: 5px;
background-color: #284c6a;
color: #559edc;
}
#required{
color: red;
}
/*——————-Slide Show Styles————————–*/
.fadein {
position: relative;
width:500px;
height:332px;
}
.fadein img {
position:absolute;
left:0;
top:0;
}
#photoShow {
height:225px;
width:300px;
position: absolute;
top: 500px;
right: 115px;
border: 2px solid #284c6a;
box-shadow: 10px 10px 5px #888888;
}
#photoShow div {
position:absolute;
z-index: 0;
}
#photoShow div.previous {
z-index: 1;
}
#photoShow div.current {
z-index: 2;
}
**Complete JS CODE:
$(function(){
setInterval(function(){
$(‘.fadein’).toggle();
},4000);
$(‘.fadein img:gt(0)’).hide();
setInterval(function(){
$(‘.fadein :first-child’).fadeOut()
.next(‘img’).fadeIn()
.end().appendTo(‘.fadein’);},
3000);
})
