"navigation with runing arrow"
Bootstrap 3.3.0 Snippet by KayCube

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
<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="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>title</title>
</head>
<body>
<div id="container">
<header>
Overall-tech
</header>
<nav>
<ul>
<li><a href="{{url('/home/Kaycube/NewYork')}}" >Home</a></li>
<li><a href="{{url('/about')}}">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Courses</a></li>
<li><a href="#">Register</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Feedback</a></li>
<div id="runner"></div>
</ul>
</nav>
</div>
</body>
</html>
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
body{
margin:0;
padding:0;
background:#ccc;
background-size:cover;
}
header{
background:#00d3ff;
font-size:30px;
font-weight: bold;
text-align:center;
line-height:80px;
height:90px;
border-radius:0 0 100% 100% ;
position:relative;
z-index: 7;
}
nav{
padding:0;
margin:0;
background:#fff;
height:100px;
margin-top:-60px;
position:relative;
z-index:6;
border-radius:0 0 60% 60% ;
box-shadow:1px 1px 10px #000;
}
nav ul{
list-style:none;
padding:0;
}
nav ul li{
font-size:20px;
margin-top:25px;
display:inline-block;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: