Skip to content

Commit 52e54b8

Browse files
FherndFhernd
committed
JavaScript Ejercicio: 1463 Crear una Página Web Básica con la Inteligencia Artificial de GitHub Copilot
Crear una Página Web Básica Utilizando la Inteligencia Artificial de GitHub Copilot.
1 parent d0150c1 commit 52e54b8

File tree

1 file changed

+172
-0
lines changed

1 file changed

+172
-0
lines changed

‎Parte002/ex1463-crear-sitio-web-github-copilot.html‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
<!-- Ejercicio 1463: Generar un Sitio Web Básico con GitHub Copilot. -->
2+
<html>
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Crear un Sitio Web Básico con GitHub Copilot</title>
7+
<!-- Incluir Bootstrap -->
8+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
9+
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
10+
<!-- Incluir Font Awesome -->
11+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
12+
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
13+
crossorigin="anonymous" />
14+
</head>
15+
16+
<body>
17+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
18+
<a class="navbar-brand" href="#">GitHub Copilot</a>
19+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
20+
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
21+
<span class="navbar-toggler-icon"></span>
22+
</button>
23+
<div class="collapse navbar-collapse" id="navbarNav">
24+
<ul class="navbar-nav">
25+
<li class="nav-item active">
26+
<a class="nav-link" href="#">Inicio <span class="sr-only">(current)</span></a>
27+
</li>
28+
<li class="nav-item">
29+
<a class="nav-link" href="#">Nosotros</a>
30+
</li>
31+
<li class="nav-item">
32+
<a class="nav-link" href="#">Contacto</a>
33+
</li>
34+
</ul>
35+
</div>
36+
</nav>
37+
<!-- Incluir carrusel con tres imágenes -->
38+
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
39+
<div class="carousel-inner">
40+
<div class="carousel-item active">
41+
<img src="https://picsum.photos/800/400?random=1" class="d-block w-100" alt="...">
42+
</div>
43+
<div class="carousel-item">
44+
<img src="https://picsum.photos/800/400?random=2" class="d-block w-100" alt="...">
45+
</div>
46+
<div class="carousel-item">
47+
<img src="https://picsum.photos/800/400?random=3" class="d-block w-100" alt="...">
48+
</div>
49+
</div>
50+
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
51+
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
52+
<span class="sr-only">Previous</span>
53+
</a>
54+
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
55+
<span class="carousel-control-next-icon" aria-hidden="true"></span>
56+
<span class="sr-only">Next</span>
57+
</a>
58+
</div>
59+
<!-- Incluir contenido Lorem ipsum -->
60+
<div class="container">
61+
<div class="row">
62+
<div class="col">
63+
<h1>¿Qué es GitHub Copilot?</h1>
64+
<p>
65+
<!-- Incluir descripción de GitHub Copilot -->
66+
<p>GitHub Copilot es una herramienta de código autocompletado que te ayuda a escribir código más rápido.
67+
Copilot usa el contexto de tu código para sugerir líneas completas de código que puedes insertar en
68+
tu editor. Copilot está disponible en Visual Studio Code, PyCharm, y JetBrains IDEs.</p>
69+
</p>
70+
</div>
71+
</div>
72+
<div class="row">
73+
<div class="col">
74+
<!-- Incluir botón para mostrar una ventana modal -->
75+
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
76+
Abrir ventana modal
77+
</button>
78+
</div>
79+
</div>
80+
</div>
81+
82+
<!-- Incluir ventana modal -->
83+
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
84+
<div class="modal-dialog">
85+
<div class="modal-content">
86+
<div class="modal-header">
87+
<h5 class="modal-title" id="exampleModalLabel">GitHub Copilot</h5>
88+
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
89+
<span aria-hidden="true">&times;</span>
90+
</button>
91+
</div>
92+
<div class="modal-body">
93+
<p>GitHub Copilot es una herramienta de código autocompletado que te ayuda a escribir código más
94+
rápido. Copilot usa el contexto de tu código para sugerir líneas completas de código que puedes
95+
insertar en tu editor. Copilot está disponible en Visual Studio Code, PyCharm, y JetBrains IDEs.
96+
</p>
97+
</div>
98+
<div class="modal-footer">
99+
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
100+
</div>
101+
</div>
102+
</div>
103+
</div>
104+
105+
<!-- Incluir pie de página -->
106+
<footer class="bg-dark text-white text-center text-lg-start">
107+
<!-- Grid container -->
108+
<div class="container p-4">
109+
<!--Grid row-->
110+
<div class="row">
111+
<!--Grid column-->
112+
<div class="col-lg-6 col-md-12 mb-4 mb-md-0">
113+
<h5 class="text-uppercase">GitHub Copilot</h5>
114+
115+
<p>
116+
<!-- Incluir descripción de GitHub Copilot -->
117+
<p>GitHub Copilot es una herramienta de código autocompletado que te ayuda a escribir código más
118+
rápido.
119+
Copilot usa el contexto de tu código para sugerir líneas completas de código que puedes insertar
120+
en
121+
tu editor. Copilot está disponible en Visual Studio Code, PyCharm, y JetBrains IDEs.</p>
122+
</p>
123+
</div>
124+
<!--Grid column-->
125+
126+
<!--Grid column-->
127+
<div class="col-lg-6 col-md-12 mb-4 mb-md-0">
128+
<h5 class="text-uppercase">Contacto</h5>
129+
130+
<ul class="list-unstyled mb-0">
131+
<li>
132+
<a href="#!" class="text-white">Correo electrónico</a>
133+
</li>
134+
<li>
135+
<a href="#!" class="text-white">Teléfono</a>
136+
</li>
137+
<li>
138+
<a href="#!" class="text-white">Dirección</a>
139+
</li>
140+
</ul>
141+
</div>
142+
<!--Grid column-->
143+
</div>
144+
<!--Grid row-->
145+
</div>
146+
<!-- Grid container -->
147+
148+
<br>
149+
</footer>
150+
151+
<!-- Incluir jQuery -->
152+
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
153+
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
154+
crossorigin="anonymous"></script>
155+
<!-- Incluir Popper -->
156+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"
157+
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
158+
crossorigin="anonymous"></script>
159+
<!-- Incluir Bootstrap -->
160+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
161+
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
162+
crossorigin="anonymous"></script>
163+
<script>
164+
// Detectar carga completa del documento HTML:
165+
$(document).ready(function () {
166+
// Mostrar en la consola un mensaje de carga completa de la página:
167+
console.log("Página cargada");
168+
});
169+
</script>
170+
</body>
171+
172+
</html>

0 commit comments

Comments
 (0)