Centering carousel (css 3d) in section - javascript

I'm attempting to create a profile website.
However I seem to have hit a brick wall; I'm unable to figure out a way of making my carousel center itself in my section.
Does anyone have any advice on what I could do?
Here is a codepen with the code:
https://codepen.io/Todai/pen/RRPGwZ
And here is my .html:
<html>
<head>
<link rel="stylesheet" href="resources/font-awesome-4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="resources/css/flipCardCSS.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<div class="container-fluid">
<header id="banner">
<div class="container">
<div class="col-md-2">
<!-- <span id="link"> -F </span> -->
<img src="http://res.cloudinary.com/todai/image/upload/v1464873431/146487352498428_v9sob9.gif" id="bannerImg">
</div>
<div class="col-md-10">
<button type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false" class="navbar-toggle collapsed">
<span class="sr-only"> Toggle navigation </span>
<span class="icon-bar"> </span>
<span class="icon-bar"> </span>
<span class="icon-bar"> </span>
</button>
<nav id="navbar" role="navigation" class="collapse navbar-collapse" aria-expanded="false">
<ul class="nav navbar-nav navbar-right">
<li class="active">
About
</li>
<li class>
Portfolio
</li>
<li class>
Contact
</li>
</ul>
</nav>
</div>
<a id="top" name="home"> </a>
</header>
<main >
<header class="row customClass">
<div class="intro-text col-md-8" >
<p class="text-right">
My name is <strong> J</strong>oakim <strong>K</strong>akaei, I'm a Software Engineer with knowledge of most main-stream languages as well as some more obscure. I have experience working with c++, c#, java amongst many other; working knowledge of project management and methodologies.
</p>
<hr class="star-bright">
</hr>
<span class="skills">
Software Engineer - Web Developer - Security Hobbyist
</span>
</div>
<div class="col-md-4">
<img src="http://res.cloudinary.com/todai/image/upload/v1464900561/12976795_10208023281372738_6826518550098825642_o_e2brh3.jpg" alt>
</div>
</header>
<section id="Portfolio">
<h2> Portfolio </h2>
<hr class="star-dark"/>
<div class="container center">
<div class="prev">Prev</div>
<div class="carousel">
<div class="item a">
<div id="f1_container">
<div id="f1_card" class="shadow">
<div class="front face">
<img src="http://res.cloudinary.com/todai/image/upload/v1469565942/geostocks-transparent_pyxgvj.png"/>
</div>
<div class="back face center">
<p>A distributed software built in Erlang, using a MSSQL instance and
a C# Web Api end-point.</p>
<p>I was in charge with working on the Android and web front-end.</p>
<span> <i class="fa fa-github fa-2x"> </i> </span>
</div>
</div>
</div>
</div>
<div class="item b">
<div id="f1_container">
<div id="f1_card" class="shadow">
<div class="front face">
<img src="http://res.cloudinary.com/todai/image/upload/c_scale,h_200,w_250/v1469535266/Screen-Shot-2011-12-11-at-9.39.26-PM_twyfwy.png"/>
</div>
<div class="back face center">
<p>A distributed software built in Erlang, using a MSSQL instance and
a C# Web Api end-point.</p>
<p>I was in charge with working on the Android and web front-end.</p>
<span> <i class="fa fa-github fa-2x"> </i> </span>
</div>
</div>
</div>
</div>
<div class="item c">
<div id="f1_container">
<div id="f1_card" class="shadow">
<div class="front face">
<img src="http://res.cloudinary.com/todai/image/upload/c_scale,h_200,w_250/v1469535260/podcast-ac-new_2_hbplwk.jpg"/>
</div>
<div class="back face center">
<p>A distributed software built in Erlang, using a MSSQL instance and
a C# Web Api end-point.</p>
<p>I was in charge with working on the Android and web front-end.</p>
<span> <i class="fa fa-github fa-2x"> </i> </span>
</div>
</div>
</div>
</div>
<div class="item d">
<div id="f1_container">
<div id="f1_card" class="shadow">
<div class="front face">
<img src="http://res.cloudinary.com/todai/image/upload/c_scale,h_200,w_250/v1469535260/podcast-ac-new_2_hbplwk.jpg"/>
</div>
<div class="back face center">
<p>A distributed software built in Erlang, using a MSSQL instance and
a C# Web Api end-point.</p>
<p>I was in charge with working on the Android and web front-end.</p>
<span> <i class="fa fa-github fa-2x"> </i> </span>
</div>
</div>
</div>
</div>
<div class="item e">
<div id="f1_container">
<div id="f1_card" class="shadow">
<div class="front face">
<img src="http://res.cloudinary.com/todai/image/upload/c_scale,h_200,w_250/v1469535260/podcast-ac-new_2_hbplwk.jpg"/>
</div>
<div class="back face center">
<p>A distributed software built in Erlang, using a MSSQL instance and
a C# Web Api end-point.</p>
<p>I was in charge with working on the Android and web front-end.</p>
<span> <i class="fa fa-github fa-2x"> </i> </span>
</div>
</div>
</div>
</div>
<div class="item f">
<div id="f1_container">
<div id="f1_card" class="shadow">
<div class="front face">
<img src="http://res.cloudinary.com/todai/image/upload/c_scale,h_200,w_250/v1469535260/podcast-ac-new_2_hbplwk.jpg"/>
</div>
<div class="back face center">
<p>A distributed software built in Erlang, using a MSSQL instance and
a C# Web Api end-point.</p>
<p>I was in charge with working on the Android and web front-end.</p>
<span> <i class="fa fa-github fa-2x"> </i> </span>
</div>
</div>
</div>
</div>
</div>
<div class="next">Next</div>
</div>
</section>
</main>
</div>
</div>
</div>
</body>
</html>
<script src="resources/scripts/carousel.js"> </script>


This is an easy way to horizontally center a relatively positioned element:
.carousel {
position: relative;
margin: 0 auto;
}

Related

Can't figure out why my site loads so slow

