"html and css"
Bootstrap 3.0.0 Snippet by ravindra93

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="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="wrapper">
<nav>
<div class="logo">
<h1>LOGO</h1>
</div>
<div class="menu">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Product</a></li>
<li class="submenu"><a href="#" class="arrow">Services</a>
<ul class="dropdown">
<li><a href="#">Services1</a></li>
<li><a href="#">Services2</a></li>
<li><a href="#">Services3</a></li>
<li><a href="#">Services4</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</nav>
<div class="slider"></div>
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
*{margin:0;padding:0;}
body{
font:16px/30px Verdana, Geneva, sans-serif;
}
ul{margin:0;padding:0;}
li{list-style:none;}
a{text-decoration:none;color:#000;}
.wrapper{width:1170px;margin:10px auto;border:1px solid #dedede;}
nav{background:#f5f5f5;height:55px}
nav .logo{width:200px;float:left;line-height:55px;}
.menu{float:right;}
.menu li{width:170px;text-align:center;float:left;line-height:55px;}
ul.dropdown li a{display:none;transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transform:scale(1.1,1.1);-webkit-transform:scale(1.1,1.1)}
.submenu a{position:relative;}
.arrow:after{content: '';position: absolute;display: block;width:0;height:0;border-left: 7px solid transparent;border-right: 7px solid transparent;border-top: 7px solid #000;top: 25px;right:35px;}
.submenu:hover .dropdown li a{display:block;transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;)}
.dropdown li{line-height:40px;}
.menu li a{display:block;}
.logo h1 {margin:5px 50px;color: #de5823;font-size: 40px;}
.menu li a{background:#D1D1D1;transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;}
.menu li a:hover{background:#9c9c9c;color:#fff;border-bottom:3px solid #000;}
li.active a{background:#9c9c9c;color:#fff;border-bottom:3px solid #000;}
.slider{width:1170px;height:450px;display:block;animation: slide 15s ease-in-out infinite;}
.slider img{display:inline-block;}
@keyframes slide{
0%{background:url(http://i.imgur.com/u6NNIP6.jpg) no-repeat;background-size:cover;}
50%{background:url(http://i.imgur.com/6Df0zT4.jpg) no-repeat;background-size:cover;}
100%{background:url(http://i.imgur.com/xNbkboD.jpg) no-repeat;background-size:cover;}
}
@-webkit-keyframes slide{
0%{background:url(http://i.imgur.com/u6NNIP6.jpg) no-repeat;background-size:cover;}
50%{background:url(http://i.imgur.com/6Df0zT4.jpg) no-repeat;background-size:cover;}
100%{background:url(http://i.imgur.com/xNbkboD.jpg) no-repeat;background-size:cover;}
}
.about{padding:20px 0px;overflow:auto;}
.about h1{text-align:center;font-size:32px;color:#f00;text-transform:uppercase;position:relative;margin-bottom:1em;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Light Bootstrap Dashboard Angular

Questions / Comments: