-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
137 lines (112 loc) · 7.79 KB
/
Copy pathindex.html
File metadata and controls
137 lines (112 loc) · 7.79 KB
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!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">
<!--Link de BootsTrap-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<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=Ubuntu:ital,wght@0,500;1,500&display=swap" rel="stylesheet">
<title>Inicio</title>
</head>
<body>
<!--BARRA DE NAVEGACION-->
<nav class="navbar navbar-expand-lg navbar-light p-3 fixed-top bg-light">
<div class="container">
<a href="#" class="navbar-brand">
<span class="fs-3 text-logo fw-bold" id="logo">BlogTech</span>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#barra-nav" aria-controls="barra-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="barra-nav">
<ul class="navbar-nav me-auto mb-5 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-dark fs-5" href="#" role="button" data-bs-toggle="dropdown">
Productos
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item text-dark fs-5" href="html/iphone.html">Iphone</a></li>
<li><a class="dropdown-item text-dark fs-5" href="html/samsung.html">Samsung</a></li>
<li><a class="dropdown-item text-dark fs-5" href="html/xiaomi.html">Xiaomi</a></li>
<li><a class="dropdown-item text-dark fs-5" href="html/googe-pixel.html">Google Pixel</a></li>
<li><a class="dropdown-item text-dark fs-5" href="html/one-plus.html">One Plus</a></li>
<li><a class="dropdown-item text-dark fs-5" href="html/productos.html">Todos</a></li>
</ul>
</li>
<li class="nav-item">
<a href="html/contactanos.html" class="nav-link text-dark fs-5">Contactanos</a>
</li>
<li class="nav-item">
<a href="html/conocenos.html" class="nav-link text-dark fs-5">Conocenos</a>
</li>
<li class="nav-item">
<a href="html/team.html" class="nav-link text-dark fs-5">Team</a>
</li>
</ul>
</div>
</div>
</nav>
<!--FOTO DE PORTADA-->
<section id="hero">
<h1 class="hero-h1">Los mejores SmartPhone <br> los encontrás aquí</h1>
</section>
<!--INFORMACION SOBRE EL SITIO-->
<section class="d-flex flex-column justify-content-center align-items-center pt-5 text-center w-50 m-auto" id="intro">
<h1 class="p-3 fs-2 border-top border-3">Un blog donde siempre estaras informado sobre los mejores <span class="text-morado"> SmartPhone</span></h1>
<p class="p-3 fs-4">
<span class="text-morado">BlogTech</span> es la mejor pagina web para enterarte de los mejores precios en el mercado.
</p>
</section>
<!--CONOCE NUESTRO SITIO-->
<section class="d-flex flex-column justify-content-center align-items-center pt-5 text-center w-50 m-auto" id="intro">
<h1 class="p-3 fs-2 ">Conoce más sobre nosotros:</h1>
</section>
<section class="w-100">
<div class="row w-50 mx-auto" id="conocenos-fila">
<div class="col-lg-12 col-md-12 col-sm-12 d-flex justify-content-center align-items-center my-5 descripcion-img box-shadow">
<img src="imagenes/productos.png" alt="Productos" width="180" height="160">
<div>
<h3 class="fs-5 mt-4 px-4 pb-1 text-center text-decoration-none text-uppercase"><a href="html/productos.html" class="text-decoration-none">Productos</a></h3>
<p class="px-5">Aquí podrás encontrar los mejores productos buscados por nuestro equipo en el mercado para poder traerte el mejor precio.</p>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 d-flex justify-content-center align-items-center my-5 descripcion-img box-shadow">
<img src="imagenes/contactanos.png" alt="Productos" width="180" height="160">
<div>
<h3 class="fs-5 mt-4 px-4 pb-1 text-center text-decoration-none text-uppercase"><a href="html/contactanos.html" class="text-decoration-none">Contactanos</a></h3>
<p class="px-5">En esta seccion podrás llenar un formulario de contacto con el motivo de tu mensaje el cual le daremos mucha importancia y trataremos de responder lo mas breve posible.</p>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 d-flex justify-content-center align-items-center my-5 descripcion-img box-shadow">
<img src="imagenes/Mision-vision-y-valores.png" alt="Productos" width="180" height="160">
<div>
<h3 class="fs-5 mt-4 px-4 pb-1 text-center text-decoration-none text-uppercase"><a href="html/conocenos.html" class="text-decoration-none ">Conocenos</a></h3>
<p class="px-5">En esta seccion podrás visualizar nuestra mision, vision, al igual que nuestro valores.</p>
</div>
</div>
</div>
</section>
<!--FOOTER-->
<section class="border-bottom border-secondary border-2">
<div >
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#413F42" fill-opacity="1" d="M0,32L120,42.7C240,53,480,75,720,74.7C960,75,1200,53,1320,42.7L1440,32L1440,320L1320,320C1200,320,960,320,720,320C480,320,240,320,120,320L0,320Z"></path></svg>
</div>
</section>
<footer class="w-100 d-flex align-items-center justify-content-center flex-wrap">
<p class="fs-5 px-3 pt-3">BlogTech.</p>
<div id="iconos" >
<a href="https://www.facebook.com/" target="_blank"><i class="bi bi-facebook"></i></a>
<a href="https://twitter.com/" target="_blank"><i class="bi bi-twitter"></i></a>
<a href="https://www.instagram.com/" target="_blank"><i class="bi bi-instagram"></i></a>
</div>
</footer>
<!--Extensiones de JavaScript con Bootstrap-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
</body>
</html>