I got a site form my html teacher, he asked me to check it and fix any problems if they are there. While I fixted some, there is still one big one that I can't figure out. It takes a long time (around 30 seconds) to load the site completly. Everything loads correctly, exapt the navigation menu and a youtube video. I found the source of the problem, it has something to do with the JavaScript code. I don't understand JavaScripy, so I can't figure out the problem. When I delete the JavaScript code, the site loads, but the navigation menu and the video don't, not at all to be exact. There is another JavaScript file, but I don't think it has anything to do with this, and it's to long to post here, so you can download the file here. Here is the css file.
The last 10 lines of JavaScript code is the problem.
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Magic-Fire® by Safretti - Home - Safretti Magic-Fire</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="shortcut icon" type="image/png" href="./assets/images/favicon.png">
<link rel="stylesheet" href="./assets/css/style.css?v=1501504031">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o) [0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-1301951-24', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<div id="viewport">
<div class="page" id="page-18027">
<header class="block-4-1 v-0" data-sticky="sticky"><div class="container">
<div class="row">
<div class="col">
<div class="middle">
<div class="logo">
<a class="media-1" href="./index.html"><img src="./assets/images/safretti-magicfire-fireplaces-logo-white.svg"></a>
</div>
<div class="menu">
<a class="handler" href="#">
<div></div>
<div></div>
<div></div>
</a>
<div class="mobile-menu block-4-1-mobile-menu v-0">
<div class="outer">
<div class="inner">
<div class="menu-1 menu-menu-1"><ul> <li class="active">Home</li><li>Magic-Fire?</li><li class="">Mistero<ul class="" style="height: 179px;"><li>Mistero 500</li><li>Mistero 1000</li><li>Mistero 1500</li><li>Mistero 2000</li><li>Mistero customized</li></ul> </li><li class="">Incanto<ul class="" style="height: 179px;"><li>Incanto 1000</li><li>Incanto 1500</li><li>Incanto 2000</li><li>Incanto 2500</li><li>Incanto customized</li></ul></li><li>Customized</li><li>References</li><li>About Safretti</li><li>Contact</li></ul></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div></header>
<section id="block-39-848428" class="v-35">
<div class="media-4" data-size="1920x0"><iframe src="//www.youtube.com/embed/U5RHhah4poI?enablejsapi=1&wmode=transparent" allowfullscreen></iframe>
<div class="container">
<div class="row">
<div class="col">
<div class="box">
</div>
</div>
</div>
</div>
</section>
<section id="block-51-848431" class="v-35">
<div class="media-4" data-size="1920x0"><iframe src="https://www.youtube.com/embed/U5RHhah4poI?rel=0&autoplay=1&controls=0&showinfo=0" allowfullscreen></iframe>
</div>
<div class="container">
<div class="row">
<div class="col">
<div class="box">
</div>
</div>
</div>
</div>
</section>
<section id="block-76-206454" class="v-35">
<div class="container">
<div class="row">
<div class="col">
<div class="box">
<h1 class="heading-2">The greatest contrast in the world brought together by state of the art technique.</h1>
</div>
</div>
</div>
</div>
</section>
<section id="block-36-219665" class="v-0">
<div class="container">
<div class="row equalize">
<div class="col col-md-6">
<a class="media-2" data-size="480x0" href="./what-is-magic-fire-/incanto-old/index.html">
<img src="./assets/images/home-1c.480x0.jpg">
</a>
<h3 class="heading-3">INCANTO</h3>
<div class="text-2"><p>Incanto is the Magic-Fire Mistero (see description Mistero) provided with a housing so it can be easily integrated in several projects.
</p></div>
<a class="button-2" href="./incanto/index.html">more info ></a>
</div>
<div class="col col-md-6">
<a class="media-2" data-size="480x0" data-position="center-middle" href="./what-is-magic-fire-/mistero-old/index.html">
<img src="./assets/images/home-1b.480x0.jpg">
</a>
<h3 class="heading-3">MISTERO</h3>
<div class="text-2">
<p>Mistero is an electrical fire. The Magic-Fires are equipped with water reservoirs. An evapor<span style="color: #999999;">ator turns t</span>he water into fine water mist. By illuminating the mist you will get a truly realistic and lively smoke / flame effect.</p>
</div>
<a class="button-2" href="./mistero/index.html">Available in the following sizes</a>
</div>
</div>
</div>
</section>
<section id="block-76-956792" class="v-35">
<div class="container">
<div class="row">
<div class="col">
<div class="box">
<h2 class="heading-2">
<span style="font-family: raleway-thin; color: #ffffff;">ON DEMAND - CUSTOM MADE</span>
</h2>
<div class="text-2">
<p><span style="font-family: raleway-regular; color: #ffffff; font-size: 12px;"><span style="color: #999999;">The Magic-Fire firespaces are also available in on demand custom made solutions. Specialy for you as furniture or interior designer or architect if you want something unique for your project. Interested? </span><br /><span style="color: #999999;">Please</span><span style="font-family: raleway-bold;"><strong><span style="color: #ffffff;"> click here</span></strong></span><span style="color: #999999;"> for more information or</span> <strong><span style="font-family: raleway-bold;"><span style="color: #ffffff;">contact</span></span></strong> <span style="color: #999999;">us for more information.</span></span></p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="block-8-2 v-0">
<div class="container">
<div class="row">
<div class="col">
<h3 class="heading-3">Safretti BV - Metaalstraat 3a/3c - 7483 PD Haaksbergen - The Netherlands - ICC nr.: 08130256 - VAT nr.: NL8138.45.245.B01</h3>
</div>
</div>
</div>
</section>
<section class="block-55-1 v-0">
<div class="container">
<div class="row">
<div class="col">
<div class="middle">
<div>
<div>
<div class="media-1">
<img src="./assets/images/icon-phone.svg">
</div>
<div class="text-6"><p>0031 (0)53 574 2554
</p></div>
</div>
<div>
<div class="media-1">
<img src="./assets/images/icon-email.svg">
</div>
<div class="text-6"><p><u>info#safretti.com</u>
</p></div>
</div>
</div>
<div>
<div>
<a class="media-1" href="http://www.facebook.com/safretti" target="_blank">
<img src="./assets/images/icon-facebook.svg">
</a>
<a class="media-1" href="http://nl.linkedin.com/in/safretti-bv-23172931" target="_blank">
<img src="./assets/images/icon-linkedin.svg">
</a>
<a class="media-1" href="http://nl.pinterest.com/safretti/" target="_blank">
<img src="./assets/images/icon-pinterest.svg">
</a>
<a class="media-1" href="http://www.youtube.com/channel/UCkN0NWaLeQts786gy6XkSkQ" target="_blank">
<img src="./assets/images/icon-youtube.svg">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<script src="./assets/js/script.js?v=1501504031"></script>
<script src="//maps.googleapis.com/maps/api/js? key=AIzaSyAdxtgr_gHrZ7E8t2aSZ_-eTAbIr_zc478"></script>
<script>$(window).on('load', function() {
new Menu({selector: '#page-18027 .block-4-1 .menu, [data-page_id="page- 18027"] .block-4-1 .menu'});
new Cover({selector: '#page-18027 #block-51-848431 .media-4, [data- page_id="page-18027"] #block-51-848431 .media-4'});
new Sticky({selector: '#page-18027 [data-sticky], [data-page_id="page- 18027"] [data-sticky]'});
new Scale({selector: '#page-18027 [class*="heading-"], [data-page_id="page-18027"] [class*="heading-"], #page-18027 [class*="text-"], [data-page_id="page-18027"] [class*="text-"]'});
new Anchor({selector: '#page-18027 a[href^="#"], [data-page_id="page-18027"] a[href^="#"]'});
new Popup({selector: '#page-18027 .block-55-1 a[href][target="popup"], [data-page_id="page-18027"] .block-55-1 a[href][target="popup"]'});
new Equalize({selector: '#page-18027 #block-36-219665 .equalize, [data- page_id="page-18027"] #block-36-219665 .equalize'});
new Video({selector: '#page-18027 #block-51-848431 video, [data- page_id="page-18027"] #block-51-848431 video, #page-18027 #block-51-848431 iframe, [data-page_id="page-18027"] #block-51-848431 iframe'});
});
</script>
</body>

Check your style.css if you have many imports. That is something that can cause long loading times. Otherwise if your hosting it localy try to move it to somewhere else. Or check if you have many animations (js).
Edit: Actually the pageloaded very fast on my side. I mean I hadnt the CSS but it lokks like its not the html/js code. Could you post the CSS code too inside your question?

get rid of the large space in the URL in this line.
<script src="//maps.googleapis.com/maps/api/js? key=AIzaSyAdxtgr_gHrZ7E8t2aSZ_-eTAbIr_zc478"></script>
change to
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyAdxtgr_gHrZ7E8t2aSZ_-eTAbIr_zc478"></script>
it is best practice to not have spaces in URL
see Google Maps API Best Practices

CSS menu bar style sheet menu does not render

I have a project that needs a CSS menu bar with panel of overview panels on the right side of HTML page. My issue is the that the CSS menu bar style sheet menu does not render. Attempting to get this CSS menu bar working, then extend code functionality for content links, login, dashboard, etc.
Code: tag
<header class='header'>
<div class='header_top-bar'>
<div class='top-bar_title'>
<a href='index'><h1><img src='images/logo.png' data-image='images/logo.png' alt='Athena'></h1></a>
<div class='ajax-loader' id='ajax-loader'>
<div class='ajax-loader_animator'></div>
</div>
</div>
<div class='top-bar_toggle' id='menu_toggle'>
<span></span>
<span></span>
<span></span>
</div>
<!-- <div class='top-bar_share' id='share_toggle'>
<span class='underline--white'>
SHARE
</span>
</div> -->
<div class='top-bar_menu' id='overlay_menu'>
<ul class='menu_container'>
<li class='menu_item'>
<span>.01.</span>
<a class='link-ajax' href='/'>Home</a>
</li>
<li class='menu_item'>
<span>.02.</span>
<a class='link-ajax' href='/project'>Athena Customers</a>
</li>
<li class='menu_item'>
<span>.03.</span>
<a class='link-ajax' href='/wines'>Athena Services</a>
</li>
<li class='menu_item'>
<span>.04.</span>
<a class='link-ajax' href='/sustainability'>Athena Sustainability</a>
</li>
<li class='menu_item'>
<span>.05.</span>
<a class='link-ajax' href='/hospitality'>Athena Dashboards</a>
</li>
</ul>
<div class='language-chooser menu_item'>
<div class='masi-agricola_wrapper hide-on-mobile'>
<a href='http://www.masi.it' target='_blank' class='masi-agricola_link'>
<img src='images/agricola.png' data-image='images/agricola.png'/>
</a>
</div>
<p class='text--subtitle'>select your language</p>
<span class='language-link'><a class='' href='/en/'>Eng</a></span>
<span class='line-break'></span>
<span class='language-link'><a class='' href='/es/'>Esp</a></span>
<span class='line-break'></span>
<span class='language-link'><a class='' href='/it/'>Ita</a></span>
</div>
</div>
</div>
</header>
Code: content section
<div id="new-plh" class="plh"></div>
<div id="actual-plh" class="plh">
<section class="main-content clearfix homepage">
<div class="main-content_background">
<div class="half_screen full-height-desk" id="biggest_block">
<a href="project" class="">
<div class="text-block">
<div class="full-image_header page-header">
<h1 class="page-header_title text--title">
Athena Intelligence Earth's Essential Data
</h1>
<strong class="page-header_subtitle text--subtitle">
Athena Intelligence Login
</strong>
</div>
<img data-image="images/project-header.jpg" src="images/project-header.jpg" alt="">
</div>
</a>
</div>
<div class="half_screen full-height-desk">
<a href="wines">
<div class="text-block three_row">
<div class="full-image_header page-header">
<h1 class="page-header_title text--title">
Athena: Many industries: all use Land, Food, Energy, Water
</h1>
<strong class="page-header_subtitle text--subtitle">
The Gods: Land, Food, Energy, Water
</strong>
</div>
<div class="image-container">
<img class="three_images" data-image="images/wines-header.jpg" src="images/wines-header.jpg" alt="">
</div>
</div>
</a>
<a href="sustainability" class="">
<div class="text-block three_row">
<div class="full-image_header page-header">
<h1 class="page-header_title text--title">
Land, Food, Energy, Water: Sustainability
</h1>
<strong class="page-header_subtitle text--subtitle">
Athena : Dedication To Land, Food, Energy, Water
</strong>
</div>
<div class="image-container">
<img class="three_images" data-image="images/sustainability-header.jpg" src="images/sustainability-header.jpg" alt="">
</div>
</div>
</a>
<a href="hospitality">
<div class="text-block three_row">
<div class="full-image_header page-header">
<h1 class="page-header_title text--title">
Land, Food, Energy, Water: Hospitality
</h1>
<strong class="page-header_subtitle text--subtitle">
Land, Food, Energy, Water: That Welcomes You
</strong>
</div>
<div class="image-container">
<img class="three_images" data-image="images/hospitality-header.jpg" src="images/hospitality-header.jpg" alt="">
</div>
</div>
</a>
</div>
</div>
</section>
Code: title bar wrapper tag
<div class='out-loader_wrapper'>
<div class='out-loader'>
<div class='filler' id='filler'>
<img class='logo-loader' src='images/logo.png' data-image='images/logo.png'/>
<div class='filler-bar'></div>
<p class='text--title' id='loader_text'>0</p>
</div>
</div>
</div>

Given you did not post the complete HTML I cannot tell if you are linking the stylesheet correctly. Nothing in your HTML looks out of place, which means that if you can't see the styles rendered then either the stylesheet was not linked correctly to the document or you did not import it correctly if you're using a preprocessor like SASS or LESS.
However, you can try the following:
Make sure you're linking it correctly in your document's <head> like <link href="path/to/your/menu-stylesheet.css rel="stylesheet">.
If you're linking multiple stylesheets, make sure to link them in the correct order. This means that if you reference classes or styles that are declared in another stylesheet, you must ensure to link the stylesheet that is referenced before the stylesheet that makes the reference.
If you're using a preprocessor, make sure you imported the stylesheet correctly like #import 'path/to/stylesheet.less (mind the correct extension whichever your case.
If you're using a task runner like grunt or gulp, you can concatenate your stylesheets into one single stylesheet.

JavaScript: Smooth Scroll Not Working

For some reason, Smooth scroll is not working. I believe that there is something in my HTML causing the problem. Click on Food delivery or anything in that list to test it, in the code. I appreciate any extra eyes on this :)
$(document).ready(function() {
/* For the sticky navigation */
$('.js--section-features').waypoint(function(direction) {
if (direction == "down") {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
}, {
offset: '60px;'
});
/* Scroll on buttons*/
$('.js--scroll-to-plans').click(function() {
$('html, body').animate({
scrollTop: $('.js--section-plans').offset().top
}, 1000);
});
$('.js--scroll-to-start').click(function() {
$('html, body').animate({
scrollTop: $('.js--section-features').offset().top
}, 1000);
});
/* Navigation scroll*/
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 2000);
return false;
}
}
});
/* Animations on scroll */
$('.js--wp-1').waypoint(function(direction) {
$('.js--wp-1').addClass('animated fadeIn');
}, {
offset: '50%'
});
$('.js--wp-2').waypoint(function(direction) {
$('.js--wp-2').addClass('animated fadeInUp');
}, {
offset: '50%'
});
$('.js--wp-3').waypoint(function(direction) {
$('.js--wp-3').addClass('animated fadeIn');
}, {
offset: '50%'
});
$('.js--wp-4').waypoint(function(direction) {
$('.js--wp-4').addClass('animated pulse');
}, {
offset: '50%'
});
/* Map */
var map = new GMaps({
div: '.map',
lat: 38.7436266,
lng: -9.07,
zoom: 12
});
map.addMarker({
lat: 38.7436266,
lng: -9.1602037,
title: 'Lima',
infoWindow: {
content: '<p>Our Lisbon Headquarters</p>'
}
});
});
<!Doctype HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Healthy foods is the #1 meal prep company in 2017!">
<link rel="stylesheet" type="text/css" href="css/v/normalize.css">
<link rel="stylesheet" type="text/css" href="css/v/grid.css">
<link rel="stylesheet" type="text/css" href="css/v/ionicons.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" type="text/css" href="css/r/style.css">
<link rel="stylesheet" type="text/css" href="css/r/queries.css">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel='stylesheet' type='text/css'>
<!-- Favicons -->
<link rel="apple-touch-icon" sizes="180x180" href="/img/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/img/favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/img/favicons/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/img/favicons/manifest.json">
<link rel="mask-icon" href="/img/favicons/safari-pinned-tab.svg">
<link rel="shortcut icon" href="/img/favicons/favicon.ico">
<meta name="msapplication-config" content="/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<!-- Favicons -->
<!-- Goolge Analytics -->
<!-- Goolge Analytics -->
<title>Healthy Foods</title>
</head>
<body>
<header>
<nav>
<div class="row">
<img src="img/logo-white.png" alt="Omni Food Logo" class="logo">
<img src="img/logo.png" alt="Omni Food Logo" class="logo-black">
<ul class="main-nav">
<li>Food delivery
</li>
<li>How it works
</li>
<li>Our cities
</li>
<li>Sign up
</li>
<li>Conact Us
</li>
</ul>
</div>
</nav>
<div class="hero-text-box">
<h1>Goodbye junk food.<br>Hello super healthy meals.</h1>
<a class="btn btn-full js--scroll-to-plans" href="#plans">I'm hungry</a>
<a class="btn btn-ghost js--scroll-to-start" href="#features">Show me more</a>
</div>
</header>
<!-- Food Fast Section Title -->
<section class="js--section-features" id="features">
<div class="row">
<center>
<h2>Get food fast — not fast food.</h2>
</center>
<p class="long-copy">
Hello, we’re Omnifood, your new premium food delivery service. We know you’re always busy. No time for cooking. So let us take care of that, we’re really good at it, we promise!
</div>
<!-- Get Food Fast Section Content -->
<br>
<div class="row js--wp-1">
<div class="col span-1-of-4 box">
<i class="ion-calendar icon-big"></i>
<h3>Up to 365 days/year</h3>
<p class="section-content">Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-clock icon-big"></i>
<h3>Ready in 20 minutes</h3>
<p class="section-content">You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy.
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-ios-nutrition icon-big"></i>
<h3>100% organic</h3>
<p class="section-content">All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better!
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-android-cart icon-big"></i>
<h3>Order anything</h3>
<p class="section-content">We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!
</p>
</div>
</div>
</section>
<!-- Get Food Fast Section Content -->
<!-- Favorite Meals Section -->
<section class="section-meals">
<!-- Row 1 -->
<ul class="meals-showcase clearfix">
<li>
<figure class="meal-photo">
<img src="img/1.jpg" alt="Korean bibimbap with egg and vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/2.jpg" alt="Simple italian pizza with cherry tomatoes">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/3.jpg" alt="Chicken breast steak with vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/4.jpg" alt="Autumn pumpkin soup">
</figure>
</li>
</ul>
<!-- Row 2 -->
<ul class="meals-showcase clearfix">
<li>
<figure class="meal-photo">
<img src="img/5.jpg" alt="Paleo beef steak with vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/6.jpg" alt="Healthy baguette with egg and vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/7.jpg" alt="Burger with cheddar and bacon">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/8.jpg" alt="Granola with cherries and strawberries">
</figure>
</li>
</ul>
</section>
<!-- Favorite Meals Section End -->
<!-- How it works Section -->
<section class="section-steps" id="works">
<div class="row">
<h2>How it works - Simple as 1, 2, 3</h2>
</div>
<div class="row">
<div class="col span-1-of-2 steps-box">
<img src="img/app-iPhone.png" alt="Omifood app on iPhone" class="app-screen js--wp-2">
</div>
<div class="col span-1-of-2 steps-box">
<div class="work-step">
<div>1</div>
<p>Choose the subscription plan that best fits your needs and sign up today.</p>
</div>
<div class="work-step">
<div>2</div>
<p>Order your delicious meal using our mobile app or website. Or you can even call us!</p>
</div>
<div class="work-step">
<div>3</div>
<p>Enjoy your meal after less than 20 minutes. See you the next time!</p>
</div>
<a href="#" class="btn-app">
<img src="img/download-app-android.png" alt="Play Store Button">
</a>
<a href="#" class="btn-app">
<img src="img/download-app-android.png" alt="Play Store Button">
</a>
</div>
</div>
<!-- How it works Section End -->
<section class="section-cities js--wp-3" id="cities">
<div class="row">
<h2>We're currently in these cities</h2>
</div>
<!-- Lisbon -->
<div class="row">
<div class="col span-1-of-4 box">
<img src="img/lisbon-3.jpg" alt="Lisbon">
<h3>Lisbon</h3>
<div class="city-feature">
<i class="ion-person icon-small"></i>
1600+ happy eaters
</div>
<div class="city-feature">
<i class="ion-ios-star icon-small"></i>
60+ top chefs
</div>
<div class="city-feature">
<i class="ion-social-twitter icon-small"></i>
#omnifood_lx
</div>
</div>
<!-- San Francisco -->
<div class="col span-1-of-4 box">
<img src="img/san-francisco.jpg" alt="San Francisco">
<h3>San Francisco</h3>
<div class="city-feature">
<i class="ion-person icon-small"></i>
+3700 happy eaters
</div>
<div class="city-feature">
<i class="ion-ios-star icon-small"></i>
160+ top chefs
</div>
<div class="city-feature">
<i class="ion-social-twitter icon-small"></i>
#omnifood_sf
</div>
</div>
<!-- Berlin -->
<div class="col span-1-of-4 box">
<img src="img/berlin.jpg" alt="Berlin">
<h3>Berlin</h3>
<div class="city-feature">
<i class="ion-person icon-small"></i>
+2300 happy eaters
</div>
<div class="city-feature">
<i class="ion-ios-star icon-small"></i>
110+ top chefs
</div>
<div class="city-feature">
<i class="ion-social-twitter icon-small"></i>
#omnifood_berlin
</div>
</div>
<!-- London -->
<div class="col span-1-of-4 box">
<img src="img/london.jpg" alt="London">
<h3>Berlin</h3>
<div class="city-feature">
<i class="ion-person icon-small"></i>
+1200 happy eaters
</div>
<div class="city-feature">
<i class="ion-ios-star icon-small"></i>
50+ top chefs
</div>
<div class="city-feature">
<i class="ion-social-twitter icon-small"></i>
#omnifood_london
</div>
</div>
</div>
</section>
<!-- Cities Section End -->
<!-- Testimonials Section Start -->
<section class="section-testimonials">
<div class="row">
<h2>Our customers can't live without us</h2>
</div>
<div class="row">
<div class="col span-1-of-3">
<blockquote>
Omnifood is just awesome! I just launched a startup which leaves me with no time for cooking, so Omnifood is a life-saver. Now that I got used to it, I couldn't live without my daily meals!
<cite><img src="img/customer-1.jpg" alt="Customer 1">Alberto Duncan</cite>
</blockquote>
</div>
<div class="col span-1-of-3">
<blockquote>
Inexpensive, healthy and great-tasting meals, delivered right to my home. We have lots of food delivery here in Lisbon, but no one comes even close to Omifood. Me and my family are so in love!
<cite><img src="img/customer-2.jpg" alt="Customer 2">Joana Silva</cite>
</blockquote>
</div>
<div class="col span-1-of-3">
<blockquote>
I was looking for a quick and easy food delivery service in San Franciso. I tried a lot of them and ended up with Omnifood. Best food delivery service in the Bay Area. Keep up the great work!
<cite><img src="img/customer-3.jpg" alt="Customer 3">Milton Chapman</cite>
</blockquote>
</div>
</div>
</section>
<!-- Testimonials Section End -->
<!-- Signup Section Start -->
<section class="section-plans js--section-plans" id="plans">
<div class="row">
<h2>Start eating healthy today</h2>
</div>
<div class="row">
<div class="col span-1-of-3">
<div class="plan-box js--wp-4">
<div>
<h3>Premium</h3>
<p class="plan-price">$399 <span>/ month</span>
</p>
<p class="plan-price-meal">That's only 13.30$ per meal</p>
</div>
<div>
<ul>
<li><i class="ion-ios-checkmark-empty icon-small"></i>1 meal every day</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Order 24/7</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Access to newest creations</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Free delivery</li>
</ul>
</div>
<div>
Sign up now
</div>
</div>
</div>
<div class="col span-1-of-3">
<div class="plan-box js--wp-4">
<div>
<h3>Pro</h3>
<p class="plan-price">$149 <span>/ month</span>
</p>
<p class="plan-price-meal">That's only 14.90$ per meal</p>
</div>
<div>
<ul>
<li><i class="ion-ios-checkmark-empty icon-small"></i>1 meal 10 days/month</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Order 24/7</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Access to newest creations</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Free delivery</li>
</ul>
</div>
<div>
Sign up now
</div>
</div>
</div>
<div class="col span-1-of-3">
<div class="plan-box js--wp-4">
<div>
<h3>Starter</h3>
<p class="plan-price">19$ <span>/ meal</span>
</p>
<p class="plan-price-meal"> </p>
</div>
<div>
<ul>
<li><i class="ion-ios-checkmark-empty icon-small"></i>1 meal</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Order from 8 am to 12 pm</li>
<li><i class="ion-ios-close-empty icon-small"></i>
</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Free delivery</li>
</ul>
</div>
<div>
Sign up now
</div>
</div>
</div>
</div>
</section>
<!-- Signup Section End -->
<!-- Form Section Section -->
<div class="map-box">
<div class="map"></div>
<div class="form-box" id="contact">
<div class="row">
<h2>We're happy to hear from you</h2>
</div>
<div class="row">
<form method="post" action="#" class="contact-form">
<div class="row">
<div class="col span-1-of-3">
<label for="name">Name</label>
</div>
<div class="col span-2-of-3">
<input type="text" name="name" id="name" placeholder="Your name" required>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label for="email">Email</label>
</div>
<div class="col span-2-of-3">
<input type="email" name="email" id="email" placeholder="Your email" required>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label for="find-us">How did you find us?</label>
</div>
<div class="col span-2-of-3">
<select name="find-us" id="find-us">
<option value="friends" selected>Friends</option>
<option value="search">Search engine</option>
<option value="ad">Advertisement</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label>Newsletter?</label>
</div>
<div class="col span-2-of-3">
<input type="checkbox" name="news" id="news" checked>Yes, please
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label>Drop us a line</label>
</div>
<div class="col span-2-of-3">
<textarea name="message" placeholder="Your message"></textarea>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label> </label>
</div>
<div class="col span-2-of-3">
<input type="submit" value="Send it!">
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Form Section End -->
<!-- Footer Start -->
<footer>
<div class="row">
<div class="col span-1-of-2">
<ul class="footer-nav">
<li>About us
</li>
<li>Blog
</li>
<li>Press
</li>
<li>iOS App
</li>
<li>Android App
</li>
</ul>
</div>
<div class="col span-1-of-2">
<ul class="social-icons">
<li><i class="ion-social-facebook"></i>
</li>
<li><i class="ion-social-twitter"></i>
</li>
<li><i class="ion-social-googleplus"></i>
</li>
<li><i class="ion-social-instagram"></i>
</li>
</ul>
</div>
</div>
<div class="row">
<p>
Healthy Foods © 2016-2017
</p>
</div>
</footer>
<!-- Footer End -->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>-->
<script src="js/jquery-3.1.1.slim.min.js"></script>
<script src="http://maps.google.com/maps/api/js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/gmaps.js"></script>
<script src="js/script.js"></script>
</body>
</html>

