Scenario and Summary dont need to provide pictures just need code and ill get th
ID: 3890073 • Letter: S
Question
Scenario and Summary
dont need to provide pictures just need code and ill get the pics
This lab supports the following TCOs.
TCO 5—Given a web page that requires images and advanced styles, create and edit graphics and incorporate them into the page.
TCO 10—Given a project, create a website that contains text, links, images, and any other content necessary to complete the website using HTML and external CSS.
1. Obtain 10 original photos.
2. Research on the Internet and find some code that will allow you to create a slideshow.
3. Create a page with your photos and the code you find.
4. Create a Word document showing the source for your slideshow code. Make sure to document your HTML code also.
Deliverables
Deliverable Points
Word document with sources 10
Completed web page with slideshow 15
Any other files necessary for the slideshow to work 5
Total 30
iLAB STEPS
Step 1: Get Photos
Back to Top
Find 10 photos.
• The photos can be obtained through http://quest.eb.com.proxy.devry.edu/ or from http://commons.wikimedia.org.
• If you have personal images that you wish to use for the assignment, be sure that you cite them correctly according to APA guidelines.
• All of the images you use should be cited in the sources document that accompanies this assignment.
• IMPORTANT! Make sure that the version of each image you use for the slideshow is less than 500K. Ten images at 500K is 5 MB, and adding the document should total no more than 7 MB.
Step 2: Research Slideshow Code
Back to Top
Do some research on the Web to find code that will let you take your photos and build a slideshow on a page. Try to find code that is CSS based and doesn’t require a lot of JavaScript.
One example is http://coding.smashingmagazine.com/2012/04/25/pure-css3-cycling-slideshow/.
Step 3: Build Page and Document Sources
Back to Top
• Create the slideshow according to your selected research, using the images you located in Step 1.
• The slideshow should run automatically and should contain a text-based title for each slide.
• Write a description of the process that the slideshow uses to cycle through the slides, and cite the source of your code.
Explanation / Answer
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
* {
margin:0;
padding:0;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-font-smoothing:antialiased;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
body {
font-family:"Open Sans", Helvetica, times new roman, sans-serif;
font-weight:300;
font-size: 12px;
line-height:30px;
color:black;
background:black;
}
.container {
max-width:100%;
width:100%;
hight:100%
margin:0 auto;
position:absolute;
}
#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact textarea, #contact button[type="submit"] { font:30px 18px"Open Sans", Helvetica, times new roman, sans-serif; }
#contact {
background:#ff5733;
padding:50px;
margin:10px 10;
}
span.name { color:blue;font-weight:100%;font-family:Times new roman;
font-size:30px }
#contact h3 {
color: back;
display: block;
font-size: 30px;
font-weight: 100%;
font-family:Times new roman;
}
#contact h4 {
margin:5px 0 15px;
display:block;
font-size:20px;
font-weight:100%;
}
fieldset {
display:block;
border: medium none !important;
margin: auto;
font-size:16px;
min-width: 400px;
padding: 0;
width: 400px;
font-family:Times new roman;
font-weight:100%;
}
input, label {
display:block;
}
#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], width:50%;
border:1px solid #CCC;
background:#FFF;
margin:0 0 5px;
padding:10px;
}
#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact input[type="url"]:hover, #contact textarea:hover {
-webkit-transition:border-color 0.3s ease-in-out;
-moz-transition:border-color 0.3s ease-in-out;
transition:border-color 0.3s ease-in-out;
border:1px solid #AAA;
}
#contact textarea {
height:100px;
max-width:100px;
resize:both;
overflow:auto;
}
#contact button[type="submit"] {
cursor:pointer;
width:auto;
border:none;
margin:auto;
padding:10px;
font-size:15px;
font-family:times new roman;
}
#page {
background:url(../images/bg-page.gif) no-repeat center 0;
height:auto;
width:auto;
margin:0 auto;
}
p a, h4 a {
color: #875316;
}
#header {
font-family: arial;
width:960px;
margin:0 auto;
position:relative;
}
#header a#logo {
background: none;
border: medium none;
display: block;
height: 252px;
margin: 0;
width: 347px;
}
#header a#logo img {
border:0;
position: relative;
z-index: 1;
top: 0;
left: 1px;
}
#header ul {
padding: 10px 0;
margin:5px 0 0 30px;
border: 1px #D5B88E;
border-style: dashed none dashed none;
list-style:none;
width: 300px;
float: none !important;
overflow: hidden;
}
#header ul li {
width: 87px;
padding: 0 6px;
border: 1px #D5B88E;
border-style: none none none dashed;
float: left;
}
#header ul li.first {
border: 0;
}
#header ul li h2 {
margin: 0;
}
#header ul li h2 a {
background: none;
color: #900017;
display: block;
font-size: 18px;
font-weight: bold;
height: auto;
margin: 0;
text-decoration: none;
text-shadow: 0 1px 1px #FFFFFF;
width: auto;
text-align: left;
line-height: 20px;
}
#header ul li span {
text-shadow: 0 1px 1px #FFFFFF;
color: #900017;
margin-top: 3px;
display: block;
font-size: 16px;
}
#header ul#links {
position: absolute;
right: 55px;
top: 100px;
}
#header a {
margin:11px 0 35px 20px;
padding:0;
border:0;
background:url(../images/interface.gif) no-repeat 0 -261px;
width:306px;
height:48px;
text-shadow: 0 1px 1px #553B22;
font-size: 18px;
font-family: arial;
color: #FFFFFF;
font-weight: bold;
cursor:pointer;
text-decoration: none;
display:block;
line-height: 45px;
text-align: center;
}
#header a#button {
position: absolute;
right: 55px;
top: 185px;
}
#header ul#navigation {
border: 0 none;
float: none !important;
margin: 0;
padding: 0;
position: absolute;
width: auto;
right: 10px;
top: 18px;
}
#header ul#navigation li {
border:0;
width: auto;
padding: 0;
text-align: center;
line-height: 50px;
height: 55px;
}
#header ul#navigation li a {
background: none;
color: #FFFFFF;
font-size: 16px;
font-weight: normal;
height: auto;
margin: 0;
text-decoration: none;
text-shadow: none;
width: auto;
outline:none;
}
#header ul#navigation li a:hover {
color: #c0ab8a;
}
#header ul#navigation li#link1 {
width:77px;
}
#header ul#navigation li#link1.selected {
background:url(../images/navigation.gif) no-repeat;
position: relative;
z-index: 9;
}
#header ul#navigation li#link2 {
width:83px;
}
#header ul#navigation li#link2.selected {
background:url(../images/navigation.gif) no-repeat 0 -55px;
}
#header ul#navigation li#link3 {
width:111px;
}
#header ul#navigation li#link3.selected {
background:url(../images/navigation.gif) no-repeat 0 -110px;
}
#header ul#navigation li#link4 {
width:74px;
}
#header ul#navigation li#link4.selected {
background:url(../images/navigation.gif) no-repeat 0 -167px;
}
#header ul#navigation li#link5 {
width:74px;
}
#header ul#navigation li#link5.selected {
background:url(../images/navigation.gif) no-repeat 0 -223px;
}
#header ul#navigation li#link6 {
width:82px;
}
#header ul#navigation li#link6.selected {
background:url(../images/navigation.gif) no-repeat 0 -279px;
}
#header ul#navigation li#link7 {
width:101px;
}
#header ul#navigation li#link7.selected {
background:url(../images/navigation.gif) no-repeat 0 -335px;
}
#header ul#navigation li.selected a {
color:#4e311f;
}
#header img {
left: 347px;
position: absolute;
top: 75px;
}
#header div {
background:url(../images/interface.gif) no-repeat 0 -193px;
width:915px;
height:66px;
margin: 0 auto;
}
#header div h1 {
color: #DFC185;
font-family: arial;
font-size: 30px;
line-height: 70px;
margin: 0;
padding-left: 15px;
float: left;
height: 66px;
}
#header div p {
color: #dadada;
float: left;
font-size: 18px;
line-height: 70px;
margin: 0 0 0 40px;
text-shadow: 0 1px 1px #5C0100;
height: 66px;
}
#header div p a {
color: #FFFFFF;
display: inline;
font-size: 18px;
height: auto;
line-height: 0;
margin: 0;
width: auto;
background: none;
}
/*------------------------- Content --------------------------*/
#content {
width: 960px;
margin: 0 auto;
overflow: hidden;
height: auto;
padding-bottom: 30px;
}
#content div#featured {
background:url(../images/interface.gif) no-repeat;
height: 191px;
padding: 0;
float: none;
margin-top: 7px;
clear: both;
}
#content #featured h2 {
color: #8E0519;
font-family: arial;
margin: 0;
padding: 20px 0 0 30px;
text-shadow: 0 1px 1px #FFFFFF;
font-size: 29px;
}
#content #featured ul {
margin: 0;
padding: 5px 0 0 30px;
list-style: none;
height: auto;
overflow: hidden;
float: left;
width: auto;
}
#content #featured ul li.first {
margin-left: 0;
}
#content #featured ul li {
float:left;
text-align: center;
margin-left: 15px;
border: 0;
}
#content #featured ul li.last a img {
border: 0!important;
}
#content #featured ul li a {
border: 0 none;
color: #271500;
display: block;
float: none;
font-family: arial;
font-size: 14px;
margin: 0;
text-decoration: none;
text-indent: 0;
background: none;
width: auto;
height: auto;
}
#content #featured ul li a:hover {
background: none;
}
#content #featured ul li a img {
border: 1px solid #f4e5cd !important;
float: none;
}
#content #featured ul li a img:hover {
filter:alpha(opacity=80);
opacity:0.8;
}
#content #featured a img {
border: 0!important;
margin-right: 0;
float: none;
}
#content div.featured {
background:url(../images/interface.gif) no-repeat -3px 0;
height: 191px;
padding: 0;
float: none;
margin-top: 7px;
clear: both;
}
#content .featured h2 {
color: #8E0519;
font-family: arial;
margin: 0;
padding: 20px 0 0 30px;
text-shadow: 0 1px 1px #FFFFFF;
font-size: 29px;
}
#content .featured ul {
margin: 0;
padding: 5px 0 0 30px;
list-style: none;
height: auto;
overflow: hidden;
float: left;
width: auto;
}
#content .featured ul li.first {
margin-left: 0;
}
#content .featured ul li {
float:left;
text-align: center;
margin-left: 19px;
border: 0;
}
#content .featured ul li a {
border: 0 none;
color: #271500;
display: block;
float: none;
font-family: arial;
font-size: 14px;
margin: 0;
text-decoration: none;
text-indent: 0;
background: none;
width: auto;
height: auto;
}
#content .featured ul li a:hover {
background: none;
}
#content .featured ul li a img {
border: 1px solid #f4e5cd !important;
float: none;
}
#content .featured ul li.last a {
color: #ab9675;
font-weight:bold;
text-shadow: 0 1px 0 #f4e5cd;
}
#content .featured ul li.last a img {
border: 0!important;
padding:0 0 11px 0;
}
#content .featured ul li a img:hover {
filter:alpha(opacity=80);
opacity:0.8;
}
#content .featured a {
float: left;
margin: 18px 0 0 13px;
text-decoration: none;
padding: 0;
border: 0;
background:no-repeat;
width: 78px;
height: 78px;
text-indent: -99999px;
}
#content .featured a:hover {
background:no-repeat -78px 0;
}
#content .featured a img {
border: 0!important;
margin-right: 0;
float: none;
}
#content div.section1 {
float: left;
margin: 20px 0 0;
padding: 0 0 0 30px;
width: 225px;
}
#content div.section2 {
float: left;
margin: 20px 0 0;
padding: 0 0 0 25px;
width: 455px;
}
#content div h2 {
color: #AE0A25;
font-family: arial;
font-size: 20px;
margin: 0;
}
#content div ul#article {
list-style:none;
padding: 0;
margin: 0;
width: auto;
}
#content div ul#article li.first {
border: 0;
padding: 0;
}
#content div ul#article li {
border-width: 1px;
border-style: dashed none none none;
border-color: #c39f63;
margin-top: 10px;
padding: 10px 0 0;
}
#content div ul#article li a {
font-family: arial;
text-decoration: none;
font-weight: normal;
}
#content div ul#article li a p {
color: #875115;
padding: 7px 0 15px 0;
text-align: justify;
font-size: 15px;
width: 231px;
font-weight: normal;
line-height: 17px;
margin: 0;
}
#content div ul#article li a span {
color: #b00923;
font-size: 14px;
font-weight: bold;
font-style: normal;
}
#content div.section2 p {
color: #875115;
font-family: arial;
font-size: 14px;
font-weight: bold;
margin: 10px 0;
width: 375px;
line-height: 17px;
}
#content div img {
float: left;
margin-right: 10px;
border: 1px solid #FFFFFE;
}
#content div h3 {
float: left;
margin: 0;
color: #875115;
font-size: 15px;
font-weight: normal;
font-family: arial;
}
#content div ul {
color: #895315;
float: left;
margin: 0 0 10px 15px;
padding: 0;
width: 200px;
}
#content ul li p {
font-size: 14px !important;
font-weight: normal !important;
margin: 0 !important;
width: auto !important;
text-align: left;
}
#content ul li p a {
color: #875316;
font-weight: normal;
text-decoration: underline !important;
}
#content div div#section1 {
float: left;
margin: 5px 0 0;
padding: 0;
width: 300px;
}
#content div div#section1 ul li p {
font-size: 14px;
}
#content div div#section2 {
float: left;
margin: 5px 0 0 10px;
padding: 0;
width: 145px;
}
#content div div#section2 ul li img {
margin: 0;
}
#content div div#section2 ul li h4 {
float: left;
font-family: arial;
font-size: 15px;
font-weight: bold;
margin: 10px 0 0;
text-align: left;
width: 140px;
}
#content div div#section2 ul li p {
width: 140px;
font-size: 14px;
}
#content div div ul {
list-style:none;
margin: 0;
width: auto;
}
#content div div ul li {
overflow:hidden;
margin-bottom: 20px;
}
#content div div ul li h4 {
float: left;
margin: 0;
font-family: arial;
font-size: 15px;
font-weight: bold;
width: 155px;
text-align: left;
}
#content div div ul li h4 a {
text-decoration: none;
}
#content div.section3 {
float: left;
margin: 20px 0 0;
padding: 0 20px;
width: 175px;
position: relative;
}
#content div.section3 a {
font-family: arial;
font-size: 13px;
color: #875316;
text-decoration: none;
font-weight: bold;
display: block;
margin: 10px 0 0 0;
}
a#email {
background: url(../images/icons.gif) no-repeat;
padding: 0 0 0 30px;
height: 16px;
}
a#facebook {
background: url(../images/icons.gif) no-repeat 0 -18px;
padding: 0 0 0 30px;
height: 22px;
line-height: 23px;
}
a#twitter {
background: url(../images/icons.gif) no-repeat 0 -42px;
padding: 0 0 0 30px;
height: 18px;
}
#content div.section3 form {
margin: 20px 0 0 0;
}
#content div.section3 form h3 {
color: #b00923;
float: left;
font-family: arial;
font-size: 15px;
font-weight: normal;
padding: 0;
margin: 0;
}
#content div.section3 form input {
border-color: #BBAD99;
border-style: solid none none solid;
border-width: 1px;
height: auto;
padding: 5px 5px 7px;
width: 158px;
color: #AFAFAF;
font-size: 14px;
font-style: italic;
}
#content div.section3 img {
border: 0 none;
float: none;
left: 15px;
_left: 11px;
margin: 0;
position: absolute;
top: 239px;
*top: 241px;
_top: 231px;
}
#content div {
padding: 0 10px 0 35px;
float: left;
}
#content div h1 {
font-family: arial;
font-size: 30px;
color: #8F0417;
font-weight: bold;
text-shadow: 0 1px 1px #FFFFFF;
margin: 0;
padding: 20px 0;
}
#content div h4 {
font-family: arial;
font-weight: bold;
color: #875316;
font-size: 14px;
width: 585px;
line-height: 20px;
margin: 0 0 5px 0;
}
#content div span {
color: #9e805e;
font-family: arial;
font-style: italic;
font-size: 14px;
}
#content div p {
color: #875316;
font-size: 15px;
font-weight: normal;
font-family: arial;
margin: 15px 0;
line-height: 25px;
text-align: justify;
width: 585px;
}
#content div#blog {
margin: 76px 0 0;
padding: 0 20px 5px;
width: 270px;
}
#content div#blog h4 {
width: auto;
}
#content div#blog h4 a {
text-decoration: none;
}
#content div#blog span {
width: auto;
}
#content div#blog p {
width: auto;
margin: 10px 0 38px 0;
}
#content div#zoo {
float: none;
padding: 0 35px;
height: 713px;
}
#content div#zoo h3 {
float: none;
font-weight: bold;
}
#content div#zoo h4 {
font-weight: normal;
margin: 10px 0;
width: auto;
}
#content div#contact {
float: none;
padding: 0 60px;
height: 713px;
}
#content div#zoo p {
width: auto;
margin: 5px 0 30px;
font-size: 14px;
}
#content div#contact p {
margin: 5px 0 30px;
width: 540px;
}
#content div#contact p a {
color: #875316;
display: inline;
font-family: arial;
font-size: 15px;
font-weight: normal;
margin: 10px 0 0;
text-decoration: underline;
}
#content div#contact a {
color: #875316;
display: block;
font-family: arial;
font-size: 13px;
font-weight: bold;
margin: 10px 0 0;
text-decoration: none;
}
#content div#contact form {
margin: 20px 0 0;
}
#content div#contact form input {
border-color: #BBAD99;
border-style: solid none none solid;
border-width: 1px;
height: auto;
padding: 5px 5px 7px;
width: 158px;
color: #AFAFAF;
font-size: 14px;
font-style: italic;
clear: both;
float: left;
}
#content div#contact form h3 {
color: #B00923;
font-weight: bold;
line-height: 25px;
margin: 0 5px 0 0;
}
#content div#events {
padding: 0 35px;
height: 911px;
}
#content div#events p {
width: 585px !important;
float: left;
margin: 5px 0 0 !important;
font-size: 14px !important;
}
#content div#events ul {
list-style: none;
margin: 0;
width: auto;
}
#content div#events ul li {
margin: 0 0 37px;
overflow: hidden;
height: 1%;
}
#content div#events ul li div {
width: 268px;
height: 213px;
background: #dbc6a9;
padding: 1px;
float: left;
margin: 0 20px 0 0;
}
#content div#events ul li div a img {
border: 1px solid #fff;
margin: 0;
}
#content div#events ul li div a img:hover {
filter:alpha(opacity=80);
opacity:0.8;
}
#content div#events ul li h4 {
float: left;
text-transform: uppercase;
}
#content div#events ul li h4 a {
color: #875316;
font-family: arial;
font-size: 14px;
font-weight: bold;
line-height: 20px;
margin: 0 0 5px;
width: 585px;
text-decoration: none;
}
#content div#gallery {
width: 745px;
margin: 0 auto;
float: none;
height: 911px;
padding-left: 45px;
}
#content div#gallery ul {
float: none;
list-style: none;
margin: 0;
width: auto;
overflow: hidden;
}
#content div#gallery ul li {
float: left;
margin: 0 32px 41px 0;
}
#content div#gallery ul li div {
float: none;
height: 213px;
padding: 1px;
width: 214px;
background: #DBC6A9;
margin: 0 0 5px;
}
#content div#gallery ul li div a img {
margin: 0;
float: none;
}
#content div#gallery ul li div a img:hover {
filter:alpha(opacity=80);
opacity:0.8;
}
#content div#gallery ul li a {
display: block;
font-size: 15px;
color: #721f1f;
text-decoration: none;
font-family: arial;
font-weight: bold;
text-align: center;
}
#content div#tickets {
float: none;
height: 713px;
padding: 0 35px;
}
#content div#tickets ul {
float: none;
margin: 0;
width: auto;
list-style: none;
overflow: hidden;
padding: 15px 0 0;
}
#content div#tickets ul li.first {
margin: 0;
}
#content div#tickets ul li {
width: 267px;
height: auto;
float: left;
margin: 0 0 0 44px;
}
#content div#tickets ul li div {
float: none;
padding: 1px;
background: #DBC6A9;
width: 267px;
height: 213px;
}
#content div#tickets ul li div a img {
margin: 0;
}
#content div#tickets ul li div a img:hover {
filter:alpha(opacity=80);
opacity:0.8;
}
#content div#tickets h2 {
padding: 20px 0 0;
text-align: center;
font-size: 0;
}
#content div#tickets h2 a {
text-decoration: none;
color: #875316;
font-family: arial;
font-weight: bold;
font-size: 14px;
text-transform: uppercase;
}
#content div#tickets p {
margin: 15px 0 10px !important;
text-align: justify;
width: auto !important;
font-size: 14px!important;
padding: 0 2px;
}
#content div#tickets span {
font-style: normal;
color: #875316;
margin: 0 30px 0 0;
}
#content div#info {
float: none;
height: 713px;
padding: 0 35px;
}
#content div#info p {
width: auto;
font-size: 14px;
}
#content div#info ul {
list-style: none;
margin: 0;
width: auto;
padding: 0;
}
#content div#info ul li {
float: left;
margin: 0 15px 32px;
text-align: center;
width: 261px;
}
#content div#info ul li h2 {
margin: 15px 0;
}
#content div#info ul li h2 a {
color: #875316;
font-weight: bold;
text-transform: uppercase;
font-size: 14px;
margin: 15px 0;
text-decoration: none;
}
#content div#info ul li p {
text-align: justify;
}
#content div#live h1 {
padding: 20px 0 5px;
}
#content div#live {
float: none;
padding: 0 35px;
height: 911px;
}
#content div#live p {
width: auto;
margin: 0 0 15px;
}
</style>
</head>
<body>
<div class="container">
<form id="contact" action="" method="post">
<h3 align="center">Get in <span class="name">Touch with us</span></h3>
<h4 align="center">Lorem ipsum is simply dummy text of the printing and typesetting industry.</h4>
<fieldset>
<label for="subject">Your Name</label>
<input placeholder="Enter your name" type="text" tabindex="1" required autofocus>
</fieldset>
<fieldset>
<label for="subject">Email Address</label>
<input placeholder="Enter Email Address" type="email" tabindex="2" required>
</fieldset>
<fieldset>
<label for="subject">Mobile Number</label>
<input placeholder="Enter your Number" type="tel" tabindex="3" required>
</fieldset>
<fieldset>
<label for="subject">Message</label>
<textarea placeholder="Enter your message" tabindex="5" required></textarea>
</fieldset>
<fieldset>
<button name="Submit" type="submit" id="contact-submit" data-submit="...Sending">Send Message</button>
</fieldset>
</form>
</div>
</body>
</html>
The webiste for the above description is as follows. Hope you'll like it.It carries the complete code needed to run the website as shown in the output section.Thankyou
index.html
<!DOCTYPE html>
<html>
<head>
<title>Animal Kingdom Zoo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<div id="page">
<div id="header"> <a href="#" id="logo"><img src="images/logo.jpg" alt=""/></a>
<ul>
<li class="first">
<h2><a href="live.html">Live</a></h2>
<span>Have fun in your visit</span> </li>
<li>
<h2><a href="#">Love</a></h2>
<span>Donate for the animals</span> </li>
<li>
<h2><a href="#">Learn</a></h2>
<span>Get to know the animals</span> </li>
</ul>
<a href="#">Buy tickets / Check Events</a>
<ul id="navigation">
<li id="link1" class="selected"><a href="index.html">Home</a></li>
<li id="link2"><a href="zoo.html">The Zoo</a></li>
<li id="link3"><a href="info.html">Visitors Info</a></li>
<li id="link4"><a href="tickets.html">Tickets</a></li>
<li id="link5"><a href="events.html">Events</a></li>
<li id="link6"><a href="gallery.html">Gallery</a></li>
<li id="link7"><a href="contact.html">Contact Us</a></li>
</ul>
<img src="images/lion-family.jpg" alt=""/>
<div>
<h1>Special Events:</h1>
<p>This website template has been designed by Akshay Bisht Productions.....</p>
</div>
</div>
<div id="content">
<div id="featured">
<h2>Meet our Animals</h2>
<ul>
<li class="first"> <a href="#"><img src="images/penguin.jpg" alt=""/></a> <a href="#">Penguin</a> </li>
<li> <a href="#"><img src="images/elephant.jpg" alt=""/></a> <a href="#">Elephant</a> </li>
<li> <a href="#"><img src="images/owl.jpg" alt=""/></a> <a href="#">Owl</a> </li>
<li> <a href="#"><img src="images/butterfly.jpg" alt=""/></a> <a href="#">Butterfly</a> </li>
<li> <a href="#"><img src="images/turtle.jpg" alt=""/></a> <a href="#">Turtle</a> </li>
<li> <a href="#"><img src="images/snake.jpg" alt=""/></a> <a href="#">Snake</a> </li>
<li> <a href="#"><img src="images/gorilla.jpg" alt=""/></a> <a href="#">Gorilla</a> </li>
<li class="last"> <a href="#"><img src="images/button-view-gallery.jpg" alt=""/></a> <a href="gallery.html">Gallery</a> </li>
</ul>
</div>
<div class="section1">
<h2>Events</h2>
<ul id="article">
<li class="first"> <a href="#"><span>Jul 17</span></a>
<p>This website template has been designed by Akshay Bisht Productions.....</p>
</li>
<li> <a href="#"><span>Aug 23</span></a>
<p>This website template has been designed by Akshay Bisht Productions.....</p>
</li>
<li> <a href="#"><span>Oct 01</span></a>
<p>This website template has been designed by Akshay Bisht Productions.....</p>
</li>
</ul>
</div>
<div class="section2">
<h2>Blog : Dolphins</h2>
<p>This website template has been designed by Akshay Bisht Productions.....p>
<a href="#"><img src="images/dolphins.jpg" alt=""/></a>
<ul>
<li>
<p>This website template has been designed by Akshay Bisht Productions.....</p>
</li>
<li>
<p>This website template has been designed by Akshay Bisht Productions.....</p>
</li>
<li>
<p>This website template has been designed by Akshay Bisht Productions.....</p>
</li>
<li>
<p>This website template has been designed by Akshay Bisht Productions.....</p>
</li>
<li>
<p>This website template has been designed by Akshay Bisht Productions.....</p>
</li>
</ul>
<div id="section1">
<ul>
<li> <a href="#"><img src="images/gorilla-2.jpg" alt=""/></a>
<h4><a href="#">This website template has been designed by Akshay Bisht Productions.....</a></h4>
<p>This website template has been designed by Akshay Bisht Productions.....</p>
</li>
<li> <a href="#"><img src="images/snake-2.jpg" alt=""/></a>
<h4><a href="#">This website template has been designed by Akshay Bisht Productions.....</a></h4>
<p>This website template has been designed by Akshay Bisht Productions.....</p>
</li>
</ul>
</div>
<div id="section2">
<ul>
<li> <a href="#"><img src="images/butterfly-2.jpg" alt=""/></a>
<h4><a href="#">This website template has been designed by Akshay Bisht Productions.....</a></h4>
<p>This website template has been designed by Akshay Bisht Productions.....</p>
</li>
</ul>
</div>
</div>
<div class="section3">
<h2>Connect</h2>
<a href="#" id="email">Email Us</a> <a href="#" id="facebook">Facebook</a> <a href="#" id="twitter">Twitter</a>
<form action="#">
<h3>Subscribe to our</h3>
<h2>NEWSLETTER</h2>
<input type="text" value="your email here..." />
</form>
<img src="images/penguin2.jpg" alt=""/> </div>
</div>
<div id="footer">
<div> <a href="#" class="logo"><img src="images/animal-kingdom.jpg" alt=""/></a>
<div>
<p>This website template has been designed by Akshay Bisht Productions.....</p>
<span>817847238741287348</span> <span>email@lodalappa.com</span> </div>
<ul class="navigation">
<li><a href="index.html">Home</a></li>
<li><a href="tickets.html">Tickets</a></li>
<li><a href="zoo.html">The Zoo</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="gallery.html">Gallery</a></li>
</ul>
<ul>
<li><a href="#">Live : Have fun in your visit</a></li>
<li><a href="#">Love : Donate for the animals</a></li>
<li><a href="#">Learn : Get to know the animals</a></li>
</ul>
<p>Copyright © <a href="#">Animalkingdomzoo.in<a> This website template has been designed by <a target="_blank" href="#">Akshay Bisht Productions</a></p>
</div>
</div>
</div>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.