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') }}">
Related
I have a portfolio / landing page with a scroll down icon / link in center of page; however, the effect when the page scrolls down is not working as intended. if I click on any link on the top navbar I get the scroll up effect I want. If someone can point out what I'm missing. This was done using bootstrap framework. here's the link to the page
http://techgeorge.org/
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<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="portfolio, projects, Information Technology, Web Development, Android Development">
<meta name="author" content="George Louis">
<title>Techgeorge - This is my portfolio. A list of some of my projects. Web Development, and Android Development</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/grayscale.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=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" 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]-->
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Navigation -->
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="#page-top">
<i class="fa fa-play-circle"></i> <span class="light">Tech</span>George
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
</li>
<li>
<a class="page-scroll" href="#myCarousel">Portfolio</a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#map">Map</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Intro Header -->
<header class="intro">
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<h2 id="sub-heading"><span class="light">Tech</span>George</h2>
<img src="img/mypic.png" class="mypic" alt="Smiley face" height="100" width="100">
<p>Here you'll find a list of my projects!</a>
</p>
<ul class="list-inline banner-social-buttons">
<li>
<i class="fa fa-facebook fa-fw"></i> <span class="network-name">Facebook</span>
</li>
<li>
<i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span>
</li>
<li>
<i class="fa fa-youtube left fa-fw"></i> <span class="network-name">Youtube</span>
</li>
</ul>
<!-- scroll down button -->
<a href="#myCarousel" class="btn btn-circle js-scroll-trigger">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<br>
<!-- Page Content -->
<div class="container">
<!-- Page Header -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">My Projects
<small>Web Development & Android Applications</small>
</h1>
</div>
</div>
<!-- /.row -->
<!-- Projects Row -->
<div class="row">
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="img/sohotechnology.png" alt="">
</a>
<h3>sohotech</h3>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="img/techgeorge.org.png" alt="">
</a>
<h3>
techgeorge
</h3>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="img/calculator.png" alt="">
</a>
<h3>
Web Calculator
</h3>
</div>
</div>
<!-- /.row -->
<!-- Projects Row -->
<div class="row">
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="img/simon-game.png" alt="">
</a>
<h3>
Simon Game
</h3>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="img/clock.png" alt="">
</a>
<h3>
Pomodoro Clock
</h3>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="img/tictactoe.png" alt="">
</a>
<h3>
Tic Tac Toe
</h3>
</div>
</div>
<!-- /.row -->
<!-- Projects Row -->
<div class="row">
<div class="col-md-4 portfolio-item">
<img class="img-responsive" src="img/netDroid.png" alt="">
<h3>
Android: Netdroid
</h3>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="img/jlanscan.png" alt="">
</a>
<h3>
JLanScan
</h3>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="img/wiki-search.png" alt="">
</a>
<h3>
Wiki Search
</h3>
</div>
</div>
<!-- /.row -->
<hr>
<!-- /.row -->
</div><!-- /.carousel -->
<!-- About Section -->
<section id="about" class="container content-section text-center">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<img src="img/me.png" alt="Smiley face" height="100" width="100">
<h2>About Me</h2>
<p>My name is George and I'm a long time IT and Developer who venture in many areas of Information Technology. I am a certified Front End Web Developer from freecodecamp.org. And I hold several certification from Microsoft. I spend my days developing apps, making youtube video tutorials youtube channel, and writing for my blog PCtechtips.org</p>
<p>I have experience in Information Technology and Developing Web and Mobile Apps. You can contact me # georgelouis825#gmail.com</p>
<p>This site was developed using Bootstrap framework. And all pictures are mine!</p>
</div>
</div>
</section>
<!-- Download Section
<section id="download" class="content-section text-center">
<div class="download-section">
<div class="container">
<div class="col-lg-8 col-lg-offset-2">
<h2>Download Grayscale</h2>
<p>You can download Grayscale for free on the preview page at Start Bootstrap.</p>
Visit Download Page
</div>
</div>
</div>
</section> -->
<!-- Map Section -->
<div id="map"></div>
<!-- Footer -->
<footer>
<div class="container text-center">
<p>Copyright © techgeorge.org 2017</p>
</div>
</footer>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<!-- Google Maps API Key - Use your own API key to enable the map feature. More information on the Google Maps API can be found at https://developers.google.com/maps/ -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCRngKslUGJTlibkQ3FkfTxj3Xss1UlZDA&sensor=true"></script>
<!-- Custom Theme JavaScript -->
<script src="js/grayscale.js"></script>
</body>
</html>
I gave an extra class to the icon and removed href
<a class="btn btn-circle js-scroll-trigger scroll-down">
<i class="fa fa-angle-double-down animated"></i>
</a>
After that i wrote this JS
$(function() {
$('.scroll-down').click (function() {
$('html, body').animate({scrollTop: $('#myCarousel').offset().top }, 'slow');
return false;
});
});
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 am making profile ui for mobile. I am using materialize css for that.. But in my case it's not working. I mean the tabs are not working.
So here is the code.
http://codepen.io/anon/pen/VmmJWv
html:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!DOCTYPE html>
<html>
<head>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<title>Profile</title>
<link rel="stylesheet" href="profile.css">
</head>
<body>
<div class="nav">
</div>
<div class="profile">
<div class="cover-img">
<img id="cover-img" src="https://cdn2.xyztimes.com/wp-content/uploads/2015/05/Material-Wallpaper-11.1-696x407.png" width="100%" height="150px" >
</div>
<div class="profile-meta z-depth-3">
<div class="profile-img">
<img id="profile-img" src="http://orig02.deviantart.net/e65e/f/2016/145/0/f/profile_picture_by_the_spooky_man-da3t6n4.png" height="100px" width="100px">
</div>
<div class="profile-name">
<p class="profile-name">Profile Name</p>
</div>
<div class="profile-id">
<p class="profile-id">Profile ID</p>
</div>
<div class="profile-desc">
<p class="profile-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sollicitudin lectus, et gravida mauris. </p>
</div>
<ul class="profile-stats">
<a><li><span>1m</span>Followers</li></a>
<a><li><span>100</span>Following</li></a>
<a><li><span>758</span>Posts</li></a>
<a><li><span>84</span>Helpful</li></a>
</ul>
<div class="profile-btn"><a class="waves-effect waves-light btn center-btn purple">Follow</a></div>
</div>
</div>
<br>
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s3">Test 1</li>
<li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
<li class="tab col s3">Test 4</li>
</ul>
</div>
<div id="test1" class="col s12">Test 1</div>
<div id="test2" class="col s12">Test 2</div>
<div id="test4" class="col s12">Test 4</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('ul.tabs').tabs();
});
$(document).ready(function(){
$('ul.tabs').tabs('select_tab', 'tab_id');
});
</script>
Thanx for the help........
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s3">Test 1</li>
<li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
<li class="tab col s3">Test 4</li>
</ul>
</div>
<div id="test1" class="col s12">Test 1</div>
<div id="test2" class="col s12">Test 2</div>
<div id="test4" class="col s12">Test 4</div>
</div>
<script>
var el = document.querySelector('.tabs');
var instance = M.Tabs.init(el, {});
</script>
Don't forget to add jQuery <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
You just needed 1 modification in you html.
You are missing to include the Jquery which is required. You can check these issues easily in developer console.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!DOCTYPE html>
<html>
<head>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<title>Profile</title>
<link rel="stylesheet" href="profile.css">
</head>
<body>
<div class="nav">
</div>
<div class="profile">
<div class="cover-img">
<img id="cover-img" src="https://cdn2.xyztimes.com/wp-content/uploads/2015/05/Material-Wallpaper-11.1-696x407.png" width="100%" height="150px" >
</div>
<div class="profile-meta z-depth-3">
<div class="profile-img">
<img id="profile-img" src="http://orig02.deviantart.net/e65e/f/2016/145/0/f/profile_picture_by_the_spooky_man-da3t6n4.png" height="100px" width="100px">
</div>
<div class="profile-name">
<p class="profile-name">Profile Name</p>
</div>
<div class="profile-id">
<p class="profile-id">Profile ID</p>
</div>
<div class="profile-desc">
<p class="profile-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sollicitudin lectus, et gravida mauris. </p>
</div>
<ul class="profile-stats">
<a><li><span>1m</span>Followers</li></a>
<a><li><span>100</span>Following</li></a>
<a><li><span>758</span>Posts</li></a>
<a><li><span>84</span>Helpful</li></a>
</ul>
<div class="profile-btn"><a class="waves-effect waves-light btn center-btn purple">Follow</a></div>
</div>
</div>
<br>
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s3">Test 1</li>
<li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
<li class="tab col s3">Test 4</li>
</ul>
</div>
<div id="test1" class="col s12">Test 1</div>
<div id="test2" class="col s12">Test 2</div>
<div id="test4" class="col s12">Test 4</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('ul.tabs').tabs();
});
$(document).ready(function(){
$('ul.tabs').tabs('select_tab', 'tab_id');
});
</script>
Updated Codepen : http://codepen.io/anon/pen/mOONjj
Had the same problem. On my case there was another JS code interrupting the Materialize JS. Avoid unnecessary JS code for the page containing the tabs.
on my navigation bar i have 5pages Home,About US,Recently Passed,Areas,Contact
The contact seems to go underneath.
i have tried making the font smaller but i still haven thad any lucky would someone pleas ebeable to help me out.
here is the link to the website for a preview - http://leetaxi.webuda.com/index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Graduate School Of Motoring</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="css/scripts.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/grid.css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css">
<!-- Change Color Stylesheet Here -->
<link rel="stylesheet" href="css/colors/default.css">
<!-- TEMPLATE STYLESHEETS -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/layout.css">
<!-- REVOLUTION BANNER CSS SETTINGS -->
<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<!--[if lt ie 7]>
<p class="browsehappy">you are using an <strong>outdated</strong> browser. please upgrade your browser to improve your experience.</p>
<![endif]-->
<div class="preloader"><i class="fa fa-spinner spin"></i></div>
<!-- SLIDER -->
<div class="slider-wrapper">
<div class="rev-slider">
<ul>
<!-- SLIDE #1 -->
<li data-transition="fade" data-masterspeed="1000" data-delay="6000" >
<!-- BACKGROUND -->
<img src="img/slider/bg-1.jpg" alt="">
<!-- BIG TEXT -->
<h1 class="tp-caption caption-title2 sft"
data-x="center"
data-y="center"
data-speed="1000">
<img src="img/slider/main.png" width="390" height="108">
</h1>
<!-- LIST -->
<div class="tp-caption slider-list sfb"
data-y="center"
data-x="center"
data-voffset="50"
data-speed="500"
data-splitin="chars"
data-splitout="chars"
data-start="1500"
data-elementdelay="0.04">
</div><!-- End .tp-caption -->
</li>
<li data-transition="fade" data-masterspeed="1000" data-delay="6000" >
<!-- BACKGROUND -->
<img src="img/slider/bg-2.jpg" alt="">
<!-- BIG TEXT -->
<h1 class="tp-caption caption-title2 sft"
data-x="center"
data-y="center"
data-speed="1000">
<img src="img/slider/main.png" width="390" height="108">
</h1>
<!-- LIST -->
<div class="tp-caption slider-list sfb"
data-y="center"
data-x="center"
data-voffset="50"
data-speed="500"
data-splitin="chars"
data-splitout="chars"
data-start="1500"
data-elementdelay="0.04">
</div><!-- End .tp-caption -->
</li>
<!-- SLIDE #2 -->
<li data-transition="fade" data-masterspeed="1000" data-delay="6000" >
<!-- BACKGROUND -->
<img src="img/slider/bg-3.jpg" alt="">
<!-- BIG TEXT -->
<h1 class="tp-caption caption-title2 sft"
data-x="center"
data-y="center"
data-speed="1000">
<img src="img/slider/main.png" width="390" height="108">
</h1>
<!-- LIST -->
<div class="tp-caption slider-list sfb"
data-y="center"
data-x="center"
data-voffset="50"
data-speed="500"
data-splitin="chars"
data-splitout="chars"
data-start="1500"
data-elementdelay="0.04">
</div><!-- End .tp-caption -->
</li>
<!-- SLIDE #3 -->
<li data-transition="fade" data-masterspeed="1000" data-delay="6000" >
<!-- BACKGROUND -->
<img src="img/slider/bg-4.jpg" alt="">
<!-- BIG TEXT -->
<h1 class="tp-caption caption-title2 sft"
data-x="center"
data-y="center"
data-speed="1000">
<img src="img/slider/main.png" width="390" height="108">
</h1>
<!-- LIST -->
<div class="tp-caption slider-list sfb"
data-y="center"
data-x="center"
data-voffset="50"
data-speed="500"
data-splitin="chars"
data-splitout="chars"
data-start="1500"
data-elementdelay="0.04">
</div><!-- End .tp-caption -->
</li>
</ul>
</div><!-- End .rev-slider -->
</div><!-- End .slider-wrapper -->
<div class="header">
<div class="container">
<!-- LOGO -->
<a href="index.html" class="logo">
<img src="img/logo.png" width="70" alt="Horizon">
</a>
<ul id="sn" class="main_menu">
<li><a class="current" href="index.html">Home</a></li>
<li>About</li>
<li>Recently Passed</li>
<li>Areas</li>
<li>Contact</li>
</ul><!-- End .main-menu -->
</div><!-- End .container -->
</div><!-- End .header -->
<!-- ABOUT -->
<section id="about" class="sect-1">
<div class="container">
<div class="section-title">
<h1 class="title">About Us</h1>
<p class="description">These are some of the services we offer
</li></div></p>
<div align="center"><ul class="features">
<p>At Graduate School of Motoring, we have been providing quality driving instruction to all abilities for over 20 years.</p>
<p>We have both male and female instructors to make you feel comfortable and at ease at all times during your learning experience. Our lessons are always challenging, fun and kept at a pace to suit you. At Graduate School of Motoring, we understand how important it is to have a driving instructor that matches your personality.</p>
<p>This is why we have male and female instructors available, and all our instructors are friendly and patient. We know how unnerving driving a car can be, so we always work with you, instantly recognising your strengths and working on the weaknesses.</p>
<p>We also have refresher lessons available for all ages.</p>
<p>Why choose Graduate School of Motoring?<br>
Incredibly quick pass rate<br>
Male and female instructors available<br>
Long serving company with bags of experience<br>
Great block deals<br>
Refresher lessons available<br>
Friendly and patient instructors<br>
1st lesson is free of charge<br>
All ages welcome<br>
Pass plus available</p>
</ul>
</div>
</div><!-- End .container -->
</section>
<!-- PORTFOLIO -->
<section id="portfolio" class="portfolio-wrapper sect-2">
<div class="container">
<div class="section-title">
<h1 class="title">Recent Passes</h1>
<p class="description">These are some of our pupils that have recently passed.</p>
</div>
<!-- CATEGORIES -->
<ul class="filter-menu">
<li class="selected" data-cat="*">All</li>
</ul><!-- End .filter-menu -->
</div><!-- End .container -->
<!-- HOOK FOR PROJECT VIEWER -->
<div class="project-wrapper"></div>
<div class="container">
<div class="portfolio clearfix">
<!-- ITEM 1 -->
<div class="port-item showme" data-cat="branding">
<div class="port-overlay">
<img src="img/portfolio/port-1.jpg" alt="Portfolio Image">
<a class="project-btn" href="single-project.html"><i class="fa fa-search"></i></a>
</div>
<div class="port-info">
<i class="fa fa-camera"></i>
<span class="port-cat">James Youells</span>
<span class="port-name">Passed</span>
</div>
</div><!-- End port item -->
<!-- ITEM 2 -->
<div class="port-item showme" data-cat="photography">
<div class="port-overlay">
<img src="img/portfolio/port-2.jpg" alt="Portfolio Image">
<a class="project-btn" href="single-project-full.html"><i class="fa fa-search"></i> </a>
</div>
<div class="port-info">
<i class="fa fa-camera"></i>
<span class="port-cat">Lisa Jones</span>
<span class="port-name">Passed</span>
</div>
</div><!-- End port item -->
<!-- ITEM 3 -->
<div class="port-item showme" data-cat="branding">
<div class="port-overlay">
<img src="img/portfolio/port-3.jpg" alt="Portfolio Image">
<a class="lightbox-btn" data-pp="prettyPhoto" href="img/portfolio/port-3.jpg"><i class="fa fa-search"></i></a>
</div>
<div class="port-info">
<i class="fa fa-camera"></i>
<span class="port-cat">Sam Smith</span>
<span class="port-name">Passed</span>
</div>
</div><!-- End port item -->
<!-- ITEM 4-->
<div class="port-item showme" data-cat="art">
<div class="port-overlay">
<img src="img/portfolio/port-4.jpg" alt="Portfolio Image">
<a class="project-btn" href="single-project.html"><i class="fa fa-search"></i></a>
</div>
<div class="port-info">
<i class="fa fa-camera"></i>
<span class="port-cat">Samantha Tom</span>
<span class="port-name">Passed</span>
</div>
</div><!-- End port item -->
<!-- ROW 2 -->
<!-- ITEM 5 --><!-- End port item -->
<!-- ITEM 6 --><!-- End port item -->
<!-- ITEM 7 --><!-- End port item -->
<!-- ITEM 8--><!-- End port item -->
<!-- ROW 3 -->
<!-- ITEM 9 --><!-- End port item -->
<!-- ITEM 10 --><!-- End port item -->
<!-- ITEM 11 --><!-- End port item -->
<!-- ITEM 12 --><!-- End port item -->
</div><!-- End .portfolio -->
</div><!-- End .container -->
Load more
</section>
<!-- CALLOUT -->
<section id="services" class="sect-1">
<div class="container">
<div class="callout">
<h3 class="title">We can help you if you are in: </h3>
<p> </p>
<h3 class="title">Call Us </h3>
</div><!-- End .callout -->
<ul class="feature-imgs">
<li class="one-third animated" data-animate="flipInY">
<div class="feature-hex">
<img src="img/features/features-1.jpg" alt="feature image 1" />
</div>
<h4 class="title">Gravesend<br>Dartford<br>Swanscombe<br>Darenth</h4>
<p> </p>
</li>
<li class="one-third animated middle" data-animate="flipInY" data-animate-delay="1500">
<div class="feature-hex">
<img src="img/features/features-2.jpg" alt="feature image 2" />
</div>
<h4 class="title">Medway Towns<br>New Ash Green<br>Borough Green<br>Wrotham</h4>
</li>
<li class="one-third animated last" data-animate="flipInY" data-animate-delay="2000">
<div class="feature-hex">
<img src="img/features/features-3.jpg" alt="feature image 2" />
</div>
<h4 class="title">Sevenoak<br>Sidcup<br>Erith<br>Belverdere</h4>
</li>
</ul>
</div><!-- End .container -->
</section>
<!-- TESTIMONIALS --><!-- CLIENTS -->
<div class="clients"><!-- End .container -->
</div><!-- End .clients -->
<!-- TEAM -->
<section class="sect-2">
<div class="container">
<div class="section-title">
<h3 class="title">OUR DRIVERS</h3>
</div>
<ul class="team">
<li class="one-fourth animated" data-animate="flipInY">
<div class="img-wrap">
<img src="img/team/team-1.jpg" alt="Team Member">
<i class="fa fa-camera"></i>
</div>
<span class="team-name">John Green</span>
<span class="team-job"></span>
<ul class="social-icons">
</ul><!-- End .social-icons -->
</li><!-- End .one-fourth -->
<li class="one-fourth animated" data-animate="flipInY" data-animate-delay="1000">
<div class="img-wrap">
<img src="img/team/team-2.jpg" alt="Team Member">
<i class="fa fa-tint"></i>
</div>
<span class="team-name">Peter Brown</span>
<span class="team-job"></span>
<ul class="social-icons">
</ul><!-- End .social-icons -->
</li><!-- End .one-fourth -->
<li class="one-fourth animated" data-animate="flipInY" data-animate-delay="1500">
<div class="img-wrap">
<img src="img/team/team-3.jpg" alt="Team Member">
<i class="fa fa-coffee"></i>
</div>
<span class="team-name">Jane Red</span>
<span class="team-job">r</span>
<ul class="social-icons">
</ul><!-- End .social-icons -->
</li><!-- End .one-fourth -->
<li class="one-fourth last animated" data-animate="flipInY" data-animate-delay="2000">
<div class="img-wrap">
<img src="img/team/team-4.jpg" alt="Team Member">
<i class="fa fa-rocket"></i>
</div>
<span class="team-name">Richard Blue</span>
<span class="team-job"></span>
<ul class="social-icons">
</ul><!-- End .social-icons -->
</li><!-- End .one-fourth -->
</ul><!-- End .team -->
</div><!-- End .container -->
</section>
<!-- OUR SKILLS -->
<section id="skills" class="sect-1"></section>
<!-- CAllOUT --><!-- End .image-callout -->
<!-- PRICING --><!-- RECENT POSTS --><!-- CONTACT -->
<div class="section-title">
<h3 class="title">Contact Us</h3>
<p class="description">Please use the contact form below to email us.</p>
</div>
<form method="post" action="php/send_message.php" class="contact-form">
<div class="one-half animated" data-animate="fadeInDown">
<span>
<input type="text" name="name" id="name" placeholder="name">
</span>
<span>
<input type="email" name="email" id="email" placeholder="email">
</span>
<span>
<input type="text" name="subject" id="subject" placeholder="subject">
</span>
</div><!-- End .one-third -->
<div class="one-half last animated" data-animate="fadeInDown" data-animate-delay="1000">
<span>
<textarea name="message" id="message" placeholder="message"></textarea>
</span>
</div><!-- End .one-half -->
<button id="submit" type="submit" class="contact-button animated" data-animate="fadeInDown" data-animate-delay="1000">Send Message</button>
</form>
</div><!-- End .container -->
</section>
<!-- MAP -->
<div class="map-button">
<i class="fa fa-map-marker"></i> LOCATE US ON THE MAP
</div>
<div class="map-wrapper">
<div id="google-map"></div>
</div><!-- End .map-wrapper -->
<!-- MAP LOCATION WINDOW -->
<div id="content">
<div id="siteNotice">
</div>
<h2 id="firstHeading" class="firstHeading">Graduate School Of Motoring</h2>
<div id="bodyContent">
<p>This is us, drop by sometime.</p>
</div>
</div><!-- End #content -->
<section class="footer">
<img class="footer-logo" src="img/logo.png" width="50" alt="">
<div class="address">
Tel: 01474 332225</div><!-- End .address -->
<ul class="social-icons">
</ul>
<div class="copy">© 2014 Gradute School Of Motoring</div>
</section>
<!-- JQUERY -->
<script src="js/vendor/jquery.min.js"></script>
<!-- PLUGINS -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="js/scripts.js"></script>
<script src="js/plugins.js"></script>
<!-- THEME SCRIPT -->
<script src="js/main.js"></script>
Thanks a lot
In your case, just make the <ul> with a width wide enough to place all tabs in one line.
Simply add width: 90%; and text-align: center; to your .main_menu CSS class.
u can remove display: inline-block; and float: right; from .main_menu class and add margin-left to the list with at last the width of the logo, plus text-align: right; if u want menu positions aligned to the right.
so this:
.main_menu {
display: inline-block;
float: right;
font-size: 12px;
margin-top: 0;
position: relative;
}
now looks like this:
.main_menu {
font-size: 12px;
margin-top: 0;
position: relative;
background: red;
margin-left: 150px; /* logo width + some padding from it */
text-align: right;
}
I'm attempting to add an additional slide to my slideshow and for some reason it seems to merge two slides. I'm not sure exactly what I've done to cause this. Any suggestions are greatly appreciated.
Slider Source:
<!-- BEGIN ASYNC SLIDER -->
<div id="content-slider">
<ul id="async-slider">
<li class="slide">
<div class="three-fifth fl-left" style="width: 425px; height: 242px">
<h2>Brighter World Lighting - NY</h2>
<h3><font size="5"><i>"A not just for profit company!"</i></font></h3>
<p>...</a>
</div>
<img class="fl-right" src="img/logolrg.png" alt="image" width="468" height="329" />
</li>
<li class="slide">
<div class="three-fifth fl-left">
<h2> </h2>
<img class="fl-right" src="img/HOR1.jpg" alt="image" width="450" height="320" />
<h3> </h3>
<p>...</a>
</div>
</li>
<li class="slide">
<div class="three-fifth fl-left">
<h2>Energy Efficient Lighting Products to fit your needs</h2>
<h3><font size="5"><i>T8, T12, E27, Outdoor Lighting, etc</font></i></h3>
<p>...</a>
</div>
<img class="fl-right" src="img/sliders/async/2Transparent.png" alt="image" width="347" height="305" />
</li>
<li class="slide">
<div class="three-fifth fl-left">
<h2> </h2>
<img class="fl-right" src="img/REBATE.jpg" alt="image" width="450" height="321" />
<h3> </h3>
<p>...</a>
</div>
</li>
<li class="slide">
<div class="three-fifth fl-left">
<h2>Tax Credits, Rebates, Financing and Grants available for those who qualify</h2>
<div>
<h3><font size="5"><i>Federal, state and local tax incentives available<br />
Utility company discounts and rebates
<br />
Project financing available to offset costs vs. Savings</font>
</div>
<h3></a>
</h3></div>
<img class="fl-right" src="img/sliders/async/3.gif" alt="image" />
</li>
<li class="slide">
<div class="three-fifth fl-left">
<h2> </h2>
<img class="fl-right" src="img/REBATE.jpg" alt="image" width="450" height="321" />
<h3> </h3>
<p>...</a>
</div>
</li>
<li class="slide">
<img class="fl-left" src="img/sliders/async/4Transparent.png" alt="image" width="347" height="305" />
<div class="three-fifth last fl-right">
<h2>Allow us to create a comprehensive energy partnership program profile for your business</h2>
<h3><font size="5"><i>Calculate your Energy Savings in Real Time!</i></font></h3>
<p>...</a>
</div>
</li>
</ul>
<div class="clear"></div><!-- end clearfix -->
</div><!-- end content-slider -->
<!-- END ASYNC SLIDER -->
Screenshot of merged slides:
(you may want to visit the live site to compare proper and improper slides)