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
Related
This is HTML-code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div class="container-fluid">
<header>
<div id="menu" class="row no-gutter menu">
<div class="col-md-3 offset-md-1">
<img src="img/logo.png">
</div>
<div class="col-md-8">
<nav class="d-flex flex-row-reverse">
<ul class="p-2">
<li>
Improves
</li>
<li>
Projects
</li>
<li>
<a id="about" href="">About</a>
</li>
<li>
Home
</li>
</ul>
</nav>
</div>
</div>
<div class="row no-gutter">
<div class="hellopage">
<div class="col-md-10 offset-md-1 hello">
<font>
Hello.
</font>
<br>
<div class="mynameis">
My name is
<div class="name">
DENIS,
</div>
</div>
<div class="whoami">
I am a web-desihner, and front-end developer, and a person, who interested in IT.
</div>
<div class="quality">
Quality is a main parametr for me.
</div>
<div class="classcol-md-5 offset-md-4">
<button class="bnative1" id="button">
FOLLOW ME
</button>
</div>
</div>
</div>
</div>
</header>
<!-- Второй блок -->
<div class="container-fluid">
<div id="sb" class="row no-gutter sb">
<div class="col-md-6 offset-md-3 text-center whatcani">
What can I offer for you?
</div>
<div class="col-md-3 offset-md-1 pic1 ">
<img src="img/adopt.png">
<div class="txt1">
<div class="top1">Adaptive Web-Design</div>
<div>I always use adaptive</div>
<div>design.Usually,web-site</div>
<div>is an advertisment</div>
<div>for big set of companies.</div>
<div>It have to be focused on</div>
<div>client and must be</div>
<div>correctly displayed in all</div>
<div>devices</div>
</div>
</div>
<div class="col-md-3 offset-md-1 pic2">
<img src="img/hands.png">
<div class="txt2">
<div class="top2">Indivigual aproach</div>
<div>I always interact with</div>
<div>the customer and ready</div>
<div>to give some advice,</div>
<div>based on my experience</div>
<div>to make web-site better</div>
<div>and user-friendly</div>
</div>
</div>
<div class="col-md-3 offset-md-1 pic3">
<img src="img/calendar.png">
<div class="txt3">
<div class="top3">Completion on time</div>
<div>The project will be</div>
<div>compleated on time,</div>
<div>and a work plan will be</div>
<div>provided for the</div>
<div>customer</div>
</div>
</div>
<div class="col-md-8 offset-md-2 line">
<hr>
</div>
</div>
</div>
<!-- Третий блок -->
<div id="me" class="row no-gutter tb">
<div class="col-md-3 offset-md-4 text-center aboutme">
About me
</div>
<div class="col-md-10 offset-md-1 txtab">
<div>I started my career as a system administrator(2016). At work I</div>
<div>recieved a lot of skills, that helps me to deal every issue. Because</div>
<div>there are exist an issues, that you can't solve by using internet. For</div>
<div>example I worked with special software for MRI.</div>
</div>
<div class="col-md-4 offset-md-1 whiteone">
<img src="img/white.png">
</div>
<div class="col-md-6 nowi">
Now I am <span class="wd">WEB DESIGNER</span>
</div>
<div class="col-md-9 offset-md-1 person">
And a person, who ready to make <span class="cool">COOL</span> web-site for you.
</div>
<div class="col-md-4 offset-md-7 d-flex flex-row-reverse">
<img class="whitetwo" src="img/white.png">
</div>
</div>
<!-- Четвертый блок -->
<div class="row no-gutter fob">
<div class="col-md-5 offset-md-3 text-center inmy">
In my projects I use
</div>
<div class="col-md-4 offset-md-1 desone">
<img src="img/gapps.png">
<div class="tech1">
<div>I use graphical applications to</div>
<div>make a template for your website.</div>
<div>This is the first step. Here we can</div>
<div>coose a colors, that will be used</div>
<div>in web-site</div>
</div>
</div>
<div class="col-md-6 destwo">
<img src="img/site.png">
<div class="tech1">
<div>To make web-page, I use HTML,CSS, JS, Less. Here I</div>
<div>can make animation, that can make your website</div>
<div>alive.</div>
</div>
</div>
<div class="col-md-10 offset-md-1 technologies">
<div>I always <span class="devmy">DEVELOPE</span> myself, learn new technologies and</div>
</div>
<div class="col-md-4 offset-md-7 inmy"><span class="use">USE</span> it in my projects</div>
</div>
<!-- Футер -->
<div class="row no-gutter foot">
<div class="col-md-4 offset-md-1 social">
<img src="img/email.png">
den_lupanov#mail.ru
<div class="fb">
<img src="img/facebook.png">
https://www.facebook.com/den.necris
</div>
</div>
<div class="col-md-1 offset-md-5 gototop">
<img id="up" src="img/up.png">
</div>
</div>
</div>
</div>
</body>
</html>
'''
I have a code:
window.onload = function(){
// Изменение цвета при наведении на кнопку
var button = document.getElementById("button");
button.addEventListener("mouseenter", function(){
button.classList.remove("bnative1");
button.classList.add("buttonclass1");
});
button.addEventListener("mouseleave", function(){
button.classList.remove("buttonclass1");
button.classList.add("bnative1");
})
// Scroll to the first element(Works ok)
document.getElementById("button").addEventListener("click", scrollToElement);
function scrollToElement(e){
element = document.getElementById("sb");
element.scrollIntoView({behavior: 'smooth', block: "start",});
}
//Scroll to another element(ERROR)
document.getElementById("up").addEventListener("click", scrollToTop);
function scrollToTop(e){
top = document.getElementById("menu");
top.scrollIntoView({behavior: 'smooth', block: "start"});
}
}
'''
Finally, when I click on the second element for scrolling, in debugger I recieve an error:"Uncaught TypeError: top.scrollIntoView is not a function
at HTMLImageElement.scrollToTop (script.js:22)". It should works properly, but I don't understand why it doen not working
you just needed to define "top". add var and your code works!
window.onload = function(){
}
// Изменение цвета при наведении на кнопку
var button = document.getElementById("button");
button.addEventListener("mouseenter", function(){
button.classList.remove("bnative1");
button.classList.add("buttonclass1");
});
button.addEventListener("mouseleave", function(){
button.classList.remove("buttonclass1");
button.classList.add("bnative1");
})
// Scroll to the first element(Works ok)
document.getElementById("button").addEventListener("click", scrollToElement);
function scrollToElement(e){
element = document.getElementById("sb");
element.scrollIntoView({behavior: 'smooth', block: "start",});
}
//Scroll to another element(ERROR)
document.getElementById("up").addEventListener("click", scrollToTop);
function scrollToTop(e){
var top = document.getElementById("menu");
top.scrollIntoView({behavior: 'smooth', block: "start"});
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div class="container-fluid">
<header>
<div id="menu" class="row no-gutter menu">
<div class="col-md-3 offset-md-1">
<img src="img/logo.png">
</div>
<div class="col-md-8">
<nav class="d-flex flex-row-reverse">
<ul class="p-2">
<li>
Improves
</li>
<li>
Projects
</li>
<li>
<a id="about" href="">About</a>
</li>
<li>
Home
</li>
</ul>
</nav>
</div>
</div>
<div class="row no-gutter">
<div class="hellopage">
<div class="col-md-10 offset-md-1 hello">
<font>
Hello.
</font>
<br>
<div class="mynameis">
My name is
<div class="name">
DENIS,
</div>
</div>
<div class="whoami">
I am a web-desihner, and front-end developer, and a person, who interested in IT.
</div>
<div class="quality">
Quality is a main parametr for me.
</div>
<div class="classcol-md-5 offset-md-4">
<button class="bnative1" id="button">
FOLLOW ME
</button>
</div>
</div>
</div>
</div>
</header>
<!-- Второй блок -->
<div class="container-fluid">
<div id="sb" class="row no-gutter sb">
<div class="col-md-6 offset-md-3 text-center whatcani">
What can I offer for you?
</div>
<div class="col-md-3 offset-md-1 pic1 ">
<img src="img/adopt.png">
<div class="txt1">
<div class="top1">Adaptive Web-Design</div>
<div>I always use adaptive</div>
<div>design.Usually,web-site</div>
<div>is an advertisment</div>
<div>for big set of companies.</div>
<div>It have to be focused on</div>
<div>client and must be</div>
<div>correctly displayed in all</div>
<div>devices</div>
</div>
</div>
<div class="col-md-3 offset-md-1 pic2">
<img src="img/hands.png">
<div class="txt2">
<div class="top2">Indivigual aproach</div>
<div>I always interact with</div>
<div>the customer and ready</div>
<div>to give some advice,</div>
<div>based on my experience</div>
<div>to make web-site better</div>
<div>and user-friendly</div>
</div>
</div>
<div class="col-md-3 offset-md-1 pic3">
<img src="img/calendar.png">
<div class="txt3">
<div class="top3">Completion on time</div>
<div>The project will be</div>
<div>compleated on time,</div>
<div>and a work plan will be</div>
<div>provided for the</div>
<div>customer</div>
</div>
</div>
<div class="col-md-8 offset-md-2 line">
<hr>
</div>
</div>
</div>
<!-- Третий блок -->
<div id="me" class="row no-gutter tb">
<div class="col-md-3 offset-md-4 text-center aboutme">
About me
</div>
<div class="col-md-10 offset-md-1 txtab">
<div>I started my career as a system administrator(2016). At work I</div>
<div>recieved a lot of skills, that helps me to deal every issue. Because</div>
<div>there are exist an issues, that you can't solve by using internet. For</div>
<div>example I worked with special software for MRI.</div>
</div>
<div class="col-md-4 offset-md-1 whiteone">
<img src="img/white.png">
</div>
<div class="col-md-6 nowi">
Now I am <span class="wd">WEB DESIGNER</span>
</div>
<div class="col-md-9 offset-md-1 person">
And a person, who ready to make <span class="cool">COOL</span> web-site for you.
</div>
<div class="col-md-4 offset-md-7 d-flex flex-row-reverse">
<img class="whitetwo" src="img/white.png">
</div>
</div>
<!-- Четвертый блок -->
<div class="row no-gutter fob">
<div class="col-md-5 offset-md-3 text-center inmy">
In my projects I use
</div>
<div class="col-md-4 offset-md-1 desone">
<img src="img/gapps.png">
<div class="tech1">
<div>I use graphical applications to</div>
<div>make a template for your website.</div>
<div>This is the first step. Here we can</div>
<div>coose a colors, that will be used</div>
<div>in web-site</div>
</div>
</div>
<div class="col-md-6 destwo">
<img src="img/site.png">
<div class="tech1">
<div>To make web-page, I use HTML,CSS, JS, Less. Here I</div>
<div>can make animation, that can make your website</div>
<div>alive.</div>
</div>
</div>
<div class="col-md-10 offset-md-1 technologies">
<div>I always <span class="devmy">DEVELOPE</span> myself, learn new technologies and</div>
</div>
<div class="col-md-4 offset-md-7 inmy"><span class="use">USE</span> it in my projects</div>
</div>
<!-- Футер -->
<div class="row no-gutter foot">
<div class="col-md-4 offset-md-1 social">
<img src="img/email.png">
den_lupanov#mail.ru
<div class="fb">
<img src="img/facebook.png">
https://www.facebook.com/den.necris
</div>
</div>
<div class="col-md-1 offset-md-5 gototop">
<img id="up" src="img/up.png">
</div>
</div>
</div>
Other than using it like that it might be better to make it one function and use it in the HTML.
The following code should work like a charm:
function scrollSmoothTo(elementId) {
var element = document.getElementById(elementId);
element.scrollIntoView({ block: 'start', behavior: 'smooth' });
}
And, in HTML use it like that:
<a class="btn-outline-light" onclick="scrollSmoothTo('work')">See our work</a>
There is a site (http://f0347217.xsph.ru/about.html) on which, when first run at resolutions above 1920, the layout at the first load is displayed incorrectly - the font, leading, and distance between objects are reduced. At the same time, when you move around the site for a while and return to the original page, everything returns to normal. The site is written in fullpage js. codepen link https://codepen.io/RukUndead/pen/xxxzEKZ
<!DOCTYPE html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content="text/html; charset=UTF-8">
<meta charset=UTF-8>
<meta name=viewport content="width=device-width, initial-scale=1">
<meta http-equiv=Content-Type content="text/html; charset=utf-8" />
<script type=text/javascript src=https://ajax.googleapis.com/ajax/libs/jquery//2.2.0/jquery.min.js></script>
<link rel=stylesheet id=six_mainstyle-css href=./artfiles/mainbig.css type=text/css media=all>
<link rel=icon href=favicon.ico type=image/x-icon>
<link rel="shortcut icon" href=favicon.ico type=image/x-icon>
<link rel=stylesheet href=https://use.fontawesome.com/releases/v5.0.13/css/all.css integrity=sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp crossorigin=anonymous>
<link rel=stylesheet href=https://unpkg.com/swiper/css/swiper.min.css>
<link rel=stylesheet href=./artfiles/fullpage.css>
<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/animsition/4.0.2/css/animsition.min.css>
<title>About</title>
<style media=screen>.bg-init,.animsition-overlay-slide{background:#f3f2ed;z-index:9999}.overlay-slide-in-left{background:#f3f2ed;z-index:9999}</style>
</head>
<body class=bg-init id=clrmen>
<div class=animsition-overlay>
<nav class="l-nav pushy pushy-left">
<ol>
<ul id=menu-primary-menu class=l-nav__menu>
<p><li id=linkin><a id=linkinclr4 class=animsition-link href=gallery.html data-animsition-out-class=overlay-slide-out-left><div class=ml>Gallery</div></a></li></p>
<p><li id=linkin><a id=linkinclr2 class=animsition-link href=about.html data-animsition-out-class=overlay-slide-out-left><div class=ml>About</div></a></li></p>
<p><li id=linkin><a id=linkinclr3 class=animsition-link href=courses.html data-animsition-out-class=overlay-slide-out-left><div class=ml>Courses</div></a></li></</p>
<p><li id=menu-item-615 class="js-site-underlay-trigger menu-item menu-item-type-post_type menu-item-object-page menu-item-615"><a href=https://www.artimpress.com/about.html/><div class=ml>Contact</div></a></li></p>
</ul>
<ul class="l-nav__menu l-nav__menu--secondary">
<div class=l-nav__logo>
<img src=./img/artlogom.png></div>
</li>
</ul>
</nav>
<div class="site-burger site-burger--left [ menu-btn ]" data-pushy-dir=left>
<span></span>
<span></span>
<span></span>
</div>
<div class=site-transition></div>
<div class=site-transition__inner>
</div>
<div class=site-overlay></div>
<div class=site-underlay>
<div class=site-underlay__close>
<div class=c-close><span></span><span></span></div>
</div>
<div class=site-underlay__content>
<div class=row>
<div class="columns small-20 medium-offset-9 medium-11 xlarge-offset-8 xlarge-12 xlarge-offset-11 xlarge-9 xxlarge-offset-13 xxlarge-7">
<div class=m-page>
<ul>
<p style=font-family:Thin><strong>Address</strong></p>
<p>Saint-Peterburg,</p>
<p>Mokhovaya str. 42</p>
<p> Metro st. Gostiny Dvor</strong></p>
<div class=cont><p style=font-family:Thin><strong>Contact</strong></p>
<p>impress.art#yandex.ru </p></div>
<div class="circle-effect circle-effect-1a"><div class=block010>
</i></div>
</i></i></div>
<div class=circle><i class="fab fa-instagram"></i></div>
</i></div>
</i></i></div>
</i></i></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class=site-mark>
</div>
</div>
</div>
<div id="myContainer">
<div class="section">
<div class="slide"><div class="txtblock1">
<div class="textline"></div>
<div class="fadeInM1"><h1> About</h1></div>
<div class="fadeInM2"><h3>Direction</h3></div>
<div class="fadeInM3"><p>The Art Impress is a private international art school where you can get knowledge and skills in classical visual arts:</p>
<ul><li>• Academic drawing;</li>
<li>• Academic painting;</li>
<li>• Academic sculpture;</li>
<li>• Analogue photography<br>   and cinematography.</li></ul></div>
</div><div class="nmrblock2"><div class="fadeInM3" style="color: #cdccc8;">01</div></div>
<div class="fadeInM3"><div class="imgblock1">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/about-01.jpg" ></div>
<div class="swiper-slide"><img src="./img/about-01.2.jpg" ></div>
</div>
<div class="swiper-pagination"></div>
</div>
</div></div>
</div></div>
<div class="section" >
<div class="slide"><div class="txtblock" >
<div class="textline"></div>
<h1> About</h1>
<h3>Tutors</h3>
<p> During your studies in The Art Impress you can develop your artistic skills and rapidly upgrade your professional art competencies in our powerful environment consisted of well-trained students and highly qualified tutors. Our tutors are graduates of The Saint-Petersburg State Repin Academic Institute of Painting, Sculpture and Architecture.</p>
</div><div class="nmrblock2">02</div>
<div class="imgblock">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/about-02.jpg" ></div>
<div class="swiper-slide"><img src="./img/about-02.2.jpg" ></div>
</div>
<div class="swiper-pagination"></div>
</div>
</div></div>
<div class="slide"><div class="txtblock">
<div class="textline"></div>
<h1> About</h1>
<h3>Objective</h3>
<p>Our mission is valuable knowledge transfer from professional instructor to student in face-to-face communication.</p>
</div><div class="nmrblock2">03</div>
<div class="imgblock">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/about-3.2.jpg" ></div>
<div class="swiper-slide"><img src="./img/about-3.3.jpg" ></div>
</div>
<div class="swiper-pagination"></div>
</div>
</div></div>
<div class="slide"><div class="txtblock">
<div class="textline"></div>
<h1> About</h1>
<h3>Education</h3>
<p>Every syllabus is tailor-made, it depends on your goals and level of training:</p>
<ul>
<li>• Advanced training</li>
<li>• Requalification</li>
<li>• Hobby for your soul</li>
<li>• Entrance exam preparation <br>   for institutes of fine arts</li></ul>
</div><div class="nmrblock2">04</div>
<div class="imgblock">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/about-04.jpg" ></div>
<div class="swiper-slide"><img src="./img/about-4.2.jpg" ></div>
</div>
<div class="swiper-pagination"></div>
</div>
</div></div>
</div>
<div class="section"><div class="fadeInM1">
<div class="slide"><div class="txtblock4">
<div class="textline"></div>
<h1> About</h1>
<h3></h3>
<p>In The Art Impress there are classes on regular bases and also intensive sessions are available if you come to Saint-Petersburg from other regions of Russia or from abroad for a limited time. Classes take place in our studio, museums of Saint-Petersburg and plein air. In The Art Impress you study with complete immersion in creative educational environment and gain considerable experience in fine arts.</p>
</div><div class="nmrblock3">05</div>
<div class="imgblock3">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/about-05.jpg" ></div>
<div class="swiper-slide"><img src="./img/about-5.2.jpg" ></div>
</div>
<div class="swiper-pagination"></div>
</div>
</div></div>
<div class="slide">
<div class="imgblock3">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/about-01.3.jpg" ></div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<div class="fadeInM2"><div class="txtblock3">
<div class="fl1">To be cultured,</div><div class="fl2">Is to be relevant</div>
<div class="fl3"> Saint-Peterburg
<br>
Mokhovaya str. 42 <br>Metro st. Gostiny Dvor <br><br>impress.art#yandex.ru</div>
<div class="l-nav__logo2">
<img src="./img/artlogo.png " >
</div>
<p></p>
<div class="circle-effect circle-effect-1a"><div class="icons">
<div class="circle"><i class="fab fa-twitter"></i></div>
<div class="circle"><i class="fab fa-facebook-f"></i></i></div>
<div class="circle"><i class="fab fa-instagram"></i></div>
<div class="circle"><i class="fab fa-youtube" ></i></div>
<div class="circle"><i class="fab fa-vk"></i></i></div>
<div class="circle"><i class="fab fa-telegram-plane"></i></i></div></div>
</div>
</div>
</div>
</div>
<script type=text/javascript src=fullpage.scrollHorizontally.min.js></script>
<script type=text/javascript src=https://unpkg.com/fullpage.js/dist/fullpage.extensions.min.js></script>
<script type=text/javascript>new fullpage("#myContainer",{sectionsColor:["#f3f2ed","#5c5d62","#5c5d62","#5c5d62","#5c5d62","#f3f2ed"],anchors:["firstPage","secondPage","3rdPage","4thpage"],menu:"#menu",slidesNavigation:false,scrollBar:false,licenseKey:"INSERT YOUR FULLPAGE LICENSE KEY HERE",controlArrows:false,keyboardScrolling:false,scrollHorizontally:true,scrollHorizontallyKey:"71E55697-D9CA4722-B12417FB-6467B0C3",normalScrollElements:".scrollable-content",});</script>
<script type=text/javascript src=./artfiles/mainbig.js></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/animsition/4.0.2/js/animsition.min.js integrity="sha256-8y2mv4ETTGZLMlggdrgmCzthTVCNXGUdCQe1gd8qkyM=" crossorigin=anonymous></script>
<script src=https://unpkg.com/swiper/js/swiper.min.js></script>
<script>var swiper=new Swiper(".swiper-container",{speed:3600,pagination:{el:".swiper-pagination",},autoplay:{delay:5000,},});</script>
<script>$(document).ready(function(){$(".animsition-overlay").animsition({inClass:"overlay-slide-in-left",outClass:"overlay-slide-out-left",overlay:true,overlayClass:"animsition-overlay-slide",overlayParentElement:"body"}).one("animsition.inStart",function(){$("body").removeClass("bg-init");$(this).find(".item").append('<h2 class="target">Callback: Start</h2>');console.log("event -> inStart")}).one("animsition.inEnd",function(){$(".target",this).html("Callback: End");console.log("event -> inEnd")})});</script><script>
$(document).ready(function() {
$('.animsition-overlay').animsition({
inClass: 'overlay-slide-in-left',
overlay : false,
overlayClass : 'animsition-overlay-slide',
overlayParentElement : 'body'
})
.one('animsition.inStart',function(){
$('body').removeClass('bg-init');
$(this)
.find('.item')
.append('<h2 class="target">Callback: Start</h2>');
console.log('event -> inStart');
})
.one('animsition.inEnd',function(){
$('.target', this).html('Callback: End');
console.log('event -> inEnd');
});
});
</script>
<script>
$( "#linkinclr" ).click(function( event ) {
event.preventDefault();
$( "#clrmen" ).fadeOut(900);
});
$( "#linkinclr2" ).click(function( event ) {
event.preventDefault();
$( "#clrmen" ).fadeOut(900);
});
$( "#linkinclr3" ).click(function( event ) {
event.preventDefault();
$( "#clrmen" ).fadeOut(900);
});
$( "#linkinclr4" ).click(function( event ) {
event.preventDefault();
$( "#clrmen" ).fadeOut(900);
});
</script>
</body>
</html>
Please check the sequence of file gets load.
Make sure your css should load first and at last you can load your js files
I have created a One page website, with a scroll down navbar. Meaning if I click on one of the links, the webpage will scroll down to the section based on which link was clicked on. The problem is if I were to click on the last navbar link which is contact us, the webpage will scroll all the way to the bottom of the page which it is supposed to do, however it buffers/or stalls at one point(meaning it does not scroll smoothly). How do I fix this?
I am using the latest version of google chrome.
The scrolling stall happens near the services section of the webpage. This only happens if I land on the page the first time or if I refresh the page. If I were to click on contact us, then go back to the top of the page where the navbar is located, and do this again, I do not get a scroll stall.
Below is the html code-
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 traditional//EN">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=`device-width`, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
$('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
}, 950);
return false;
}
}
});
});
</script>
<link href='https://fonts.googleapis.com/css?family=Cabin:700' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
</head>
<body>
<div class="bg">
<div class="topnav">
<a class="active" href="#Home">Home</a>
Who
Services
Portfolio
Contact
</div>
</div>
<div class="Who">
<h1 id="Who">Who are we ?</h1>
<p class="whodesc">Cabin is a website theme I created to demonstrate my skills as a front-end web developer. This website uses stock photos free of property and commercial rights.
</p>
<p class="whodesc">Cabin is a single page website that uses a scrollspy to navigate to different sections of the website.
</p>
<p class="whodesc">
Cabin is seperated into different sections, the first being home page with Navbar. Following straight after is the Who are we section which details what this website is about. After that we have a portfolio section where I have created an image gallery
with modal popup. When the user clicks on an image, a model is shown with both an image and brief description of the property.
</p>
<p class="whodesc">
Following after the portfolio section, the user is now brought over to see our services. Here we describe to the viewer/user what we do etc....
</p>
<p class="whodesc">
After scrolling some more, the user is then brought to our contact us page, which has a contact form. This contact form is split into a two columns, the first housing the google maps api, the second showing contact us form.
</p>
<p class="whodesc">Lastly we have the footer...</p>
<div class="Services">
<h1 id="Services">Services</h1>
<div class="leftcol">
<h2>Design/Build</h2>
<span>Design–build (or design/build, and abbreviated D–B or D/B accordingly) is a project delivery system used in the construction industry. It is a method to deliver a project in which the design and construction services are contracted by a single entity known as the design–builder or design–build contractor.
</p>
</div>
<div>
<img src="houseOne.jpeg" class="img" alt="" >
</div><div class="rightcol">
<h2>Pre-construction Design and Estimating</h2>
<span>Design–build (or design/build, and abbreviated D–B or D/B accordingly) is a project delivery system used in the construction industry. It is a method to deliver a project in which the design and construction services are contracted by a single entity known as the design–builder or design–build contractor.
</p>
</div>
<div>
<img src="design.jpg" class="img" alt="" ></div><div class="leftcol">
<h2>Construction Services</h2>
<span>Design–build (or design/build, and abbreviated D–B or D/B accordingly) is a project delivery system used in the construction industry. It is a method to deliver a project in which the design and construction services are contracted by a single entity known as the design–builder or design–build contractor.
</p>
</div>
<div><img src="construction.jpeg" class="img" alt="" ></div>
</div>
<div class="Portfolio">
<h1 id="Portfolio">Portfolio</h1>
<div class="row">
<div class="column">
<div class="content">
<img src="picOne.jpg" class="thumbnail" alt="" style="width:100%">
<h3>26 Elgin Street</h3>
<p>Click picture for more information</p>
</div>
</div>
<div class="column">
<div class="content">
<img src="picTwo.jpg" class="thumbnail" alt="" style="width:100%">
<h3>26 Elgin Street</h3>
<p>Click picture for more information</p>
</div>
</div>
<div class="column">
<div class="content">
<img src="picThree.jpg" class="thumbnail" alt="" style="width:100%">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="column">
<div class="content">
<img src="picFour.jpg" class="thumbnail" alt="" style="width:100%">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="content">
<img src="picOne.jpg" class="thumbnail" alt="" style="width:100%">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="column">
<div class="content">
<img src="picTwo.jpg" class="thumbnail" alt="" style="width:100%">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="column">
<div class="content">
<img src="picThree.jpg" class="thumbnail" alt="" style="width:100%">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="column">
<div class="content">
<img src="picFour.jpg" class="thumbnail" alt="" style="width:100%">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
</div>
</div>
<div class="Contactus">
<h1 id="Contact">Contact Us</h1>
<div class="con">
<div style="text-align:Center">
<h3>Contact Form</h3>
<div style="text-align:Center">
<div style="text-align:left">
<div class="rws">
<div class="cols">
<div id="map" style="width:100%;height:500px"></div>
</div>
<div class="cols">
<form action="/action_page.php">
<label class="fname" for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label class="email" for="email">Email</label>
<input type="text" id="email" name="email" placeholder="Your email....">
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:170px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p id="ft">Website created by Andrew B <br> Date created: 03/04/2016</p>
</div>
</div>
</body>
<script>
function myMap() {
var myCenter = new google.maps.LatLng(25.7616798, -80.1917902);
var mapCanvas = document.getElementById("map");
var mapOptions = {
center: myCenter,
zoom: 12
};
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({
position: myCenter
});
marker.setMap(map);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDlu8CXtmhjEntaf3I_IS0dMJQDRFvpw6U&callback=myMap"></script>
</html>
Okay so my website has a video in the background of the actual content, example can be seen at my site here:
http://www.thespire.net/
How would I go around placing an image OVER the video while the video is still playing? I've tried incorporating it in JavaScript and within some of the tags but it always messes up the formatting of my webpage.
HTML:
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<head>
<link rel="stylesheet" type="text/css" href="homepage.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link href='https://fonts.googleapis.com/css?family=Poppins:400,600' rel='stylesheet' type='text/css'>
<title>The Spire Network | Home</title>
</head>
<body>
<div class="header_wrapper">
<div class="header">
<ul>
<li>HOME</li>
<li>STORE</li>
<li>FORUMS</li>
</ul>
</div>
<div class="logo">
<a href="http://www.thespire.net/forums">
<img src="spirelogo.png" alt="LOGO" height="120px" width="120px" style="margin-left: 50px; margin-top: -25px; text-decoration: none; color: white;">
</a>
</div>
</div>
<div id="subheader" class="section bot light">
<div class="info">
</div>
<video poster="background.jpg" autoplay loop class="bgimage">
<source src="opvp.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>
</div>
<div class="container">
<div class="section both light">
<div class="content_wrapper">
<div class="section group">
<div class="col span_4_of_4">
<h1>Welcome to The Spire Network!</h1>
<p>The Spire Network is one of the most ambitious servers in all of Minecraft. We have a wide range of plugins and features that will keep you greatly entertained! We also offer a wide-range of donation perks which are available on our donation page which you can purchase to support the server and get yourself some awesome rewards for showing your appreciation and supporting us in this great endeavor!<br>Why not check out The Spire Network by placing IP address found below into your Minecraft Client!</p>
<input type="text" value="mc.thespire.net" class="address_input" readonly></input>
</div>
</div>
</div>
</div>
<div class="section both dark">
<div class="content_wrapper">
<div class="section group">
<div class="col span_2_of_4 left">
<h1>Get the most of the server with ranks!</h1>
<p>Ranks in The Spire Network are the things that define you from other players, they show that you individually have stepped up and supported the server by donating! If you are interested in supporting the server, click the "Donate Now" button to get started!</p>
Donate now
</div>
<div class="col span_2_of_4">
</div>
</div>
</div>
</div>
<div class="section both light">
<div class="content_wrapper">
<div class="section group">
<div class="col span_2_of_4">
</div>
<div class="col span_2_of_4 left">
<h1>Looking for support?</h1>
<p>Didn't recieve your donation? Did you get banned without any reason or for something you didn't do? Did someone harass you or bully you and wasn't punished for it? Visit our TeamSpeak or click the button below to contact a member of staff about the problem you have and we will be more than happy to help.</p>
Get help
</div>
</div>
</div>
</div>
<div class="section both dark">
<div class="content_wrapper">
<div class="section group">
<div class="col span_4_of_4 center">
<h1>Got a great idea for our server?</h1>
<p>Ideas are great for the server! New ideas open up many different paths for the server and give you, the player, a new objective to aim for! Suggestions can be anything from new plugin suggestions to ways our website could be improved! Click the button below to send a recommendation for the server!</p>
Submit your idea
</div>
</div>
</div>
</div>
</div>
</body>
</html>
i can see that you have a div called info :
<div class="info"> </div>
if you add this css:
.info {
background: rgba(0, 0, 0, 0) url("http://www.thespire.net/spirelogo.png") no-repeat scroll 0 0;
}
If you want to fully cover the slider then you need more customization.
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>