Please find below snippet just uncomment
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
this min js it'll required to other js work.
$(document).ready(function() {
debugger;
$('.js--section-features').waypoint(function(direction) {
if (direction == "down") {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
}, {
offset: '60px;'
});
/* Scroll on buttons*/
$('.js--scroll-to-plans').click(function() {
$('html, body').animate({
scrollTop: $('.js--section-plans').offset().top
}, 1000);
});
$('.js--scroll-to-start').click(function() {
$('html, body').animate({
scrollTop: $('.js--section-features').offset().top
}, 1000);
});
/* Navigation scroll*/
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 2000);
return false;
}
}
});
/* Animations on scroll */
$('.js--wp-1').waypoint(function(direction) {
$('.js--wp-1').addClass('animated fadeIn');
}, {
offset: '50%'
});
$('.js--wp-2').waypoint(function(direction) {
$('.js--wp-2').addClass('animated fadeInUp');
}, {
offset: '50%'
});
$('.js--wp-3').waypoint(function(direction) {
$('.js--wp-3').addClass('animated fadeIn');
}, {
offset: '50%'
});
$('.js--wp-4').waypoint(function(direction) {
$('.js--wp-4').addClass('animated pulse');
}, {
offset: '50%'
});
});
<script src="//code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<div class="row">
<img src="img/logo-white.png" alt="Omni Food Logo" class="logo">
<img src="img/logo.png" alt="Omni Food Logo" class="logo-black">
<ul class="main-nav">
<li>Food delivery
</li>
<li>How it works
</li>
<li>Our cities
</li>
<li>Sign up
</li>
<li>Conact Us
</li>
</ul>
</div>
</nav>
<div class="hero-text-box">
<h1>Goodbye junk food.<br>Hello super healthy meals.</h1>
<a class="btn btn-full js--scroll-to-plans" href="#plans">I'm hungry</a>
<a class="btn btn-ghost js--scroll-to-start" href="#features">Show me more</a>
</div>
</header>
<!-- Food Fast Section Title -->
<section class="js--section-features" id="features">
<div class="row">
<center>
<h2>Get food fast — not fast food.</h2>
</center>
<p class="long-copy">
Hello, we’re Omnifood, your new premium food delivery service. We know you’re always busy. No time for cooking. So let us take care of that, we’re really good at it, we promise!
</div>
<!-- Get Food Fast Section Content -->
<br>
<div class="row js--wp-1">
<div class="col span-1-of-4 box">
<i class="ion-calendar icon-big"></i>
<h3>Up to 365 days/year</h3>
<p class="section-content">Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-clock icon-big"></i>
<h3>Ready in 20 minutes</h3>
<p class="section-content">You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy.
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-ios-nutrition icon-big"></i>
<h3>100% organic</h3>
<p class="section-content">All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better!
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-android-cart icon-big"></i>
<h3>Order anything</h3>
<p class="section-content">We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!
</p>
</div>
</div>
</section>
<!-- Get Food Fast Section Content -->
<!-- Favorite Meals Section -->
<section class="section-meals">
<!-- Row 1 -->
<ul class="meals-showcase clearfix">
<li>
<figure class="meal-photo">
<img src="img/1.jpg" alt="Korean bibimbap with egg and vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/2.jpg" alt="Simple italian pizza with cherry tomatoes">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/3.jpg" alt="Chicken breast steak with vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/4.jpg" alt="Autumn pumpkin soup">
</figure>
</li>
</ul>
<!-- Row 2 -->
<ul class="meals-showcase clearfix">
<li>
<figure class="meal-photo">
<img src="img/5.jpg" alt="Paleo beef steak with vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/6.jpg" alt="Healthy baguette with egg and vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/7.jpg" alt="Burger with cheddar and bacon">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="img/8.jpg" alt="Granola with cherries and strawberries">
</figure>
</li>
</ul>
</section>
<!-- Favorite Meals Section End -->
<!-- How it works Section -->
<section class="section-steps" id="works">
<div class="row">
<h2>How it works - Simple as 1, 2, 3</h2>
</div>
<div class="row">
<div class="col span-1-of-2 steps-box">
<img src="img/app-iPhone.png" alt="Omifood app on iPhone" class="app-screen js--wp-2">
</div>
<div class="col span-1-of-2 steps-box">
<div class="work-step">
<div>1</div>
<p>Choose the subscription plan that best fits your needs and sign up today.</p>
</div>
<div class="work-step">
<div>2</div>
<p>Order your delicious meal using our mobile app or website. Or you can even call us!</p>
</div>
<div class="work-step">
<div>3</div>
<p>Enjoy your meal after less than 20 minutes. See you the next time!</p>
</div>
<a href="#" class="btn-app">
<img src="img/download-app-android.png" alt="Play Store Button">
</a>
<a href="#" class="btn-app">
<img src="img/download-app-android.png" alt="Play Store Button">
</a>
</div>
</div>
<!-- How it works Section End -->
<section class="section-cities js--wp-3" id="cities">
<div class="row">
<h2>We're currently in these cities</h2>
</div>
<!-- Lisbon -->
<div class="row">
<div class="col span-1-of-4 box">
<img src="img/lisbon-3.jpg" alt="Lisbon">
<h3>Lisbon</h3>
<div class="city-feature">
<i class="ion-person icon-small"></i>
1600+ happy eaters
</div>
<div class="city-feature">
<i class="ion-ios-star icon-small"></i>
60+ top chefs
</div>
<div class="city-feature">
<i class="ion-social-twitter icon-small"></i>
#omnifood_lx
</div>
</div>
<!-- San Francisco -->
<div class="col span-1-of-4 box">
<img src="img/san-francisco.jpg" alt="San Francisco">
<h3>San Francisco</h3>
<div class="city-feature">
<i class="ion-person icon-small"></i>
+3700 happy eaters
</div>
<div class="city-feature">
<i class="ion-ios-star icon-small"></i>
160+ top chefs
</div>
<div class="city-feature">
<i class="ion-social-twitter icon-small"></i>
#omnifood_sf
</div>
</div>
<!-- Berlin -->
<div class="col span-1-of-4 box">
<img src="img/berlin.jpg" alt="Berlin">
<h3>Berlin</h3>
<div class="city-feature">
<i class="ion-person icon-small"></i>
+2300 happy eaters
</div>
<div class="city-feature">
<i class="ion-ios-star icon-small"></i>
110+ top chefs
</div>
<div class="city-feature">
<i class="ion-social-twitter icon-small"></i>
#omnifood_berlin
</div>
</div>
<!-- London -->
<div class="col span-1-of-4 box">
<img src="img/london.jpg" alt="London">
<h3>Berlin</h3>
<div class="city-feature">
<i class="ion-person icon-small"></i>
+1200 happy eaters
</div>
<div class="city-feature">
<i class="ion-ios-star icon-small"></i>
50+ top chefs
</div>
<div class="city-feature">
<i class="ion-social-twitter icon-small"></i>
#omnifood_london
</div>
</div>
</div>
</section>
<!-- Cities Section End -->
<!-- Testimonials Section Start -->
<section class="section-testimonials">
<div class="row">
<h2>Our customers can't live without us</h2>
</div>
<div class="row">
<div class="col span-1-of-3">
<blockquote>
Omnifood is just awesome! I just launched a startup which leaves me with no time for cooking, so Omnifood is a life-saver. Now that I got used to it, I couldn't live without my daily meals!
<cite><img src="img/customer-1.jpg" alt="Customer 1">Alberto Duncan</cite>
</blockquote>
</div>
<div class="col span-1-of-3">
<blockquote>
Inexpensive, healthy and great-tasting meals, delivered right to my home. We have lots of food delivery here in Lisbon, but no one comes even close to Omifood. Me and my family are so in love!
<cite><img src="img/customer-2.jpg" alt="Customer 2">Joana Silva</cite>
</blockquote>
</div>
<div class="col span-1-of-3">
<blockquote>
I was looking for a quick and easy food delivery service in San Franciso. I tried a lot of them and ended up with Omnifood. Best food delivery service in the Bay Area. Keep up the great work!
<cite><img src="img/customer-3.jpg" alt="Customer 3">Milton Chapman</cite>
</blockquote>
</div>
</div>
</section>
<!-- Testimonials Section End -->
<!-- Signup Section Start -->
<section class="section-plans js--section-plans" id="plans">
<div class="row">
<h2>Start eating healthy today</h2>
</div>
<div class="row">
<div class="col span-1-of-3">
<div class="plan-box js--wp-4">
<div>
<h3>Premium</h3>
<p class="plan-price">$399 <span>/ month</span>
</p>
<p class="plan-price-meal">That's only 13.30$ per meal</p>
</div>
<div>
<ul>
<li><i class="ion-ios-checkmark-empty icon-small"></i>1 meal every day</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Order 24/7</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Access to newest creations</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Free delivery</li>
</ul>
</div>
<div>
Sign up now
</div>
</div>
</div>
<div class="col span-1-of-3">
<div class="plan-box js--wp-4">
<div>
<h3>Pro</h3>
<p class="plan-price">$149 <span>/ month</span>
</p>
<p class="plan-price-meal">That's only 14.90$ per meal</p>
</div>
<div>
<ul>
<li><i class="ion-ios-checkmark-empty icon-small"></i>1 meal 10 days/month</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Order 24/7</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Access to newest creations</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Free delivery</li>
</ul>
</div>
<div>
Sign up now
</div>
</div>
</div>
<div class="col span-1-of-3">
<div class="plan-box js--wp-4">
<div>
<h3>Starter</h3>
<p class="plan-price">19$ <span>/ meal</span>
</p>
<p class="plan-price-meal"> </p>
</div>
<div>
<ul>
<li><i class="ion-ios-checkmark-empty icon-small"></i>1 meal</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Order from 8 am to 12 pm</li>
<li><i class="ion-ios-close-empty icon-small"></i>
</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Free delivery</li>
</ul>
</div>
<div>
Sign up now
</div>
</div>
</div>
</div>
</section>
<!-- Signup Section End -->
<!-- Form Section Section -->
<div class="map-box">
<div class="map"></div>
<div class="form-box" id="contact">
<div class="row">
<h2>We're happy to hear from you</h2>
</div>
<div class="row">
<form method="post" action="#" class="contact-form">
<div class="row">
<div class="col span-1-of-3">
<label for="name">Name</label>
</div>
<div class="col span-2-of-3">
<input type="text" name="name" id="name" placeholder="Your name" required>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label for="email">Email</label>
</div>
<div class="col span-2-of-3">
<input type="email" name="email" id="email" placeholder="Your email" required>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label for="find-us">How did you find us?</label>
</div>
<div class="col span-2-of-3">
<select name="find-us" id="find-us">
<option value="friends" selected>Friends</option>
<option value="search">Search engine</option>
<option value="ad">Advertisement</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label>Newsletter?</label>
</div>
<div class="col span-2-of-3">
<input type="checkbox" name="news" id="news" checked>Yes, please
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label>Drop us a line</label>
</div>
<div class="col span-2-of-3">
<textarea name="message" placeholder="Your message"></textarea>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label> </label>
</div>
<div class="col span-2-of-3">
<input type="submit" value="Send it!">
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Form Section End -->
<!-- Footer Start -->
<footer>
<div class="row">
<div class="col span-1-of-2">
<ul class="footer-nav">
<li>About us
</li>
<li>Blog
</li>
<li>Press
</li>
<li>iOS App
</li>
<li>Android App
</li>
</ul>
</div>
<div class="col span-1-of-2">
<ul class="social-icons">
<li><i class="ion-social-facebook"></i>
</li>
<li><i class="ion-social-twitter"></i>
</li>
<li><i class="ion-social-googleplus"></i>
</li>
<li><i class="ion-social-instagram"></i>
</li>
</ul>
</div>
</div>
<div class="row">
<p>
Healthy Foods © 2016-2017
</p>
</div>
</footer>

