Kirtesh Khandelwal,Project on HTML and CSS ,Final Year BCA , Dezyne E'cole College

SMART LEARNING WEB
COMPUTER FUNDAMENTAL
A WORK REPORT SUBMITTED
IN PARTIAL FULLFILLMENT OF THE REQUIREMENT FOR THE DEGREE
Bachelor of Computer Application
Dezyne E’cole College
106/10, CIVIL LINES
AJMER
RAJASTHAN - 305001 (INDIA)
(JULY, 2015)
www.dezyneecole.com
SUBMITTED BY
KIRTESH KHANDELWAL
CLASS: BCA 2ND
YEAR

PROJECT APPLICATION
I am KIRTESH KHANDELWAL Student of 2nd year doing my Bachelor Degree in
Computer Application. This project has been created at Dezyne E’cole College and
we have made this project using HTML and CSS language.
The website developed is small idea generation of E-learning.
I am a fresher and I have used my skills have to create best possible design
according to me. In the following pages I have given the coding and the pages
created.

In the following pages I am showcasing my work.
<html>
<head>
<title>Smart Learning Web</title>
<link rel="stylesheet" href="css/welcome.css" type="text/css" />
<link rel="shortcut icon" href="icon/logo.jpg" type="image/x-icon" />
</head>
<body>
<section class="overlay">

<div class="header">
<div class="head-left">
<div> <img src="icon/logo.jpg" class="img" /></div>
</div>
<div class="head-right">

<a href="#twitter" class="icon-button twitter"><i class="icon-
twitter">t</i><span></span></a>
<a href="#Facebook" class="icon-button facebook"><i class="icon-
facebook">f</i><span></span></a>
<a href="#Google+" class="icon-button google-plus"><i class="icon-
google-plus">g+</i><span></span></a>
</div>
</div>
<div class="navigation">
<nav>
<h1>Smart Learning Web</h1>
<span class="subject">Computer Fundamental</span>
<section class="breaker"></section>
<ul>
<li>
<a href="home.html">
<img src="icon/h.png" height="115px"/>
<span>Home</span>
</a>
</li>
<li>
<a href="content.html">
<img src="icon/v.png" height="115px"/>
<span>Contents</span>
</a>
</li>
<li>

<a href="gallery.html">
<img src="icon/picture18.png" height="115px" width="115"/>
<span>Gallery</span>
</a>
</li>
<li>
<a href="download.html">
<img src="icon/d.png" height="115px"/>
<span>Downloads</span>
</a>
</li>
<li>
<a href="contact.html">
<img src="icon/c.png" height="115px"/>
<span>Contact Us</span>
</a>
</li>
<li>
<a href="about.html">
<img src="icon/m.png" height="115px"/>
<span>About Us</span>
</a>
</li>
</ul>
</nav>
</div>

<img src="bg-img/footer.png" width="100%" height="2px"/>

<div class="footer">
<div class="foot-left">Designed by: <span class="n">Kirtesh Khandelwal
(Bachelor of Computer Application 2nd year)</span></div>
<div class="foot-right">
Dezyne E'cole College
</div>
</div>

