Skip to content

Commit b5c56ab

Browse files
ibrahimhc19ibrahimhc19
committed
Aplicando Bootstrap al indice
1 parent 0dcff27 commit b5c56ab

2 files changed

Lines changed: 26 additions & 55 deletions

File tree

‎index.html‎

Lines changed: 20 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -4,46 +4,40 @@
44
<head>
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<link rel="apple-touch-icon" sizes="57x57" href="favicon/apple-icon-57x57.png">
8-
<link rel="apple-touch-icon" sizes="60x60" href="favicon/apple-icon-60x60.png">
9-
<link rel="apple-touch-icon" sizes="72x72" href="favicon/apple-icon-72x72.png">
10-
<link rel="apple-touch-icon" sizes="76x76" href="favicon/apple-icon-76x76.png">
11-
<link rel="apple-touch-icon" sizes="114x114" href="favicon/apple-icon-114x114.png">
12-
<link rel="apple-touch-icon" sizes="120x120" href="favicon/apple-icon-120x120.png">
13-
<link rel="apple-touch-icon" sizes="144x144" href="favicon/apple-icon-144x144.png">
14-
<link rel="apple-touch-icon" sizes="152x152" href="favicon/apple-icon-152x152.png">
15-
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-icon-180x180.png">
16-
<link rel="icon" type="image/png" sizes="192x192" href="favicon/android-icon-192x192.png">
17-
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
18-
<link rel="icon" type="image/png" sizes="96x96" href="favicon/favicon-96x96.png">
19-
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
20-
<link rel="manifest" href="favicon/manifest.json">
21-
<meta name="msapplication-TileColor" content="#ffffff">
22-
<meta name="msapplication-TileImage" content="favicon/ms-icon-144x144.png">
23-
<meta name="theme-color" content="#ffffff">
7+
<!-- Favicon -->
8+
<link rel="icon" type="image/png" sizes="32x32" href="../favicon/ms-icon-32x32.png">
9+
<link rel="apple-touch-icon" sizes="60x60" href="../favicon/apple-icon-60x60.png">
10+
<!-- Fuentes -->
2411
<link rel="preconnect" href="https://fonts.googleapis.com">
2512
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
2613
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap" rel="stylesheet">
27-
<link rel="stylesheet" href="./styles.css">
14+
<!-- Hojas de estilos -->
15+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
16+
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
17+
<link rel="stylesheet" href="styles.css">
2818
<title>Indice</title>
2919
</head>
3020

3121
<body>
3222

33-
<h1 id="titulo">90 Proyectos usando HTML, CSS y JavaScript</h1>
34-
<div id="container">
23+
<h1 class="text-center my-5 fs-2">90 Proyectos usando HTML, CSS y JavaScript</h1>
24+
<div class="container-fluid col-8">
3525

36-
<ol><h2>Índice</h2>
37-
<ul>
38-
<li><a href="./01-NavBar/index.html" target="_blank">Proyecto 1 HTML, CSS</a></li>
39-
<li><a href="./01-NavBar - Javascript/index.html" target="_blank">Proyecto 1 HTML, CSS y JS</a></li>
40-
<li><a href="./01-NavBar - Bootstrap//index.html" target="_blank">Proyecto 1 HTML, CSS y BOOTSTRAP</a></li>
41-
<li><a href="./01-NavBar - Bootstrap - Offcanvas/index.html" target="_blank">Proyecto 1 HTML, CSS y BOOTSTRAP (Offcanvas)</a></li>
26+
<ol><h2 class="my-5 text-center fw-bold">Índice</h2>
27+
<ul class="list-group">
28+
<li class="list-group-item list-group-item-action"><a href="./01-NavBar/index.html" target="_blank">Proyecto 1 HTML, CSS</a></li>
29+
<li class="list-group-item list-group-item-action"><a href="./01-NavBar - Javascript/index.html" target="_blank">Proyecto 1 HTML, CSS y JS</a></li>
30+
<li class="list-group-item list-group-item-action"><a href="./01-NavBar - Bootstrap//index.html" target="_blank">Proyecto 1 HTML, CSS y BOOTSTRAP</a></li>
31+
<li class="list-group-item list-group-item-action"><a href="./01-NavBar - Bootstrap - Offcanvas/index.html" target="_blank">Proyecto 1 HTML, CSS y BOOTSTRAP (Offcanvas)</a></li>
4232
</ul>
4333

4434
</ol>
4535
</div>
4636

37+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
38+
integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
39+
crossorigin="anonymous"></script>
40+
4741
</body>
4842

4943
</html>

‎styles.css‎

Lines changed: 6 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -3,30 +3,18 @@
33
padding: 0;
44
color: #1c2ed496;
55
list-style: none;
6-
text-decoration: none;
6+
text-decoration: none!important;
77
box-sizing: border-box;
88
font-family: 'Ubuntu', sans-serif;
99
-webkit-tap-highlight-color: transparent;
1010
user-select: none;
1111
}
1212

13-
:root {
14-
--bg-color: linear-gradient(217deg, #ee6fca, rgba(255, 0, 0, 0) 70.71%),
15-
linear-gradient(127deg, #67bad4, rgba(0, 255, 0, 0) 70.71%),
16-
linear-gradient(336deg, #24b6e7, rgba(0, 0, 255, 0) 70.71%);
17-
--altura: 5rem;
18-
}
1913

20-
html {
14+
body {
2115
background-color: #dbcce9;
2216
}
2317

24-
#titulo {
25-
text-align: center;
26-
margin: 5rem;
27-
text-transform: uppercase;
28-
}
29-
3018
#container {
3119
width: 60%;
3220
margin: 0 auto;
@@ -41,27 +29,16 @@ html {
4129
border: 1px solid rgba(255, 255, 255, 0.3);
4230
}
4331

44-
ol h2 {
45-
margin-bottom: 1rem;
46-
text-align: center;
47-
font-weight: bold;
48-
}
49-
50-
ol {
51-
font-size: 1.2rem;
52-
}
5332

5433
ol li {
5534
margin: .3rem;
5635
}
5736

58-
ol li a{
37+
.list-group-item a{
5938
padding: .2rem;
6039
}
6140

62-
ol li a:hover{
63-
border-radius: 2px;
64-
background: #dbcce9;
65-
transition: all 1s;
66-
41+
.list-group-item{
42+
background-color: #f0dfff;
43+
width: 40%;
6744
}

0 commit comments

Comments
 (0)