-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathscrollspy.html
More file actions
92 lines (90 loc) · 6.64 KB
/
scrollspy.html
File metadata and controls
92 lines (90 loc) · 6.64 KB
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
<title>Scrollspy</title>
<link rel="stylesheet" href="css/materialize.css">
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">Shark Soft</a>
<ul class="right hide-on-med-and-down">
<li class="active"><a href="#inicio" >Inicio</a></li>
<li><a href="#productos">Productos</a></li>
<li><a href="#servicios">Servicios</a></li>
<li><a href="#equipo">Equipo</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</div>
</nav>
</div>
<div class="container">
<article id="inicio" class="row margin-top__small scrollspy">
<h3>Inicio</h3>
<div class="col m4">
<img class="responsive-img" src="http://lorempixel.com/500/400/">
</div>
<div class="col m8">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, similique. Ipsa repellendus ipsum culpa blanditiis debitis, vitae, dolore, voluptatibus labore facere eius, quia alias veritatis velit repellat eveniet nisi recusandae?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, similique. Ipsa repellendus ipsum culpa blanditiis debitis, vitae, dolore, voluptatibus labore facere eius, quia alias veritatis velit repellat eveniet nisi recusandae?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, similique. Ipsa repellendus ipsum culpa blanditiis debitis, vitae, dolore, voluptatibus labore facere eius, quia alias veritatis velit repellat eveniet nisi recusandae?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, similique. Ipsa repellendus ipsum culpa blanditiis debitis, vitae, dolore, voluptatibus labore facere eius.
</p>
</div>
</article>
<article id="productos" class="row margin-top__small scrollspy">
<h3>Productos</h3>
<div class="col m8">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, similique. Ipsa repellendus ipsum culpa blanditiis debitis, vitae, dolore, voluptatibus labore facere eius, quia alias veritatis velit repellat eveniet nisi recusandae?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, similique. Ipsa repellendus ipsum culpa blanditiis debitis, vitae, dolore, voluptatibus labore facere eius, quia alias veritatis velit repellat eveniet nisi recusandae?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, similique. Ipsa repellendus ipsum culpa blanditiis debitis, vitae, dolore, voluptatibus labore facere eius, quia alias veritatis velit repellat eveniet nisi recusandae?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, similique. Ipsa repellendus ipsum culpa blanditiis debitis, vitae, dolore, voluptatibus labore facere eius.
</p>
</div>
<div class="col m4">
<img class="responsive-img" src="http://lorempixel.com/g/500/400/">
</div>
</article>
<article id="servicios" class="row margin-top__small scrollspy">
<h3>Servicios</h3>
<div class="col m4">
<img class="responsive-img" src="http://lorempixel.com/500/400/transport">
</div>
<div class="col m8">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, similique. Ipsa repellendus ipsum culpa blanditiis debitis, vitae, dolore, voluptatibus labore facere eius, quia alias veritatis velit repellat eveniet nisi recusandae?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, similique. Ipsa repellendus ipsum culpa blanditiis debitis, vitae, dolore, voluptatibus labore facere eius, quia alias veritatis velit repellat eveniet nisi recusandae?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, similique. Ipsa repellendus ipsum culpa blanditiis debitis, vitae, dolore, voluptatibus labore facere eius, quia alias veritatis velit repellat eveniet nisi recusandae?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, similique. Ipsa repellendus ipsum culpa blanditiis debitis, vitae, dolore, voluptatibus labore facere eius.
</p>
</div>
</article>
<article id="equipo" class="row margin-top__small scrollspy">
<h3>Equipo</h3>
<div class="col m8">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, similique. Ipsa repellendus ipsum culpa blanditiis debitis, vitae, dolore, voluptatibus labore facere eius, quia alias veritatis velit repellat eveniet nisi recusandae?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, similique. Ipsa repellendus ipsum culpa blanditiis debitis, vitae, dolore, voluptatibus labore facere eius, quia alias veritatis velit repellat eveniet nisi recusandae?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, similique. Ipsa repellendus ipsum culpa blanditiis debitis, vitae, dolore, voluptatibus labore facere eius, quia alias veritatis velit repellat eveniet nisi recusandae?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, similique. Ipsa repellendus ipsum culpa blanditiis debitis, vitae, dolore, voluptatibus labore facere eius.
</p>
</div>
<div class="col m4">
<img class="responsive-img" src="http://lorempixel.com/500/400/nature">
</div>
</article>
<article id="contacto" class="row margin-top__small scrollspy">
<h3>Contacto
<div class="col m4">
<img class="responsive-img" src="http://lorempixel.com/500/400/business">
</div>
<div class="col m8">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, similique. Ipsa repellendus ipsum culpa blanditiis debitis, vitae, dolore, voluptatibus labore facere eius, quia alias veritatis velit repellat eveniet nisi recusandae?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, similique. Ipsa repellendus ipsum culpa blanditiis debitis, vitae, dolore, voluptatibus labore facere eius, quia alias veritatis velit repellat eveniet nisi recusandae?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, similique. Ipsa repellendus ipsum culpa blanditiis debitis, vitae, dolore, voluptatibus labore facere eius, quia alias veritatis velit repellat eveniet nisi recusandae?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, similique. Ipsa repellendus ipsum culpa blanditiis debitis, vitae, dolore, voluptatibus labore facere eius.
</p>
</div>
</article>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.js"></script>
<script>
$(document).ready(function() {
$('.scrollspy').scrollSpy();
});
</script>
</body>
</html>