Dia 16
This commit is contained in:
Marcos Lopez
parent
4c0fe04fee
commit
68c3d8ebdb
191
Practicas/Practicas HTML/Repaso/Corregida/css/estilo.css
Normal file
191
Practicas/Practicas HTML/Repaso/Corregida/css/estilo.css
Normal file
|
|
@ -0,0 +1,191 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
/* RESET */
|
||||||
|
*{
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
text-decoration: none;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Suaviza scroll anclas */
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
/* Propiedades body */
|
||||||
|
body {
|
||||||
|
background-image: url(../imagenes/fondo_plano.jpg); background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
font-family: Arial;
|
||||||
|
}
|
||||||
|
/* Propiedades header principal */
|
||||||
|
#cabecera_principal {
|
||||||
|
display:flex;
|
||||||
|
justify-content:space-between;
|
||||||
|
align-items:end;
|
||||||
|
position:sticky;
|
||||||
|
top:0px;
|
||||||
|
background-color:white;
|
||||||
|
box-shadow: 0px 4px 5px #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Imagen logo */
|
||||||
|
#img_logo {
|
||||||
|
width:100px;
|
||||||
|
margin-left:10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Barra de navegación */
|
||||||
|
nav {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Contenedor botones menú */
|
||||||
|
#menu {
|
||||||
|
padding-left:1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lista_menu{
|
||||||
|
float:left;
|
||||||
|
list-style-type:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Lista botones menú */
|
||||||
|
.boton_menu {
|
||||||
|
color:#1a89dc;
|
||||||
|
font-size:30px;
|
||||||
|
margin-right:10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Corrección posición anclas */
|
||||||
|
#arriba,#servicios,#productos,#contacto {
|
||||||
|
padding-top: 120px;
|
||||||
|
margin-top: -120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Barra separación menú */
|
||||||
|
#barra_menu {
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
background-color: #1a89dc;
|
||||||
|
margin-left: 0px;
|
||||||
|
box-shadow: 0px 4px 5px #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Padding general */
|
||||||
|
h2,h3,p {
|
||||||
|
|
||||||
|
padding:1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
color:#1a89dc;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Barra separación secciones */
|
||||||
|
|
||||||
|
.secciones {
|
||||||
|
width: 30%;
|
||||||
|
height: 2px;
|
||||||
|
background-color: #1a89dc;
|
||||||
|
margin:1em auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tabla con flex */
|
||||||
|
|
||||||
|
.tablaflex {
|
||||||
|
display:flex;
|
||||||
|
flex-wrap:wrap;
|
||||||
|
justify-content:space-around;
|
||||||
|
max-width:1000px;
|
||||||
|
margin:auto;
|
||||||
|
margin-top:2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tarjeta {
|
||||||
|
width:300px;
|
||||||
|
margin-bottom:1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tarjeta img {
|
||||||
|
width:100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.texto_tabla {
|
||||||
|
text-align:center;
|
||||||
|
font-weight:bold;
|
||||||
|
color:#1a89dc;
|
||||||
|
display:block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tablaflex2 {
|
||||||
|
max-width:1280px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Lista cualidades */
|
||||||
|
ul#lista_cualidades li {
|
||||||
|
list-style-type:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Lista especialidades */
|
||||||
|
ul#lista_especialidades {
|
||||||
|
width:270px;
|
||||||
|
margin:auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#lista_especialidades li {
|
||||||
|
list-style-type:circle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
font-weight:bold;
|
||||||
|
color:#1a89dc;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
iframe {
|
||||||
|
width:100%;
|
||||||
|
height:400px;
|
||||||
|
border:2px solid #1a89dc;
|
||||||
|
box-sizing:border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
#subircaja {
|
||||||
|
position:fixed;
|
||||||
|
right:10px;
|
||||||
|
bottom:10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#subirimg{
|
||||||
|
width:60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*Smartphone */
|
||||||
|
|
||||||
|
@media (max-width: 650px) {
|
||||||
|
.lista_menu{
|
||||||
|
clear: left;
|
||||||
|
list-style-type:none;
|
||||||
|
}
|
||||||
|
.boton_menu {
|
||||||
|
font-size:1.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#arriba,#servicios,#productos,#contacto {
|
||||||
|
padding-top: 120px;
|
||||||
|
margin-top: -120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size:1.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
display:block;
|
||||||
|
}
|
||||||
|
.datos {
|
||||||
|
font-size:0.8em;
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
Practicas/Practicas HTML/Repaso/Corregida/imagenes/aislantes.jpg
Normal file
BIN
Practicas/Practicas HTML/Repaso/Corregida/imagenes/aislantes.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 132 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 126 KiB |
BIN
Practicas/Practicas HTML/Repaso/Corregida/imagenes/casa.jpg
Normal file
BIN
Practicas/Practicas HTML/Repaso/Corregida/imagenes/casa.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 210 KiB |
BIN
Practicas/Practicas HTML/Repaso/Corregida/imagenes/casa1.jpg
Normal file
BIN
Practicas/Practicas HTML/Repaso/Corregida/imagenes/casa1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
BIN
Practicas/Practicas HTML/Repaso/Corregida/imagenes/ceramica.jpg
Normal file
BIN
Practicas/Practicas HTML/Repaso/Corregida/imagenes/ceramica.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
BIN
Practicas/Practicas HTML/Repaso/Corregida/imagenes/contacto.jpg
Normal file
BIN
Practicas/Practicas HTML/Repaso/Corregida/imagenes/contacto.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 180 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
BIN
Practicas/Practicas HTML/Repaso/Corregida/imagenes/fundicion.jpg
Normal file
BIN
Practicas/Practicas HTML/Repaso/Corregida/imagenes/fundicion.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 220 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
BIN
Practicas/Practicas HTML/Repaso/Corregida/imagenes/logo.png
Normal file
BIN
Practicas/Practicas HTML/Repaso/Corregida/imagenes/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
BIN
Practicas/Practicas HTML/Repaso/Corregida/imagenes/piscinas.jpg
Normal file
BIN
Practicas/Practicas HTML/Repaso/Corregida/imagenes/piscinas.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
BIN
Practicas/Practicas HTML/Repaso/Corregida/imagenes/servicios.jpg
Normal file
BIN
Practicas/Practicas HTML/Repaso/Corregida/imagenes/servicios.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 111 KiB |
BIN
Practicas/Practicas HTML/Repaso/Corregida/imagenes/terrazos.jpg
Normal file
BIN
Practicas/Practicas HTML/Repaso/Corregida/imagenes/terrazos.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 101 KiB |
BIN
Practicas/Practicas HTML/Repaso/Corregida/imagenes/vidrio.jpg
Normal file
BIN
Practicas/Practicas HTML/Repaso/Corregida/imagenes/vidrio.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
181
Practicas/Practicas HTML/Repaso/Corregida/index.html
Normal file
181
Practicas/Practicas HTML/Repaso/Corregida/index.html
Normal file
|
|
@ -0,0 +1,181 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Inicio</title>
|
||||||
|
<link rel= "stylesheet" type= "text/css" href="css/estilo.css" title= "default" >
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body >
|
||||||
|
|
||||||
|
<!-- Cabecera web-->
|
||||||
|
<header id="cabecera_principal">
|
||||||
|
<!-- Logo web-->
|
||||||
|
<div id="logo">
|
||||||
|
<img id="img_logo" src="imagenes/logo.png" alt="logo_empresa">
|
||||||
|
</div>
|
||||||
|
<!-- Navegación web-->
|
||||||
|
<nav>
|
||||||
|
<div id="menu">
|
||||||
|
<ul>
|
||||||
|
<li class="lista_menu"><a class="boton_menu" href="#arriba" >Inicio</a></li>
|
||||||
|
<li class="lista_menu"><a class="boton_menu" href="#servicios" >Servicios</a></li>
|
||||||
|
<li class="lista_menu"><a class="boton_menu" href="#productos" >Productos</a></li>
|
||||||
|
<li class="lista_menu"><a class="boton_menu" href="#contacto" >Contacto</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<hr id="barra_menu">
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Contenedor principal web-->
|
||||||
|
<main>
|
||||||
|
<br>
|
||||||
|
<!-- Ancla de inicio web-->
|
||||||
|
<section id="seccion_inicio">
|
||||||
|
<h2 id="arriba">Presentación</h2>
|
||||||
|
<p>Le damos la bienvenida a NOMBRE EMPRESA S.L., todo un referente entre las empresas constructoras en Lugo. Nos caracterizamos por el buen trato, la profesionalidad, la buena ejecución de los trabajos realizados y la excelente atención que ofrecemos a nuestros clientes, interesados en realizar cualquier tipo de construcción de viviendas o naves. </p>
|
||||||
|
<p>No dude en contactar con nosotros.</p>
|
||||||
|
|
||||||
|
<h2>Qué hacemos</h2>
|
||||||
|
<p>Nuestra empresa constructora busca que los clientes queden satisfechos con los proyectos que llevamos adelante en todo lo relacionado con el sector de la construcción en general. Además, contamos con la mejor maquinaria para excavación y transporte y con personal altamente cualificado que garantiza un trabajo bien hecho. Infórmese acerca de nuestros servicios de construcción, demolición y excavación. </p>
|
||||||
|
<p>Le esperamos.</p>
|
||||||
|
|
||||||
|
<h2>Nuestras Cualidades</h2>
|
||||||
|
<ul id="lista_cualidades">
|
||||||
|
<!-- Elemento 1-->
|
||||||
|
<li><p>Hemos completado con éxito todos nuestros proyectos en Lugo. Nuestra profesionalidad y dedicación garantizan proyectos estudiados y viables para asegurar una experiencia sin estrés a nuestros clientes.</p>
|
||||||
|
</li>
|
||||||
|
<!-- Elemento 2-->
|
||||||
|
<li><p>En NombreEmpresa nos comprometemos a ofrecer un enfoque innovador para cada proyecto de construcción, proporcionando a nuestros clientes una gama completa de servicios durante todas las etapas, desde el diseño hasta la gestión completa del proyecto.</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
<hr class="secciones">
|
||||||
|
<!-- Servicios-->
|
||||||
|
<br>
|
||||||
|
<section id="seccion_servicios">
|
||||||
|
<h2 id="servicios" >Nuestros Servicios</h2>
|
||||||
|
<p>Nombre_empresa te acompaña desde el primer momento en que quieres materializar ese sueño de vivienda, edificio, nave industrial, local comercial o cualquier otro proyecto de construcción o rehabilitación.</p>
|
||||||
|
|
||||||
|
<!-- Tabla con flex-->
|
||||||
|
<div class="tablaflex">
|
||||||
|
<div class="tarjeta">
|
||||||
|
<img src="imagenes/piscinas.jpg" ><span class="texto_tabla">Piscinas</span>
|
||||||
|
</div>
|
||||||
|
<div class="tarjeta">
|
||||||
|
<img src="imagenes/bloques_apartamentos.jpg" ><span class="texto_tabla">Apartamentos</span>
|
||||||
|
</div>
|
||||||
|
<div class="tarjeta">
|
||||||
|
<img src="imagenes/instalaciones_deportivas.jpg" ><span class="texto_tabla">Instalaciones deportivas</span>
|
||||||
|
</div>
|
||||||
|
<div class="tarjeta">
|
||||||
|
<img src="imagenes/mantenimiento.jpg" ><span class="texto_tabla">Mantenimiento</span>
|
||||||
|
</div>
|
||||||
|
<div class="tarjeta">
|
||||||
|
<img src="imagenes/naves_industriales.jpg" ><span class="texto_tabla">Naves industriales</span>
|
||||||
|
</div>
|
||||||
|
<div class="tarjeta">
|
||||||
|
<img src="imagenes/viviendas_unifamiliares.jpg" ><span class="texto_tabla">Viviendas unifamiliares</span>
|
||||||
|
</div>
|
||||||
|
</div><!-- Cierre flex tabla-->
|
||||||
|
|
||||||
|
<h2>Nuestra Experiencia</h2>
|
||||||
|
<p>Son más de 30 años ofreciendo calidad y eficiencia en el sector de la edificación, consolidando múltiples proyectos de vivienda en toda la zona urbana de Lugo ciudad.
|
||||||
|
<br><br>
|
||||||
|
Nos enfocamos en materializar lo de aquellos que nos confían donde quieren vivir, aquellos que desean construir sus edificios residenciales, comerciales o industriales, acompañando a nuestros clientes en todos los pasos que hay que dar.
|
||||||
|
<br><br>
|
||||||
|
Para ello, estamos entre las mejores empresas constructoras de Lugo que ha implantado un modelo de gestión proactivo que le permite adaptarse y focalizar sobre tus necesidades y especializado en los ámbitos de la edificación industrial, residencial y dotacional.
|
||||||
|
<br><br>
|
||||||
|
Asumimos cada proyecto de construcción como si fuese el único, garantizando su óptima ejecución y logrando así la plena satisfacción de quienes confían en una de las mejores constructoras en Lugo y empresas de reformas de Lugo.</p>
|
||||||
|
</section>
|
||||||
|
<hr class="secciones">
|
||||||
|
<!-- Productos-->
|
||||||
|
<br>
|
||||||
|
<section id="seccion_productos">
|
||||||
|
<h2 id="productos" >Nuestros productos</h2>
|
||||||
|
<p>Dentro de nuestra trayectoria hemos participado en la construcción de escuelas, hospitales, plazas comerciales, parques, naves industriales; somos especialistas en losas de entrepiso, instalaciones eléctricas e hidráulicas, cimentaciones para equipo especial, etc.<br><br>
|
||||||
|
Contamos con varias plantas de asfaltos, algunas móviles, lo cual puede mejorar en mucho los costos por acarreo; producimos todo tipo de asfaltos, sello premezclado, microcarpetas, carpetas modificadas con polímero, nos adecuamos a las necesidades de cada cliente ya que ofrecemos venta a granel o bien el servicio completo con tendido y compactado.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
|
||||||
|
<h2 >Nuestras especialidades</h2>
|
||||||
|
<!--Lista-->
|
||||||
|
<ul id="lista_especialidades">
|
||||||
|
<li>Diseños arquitectónicos.</li>
|
||||||
|
<li>Diseños estructurales.</li>
|
||||||
|
<li>Diseños hidráulicos.</li>
|
||||||
|
<li>Diseños sanitarios.</li>
|
||||||
|
<li>Diseños eléctricos.</li>
|
||||||
|
<li>Construcción de vivienda nueva.</li>
|
||||||
|
<li>Reforzamiento de estructuras.</li>
|
||||||
|
<li>Instalaciones hidrosanitarias.</li>
|
||||||
|
<li>Carpintería de madera y metálica.</li>
|
||||||
|
<li>Remodelaciones.</li>
|
||||||
|
<li>Elaboración de presupuestos.</li>
|
||||||
|
<li>Diseño de jardines y paisajismo.</li>
|
||||||
|
</ul>
|
||||||
|
<br><br>
|
||||||
|
|
||||||
|
<!-- Tabla con flex-->
|
||||||
|
<div class="tablaflex" id="tablaflex2">
|
||||||
|
<div class="tarjeta">
|
||||||
|
<img src="imagenes/vidrio.jpg" ><span class="texto_tabla">Vidrio</span>
|
||||||
|
</div>
|
||||||
|
<div class="tarjeta">
|
||||||
|
<img src="imagenes/carpinteria.jpg" ><span class="texto_tabla">Carpintería</span>
|
||||||
|
</div>
|
||||||
|
<div class="tarjeta">
|
||||||
|
<img src="imagenes/ceramica.jpg" ><span class="texto_tabla">Cerámica</span>
|
||||||
|
</div>
|
||||||
|
<div class="tarjeta">
|
||||||
|
<img src="imagenes/fontaneria.jpg" ><span class="texto_tabla">Fontanería</span>
|
||||||
|
</div>
|
||||||
|
<div class="tarjeta">
|
||||||
|
<img src="imagenes/aislantes.jpg" ><span class="texto_tabla">Aislantes</span>
|
||||||
|
</div>
|
||||||
|
<div class="tarjeta">
|
||||||
|
<img src="imagenes/fundicion.jpg" ><span class="texto_tabla">Fundición</span>
|
||||||
|
</div>
|
||||||
|
<div class="tarjeta">
|
||||||
|
<img src="imagenes/jardineria.jpg" ><span class="texto_tabla">Jardineria</span>
|
||||||
|
</div>
|
||||||
|
<div class="tarjeta">
|
||||||
|
<img src="imagenes/terrazos.jpg" ><span class="texto_tabla">Terrazos</span>
|
||||||
|
</div>
|
||||||
|
</div><!-- Cierre flex tabla-->
|
||||||
|
</section>
|
||||||
|
<br>
|
||||||
|
<hr class="secciones">
|
||||||
|
<!-- Contacto-->
|
||||||
|
<br>
|
||||||
|
<section id="seccion_contacto">
|
||||||
|
<h2 id="contacto" >Contacto</h2>
|
||||||
|
<p>En NombreEmpresa S.L. nos hemos mantenido fiel a los principios corporativos en la construcción de viviendas innovadoras y de excelente calidad en Lugo, que cubran las necesidades y expectativas de nuestros clientes.
|
||||||
|
<br><br>
|
||||||
|
Venga a visitarnos, estaremos encantados de atenderle.</p>
|
||||||
|
|
||||||
|
<h2>Dónde estamos</h2>
|
||||||
|
<p><span class="info">Dirección |</span><span class="datos">Calle La que sea, 2 - bajo 27004 Lugo (Lugo)</span></p>
|
||||||
|
|
||||||
|
<p><span class="info">Teléfono |</span><span class="datos">982 304 743</span></p>
|
||||||
|
|
||||||
|
<p><span class="info">E-mail |</span><span class="datos">nombreempresa@nombreempresa.com</span></p>
|
||||||
|
|
||||||
|
<p><span class="info">Móvil |</span><span class="datos"> 690 900 700</span></p>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2916.6748044422206!2d-7.573001785266024!3d43.02723160070037!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd31ce58e00f9fa3%3A0x3cddba60ebb5b50a!2sR%C3%BAa%20Magnolia%2C%2052%2C%2027297%20Lugo!5e0!3m2!1ses!2ses!4v1669191329037!5m2!1ses!2ses" ></iframe>
|
||||||
|
</section>
|
||||||
|
<!-- Botón de subir -->
|
||||||
|
<div id="subircaja">
|
||||||
|
<a href="#arriba"><img id="subirimg" src="imagenes/icono_subir.png"></a>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
BIN
Practicas/Practicas HTML/Repaso/Practica Constructora_04.zip
Normal file
BIN
Practicas/Practicas HTML/Repaso/Practica Constructora_04.zip
Normal file
Binary file not shown.
|
|
@ -8,9 +8,11 @@
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*Para dar efecto al scroll*/
|
||||||
html{
|
html{
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
}
|
}
|
||||||
|
/***************************/
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-image: url("../imagenes/fondo_plano.jpg");
|
background-image: url("../imagenes/fondo_plano.jpg");
|
||||||
|
|
@ -23,10 +25,11 @@ body {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
padding:1em;
|
padding: 0.5em;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: end;
|
align-items: end;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
box-shadow: 0px 4px 5px 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#cabecera img {
|
#cabecera img {
|
||||||
|
|
@ -34,27 +37,20 @@ body {
|
||||||
height: 60px;
|
height: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* nav {
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
background-color: white;
|
|
||||||
} */
|
|
||||||
|
|
||||||
nav hr {
|
|
||||||
box-shadow: 0px 4px 5px 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
main {
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Para que el nav no oculte los elementos donde esta el ancla */
|
||||||
|
/* en versiones modernas mejor utilizar scroll-margin-top: 80px; */
|
||||||
#servicios,
|
#servicios,
|
||||||
#productos,
|
#productos,
|
||||||
#contacto {
|
#contacto {
|
||||||
padding-top: 100px;
|
/* padding-top: 100px;
|
||||||
margin-top: -20px;
|
margin-top: -20px; */
|
||||||
|
scroll-margin-top: 60px;
|
||||||
}
|
}
|
||||||
|
/*******************************************/
|
||||||
|
|
||||||
.menu {
|
.menu {
|
||||||
padding-left: 1em;
|
padding-left: 1em;
|
||||||
|
|
@ -86,21 +82,44 @@ h2 {
|
||||||
color: #1a89dc;
|
color: #1a89dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
|
||||||
|
|
||||||
|
/* Bloque definicion de las clases de tabla flex */
|
||||||
|
.table_flex{
|
||||||
width: 80%;
|
width: 80%;
|
||||||
|
max-width: 1024px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-around;
|
||||||
}
|
}
|
||||||
|
|
||||||
table tr td img {
|
.table_flex_item, .table_flex_item_b{
|
||||||
width: 100%;
|
flex-direction: column;
|
||||||
max-width: 300px;
|
margin-bottom: 1em;
|
||||||
}
|
}
|
||||||
|
.table_flex_item p {
|
||||||
table tr td {
|
padding: 0;
|
||||||
|
text-align: center;
|
||||||
color: #1a89dc;
|
color: #1a89dc;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
|
.table_flex_item img {
|
||||||
|
max-width: 300px;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.table_flex_item_b img {
|
||||||
|
max-width: 230px;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.table_flex_item_b p {
|
||||||
|
padding: 0;
|
||||||
|
text-align: center;
|
||||||
|
color: #1a89dc;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
/*****************************************/
|
||||||
|
|
||||||
|
|
||||||
dl {
|
dl {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
@ -133,6 +152,8 @@ iframe {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Definiciones para el boton de subir pagina*/
|
||||||
#subircaja {
|
#subircaja {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
right: 10px;
|
right: 10px;
|
||||||
|
|
@ -142,6 +163,7 @@ iframe {
|
||||||
width: 64px;
|
width: 64px;
|
||||||
height: 64px;
|
height: 64px;
|
||||||
}
|
}
|
||||||
|
/*********************************************/
|
||||||
|
|
||||||
.lista_menu {
|
.lista_menu {
|
||||||
/* display: inline; */
|
/* display: inline; */
|
||||||
|
|
@ -152,6 +174,7 @@ iframe {
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*Media Querys para aplicar a dispositivos moviles*/
|
||||||
@media (max-width: 550px) {
|
@media (max-width: 550px) {
|
||||||
.lista_menu li {
|
.lista_menu li {
|
||||||
list-style-type: square;
|
list-style-type: square;
|
||||||
|
|
@ -164,8 +187,7 @@ iframe {
|
||||||
#servicios,
|
#servicios,
|
||||||
#productos,
|
#productos,
|
||||||
#contacto {
|
#contacto {
|
||||||
padding-top: 120px;
|
scroll-margin-top: 80px;
|
||||||
margin-top: -60px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.contacto_info{
|
.contacto_info{
|
||||||
|
|
|
||||||
|
|
@ -20,7 +20,7 @@
|
||||||
<li><a class="boton_menu" href="#contacto">Contactos</a></li>
|
<li><a class="boton_menu" href="#contacto">Contactos</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<hr>
|
<!-- <hr> -->
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|
@ -81,28 +81,38 @@
|
||||||
<p>Nombre_empresa te acompaña desde el primer momento en que quieres materializar ese
|
<p>Nombre_empresa te acompaña desde el primer momento en que quieres materializar ese
|
||||||
sueño de vivienda, edificio,
|
sueño de vivienda, edificio,
|
||||||
nave industrial, local comercial o cualquier otro proyecto de construcción o rehabilitación.</p>
|
nave industrial, local comercial o cualquier otro proyecto de construcción o rehabilitación.</p>
|
||||||
<table class="center">
|
|
||||||
<tr>
|
<div class="table_flex">
|
||||||
<td><img src="./imagenes/piscinas.jpg" alt="Una Piscina"></td>
|
<div class="table_flex_item">
|
||||||
<td><img src="./imagenes/bloques_apartamentos.jpg" alt="Un Bloque de Apartamentos"></td>
|
<img src="./imagenes/piscinas.jpg" alt="Una Piscina">
|
||||||
<td><img src="./imagenes/instalaciones_deportivas.jpg" alt="Instalacion Deportiva"></td>
|
<p>Piscinas</p>
|
||||||
</tr>
|
</div>
|
||||||
<tr>
|
<div class="table_flex_item">
|
||||||
<td>Piscinas</td>
|
<img src="./imagenes/bloques_apartamentos.jpg" alt="Un Bloque de Apartamentos">
|
||||||
<td>Apartamentos</td>
|
<p>Apartametos</p>
|
||||||
<td>Instalaciones Deportivas</td>
|
</div>
|
||||||
</tr>
|
<div class="table_flex_item">
|
||||||
<tr>
|
<img src="./imagenes/instalaciones_deportivas.jpg" alt="Instalacion Deportiva">
|
||||||
<td><img src="./imagenes/mantenimiento.jpg" alt="Obrero Mantenimiento"></td>
|
<p>Instalaciones</p>
|
||||||
<td><img src="./imagenes/naves_industriales.jpg" alt="Nave Industrial"></td>
|
</div>
|
||||||
<td><img src="./imagenes/viviendas_unifamiliares.jpg" alt="Vivienda Unifamiliar"></td>
|
|
||||||
</tr>
|
<div class="table_flex_item">
|
||||||
<tr>
|
<img src="./imagenes/mantenimiento.jpg" alt="Obrero Mantenimiento">
|
||||||
<td>Mantenimiento</td>
|
<p>Mantenimiento</p>
|
||||||
<td>Naves Industriales</td>
|
</div>
|
||||||
<td>Viviendas Unifamiliar</td>
|
<div class="table_flex_item">
|
||||||
</tr>
|
<img src="./imagenes/naves_industriales.jpg" alt="Nave Industrial">
|
||||||
</table>
|
<p>Naves Industriales</p>
|
||||||
|
</div>
|
||||||
|
<div class="table_flex_item">
|
||||||
|
<img src="./imagenes/viviendas_unifamiliares.jpg" alt="Vivienda Unifamiliar">
|
||||||
|
<p>Viviendas Unifamiliar</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<h2>Nuestra Experiencia</h2>
|
<h2>Nuestra Experiencia</h2>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
|
|
@ -165,34 +175,47 @@
|
||||||
</ul>
|
</ul>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<table class="center">
|
<div class="table_flex">
|
||||||
<tr>
|
<div class="table_flex_item_b">
|
||||||
<td><img src="./imagenes/vidrio.jpg" alt="Vidrio"></td>
|
<img src="./imagenes/vidrio.jpg" alt="Vidrio">
|
||||||
<td><img src="./imagenes/carpinteria.jpg" alt="Carpintería"></td>
|
<p>Vidrio</p>
|
||||||
<td><img src="./imagenes/ceramica.jpg" alt="Ceramica"></td>
|
</div>
|
||||||
<td><img src="./imagenes/fontaneria.jpg" alt="Fontaneria"></td>
|
<div class="table_flex_item_b">
|
||||||
</tr>
|
<img src="./imagenes/carpinteria.jpg" alt="Carpinteria">
|
||||||
<tr>
|
<p>Carpinteria</p>
|
||||||
<td>Vidrio</td>
|
</div>
|
||||||
<td>Carpinteria</td>
|
<div class="table_flex_item_b">
|
||||||
<td>Cerámica</td>
|
<img src="./imagenes/ceramica.jpg" alt="Ceramica">
|
||||||
<td>Fontaneria</td>
|
<p>Ceramica</p>
|
||||||
</tr>
|
</div>
|
||||||
<tr>
|
<div class="table_flex_item_b">
|
||||||
<td><img src="./imagenes/aislantes.jpg" alt="Aislamientos"></td>
|
<img src="./imagenes/fontaneria.jpg" alt="Fontaneria">
|
||||||
<td><img src="./imagenes/fundicion.jpg" alt="Forjados"></td>
|
<p>Fontaneria</p>
|
||||||
<td><img src="./imagenes/jardineria.jpg" alt="Trabajos de jardineria">
|
</div>
|
||||||
</td>
|
|
||||||
<td><img src="./imagenes/terrazos.jpg" alt="Pavimentos"></td>
|
<div class="table_flex_item_b">
|
||||||
</tr>
|
<img src="./imagenes/aislantes.jpg" alt="Aislamientos">
|
||||||
<tr>
|
<p>Aislamientos</p>
|
||||||
<td>Aislamientos</td>
|
</div>
|
||||||
<td>Forjados</td>
|
<div class="table_flex_item_b">
|
||||||
<td>Trabajos de jardineria</td>
|
<img src="./imagenes/fundicion.jpg" alt="Forjados">
|
||||||
<td>Pavimentos</td>
|
<p>Forjados</p>
|
||||||
</tr>
|
</div>
|
||||||
|
<div class="table_flex_item_b">
|
||||||
|
<img src="./imagenes/jardineria.jpg" alt="Trabajos de jardineria">
|
||||||
|
<p>Trabajos de jardineria</p>
|
||||||
|
</div>
|
||||||
|
<div class="table_flex_item_b">
|
||||||
|
<img src="./imagenes/terrazos.jpg" alt="Pavimentos">
|
||||||
|
<p>Pavimentos</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</table>
|
|
||||||
<br>
|
<br>
|
||||||
<!-- Aqui empieza la pagina Contactos -->
|
<!-- Aqui empieza la pagina Contactos -->
|
||||||
<hr>
|
<hr>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user