-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
211 lines (193 loc) · 10.1 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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale = 1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="Insumos para Mineria y Petroleo">
<meta name="keywords" content="industria, industrial, insumos, mineria, petroleo">
<meta name="author" content="">
<title>P&M Industrial</title>
<meta data-rh="true" property="fb:app_id" content="P&MIndustrial"/>
<meta data-rh="true" property="fb:og:title" content="P&MIndustrial" />
<link rel="canonical" href="http://pymindustrial.com.ar/" />
<meta data-rh="true" property="og:url" content="http://pymindustrial.com.ar/" />
<meta data-rh="true" property="og:image" content="http://pymindustrial.com.ar/img/logo-mini2.png"/>
<meta data-rh="true" property="og:title" content="P&M Industrial" />
<meta data-rh="true" property="og:description" content="Insumos de Minería y Petróleo" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <link rel="stylesheet" href="./css/style.css">
<!-- <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet"> -->
<link rel="shortcut icon" href="img/favicon.ico">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/v4-shims.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
</head>
<!-- INICIO BODY -->
<body id="home">
<div class="">
<!-- INICIO HEADER -->
<header class="encabezado">
<div class="logo" style="width: 100%;">
<a><img src="./img/logo-mini2.png" alt="logo" class="" style="text-align: center;" ></a>
</div>
</header>
<nav class="barra" style="position: absolute;">
<ul style="width: 50%;">
<li id="menu1"><a id="mena1" href="">Nuestra Empresa</a></li>
<li id="menu2"><a id="mena2" href="">Nuestro Mercado</a></li>
<li id="menu3"><a id="mena3" href="">Contacto</a></li>
</ul>
<ul style="width: 50%;">
<li><a href="unicast.html" class="repre">Representaciones</a></li>
<li><a href="unicast.html" class="repre"><img src="./img/logo-unicast.png" width="" class="unicast" alt=""></a></li>
</ul>
</nav>
<!-- FIN HEADER -->
<!-- INICIO SECCION PRINCIPAL -->
<main id="principal">
<div class="petroleo">
<div class="centered" id="center" >
<h1>Insumos de <span id="mineria-texto" onmouseover="textoMineria()" onmouseleave="textoMineriaLeave()" style="cursor: pointer; border-bottom: solid 1px" >Minería</span> y <span id="petroleo-texto" onmouseover="textoPetroleo()" onmouseleave="textoPetroleoLeave()" style="cursor: pointer; border-bottom: solid 1px">Petróleo</span></h1>
<p class="subtitulo" style="opacity: 0; transition: 2s;" id="subtitulo-mineria" >Mineria</p>
</div>
</div>
<!-- FIN SECCION PRINCIPAL -->
<!-- INICIO SECCION INFO -->
<section id="informacion">
<div class="container-fluid info" id="foto1">
<div class="d-flex flex-column flex-sm-row justify-content-around">
<div class="col-12 col-md-5">
<div class="" style="overflow: hidden; height: 300px;">
<div style="background-image: url(./img/startup4.jpg); height: 405px" alt="mercado" class="image" id="imagen1"></div>
</div>
<div id="bloq1" class="detalle">
<h3>Nuestra Empresa</h3>
<p>Somos una empresa comercializadora de insumos para la industria, enfocada principalmente en brindar soluciones a las industrias de la minería y el petróleo. Estamos comprometidos con la calidad, eficiencia y seguridad de la industria y buscando operaciones sostenibles y seguras para el desarrollo de los negocios de nuestros clientes.</p>
</div>
</div>
<div class="col-12 col-md-5">
<div class="" style="overflow: hidden;height: 300px">
<div style="background-image: url(./img/producto-unicast2.jpg); height: 450px" alt="mercado" class="image" id="imagen2"></div>
</div>
<div id="bloq2" class="detalle">
<h3>Nuestro mercado</h3>
<p>Con base en Mendoza, P&M Industrial ofrece la más eficiente gestión en la adquisición de los recursos e insumos requeridos por el sector minero-petrolero en Argentina.</p>
</div>
</div>
</div>
</div>
</section>
</main>
<div style="height: 70vh; background: transparent;">
</div>
<!-- FIN SECCION INFO -->
<!-- INICIO DEL PREFOOTER -->
<div class="container_parallax">
<div class="parallax2">
</div>
</div>
<!-- FIN DEL PRE-FOOTER -->
<!-- INICIO FOOTER -->
<footer id="contactanos" style="position: relative;z-index: 4">
<div id="bloq3" class="pie">
<div class="divpie">
<h3></h3>
<p></p>
<div class="google-maps">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3357070.261572884!2d-70.78610932880679!3d-34.74579435820847!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9679745b5dd5fffd%3A0x902586f1d047824!2sMendoza%20Province!5e0!3m2!1sen!2sar!4v1604510259686!5m2!1sen!2sar" width="400" height="300" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
<p class="pp2"></p>
<p class="pp2">P&M Industrial</p>
</div>
<div class="divpie">
<p class="pp3">Larrea 1050</p>
<p class="pp3"></p>
<p>Mendoza - Argentina</p>
<!-- <i class="fas fa-map-marker-alt iconopie" onclick="Mapa()"></i> -->
</div>
<div class="divpie">
<a href="https://wa.me/542617030384?text=Hola%20PyM!%20Como%20estan?%20Quiero%20consultar%20por%20sus%20productos%20!" target="_blank"><i style="display: inline-block; font-size: 1.5em; cursor: pointer; vertical-align: middle;" class="fab fa-whatsapp IconoPie"></i> +54 9 (261) 7030384</a>
<br>
<a href="https://wa.me/5492617030373?text=Hola%20PyM!%20Como%20estan?%20Quiero%20consultar%20por%20sus%20productos%20!" target="_blank"><i style="display: inline-block; font-size: 1.5em; cursor: pointer; vertical-align: middle;" class="fab fa-whatsapp IconoPie"></i> +54 9 (261) 7030373</a>
<p class="pp3"></p>
<a href="mailto:[email protected]" target="_blank"><i style="display: inline-block; font-size: 1.5em; cursor: pointer; vertical-align: middle;" class="far fa-envelope"></i> [email protected]</a>
</div>
</div>
</div>
</footer>
<!-- FIN FOOTER -->
<!-- INICIO SCRIPTS -->
<script>
var leave=0;
window.addEventListener('scroll', Scroll);
let lastScroll = window.scrollY;
function textoMineria(){
document.getElementById("subtitulo-mineria").style.visibility="visible";
document.getElementById("subtitulo-mineria").style.opacity="1";
document.getElementById("mineria-texto").style.color="#eb7d05";
document.getElementById("subtitulo-mineria").innerHTML="Capacidad de respuesta ante la amplia demanda del mercado minero.";
document.getElementById("center").style.height="300px";
}
function textoMineriaLeave(){
document.getElementById("subtitulo-mineria").style.visibility="hidden";
document.getElementById("subtitulo-mineria").style.opacity="0";
document.getElementById("mineria-texto").style.color="white";
document.getElementById("subtitulo-mineria").innerHTML="";
document.getElementById("center").style.height="200px";
leave=1;
}
function textoPetroleo(){
document.getElementById("subtitulo-mineria").style.visibility="visible";
document.getElementById("subtitulo-mineria").style.opacity="1";
document.getElementById("petroleo-texto").style.color="#eb7d05";
document.getElementById("subtitulo-mineria").innerHTML="Suministros de recursos e insumos para la industria de petróleo.";
document.getElementById("center").style.height="300px";
}
function textoPetroleoLeave(){
// document.getElementById("subtitulo-mineria").style.visibility="hidden";
document.getElementById("petroleo-texto").style.color="white";
document.getElementById("subtitulo-mineria").style.opacity="0";
document.getElementById("subtitulo-mineria").innerHTML="";
document.getElementById("center").style.height="200px";
leave=1;
}
var newtop=0;
function Scroll(){
const currentScroll = window.scrollY;
if (currentScroll > lastScroll){
// scroll down
if(currentScroll>200 && newtop>-100){
newtop-=parseInt(window.scrollY/400);
}
newtoppx=newtop+"px";
document.getElementById("imagen1").style.top=newtoppx;
document.getElementById("imagen2").style.top=newtoppx;
} else {
// scroll up
if(currentScroll>200 && newtop<0){
newtop+=parseInt(window.scrollY/400);
}
newtoppx=newtop+"px";
document.getElementById("imagen1").style.top=newtoppx;
document.getElementById("imagen2").style.top=newtoppx;
}
// scroll update
lastScroll = currentScroll <= 0 ? 0 : currentScroll;
}
// scroll-behavior smooth
function scrollSeccion(event){
var idscroll = event.target.id.substring(4);
var posYSeccion = document.getElementById('bloq'+idscroll).offsetTop-40;
window.scroll({
top: posYSeccion,
left: 0,
behavior: 'smooth'
});
console.log(posYSeccion);
}
</script>
</div>
</body>
<!-- FIN BODY -->
</html>