-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
134 lines (116 loc) · 7.29 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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html>
<head>
<title>Componentes mecanicos</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- agrego el link del cdn de Bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./css/estilos.css">
<link rel="icon" type="image/x-icon" href="./imagenes/favicon-16x16.png">
</head>
<body>
<div id="grilla">
<header class="border">
<h1 class="texto-animado">Componentes Mecanicos</h1>
<!-- navbar con bootstrap-->
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
<div class="container-fluid">
<a class="navbar-brand" href="#">MENU</a>
<div class="collapse navbar-collapse" id="navbarScroll">
<ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="./index.html">INICIO</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="./paginas/productos.html">PRODUCTOS</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="./paginas/aplicaciones.html">APLICACIONES</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="./paginas/contacto.html">CONTACTO</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</header>
<section id="PRESENTACION" class="border">
<h2>Nuestra empresa</h2>
<p>Nuestra empresa se dedica al diseño y fabricación de componentes mecánicos para la industria pesada.</p>
<div class="centrar" >
<iframe id="VIDEO" width=60% src="https://www.youtube.com/embed/M0IhYlqC7Gk" title="¿Qué es la INDUSTRIA PESADA SEMI-LIGERA y LIGERA?" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</section>
<div class="row ">
<h3 id="PRODUCTOS-titulo">Algunos de nuestros productos mas vendidos</h3>
<!-- agrego un carrousel-->
<div class="m-0 row-cols-4 align-items-center">
<div id="CAROUSEL PRODUCTOS" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./imagenes/rueda_dent_01.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./imagenes/triceta_1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./imagenes/ACOPLES.jpg" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="CAROUSEL PRODUCTOS" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Anterior</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="CAROUSEL PRODUCTOS" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Siguiente</span>
</button>
</div>
</div>
</div>
<div class="m-0 row-cols-4 align-items-center">
<div id="CAROUSEL CLIENTES" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./imagenes/LOGO_YPF.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./imagenes/LOGO_TOYOTA.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./imagenes/LOGO_MEDANITO.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./imagenes/LOGO_AXXION.jpg" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="CAROUSEL CLIENTES" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Anterior</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="CAROUSEL CLIENTES" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Siguiente</span>
</button>
</div>
</div>
<footer class="border"> <hr>
<div class="contenedor">
<section>
Tel/WP: (351)485-9670 <br>
Dirección: Rio.... <br>
Horario de atención: L a V: 8-18hs
</section>
</div>
<br>
<div class="pie-desarrollo">Desarrollado por Diseño Paravachasca</div>
</footer>
</div>
</body>
</html>