Stylesheet not loading in Ionic Angular project

I am building a page using Ionic and Angular. I'm including the stylesheet at the top as you can see, but when the page loads, the styles are completely messed up, until I refresh the page. I am not sure what I'm doing wrong. Thanks in advance.
<link rel="stylesheet" type="text/css" href="css/event-nba.css">
<div ng-repeat="events in eventsList" class="events-bg">
<a>
<div class="event-box" ng-style="{'background-image':'url({{events.backgroundImage}})'}">
<div class="nba-event-team">
<span><img class="logos logo-margin" src="{{events.logo1}}"></span>
<span><img class="logos" src="{{events.logo2}}"></span>
</div>
<div class="nba-event-team">
<span class="team">{{events.eventDate}}</span>
</div>
<div class="nba-event-team">
<span class="team">{{events.eventLocation}}</span>
</div>
<div class="nba-event-team">
<img class="network-logo" src="{{events.networkLogo}}"></img>
</div>
<div class="nba-event-team">
<button class="button button-assertive bth-red">
TICKETS
</button>
</div>
</div>
<div class="preview-box">
<span class="preview-text">{{events.eventPreview}}</span>
</div>
<div class="gear-title-box">
<span class="gear-title-text">PICK UP GEAR FOR THE GAME</span>
</div>
<div class="row">
<div class="col col-45 card card-margin home-product-border">
<a href="#/tab/product-jacket">
<div class="item item-body">
<img class="full-image" src="img/nikesweatshirt200.png">
<p class="shop-product-box-text-margin">
Clothing
</p>
<h3 class="shop-product-box-text-margin">Nike Jacket <br>Elite Sports - Men's $79.99</h3>
</span>
<span><h3 class="shop-product-box-text-margin" style="color:red">Ships Free!
</h3></span>
</div>
</a>
</div>
<div class="col col-45 card card-margin home-product-border">
<a href="#/tab/product">
<div class="item item-body">
<img class="full-image" src="img/kobe xi.jpeg">
<p class="shop-product-box-text-margin">
Shoes
</p>
<h3 class="shop-product-box-text-margin">Nike Kobe 11 <br>Elite Low - Men's $199.99</h3>
</span>
<span><h3 class="shop-product-box-text-margin" style="color:red">Ships Free!
</h3></span>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col col-45 card card-margin home-product-border">
<a href="#/tab/product-uptime">
<div class="item item-body">
<img class="full-image" src="img/uptimebottle.png">
<p class="shop-product-box-text-margin">
Sport Supplements
</p>
<h3 class="shop-product-box-text-margin">UPTIME Energy <br>Original $4.39</h3>
</span>
<span><h3 class="shop-product-box-text-margin" style="color:red">Ships Free!
</h3></span>
</div>
</a>
</div>
<div class="col col-45 card card-margin home-product-border">
<a href="#/tab/product-nba">
<div class="item item-body">
<img class="full-image" src="img/lavinjersey.jpeg">
<p class="shop-product-box-text-margin">
Clothing
</p>
<h3 class="shop-product-box-text-margin">Lavine Jersery <br>NBA Black - Men's $99.99</h3>
</span>
<span><h3 class="shop-product-box-text-margin" style="color:red">Ships Free!
</h3></span>
</div>
</a>
</div>
</div>
</a>

