forked from JkDevArg/CSS-MenuResponsive
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
71 lines (71 loc) · 4.45 KB
/
index.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
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang="es">
<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">
<title>Menu con SubMenu</title>
<script src="https://kit.fontawesome.com/41bcea2ae3.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<header>
<div class="header__superior">
<div class="logo">
<img src="img/logo.png" alt="logo">
</div>
<div class="search">
<input type="search" placeholder="¿Qué deseas buscar?">
</div>
</div>
<div class="container__menu">
<div class="menu">
<input type="checkbox" id="check__menu">
<label id="label__check" for="check__menu">
<i class="fas fa-bars icon__menu"></i>
</label>
<nav>
<ul>
<li><a href="#" id="selected"></a></li>
<li>
<a href="#">Servicios</a>
<ul>
<li><a href="#">Diseño Web</a></li>
<li><a href="#">Diseño Gráfico</a></li>
<li><a href="#">Audio Visual</a></li>
<li><a href="#">Prog. Back-End</a></li>
<li><a href="#">Prog. Front-End</a></li>
</ul>
</li>
<li><a href="#">Nosotros</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Cursos</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</div>
</div>
</header>
<main>
<article>
<h2>Diseño Web</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci ipsa voluptatem ad voluptas maxime rerum ipsum minus nobis autem minima doloremque ducimus fuga aut, omnis cupiditate aliquid quam illo suscipit. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci ipsa voluptatem ad voluptas maxime rerum ipsum minus nobis autem minima doloremque ducimus fuga aut, omnis cupiditate aliquid quam illo suscipit.</p>
</article>
<article>
<h2>Diseño Gráfico</h2><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci ipsa voluptatem ad voluptas maxime rerum ipsum minus nobis autem minima doloremque ducimus fuga aut, omnis cupiditate aliquid quam illo suscipit. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci ipsa voluptatem ad voluptas maxime rerum ipsum minus nobis autem minima doloremque ducimus fuga aut, omnis cupiditate aliquid quam illo suscipit.</p>
</article>
<article>
<h2>Audio Visual</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci ipsa voluptatem ad voluptas maxime rerum ipsum minus nobis autem minima doloremque ducimus fuga aut, omnis cupiditate aliquid quam illo suscipit. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci ipsa voluptatem ad voluptas maxime rerum ipsum minus nobis autem minima doloremque ducimus fuga aut, omnis cupiditate aliquid quam illo suscipit.</p>
</article>
<article>
<h2>Programador Backend</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci ipsa voluptatem ad voluptas maxime rerum ipsum minus nobis autem minima doloremque ducimus fuga aut, omnis cupiditate aliquid quam illo suscipit. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci ipsa voluptatem ad voluptas maxime rerum ipsum minus nobis autem minima doloremque ducimus fuga aut, omnis cupiditate aliquid quam illo suscipit.</p>
</article>
<article>
<h2>Programador Front-End</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci ipsa voluptatem ad voluptas maxime rerum ipsum minus nobis autem minima doloremque ducimus fuga aut, omnis cupiditate aliquid quam illo suscipit. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci ipsa voluptatem ad voluptas maxime rerum ipsum minus nobis autem minima doloremque ducimus fuga aut, omnis cupiditate aliquid quam illo suscipit.</p>
</article>
</main>
</body>
</html>