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>[email protected]</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>[email protected]</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="[email protected]" />

</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

Technology

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