So I found the answer. This stylesheet was using a few class names from a previous page, and that stylesheet had different css for those classes. The classes weren't being dumped before this page was loading, thus inheriting the other styles.

Using Spiderable in meteor duplicates head content before displaying html in body tags

I have been trying to figure out this strange problem I am having with my meteor site. I first thought it was a problem with Google not indexing but have investigated further to the point that I think I may be causing some sort of problem with the Spiderable package.
I am using meteor version 1.1.0.3. With the spiderable package installed as well as gadicohen:phantomjs, as recommended by meteorpedia.
The issue I am running into is that instead of creating a nice html page for Google it seems to duplicate the default head code multiple times, within a new head tag, before ending the new head tag and displaying the body and html content. The code is quite long so you can see the issue by visiting suleimanholdings.com?_escaped_fragment_= and viewing the page source.
I'm hoping someone may have an idea or suggestion of what I can do to stop the duplicating and correctly create an html version for google to crawl.
EDIT
The following is the code I use, with each template being fed between the body tags
<head>
<meta charset="UTF-8">
<title>Suleiman Holdings</title>
<link rel="icon" href="/favicon.ico?v=2">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
<script src="/prefixfree.min.js"></script>
<script src="/jquery.flexslider.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-62610011-1', 'auto');
ga('send', 'pageview');
</script>
EDIT 2
This is the template code from the homepage:
<template name="home">
{{> nav}}
<div style="overflow:hidden">
<div id="main" role="main">
<section class="slider">
<div class="flexslider">
<ul class="slides">
<div class="slider-bottom"></div>
<li style="background-image: url('/one-tech2.jpg');">
<div class="news" style="background-image : linear-gradient(to bottom, rgba(255,255,255, 0), rgba(255,255,255, .6) 20%);">
<h1>
One Technology Place
</h1>
<div class="news2">
<h2>
Acquired: February 2015
</h2>
<p>
Suleiman Holdings acquires the Nebraska Technology Park’s flagship office in a 3.3M cash transaction.
</p>
</div>
</div>
<div class="slider-bottom">
<div class="line" style="margin-left:0px; margin-right:10px;"></div>
<h3>
2015
</h3>
<div class="line" style="margin-left:80px"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</li>
<li style="background-image: url('/12thQ-inside2.jpg');">
<div class="news" style="background-image : linear-gradient(to bottom, rgba(255,255,255, 0), rgba(255,255,255, .6) 20%);">
<h1>
University of Nebraska
</h1>
<div class="news2">
<h2>
Leased: January 2015
</h2>
<p>
Suleiman Holdings welcomes the University of Nebraska College of Journalism and Mass Communications to Downtown Lincoln
</p>
</div>
</div>
<div class="slider-bottom">
<div class="line" style="margin-left:0px; margin-right:10px;"></div>
<h3>
2015
</h3>
<div class="line" style="margin-left:80px"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</li>
<li style="background-image: url('/interns.jpg');">
<div class="news" style="background-image : linear-gradient(to bottom, rgba(255,255,255, 0), rgba(255,255,255, .7) 20%);">
<h1>
Summer Internship Series
</h1>
<div class="news2">
<h2>
Starting Summer 2015
</h2>
<p>
Suleiman Holdings welcomes three interns to Lincoln for a summer of acquisitions and accounting.
</p>
</div>
</div>
<div class="slider-bottom">
<div class="line" style="margin-left:0px; margin-right:10px;"></div>
<h3>
2015
</h3>
<div class="line" style="margin-left:80px"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</li>
</ul>
</div>
</section>
</div>
</div>
{{> footer}}
</template>
This is the code for the nav template
<template name="nav">
<div class="logobox">
<div class="mainnavwrap">
<div class="menumain">
<a href="/">
<div style="position:absolute; height:50px; width:150px; top:0px; z-index:5500; margin-left:60px;"></div>
</a>
<ul style="/*position:absolute; width:400px; right:0;*/">
<!--<li>PRIVATE EQUITY</li>
<li>REAL ESTATE</li>-->
</ul>
</div>
</div>
<div class="toggleMobile">
<span class="menu1"></span>
<span class="menu2"></span>
<span class="menu3"></span>
</div>
<div class="logo2">
<img src="/logo-black.png">
</div>
<div id="mobileMenu">
<ul>
<a href="home">
<li>HOME</li>
</a>
<a href="real-estate">
<li>REAL ESTATE</li>
</a>
<a href="private-equity">
<li>PRIVATE EQUITY</li>
</a>
<li>ABOUT</li>
</ul>
</div>
</div>
</template>
And this is the code for the footer template
<template name="footer">
<div class="footer">
<span class="copyright">© Copyright 2015 Suleiman Holdings</span>
<div class="legal">
<span style="margin-left:20px; font-size:12px;">
About
Press
<!--Careers-->
<label class="btn" for="modal-1">Contact</label>
Legal
</span>
</div>
</div>
<input class="modal-state" id="modal-1" type="checkbox"/>
<div class="modal">
<label class="modal__bg" for="modal-1"></label>
<div class="modal__inner">
<label class="modal__close" for="modal-1"></label>
<div class="contact">
<div class="con-logo"><img src="/contact-logo.jpg"></div>
<p>
4665 Innovation Drive
<br>
Lincoln, Nebraska 68521
</p>
</div>
</div>
</div>
</template>

If you are using iron router you need to remove the body tag and the head tag from your html master template ( main || masterLayout || layout ) and leave just the {{> yield}}
Example:
<template name="masterLayout">
{{> navbar}}
<div class="container">
{{> yield}}
</div>
</template>

Categories

Resources