I have a page with a simple structure, have a lot of divs repeating same content (text-and two images), i need this to print a image that doesnt repeat in firefox only, heres an example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<title>Cupones de descuento</title>
</head>
<body>
<div class="content">
<!---------------------------------------CUPON TURISTA--------------------------------------->
<img src="img/cortesup.png" class="corte" />
<div class="cupon">
<div class="logo"><img src="img/logobuzios.png" class="logobuzios" alt="logobuzios" /></div>
<div class="cont">
<h3>CUPON N°:</h3>
<p>Nombre:</p>
<p>DNI:</p>
<p class="info">Válido desde DD/MM/AA hasta DD/MM/AA</p>
<img src="img/separador.png" class="separador" alt="separador"/>
<h3>MENÚ TURISTA</h3>
<p>VÁLIDO PARA: 1 (UN) ALMUERZO O CENA</p>
<p class="turista">Menú Turista: Incluye 1 (un) plato de entrada a elección + Incluye 3 (tres)
opciones de plato principal + Incluye 1 (un) postre a elección.<br />
NO Incluye Bebida. Horario de atención: 12 a 21:30 hs.</p>
<img src="img/separadordos.png" class="separador" alt="separador"/>
<p class="restaurant"><strong>RESTAURANTES ASOCIADOS:</strong> CLUB LA PLAGE - DON JUAN - BAR DO MANGUE - BUZIN -
ENU SUSHI - LA DOLCE VITA - PATIO HAVANA - NOI - PURO SABOR - SAN TELMO - DONA FLOR
MINEIROS GRILL - LORENZO - RINCON - PARVATI.</p>
</div>
<div class="pie">
<p class="asociados">Visite nuestro listado de <strong>Restaurantes Asociados</strong></p>
<img src="img/cubiertos.png" class="cubiertos" alt="cubiertos"/>
<p class="web">www.grupobuziosgourmet.com</p>
</div>
</div>
<!--Datos útiles-->
<div class="datos">
<div class="datoshead">
<p class="datosutiles">DATOS ÚTILES</p>
</div>
<p class="utiles">El pasajero titular deberá presentar el o los vouchers impresos en el restaurante que haya seleccionado para consumir.<br />
<strong>UBICACIÓN DE RESTAURANTES:</strong><br />
<strong>CENTRO DE BÚZIOS:</strong> DON JUAN - BUZIN - LA DOLCE VITA - ENU SUSHI - PATIO HAVANA - NOI - PARVATI - PURO SABOR - MINEIROS GRILL - LORENZO.<br />
<strong>JOÃO FERNANDES:</strong> CLUB LA PLAGE - DONA FLOR.<br />
<strong>MANGUINHOS:</strong> BAR DO MANGUE (PORTO DA BARRA).<br />
<strong>ORLA BARDOT:</strong> MATAHARI - RINCON (CENTRO).<br />
<strong>FERRADURA:</strong> SAN TELMO (SOBRE AV. PRINCIPAL).<br />
<strong>HORARIO DE ATENCIÓN:</strong><br />
Todos los restaurantes asociados a Grupo Búzios Resto atienden de 12 a 21.30HS.
<strong>Excepto Club La Plage (sólo almuerzo con bebida + 1 café o caipirinha de cortesía) de 12 a 16 hs. Dona Flor (sólo cena) de 18 a 21.30 hs.</strong>
Ante cualquier inconveniente podrá comunicarse de L a V al tel. +5411-5275-0075 y a nuestro servicio de guardia los fines de semana: Cel. Búzios: +0055-22 9227-8174 / +0055-22 99282-2067
</p>
</div>
I have tried to put the height: 100%; and min-height too 100% to body and html, , at the div container too, but still not working.
Thanks!
You just try this.
html{
height: 100%;
}
body {
min-height: 100%;
}
Refer this url:
Make body have 100% of the browser height
i updated your fiddle:
you gotta remove the height: 100% from html and body and use it like this:
body {float: left;}
#content {float: left;}
https://jsfiddle.net/7x32pna7/1/
hope that helps
Try:
body {float: left;
margin: 0px;
height: 100%;
width: 100%;
}
Related
this might be a stupid question but I'm stuck and need some help. I'm practicing float and div, and I managed to create this simple page but when I zoom out to 90% the box on the far right falls down to below. I tried to debug but I can't figure out what is causing this problem--could anyone help me? Below is the link to the mentioned page.
http://ratiayson.dothome.co.kr/day14_0225/coffeebeans2.html
I noticed you have given width: 876px on the .container.
Bump it up to 900px and it will work.
PIECE OF ADVICE
Hellow #Ratia, using float is a good idea, but using grid and flex based layouts is the best idea.
Float will require you to put lots of code to do a basic thing, Grid and Flex will do everything for you. Even auto responsiveness(Which is what you asked there above)
I urge you to use grid or flex...
Try This:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Float Layout</title>
<style>
*{margin: 0; padding: 0;}
a{ text-decoration: none; color:#333;}
li{list-style: none;}
img{border: none;}
body{font-size: 12px; font-family: 'sans-serif';}
.header{
margin:auto;
width:876px;
}
h1{
font-size: 30px;
font-weight: 900;
width:876px;
}
h2{
font-size: 30px;
font-weight: 900;
font-family: sans-serif;
color:saddlebrown;
padding-bottom: 30px;
text-align: center;
}
.container {
display: table;
border-spacing: 10px;
margin:auto;
width: 876px;
clear:both;
}
.container div{
border: 1px dotted brown;
padding: 15px;
}
.Column {
display: table-cell;
}
.container img{
padding-bottom: 30px;
/*overflow:hidden;*/
}
p{
font-size:14px;
font-weight: 600;
padding-bottom: 50px;
}
.container span{
font-size:16px;
background-color:goldenrod;
}
.bottomBox{
background-color: #333;
clear:both;
margin:auto;
width:874px;
height:50px;
color:azure;
text-align: center;
font-size: 16px;
padding-top:30px;
width:874px;
}
</style>
</head>
<body data-new-gr-c-s-check-loaded="8.871.0" data-gr-ext-installed="">
<div class="header">
<h1>coffee beans</h1>
</div>
<div class="container">
<div class="liberica Column">
<h2>Coffee Liberica</h2>
<img src="http://ratiayson.dothome.co.kr/day14_0225/images/bean1.jpeg" alt="">
<p>Desde 1835 se comenzó a cultivar comercialmente <span>el grano de café en Colombia13</span> en Salazar de las Palmas, Norte de Santander. Gran parte del incentivo a la producción se le atribuye a Francisco Romero, sacerdote de la época que imponía a los feligreses de la población, durante la confesión, la penitencia de sembrar café. Esto fue un gran impulso para la propagación del cultivo del grano en esa zona del país. </p>
</div>
<div class="arabica Column">
<h2>Coffee Arabica</h2>
<img src="https://minisoft.com.bd/uploads/portfolios/minisoft.png" alt="">
<p>Desde 1835 se comenzó a cultivar comercialmente <span>el grano de café en Colombia13</span> en Salazar de las Palmas, Norte de Santander. Gran parte del incentivo a la producción se le atribuye a Francisco Romero, sacerdote de la época que imponía a los feligreses de la población, durante la confesión, la penitencia de sembrar café. Esto fue un gran impulso para la propagación del cultivo del grano en esa zona del país. </p>
</div>
<div class="robusta Column">
<h2>Coffee Robusta</h2>
<img src="http://ratiayson.dothome.co.kr/day14_0225/images/bean1.jpeg" alt="">
<p>Desde 1835 se comenzó a cultivar comercialmente <span>el grano de café en Colombia13</span> en Salazar de las Palmas, Norte de Santander. Gran parte del incentivo a la producción se le atribuye a Francisco Romero, sacerdote de la época que imponía a los feligreses de la población, durante la confesión, la penitencia de sembrar café. Esto fue un gran impulso para la propagación del cultivo del grano en esa zona del país. </p>
</div>
<!--<div class='bottomBox'>
<span class='bottomText'><p>유명하고 비싼 커피보다 신선한 커피가 맛있습니다</p></span>
</div>-->
</div>
<div class="bottomBox">
coffee beans
</div>
</body>
</html>
I want to know how can I move this text next to an image! I don't know how I made it with the first pic, but I couldn't with the second.
p.mytext {
color: aliceblue;
padding-left: 15px;
padding-right: 15px;
padding-top: 15px;
padding-bottom: 15px;
border: 2px solid;
border-color: whitesmoke;
margin-left: 90px;
margin-right: 750px;
margin-bottom: 150px;
font-family: Lucida Sans Unicode;
}
p.secondtext {
color: white;
border: 2px solid;
border-color: whitesmoke;
font-family: Lucida Sans Unicode;
padding-left: 15px;
padding-right: 15px;
margin-left: 90px;
margin-right: 500px;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>About me</title>
<link href="../CSS/main.css" rel="stylesheet" type="text/css">
</head>
<img class="clip" src="../images/clip.png" width="300">
<body id="aboutme">
<h1 class="titulo">About me</h1>
<h2>INFORMATION</h2>
<img class="picofme" src="../images/juli.JPG" width="400">
<p class="mytext"> First of all, thank you for visiting my website. My name is Julian, I am 24 years old and I was born in Bogota, Colombia; a beautiful country in South America. I consider myself a person that is really passionate for the art. Sometimes people ask me
what's my favorite field, and I never have a concrete answer. This world is full of many incredible things, that is really hard to choose what I love the most. I wanted to be a singer before, but I realized my talent didn't exist. Even though my singing
is horrible, I consider myself a music lover (I can play the guitar). After so many years trying to figure what my passion was, I found the film as the perfect way to express what I feel. There are days in which I wish I knew everything about the
film, but then I think everything is a process. I love traveling to different places, and taking pictures of everything. Right now, I am enjoying this stage of my life, where I learn new things every day. "Life is like a ladder where you give steps
every day"</p>
<img class="china" src="../images/china.JPG" width="450">
<p class="secondtext">A lo largo de 1808, las presiones de Napoleón desencadenaron una serie de acontecimientos que empeoraron aún más la ya comprometida situación española, el rey Carlos IV de España abdicó el trono a favor de su hijo Fernando el 19 de marzo de 1808 después
de los sucesos del motín de Aranjuez, y más tarde, el 5 de mayo de 1808 se terminó de consumar el desastre para España cuando Carlos IV y su hijo fueron obligados a ceder el trono a Napoleón Bonaparte en Bayona para designar a su hermano, José, como
nuevo rey de España. Esto provocó una gran reacción popular en España que desencadenó lo que hoy se conoce como la guerra de la Independencia española y tanto en América como en España, se formaron juntas regionales que fomentaron la lucha contra
los invasores franceses para restablecer en el trono al monarca legítimo.</p>
</body>
</html>
i suppose you want to this.
.flex {
display:flex;
margin: 20px 0;
}
.flex img {
margin:0 20px 0 0;
}
.flex p {
border: 2px solid;
border-color: whitesmoke;
padding:20px;
margin:0;
}
<img class="clip" src="https://picsum.photos/300/100">
<body id="aboutme">
<h1 class="titulo">About me</h1>
<h2>INFORMATION</h2>
<div class="flex">
<img class="picofme" src="https://picsum.photos/300/300" width="400" >
<p class="mytext"> First of all, thank you for visiting my website. My name is Julian, I am 24 years old and I was born in Bogota, Colombia; a beautiful country in South America. I consider myself a person that is really passionate for the art. Sometimes people ask me what's my favorite field, and I never have a concrete answer. This world is full of many incredible things, that is really hard to choose what I love the most. I wanted to be a singer before, but I realized my talent didn't exist. Even though my singing is horrible, I consider myself a music lover (I can play the guitar). After so many years trying to figure what my passion was, I found the film as the perfect way to express what I feel. There are days in which I wish I knew everything about the film, but then I think everything is a process. I love traveling to different places, and taking pictures of everything. Right now, I am enjoying this stage of my life, where I learn new things every day. "Life is like a ladder where you give steps every day"</p>
</div>
<div class="flex">
<img class="china" src="https://picsum.photos/300/300" width="450">
<p class="secondtext">A lo largo de 1808, las presiones de Napoleón desencadenaron una serie de acontecimientos que empeoraron aún más la ya comprometida situación española, el rey Carlos IV de España abdicó el trono a favor de su hijo Fernando el 19 de marzo de 1808 después de los sucesos del motín de Aranjuez, y más tarde, el 5 de mayo de 1808 se terminó de consumar el desastre para España cuando Carlos IV y su hijo fueron obligados a ceder el trono a Napoleón Bonaparte en Bayona para designar a su hermano, José, como nuevo rey de España. Esto provocó una gran reacción popular en España que desencadenó lo que hoy se conoce como la guerra de la Independencia española y tanto en América como en España, se formaron juntas regionales que fomentaron la lucha contra los invasores franceses para restablecer en el trono al monarca legítimo.</p>
</div>
</body>
A couple of pointers to mention:
The body tag does not need an id, the id should be added to a
div tag within the body
Your first image is above the body tag, remember to include all of
your content html within the body
Your paragraphs have many similar style property values, consider
making a class for these. You can add more than one class to a tag.
Avoid adding inline css: your img widths are very similar in width.
For demo purposes, I have created a class with width of 425 (midway) and
removed the 400/425 inline style
I commented out margins that were throwing out position, and changed the color text to black for the paragraphs (just so I could see it!)
The bottom img classes (in my code) that are commented out are examples of css that you could use for your images. The img css that affects the snippet is in the second line.
#aboutme{float:left;}
p{color:#000000; width:60%; display:inline-block; float:right;}
img{max-width:32%; padding:30px 25px; float:left; height:auto; vertical-align:middle;}
p, img{ display:inline-block; vertical-align:top;}
.mytext {
/*color: aliceblue;*/
padding: 15px;
border: 2px solid;
border-color: whitesmoke;
/*margin-left: 90px;
margin-right: 75px;
margin-bottom: 150px;*/
font-family: Lucida Sans Unicode;
}
.secondtext {
/*color: #ffffff;*/
border: 2px solid;
border-color: whitesmoke;
font-family: Lucida Sans Unicode;
padding-left: 15px;
padding-right: 15px;
/*margin-left: 90px;
margin-right: 500px;*/
/*float: left;*/
}
/*.picofme{width:400px;height:auto;}
.china{width:450px;height:auto;}*/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>About me</title>
<link href="../CSS/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<img id="clip" src="https://ec.europa.eu/education/sites/education/files/styles/news_promo_img/public/questions-image.png?itok=6LsRlXS4" >
<div id="aboutme">
<h1 class="titulo">About me</h1>
<h2>INFORMATION</h2>
<img class="picofme" src="https://ec.europa.eu/education/sites/education/files/styles/news_promo_img/public/questions-image.png?itok=6LsRlXS4" >
<p class="mytext"> First of all, thank you for visiting my website. My name is Julian, I am 24 years old and I was born in Bogota, Colombia; a beautiful country in South America. I consider myself a person that is really passionate for the art. Sometimes people ask me
what's my favorite field, and I never have a concrete answer. This world is full of many incredible things, that is really hard to choose what I love the most. I wanted to be a singer before, but I realized my talent didn't exist. Even though my singing
is horrible, I consider myself a music lover (I can play the guitar). After so many years trying to figure what my passion was, I found the film as the perfect way to express what I feel. There are days in which I wish I knew everything about the
film, but then I think everything is a process. I love traveling to different places, and taking pictures of everything. Right now, I am enjoying this stage of my life, where I learn new things every day. "Life is like a ladder where you give steps
every day"</p>
<img class="china" src="https://ec.europa.eu/education/sites/education/files/styles/news_promo_img/public/questions-image.png?itok=6LsRlXS4" >
<p class="secondtext">A lo largo de 1808, las presiones de Napoleón desencadenaron una serie de acontecimientos que empeoraron aún más la ya comprometida situación española, el rey Carlos IV de España abdicó el trono a favor de su hijo Fernando el 19 de marzo de 1808 después
de los sucesos del motín de Aranjuez, y más tarde, el 5 de mayo de 1808 se terminó de consumar el desastre para España cuando Carlos IV y su hijo fueron obligados a ceder el trono a Napoleón Bonaparte en Bayona para designar a su hermano, José, como
nuevo rey de España. Esto provocó una gran reacción popular en España que desencadenó lo que hoy se conoce como la guerra de la Independencia española y tanto en América como en España, se formaron juntas regionales que fomentaron la lucha contra
los invasores franceses para restablecer en el trono al monarca legítimo.</p>
</div>
</body>
</html>
Good luck
I want my image and text to be responsive, I have added image for the format I need, but I used some coding and I'm not able to do it the right way. Please can someone help me out here?
I have this format here for desktop version
and this is what I see in tablet for screen 768
now I want in tablet to be similar as in desktop
#media (min-width:641px) {
.home-top{
background: url(../../images/index/u155.png);
background-position: center;
background-repeat: no-repeat;
min-height: 280px;
color:#fff;
padding-top: 30px;
padding-bottom: 30px;
}
}
<div class="home-top ">
<div class="container">
<div class="lg-container">
<div class="lg-container">
<div class="row">
<div class="col-md-4 "><img src="<?php echo URL ?>public/images/image_directeur.png" class="director-img"></div>
<div class="col-md-8 ">Mot de l’Inspecteur Général en charge de l'IGF <br><br>Dans le cadre de la coopération avec les corps supérieurs de contrôle des finances publiques, l'Inspection Générale des Finances du Maroc a reçu du 25 au 28 août une délégation, composée de cinq responsables, de l'Inspection Générale des Finances d'Haïti conduite par son Directeur général Mr Salomon Jude Alix Patrick... Dans le cadre de la coopération avec les corps supérieurs de contrôle des finances publiques, l'Inspection Générale des Finances du Maroc a reçu du 25 au 28 août une délégation, composée de cinq responsables, de l'Inspection Générale des Finances d'Haïti conduite par son Directeur Général Mr Guy Romero LATRY...
<br><br>
Guy Romero LATRY <span style="float: right;"><button class="home-top-btn">Lire l'article >></button></span>
</div>
</div>
</div>
</div>
</div>
</div>
The col-md-* works for screen widths higher than 992px.
You should add `col-sm-4' to the first column div and 'col-sm-8' to the second. Add, not replace.
This should work to get the proportions right on smaller screens.
I'm supposed to reproduce the image below, and I was doing great so far, but can't seem to align my images well, and can't set up the top menu properly.
I should also be able to "paint" the image background green, but have no idea how to do so.
How can I achieve that?
body {
background-color: #dff0d8;
}
h1 {
background-color: green;
}
#outros {
background-color: black;
}
#texto1 {
float: left;
width: 30%;
}
#texto2 {
float: left;
width: 30%;
}
#texto3 {
float: left;
width: 30%;
}
img {
border-radius: 10%;
}
#preto {
background-color: green;
}
<link href="//www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<h2 id="outros">
<font color="white">
<div id="preto">Home</div>Museus <br/> Monumentos <br/> Restaurantes </font>
</h2>
<h1>
<font color="white"> A cidade de Lisboa </font>
</h1>
<div id="texto1">
<h3> Introdução </h3>
<p>
Lisboa GCTE é a capital de Portugal e a cidade mais populosa do país. Tem uma população de 506 892 habitantes, dentro dos seus limites administrativos. Na Área Metropolitana de Lisboa, residem 2 821 697 pessoas (2011), sendo por isso a maior e mais populosa
área metropolitana do país. Lisboa é o centro político de Portugal, sede do Governo e da residência do chefe de Estado. É o "farol da lusofonia" (Daus): a Comunidade dos Países de Língua Portuguesa (CPLP) tem a sua sede na cidade. É ainda a capital
mais a ocidente do continente europeu na costa atlântica.
</p>
</div>
<div id="texto2">
<h3> Globalidade </h3>
<p>Lisboa é considerada como cidade global devido à sua importância em aspectos financeiros, comerciais, mediáticos, artísticos, educacionais e turísticos. É um dos principais centros económicos do continente europeu, graças a um progresso financeiro crescente
favorecido pelo maior porto de contentores da costa atlântica da Europa e mais recentemente pelo Aeroporto Humberto Delgado, que recebe mais de 20 milhões de passageiros anualmente (2015). Lisboa conta com uma rede de auto-estradas e um sistema de
ferrovias de alta velocidade (Alfa Pendular), que liga as principais cidades portuguesas à capital.
<br/> A cidade é a sétima mais visitada do sul da Europa, depois de Istambul, Roma, Barcelona, Madrid, Atenas e Milão, com 1 740 000 de turistas em 2009, tendo em 2014 ultrapassado a marca dos 3,35 milhões. A nível global, Lisboa foi a 35.ª cidade
com maior destino turístico em 2015, cerca de 4 milhões de visitantes. Em 2015, foi considerada a 11.ª cidade turística mais popular, à frente de Madrid, Rio de Janeiro, Berlim e Barcelona.
</p>
</div>
<div id="texto3">
<h3> Riqueza </h3>
<p>
A região de Lisboa é a mais rica do país, com um PIB PPC per capita de 26 100 euros (4,7% maior do que o PIB per capita médio da União Europeia). A sua área metropolitana é a vigésima mais rica do continente, com um PIB-PPC no valor de 58 mil milhões
de euros, o que equivale a cerca de 35% do PIB-PPC total do país. Lisboa ocupa o 122.º lugar entre as cidades com maiores receitas brutas do mundo.
</br> A maioria das sedes das multinacionais instaladas em Portugal encontram-se na região de Lisboa, a nona cidade do mundo com maior número de conferências internacionais.
</p>
</div>
<div id="zonafoto">
<div id="img1" style="float:left">
<img src=https://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Torre_de_Bel%C3%A9m_-_Lisboa_Portugal.jpg/800px-Torre_de_Bel%C3%A9m_-_Lisboa_Portugal.jpg width=479px height=330px></div>
<div id="img2" style="float:center">
<img src=http://municipiosefreguesias.pt/files/20141111021430_vascodagama.jpg width=479px height=330px></div>
<div id="img3" style="float:right">
<img src=http://turismo.culturamix.com/blog/wp-content/gallery/praca-do-comercio/praca-do-comercio-11.jpg width=479px height=330px></div>
</div>
For the menu try this:
HTML:
<div id="outros">
<ul>
<li id="preto"><h2>Home</h2></li>
<li><h2>Museus</h2></li>
<li><h2>Monumentos</h2></li>
<li><h2>Restaurantes</h2></li>
</ul>
</div>
CSS:
#outros {
background-color: black;
color: white;
margin-left: -40px;
}
#outros li {
display: inline-block;
padding: 5px 20px;
}
I'm trying to scroll down with the following website, in a mobile view and I can't, any suggestions?
The thing is that I understand that this may be happening due to the menu I'm using but I'm not able to make it scroll as a normal in HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css">
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link href='http://fonts.googleapis.com/css?family=Raleway:100,200,300,400' rel='stylesheet' type='text/css'>
<!-- build:js modernizr.touch.js -->
<script src="elastic/modernizr.touch.js"></script>
<!-- endbuild -->
<link href="elastic/index.css" rel="stylesheet">
<!-- build:css mfb.css -->
<link href="elastic/mfb.css" rel="stylesheet">
<!-- endbuild -->
<link rel="stylesheet" href="elastic/style.css">
<style>
.ion-location{
color : #FB0000;
}
.ion-social-facebook{
color : #3b5998;
}
.ion-social-googleplus{
color : #d34836;
}
.ion-social-instagram-outline{
color : #3f729b;
}
</style>
</head>
<body>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="elastic/ionic.css" rel="stylesheet">
<script src="elastic/ionic.bundle.js"></script>
<ion-header-bar class="bar-positive bar bar-header disable-user-behavior" >
<h1 class="title">Sobre mí</h1>
</ion-header-bar>
<ion-content delegate-handle="example-scroller" elastic-header="example-elastic-header" overflow-scroll="false" class="scroll-content ionic-scroll has-header"><div class="scroll" style="transform: translate3d(0px, -1px, 0px) scale(1);" >
<div id="example-elastic-header" class="background-image" style="transform-origin: center bottom 0px; transform: translate3d(0px, 0.5px, 0px) scale(1, 1); background-image: url("los7aguacates.jpg");"></div>
<div class="content">
<div class="padding">
<h1>Los 7 aguacates </h1>
<p>Mi vida ha estado siempre marcada por mis grandes amores y pasiones:<br><br>
- La nutrición, y la posibilidad de “curar lo incurable” a través de una alimentación adecuada.<br><br>
- La gente, y la posibilidad de mejorar su vida, aumentar la autoestima, transformar la mente y acompañar a las personas durante el proceso de cambio mientras observo los maravillosos pasos hacia la salud y el bienestar.<br><br>
- Mi país, Polonia y España, que por elección es mi segunda casa.<br><br>
- Los aguacates, que no sé muy bien por qué, pero se han hecho una parte inseparable de mí ;)
"</p>
<p>Justo por eso estoy donde estoy, hago lo que hago y …!quiero seguir! </p><p>
Todos tenemos el poder de impactar en la vida de otra persona. ¿Por qué no aprovecharlo para mejorar la salud y la calidad de vida de los demás? Quiero que la buena alimentación se haga viral (¡ya ves que necesito tu ayuda para ello!) e impacte en todas las personas, mostrando también a los peques (¡que son las nuevas generaciones!) qué significa comer bien y cómo. A través de una vida saludable, se pueden evitar muchos problemas de salud.
</p><p>Únete a mi movimiento, al movimiento de los7aguacates, un movimiento que promueve la alimentación sana como forma de vida, como base para una existencia más plena y feliz. ¡Un movimiento que quiere “curar lo incurable”! Comiendo bien, compartiendo recetas, dando ejemplo tú también impactas positivamente en los demás, ¿quieres ser mi ayudante? Te necesito, necesito tu impacto para llegar a otras personas. ¡Formemos un equipo! Comer bien es fácil y divertido. ¡Yo te lo mostraré!</p>
</div>
<div class="list">
</div>
</div>
</div><div class="scroll-bar scroll-bar-v"><div class="scroll-bar-indicator scroll-bar-fade-out" style="transform: translate3d(0px, 1px, 0px) scaleY(1); height: 356px;"></div></div></ion-content>
<ul id="menu" class="mfb-component--tr mfb-fountain " data-mfb-toggle="hover">
<li class="mfb-component__wrap">
<a href="#" class="mfb-component__button--main">
<i class="mfb-component__main-icon--resting ion-navicon-round"></i>
<i class="mfb-component__main-icon--active ion-close-round"></i>
</a>
<ul class="mfb-component__list">
<li>
<a href="external://https://www.facebook.com/los7aguacates/" data-mfb-label="Sígueme en Facebook" class="mfb-component__button--child">
<i class="mfb-component__child-icon ion-social-facebook"></i>
</a>
</li>
<li>
<a href="external://https://www.instagram.com/los7aguacates/" data-mfb-label="Sígueme en Instagram" class="mfb-component__button--child">
<i class="mfb-component__child-icon ion-social-instagram-outline"></i>
</a>
</li>
<li>
<a href="external://https://play.google.com/store/apps/details?id=com.mubiquo." data-mfb-label="Valora la app" class="mfb-component__button--child">
<i class="mfb-component__child-icon ion-heart"></i>
</a>
</li>
</ul>
</li>
</ul>
<section id="panel" class="panel">
</section>
<!-- build:js mfb.js -->
<script src="elastic/mfb.js"></script>
<!-- endbuild -->
<script>
var panel = document.getElementById('panel'),
menu = document.getElementById('menu'),
showcode = document.getElementById('showcode'),
selectFx = document.getElementById('selections-fx'),
selectPos = document.getElementById('selections-pos'),
// demo defaults
effect = 'mfb-zoomin',
pos = 'mfb-component--br';
showcode.addEventListener('click', _toggleCode);
selectFx.addEventListener('change', switchEffect);
selectPos.addEventListener('change', switchPos);
function _toggleCode() {
panel.classList.toggle('viewCode');
}
function switchEffect(e){
effect = this.options[this.selectedIndex].value;
renderMenu();
}
function switchPos(e){
pos = this.options[this.selectedIndex].value;
renderMenu();
}
function renderMenu() {
menu.style.display = 'none';
// ?:-)
setTimeout(function() {
menu.style.display = 'block';
menu.className = pos + effect;
},1);
}
</script>
<script src="elastic/index.js"></script>
</body>
</html>