he flotado mi ul
y dado a los links de los li
, un display:block
ya que quiero que cuando hago hover, ocupe todo su contenido de alto, quiero que haga lo mismo con ES/EN/FR, es un ul
también pero si lo floto a la izquierda, el logo que esta a la izquierda se moverá. Quiero que quede primero el logo, luego ES/EN/FR y a la derecha flotado mi ul
, así que le di position:relative
, ahora se ve así pero aun que le de block, no ocupa todo su alto.
Éste es mi código:
url('../fonts/lato-v14-latin-100.svg#Lato') format('svg'); /* Legacy iOS */
}
/* lato-100italic - latin */
@font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 100;
src: url('../fonts/lato-v14-latin-100italic.eot'); /* IE9 Compat Modes */
src: local('Lato Hairline Italic'), local('Lato-HairlineItalic'),
url('../fonts/lato-v14-latin-100italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/lato-v14-latin-100italic.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/lato-v14-latin-100italic.woff') format('woff'), /* Modern Browsers */
url('../fonts/lato-v14-latin-100italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/lato-v14-latin-100italic.svg#Lato') format('svg'); /* Legacy iOS */
}
/* lato-300 - latin */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 300;
src: url('../fonts/lato-v14-latin-300.eot'); /* IE9 Compat Modes */
src: local('Lato Light'), local('Lato-Light'),
url('../fonts/lato-v14-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/lato-v14-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/lato-v14-latin-300.woff') format('woff'), /* Modern Browsers */
url('../fonts/lato-v14-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/lato-v14-latin-300.svg#Lato') format('svg'); /* Legacy iOS */
}
/* lato-300italic - latin */
@font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 300;
src: url('../fonts/lato-v14-latin-300italic.eot'); /* IE9 Compat Modes */
src: local('Lato Light Italic'), local('Lato-LightItalic'),
url('../fonts/lato-v14-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/lato-v14-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/lato-v14-latin-300italic.woff') format('woff'), /* Modern Browsers */
url('../fonts/lato-v14-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/lato-v14-latin-300italic.svg#Lato') format('svg'); /* Legacy iOS */
}
/* lato-italic - latin */
@font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 400;
src: url('../fonts/lato-v14-latin-italic.eot'); /* IE9 Compat Modes */
src: local('Lato Italic'), local('Lato-Italic'),
url('../fonts/lato-v14-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/lato-v14-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/lato-v14-latin-italic.woff') format('woff'), /* Modern Browsers */
url('../fonts/lato-v14-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/lato-v14-latin-italic.svg#Lato') format('svg'); /* Legacy iOS */
}
/* lato-700 - latin */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: url('../fonts/lato-v14-latin-700.eot'); /* IE9 Compat Modes */
src: local('Lato Bold'), local('Lato-Bold'),
url('../fonts/lato-v14-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/lato-v14-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/lato-v14-latin-700.woff') format('woff'), /* Modern Browsers */
url('../fonts/lato-v14-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/lato-v14-latin-700.svg#Lato') format('svg'); /* Legacy iOS */
}
/* lato-900 - latin */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 900;
src: url('../fonts/lato-v14-latin-900.eot'); /* IE9 Compat Modes */
src: local('Lato Black'), local('Lato-Black'),
url('../fonts/lato-v14-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/lato-v14-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/lato-v14-latin-900.woff') format('woff'), /* Modern Browsers */
url('../fonts/lato-v14-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/lato-v14-latin-900.svg#Lato') format('svg'); /* Legacy iOS */
}
/* montserrat-100 - latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 100;
src: url('../fonts/montserrat-v12-latin-100.eot'); /* IE9 Compat Modes */
src: local('Montserrat Thin'), local('Montserrat-Thin'),
url('../fonts/montserrat-v12-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/montserrat-v12-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/montserrat-v12-latin-100.woff') format('woff'), /* Modern Browsers */
url('../fonts/montserrat-v12-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/montserrat-v12-latin-100.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-100italic - latin */
@font-face {
font-family: 'Montserrat';
font-style: italic;
font-weight: 100;
src: url('../fonts/montserrat-v12-latin-100italic.eot'); /* IE9 Compat Modes */
src: local('Montserrat Thin Italic'), local('Montserrat-ThinItalic'),
url('../fonts/montserrat-v12-latin-100italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/montserrat-v12-latin-100italic.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/montserrat-v12-latin-100italic.woff') format('woff'), /* Modern Browsers */
url('../fonts/montserrat-v12-latin-100italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/montserrat-v12-latin-100italic.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-200 - latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 200;
src: url('../fonts/montserrat-v12-latin-200.eot'); /* IE9 Compat Modes */
src: local('Montserrat ExtraLight'), local('Montserrat-ExtraLight'),
url('../fonts/montserrat-v12-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/montserrat-v12-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/montserrat-v12-latin-200.woff') format('woff'), /* Modern Browsers */
url('../fonts/montserrat-v12-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/montserrat-v12-latin-200.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-300 - latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 300;
src: url('../fonts/montserrat-v12-latin-300.eot'); /* IE9 Compat Modes */
src: local('Montserrat Light'), local('Montserrat-Light'),
url('../fonts/montserrat-v12-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/montserrat-v12-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/montserrat-v12-latin-300.woff') format('woff'), /* Modern Browsers */
url('../fonts/montserrat-v12-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/montserrat-v12-latin-300.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-300italic - latin */
@font-face {
font-family: 'Montserrat';
font-style: italic;
font-weight: 300;
src: url('../fonts/montserrat-v12-latin-300italic.eot'); /* IE9 Compat Modes */
src: local('Montserrat Light Italic'), local('Montserrat-LightItalic'),
url('../fonts/montserrat-v12-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/montserrat-v12-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/montserrat-v12-latin-300italic.woff') format('woff'), /* Modern Browsers */
url('../fonts/montserrat-v12-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/montserrat-v12-latin-300italic.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-regular - latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: url('../fonts/montserrat-v12-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Montserrat Regular'), local('Montserrat-Regular'),
url('../fonts/montserrat-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/montserrat-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/montserrat-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/montserrat-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/montserrat-v12-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-500italic - latin */
@font-face {
font-family: 'Montserrat';
font-style: italic;
font-weight: 500;
src: url('../fonts/montserrat-v12-latin-500italic.eot'); /* IE9 Compat Modes */
src: local('Montserrat Medium Italic'), local('Montserrat-MediumItalic'),
url('../fonts/montserrat-v12-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/montserrat-v12-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/montserrat-v12-latin-500italic.woff') format('woff'), /* Modern Browsers */
url('../fonts/montserrat-v12-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/montserrat-v12-latin-500italic.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-600 - latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
src: url('../fonts/montserrat-v12-latin-600.eot'); /* IE9 Compat Modes */
src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'),
url('../fonts/montserrat-v12-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/montserrat-v12-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/montserrat-v12-latin-600.woff') format('woff'), /* Modern Browsers */
url('../fonts/montserrat-v12-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/montserrat-v12-latin-600.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-700italic - latin */
@font-face {
font-family: 'Montserrat';
font-style: italic;
font-weight: 700;
src: url('../fonts/montserrat-v12-latin-700italic.eot'); /* IE9 Compat Modes */
src: local('Montserrat Bold Italic'), local('Montserrat-BoldItalic'),
url('../fonts/montserrat-v12-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/montserrat-v12-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/montserrat-v12-latin-700italic.woff') format('woff'), /* Modern Browsers */
url('../fonts/montserrat-v12-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/montserrat-v12-latin-700italic.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-700 - latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
src: url('../fonts/montserrat-v12-latin-700.eot'); /* IE9 Compat Modes */
src: local('Montserrat Bold'), local('Montserrat-Bold'),
url('../fonts/montserrat-v12-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/montserrat-v12-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/montserrat-v12-latin-700.woff') format('woff'), /* Modern Browsers */
url('../fonts/montserrat-v12-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/montserrat-v12-latin-700.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-900 - latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 900;
src: url('../fonts/montserrat-v12-latin-900.eot'); /* IE9 Compat Modes */
src: local('Montserrat Black'), local('Montserrat-Black'),
url('../fonts/montserrat-v12-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/montserrat-v12-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/montserrat-v12-latin-900.woff') format('woff'), /* Modern Browsers */
url('../fonts/montserrat-v12-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/montserrat-v12-latin-900.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* ------------------ ESTILOS GENERALES ------------------*/
body{
font-family: 'Montserrat', sans-serif;
background-color: #fff;
overflow-x: hidden;
color: #4f4e4e;
}
li{
list-style: none;
}
h1{
font-family: 'Lato', sans-serif;
font-size: 15px;
text-align: center;
margin-top: 110px;
text-transform: uppercase;
letter-spacing: 15px;
font-weight: 300;
color: black;
transition: all 1.3s;
}
h2{
text-transform: uppercase;
margin: 20px 0;
}
h2:not(.diferente){
font-size: 1.7em;
}
h3{
font-size: 18px;
font-weight: 900;
font-style: oblique;
}
p{
line-height: 30px;
font-weight: 300;
font-size: 1.3em;
letter-spacing: 2px;
padding: 30px 0;
}
span{
font-style: oblique;
font-weight: 400;
}
a{
color: black;
font-weight: 300;
transition: all .2s linear;
}
.boton{
text-transform: uppercase;
border: 1px solid black;
font-size: 1.3em;
display: block;
width: 210px;
text-align: center;
padding: 5px 10px;
border-radius: 3px;
transition: .2s all;
}
.boton:hover{
transform: scale(1.1);
}
img{
width: 100%;
border-radius: 3px;
}
nav a:hover{
background-color: #e4dada;
}
.fa::before{
font-size: 28px;
color: #5c5151;
margin-top: 20px;
margin-left: 0;
}
.h2Reducido i::before{
font-size: 20px;
margin-right: 10px;
}
.overlay{
position: fixed;
width: 100%;
height: 100vh;
background-color: black;
z-index: 999;
}
.containerOverlay{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.spinner {
width: 30px;
height: 30px;
background-color: white;
border-radius: 10px;
border: 1px solid rgba(255,255,255,.4);
margin: 0 auto;
animation: rotar .3s linear infinite;
}
@keyframes rotar {
0%{
transform: rotate(0deg);
}
25%{
transform: rotate(90deg);
}
50%{
transform: rotate(180deg);
}
75%{
transform: rotate(270deg);
}
100%{
transform: rotate(360deg);
}
}
/* ------------------ BARRA DE NAVEGACION ------------------*/
nav{
border-bottom: 2px solid #D8D8D8;
height: 72px;
width: 100%;
position: fixed;
top: 0;
left: 0;
background: #FAFAFA;
opacity: .9;
transition: all 1s;
z-index: 999;
}
nav.oculto{
transform: translateY(-100px);
}
nav img{
width: 70px;
margin: 10px;
opacity: .6;
}
nav li{
display: inline-block;
}
nav ul{
float: right;
padding: 0;
}
nav a{
display: block;
padding: 0px 12px;
line-height: 70px;
text-transform: uppercase;
letter-spacing: 2px;
}
.idiomas{
position: absolute;
left: 100px;
top: 20px;
}
.idiomas li{
display: inline-block;
}
.idiomas a{
line-height: 30px;
display: block;
}
section{
padding: 80px;
}
/* ------------------ SECTION 0 HERO------------------*/
#hero{
background: rgba(0,0,0,.1) url('../img/wallpapers/wallpaper_hero.jpg') no-repeat fixed center top / cover;
width: 100%;
height: 100vh;
}
/* ------------------ SECTION 1 NOSOTROS------------------*/
.botonBlanco{
margin: -20px auto 0 auto;
}
#nosotros h2{
text-align: center;
}
/* ------------------ SECTION 2 NUESTROS PRODUCTOS ------------------*/
.marco{
text-align: center;
/*margin: 20px;*/
}
#productos article p {
padding: 20px;
font-size: 1.1em;
line-height: 25px;
}
/* ------------------ SECTION 3 CALIDAD ------------------*/
#video{
display: block;
width: 700px;
height: 400px;
margin-left: 100px;
border-radius: 4px;
}
/*//VER ESTO!!!!!!*/
#calidad{
background: black url('../img/wallpapers/lab2.jpg') no-repeat fixed center bottom / cover;
width: 100%;
color: black;
position: relative;
}
#calidad::before{
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #FFFFFF;
background-image: linear-gradient(180deg, #FFFFFF 0%, #969bae 50%, #7c7676 100%);
opacity: .6;
}
#calidad header{
position: relative;
}
/*.row{
border: 1px solid red;
}
.col-lg-8, .col-lg-4, .col-lg-3, .col-lg-2, .col-12, .col-md-6, .col-md-8, .col-md-4, .col-md-3, .col-lg-12, .col-xl-12, .col-xl-10, .col-xl-3, .col-xl-4, .col-xl-6, .col-lg-4{
border: 1px solid blue;
}
section{
border: 1px solid green;
}*/
<!DOCTYPE html>
<html lang="es">
<head>
<title>Central de ingredientes S.L</title>
<!-- Descripcion en google -->
<meta name="description" content="Desde 1994 somos tu proveedor de productos lácteos tanto nacional como internacional">
<!-- Codificación -->
<meta charset="utf-8">
<!-- Estilos -->
<link rel="stylesheet" href="css/font/flaticon.css" type="text/css">
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Responsive -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<!-- Robots -->
<meta name="robots" content="index,follow">
<!-- Favicones -->
<link type="image/png" rel="icon" href="img/favicons/cow-512-231943.png">
</head>
<body>
<div class="overlay">
<div class="containerOverlay">
<div class="spinner"></div>
<p>Cargando...</p>
</div>
</div>
<header id="hero">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Central de ingredientes</h1>
</div>
</div>
</div>
</header>
<nav>
<img src="https://cdn.pixabay.com/photo/2016/06/28/17/26/cow-1485012_1280.png" alt="Logo">
<ul class="idiomas">
<li><a href="#">EN</a></li>
<li><a href="#">ES</a></li>
<li><a href="#">FR</a></li>
</ul>
<ul>
<li><a href="#" class="menu" data-id="#inicio">Inicio</a></li>
<li><a href="#" class="menu" data-id="#nosotros">Quienes somos</a></li>
<li><a href="#" class="menu" data-id="#productos">Productos</a></li>
<li><a href="#" class="menu" data-id="#calidad">Calidad</a></li>
<li><a href="#" class="menu" data-id="#logística">Logistica</a></li>
<li><a href="#" class="menu" data-id="#medio_ambiente">Medio ambiente</a></li>
<li><a href="#" class="menu" data-id="#contacto">Contacto</a></li>
</ul>
</nav>
<main>
<section id="nosotros">
<div class="container">
<div class="row">
<div class="col-xl-12">
<header>
<h2 class="diferente">Somos <span>central de ingredientes</span> desde 1994</h2>
</header>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p>Después de más de 20 años dedicado al sector lácteo, <span>central de ingredientes</span> se ha consolidado en el mercado, destacando tanto por su calidad, seriedad y confiabilidad en la fabricación tanto de preparados lácteos en polvo para chocolatería, como heladería o galletería. Incorporándose posteriormente al grupo su filial <span>Global blends ibérica</span></p>
<a href="#" class="boton botonBlanco">Contáctanos</a>
</div>
<div class="col-md-6">
<img src="img/wallpapers/grey.jpg" alt="Photo">
</div>
</div>
</div>
</section>
<section id="productos">
<div class="container">
<div class="row">
<div class="col-lg-12">
<header>
<h2 class="h2Reducido"> <i class="fa flaticon-star"></i>Nuestros <span>productos</span></h2>
<h3>A strive for the Highest Quality</h3>
<p>Interfood supplies dairy products and solutions to the dairy industry for various applications like recombined dairy, yoghurt or cheese. The food industry sources with Interfood any application requiring dairy ingredients for example ice cream, beverages, chocolate, bakery or confectionery..</p>
</header>
</div>
</div>
<div class="ro">
<div class="col-lg-4">
<article class="marco">
<i class="fa flaticon-test-tube"></i>
<h4>Milkpowders and derivatives</h4>
<p>Interfood offers you flexible solutions by delivering milkpowders and derivatives in a variety of compositions, origins and packaging according to your requirements.</p>
</article>
</div>
<div class="col-lg-4">
<article class="marco">
<i class="fa flaticon-milk-1"></i>
<h4>Butter</h4>
<p>Interfood offers you flexible solutions by delivering butter and AMF in a variety of compositions, origins and packaging according to your requirements.</p>
</article>
</div>
<div class="col-lg-4">
<article class="marco">
<i class="fa flaticon-analytics"></i>
<h4>Cheese</h4>
<p>Cheese is produced throughout the world in wide-ranging flavours, textures and forms. Cheese consists of proteins and fat from milk, usually the milk of cows, buffalos, goats, or sheep..</p>
</article>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<article class="marco">
<i class="fa flaticon-stars"></i>
<h4>Dairy proteins</h4>
<p>Various kinds of proteins have many different applications. For example in sports nutrition, cheese, yogurt, energy bars, drinks and meat to name a few. Proteins are also used as a functional ingredient to stabilize emulsions and for the manufacturing of fat filleds, toppings and foamers.</p>
</article>
</div>
<div class="col-lg-4">
<article class="marco">
<i class="fa flaticon-plant"></i>
<h4>Fatfilled milkpowder</h4>
<p>A fat filled is an economical replacement of full cream milk powder based on vegetable fat. Interfood has a wide range, either palm or coconut oil based, fat filled milkpowders on offer with proteins starting from 2% up to 26% of protein. </p>
</article>
</div>
<div class="col-lg-4">
<article class="marco">
<i class="fa flaticon-like"></i>
<h4>Infant milkpowder</h4>
<p>Focusing on business to business, Interfood is able to offer base powders of the highest quality for infant formula, follow on food formula and growing up milk. </p>
</article>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<a href="#" class="boton">Más información</a>
</div>
</div>
</div>
</section>
<!--
<section id="calidad">
<div class="container">
<div class="row">
<div class="col-xl-12">
<header>
<h2>Somos [central de ingredientes] desde 1994</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor </p>
</header>
</div>
</div>
<div class="row">
<div class="col-xl-4">
<p>Después de más de 20 años dedicado al sector lácteo, <span>central de ingredientes</span> se ha consolidado en el mercado, destacando tanto por su calidad, seriedad y confiabilidad en la fabricación tanto de preparados lácteos en polvo para chocolatería, como heladería o galletería. Incorporándose posteriormente al grupo su filial <span>Global blends ibérica</span></p>
<a href="#" class="boton botonBlanco">Contáctanos</a>
</div>
<div class="col-xl-4">
</div>
<div class="col-xl-4">
<p>Después de más de 20 años dedicado al sector lácteo, <span>central de ingredientes</span> se ha consolidado en el mercado, destacando tanto por su calidad, seriedad y confiabilidad en la fabricación tanto de preparados lácteos en polvo para chocolatería, como heladería o galletería. Incorporándose posteriormente al grupo su filial <span>Global blends ibérica</span></p>
<a href="#" class="boton botonBlanco">Contáctanos</a>
</div>
</div>
</div>
</section> -->
<section id="logistica">
<div class="container-fluid">
<div class="row">
<div class="col-lg-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-lg-8">
<video id="video" controls>
<source src="video/video.mp4" type="video/mp4">
<source src="video/video.ogv" type="video/ogg">
<source src="video/video.webm" type="video/webm">
</video>
</div>
</div>
</div>
</section>
</main>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/app.js" charset="utf-8"></script>
</body>
</html>