diff --git a/img/Logo.png b/img/Logo.png new file mode 100644 index 0000000..4429fde Binary files /dev/null and b/img/Logo.png differ diff --git a/img/c1.png b/img/c1.png new file mode 100644 index 0000000..a41e13e Binary files /dev/null and b/img/c1.png differ diff --git a/img/c2.png b/img/c2.png new file mode 100644 index 0000000..3baaf3f Binary files /dev/null and b/img/c2.png differ diff --git a/img/c3.png b/img/c3.png new file mode 100644 index 0000000..15be204 Binary files /dev/null and b/img/c3.png differ diff --git a/img/phone.png b/img/phone.png new file mode 100644 index 0000000..712e8e9 Binary files /dev/null and b/img/phone.png differ diff --git a/img/title.png b/img/title.png new file mode 100644 index 0000000..d981a93 Binary files /dev/null and b/img/title.png differ diff --git a/index.html b/index.html index 6257184..4760dfd 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,80 @@ - So-and-so's Instructional Assignment + + + + Claire's Instructional Assignment + - YOUR CODE HERE +
+ + +

Avoiding Immigration Scams

+ +
+ +
+ + + + + + + + +
+ + + + + + + +
+ + + + + + +
+ + + + + + + diff --git a/main.css b/main.css new file mode 100644 index 0000000..fc073ea --- /dev/null +++ b/main.css @@ -0,0 +1,160 @@ + +body{ + font-family: Helvetica, georgia, sans-serif; + text-align: center; + background-color: white; + background-size: 80%; +} + +h1{ + margin-left: -50px; + margin-top: 50px; + margin-bottom: 10px; + font-weight: 20px; + font-size: 80px; + text-align: left; + + +} + + +.thumbnails{ + word-spacing: 100px; + margin: 80px; + padding-right: 20px; + cursor:pointer; +} + +.thumb{ + width: 65px; + height: 65px; + border: 5px solid black; + margin-right: 10px; + +} + +#carousel { + width:32%; + float:center; + margin-top:50px; + margin-left: 25%; + border: 5px solid black; + background-color: black; + margin-left:550px; + +} + +#logo{ + float:left; + margin-left: 220px; +} + +#imageHolder{ + margin-top: 0px; + +} + +#tops{ + +display: inline; + +} + +#controlPanel{ + float:center; +} + +.button{ + cursor:pointer; + background-color: black; + color: white; + border-radius: 10px; + text-align: center; + padding: 20px; + margin-left: 20%; + margin-right: 20%; + margin-top: -50px; + cursor: pointer; + margin-bottom: 120px; + +} + +footer{ + float:center; + margin:100px; +} + +.nav{ + margin-bottom: 20px; +} + + +ul a{ + text-decoration: none; + color: black; + } + +ul { + text-decoration: none; + text-align: left; + display: inline; + font-family: Helvetica; + color:black; + padding: 15px 4px 170px 0; + list-style: none; + -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); + -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); + box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); +} +ul li { + text-decoration: none; + font: bold 12px/18px sans-serif; + display: inline-block; + margin-right: -4px; + position: relative; + padding: 15px 20px; + background: #fff; + cursor: pointer; + -webkit-transition: all 0.2s; + -moz-transition: all 0.2s; + -ms-transition: all 0.2s; + -o-transition: all 0.2s; + transition: all 0.2s; +} +ul li:hover { + background: #d3d3d3; + color: #d3d3d3; +} +ul li ul { + padding: 0; + position: absolute; + top: 48px; + left: 0; + width: 150px; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + display: none; + opacity: 0; + visibility: hidden; + -webkit-transiton: opacity 0.2s; + -moz-transition: opacity 0.2s; + -ms-transition: opacity 0.2s; + -o-transition: opacity 0.2s; + -transition: opacity 0.2s; +} +ul li ul li { + background: white; + display: block; + color: #d3d3d3; + text-shadow: 0 -1px 0 #000; +} +ul li ul li:hover { background: #d3d3d3; } +ul li:hover ul { + display: block; + opacity: 1; + visibility: visible; +} + + + diff --git a/main.js b/main.js new file mode 100644 index 0000000..3cdc319 --- /dev/null +++ b/main.js @@ -0,0 +1,69 @@ + +var myImages=[ "img/c1.png","img/c2.png","img/c3.png"]; +var currentImg=0; + +$(document).ready(function(){ + + //this dynamically loads the images in the html as thumbnails + $(myImages).each(function(index){ + $('.thumbnails').append(""); + }); + + Mytimer(); + + $("#leftButton").click(function(){ + console.log(currentImg); + prev(); + + }); + + $("#rightButton").click(function(){ + console.log(currentImg); + next(); + }); + + $(".thumbnails").on('click', '.thumb', function(){ + var thisSlide = $(this).attr('src'); + $("#mainImg").attr('src', thisSlide); + + }); + + +function next(){ + if (currentImg>2){ + currentImg= myImages.length-3; + $("#mainImg").attr('src', myImages[currentImg]); + } else { + currentImg++; + $("#mainImg").attr('src', myImages[currentImg]); + + } + + + }; + +function prev(){ + // $(myImages).each(function(index){ + if (currentImg<1){ + currentImg= myImages.length-1; + $("#mainImg").attr('src', myImages[currentImg]); + } else { + currentImg--; + $("#mainImg").attr('src', myImages[currentImg]); + + } + + + }; + + + function Mytimer(){ + setInterval(function(){next()},3000); + + + } + + +}); + +