bfl-itp · CleezyITP · Sep 11, 2014 · Sep 17, 2014 · afeld · Sep 23, 2014
diff --git a/img/Logo.png b/img/Logo.png
diff --git a/img/c1.png b/img/c1.png
diff --git a/img/c2.png b/img/c2.png
diff --git a/img/c3.png b/img/c3.png
diff --git a/img/phone.png b/img/phone.png
diff --git a/img/title.png b/img/title.png
diff --git a/index.html b/index.html
@@ -1,9 +1,80 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>So-and-so's Instructional Assignment</title>
+        <link rel="stylesheet" href="main.css">
+		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+		<script type="text/javascript" src="main.js"></script>
+        <title>Claire's Instructional Assignment</title>
   </head>
+
   <body>
-    YOUR CODE HERE
+<div id="tops">
+<img id="logo" src="img/logo.png" style="height:90px;width:110px">
+
+<h1>Avoiding Immigration Scams</h1>
+
+</div>
+
+    <div class="nav">
+
+
+      <ul>
+<li><a href="http://www.uscis.gov"> US Office of Immigration</a></li>
+
+<li>
+
+
+    <a text="Resources"> Resources</a>
+
+       <ul>
+
+ <li><a href="http://www.uscis.gov/forms"> forms</a></li>
+ <li><a href="http://www.uscis.gov/archive/archive-laws/archive-legal-documents/finding-free-legal-advice"> free legal advice</a></li>
+ <li><a href="http://www.uscis.gov/about-us/find-uscis-office"> find an immigration office</a></li>
+
+   </ul>
+
+											</li>
+
+
+   </ul>
+
+
+
+
+
+</div>
+
+
+
+
+
+
+
+        <div id="imageHolder">
+<!-- <div class="thumbnails">
+
+			</div> -->
+
+		<img src="img/title.png" style="height:400px;width:400px">
+		<div id="carousel">
+		 	<img style="border:50px;height:105%" src= "img/c1.png" alt="c1" id="mainImg">
+		 	</div>
+
+
+		</div>
+
+		<!-- <div id="controlPanel">
+		  <span id="leftButton" class="button" >&lt;</span>
+		  <span id="rightButton" class="button" >&gt;</span>
+	  </div> -->
+
+
   </body>
+
+
+  <footer>
+  	<img src="img/phone.png" style="height:90px;width:190px">
+  	<a href="http://www.uscis.gov/">http://www.uscis.gov</a>
+  </footer>
 </html>
diff --git a/main.css 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
@@ -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("<img src='"+ myImages[index] + "' class='thumb'/>");
+    });
+
+    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);
+
+
+ }
+
+
+});
+
+