-
Notifications
You must be signed in to change notification settings - Fork 0
/
Menu_slider.html
64 lines (58 loc) · 3.85 KB
/
Menu_slider.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/estilos_menu_slider.css">
<link rel="shortcut icon" href="./img/logotipo_Mesa de trabajo 1.ico" type="image/x-icon">
<title>Slider Nav</title>
</head>
<body>
<div class="hero" id="hero">
<h1>MENÚ SLIDER</h1>
<p>HTML • CSS • Javascript</p>
</div>
<nav id="menu">
<a href="#1">seccion 1</a>
<a href="#2">seccion 2</a>
<a href="#3">seccion 3</a>
<a href="#4">seccion 4</a>
<span class="indicador" id="indicador"></span>
</nav>
<div class="secciones">
<div class="seccion" id="1">
<div class="card">
<h1>Sección 1</h1>
<img src="img/1.jpg" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet ante mattis, lacinia arcu nec, consequat massa. Aliquam faucibus quam eget justo posuere vehicula. Donec ac fermentum dolor, rhoncus congue sapien. Maecenas lacinia tellus nec turpis tempor pellentesque. Praesent in erat a nisl viverra dapibus. Pellentesque feugiat dolor quis sapien rutrum, sed placerat est volutpat. Curabitur sed convallis lacus, vel molestie ante. </p>
</div>
</div>
<div class="seccion" id="2">
<div class="card">
<h1>Sección 2</h1>
<img src="img/2.jpg" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet ante mattis, lacinia arcu nec, consequat massa. Aliquam faucibus quam eget justo posuere vehicula. Donec ac fermentum dolor, rhoncus congue sapien. Maecenas lacinia tellus nec turpis tempor pellentesque. Praesent in erat a nisl viverra dapibus. Pellentesque feugiat dolor quis sapien rutrum, sed placerat est volutpat. Curabitur sed convallis lacus, vel molestie ante. </p>
</div>
</div>
<div class="seccion" id="3">
<div class="card">
<h1>Sección 3</h1>
<img src="img/3.jpg" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet ante mattis, lacinia arcu nec, consequat massa. Aliquam faucibus quam eget justo posuere vehicula. Donec ac fermentum dolor, rhoncus congue sapien. Maecenas lacinia tellus nec turpis tempor pellentesque. Praesent in erat a nisl viverra dapibus. Pellentesque feugiat dolor quis sapien rutrum, sed placerat est volutpat. Curabitur sed convallis lacus, vel molestie ante. </p>
</div>
<div class="seccion" id="4">
<div class="card">
<h1>Sección 4</h1>
<img src="img/4.jpg" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet ante mattis, lacinia arcu nec, consequat massa. Aliquam faucibus quam eget justo posuere vehicula. Donec ac fermentum dolor, rhoncus congue sapien. Maecenas lacinia tellus nec turpis tempor pellentesque. Praesent in erat a nisl viverra dapibus. Pellentesque feugiat dolor quis sapien rutrum, sed placerat est volutpat. Curabitur sed convallis lacus, vel molestie ante. </p>
</div>
</div>
</div>
</div>
<script src="js/menu_slider.js"></script>
</body>
</html>