I have multiple webpages that have the same header:
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.16/af-2.2.2/b-
1.5.1/b-colvis-1.5.1/b-flash-1.5.1/b-html5-1.5.1/b-print-1.5.1/cr-1.4.1/fc-
3.2.4/fh-3.1.3/kt-2.3.2/r-2.2.1/rg-1.0.2/rr-1.2.3/sc-1.4.4/sl-
1.2.5/datatables.min.css"/>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js">
</script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js">
</script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-
2.5.0/dt-1.10.16/af-2.2.2/b-1.5.1/b-colvis-1.5.1/b-flash-1.5.1/b-html5-
1.5.1/b-print-1.5.1/cr-1.4.1/fc-3.2.4/fh-3.1.3/kt-2.3.2/r-2.2.1/rg-1.0.2/rr-
1.2.3/sc-1.4.4/sl-1.2.5/datatables.min.js"></script>
Since these references change with time, I'd like to embed this code in 1 html page and then reference that page in the multiple webpages. That seems much easier than going in to 20 html files and updating manually, as needed.
I've scoured around and can't find what is probably an obvious answer. Is there a way to do this with an "include" statement?
Any help is much appreciated!!!!
First question, what framework/language you're using to develop your website?
What you're trying to do is actually creating web design template.
For example in html with php,
<html lang="en">
<!-- Top Bar -->
<?php require 'TopBar.php';?>
<!-- Main Navigation + LOGO Area -->
<?php require 'MainNavigation.php';?>
<!-- Banner -->
<header class="flat-header">
<!-- Banner Content-->
<div class="header-content">
<div class="header-content-inner">
<h1 class="homeHeading animated slideInDown">Singapore Dreams - Our Business.<span>
</span></h1>
<!--<h1 class="homeHeading animated slideInDown">Financial Consulting isn’t a thing we do. <span>-->
<!--It’s the thing that runs our business.</span></h1>-->
<div class="konnect-button-1 animated bounceIn">Read More</div>
</div>
</div>
</header>
<!--Top Call to Action-->
<?php require 'indexCallToAction.php';?>
<body>
//normal html file here
</body>
</html>
TopBar.php
<?php
/**
* Created by PhpStorm.
* User: Marcia
* Date: 23/5/2017
* Time: 10:03 PM
*/
include 'var.php';
echo'
<head>
<!-- Meta -->
<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="Marcia Ong">
<meta name="keywords" content="">
<!-- Favocon -->
<link href="img/sg-alliance-logo.png" rel="shortcut icon" type="image/x-icon"/>
<!-- Title -->
<title>SG </title>
<!-- Bootstrap Core CSS -->
<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom icon Fonts -->
<link href="assets/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Animated CSS -->
<link href="css/animate.css" media="all" rel="stylesheet" type="text/css" />
<!-- Main CSS -->
<link href="css/default.css" rel="stylesheet">
<!-- 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 -->
<body>
<!-- Pre Loader -->
<div class="loading">
<div class="loader"></div>
</div>
<div class="konnect-info">
<div class="container">
<div class="row">
<!-- Top bar Left -->
<div class="col-md-6 col-sm-8 hidden-xs">
<ul>
<li><i class="fa fa-paper-plane" aria-hidden="true"></i>';echo $EnquiryEmail;echo ' </li>
<li class="li-last"> <i class="fa fa-volume-control-phone" aria-hidden="true"></i>'; echo"$contactNum"; echo '</li>
</ul>
</div>
<!-- Top bar Right -->
<div class="col-md-6 col-sm-4">
<ul class="konnect-float-right">
<li class="li-last">
<a target="_blank" href="https://twitter.com/Sg_Alliance1"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a target="_blank" href="https://www.facebook.com/SG-Alliance-133770687187613/"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a target="_blank" href="https://www.instagram.com/sg.alliance/?hl=en"> <i class="fa fa-instagram"></i> </a></li>
</ul>
</div>
</div>
</div>
</div>
' //end of echo
?>
<!--<a target="_blank" href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a>-->
<!--<a target="_blank" href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>-->
Related
Guys I am stuck in making a top info bar where I can put all the necessary details like phone number, mail id and some social icons, and I am using Bootstrap 4.1.3 and Font-awesome 5.5 but whenever I try to put a hyperlink after the icon it comes down to the next line. How to properly align it in one line. I have tried a lots of methods but got no results so far.
Please check the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Anything</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="top-info d-sm-none d-md-block">
<div class="col-md-8">
<ul class="list-inline">
<li class="list-inline-item"><i class="fas fa-sign-in-alt"></i><span>Login</span></li>
<li class="list-inline-item"><i class="fas fa-sign-in-alt"></i><span>Login</span></li>
<li class="list-inline-item"><i class="fas fa-sign-in-alt"></i><span>Login</span></li>
</ul>
</div>
<div class="col-md-4">
<i class="fas fa-sign-in-alt"></i><span>Login</span>
</div>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</html>
I changed some things in your code, i added the class col-md-8 in the faulty div and so the code is this one <div class="col-md-8">. You can also check the result here https://codepen.io/ekk0/pen/xyOoBB?editors=1000. My guess is that because originally you used col-md-4 it would be a bit buggy. Hope it helps!
Include i tag inside span tag like this
<span> <i class="fas fa-sign-in-alt">Login</i></span>
https://jsfiddle.net/isubhamb/jztosgbd/13/
i am used card materialize in my page the page looks like this
cards
you can see my card content and description is in my image, i follow guide from materialize but it not work in my page
this is my code
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicons-->
<link rel="apple-touch-icon-precomposed" href="<?php echo base_url(); ?>assets/home-user/assets/img/favicon/apple-touch-icon-152x152.png">
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="<?php echo base_url(); ?>assets/home-user/assets/img/favicon/mstile-144x144.png">
<link rel="icon" href="<?php echo base_url(); ?>assets/home-user/assets/img/favicon/favicon-32x32.png" sizes="32x32">
<title>Home</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Materialize core CSS -->
<link href="<?php echo base_url(); ?>assets/home-user/materialize/css/materialize.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="assets/js/html5shiv.js"></script>
<script src="assets/js/respond.min.js"></script>
<![endif]-->
<link href="<?php echo base_url(); ?>assets/home-user/template.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col s12 m7">
<div class="card">
<div class="card-image">
<img src="http://materializecss.com/images/sample-1.jpg">
</div>
<div class="card-content">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
</div>
</div>
</div>
</div>
<script src="<?php echo base_url(); ?>assets/home-user/assets/js/jquery.min.js"></script>
<script src="<?php echo base_url(); ?>assets/home-user/materialize/js/materialize.js"></
<script src="<?php echo base_url(); ?>assets/home-user/index.js"></script>
</body>
i dont know whats wrong with my code thanks
load materialize css and js files and also jquery file... here is a working snippet
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 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>
<div class="container">
<div class="row">
<div class="col s12 m7">
<div class="card">
<div class="card-image">
<img src="http://materializecss.com/images/sample-1.jpg">
</div>
<div class="card-content">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
</div>
</div>
</div>
</div>
I'm working on a site and my goal is to make it responsive by reducing the background associated by when the site is reduced.
I want the grey area to reduce simultaneously when the site is reduced horizontally.
How can I achieve this?
Here is my code so far. I'm using bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tags -->
<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="#CurrentPage.siteDescription">
<title>#CurrentPage.pageTitle|Gymnasiestudera</title>
<!-- Fonts -->
<link href="//fonts.googleapis.com/css?family=Merriweather:400,700,300,900" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet" type="text/css">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/css/reset.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/fanoe.css">
<link rel="stylesheet" type="text/css" href="/css/style.css">
<!-- HTML5 shim and Respond.js for 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="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper col-md-12 col-lg-8 col-lg-offset-2">
<header>
<div class="row col-md-12">
<nav class="entry-links">
<ul>
<li class="">
För elever
</li>
<li>
För skolpersonal
</li>
<li>
Ungdom och elevdatabas
</li>
</ul>
</nav>
</div>
<div class="row">
<div class="col-xs-8 col-sm-12 col-md-4">
<a href="#home.Url">
<div class="brand" style="background-image:url('#(home.SiteLogo)?height=100&width=700&')"></div>
</a>
</div>
</div>
<div class="row">
<div class="col-md-12 main-nav">
<nav id="cbp-hrmenu" class="meny cbp-hrmenu col-md-10 col-md-offset-1">
#{ Html.RenderPartial("MainNavigation"); }
</nav>
</div>
<br />
<br />
</div>
<div class="container-fluid">
<div class="container">
</div>
</div>
<div id="toggle" class="toggle">
<span></span>
</div>
</header>
#RenderBody()
<div class="foot-line-background">
<div class="foot"></div>
</div>
<footer class="field dark">
<div class="row">
<div class="col-md-4">
<br />
#home.sidfotKolumn1
</div>
<div class="col-md-4">
<br />
#home.sidfotKolumn2
</div>
<div class="col-md-4">
<br />
#home.sidfotKolumn1
</div>
</div>
</footer>
<!-- Javascripts -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/scripts/fanoe.js"></script>
<script src="/scripts/Custom.js"></script>
</div>
</body>
</html>
If I'm understanding you correctly, you really just need to have a max-width on your "content container" to do the job. As the window width decreases, the gray area will also decrease until the container takes up the full window.
.my-container {
max-width: 800px;
}
http://jsfiddle.net/agentfitz/6s4u14yd/1/
Goody day guys, i am trying create a page using bootstrap and interactjs, yes, I've heard about jQueryUI's draggable and droppable, but it's conflicts with the main jQuery file, is a bit annoying so i turned to interactjs, and it actually did what i wanted it to do per se, the problem is that i can't drag an element across two columns(sidebar to main panel), what happens when i try is that the element goes "Underneath" the other column/panel.
The code that's responsible for moving the element
This is the HTML code, the element starts at the element with the angular repeat directive (div... ng-repeat=...)
<!DOCTYPE html>
<html lang="en" ng-app="Drag-on IDE">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="Integrated Learning Object Development Environment">
<meta name="author" content="">
<link rel="icon" href="http://getbootstrap.com/favicon.ico">
<title>Drag-on IDE</title>
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[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>
<div ng-controller="LEQueryController">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div id="navbar" class="navbar-collapse collapse">
<div class="nav navbar-nav navbar-right">
<li><button class="btn btn-default btn-info">Upload a Learning Element</button></li>
<li><button class="btn btn-default btn-success">Upload Material</button></li>
</div>
<form class="navbar-form navbar-left" ng-submit="controller.query()">
<input class="form-control" placeholder="Search Learning Element..." type="text" ng-model="searchText">
</form>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<!--SIDE BAR-->
<div class="sidebar col-sm-4 col-md-3">
<div class="list-group nav nav-sidebar" >
<a href="#" class="list-group-item draggable" ng-repeat="result in results">
<span class="badge">{{result.type}}</span>
<span class="badge">{{result.size}}</span>
<h4>
{{result.title}}
<br /><small>{{result.author}}</small>
<br /><small>{{result.publishingDate}}</small>
</h4>
</a>
</ul>
</div>
</div>
<!--SIDE BAR END-->
<div class="col-sm-8 col-sm-offset-4 col-md-9 col-md-offset-3 main">
<div class="container" id="lo-workspace">
<div class="draggable jumbotron text-center">
<h1>Drag-on IDE <small>by Team Akura</small></h1>
</div>
<div class="jumbotron">
<h1>Drag-on IDE <small>by Team Akura</small></h1>
</div>
<div class="jumbotron">
<h1>Drag-on IDE <small>by Team Akura</small></h1>
</div>
<div class="jumbotron">
<h1>Drag-on IDE <small>by Team Akura</small></h1>
</div>
<div class="jumbotron">
<h1>Drag-on IDE <small>by Team Akura</small></h1>
</div>
<div class="jumbotron">
<h1>Drag-on IDE <small>by Team Akura</small></h1>
</div>
<div class="jumbotron">
<h1>Drag-on IDE <small>by Team Akura</small></h1>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
******* ******* ***** *******
* * * * * * *
* * * * * * *
* * * * * * *
* ******* ***** *******
TO : Alfonso
Draggable mechanism is acting like a *,
complaining something like "$(...).draggable isn't a function because i'm having my period today".
-->
<script type="text/javascript" src="node_modules/jquery/dist/jquery-1.9.1.js"></script>
<script type="text/javascript" src="node_modules/bootstrap/dist/bootstrap.min.js"></script>
<script type="text/javascript" src="node_modules/interact.js/interact.js"></script>
<script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="utilities.js"></script>
<script type="text/javascript" src="controllers.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="ie10-viewport-bug-workaround.js"></script>
</body></html>
What causes this problem? how do i fix it? thanks.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have 2 different html files (located in the same directory). One file works perfectly for my menu. http://gyazo.com/3ee7c319ceb57bb1e91efb16cc93c28d
However, when I COPY AND PASTE the exact same code into the other html file, the menu looks like this: http://gyazo.com/ac9d43e9dcfada048dc206e735a6a5d0
Here is the code for the first (working) file:
<!DOCTYPE html>
<html lang="en" class="no-js">
<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>Boxify: Free HTML5/CSS3 Template by Peter Finlan</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Nunito:400,300,700' rel='stylesheet' type='text/css'>
<link href="css/styles2.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row nav-wrapper">
<div class="col-md-6 col-sm-6 col-xs-6 text-right navicon">
<p></p><a id="trigger-overlay" class="nav_slide_button nav-toggle" href="#"><span></span></a>
</div>
</div>
<div class="overlay overlay-boxify">
<nav>
<ul>
<li><i class="fa fa-heart"></i>About
</li>
<li><i class="fa fa-flash"></i>Features
</li>
</ul>
<ul>
<li><i class="fa fa-desktop"></i>Screenshots
</li>
<li><i class="fa fa-download"></i>Download
</li>
</ul>
</nav>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/min/scripts-min.js"></script>
</body>
</html>
Here is the code for the other file (that does not work):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>{$title}</title>
<link rel="shortcut icon" href="{$url}/favicon.ico" />
<link href="{$url}/{$theme_path}/{$theme_name}/style.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<script type="text/javascript" src="{$url}/{$theme_url}/js/jquery.js"></script>
<script type="text/javascript" src="{$url}/{$theme_url}/js/jquery.timeago.js"></script>
<script type="text/javascript" src="{$url}/{$theme_url}/js/functions.js"></script>
<link rel="shortcut icon" href="../favicon.ico">
**<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Nunito:400,300,700' rel='stylesheet' type='text/css'>
<link href="css/styles2.css" rel="stylesheet">**
</head>
<body>
<div class="topbar">
<div class="header">
<a href="{$url}">
<div class="logo"></div>
<div class="logo-small"></div>
</a>
<div class="search-input">
<input type="text" id="search" placeholder="{$lng->search_for_people}">
</div>
<div class="search-container"></div>
<div class="container">
**<div class="row nav-wrapper">
<div class="col-md-6 col-sm-6 col-xs-6 text-right navicon">
<p></p><a id="trigger-overlay" class="nav_slide_button nav-toggle" href="#"><span></span></a>
</div>
</div>
<div class="overlay overlay-boxify">
<nav>
<ul>
<li><i class="fa fa-heart"></i>About
</li>
<li><i class="fa fa-flash"></i>Features
</li>
</ul>
<ul>
<li><i class="fa fa-desktop"></i>Screenshots
</li>
<li><i class="fa fa-download"></i>Download
</li>
</ul>
</nav>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/min/scripts-min.js"></script>**
{$menu}
<div class="topbar_margin"></div>
{$content}
<div class="row-body">
<div class="footer">
<div class="footer-container">
<div class="footer-links">
{$lng->terms_of_use} -
{$lng->privacy_policy} -
{$lng->disclaimer} -
{$lng->developers} -
{$lng->contact} -
{$lng->about} -
{$lng->title_admin}
</div>
<div class="footer-languages">
{$lng->language}: {$language}
</div>
<div class="footer-languages">
Copyright © {$year} {$footer}. {$lng->all_rights_reserved}. {$powered_by}
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/min/scripts-min.js"></script>
</body>
</html>
have you tried using <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> in the files instead of <link href="css/bootstrap.min.css" rel="stylesheet">.
Sometimes the path is not detected correctly that's why it is recommended to use the bootstrapcdn for linking the css file.
Figured it out, instead of:
<script src="js/demo1.js"></script>
I used:
<script src="http://goldenhoney.zz.vc/themes/dolphin/html/js/demo1.js"></script>
IM SO HAPPY. BUT CONFUSED AS TO WHY MY PREVIOUS CODE DID NOT WORK.