I tried to use a template HTML5 web site as view of my ASP.NET MVC 4 application. This template is here: http://html5up.net/helios/
Unfortunately I have some problem with this. I tried to put the main frame of these templates on my _layout page. Also I put other parts in index.chtml.
The problem is when I run the program, Visual Studio says there is an unhandled exception in skel.min.js which is:
this.insertBefore(b,a.me)
My _layout page is here:
<head>
<meta charset="utf-8" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600" rel="stylesheet" type="text/css" />
<!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
<script src="#Url.Content("~/Scripts/js/jquery.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/js/jquery.dropotron.js")"type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/js/skel.min.js")"type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/js/skel-panels.min.js")"type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/js/init.js")"type="text/javascript"></script>
<noscript>
<link rel="stylesheet" href="#Url.Content("~/Content/skel-noscript.css")" type="text/css"/>
<link rel="stylesheet" href="#Url.Content("~/Content/style.css")" type="text/css"/>
<link rel="stylesheet" href="#Url.Content("~/Content/style-desktop.css")" type="text/css"/>
<link rel="stylesheet" href="#Url.Content("~/Content/style-noscript.css")" type="text/css"/>
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie8.css" /><![endif]-->
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body class="homepage">
<!-- Header -->
<div id="header">
<!-- Inner -->
<div class="inner">
<header>
<h1>Helios</h1>
<hr />
<span class="byline">Another fine freebie by HTML5 UP</span>
</header>
<footer>
Start
</footer>
</div>
<!-- Nav -->
<nav id="nav">
<ul>
<li>Home</li>
<li>
<span>Dropdown</span>
<ul>
<li>Lorem ipsum dolor</li>
<li>Magna phasellus</li>
<li>Etiam dolore nisl</li>
<li>
<span>And a submenu …</span>
<ul>
<li>Lorem ipsum dolor</li>
<li>Phasellus consequat</li>
<li>Magna phasellus</li>
<li>Etiam dolore nisl</li>
</ul>
</li>
<li>Veroeros feugiat</li>
</ul>
</li>
<li>Left Sidebar</li>
<li>Right Sidebar</li>
<li>No Sidebar</li>
</ul>
</nav>
</div>
<div>
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<!-- Footer -->
<div id="footer">
<div class="container">
<div class="row">
<!-- Tweets -->
<section class="4u">
<header>
<h2 class="icon icon-twitter circled"><span>Tweets</span></h2>
</header>
<ul class="divided">
<li>
<article class="tweet">
Amet nullam fringilla nibh nulla convallis tique ante sociis accumsan.
<span class="timestamp">5 minutes ago</span>
</article>
</li>
<li>
<article class="tweet">
Hendrerit rutrum quisque.
<span class="timestamp">30 minutes ago</span>
</article>
</li>
<li>
<article class="tweet">
Curabitur donec nulla massa laoreet nibh. Lorem praesent montes.
<span class="timestamp">3 hours ago</span>
</article>
</li>
<li>
<article class="tweet">
Lacus natoque cras rhoncus curae dignissim ultricies. Convallis orci aliquet.
<span class="timestamp">5 hours ago</span>
</article>
</li>
</ul>
</section>
<!-- Posts -->
<section class="4u">
<header>
<h2 class="icon icon-file circled"><span>Posts</span></h2>
</header>
<ul class="divided">
<li>
<article class="post stub">
<header>
<h3>Nisl fermentum integer</h3>
</header>
<span class="timestamp">3 hours ago</span>
</article>
</li>
<li>
<article class="post stub">
<header>
<h3>Phasellus portitor lorem</h3>
</header>
<span class="timestamp">6 hours ago</span>
</article>
</li>
<li>
<article class="post stub">
<header>
<h3>Magna tempus consequat</h3>
</header>
<span class="timestamp">Yesterday</span>
</article>
</li>
<li>
<article class="post stub">
<header>
<h3>Feugiat lorem ipsum</h3>
</header>
<span class="timestamp">2 days ago</span>
</article>
</li>
</ul>
</section>
<!-- Photos -->
<section class="4u">
<header>
<h2 class="icon icon-camera circled"><span>Photos</span></h2>
</header>
<div class="row quarter no-collapse">
<div class="6u">
<img src="../../images/pic10.jpg" alt="" />
</div>
<div class="6u">
<img src="../../images/pic11.jpg" alt="" />
</div>
</div>
<div class="row quarter no-collapse">
<div class="6u">
<img src="../../images/pic12.jpg" alt="" />
</div>
<div class="6u">
<img src="../../images/pic13.jpg" alt="" />
</div>
</div>
<div class="row quarter no-collapse">
<div class="6u">
<img src="../../images/pic14.jpg" alt="" />
</div>
<div class="6u">
<img src="../../images/pic15.jpg" alt="" />
</div>
</div>
</section>
</div>
<hr />
<div class="row">
<div class="12u">
<!-- Contact -->
<section class="contact">
<header>
<h3>Nisl turpis nascetur interdum?</h3>
</header>
<p>Urna nisl non quis interdum mus ornare ridiculus egestas ridiculus lobortis vivamus tempor aliquet.</p>
<ul class="icons">
<li><span>Twitter</span></li>
<li><span>Facebook</span></li>
<li><span>Google+</span></li>
<li><span>Pinterest</span></li>
<li><span>Dribbble</span></li>
<li><span>Linkedin</span></li>
</ul>
</section>
<!-- Copyright -->
<div class="copyright">
<ul class="menu">
<li>© Untitled. All rights reserved.</li>
<li>Design: HTML5 UP</li>
<li>Demo images: Michael Domaradzki</li>
</ul>
</div>
</div>
</div>
</div>
</div>
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
And the files are in the link I put above.
I tried to contact the programmer of this template (which bases it on an engine, “skelJS”). There isn't any answer yet. How can I fix this problem?
Error details:
Exception was thrown at line 5288, column 6 in http://localhost:1572/Scripts/jquery-1.8.2.js
0x800a139e - JavaScript runtime error: SyntaxError
Exception was thrown at line 4, column 13743 in http://localhost:1572/Scripts/jquery.min.js
0x800a139e - JavaScript runtime error: SyntaxError
Exception was thrown at line 4, column 13957 in http://localhost:1572/Scripts/jquery.min.js
0x800a139e - JavaScript runtime error: SyntaxError
Unhandled exception at line 12, column 444 in http://localhost:1572/Scripts/skel.min.js
0x800a139e - JavaScript runtime error: NotFoundError
The program '[10048] iisexpress.exe: Managed (v4.0.30319)' has exited with code 0 (0x0).
The program '[10048] iisexpress.exe: Program Trace' has exited with code 0 (0x0).
You are testing in IE? :) And yes everybody has that mistake from jquery-1.10.2.min.js.
Put it on a blank page and it is still there. The fault was also there in "jquery-1.8.2"
Related
I'm trying to port HTML template to .vue files. I know there's known problem with deeply nested DOM like in this question, but my vue.config.js already looks like that:
module.exports = {
chainWebpack: (config) => {
const vueRule = config.module.rule('vue');
vueRule.uses.clear();
const vueLoader = vueRule.use('vue-loader').loader('vue-loader');
vueLoader.options({
prettify: false,
});
},
};
npm run serve hangs on 22% forever and it looks like that:
> vue-cli-service serve
INFO Starting development server...
22% building 106/110 modules 4 active ...bout.vue?vue&type=template&id=039c5b43&
While NODE_ENV=production npm run serve runs just fine.
Here's my whole About.vue file which hangs on render:
<!DOCTYPE html>
<html lang="en">
<head>
<title>About us</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Destino project">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="styles/bootstrap4/bootstrap.min.css">
<link href="plugins/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="styles/about_styles.css">
<link rel="stylesheet" type="text/css" href="styles/about_responsive.css">
</head>
<body>
<div class="super_container">
<!-- Header -->
<header class="header">
<div class="container">
<div class="row">
<div class="col">
<div class="header_container d-flex flex-row align-items-center justify-content-start">
<!-- Logo -->
<div class="logo_container">
<div class="logo">
<div>destino</div>
<div>travel agency</div>
<div class="logo_image"><img src="images/logo.png" alt=""></div>
</div>
</div>
<!-- Main Navigation -->
<nav class="main_nav ml-auto">
<ul class="main_nav_list">
<li class="main_nav_item">Home</li>
<li class="main_nav_item active">About us</li>
<li class="main_nav_item">Offers</li>
<li class="main_nav_item">News</li>
<li class="main_nav_item">Contact</li>
</ul>
</nav>
<!-- Search -->
<div class="search">
<form action="#" class="search_form">
<input type="search" name="search_input" class="search_input ctrl_class" required="required" placeholder="Keyword">
<button type="submit" class="search_button ml-auto ctrl_class"><img src="images/search.png" alt=""></button>
</form>
</div>
<!-- Hamburger -->
<div class="hamburger ml-auto"><i class="fa fa-bars" aria-hidden="true"></i></div>
</div>
</div>
</div>
</div>
</header>
<!-- Menu -->
<div class="menu_container menu_mm">
<!-- Menu Close Button -->
<div class="menu_close_container">
<div class="menu_close"></div>
</div>
<!-- Menu Items -->
<div class="menu_inner menu_mm">
<div class="menu menu_mm">
<div class="menu_search_form_container">
<form action="#" id="menu_search_form">
<input type="search" class="menu_search_input menu_mm">
<button id="menu_search_submit" class="menu_search_submit" type="submit"><img src="images/search_2.png" alt=""></button>
</form>
</div>
<ul class="menu_list menu_mm">
<li class="menu_item menu_mm">Home</li>
<li class="menu_item menu_mm">About us</li>
<li class="menu_item menu_mm">Offers</li>
<li class="menu_item menu_mm">News</li>
<li class="menu_item menu_mm">Contact</li>
</ul>
<!-- Menu Social -->
<div class="menu_social_container menu_mm">
<ul class="menu_social menu_mm">
<li class="menu_social_item menu_mm"><i class="fa fa-pinterest" aria-hidden="true"></i></li>
<li class="menu_social_item menu_mm"><i class="fa fa-linkedin" aria-hidden="true"></i></li>
<li class="menu_social_item menu_mm"><i class="fa fa-instagram" aria-hidden="true"></i></li>
<li class="menu_social_item menu_mm"><i class="fa fa-facebook" aria-hidden="true"></i></li>
<li class="menu_social_item menu_mm"><i class="fa fa-twitter" aria-hidden="true"></i></li>
</ul>
</div>
<div class="menu_copyright menu_mm">Colorlib All rights reserved</div>
</div>
</div>
</div>
<!-- Home -->
<div class="home">
<!-- Image by https://unsplash.com/#peecho -->
<div class="home_background parallax-window" data-parallax="scroll" data-image-src="images/about_background.jpg" data-speed="0.8"></div>
<div class="container">
<div class="row">
<div class="col">
<div class="home_content">
<div class="home_content_inner">
<div class="home_title">About us</div>
<div class="home_breadcrumbs">
<ul class="home_breadcrumbs_list">
<li class="home_breadcrumb">Home</li>
<li class="home_breadcrumb">About us</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Find Form -->
<div class="find">
<!-- Image by https://unsplash.com/#garciasaldana_ -->
<div class="find_background_container prlx_parent">
<div class="find_background prlx" style="background-image:url(images/find.jpg)"></div>
</div>
<!-- <div class="find_background parallax-window" data-parallax="scroll" data-image-src="images/find.jpg" data-speed="0.8"></div> -->
<div class="container">
<div class="row">
<div class="col-12">
<div class="find_title text-center">Find the Adventure of a lifetime</div>
</div>
<div class="col-12">
<div class="find_form_container">
<form action="#" id="find_form" class="find_form d-flex flex-md-row flex-column align-items-md-center align-items-start justify-content-md-between justify-content-start flex-wrap">
<div class="find_item">
<div>Destination:</div>
<input type="text" class="destination find_input" required="required" placeholder="Keyword here">
</div>
<div class="find_item">
<div>Adventure type:</div>
<select name="adventure" id="adventure" class="dropdown_item_select find_input">
<option>Categories</option>
<option>Categories</option>
<option>Categories</option>
</select>
</div>
<div class="find_item">
<div>Min price</div>
<select name="min_price" id="min_price" class="dropdown_item_select find_input">
<option> </option>
<option>Price</option>
<option>Price</option>
</select>
</div>
<div class="find_item">
<div>Max price</div>
<select name="max_price" id="max_price" class="dropdown_item_select find_input">
<option> </option>
<option>Price</option>
<option>Price</option>
</select>
</div>
<button class="button find_button">Find</button>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- About -->
<div class="about">
<div class="container">
<div class="row">
<div class="col">
<div class="section_title text-center">
<h2>We are an award winning Agency</h2>
<div>take a look at our story</div>
</div>
</div>
</div>
<div class="row about_row">
<div class="col-lg-6 about_col order-lg-1 order-2">
<div class="about_content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce fringilla lectus nec diam auctor, ut fringilla diam sagittis. Quisque vel est id justo faucibus dapibus id a nibh. Aenean suscipit consequat lacus, sit amet mollis nulla. Morbi sagittis orci id lacus convallis tempus eget sit amet metus. Sed finibus, magna at euismod aliquet, enim justo vulputate lorem, sit amet elementum dolor eros sollicitudin dui. Sed ac magna mauris. Nullam lectus odio, viverra vel mi id, interdum imperdiet nulla. </p>
<div class="button about_button">Read More</div>
</div>
</div>
<div class="col-lg-6 about_col order-lg-2 order-1">
<div class="about_image">
<img src="images/about.jpg" alt="https://unsplash.com/#sanfrancisco">
</div>
</div>
</div>
</div>
</div>
<!-- Milestones -->
<div class="milestones">
<div class="milestones_background parallax-window" data-parallax="scroll" data-image-src="images/fact_background.jpg" data-speed="0.8"></div>
<div class="container">
<div class="row">
<div class="col">
<div class="section_title text-center">
<h2>Fun facts about our Agency</h2>
<div>take a look</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-8 offset-lg-2">
<div class="milestones_text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce fringilla lectus nec diam auctor, ut fringilla diam sagittis. Quisque vel est id justo faucibus dapibus id a nibh</p>
</div>
</div>
</div>
<div class="row milestones_container">
<!-- Milestone -->
<div class="col-lg-3 milestone_col">
<div class="milestone text-center">
<div class="milestone_icon"><img src="images/milestone_1.svg" alt=""></div>
<div class="milestone_counter" data-end-value="17">0</div>
<div class="milestone_text">Mountains Climbed</div>
</div>
</div>
<!-- Milestone -->
<div class="col-lg-3 milestone_col">
<div class="milestone text-center">
<div class="milestone_icon"><img src="images/milestone_2.svg" alt=""></div>
<div class="milestone_counter" data-end-value="213">0</div>
<div class="milestone_text">Islands Visited</div>
</div>
</div>
<!-- Milestone -->
<div class="col-lg-3 milestone_col">
<div class="milestone text-center">
<div class="milestone_icon"><img src="images/milestone_3.svg" alt=""></div>
<div class="milestone_counter" data-end-value="11923">0</div>
<div class="milestone_text">Photos Taken</div>
</div>
</div>
<!-- Milestone -->
<div class="col-lg-3 milestone_col">
<div class="milestone text-center">
<div class="milestone_icon"><img src="images/milestone_4.svg" alt=""></div>
<div class="milestone_counter" data-end-value="15">0</div>
<div class="milestone_text">Cruises Organized</div>
</div>
</div>
</div>
</div>
</div>
<!-- Services -->
<div class="services">
<div class="container">
<div class="row">
<div class="col">
<div class="section_title text-center">
<h2>Popular services that we offer</h2>
<div>take a look at these offers</div>
</div>
</div>
</div>
<div class="row icon_box_container">
<!-- Icon Box -->
<div class="col-lg-4 icon_box_col">
<div class="icon_box">
<div class="icon_box_image"><img src="images/service_1.svg" class="svg" alt="https://www.flaticon.com/authors/monkik"></div>
<div class="icon_box_title">Weekend trips</div>
<p class="icon_box_text">Lorem ipsum dolor sit amet, consectetur adip iscing elit. Fusce fringilla lectus nec diam auctor, ut fringilla diam sagittis.</p>
Read More
</div>
</div>
<!-- Icon Box -->
<div class="col-lg-4 icon_box_col">
<div class="icon_box">
<div class="icon_box_image"><img src="images/service_2.svg" class="svg" alt="https://www.flaticon.com/authors/monkik"></div>
<div class="icon_box_title">Fun leisure trips</div>
<p class="icon_box_text">Lorem ipsum dolor sit amet, consectetur adip iscing elit. Fusce fringilla lectus nec diam auctor, ut fringilla diam sagittis.</p>
Read More
</div>
</div>
<!-- Icon Box -->
<div class="col-lg-4 icon_box_col">
<div class="icon_box">
<div class="icon_box_image"><img src="images/service_3.svg" class="svg" alt="https://www.flaticon.com/authors/monkik"></div>
<div class="icon_box_title">Plane tickets</div>
<p class="icon_box_text">Lorem ipsum dolor sit amet, consectetur adip iscing elit. Fusce fringilla lectus nec diam auctor, ut fringilla diam sagittis.</p>
Read More
</div>
</div>
</div>
</div>
</div>
<!-- Newsletter -->
<div class="newsletter">
<!-- Image by https://unsplash.com/#garciasaldana_ -->
<div class="newsletter_background" style="background-image:url(images/newsletter.jpg)"></div>
<div class="container">
<div class="row">
<div class="col-lg-10 offset-lg-1">
<div class="newsletter_content">
<div class="newsletter_title text-center">Subscribe to our Newsletter</div>
<div class="newsletter_form_container">
<form action="#" id="newsletter_form" class="newsletter_form">
<div class="d-flex flex-md-row flex-column align-content-center justify-content-between">
<input type="email" id="newsletter_input" class="newsletter_input" placeholder="Your E-mail Address">
<button type="submit" id="newsletter_button" class="newsletter_button">Subscribe</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="row">
<!-- Footer Column -->
<div class="col-lg-4 footer_col">
<div class="footer_about">
<!-- Logo -->
<div class="logo_container">
<div class="logo">
<div>destino</div>
<div>travel agency</div>
<div class="logo_image"><img src="images/logo.png" alt=""></div>
</div>
</div>
<div class="footer_about_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar sed mauris eget tincidunt. Sed lectus nulla, tempor vel eleifend quis, tempus rut rum metus. Pellentesque ultricies enim eu quam fermentum hendrerit.</div>
<div class="copyright"><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by Colorlib
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></div>
</div>
</div>
<!-- Footer Column -->
<div class="col-lg-4 footer_col">
<div class="footer_latest">
<div class="footer_title">Latest News</div>
<div class="footer_latest_content">
<!-- Footer Latest Post -->
<div class="footer_latest_item">
<div class="footer_latest_image"><img src="images/latest_1.jpg" alt="https://unsplash.com/#peecho"></div>
<div class="footer_latest_item_content">
<div class="footer_latest_item_title">Brazil Summer</div>
<div class="footer_latest_item_date">Jan 09, 2018</div>
</div>
</div>
<!-- Footer Latest Post -->
<div class="footer_latest_item">
<div class="footer_latest_image"><img src="images/latest_2.jpg" alt="https://unsplash.com/#sanfrancisco"></div>
<div class="footer_latest_item_content">
<div class="footer_latest_item_title">A perfect vacation</div>
<div class="footer_latest_item_date">Jan 09, 2018</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer Column -->
<div class="col-lg-4 footer_col">
<div class="tags footer_tags">
<div class="footer_title">Tags</div>
<ul class="tags_content d-flex flex-row flex-wrap align-items-start justify-content-start">
<li class="tag">travel</li>
<li class="tag">summer</li>
<li class="tag">cruise</li>
<li class="tag">beach</li>
<li class="tag">offer</li>
<li class="tag">vacation</li>
<li class="tag">trip</li>
<li class="tag">city break</li>
<li class="tag">adventure</li>
</ul>
</div>
</div>
</div>
</div>
</footer>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="styles/bootstrap4/popper.js"></script>
<script src="styles/bootstrap4/bootstrap.min.js"></script>
<script src="plugins/greensock/TweenMax.min.js"></script>
<script src="plugins/greensock/TimelineMax.min.js"></script>
<script src="plugins/scrollmagic/ScrollMagic.min.js"></script>
<script src="plugins/greensock/animation.gsap.min.js"></script>
<script src="plugins/greensock/ScrollToPlugin.min.js"></script>
<script src="plugins/easing/easing.js"></script>
<script src="plugins/parallax-js-master/parallax.min.js"></script>
<script src="js/about_custom.js"></script>
</body>
</html>
</template>
<script>
export default {
name: 'About',
}
</script>
Have you any idea why it runs fine in production mode while in development it can't? I've googled it very intensive, but I only know the issue with prettify which seems to be prevented in my case.
Hello all I am building a new web app in the Laravel framework. I am new to Laravel & Blade and I have been stuck setting up my bootstrap template with blade.
It seems that when I yield a section into my main template file my javascript files do not run although I can see them on page inspection.
I also get the following error in my console;
[Error] Failed to load resource: the server responded with a status of `enter code
here`404 (Not Found) (script.js, line 0)
[Error] SyntaxError: Unexpected token '<'
ajax (jquery.min.js:6:13737)
_evalUrl (jquery.min.js:6:142)
domManip (jquery.min.js:5:28144)
append (jquery.min.js:5:25583)
(anonymous function) (custom.js:8)
c (jquery.min.js:4:26057)
fireWith (jquery.min.js:4:26858)
ready (jquery.min.js:4:3317)
q (jquery.min.js:4:723)
Here is my source code
<!DOCTYPE html>
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!-- Seo Meta -->
<meta name="description" content=" ">
<meta name="keywords" content="iPress, magazine, light, dark, themeforest, multi purpose, premium, unlimited, blog, news, AD, optimized">
<!-- Styles --><
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="styles/icons.css" media="screen" />
<link rel="stylesheet" type="text/css" href="styles/animate.css" media="screen" />
<link rel="stylesheet" type="text/css" href="styles/responsive.css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,100,500' rel='stylesheet' type='text/css'>
<!-- Favicon -->
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=EmulateIE8; IE=EDGE" />
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="layout" class="fluid">
<header id="header">
<div class="a_head">
<div class="row clearfix">
<div class="breaking_news lefter">
<div class="freq_out">
<div class="freq"><div class="inner_f"></div><div id="layerBall"></div></div>
</div><!-- /freq -->
<ul id="js-news" class="js-hidden">
<li class="news-item">Improving Search on the Envato Marketplaces: 2013 in Review</li>
<li class="news-item">4 Ways To Find Free and Unique Photos for Your Next Website Theme</li>
<li class="news-item">Community Poll: Internet Speeds From Around the World in 2013</li>
<li class="news-item">New Hub, Header & Collections: 10 Ways to Improve Your Marketplaces Productivity</li>
<li class="news-item">Get a Free Year of Tuts+ Premium by Trying New Relic</li>
<li class="news-item">Beyond Bland: 10+ Creative Packaging Designs That Will Leave You Inspired</li>
</ul><!-- /js news -->
</div><!-- /breaking news -->
<div class="right_bar">
<div class="social social_head">
<i class="fa-twitter"></i>
<i class="fa-facebook"></i>
<i class="fa-google-plus"></i>
<i class="fa-linkedin"></i>
<i class="fa-github"></i>
<i class="fa-instagram"></i>
<i class="fa-dribbble"></i>
</div><!-- /social -->
<span id="date_time"></span><!-- /date -->
</div><!-- /right bar -->
</div><!-- /row -->
</div><!-- /a head -->
<div class="b_head">
<div class="row clearfix">
<div class="logo">
<img src="images/logo/six-media-logo.png" alt="Six Media - The UK Media Powerhouse">
</div><!-- /logo -->
<div class="ads">
<img src="images/ads.jpg" alt="ADS">
</div><!-- /ads -->
</div><!-- /row -->
</div><!-- /b head -->
<div class="row clearfix">
<div class="sticky_true">
<div class="c_head clearfix">
<nav>
<ul class="sf-menu">
<li class="color5">Home</li>
<li class="color2">Media
<ul class="col4 mega">
<li class="col1">
<li>Videos</li>
<li>Music Releases</li>
<li>Rising Talent</li>
</li>
<li class="col1">
<a href="single_post.html">
<img src="images/assets/m_2.jpg" alt="#" title="#">
<h4> Music Releases </h4>
</a>
</li>
<li class="col1">
<a href="single_post.html">
<img src="images/assets/m_3.jpg" alt="#" title="#">
<h4> What do you think about our website </h4>
</a>
</li>
<li class="col1">
<a href="single_post.html">
<img src="images/assets/m_4.jpg" alt="#" title="#">
<h4> Printer took a galley of type and scrambled </h4>
</a>
</li>
</ul>
</li>
<li class="color3">News
<ul class="col4 mega">
<li class="col1">
<a href="single_post.html">
<img src="images/assets/m_1.jpg" alt="#" title="#">
<h4> Here's What Instagram Ads Will Look Like </h4>
</a>
</li>
<li class="col1">
<a href="single_post.html">
<img src="images/assets/m_2.jpg" alt="#" title="#">
<h4> Lorem Ipsum is simply dummy text </h4>
</a>
</li>
<li class="col1">
<a href="single_post.html">
<img src="images/assets/m_3.jpg" alt="#" title="#">
<h4> What do you think about our website </h4>
</a>
</li>
<div class="col1">
<li>Example 1</li>
<li>Example 2</li>
<li>Example 3</li>
<li>Example 4</li>
<li>Example 5</li>
</div>
</ul>
</li>
<li class="color5">Events</li>
<li class="color4">Services
<ul class="col4 mega">
<div class="col1">
<li>Marketing & PR</li>
<li>Management</li>
<li>Production</li>
<li>Branding</li>
</div>
</ul>
</li>
<li class="color8">Contact</li>
</ul><!-- /menu -->
</nav><!-- /nav -->
<div class="right_icons">
<a class="random_post bottomtip" href="#" title="Random Post"><i class="icon-media-shuffle"></i></a><!-- /random post -->
<div class="search">
<div class="search_icon"><i class="fa-search"></i></div>
<div class="s_form">
<form action="http://d.theme20.com/ipress/search_result.html" id="search" method="get">
<input id="inputhead" name="search" type="text" onfocus="if (this.value=='Start Searching...') this.value = '';" onblur="if (this.value=='') this.value = 'Start Searching...';" value="Start Searching..." placeholder="Start Searching ...">
<button type="submit"><i class="fa-search"></i></button>
</form><!-- /form -->
</div><!-- /s form -->
</div><!-- /search -->
</div><!-- /right icons -->
</div><!-- /c head -->
</div><!-- /sticky -->
</div><!-- /row -->
</header><!-- /header -->
<div class="page-content">
#yield('home')
</div>
<footer id="footer">
<div class="row clearfix">
<div class="grid_3">
<div class="widget">
<div class="title"><h4>About Six Media</h4></div>
<p> iPress is a magazine/blog/ad/review template. Nunc montes odio phasellus dignissim, aenean, nec augue velit integer elementum ut montes quis integer cursus, est purus, lectus duis, scelerisque tincidunt ultricies phasellus elementum turpis tristique.<br><br>
Email: info#sixmedia.co.uk </p>
</div><!-- /widget -->
</div><!-- /grid3 -->
<div class="grid_3">
<div class="widget">
<div class="title"><h4>Recent Posts</h4></div>
<ul class="small_posts">
<li class="clearfix">
<a class="s_thumb float-shadow" href="single_post.html"><img width="70" height="70" src="images/assets/thumb4.jpg" alt="#"></a>
<h3>What is the worst could be the worst?</h3>
<div class="meta mb"> 1 day ago / 1 comment </div>
</li>
<li class="clearfix">
<a class="s_thumb float-shadow" href="single_post.html"><img width="70" height="70" src="images/assets/thumb5.jpg" alt="#"></a>
<h3>Praesent ipsum adipiscing mi eget ipsum</h3>
<div class="meta mb"> 3 days ago / 3 comments </div>
</li>
<li class="clearfix">
<a class="s_thumb float-shadow" href="single_post.html"><img width="70" height="70" src="images/assets/thumb6.jpg" alt="#"></a>
<h3>Paul Thomson on post with SoundCloud</h3>
<div class="meta mb"> 6 days ago / 5 comments </div>
</li>
</ul>
</div><!-- /widget -->
</div><!-- /grid3 -->
<div class="grid_3">
<div class="widget">
<div class="title"><h4>Newsletters</h4></div>
<p> To receive the latest updates and Latest Posts enter your email. </p>
<form id="newsletters" method="post" action="http://feedburner.google.com/fb/a/mailverify" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=sevenpsd', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="email" onfocus="if (this.value=='Type Your Email') this.value = '';" onblur="if (this.value=='') this.value = 'Type Your Email';" value="Type Your Email" placeholder="Type Your Email" required="required">
<button type="submit"><i class="icon-checkmark"></i></button>
</form>
</div><!-- /widget -->
<div class="widget">
<div class="title"><h4>Follow us</h4></div>
<div class="social">
<i class="fa-twitter"></i>
<i class="fa-facebook"></i>
<i class="fa-google-plus"></i>
<i class="fa-linkedin"></i>
<i class="fa-github"></i>
<i class="fa-instagram"></i>
<i class="fa-dribbble"></i>
</div><!-- /social -->
</div><!-- /widget -->
</div><!-- /grid3 -->
<div class="grid_3">
<div class="widget">
<div class="title"><h4>Useful Links</h4></div>
<ul class="nav nav-pills nav-stacked">
<li role="presentation">Contact</li>
<li role="presentation">Faq</li>
<li role="presentation">Partners</li>
</ul>
</div><!-- /widget -->
</div><!-- /grid3 -->
</div><!-- /row -->
<div class="row clearfix">
<div class="footer_last">
<span class="copyright">© 2018 Six Media. All Rights Reserved.</span>
<div id="toTop" class="toptip" title="Back to Top"><i class="icon-arrow-thin-up"></i></div>
</div><!-- /last footer -->
</div><!-- /row -->
</footer><!-- /footer -->
</div><!-- /layout -->
<!-- Scripts -->
<noscript>
This page needs JavaScript activated to work.
</noscript>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/ipress.js"></script>
<script type="text/javascript" src="/js/owl.carousel.min.js"></script>
<script type="text/javascript" src="/js/jquery.ticker.js"></script>
<script type="text/javascript" src="/js/custom.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
function date_time(id){
date = new Date;
year = date.getFullYear();
month = date.getMonth();
months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'Jully', 'August', 'September', 'October', 'November', 'December');
d = date.getDate();
day = date.getDay();
days = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
h = date.getHours();
if(h<10){
h = "0"+h;}
m = date.getMinutes();
if(m<10){
m = "0"+m;
}
s = date.getSeconds();
if(s<10){
s = "0"+s;
}
// result = ''+days[day]+' '+months[month]+' '+d+' '+year+' '+h+':'+m+':'+s;
result = ''+days[day]+' '+d+' '+months[month]+' '+year;
document.getElementById(id).innerHTML = result;
setTimeout('date_time("'+id+'");','1000');
return true;
}
window.onload = date_time('date_time');
/* ]]> */
</script>
Home view
#extends('layouts/main')
#section('home')
<div class="container-fluid">
<div class="row clearfix">
<div class="grid_9 alpha">
<div class="ipress_slider mbf">
<div class="slider_a owl-carousel owl-theme">
<div class="item clearfix">
<div class="half">
<div class="slide_details">
<a class="cat color3" href="#" title="View all posts under Entertainment">Entertainment</a>
<span class="post_rating" href="#" title="Rating"><i class="fa fa-star"></i> 8.55</span>
<h3>Sed ut perspiciatis unde omnis iste</h3>
</div>
<img src="images/assets/slider1.jpg" alt="">
</div><!-- /half -->
<div class="half">
<div class="slide_details">
<a class="cat color1" href="#" title="View all posts under People">People</a>
<span class="post_rating" href="#" title="Rating"><i class="fa fa-star"></i> 9.1</span>
<h3>Discovered the undoubtable source</h3>
</div>
<img src="images/assets/slider2.jpg" alt="">
</div><!-- /half -->
<div class="half">
<div class="slide_details">
<a class="cat color2" href="#" title="View all posts under Travel">Travel</a>
<span class="post_rating" href="#" title="Rating"><i class="fa fa-star"></i> 7.42</span>
<h3>The standard chunk of Lorem ipsum</h3>
</div>
<img src="images/assets/slider3.jpg" alt="">
</div><!-- /half -->
</div><!-- /slide -->
</div><!-- /slider -->
</div><!-- /slider ipress -->
<!-- HOME SLIDER END -->
<div class="grid_8 omega posts righter">
<div class="post_day mbf clearfix">
<div class="title colordefault"><h4>HOT TOPIC</h4></div>
<!-- HOT TOPIC SECTION -->
<div class="grid_6 alpha relative">
<a class="cat" href="#" title="View all posts under Travel">Travel</a>
<a class="float-shadow" href="single_post.html"><img src="images/assets/r_4.jpg" alt=""></a>
</div><!-- /grid6 alpha -->
<div class="grid_6 omega">
<div class="post_day_content">
<h3> Here's What Instagram Ads Will Look Like </h3>
<div class="meta mb"> 3 hours ago / 0 comments </div>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry unknown printer took a galley of type and scrambled it to make a type has survived not only fiv... </p>
</div><!-- /post content -->
<!-- HOT TOPIC SECTION -->
</div><!-- /grid6 omega -->
</div><!-- /post day -->
<div class="posts_block mbf clearfix">
<div class="title color5">
<h4>IN THE MEDIA</h4>
<i class="icon-feed"></i>
</div><!-- /title bar -->
<div class="grid_6 alpha">
<div class="mb float-shadow"><img src="images/assets/r_5.jpg" alt=""></div>
<div class="post_m_content">
<h3> Here's What Instagram Ads Will Look Like </h3>
<div class="meta mb"> 3 hours ago / 0 comments </div>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting... </p>
</div><!-- post content -->
</div><!-- /grid6 omega -->
<div class="grid_6 omega">
<div class="small_slider_music owl-carousel owl-theme">
<div class="item clearfix">
<ul class="small_posts">
<li class="clearfix">
<a class="s_thumb float-shadow" href="single_post.html"><img width="70" height="70" src="images/assets/thumb1.jpg" alt="#"></a>
<h3>What worst could be the worst?</h3>
<div class="meta mb"> 5 hours ago / 1 comments </div>
</li>
<li class="clearfix">
<a class="s_thumb float-shadow" href="single_post.html"><img width="70" height="70" src="images/assets/thumb2.jpg" alt="#"></a>
<h3>Praesent ipsum adipiscing mi eget ipsum</h3>
<div class="meta mb"> 1 days ago / 5 comments </div>
</li>
<li class="clearfix">
<a class="s_thumb float-shadow" href="single_post.html"><img width="70" height="70" src="images/assets/thumb3.jpg" alt="#"></a>
<h3>Paul Thomson on post with SoundCloud</h3>
<div class="meta mb"> 3 days ago / 14 comments </div>
</li>
<li class="clearfix">
<a class="s_thumb float-shadow" href="single_post.html"><img width="70" height="70" src="images/assets/thumb4.jpg" alt="#"></a>
<h3>For the days of peace and warmth</h3>
<div class="meta mb"> 3 days ago / 14 comments </div>
</li>
</ul>
</div>
<div class="item clearfix">
<ul class="small_posts">
<li class="clearfix">
<a class="s_thumb float-shadow" href="single_post.html"><img width="70" height="70" src="images/assets/thumb9.jpg" alt="#"></a>
<h3>What worst could be the worst?</h3>
<div class="meta mb"> 5 hours ago / 1 comments </div>
</li>
<li class="clearfix">
<a class="s_thumb float-shadow" href="single_post.html"><img width="70" height="70" src="images/assets/thumb10.jpg" alt="#"></a>
<h3>Praesent ipsum adipiscing mi eget ipsum</h3>
<div class="meta mb"> 1 days ago / 5 comments </div>
</li>
</ul>
</div>
</div><!-- /slides -->
</div><!-- grid6 omega -->
</div><!-- posts block Music -->
<div class="posts_block mbf clearfix">
<div class="title color6">
<h4>FEATURED VIDEOS</h4>
<i class="icon-feed"></i>
</div>
<div class="carousel_TV">
<div class="item float-shadow"><img class="toptip" src="images/assets/r_7.jpg" alt="#" title="Lorem Ipsum is not simply"></div>
<div class="item float-shadow"><img class="toptip" src="images/assets/r_8.jpg" alt="#" title="Shooting for new goodies"></div>
<div class="item float-shadow"><img class="toptip" src="images/assets/r_9.jpg" alt="#" title="For the days of peace and warmth"></div>
<div class="item float-shadow"><img class="toptip" src="images/assets/r_10.jpg" alt="#" title="A picture of Sin Fang in Bairro Alto"></div>
<div class="item float-shadow"><img class="toptip" src="images/assets/r_11.jpg" alt="#" title="Breaking the darkness"></div>
<div class="item float-shadow"><img class="toptip" src="images/assets/r_12.jpg" alt="#" title="For the days of peace and warmth"></div>
<div class="item float-shadow"><img class="toptip" src="images/assets/r_13.jpg" alt="#" title="Bairro Alto in Lisboa, Portugal"></div>
</div>
</div><!-- posts block carousel -->
<div class="ads_block mbf">
<img src="images/ads3.png" alt="">
</div><!-- ads block -->
<div class="posts_block mbf clearfix">
<div class="title color1">
<h4>SIX MEDIA NEWS</h4>
<i class="icon-feed"></i>
</div>
<div class="grid_6 alpha">
<div class="mb float-shadow"><img src="images/assets/r_6.jpg" alt=""></div>
<div class="post_m_content">
<h3> Here's What Instagram Ads Will Look Like </h3>
<div class="meta mb"> 3 hours ago / 0 comments </div>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting... </p>
</div><!-- post content -->
</div><!-- grid6 omega -->
<div class="grid_6 omega">
<div class="small_slider_travel owl-carousel owl-theme">
<div class="item clearfix">
<ul class="small_posts">
<li class="clearfix">
<a class="s_thumb float-shadow" href="single_post.html"><img width="70" height="70" src="images/assets/thumb5.jpg" alt="#"></a>
<h3>What worst could be the worst?</h3>
<div class="meta mb"> 5 hours ago / 1 comments </div>
</li>
<li class="clearfix">
<a class="s_thumb float-shadow" href="single_post.html"><img width="70" height="70" src="images/assets/thumb6.jpg" alt="#"></a>
<h3>Praesent ipsum adipiscing mi eget ipsum</h3>
<div class="meta mb"> 1 days ago / 5 comments </div>
</li>
<li class="clearfix">
<a class="s_thumb float-shadow" href="single_post.html"><img width="70" height="70" src="images/assets/thumb7.jpg" alt="#"></a>
<h3>Paul Thomson on post with SoundCloud</h3>
<div class="meta mb"> 3 days ago / 14 comments </div>
</li>
<li class="clearfix">
<a class="s_thumb float-shadow" href="single_post.html"><img width="70" height="70" src="images/assets/thumb8.jpg" alt="#"></a>
<h3>For the days of peace and warmth</h3>
<div class="meta mb"> 3 days ago / 14 comments </div>
</li>
</ul>
</div>
<div class="item clearfix">
<ul class="small_posts">
<li class="clearfix">
<a class="s_thumb float-shadow" href="single_post.html"><img width="70" height="70" src="images/assets/thumb11.jpg" alt="#"></a>
<h3>What worst could be the worst?</h3>
<div class="meta mb"> 5 hours ago / 1 comments </div>
</li>
<li class="clearfix">
<a class="s_thumb float-shadow" href="single_post.html"><img width="70" height="70" src="images/assets/thumb12.jpg" alt="#"></a>
<h3>Praesent ipsum adipiscing mi eget ipsum</h3>
<div class="meta mb"> 1 days ago / 5 comments </div>
</li>
<li class="clearfix">
<a class="s_thumb float-shadow" href="single_post.html"><img width="70" height="70" src="images/assets/thumb6.jpg" alt="#"></a>
<h3>Praesent ipsum adipiscing mi eget ipsum</h3>
<div class="meta mb"> 4 days ago / 5 comments </div>
</li>
</ul>
</div>
</div>
</div><!-- grid6 omega -->
</div><!-- posts block Travel -->
</div><!-- end grid9 -->
<div class="grid_4 alpha sidebar sidebar_b">
<div class="widget">
<!-- LEFT SIDEBAR SECTION -->
<div class="title"><h4>NEW VIDEO</h4></div>
<iframe src="http://player.vimeo.com/video/13897659?color=E84A4A" height="180"></iframe>Iconic Poster design
</div><!-- widget -->
</div><!-- /grid3 sidebar A -->
</div><!-- /row -->
</div>
#stop
I am new to all of this so please forgive me if I am missing something
Appreciate any help
Thanks
A
<script type="text/javascript" src="/js/jquery.min.js"></script>
Please change src attribute to your source code.
You should use Laravel`s build function to load css and js.
<script type="text/javascript" src="{{ URL::asset('js/jquery.js') }}">
I'm trying to figure out how to upload the same header and footer from my index to all pages, without having to edit all of them after that if I change/add something to the header and footer.
I'm using CSS and JS to my HTML pages.
you can check the main page here.
If it helps, those are the following codes:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Da Montanha | Esporte e Aventura em Curitiba</title>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link href="css/custom.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/color.css" rel="stylesheet" type="text/css">
<link href="css/responsive.css" rel="stylesheet" type="text/css">
<link href="css/owl.carousel.css" rel="stylesheet" type="text/css">
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="css/datepicker.css" rel="stylesheet" type="text/css">
<link href="css/iconmoon.css" rel="stylesheet" type="text/css">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,600" rel="stylesheet" type="text/css">
</head>
<body class="campers-theme">
<div id="wrapper">
<header id="header">
<section class="topbar-section">
<div class="container">
<div class="col-md-6">
<div class="top-social">
<ul>
<li><i class="fa fa-instagram" target="_blank"></i></li>
<li><i class="fa fa-youtube-square" target="_blank"></i></li>
<li><i class="fa fa-facebook-f" target="_blank"></i></li>
</ul>
<i class="fa fa-envelope-o"></i><span class="__cf_email__" data-cfemail="">contato#damontanha.com.br</span> <script data-cfhash="f9e31" type="text/javascript">/* <![CDATA[ */!function(t,e,r,n,c,a,p){try{t=document.currentScript||function(){for(t=document.getElementsByTagName('script'),e=t.length;e--;)if(t[e].getAttribute('data-cfhash'))return t[e]}();if(t&&(c=t.previousSibling)){p=t.parentNode;if(a=c.getAttribute('data-cfemail')){for(e='',r='0x'+a.substr(0,2)|0,n=2;a.length-n;n+=2)e+='%'+('0'+('0x'+a.substr(n,2)^r).toString(16)).slice(-2);p.replaceChild(document.createTextNode(decodeURIComponent(e)),c)}p.removeChild(t)}}catch(u){}}()/* ]]> */</script></a> </div>
</div>
<div class="col-md-6">
<div class="register-login">
<ul>
<li><i class="fa fa-key"></i>Login</li>
<li><i class="fa fa-unlock"></i>Registrar-se</li>
</ul>
</div>
</div>
</div>
</section>
<section class="logo-section">
<div class="container">
<div class="col-md-6"><strong class="logo"><img src="images/logo.png" alt="logo"></strong></div>
<div class="col-md-6">
<div class="book-section"> Orçamentos
<div class="number-box"> <i class="fa fa-whatsapp"></i>
<div class="number-text"> <span>Entre em Contato</span> <strong>41 99613 6600</strong> </div>
</div>
</div>
</div>
</div>
</section>
<div id="cp-slide-search" class="cp_side-search">
<form method="get">
<input type="text" placeholder="Digite o que procura..." required>
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<section class="main-navigation">
<nav class="navbar navbar-inverse">
<div class="container">
<div class="col-md-12">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
</div>
<div class="nav-outer">
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav" id="nav">
<li class="active">Início
</li>
<li>Aventuras<i class="fa fa-caret-down"></i></li>
<li>Eventos</i></li>
<li>Loja</i></li>
<li>Páginas<i class="fa fa-caret-down"></i>
<ul>
<li>Blog</i></li></li>
<li>Orçamento</li>
<li>Nosso Time</li>
<li>Galeria de fotos</li>
<li>Depoimentos</li>
</ul>
</li>
<li>Sobre Nós</li>
<li>Contato</li>
</ul>
</div>
<div class="nav-right-col">
<div class="cart-box-outer">
<div class="dropdown">
<button class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <i class="fa fa-shopping-cart"></i> </button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>
<div class="cart-box"> <strong class="title">Você tem 1 item(s) no seu carrinho.</strong>
<div class="cart-row">
<div class="thumb"><img alt="img" src="images/cart-img.jpg"></div>
<div class="text-box"> <a class="close" href="#"><i class="fa fa-close"></i></a> BestWedding Camping Equipment <strong class="amount">1 x R$59.00</strong> </div>
</div>
<strong class="subtotal">Subtotal: <span>R$59.00</span></strong>
<div class="btn-row"> <a class="btn-checkout" href="products-detail.html">Checkout</a> </div>
</div>
</li>
</ul>
</div>
</div>
<div class="top-search"> <i class="fa fa-search"></i> </div>
</div>
</div>
</div>
</div>
</nav>
</section>
</header>
<footer id="footer">
<section class="instagram">
<div class="container">
<h2>We’re on Instagram</h2>
</div>
<ul>
<li><img src="images/instagram/instagram-img-1.jpg" alt="img"></li>
<li><img src="images/instagram/instagram-img-2.jpg" alt="img"></li>
<li><img src="images/instagram/instagram-img-3.jpg" alt="img"></li>
<li><img src="images/instagram/instagram-img-4.jpg" alt="img"></li>
<li><img src="images/instagram/instagram-img-5.jpg" alt="img"></li>
<li><img src="images/instagram/instagram-img-6.jpg" alt="img"></li>
<li><img src="images/instagram/instagram-img-7.jpg" alt="img"></li>
<li><img src="images/instagram/instagram-img-8.jpg" alt="img"></li>
</ul>
</section>
<section class="footer-section-1">
<div class="container">
<div class="row">
<div class="col-md-4"> <strong class="footer-logo"><img src="images/footer-logo.png" alt="logo"></strong>
<p>Lorem ipsum dolor sit amet, consectetur adipis elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullam laboris nisi ut aliquip ex ea commodo conseque Duis aute irure dolor in reprehenderit</p>
Read More </div>
<div class="col-md-4">
<h3>More Services</h3>
<div class="row">
<div class="col-md-6">
<div class="footer-box">
<ul>
<li>Free Parking</li>
<li>Free Wifi Area</li>
<li>Restaurant</li>
<li>Free Hot Shower</li>
<li>Swimming Pool</li>
<li>Shaded Pitches</li>
</ul>
</div>
</div>
<div class="col-md-6">
<div class="footer-box">
<ul>
<li>Laundry</li>
<li>Hairdresser</li>
<li>Digs Area</li>
<li>Barbecue Station</li>
<li>Ping Pong Table</li>
<li>Coffee Bar</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="footer-box">
<h3>Contact us</h3>
<address>
<ul>
<li> <span><i class="fa fa-home"></i></span>
<div class="text-box">
<p>123 Lorem Ipsum Avenue,<br>
Campers Road, NY, U.S.A.</p>
</div>
</li>
<li> <span><i class="fa fa-phone"></i></span>
<div class="text-box">
<p>Call us for any Query</p>
<strong>44 01234 5678</strong> </div>
</li>
<li> <span><i class="fa fa-envelope-o"></i></span>
<div class="text-box">
<p>Send us email for any Information</p>
<span class="__cf_email__" data-cfemail="caa3a4aca58aa9aba7baafb8b9e4a9a5a7">[email protected]</span><script data-cfhash='f9e31' type="text/javascript">/* <![CDATA[ */!function(t,e,r,n,c,a,p){try{t=document.currentScript||function(){for(t=document.getElementsByTagName('script'),e=t.length;e--;)if(t[e].getAttribute('data-cfhash'))return t[e]}();if(t&&(c=t.previousSibling)){p=t.parentNode;if(a=c.getAttribute('data-cfemail')){for(e='',r='0x'+a.substr(0,2)|0,n=2;a.length-n;n+=2)e+='%'+('0'+('0x'+a.substr(n,2)^r).toString(16)).slice(-2);p.replaceChild(document.createTextNode(decodeURIComponent(e)),c)}p.removeChild(t)}}catch(u){}}()/* ]]> */</script> </div>
</li>
<li> <span><i class="fa fa-clock-o"></i></span>
<div class="text-box">
<p>Office Timings</p>
<strong>09:00 - 19:00</strong> </div>
</li>
</ul>
</address>
</div>
</div>
</div>
</div>
</section>
<section class="footer-section-2">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="footer-socila">
<ul>
<li><i class="fa fa-twitter"></i>twitter</li>
<li><i class="fa fa-facebook-f"></i>facebook</li>
<li><i class="fa fa-google-plus"></i>google plus</li>
<li><i class="fa fa-linkedin-square"></i>linkedin</li>
</ul>
</div>
</div>
<div class="col-md-6"><strong class="copy">2016 © Campers, Powered by: Crunchpress</strong></div>
</div>
</div>
</section>
</footer>
</div>
<script src="js/jquery-1.12.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.noconflict.js"></script>
<script src="js/theme-scripts.js"></script>
<script src="js/zebra_datepicker.js"></script>
<script src="js/function.js"></script>
<script src="../../cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
<script src="js/jquery.counterup.min.js"></script>
<script src="js/jquery.countdown.min.js"></script>
<script src="js/custom.js"></script>
<script type="text/javascript">/* <![CDATA[ */(function(d,s,a,i,j,r,l,m,t){try{l=d.getElementsByTagName('a');t=d.createElement('textarea');for(i=0;l.length-i;i++){try{a=l[i].href;s=a.indexOf('/cdn-cgi/l/email-protection');m=a.length;if(a&&s>-1&&m>28){j=28+s;s='';if(j<m){r='0x'+a.substr(j,2)|0;for(j+=2;j<m&&a.charAt(j)!='X';j+=2)s+='%'+('0'+('0x'+a.substr(j,2)^r).toString(16)).slice(-2);j++;s=decodeURIComponent(s)+a.substr(j,m-j)}t.innerHTML=s.replace(/</g,'<').replace(/>/g,'>');l[i].href='mailto:'+t.value}}catch(e){}}}catch(e){}})(document);/* ]]> */</script></body>
<!-- Mirrored from html.crunchpress.com/campers/blog-details.html by HTTrack Website Copier/3.x [XR&CO'2014], Thu, 24 Nov 2016 12:21:10 GMT -->
</html>
you can put them in php files, header.php and footer.php
and then just include them wherever you want
<?php include('header.php') ?>
html code
<?php include('footer.php') ?>
You can use routing feature in angularJS. you can check the example below. Here you can have multiple contents which you can dynamically bind it to your page. So you will have a fixed header and footer content.
<body ng-app="myApp">
<p>header</p>
content1
content2
content3
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "content1.htm"
})
.when("/content1", {
templateUrl : "content1.htm"
})
.when("/content2", {
templateUrl : "content2.htm"
})
.when("/content3", {
templateUrl : "content3.htm"
});
});
</script>
<p>footer</p>
</body>
To do it without a server-side language, You will have to use JavaScript to load in your templates. See the several ways you can do that from answers to this question.
Include another HTML file in a HTML file
Basically, you would have to use jQuery or something like it to make an AJAX request to pull in the HTML.
I have made a bootstrap form that I have taken the code from bootsnipp.com
I have made the code function and appear as it should, but for whatever reason I cannot make it actually submit the form!
I have tried recalling scripts and ensured they all work, I have even made a new page called test.php with nothing but that code and it works wonderfully well.
Can I have some insight? Removed < head >< html > and < body > tags due to it causing issues
<div class="logo">Teacher: Log in here</div>
I hope you can help
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="jquery.js"></script>
<script src="js/jqBootstrapValidation.js"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js"></script>
<script src="js/login.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>PsyRevise - A Better Way To Learn</title>
<!-- Bootstrap Core CSS - Uses Bootswatch Flatly Theme: http://bootswatch.com/flatly/ -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/freelancer.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#page-top">PsyRevise</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
</li>
<li class="page-scroll">
Student Login
</li>
<li class="page-scroll">
Teacher Login
</li>
<li class="page-scroll">
Pricing
</li>
<li class="page-scroll">
About Us
</li>
<li class="page-scroll">
Contact Us
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- Header -->
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="intro-text">
<span class="name">PsyRevise - Teacher Login!</span>
<hr class="star-light">
<div class="text-center">
<div class="logo">Teacher: Log in here</div>
<div class="login-form-1">
<form id="login-form" class="text-left" action="teacher_login_submit.php" method="post">
<div class="login-form-main-message"></div>
<div class="main-login-form">
<div class="login-group">
<div class="form-group">
<label for="username" class="sr-only">Username</label>
<input type="text" class="form-control" id="username" name="username" placeholder="Username...">
</div>
<div class="form-group">
<label for="password" class="sr-only">Password</label>
<input type="password" class="form-control" id="password" name="password" placeholder="Password...">
</div>
</div>
<button type="submit" class="login-button"><i class="fa fa-chevron-right"></i></button>
</div>
</form>
</div>
</div>
</div>
</header>
<!-- Footer -->
<footer class="text-center">
<div class="footer-above">
<div class="container">
<div class="row">
<div class="footer-col col-md-4">
<h3>Location</h3>
<p>Gravesend<br>United Kingdom</p>
</div>
<div class="footer-col col-md-4">
<h3>Around the Web</h3>
<ul class="list-inline">
<li>
<i class="fa fa-fw fa-facebook"></i>
</li>
<li>
<i class="fa fa-fw fa-google-plus"></i>
</li>
<li>
<i class="fa fa-fw fa-twitter"></i>
</li>
<li>
<i class="fa fa-fw fa-linkedin"></i>
</li>
<li>
<i class="fa fa-fw fa-dribbble"></i>
</li>
</ul>
</div>
<div class="footer-col col-md-4">
<h3>About PsyReviser</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo nisl sed libero blandit mattis. Phasellus et nisl ac dui bibendum efficitur. Suspendisse mattis tempus porta. Curabitur quis velit non sem vulputate vulputate quis nec risus. Nam enim purus, molestie id tellus sed, bibendum tincidunt nib</a>.</p>
</div>
</div>
</div>
</div>
<div class="footer-below">
<div class="container">
<div class="row">
<div class="col-lg-12">
Copyright © PsyRevise 2015
</div>
</div>
</div>
</div>
</footer>
<!-- Scroll to Top Button (Only visible on small and extra-small screen sizes) -->
<div class="scroll-top page-scroll visible-xs visible-sm">
<a class="btn btn-primary" href="#page-top">
<i class="fa fa-chevron-up"></i>
</a>
</div>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="js/classie.js"></script>
<script src="js/cbpAnimatedHeader.js"></script>
<!-- Contact Form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/freelancer.js"></script>
</body>
Add value in the input type of button as below and try.
<button type="submit" class="login-button" value="submit"><i class="fa fa-chevron-right"></i></button>
im trying to make a site like http://html5up.net/overflow , the one thing that i really dont like about it is that you can scroll down before clicking the "proceed as anticipated" button . To me this kinda defeats the point of pressing the button and making it scroll for you, if you can just scroll down manually as well.
My question is, is there a way to make the rest of the page ONLY display as soon as you pressed that button, so the user is forced to press the button and see the automated scrolling before he can see the rest of the site.
I would like the same for the next button as well "act on this message"
any help is apreciated.
this is the code
<body>
<!-- Header -->
<section id="header">
<header>
<h1>Overflow</h1>
<p>By HTML5 UP</p>
</header>
<footer>
Proceed as anticipated
</footer>
</section>
<!-- Banner -->
<section id="banner">
<header>
<h2>This is Overflow</h2>
</header>
<p>A brand new site template designed by AJ for HTML5 UP.<br />
It’s fully responsive, built on skelJS, and of course entirely free<br />
under the Creative Commons license.</p>
<footer>
Act on this message
</footer>
</section>
<!-- Feature 1 -->
<article id="first" class="container box style1 right">
<img src="images/pic01.jpg" alt="" />
<div class="inner">
<header>
<h2>Lorem ipsum<br />
dolor sit amet</h2>
</header>
<p>Tortor faucibus ullamcorper nec tempus purus sed penatibus. Lacinia pellentesque eleifend vitae est elit tristique velit tempus etiam.</p>
</div>
</article>
<!-- Feature 2 -->
<article class="container box style1 left">
<img src="images/pic02.jpg" alt="" />
<div class="inner">
<header>
<h2>Mollis posuere<br />
lectus lacus</h2>
</header>
<p>Rhoncus mattis egestas sed fusce sodales rutrum et etiam ullamcorper. Etiam egestas scelerisque ac duis magna lorem ipsum dolor.</p>
</div>
</article>
<!-- Portfolio -->
<article class="container box style2">
<header>
<h2>Magnis parturient</h2>
<p>Justo phasellus et aenean dignissim<br />
placerat cubilia purus lectus.</p>
</header>
<div class="inner gallery">
<div class="row flush">
<div class="3u"><img src="images/thumbs/01.jpg" alt="" title="Ad infinitum" /></div>
<div class="3u"><img src="images/thumbs/02.jpg" alt="" title="Dressed in Clarity" /></div>
<div class="3u"><img src="images/thumbs/03.jpg" alt="" title="Raven" /></div>
<div class="3u"><img src="images/thumbs/04.jpg" alt="" title="I'll have a cup of Disneyland, please" /></div>
</div>
<div class="row flush">
<div class="3u"><img src="images/thumbs/05.jpg" alt="" title="Cherish" /></div>
<div class="3u"><img src="images/thumbs/06.jpg" alt="" title="Different." /></div>
<div class="3u"><img src="images/thumbs/07.jpg" alt="" title="History was made here" /></div>
<div class="3u"><img src="images/thumbs/08.jpg" alt="" title="People come and go and walk away" /></div>
</div>
</div>
</article>
<!-- Contact -->
<article class="container box style3">
<header>
<h2>Nisl sed ultricies</h2>
<p>Diam dignissim lectus eu ornare volutpat orci.</p>
</header>
<form>
<div class="row half">
<div class="6u"><input type="text" class="text" name="name" placeholder="Name" /></div>
<div class="6u"><input type="text" class="text" name="email" placeholder="Email" /></div>
</div>
<div class="row half">
<div class="12u">
<textarea name="message" placeholder="Message"></textarea>
</div>
</div>
<div class="row">
<div class="12u">
<ul class="actions">
<li>Send Message</li>
</ul>
</div>
</div>
</form>
</article><section id="footer">
<ul class="icons">
<li><span>Twitter</span></li>
<li><span>Facebook</span></li>
<li><span>Google+</span></li>
<li><span>Pinterest</span></li>
<li><span>Dribbble</span></li>
<li><span>LinkedIn</span></li>
</ul>
<div class="copyright">
<ul class="menu">
<li>© Untitled. All rights reserved.</li>
<li>Design: HTML5 UP</li>
</ul>
</div>
</section>
</body>
so basicly by clicking the proceed.... button i want to display the banner section, with the act... button. when pressing the act button i want to display all the rest of the site.
I have it semi fixed now but after the second click i cant scroll anymore, please help, www.fenrak.com i uloaded it so u can see
Use overflow:hidden style on the body element. Remove it with Javascript when clicking the button.
[Edit] Example:
In styles section:
body{
overflow:hidden;
}
In javascript section (using jquery):
$(document).ready(function(){
$("#BUTTON_ID").click(function(){
$("body").css("overflow", "visible");
});
});
(btw untested code)