</section>
</body>
</html>
/* WELCOME CSS*/
body, div, h1, h2, h3, h4, h5, h6, p, ul{
margin: 0; padding: 0; border: 0;
}
a{text-decoration:none;}
body{background:url(../bg-img/wel.jpg) no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
margin:0;}
.overlay{background:url(../bg-img/over) no-repeat fixed; width:100%; height:100%;}
/* header start */
.header{background:#;
height:79px;
border-bottom:5px solid #333;}
.head-left{background:#fff;
float:left;

padding:1%;
width:120px;
height:120px;
margin:1 0 0 43%;
border-bottom:#000 solid 2px;
border-left:#000 solid 2px;
border-right:#ddd solid 2px;
border-top:#ddd solid 2px;
border-width:5px;
border-radius:50%;
-webkit-transform: rotate(-45deg);
}
.head-left:hover .img{-webkit-transform:rotate(-360deg);
-webkit-transition: -
webkit-transform 2s;}
.head-left .img{border:#333 dashed 2px;
border-radius:50%;
-webkit-transform: rotate(45deg);
height:115px;
width:115px;
-webkit-transition: -webkit-transform
5s; }
/* social buttons */
.icon-button {
background-color: #eaeaed;
border-radius: 50%;
cursor: pointer;
display: inline-block;

font-size: 30px;
height: 55px;
line-height: 1.0em;
margin: 0 5px;
position: relative;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
width: 55px;
}
/* circle */
.icon-button span {
border-radius: 0;
display: block;
height: 0;
left: 50%;
margin: 0;
position: absolute;
top: 50%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
width: 0;
}
.icon-button:hover span {
width: 60px;
height: 60px;
border-radius: 50%;
margin: -30px;

}
.twitter span {
background-color: #4099ff;
}
.facebook span {
background-color: #3B5998;
}
.google-plus span {
background-color: #db5a3c;
}
/* icons */
.icon-button i {
background: none;
color: white;
height: 55px;
left: 0;
line-height: 55px;
position: absolute;
top: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
width: 55px;
z-index: 10;
}
.icon-button .icon-twitter {
color: #4099ff;
}
.icon-button .icon-facebook {

color: #3B5998;
}
.icon-button .icon-google-plus {
color: #db5a3c;
}
.icon-button:hover .icon-twitter,
.icon-button:hover .icon-facebook,
.icon-button:hover .icon-google-plus {
color: white;
}
.head-right{float:right;
margin:20 40 0 0;}
/* navigations */
.navigation { height:65%;
width: 70%; margin: 8% 0 0 15%;
}
.navigation h1{color: #111; margin:0 0 30px 0; text-align:center; font:600 4em 'century gothic';}
.navigation .subject{font:600 18px 'century gothic'; background:#333; text-transform:uppercase;
color:#fff; text-align:center; padding:10 10 10 10px; margin:0 0 0 35%;}
.breaker{background:#fff; color:#fff; text-align:center; width:480px; height:1px; clear:both; margin:-
10 0 30px 25%;}
nav ul { margin:0 0 0 25px;
top:30px;
list-style: none; overflow: hidden; position: relative;
}
nav ul li {
float: left; margin: 0 20px 0 15;

}
li:hover{border-bottom:#333 solid 5px; border-radius:6px;}
nav ul li a {
display: block; width: 120px; height: 120px;
background-image: url(); background-repeat: no-repeat;
}
nav ul li:nth-child(1) a {
background:#;
background-position: 28px 28px;
}
background-color: #;
background-position: 28px 28px;
}
background-position: 28px -96px;
}
}
}

}
nav ul li a span {
font: 50px "arial"; text-transform: uppercase;
position: fixed; left: 40%; top: 75%;
display: none;
}
nav ul li a:hover span {
display: block;
}
nav ul li:nth-child(1) a span {
color: #5bb2fc;
}
color: #5bb2fc;
}
color: #58ebd3;
}
color: #ffa659;
}
color: #ff7a85;
}
color: #ff7a85;

}
/* footer start */
.footer{background:#;
height:5%;
}
.foot-left{float:left;
margin:0 0 0 50;
font: 20px 'Tw Cen MT Condensed';}
.n{color:#065;}
.foot-right{float:right;
color:#068;
margin:0 50 0 10;
/* footer end */

<html>
<head>
<title>Smart Learning Web - Home</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
</div>
<div style="float:left; margin:10 0 0 40;font:3.0em 'Tw Cen MT Condensed';">
Smart Learning Web - Home
</div>
<a href="content.html"><div class="content">content</div></a>

<a href="gallery.html"><div class="gallery">gallery</div></a>
<a href="download.html"><div
class="downlod">downloads</div></a>
<a href="contact.html"><div class="">contact</div></a>
<a href="about.html"><div class="about">about</div></a>
<div class="div1" style="margin-top:0; padding:6px;" title="Exit">
<a href="Welcome.html">
<section class="logout" ></section>
</a>
</div>
</div>
</div>


<div class="container">
<div class="side-bar" tabindex="1">
<div class="menu-1">
<div class="icons-left">
<div class="icon-home" style="border:#000 solid 1px;
border-radius:10px;"><a href="home.html"><img src="icon/app-icon/home.png"
height="70px"/></a></div>
<div class="icon-content"><a
href="content.html"><img src="icon/app-icon/content.png" height="70px"/></a></div>
<div class="icon-gal"><a href="gallery.html"><img
src="icon/app-icon/gal.png" height="70px"/></a></div>
</div>
<div class="icons-right">
<div class="icon-down"><a
href="download.html"><img src="icon/app-icon/download.png" height="70px"/></a></div>

<div class="icon-contact"><a
href="contact.html"><img src="icon/app-icon/contact.png" height="70px"/></a></div>
<div class="icon-about"><a href="about.html"><img
src="icon/app-icon/about.png" height="70px"/></a></div>
</div>
</div>
<img src="icon/arrow.png" class="menu-icon arrow"/>
</div>
<div class="data">
<div class="home-content-left">
<h1>Hello!</h1>
<div class="topic1">Welcome to Smart Learning Web.</div>
<p class="topic">Computer Fundamental</P>
<p>Smart Learning Web is the Web Application for learning
data about Computer Fundamental, You can Learn and Download data.</p>
</div>
<div class="video">
<video controls="controls" width="50%" height="70%"
id="video1">
<source src="wildlife.ogv" type='video/ogg;
codecs="theora, vorbis"'>
<source src="vids/2.mp4" type='video/mp4;
codecs="avc1.42E01E, mp4a.40.2"'>
</video>
</div>
<div class="home-content-bottom">

<p>Please tell your friends about Smart Learning Web
Application.</p>
</div>
</div>
</div>

</div>
</div>

</body>
</html>

<html>
<head>
<title>Smart Learning Web - Contents</title>
</head>
<body>
</div>
Smart Learning Web - Contents
</div>

</a>
</div>
</div>
</div>

<div class="icon-home"><a href="home.html"><img
src="icon/app-icon/home.png" height="70px"/></a></div>
<div class="icon-content" style="border:#000 solid
1px; border-radius:10px;"><a href="content.html"><img src="icon/app-icon/content.png"
</div>
</div>
</div>
<img src="icon/arrow.png" class="menu-icon"/>

</div>
<div class="data">
<div class="row-1">
<a href="#ch-1"><div class="ch-1">An Introduction</div></a>
<a href="#ch-2"><div class="ch-2">computer
memory</div></a>
<a href="#ch-3"><div class="ch-3">dataware house</div></a>
<a href="#ch-4"><div class="ch-4">Real Time
Processing</div></a>
</div>
<div class="row-2">
<a href="#ch-5"><div class="ch-5">Computer
Generation</div></a>
<a href="#ch-6"><div class="ch-6">computer virus</div></a>
<a href="#ch-7"><div class="ch-7">Computer
software</div></a>
<a href="#ch-8"><div class="ch-8">number system</div></a>
</div>
<div class="row-3">
<a href="#ch-9"><div class="ch-9">Input Devices</div></a>
network</div></a>
<a href="#ch-11"><div class="ch-11">application of
computer</div></a>
<a href="#ch-12"><div class="ch-12">k-
mapping<br>&<br>truth table</div></a>
</div>
<div class="row-4">
<a href="#ch-13"><div class="ch-13">Output
devices</div></a>
languages</div></a>

<a href="#ch-15"><div class="ch-15">internet</div></a>
<a href="#ch-16"><div class="ch-16">boolean
algebra</div></a>
</div>
</div>
</div>


<div id="ch-1" class="dlg">
<div>
<span class="title">An Introduction</span>
<a href="#close" title="Close" class="close">X</a>
<h2>UNIT-1</h2>
<div style="height:80%;">
<iframe src="contents/ch-1.html" style="border:0;" height="100%"
width="100%" ></iframe>
</div>
</div>
</div>


<div>
<span class="title">computer memory</span>
<div class="units">
<h2>UNIT-5</h2>
</div>

<div class="search">
<input type="text" name="search" placeholder="Search Keyword" />
</div>
<iframe src="contents/computer memory.html" style="border:0;"
height="100%" width="100%" ></iframe>
</div>
</div>
</div>


<div>
<span class="title">dataware house</span>
<h2>UNIT-9</h2>
<iframe src="contents/dataware house.html" style="border:0;"
</div>
</div>
</div>

<div>
<span class="title">Real Time Processing</span>
<h2>UNIT-13</h2>
<iframe src="contents/rtp.html" style="border:0;" height="100%"
</div>
</div>
</div>


<div>
<span class="title">computer generation</span>
<h2>UNIT-2</h2>
<iframe src="contents/ch-2.html" style="border:0;" height="100%"
</div>
</div>
</div>

<div>
<span class="title">computer virus</span>
<h2>UNIT-6</h2>
<iframe src="contents/computer virus.html" style="border:0;" height="100%"
</div>
</div>
</div>


<div>
<span class="title">computer softwares</span>
<h2>UNIT-10</h2>
<iframe src="contents/cmputer software.html" style="border:0;"
</div>
</div>
</div>


<div>

<span class="title">number system</span>
<h2>UNIT-14</h2>
Pending
</div>
</div>
</div>


<div>
<span class="title">input device</span>
<h2>UNIT-3</h2>
<iframe src="contents/input devices.html" style="border:0;" height="100%"
</div>
</div>
</div>


<div>
<span class="title">computer network</span>

<h2>UNIT-7</h2>
<iframe src="contents/cmputer network.html" style="border:0;"
</div>
</div>
</div>


<div>
<span class="title">application of computer</span>
<h2>UNIT-11</h2>
<iframe src="contents/appofcomp.html" style="border:0;" height="100%"
</div>
</div>
</div>


<div>
<span class="title">k-mapping & truth table</span>
<h2>UNIT-15</h2>

Pending
</div>
</div>
</div>


<div>
<span class="title">output devices</span>
<h2>UNIT-4</h2>
<iframe src="contents/output devices.html" style="border:0;" height="100%"
</div>
</div>
</div>


<div>
<span class="title">computer languages</span>
<h2>UNIT-8</h2>

</div>
</div>
</div>

</div>
</div>

</body>
</html>

<html>
<head>
<title>Smart Learning Web - Downloads</title>
<link rel="stylesheet" href="css/download.css" type="text/css" />
</head>
<body>
</div>
Smart Learning Web - Downloads
</div>

</a>
</div>
</div>
</div>

</div>
<div class="icon-down" style="border:#000 solid 1px;
border-radius:10px;"><a href="download.html"><img src="icon/app-icon/download.png"
</div>

</div>
</div>
<div class="data">
<div class="description">
<p>Download the Pictures of Computers, their Input and
Output Devices, Important Definitions, Videos of our presentation on Fundamental of Computers and
Presentations.</p>
</div>
</div>
<div class="content">
<ul class="download-banner">
<li>
<div class="bg picture"></div>
<div class="info">
<h3>Pictures</h3>
<p>From Gallery</p>
<a href="dnld/pictures.zip" title="Download"
download="gallery/pictures.zip">Download</a>
</div>
</li>
<li>
<div class="bg word"></div>
<div class="info">
<h3>Definition</h3>
<p>All Chapters</p>
<a href="#" title="Download">Download</a>
</div>
</li>

<li>
<div class="bg">
<video autoplay width="auto" height="80px"
id="video1">
</video>
<hr class="">
<video autoplay width="auto" height="80px"
id="video1">
</video>
</div>
<div class="info">
<h3>Videos</h3>
<p>From PPT's</p>
<a href="#" title="Download"
download="vids/2.mp4">Download</a>
</div>
</li>
<li>
<div class="bg ppt">
</div>
<div class="info">
<h3>PPT</h3>

<p>Presentation</p>
<a href="#" title="Download">Download</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>

</body>
</html>
/* DOWNLOAD CSS */
.description{float:left;
width:auto;
margin:0;
text-align:justify;
font:18px 'century gothic';
color:#1f5f4f;}

.break { clear:both; }
.bg{background:url() no-repeat center;
-webkit-background-size: cover;}
.ppt{background:url(../bg-img/ppt.png) no-repeat center; -webkit-background-size: cover;}
.word{background:url(../bg-img/word.png) no-repeat center; -webkit-background-size: cover;}
.picture{background:url(../bg-img/c3.jpg) no-repeat center; -webkit-background-size: cover;}
/* WRAPPER */
/* CONTENT */
.content { width:100%; position:fixed; margin:100 0 0 300px;}
.content .info { padding:10px; }
/* banners */
.download-banner { list-style:none; width:100%;}
.download-banner li {background:none; display:inline; margin-right:10%; float:left;
-webkit-perspective: 500; -webkit-transform-style: preserve-3d;
-webkit-transition-property: perspective; -webkit-transition-duration: 0.5s; }
.download-banner li:hover { -webkit-perspective: 5000; }
.download-banner li .bg { width:150px; height:200px; border:2px solid #fcfafa; -webkit-transform:
rotateY(30deg);
-moz-box-shadow:0 3px 10px #888; -webkit-box-shadow:0 3px 10px #888;
-webkit-transition-property: transform; -webkit-transition-duration: 0.5s; }
.download-banner li:hover .bg { -webkit-transform: rotateY(0deg); }
.info { border:2px solid #fcfafa; padding:20px; width:100px; height:80px; background-color:#ded;
margin:-150px 0 0 55px; position:absolute;

-moz-box-shadow:0 20px 40px #888; -webkit-box-shadow:0 20px 40px #888;
-webkit-transform: translateZ(30px) rotateY(30deg);
-webkit-transition-property: transform, box-shadow, margin; -webkit-transition-duration:
0.5s; }
.breaker{background:#000; color:#fff; text-align:center; width:auto; height:1px; clear:both;
margin:0}
.download-banner li:hover .info { -webkit-transform: rotateY(0deg); -webkit-box-shadow:0 5px 10px
#888; margin:-175px 0 0 15px; }
.info h3 { color:#7a3f3a; font:18px 'century gothic'; text-align:center; padding-bottom:0px; }
.info p { padding-bottom:0px; }
.info a { background-color:#7a3f3a; padding:5px 10px; color:#eee; text-decoration:none;
display:block; width:80px; text-align:center; margin:0 auto;
-moz-border-radius:5px; -webkit-border-radius:5px; }
.info a:hover, .info a:focus { background-color:#6a191f; color:#fff; }

<html>
<head>
<title>Smart Learning Web - Gallery</title>
<link rel="stylesheet" href="css/gal.css" type="text/css">
</head>
<body>
</div>
Smart Learning Web - Gallery
</div>

</a>
</div>
</div>
</div>

<div class="icon-gal" style="border:#000 solid 1px;
border-radius:10px;"><a href="gallery.html"><img src="icon/app-icon/gal.png"
</div>
</div>
</div>

</div>
<div class="gallery">
<div class="slider-pictures">
<ul class="s-thumbs">
<li><a href="#slide-1"><img src="gallery/c1.jpg"
alt=""><span>Key Components</span></a></li>
alt=""><span>Pic 2</span></a></li>
alt=""><span>Param Super Computer</span></a></li>
alt=""><span>Micro Computer</span></a></li>
alt=""><span>Mini Computer</span></a></li>
alt=""><span>Param Server</span></a></li>
alt=""><span>Desktop Computer</span></a></li>
alt=""><span>Personal Digital Devices</span></a></li>
alt=""><span>Magnetic Drum</span></a></li>
<li><a href="#slide-10"><img src="gallery/c10.gif"

alt=""><span>Integrated Circuit</span></a></li>
<li><a href="#slide-16"><img src="gallery/c16.png"
alt=""><span>Dataware House</span></a></li>
</ul>
<ul class="s-slides">
<li class="slideLeft first" id="slide-1"><img
src="gallery/c1.jpg" alt=""></li>
<li class="slideRight" id="slide-2"><img
<li class="slideTop" id="slide-3"><img
<li class="slideBottom" id="slide-4"><img
<li class="zoomIn" id="slide-5"><img
<li class="zoomOut" id="slide-6"><img
<li class="rotate" id="slide-7"><img
<li class="slideLeft first" id="slide-8"><img
<li class="slideRight" id="slide-9"><img
<li class="slideTop" id="slide-10"><img
src="gallery/c10.gif" alt=""></li>
<li class="slideBottom" id="slide-11"><img
<li class="zoomIn" id="slide-12"><img

<li class="zoomOut" id="slide-13"><img
src="gallery/c16.png" alt=""></li>
</ul>
</div>
</div>
</div>
</div>
</div>

</body>
</html>
/* GALLARY CSS */
.gallery{background:url(../img/12.jpg);
float:right;

clear:none;
height:auto;
width:70%;
margin:0 60 0 0;}
.slider-pictures { position: relative; margin:0; border: 1px solid #141517;}
.slider-pictures ul,
.slider-pictures li,
.slider-pictures div,
.slider-pictures img,
.slider-pictures a {
margin: 0;
padding: 0;
border: none;
outline: none;
list-style: none;
}
.slider-pictures ul{}
.slider-pictures {
width: 100%;
height:95%;
overflow:;
}
/* Slider Style */
ul.s-thumbs li {
background:none;

float: left;
margin-bottom: -1px;
margin-right: 25px;
}
ul.s-thumbs li:last-child {
margin-left: 10px;
margin-right: 0;
}
ul.s-thumbs a {
display: block;
position: relative;
width: 55px;
height: 55px;
border: 4px solid transparent;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
font: bold 12px/25px Arial, sans-serif;
color: #515151;
text-decoration: none;
text-shadow: 1px 1px 0px rgba(255,255,255,.25), inset 1px 1px 0px rgba(0,0,0,.15);
}
ul.s-thumbs img {
-webkit-box-shadow: 1px 1px 5px rgba(0,0,0,.5);

-moz-box-shadow: 1px 1px 5px rgba(0,0,0,.5);
box-shadow: 1px 1px 5px rgba(0,0,0,.5);
}
ul.s-thumbs a:hover,
ul.s-slides {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
ul.s-slides,
ul.s-slides li,
ul.s-slides a,
ul.s-slides img {
width: 100%;
height: 380px;
left:0;
position: relative;
}
ul.s-slides {
overflow: hidden;

clear: both;
border-top:1px solid #141517;
border-bottom:1px solid #141517;
}
ul.s-slides li {
position: absolute;
z-index: 50;
}
/* Image Description */
ul.s-thumbs li a img{width:50px; height:50px;}
ul.s-thumbs li a:hover span {
position: absolute;
z-index: 101;
bottom: -40px;
left: -22px;
color:#333;
display: block;
width: auto;
padding:5px;
height: 25px;
text-align: center;
border-radius: 3px;

-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
background: #ddd;
}
ul.s-thumbs li a:hover span:before {
width: 0;
height: 0;
border-bottom: 5px solid #eeefff;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
content: '';
text-align:center;
position: absolute;
top: -5px;
left: 44px;
}
ul.s-thumbs li:first-child a:hover span {
left: -3px;
}
ul.s-thumbs li:first-child a:hover span:before {
left: 15px;

}
ul.s-thumbs li:last-child a:hover span {
left: auto;
right: -3px;
}
ul.s-thumbs li:last-child a:hover span:before {
left: auto;
right: 26px;
}
/* Slide Left */
@-webkit-keyframes 'slideLeft' {
0% { left: 500px; }
100% { left: 0; }
}
ul.s-slides li.slideLeft:target {
z-index: 100;
-webkit-animation-name: slideLeft;
-webkit-animation-duration: 1ms;
-webkit-animation-iteration-count: 1;
}
/* Slide Right */

@-webkit-keyframes 'slideRight' {
0% { left: 0px; }
100% { left: 5; }
}
ul.s-slides li.slideRight:target {
z-index: 100;
-webkit-animation-name: slideRight;
}
/* Slide Top */
@-webkit-keyframes 'slideTop' {
0% { top: -350px; }
100% { top: 0; }
}
ul.s-slides li.slideTop:target {
z-index: 100;
-webkit-animation-name: slideTop;
}
/* Slide Bottom */

@-webkit-keyframes 'slideBottom' {
0% { top: 350px; }
100% { top: 0; }
}
ul.s-slides li.slideBottom:target {
z-index: 100;
-webkit-animation-name: slideBottom;
}
/* Zoom In */
@-webkit-keyframes 'zoomIn' {
0% { -webkit-transform: scale(0.1); }
100% { -webkit-transform: none; }
}
ul.s-slides li.zoomIn:target {
z-index: 100;
top: 4px;
-webkit-animation-name: zoomIn;
}

/* Zoom Out */
@-webkit-keyframes 'zoomOut' {
0% { -webkit-transform: scale(2); }
}
ul.s-slides li.zoomOut:target {
z-index: 100;
-webkit-animation-name: zoomOut;
}
/* Rotate */
@-webkit-keyframes 'rotate' {
0% { -webkit-transform: rotate(-360deg) scale(0.1); }
}
ul.s-slides li.rotate:target {
z-index: 100;
top: 4px;
-webkit-animation-name: rotate;

}
/* Not Target */
@-webkit-keyframes 'notTarget' {
0% { z-index: 75; }
100% { z-index: 75; }
}
ul.s-slides li:not(:target) {
-webkit-animation-name: notTarget;
}
/* First Slide */
ul.s-slides li.first {
z-index: 60;
}
/* footer start */
.footer-gal{background:#;
border:#fff solid 1px;
height:5%;
}
.foot-left-gal{float:left;
margin:0 0 0 0;

.n-gal{color:#065;}
.foot-right-gal{float:right;
color:#068;
margin:0 0 0 0;
/* footer end */

<html>
<head>
<title>Smart Learning Web - Gallery</title>
<link rel="stylesheet" href="css/about.css" type="text/css" />
</head>
<body>
<div>
About Us
</div>
</div>
<a href="home.html"><div class="home">Home</div></a>

<a href="content.html"><div class="content">content</div></a>
<a href="contact.html"><div class="contact">contact</div></a>
<div class="about">about</div>
<div class="div1" style="margin-top:15px; padding:6px;" title="Exit">
</a>
</div>
</div>
</div>

<div class="about-box">
<h1>Who we are?</h1>
<p>We are Student of Dezyne E'cole Collage.</p>
<p>Bachelor of Computer Application Second Year.</p>
</div>
<div class="about-boxes">
<div class="about-box-left">
<div class="slide-up" tabindex="1">
<div class="box-1">Our Goal</div>
</div>

<h2>our goal</h2>
<p>
p
</p>
<p>p</p>
</div>
<div class="about-box-mid">
<div class="box-1">Our Team</div>
</div>
<h2>Our Team</h2>
<div></div>
<div class="t-1">
<img src="team/t-1.jpg" class="t-1-img" />
<p class="name">Kapil Jangid</p>
<p class="roll">Developer</p>
<p class="mail"><img src="t-icon/mail.png"
class="mail-img" /><span>kjsharma@myself.com</span></p>
<div class="social">
<span>Follow us on</span>
<div class="arrow-down"></div>
<ul>
<li><img src="t-icon/fb.png" class="t-
icon" /></li>
<li><img src="t-icon/tw.png" class="t-
icon" /></li>
<li><img src="t-icon/g+.png" class="t-
icon" /></li>

</ul>
</div>
</div>
<div class="t-2">
<img src="team/t-2.jpg" class="t-1-img" />
<p class="name">Kirtesh Khandelwal</p>
<p class="roll">Developer</p>
<p class="mail"><img src="t-icon/mail.png"
class="mail-img" /><span>kk@myself.com</span></p>
<div class="social">
<span>Follow us on</span>
<div class="arrow-down"></div>
<ul>
<li><img src="t-icon/fb.png" class="t-
icon" /></li>
<li><img src="t-icon/tw.png" class="t-
icon" /></li>
<li><img src="t-icon/g+.png" class="t-
icon" /></li>
</ul>
</div>
</div>
</div>
<div class="about-box-right">
<div class="box-1">Our Projects</div>
</div>
<h2>Our Projects</h2>
<p>
p

</p>
</div>
</div>
</div>
</div>
</div>

</body>
</html>
/* ABOUT US CSS */
/* about.css */
*{margin:0; outline:none;}
body{background:url('../bg-img/2.jpg') #245 no-repeat top center fixed;
-webkit-background-size: cover; margin:0;}
body:focus .slide-up{visibility:hidden; }
a:focus .slide-down{visibility:hidden;}
.slide-up{background:url('../bg-img/12.jpg') rgba(53,107,153,1) no-repeat center fixed;

-webkit-background-size: cover; height:55%; float:left; position:fixed; width:30%; -webkit-
transition: height 1s; overflow:hidden; margin:0 0 0 0;}
.slide-up:focus{ height:6%; -webkit-transition: height 2s; overflow:visible;}
.box-1{text-transform:uppercase; color:#fff; font:30px "Century Gothic"; margin:155 0 0 0; -
webkit-transition: margin 3s;}
.slide-up:focus .box-1{margin:0; -webkit-transition: margin 2s;}
.slide-up:hover{cursor:pointer;}
.t-1{float:left; text-align:center; width:50%; margin:10 0 10 0;}
.t-2{float:left; text-align:center; width:49%; margin:10 0 10 0; }
.t-1-img{height:90px; border-radius:6px;}
.t-2-img{height:90px; border-radius:6px;}
.k-k{width:150; margin:0;}
.name{text-transform:uppercase; color:#000000; font:22px "Tw Cen MT Condensed";}
.roll{text-transform:capitalize; color:#000000; font:14px "Century Gothic";font-style:bold;}
.social ul{list-style:none; display:inline; margin:0 0 10 15; float:left; }
li{display:inline-block; margin:0 0 0 5; background:#;}
li .t-icon{height:20;}
li .t-icon:hover{-webkit-transform:translateY(-0.1em); cursor:pointer;}
.mail-img{height:14; }
.mail span{font:18px "Tw Cen MT Condensed"; margin:0 0 0 5;}
.social span{font:14px "Century Gothic"; margin:0 0 10 0;border-bottom:#FFFFFF solid
1px;}
.arrow-down {width: 0;
height: 0;
margin: 0 0 10 90;
border-left: 10px solid transparent;
border-right: 10px solid transparent;

border-top: 10px solid #ddd;}
/* header start */
height:13%;}
.head-left{float:left;
padding:;
height:100%;
margin:10 0 0 40;
font:3.0em 'Tw Cen MT Condensed';
-webkit-transform:all 50ms ease-in-out;}
height:100%;
margin:0 45 0 0;}
.head-right a{color:#000; text-decoration:none;}
.head-right div{font:600 16px 'century gothic'; float:left; margin:20px 5px 5px 5px;
background:; border:#000 solid 1px; padding:10px; text-transform:uppercase;}
.head-right div:hover{background:#fff; border:#06f solid 1px; -webkit-
transition:background 250ms; color:#06f;}
.logout{background:url(../bg-img/pw1.svg) no-repeat; background-size:cover;
height:40px; width:40px; }
.logout:hover{background:url(../bg-img/pw3.svg) no-repeat; background-size:cover;
.head-right .about{background:#fff; -webkit-box-shadow:#fff 0px 2px 5px; border:#06f
solid 1px; color:#06f;}
/* social icon */
.header img{width:40px;

text-shadow:10px 10px 5px #000;
border-radius:2;
opacity:0.8;
}
/* header end */
/* container start */
.container{background:#;
display:block;
overflow:auto;
height:80%;
width:100%;
}
.about-box{height:25%; width:91.3%;
background:url('../bg-img/12.jpg')
rgba(255,255,255,0.3) no-repeat center fixed;
-webkit-background-size: cover;
text-align:center;
color:#fff;
margin:0 0 10 4.5%;
padding:8 0 0 0;
text-decoration:none;
z-index:30;
font:16px "Century Gothic";}
.about-box h1{font:600 35px ''; margin:15px 0 0 0;}
.about-box p{font: 20px '';}

.about-boxes{height:70%;
width:100%;
text-align:center;
margin:0 0 0 0;
position:;
background:url('') no-repeat no-repeat center
fixed;
-webkit-background-size: cover;}
.about-box-left{float:left;
height:auto;
width:30%;
background:#;
margin:0 10 0 4.5%;
position:; }
.about-box-mid{float:left;
height:auto;
width:30%;
background:#;
margin:0 10 0 0;}
.about-box-right{float:left;
height:auto;
width:30%;
background:#;
position:relative;}
h2{margin:10 0 0 0; border-bottom:#FFFFFF solid 2px;}

p{width:80%; margin:5 0 5 10%;}
/* menus */
/* menus end */
/* container end */
/* footer start */
.footer{background:#;
height:5%;
}
margin:0 0 0 50;
.n{color:#065;}
color:#068;
margin:0 50 0 10;
/* footer end */

<html>
<head>
<title>Smart Learning Web - Contacts</title>
<link rel="stylesheet" href="css/contact.css" type="text/css" />
</head>
<body>
</div>
Get in Touch..

</div>
<a href="home.html"><div class="home">Home</div></a>
<a href="content.html"><div
class="content">content</div></a>
<div class="contact">contact</div>
<a href="about.html"><div class="about">about</div></a>
</a>
</div>
</div>
</div>
<marquee>Feel free to email us to provide some feedback on our Web Application,
give us suggestions for new ideas to improvement or to just say Hello!</marquee>

<div class="form-box">
<form>
<div class="form-box-1">
<div class="user-box">
<div><label for="username">Name</label></div>

<input type="text" id="username" name="username"
placeholder="Enter Your Name" />
</div>

<div class="user-id">
<div><label for="email">Email</label></div>
<input type="email" id="email" name="email"
placeholder="yourID@domain.com" />
</div>
<div class="">
<div><label for="password">Password</label></div>
<input type="password" id="password"
placeholder="Enter your password" />
</div>
<div class="gender">
<div><label>I am..</label></div>
<label id="specify" for="male">Male</label>
<input type="radio" name="g" id="male"
value="Male" />
<label id="specify" for="female">Female</label>
<input type="radio" name="g" id="female"
value="female" />
</div>
</div>
<div class="form-box-2">
<div class="">

<div><label>Date of Birth</label>
<div class="dob">
<select>
<option>DD</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>

<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
</div>
<div class="st-info">
<div><label for="st-id">Student
ID</label></div>
<input type="text" id="st-id" name="st-id"
placeholder="i.e.: 123456" />
</div>
<div class="year">
<div><label>Year</label></div>
<div class="options">
<label id="class-year" for="1">1st
Year</label>
<input type="radio" name="y" id="1"
/>
<label id="class-year" for="2">2nd
Year</label>
/>

<label id="class-year" for="3">3rd
Year</label>
/>
</div>
</div>
<div class="file-box">
<div class="file"><label for="file">Submit Your
Notes</label></div>
<div class="file-show"><input type="file"
id="file" placeholder="Enter your password" /></div>
</div>
</div>
</div>
</div>
<div>
<div class="comment"><label
for="comment">Comment</div>
<textarea id="comment" placeholder="Write your comment
or feedback.."></textarea>
</div>
<div>
<input type="submit" value="Submit" />
</div>
</form>
</div>
</div>

</div>
</div>

</body>
</html>
/* CONTACT CSS*/
*{outline:none;}
body{background:url('../bg-img/2.jpg') #ded center fixed;
margin:20 40 0 0; width:55%;}
.head-right a{color:#000;}
.head-right div{font:600 16px 'century gothic'; float:left; margin:5px; background:;
border:#000 solid 1px; padding:10px; text-transform:uppercase;}

.head-right .contact{background:#fff; -webkit-box-shadow:#fff 0px 2px 5px;
color:#06f; border:#000 solid 1px;}
.form-box{margin:0 0 0 8%; width:auto; height:70%; position:;}
.form-box-2{}
.user-box{}
.user-id{visibility:;}
.form-box-1, .user-id label{float:left; margin:0 80 0 0; font:30px 'Microsoft Sans Serif';}
.form-box-1 input[type=text],
input[type=email],
input[type=password]{
background:none;
padding:10px;
width:100%;
margin:10px 0 25px 0;
font:25px '';
border:none;
border-bottom:#333 solid 2px;}
input[type=file]{margin:15px 0 0 0;
font:15px ''; }
.file-box{margin:20 0 10 0;}
.form-box-2, .user-id label, .st-info label, .comment label{float:left; margin:0 0 0 0px; font:30px
'Microsoft Sans Serif';}
.st-info label{margin:25 0 0 0px;}

.gender{margin:0px 0 0 0;}
#specify{font:20px 'Microsoft Sans Serif'; margin:0 0 0 0;}
.year{margin:0px 0 0 0; }
#class-year{font:25px 'Microsoft Sans Serif';}
.options{ margin:23px 0 0 0;}
#class-year{font:20px 'Microsoft Sans Serif'; border-bottom:#333 solid 2px;}
.form-box-2 input[type=radio]{margin:15px 20px 0 0;
font:15px ''; }
select{padding:11px; font:20px ''; width:auto; margin:10 0 0 5; border-
bottom:#333 solid 2px;}
.form-box-2 input[type=text]{background:none;
padding:10px;
width:auto;
margin:10px 0 25px 0;
font:25px '';
border:none;
.button-next{text-align:right;
width:100%;
margin:5% 0 0 0;
font:35px 'Tw Cen MT Condensed';}
.button-next:hover ~.user-id{visibility:visible;}
.button-next:hover ~.user-box{visibility:hidden;}
.comment{margin:0 0 0 0;}

.comment label{}
textarea{width:35%; margin:10 0 0 0; font:20px 'century gothic'; padding:15; height:293px;
resize:none; border-bottom:#333 solid 2px; background:none;}
input[type=submit]{width:15%; height:20%; font:40px 'century gothic'; margin:20 0 0 0;
background:#06d; border:none; color:#fff; text-transform:uppercase; border-bottom:#fff solid 2px;}
input[type=submit]:hover{border:#06f solid 2px; background:none; color:#06d; -webkit-
transition: background 1000ms, border 1000ms;}
marquee{font: 30px 'century gothic'; color:#06f; padding:5px; border-bottom:#fff solid 1px;}
/* COMMON CSS */
/* common css */
body{background:url('../bg-img/2.jpg') #ded center fixed;
/* header start */
height:79px;
.head-left{background:rgba(236,226,173,1);
float:left;
padding:1%;
width:120px;
height:120px;
margin:2 0 0 25px;
border-bottom:#000 solid 2px;
border-left:#000 solid 2px;
border-right:rgba(236,226,173,1) solid 2px;
border-top:rgba(236,226,173,1) solid 2px;

border-width:5px;
border-radius:50%;
-webkit-transform: rotate(-45deg);
}
.head-left:hover .img{-webkit-transform:rotate(-360deg);
-webkit-transition: -
webkit-transform 1s;}
.head-left .img{border:#333 dashed 2px;
border-radius:50%;
height:115px; width:115px;
-webkit-transform: rotate(360deg);
-webkit-transition: -webkit-transform
2s; }
margin:20 40 0 0;}
.head-right a{color:#000;}
.head-right div{font:600 16px 'century gothic'; float:left; margin:5px; background:;
border:#000 solid 1px; padding:10px; text-transform:uppercase;}

/* social icon */
.header img{width:40px;
text-shadow:10px 10px 5px #000;
border-radius:2;
opacity:0.8;
}
.header img:hover{cursor:pointer; opacity:3; -webkit-transform:
rotate(45deg);}
/* header end */
/* container start */
.container{background:#; display:block; overflow:auto;
height:70%; width:100%;}
.wel-note{text-align:center;
height:5%;
padding:10 0 0 0;
-webkit-transform: translate3d(0,-5em,0);
-webkit-transition: -webkit-transform 0.5s;
}
.data{background:url(../img/12.jpg);
float:right;
clear:none;
height:auto;
width:70%;

margin:0 60 0 0;}
.video{}
.data .row-1,.row-2,.row-3,.row-4{float:left;
width:22%;
height:90%;
background:#;
margin:20 0 0 22;}
.data .ch-1,.ch-2,.ch-3,.ch-4,
.ch-5,.ch-6,.ch-7,.ch-8,
.ch-9,.ch-10,.ch-11,.ch-12,
.ch-13,.ch-14,.ch-15,.ch-16{height:15%;
padding:15;
color:rgb(0,0,0);
text-align:right;
text-shadow:
5px 5px 10px rgb(0,0,0);
text-
transform:uppercase;
font:600 16px
'century gothic';
background:url(../bg-img/book1.png) no-repeat ;
background-
size:cover; margin:10;}
.home-content-left{float:left;
width:49%;
margin:0;

color:#1f5f4f;}
.breaker{float:left; margin:0 0 0 0; border-left:#000 solid 1px; width:100%; height:1px;
background:#000;}
.home-content-left p{font:20px ''; text-align:justify; padding:5px; margin:15px 15px 0
15px;}
.home-content-left h1{font:800 45px ''; margin:15px;}
.topic1{font: 25px ''; margin:0 0 0 15px;}
.home-content-bottom{float:left;
width:100%;
margin:0;
background:#;
color:#1f5f4f;}
.home-content-bottom p{font: 20px''; padding:5px; text-align:justify; margin:15px 0
0 0;}
/* open dialog */
.dlg {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
width:100%;
background: rgba(0,0,0,0.8);
z-index: 99999;

opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.dlg:target {
opacity:1;
pointer-events: auto;
}
.dlg > div {
width: 400px;
position: relative;
margin: 5% 0 0 50;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: #333;
background: #ddd;
width:90%;
height:80%;
}
.dlg .units{float:left;}
.dlg input[type=text]{float:right;width:auto; padding:5px; font:16px 'century gothic';
outline:none; margin:15 0 0 0;}
.title {
background: #606061;

color: #FFFFFF;
line-height: 25px;
position: absolute;
padding:5 15 5 15;
text-transform:capitalize;
text-align: center;
top: -15px;
margin:0 0 0 0;
width: auto;
font-weight: bold;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;

font-weight: bold;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }
/* close dialog */
.side-bar{background:url(../bg-img/) rgba(255,255,255,0.3) no-repeat ;float:left;
height:90%;
width:20%;
border-right:#ddd solid 2px;
border-radius:0 70% 70% 0;
opacity:0.3;
-webkit-transform: translate3d(-14em,0,0);
-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;}
.side-bar:focus{background:;
outline:none;
-webkit-transform: translate3d(0em,0,0);
opacity:1;
border-radius:0 6px 6px 0;
-webkit-transition: -webkit-transform 0.5s,
opacity 0.5s;}
.menu-icon{float:right;

margin:15 0 0 200;
background:#;
height:60;}
.m{-webkit-transform:rotate(-90deg);
margin:-73 0 0 0;
width:100%;
float:right;
text-align:center;
border-bottom:#ddd solid 2px;}
.menu-1{background:;
width:;
color:#06f;
height:100px;
font: 30px 'Tw Cen MT Condensed';
padding:30;
float:left;
}
.icons-left{float:left; margin:50 15 0 0;}
.icons-left div:hover{-webkit-transform:rotateY(0deg);
-webkit-transition:-webkit-transform
1s;}
.icons-right div:hover{-webkit-transform:rotateY(0deg);
-webkit-transition:-webkit-transform
3s;}
.icons-right{float:left; margin:50 15 0 0;}
.icon-about{margin:0 0 0 0; padding:5;}
.icon-about:hover{border-bottom:#000 solid 1px; border-radius:6px;}

.icon-content{float:; padding:5;}
.icon-content:hover{border-bottom:#000 solid 1px; border-radius:6px;}
.icon-gal{float:; padding:5;}
.icon-gal:hover{border-bottom:#000 solid 1px; border-radius:6px;}
.icon-down{float:; padding:5;}
.icon-down:hover{border-bottom:#000 solid 1px; border-radius:6px;}
.icon-contact{float:; padding:5;}
.icon-contact:hover{border-bottom:#000 solid 1px; border-radius:6px;}
.icon-about{float:; padding:5;}
.icon-about:hover{border-bottom:#000 solid 1px; border-radius:6px;}
.icon-home{margin:0 0 0 0; padding:5;}
.icon-home:hover{border-bottom:#000 solid 1px; border-radius:6px;}
/* menus */
.menus{margin:10% 0 0 0;
background:; height:20%;}
ul{ list-style-type: none;
color:#;
width:100%;
text-align:center;
font-family: Tw Cen MT Condensed;
font-size:20px;
text-transform:uppercase;
margin:10px; }
ul li{display: inline;
padding:25px;
width: 30px;

background:#ddd;}
li:hover{cursor:pointer; }
.home{background:url(../icon/home.svg) no-repeat;}
.contents{background:url(../icon/3.png) no-repeat;}
.downloads{background:url(../icon/download.svg) no-repeat;}
.about{background:url(../icon/about.svg) no-repeat;}
.contact{background:url(../icon/contacts.svg) no-repeat;}
.gallery{background:url(../icon/gallery.svg) no-repeat;}
/* menus end */
/* container end */
/* footer start */
.footer{background:url(./bg-img/footer.png);
height:4%;
}
margin:0 0 0 50;
.n{color:#065;}
color:#068;
margin:0 50 0 10;
font: 20px 'Tw Cen MT Condensed';}/* footer end */

THANK YOU
SUBMITTED BY
KIRTESH KHANDELWAL
BACHELOR OF COMPUTER APPLICATION
CLASS: BCA 2ND
YEAR
Dezyne E’cole College
(2015-16)
www.dezyneecole.com

Kirtesh Khandelwal,Project on HTML and CSS ,Final Year BCA , Dezyne E'cole College

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (7)

Similar to Kirtesh Khandelwal,Project on HTML and CSS ,Final Year BCA , Dezyne E'cole College

Similar to Kirtesh Khandelwal,Project on HTML and CSS ,Final Year BCA , Dezyne E'cole College (20)

More from dezyneecole

More from dezyneecole (20)

Recently uploaded

Recently uploaded (20)

Kirtesh Khandelwal,Project on HTML and CSS ,Final Year BCA , Dezyne E'cole College