<title>student</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="engine1/jquery.js"></script>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<div class="hovereffect">
<img class="img-responsive" src="../sudhar/photo/i.jpg" alt="innovation" height="289px" width="289px"/>
<div class="overlay">
<h2>Innovation</h2>
</div>
</div>
Creativity
Positivity
<!-- normal -->
<div class="ih-item square effect15 left_to_right"><a href="#">
<div class="img"><img src="../sudhar/photo/taj.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
<!-- colored -->
<div class="ih-item square colored effect15 left_to_right"><a href="#">
<div class="img"><img src="images/assets/rect/2.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end colored -->
<!-- normal -->
<div class="ih-item square effect15 right_to_left"><a href="#">
<div class="img"><img src="images/assets/rect/3.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
<!-- colored -->
<div class="ih-item square colored effect15 right_to_left"><a href="#">
<div class="img"><img src="images/assets/rect/4.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end colored -->
<!-- normal -->
<div class="ih-item square effect15 top_to_bottom"><a href="#">
<div class="img"><img src="images/assets/rect/5.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
<!-- colored -->
<div class="ih-item square colored effect15 top_to_bottom"><a href="#">
<div class="img"><img src="images/assets/rect/6.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end colored -->
<!-- normal -->
<div class="ih-item square effect15 bottom_to_top"><a href="#">
<div class="img"><img src="images/assets/rect/7.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end normal -->
<!-- colored -->
<div class="ih-item square colored effect15 bottom_to_top"><a href="#">
<div class="img"><img src="images/assets/rect/8.jpg" alt="img"></div>
<div class="info">
<h3>Heading here</h3>
<p>Description goes here</p>
</div></a></div>
<!-- end colored -->
Address
Abc private limited
no54,2ndstreet,
madipakkam,
chennai-67.
[email protected]
Enquiry Form
<
Name |
|
Email |
|
Phone |
|
Message |
<textarea name="msg" placeholder="Type your text here..."></textarea> |
|
css
body
{
margin:0px;
}
wrapper
{
width:100%;
height:auto;
margin:0px;
background-color:#E9E581;
}
h1 {
position: relative;
font-size: 30px;
z-index: 1;
overflow: hidden;
text-align: center;
}
h1:before, h1:after {
position: absolute;
top: 51%;
overflow: hidden;
width:50%;
height: 1px;
content: '\a0';
background-color:black;
}
h1:before {
margin-left: -50%;
text-align: right;
}
.color {
background-color: #ccc;
}
header
{
width:100%;
height:70px;
position:fixed;
background-color:black;
right:0px;
z-index: 100;
}
header
{
top:0;
}
footer
{
left:0;
right:0;
z-index: :100;
width:100%;
height:48px;
background-color:black;
color:white;
text-align: center;
}
footer img
{
float:right;
margin:5px;
padding:5px;
}
.company
{
width:50%;
height:60px;
color:white;
float:left;
text-align:center;
padding:15px;
}
.navbar
{
height:60px;
width:50%
background-color:black;
color:white;
float:left;
overflow:hidden;
}
ul li
{
display: block;
position: relative;
padding:10px 15px;
float:left;
}
ul li a
{
color:white;
}
.navbar a:hover
{
border-bottom:3px solid red;
padding:18px;
}
myCarousel
{
background-color:white;
height:370px;
width:100%;
float:left;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img
{
width: 70%;
height:15%;
margin: auto;
background-color:white;
}
.thumbnail
{
height:300px;
width:300px;
padding:25px auto;
margin:5px;
}
con
{
width:100%;
height:300px;
}
.contact
{
width:60%;
height:300px;
background-color:grey;
padding:100px;
float:left;
}
.enquiry
{
width:40%;
height:300px;
background-color:seagreen;
float:left;
}
input[type=text]:focus {
border:3px solid grey;
}
input[type="text"]
{
margin: 0 0 15px 0;
}
@media screen and (max-width:959px)
{
wrapper
{
width:auto;
}
.navbar
{
width:auto;
}
img
{
width:auto;
}
}
@media screen and (max-width:640px)
{
#wrapper,#con,#enquiry
{
width:auto;
}
}
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.6);
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: translate(460px, -100px) rotate(180deg);
-ms-transform: translate(460px, -100px) rotate(180deg);
transform: translate(460px, -100px) rotate(180deg);
-webkit-transition: all 0.2s 0.4s ease-in-out;
transition: all 0.2s 0.4s ease-in-out;
}
.hovereffect img {
display: block;
position: relative;
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.6);
}
.hovereffect a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
text-transform: uppercase;
color: #fff;
border: 1px solid #fff;
margin: 50px 0 0 0;
background-color: transparent;
-webkit-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.hovereffect a.info:hover {
box-shadow: 0 0 5px #fff;
}
.hovereffect:hover .overlay {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transition-delay: 0s;
transition-delay: 0s;
-webkit-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
.hovereffect:hover h2 {
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.hovereffect:hover a.info {
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}