<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/materialdesignicons.min.css" />
<link href="css/core.css" rel="stylesheet" type="text/css" />
<link href="css/default.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link href="css/responsive.css" rel="stylesheet" type="text/css" />
<link href="css/style-customizer.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.header
{
box-shadow: 0 0 7px rgba(0, 0, 0, 0.2);
position: relative;
z-index: 99;
}
.header .logo
{
display: inline-block;
margin-bottom: -23px;
position: relative;
}
.header-right, .header-right .search
{
float: right;
}
.mgea-full-width
{
position: relative;
}
.header-right .search, .header-menu, .menu ul li
{
display: inline-block;
}
.header-right .search, .header-menu, .menu ul li
{
display: inline-block;
}
.menu ul li
{
position: relative;
}
.header-right .search, .header-menu, .menu ul li
{
display: inline-block;
}
li
{
list-style: none;
}
.menu ul li a
{
color: #535353;
display: block;
font-size: 15px;
font-weight: bold;
padding: 50px 0 50px 32px;
text-transform: uppercase;
}
.menu ul li a:hover
{
color: #e54c2a;
}
.header-right .search
{
padding-left: 38px;
padding-top: 47px;
}
.header-right .search, .header-menu, .menu ul li
{
display: inline-block;
}
.header-right, .header-right .search
{
float: right;
}
.search-inside
{
position: absolute;
right: 0;
top: 35px;
width: 100%;
z-index: 99999999;
}
.search-inside a.search-close
{
color: #777;
font-size: 18px;
position: absolute;
right: -22px;
top: 12px;
}
.search-inner > a
{
color: #535353;
font-size: 22px;
font-weight: bold;
}
.searchbar-inner .search
{
position: relative;
}
.mdi
{
display: inline-block;
font: normal normal normal 24px/1 "Material Design Icons";
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}
.searchbar-inner .search input
{
background: #fff none repeat scroll 0 0;
border: 1px solid #ddd;
color: #535353;
font-size: 20px !important;
height: 50px;
z-index: 1;
}
.searchbar-inner .search button
{
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: medium none;
color: #777;
font-size: 24px;
position: absolute;
right: 10px;
top: 10px;
}
.mdi:hover
{
color: #e54c2a;
}
.grey-bg
{
background: #f1f1f1;
}
.row
{
margin-left: -15px;
margin-right: -15px;
}
h3.single-footer-title
{
color: #535353;
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
margin: 0;
}
.mt-30
{
margin-top: 30px;
}
.single-footer-details ul
{
display: block;
padding-top: 10px;
}
ul
{
margin: 0px;
padding: 0px;
}
ol, ul
{
list-style: none;
}
.single-footer .open-list li
{
color: #535353;
margin-bottom: 5px;
text-transform: capitalize;
}
li
{
list-style: none;
}
.single-footer .open-list li span
{
font-weight: bold;
}
.single-footer.instagram ul li
{
padding-bottom: 15px;
padding-right: 15px;
}
.single-footer.instagram ul li
{
float: left;
width: 33.33%;
}
li
{
list-style: none;
}
.single-footer.instagram ul li a
{
display: block;
position: relative;
overflow: hidden;
}
a, button, input
{
outline: medium none;
color: #4FC1F0;
}
.single-footer.instagram ul li img
{
width: 100%;
}
img
{
max-width: 100%;
}
p
{
font-size: 14px;
font-weight: normal;
line-height: 24px;
color: #757575;
margin-bottom: 15px;
}
p
{
margin: 0 0 10px;
}
.newsletter-form input
{
background: none repeat scroll 0 0 #fff;
border: medium none;
color: #999999;
font-weight: 600;
}
input
{
border: 2px solid #eceff8;
height: 45px;
box-shadow: none;
padding-left: 10px;
font-size: 14px;
width: 100%;
}
.newsletter-form button
{
background: none repeat scroll 0 0 #e54c2a;
border: medium none;
color: #fff;
display: inline-block;
font-size: 12px;
font-weight: bold;
margin-top: 15px;
padding: 14px 38px;
text-transform: uppercase;
-webkit-transition: all .3s ease 0s;
transition: all .3s ease 0s;
}
a, button, input
{
outline: medium none;
color: #4FC1F0;
}
a, button
{
font-family: 'Raleway' , sans-serif;
}
.white-bg
{
background: #fff;
}
.ptb-20
{
padding: 20px 0;
}
.text-center
{
text-align: center;
}
.copyright
{
background: none repeat scroll 0 0 #e54c2a;
}
p
{
font-size: 14px;
font-weight: normal;
line-height: 24px;
color: #757575;
margin-bottom: 15px;
}
.copyright p a
{
color: #fff;
font-weight: bold;
}
a, button, input
{
outline: medium none;
color: #4FC1F0;
}
.copyright p
{
color: #fff;
font-size: 13px;
text-transform: capitalize;
}
.copyright p
{
margin: 0;
}
.pattern-fixed.pattern
{
background: url(images/bg/pattern.png) repeat fixed 0 0;
}
.boxed-layout .wrapper
{
margin: auto;
position: relative;
width: 1500px;
}
.white-bg
{
background: #fff;
}
.boxed-layout .sticky
{
left: 0;
right: 0;
width: 1500px;
}
.sticky
{
-webkit-animation: 600ms ease-in-out 0s normal none 1 running fadeInDown;
animation: 600ms ease-in-out 0s normal none 1 running fadeInDown;
background: rgba(255, 255, 255, 1) none repeat scroll 0 0;
left: 0;
margin: auto;
position: fixed;
top: 0;
z-index: 999;
width: 100%;
}
</style>
<body class="pattern-fixed pattern" />
<form id="form1" runat="server">
<div class="preloader">
<div class="loading-center">
<div class="loading-center-absolute">
<div class="object object_one">
</div>
<div class="object object_two">
</div>
<div class="object object_three">
</div>
</div>
</div>
<div class="boxed-layout">
<div class="wrapper white-bg">
<div class="header sticky-header">
<div class="container">
<div class="row">
<div class="col-md-2 col-sm-3 col-xs-6">
<div class="logo">
<a href="#">
<img src="images/logo/logo.png" alt=" " /></a></div>
</div>
<div class="col-md-10 col-sm-9 col-xs-6">
<div class="mgea-full-width">
<div class="header-right">
<div class="header-menu hidden-sm hidden-xs">
<div class="menu">
<ul>
<li><a href="#">Home</a> </li>
<li><a href="#">about</a></li>
<li><a href="#">Feature</a></li>
<li><a href="#">Food Menu</a></li>
<li><a href="#">gallery</a></li>
<li><a href="contact-us.html">contact</a></li>
</ul>
</div>
</div>
<div class="search">
<div class="search-inner">
<a href="#"><i class="mdi mdi-magnify"></i></a>
</div>
</div>
</div>
<div class="search-inside" style="display: none;">
<a href="#" class="search-close"><i class="mdi mdi-close"></i></a>
<div class="search-overlay">
</div>
<div class="searchbar-inner">
<div class="search">
<form action="#">
<input type="search" placeholder="Search here">
<button type="submit">
<i class="mdi mdi-magnify"></i>
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder>
</div>
<script type="text/javascript" src="js/vendor/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript" src="js/isotope.pkgd.min.js"></script>
<script type="text/javascript" src="js/ajax-mail.js"></script>
<script type="text/javascript" src="js/jquery.counterup.min.js"></script>
<script type="text/javascript" src="js/animated-headlines.js"></script>
<script type="text/javascript" src="js/waypoints.min.js"></script>
<script type="text/javascript" src="js/jquery.collapse.js"></script>
<script type="text/javascript" src="js/style-customizer.js"></script>
<script type="text/javascript" src="js/plugins.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</form>
</html>
Code for master page
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/jssor.slider-22.2.16.mini.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
var jssor_1_options = {
$AutoPlay: true,
$SlideDuration: 800,
$SlideEasing: $Jease$.$OutQuint,
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
/*responsive code begin*/
/*remove responsive code if you don't want the slider scales while window resizing*/
function ScaleSlider() {
var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
if (refSize) {
refSize = Math.min(refSize, 1920);
jssor_1_slider.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
/*responsive code end*/
});
</script>
<style type="text/css">
/* jssor slider loading skin oval css */
.jssorl-oval img {
animation-name: jssorl-oval;
animation-duration: 1.2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes jssorl-oval {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
/* jssor slider bullet navigator skin 05 css */
/*
.jssorb05 div (normal)
.jssorb05 div:hover (normal mouseover)
.jssorb05 .av (active)
.jssorb05 .av:hover (active mouseover)
.jssorb05 .dn (mousedown)
*/
.jssorb05 {
position: absolute;
}
.jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {
position: absolute;
/* size of bullet elment */
width: 16px;
height: 16px;
background: url('img/b05.png') no-repeat;
overflow: hidden;
cursor: pointer;
}
.jssorb05 div { background-position: -7px -7px; }
.jssorb05 div:hover, .jssorb05 .av:hover { background-position: -37px -7px; }
.jssorb05 .av { background-position: -67px -7px; }
.jssorb05 .dn, .jssorb05 .dn:hover { background-position: -97px -7px; }
/* jssor slider arrow navigator skin 22 css */
/*
.jssora22l (normal)
.jssora22r (normal)
.jssora22l:hover (normal mouseover)
.jssora22r:hover (normal mouseover)
.jssora22l.jssora22ldn (mousedown)
.jssora22r.jssora22rdn (mousedown)
.jssora22l.jssora22lds (disabled)
.jssora22r.jssora22rds (disabled)
*/
.jssora22l, .jssora22r {
display: block;
position: absolute;
/* size of arrow element */
width: 40px;
height: 58px;
cursor: pointer;
background: url('img/a22.png') center center no-repeat;
overflow: hidden;
}
.jssora22l { background-position: -10px -31px; }
.jssora22r { background-position: -70px -31px; }
.jssora22l:hover { background-position: -130px -31px; }
.jssora22r:hover { background-position: -190px -31px; }
.jssora22l.jssora22ldn { background-position: -250px -31px; }
.jssora22r.jssora22rdn { background-position: -310px -31px; }
.jssora22l.jssora22lds { background-position: -10px -31px; opacity: .3; pointer-events: none; }
.jssora22r.jssora22rds { background-position: -70px -31px; opacity: .3; pointer-events: none; }
</style>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<div class="boxed-layout">
<div class="wrapper white-bg">
<div class="container">
<div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px;
width: 1500px; height: 579px; overflow: hidden; visibility: hidden;">
<!-- Loading Screen -->
<div data-u="loading" style="position: absolute; top: 0px; left: 0px; background-color: rgba(0,0,0,0.7);">
<div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block;
top: 0px; left: 0px; width: 100%; height: 100%;">
</div>
<div style="position: absolute; display: block; background: url('images/loading.gif') no-repeat center center;
top: 0px; left: 0px; width: 100%; height: 100%;">
</div>
</div>
<div id="slider" runat="server" data-u="slides" style="cursor: default; position: relative;
top: 0px; left: 0px; width: 1500px; height: 579px; overflow: hidden;">
</div>
<!-- Bullet Navigator -->
<div data-u="navigator" class="jssorb05" style="bottom: 16px; right: 16px;" data-autocenter="1">
<!-- bullet navigator item prototype -->
<div data-u="prototype" style="width: 16px; height: 16px;">
</div>
</div>
<!-- Arrow Navigator -->
<span data-u="arrowleft" class="jssora22l" style="top: 0px; left: 8px; width: 40px;
height: 58px;" data-autocenter="2"></span><span data-u="arrowright" class="jssora22r"
style="top: 0px; right: 8px; width: 40px; height: 58px;" data-autocenter="2">
</span>
</div>
</div>
</div>
</div>
<!--Home about section start-->
<div class="home-about white-bg ptb-100">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="welcome-about">
<h2 class="title_1">
About Kget neque porttitor no amet dolor. Proin pretiumss.
</h2>
<p class="text1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet dolor libero,
eget loved dost venenatis mauris finibus dictum. Vestibulum quis elit eget neque
porttitor no amet dolor. Proin pretium purus a lorem ornare</p>
<p class="text2">
sed lobortis pulvinar. Integer laoreet mi id eros porta euismod. Suspendisse potenti.
Nulla eros dost mauris, convallis et sem tempus, viverra hendrerit sapien Lorem
amet, consectetur adipiscing elit. Donec aliquet dolor libero,
</p>
<div class="read-more">
<a href="#">read more</a>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="welcome-about-img">
<img src="images/about/home-about.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
<!--Home about section end-->
</asp:Content>
protected void Page_Load(object sender, EventArgs e)
{
getSlider();
}
public void getSlider()
{
clsSlider objSlider = new clsSlider(true);
objSlider.SelectAll();
string str = string.Empty;
int i = 0;
for (i = 0; i < objSlider.ListclsSlider.Count; i++)
{
str += @" <div>
<img data-u='image' src='../images/Slider/" + objSlider.ListclsSlider[i].SliderID + objSlider.ListclsSlider[i].ImgExtension + @"' />
</div>";
}
slider.InnerHtml = str;
}
}
Code for defaultpage which includ master page