-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
110 lines (94 loc) · 4.43 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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!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">
<title>CV Wyatt Lawson</title>
<!-- Style -->
<link rel="stylesheet" href="styles/style.css">
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<!-- Work Sans -->
<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=Work+Sans&display=swap" rel="stylesheet">
<!-- Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
</head>
<body>
<header class="container-fluid p-2 bg-primary text-white text-center">
<h1>Curriculum Vitae<br>Wyatt Lawson</h1>
<img src="images/image.jpg" alt="Foto de Wyatt Lawson" class="rounded border border-light mb-3">
</header>
<main class="contenido">
<nav>
<ul class="barraDeNavegacion">
<li><span class="material-symbols-outlined">person</span><a href="#informacionPersonal">Información personal</a></li>
<li><span class="material-symbols-outlined">business_center</span><a href="#experiencia">Experiencia</a></li>
<li><span class="material-symbols-outlined">psychology</span><a href="#habilidades">Habilidades</a></li>
<li><span class="material-symbols-outlined">edit_note</span><a href="#ejemplos">Ejemplos</a></li>
</ul>
</nav>
<section>
<h2 id="informacionPersonal">Información personal</h2>
<ul>
<li>Nombre: Wyatt Lawson</li>
<li>Email: wyatt.lawson@example.com</li>
<li>Fecha de nacimiento: 1/2/1978</li>
<li>Dirección: 2454 Westheimer Rd</li>
<li>Teléfono: (715) 974-5260</li>
</ul>
</section>
<section>
<h2 id="experiencia">Experiencia</h2>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>In iaculis magna quis erat porta interdum.</li>
<li>Nullam nec velit aliquam, vestibulum sapien id, aliquam arcu.</li>
<li>Nam at orci id libero tempus laoreet quis et tortor.</li>
<li>Aenean vitae dui ultrices, ullamcorper diam non, pellentesque felis.</li>
<li>Aliquam sed enim sit amet erat congue dapibus vitae sed dui.</li>
<li>Nulla sed lacus auctor, egestas turpis vitae, vestibulum dui.</li>
</ul>
</section>
<section>
<h2 id="habilidades">Habilidades</h2>
<ul>
<li>Fusce iaculis arcu ut urna consectetur, eget blandit mauris aliquam.</li>
<li>Praesent rutrum sapien eu libero egestas placerat.</li>
<li>Sed in lacus vel dolor convallis consequat.</li>
<li>Vivamus id dui sit amet ipsum luctus scelerisque.</li>
<li>Phasellus lobortis lorem nec tempor suscipit.</li>
<li>Maecenas rhoncus velit vel libero placerat pulvinar.</li>
</ul>
</section>
<section>
<h2 id="ejemplos">Ejemplos</h2>
<h3 class="mt-4">Cambiar color de títulos</h3>
<input type="color" name="colorDeTitulos" id="colorDeTitulos" class="form-control form-control-color d-inline-block" value="#0d6efd">
<button class="btn btn-primary align-top" id="cambiarColor">Cambiar</button>
<h3 class="mt-4">Visitas al sitio</h3>
<ul>
<li id="contadorDeIngresos">Cargando...</li>
<li id="ultimaVisita">Cargando...</li>
</ul>
<h3 class="mt-4">Referencias (Json)</h3>
<ul>
<li id="Nombre">Cargando...</li>
<li id="Email">Cargando...</li>
</ul>
<h3 class="mt-4">Geolocalización</h3>
<button class="btn btn-primary align-top" id="geoLocalizacion">Localizar</button>
<ul>
<li id="latitud" class="oculto"></li>
<li id="longitud" class="oculto"></li>
<li id="precision" class="oculto"></li>
</ul>
</section>
</main>
<!-- Scripts -->
<script src="scripts/script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>