"Homepage"
Bootstrap 3.3.0 Snippet by hossam

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<nav class="navbar navbar-default" style="background-color:#3366ff;width:80%;margin:auto;margin-top:50px;">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" style="color:white;font-family:raleway;">Aisha Dental Center</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div style="font-family:Oswald;" class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" style="color:white;">
<li><a href="#" style="color:white;"><i class="fa fa-home"></i>· Login</a></li>
</Ul>
<ul class="nav navbar-nav navbar-right" style="color:white;">
<li><a href="#" style="color:white;"><i class="fa fa-group"></i>· Contact US</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<h1 style="margin-left:590px">Welcome</h1>
<p style="margin-left:660px"><i class="fa fa-home"></i></i></p>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.home{
margin-top:10px;
margin-bottom:50px;
width:80%;
background-color:rgba(255,0,255);
margin-left:270px;
margin-right:auto;
text-align:center;
border-radius:5px;
padding-top:10px;
padding-bottom:45px;
}
h1,h2,h3,h4,h5,h46,p{
font-family: 'Raleway', sans-serif;
font-weight:bold;
}
#myCarousel .carousel-caption {
left:0;
right:0;
bottom:0;
text-align:left;
padding:10px;
background:rgba(0,0,0,0.6);
text-shadow:none;
}
#myCarousel .list-group {
position:absolute;
top:0;
right:0;
}
#myCarousel .list-group-item {
border-radius:0px;
cursor:pointer;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
$(document).ready(function(){
var clickEvent = false;
$('#myCarousel').carousel({
interval: 4000
}).on('click', '.list-group li', function() {
clickEvent = true;
$('.list-group li').removeClass('active');
$(this).addClass('active');
}).on('slid.bs.carousel', function(e) {
if(!clickEvent) {
var count = $('.list-group').children().length -1;
var current = $('.list-group li.active');
current.removeClass('active').next().addClass('active');
var id = parseInt(current.data('slide-to'));
if(count == id) {
$('.list-group li').first().addClass('active');
}
}
clickEvent = false;
});
})
$(window).load(function() {
var boxheight = $('#myCarousel .carousel-inner').innerHeight();
var itemlength = $('#myCarousel .item').length;
var triggerheight = Math.round(boxheight/itemlength+1);
$('#myCarousel .list-group-item').outerHeight(triggerheight);
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Kit PRO BS3

Questions / Comments: