Rakesh Bijawat , BCA Third Year

INFORMATION TECHNOLOGY
PROJECT REPORT
HTML PROGRAMMING
Topic:
Image Gallery
HTMLSubmitted By:
Rakesh Bijawat
Bachelors of Computer Application Ist
Year
Dezyne E´cole College
www.dezyneecole.com

Project Report
On
HTML
At
Ajmer
Submitted by:-
Towards The
Partial Fulfillment on
BCA
(Bachelors of Computer Application)
By
Rakesh Bijawat
106/10, Civil lines, Ajmer
Tel.-0145-2624679
www.dezyneecole.com

Acknowledgement
I Rakesh Bijawat, Student of Dezyne E´Cole College, I Am Extremely
Grateful To Each And Every Individual Who Has Contributed In
Successful Completion of My Project. I Express My Gratitude
Towards Dezyne E´Cole College For Their Guidance And Contrast
Supervision As Well As For Providing The Necessary Information And
Support Regarding The Completion Of Project.
Thank You
Rakesh Bijawat
BCA Ist Year

Synopsis
This Project Is A Minor Project Made, Based On The Practical Concept Of
HTML. This Project Has Made Our Basic Practical Concepts On HTML Strong.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Image Gallery</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="frame0">
<h1>Image Gallery </h1>
<p> </p>
</div>
<div class="w3gallery">
<a tabindex="1"><img src="images/1.jpg"></a>

</div>
<div style="text-align:center; margin-top:10px;">You can also use
<strong>tab</strong> or <strong>(shift+tab)</strong> keyboard button
to switch between images.
<br><br>
<script type="text/javascript">
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<br>
<br>

</div>
</body>
</html>
CSS Coding
/* layout styles */
* {
margin:0;
padding:0;
}
body {
background-color:#fff;
font:14px/1.3 Verdana, sans-serif;
color:#333;
}
a {
color:#09C;
}
#frame0 {
background-color: #F7F7F7;

border: 1px solid #EEEEEE;
border-radius: 2px 2px 2px 2px;
margin: 30px auto auto;
padding: 10px;
width: 750px;
}
/* Photo Gallery styles */
.w3gallery {
margin: 50px auto 0;
width: 800px;
}
.w3gallery a {
display: inline-block;
height: 135px;
position: relative;
width: 180px;
/* Prevent selections CSS3*/
-moz-user-select: none;
-webkit-user-select: none;
-khtml-user-select: none;
user-select: none;
}

.w3gallery a img {
border: 8px solid #fff;
border-bottom: 20px solid #fff;
cursor: pointer;
display: block;
height: 100%;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
z-index: 1;
border-radius: 2px 2px 2px 2px;
/* Box sizing property CSS3*/
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
/* transition rules CSS3*/
-webkit-transition: all 1.0s ease;
-moz-transition: all 1.0s ease;
-o-transition: all 1.0s ease;
transition: all 1.0s ease;

/* Box Shadow CSS3*/
-moz-box-shadow: 0 1px 3px rgba(34, 25, 25, 0.6);
-webkit-box-shadow: 0 1px 3px rgba(34, 25,
25, 0.6);
-o-box-shadow: 0 1px 3px rgba(34, 25, 25,
0.6);
box-shadow: 0 1px 3px rgba(34, 25, 25, 0.6);
}
/* Defined CSS3 rotate transformation */
.w3gallery a:nth-child(1) img {
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
}

}
}
-moz-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
}
}

}
}
}
}

}
.w3gallery a:focus img {
cursor: default;
height: 250%;
left: -150px;
top: -100px;
position: absolute;
width: 250%;
z-index: 25;
/* transition rules CSS3*/
-webkit-transition: all 1.0s ease;
-moz-transition: all 1.0s ease;
-o-transition: all 1.0s ease;
transition: all 1.0s ease;
/* transform rules CSS3*/
-o-transform: rotate(0deg);
}

Rakesh Bijawat , BCA Third Year

Recommended

Recommended

More Related Content

Similar to Rakesh Bijawat , BCA Third Year

Similar to Rakesh Bijawat , BCA Third Year (20)

More from Dezyneecole

More from Dezyneecole (20)

Recently uploaded

Recently uploaded (20)

Rakesh Bijawat , BCA Third Year