Content is invisible - html

I am coding a website using onepage-scroll, and I'm encountering a very strange issue. In my last section (fourth), I added some content (notify me!), it displayed perfectly, and now I did something else (added scripts) and all the content disappeared.
Demo here: https://opencubes.github.io/
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>OpenCubes</title>
<link rel="stylesheet" href="stylesheets/styles.css">
...
<script type="text/javascript" src="//cdn.firebase.com/js/client/1.0.17/firebase.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script>
$(document).ready(function () {
$(".main").onepage_scroll({
sectionContainer: "section",
...
direction: "vertical"
});
$('a.notify').on('click', function () {
...
});
});
</script>
</head>
<body>
<div class="main">
<section class="first-page">
<div class="description">
<h1>The Minecraft Mod Marketplace</h1>
<div>
OpenCubes...
</div>
</div>
<a href="#" class="scroll-down">
<i class="fa fa-chevron-circle-down"></i> Scroll Down
</a>
</section>
<section class="second-page">
<div class="description">
<h1>Browse mods</h1>
<div>
With OpenCubes,...
</div>
</div>
<img src="images/browse.png" />
<a href="#" class="scroll-down">
<i class="fa fa-chevron-circle-down"></i> Keep scrolling...
</a>
</section>
<section class="third-page">
<div class="features">
<div class="feature-spotlight sl-1">
<div>
<h2>Comment and vote</h2>
...
</div>
<img src="images/comments.png" />
</div>
<div class="feature-spotlight sl-2">
<img src="images/files.png" />
<div>
<h2>Files and version manager</h2>
In OpenCubes,...
</div>
</div>
</div>
</section>
<section class="fourth-page">
<div class="main">
<h1>OpenCubes is still in development.</h1>
<div class="send">
<h2>Enter your email here to be notified when it's ready</h2>
<input class="email" type="email"/>
Notify me!
</div>
</div>
</section>
</div>
<!--[if !IE]><script>fixScale(document);</script><![endif]-->
</body>
</html>

Related

Bulma problem: overflow when using navbar in columns

In bulma, how to define width of navbar to be two-thirds (when on desktop)?
When i put it into columns div, it creates a problem on mobile: extra space is created on the right side due to burgers button overflow.
And below is the screenshot of what happens: if you take a look where the hero element ends on the right side, there is a small vertical space next to the ruler.
There is also a jsfiddle here, but unfortunately it is not visible in jsfiddle. To reproduce, take the following html, save it and open it in firefox, then use mobile inspector with ctrl+m.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.4/css/bulma.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="has-background-black">
<div class="columns is-centered">
<div class="column is-two-thirds">
<nav class="navbar is-transparent" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="Logo">
<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navMenu">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div class="navbar-menu" id="navMenu">
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-white" href="/posts">
Posts
</a>
<a class="button is-white" href="/tags">
Tags
</a>
<a class="button is-white" href="/about">
About
</a>
</div>
</div>
</div>
</div>
</nav>
</div>
</div>
<section class="hero has-background-dark">
<div class="hero-body">
<div class="columns is-centered">
<div class="column is-two-thirds">
<p class="title has-text-white">
Title
</p>
<p class="subtitle has-text-white">
Description
</p>
</div>
</div>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', () => {
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
$navbarBurgers.forEach(el => {
el.addEventListener('click', () => {
const target = el.dataset.target;
const $target = document.getElementById(target);
el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
});
</script>
</body>
</html>

This is because columns class has negative margins. To fixed it you can add extra classes for columns and column.
index.html
<body class="has-background-black">
<div class="columns nav-columns is-centered">
<div class="column nav-column is-two-thirds">
...
</div>
</div>
</body>
style.css
.nav-columns {
margin-inline: 0;
}
.nav-column {
padding-inline: 0;
}

Disable and Enable Text when button is pressed in HTML?

How should i disable my text Click Begin Game to start when Begin Button is pressed ? It keep displaying after begin button is pressed.
HTML CODE:
<html>
<head>
<link rel="icon" href="./arrows/clubbackground.jpg" type="image/gif" sizes="16x16">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="jsRev.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>DDR-Project 1</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="BackgroundScene">
<div id="DanceScoreboard">
<div id="GameStopped"><button id="StartBtn" class="btnStyle" onclick="gameStarted=true;">Begin Game</button>
<br><br><br>
<div class="Status">Click Begin Game to start</div>
</div>
<div id="GameRunning"><button id="StopBtn" class="btnStyle" onclick="history.go(0);">Stop Game</button>
<div id="Status" class="Status"></div>
</div>
</div>
<p style="color:blue;">Points Earned:</p>
<div id="dancePoints" class="Points"><div class="OutputText" id="CorrectCount">0</div>
</div>
<div class="stage"></div>
<!-- ENDS .STAGE -->
<div id="controls">
<img id="left" src="./arrows/staticLeft.png">
<img id="up" src="./arrows/staticUp.png">
<img id="down" src="./arrows/staticDown.png">
<img id="right" src="./arrows/staticRight.png">
</div>
<!-- ENDS #CONTROLS -->
</body>
</html>

I think this is what your are looking for . please check...
<html>
<head>
<link rel="icon" href="./arrows/clubbackground.jpg" type="image/gif" sizes="16x16">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="jsRev.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>DDR-Project 1</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="BackgroundScene">
<div id="DanceScoreboard">
<div id="GameStopped"><button id="StartBtn" class="btnStyle" onclick="gameStarted=true;">Begin Game</button>
<br><br><br>
<div class="Status">Click Begin Game to start</div>
</div>
<div id="GameRunning"><button id="StopBtn" class="btnStyle" onclick="history.go(0);">Stop Game</button>
<div id="Status" class="Status"></div>
</div>
</div>
<p style="color:blue;">Points Earned:</p>
<div id="dancePoints" class="Points"><div class="OutputText" id="CorrectCount">0</div>
</div>
<div class="stage"></div>
<!-- ENDS .STAGE -->
<div id="controls">
<img id="left" src="./arrows/staticLeft.png">
<img id="up" src="./arrows/staticUp.png">
<img id="down" src="./arrows/staticDown.png">
<img id="right" src="./arrows/staticRight.png">
</div>
<!-- ENDS #CONTROLS -->
<script>
jQuery('#StartBtn').click(function(){
jQuery('.Status').hide();
})
</script>
</body>
</html>

You could add an additional line to the onclick event for the Begin Game button.
HTML
<div id="GameStopped"><button id="StartBtn" class="btnStyle" onclick="beginGame()">Begin Game</button>
<br><br><br>
<div class="Status" id="ClickToBeginMessage">Click Begin Game to start</div>
</div>
JS
function beginGame(){
gameStarted=true;
$("#ClickToBeginMessage").hide()
}

HTML column next to each other instead listed

I am trying to get an output of 3 columns next to each other. What I get is one column on top of each other. What am I missing in my code?
The input in between the [] is variable and comes from another page. This works fine.
It keeps saying that I have to add more information but I have no clue what I should add to make it more clear.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>MAINTITLE:: [TITEL] </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css" title="currentStyle">
#import "assets/bootstrap/css/bootstrap-responsive.min.css";
#import "assets/bootstrap/css/bootstrap.min.css";
#import "assets/css/main.css";
</style>
<script type="text/javascript" language="javascript" src="assets/jquery/jquery.js"></script>
<script type="text/javascript" language="javascript" src="assets/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" language="javascript" src="assets/js/page.default.js"></script>
</script>
</head>
<body>
<div class="top-bar">
<div class="logo"></div>
</div>
<div class="title-bar">
</div>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<div class="row" style="margin-top: 180px !important"></div>
</div>
</div>
</div>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img alt="300x200" src="[PICTURE]" width="300" />
<div class="caption">
<h3>
[NAME]
</h3>
<p>
[TEXT]
</p>
<p>
<a class="btn btn-primary" href="index.php?action=DETAILPAGE&id=[_ID]">Go!</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Create a class row div around all of the columns. You have three rows that's why each column is on a separate row.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>MAINTITLE:: [TITEL] </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css" title="currentStyle">
#import "assets/bootstrap/css/bootstrap-responsive.min.css";
#import "assets/bootstrap/css/bootstrap.min.css";
#import "assets/css/main.css";
</style>
<script type="text/javascript" language="javascript" src="assets/jquery/jquery.js"></script>
<script type="text/javascript" language="javascript" src="assets/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" language="javascript" src="assets/js/page.default.js"></script>
</script>
</head>
<body>
<div class="top-bar">
<div class="logo"></div>
</div>
<div class="title-bar">
</div>
<div class="container">
<div class="row">
<div class="col-md-1">
<div class="thumbnail">
<img alt="300x200" src="[PICTURE]" width="300" />
</div>
</div>
<div class="caption">
<div class="col-md-1">
<h3>
[NAME]
</h3>
</div>
<div class="col-md-1">
<p>
[TEXT]
</p>
</div>
<div class="col-md-1">
<p>
<a class="btn btn-primary" href="index.php?action=DETAILPAGE&id=[_ID]">Go!</a>
</p>
</div>
</div>
</div>
</div>
</body>

Why isn't Wordpress loading my CSS?

I'm working on a site for a client and for some reason Wordpress has stopped loading my extra css files located in side a folder called css which is inside the theme folder.
The code I've used is below
<link href="<?php echo get_template_directory_uri(); ?>/css/ MY CSS FILES " rel="stylesheet" />
The rendered HTML code:
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<title> My blog</title>
<!-- Bootstrap Core CSS -->
<link href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/themes/I%20Am%20Press%20Magazine/css/bootstrap.css" rel="stylesheet">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- Custom CSS -->
<link href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/themes/I%20Am%20Press%20Magazine/style.css" rel="stylesheet">
<!-- Fonts from Google -->
<link href='http://fonts.googleapis.com/css?family=Playfair+Display:400,700,400italic,700italic|Lora:400,400italic' rel='stylesheet' type='text/css'>
<!-- Homepage Slider -->
<script src="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/themes/I%20Am%20Press%20Magazine/js/jquery.bxslider.min.js"></script>
<link href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/themes/I%20Am%20Press%20Magazine/css/jquery.bxslider.css" rel="stylesheet" />
<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade',
captions: true
});
});
</script>
<!-- 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]-->
<link href="//www.google-analytics.com" rel="dns-prefetch">
<link href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/themes/I%20Am%20Press%20Magazine/img/icons/favicon.ico" rel="shortcut icon">
<link href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/themes/I%20Am%20Press%20Magazine/img/icons/touch.png" rel="apple-touch-icon-precomposed">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Just another WordPress site">
<script type="text/javascript">
window._wpemojiSettings = {"baseUrl":"http:\/\/s.w.org\/images\/core\/emoji\/72x72\/","ext":".png","source":{"concatemoji":"http:\/\/www.samuraisound.co.uk\/dev\/alexiafrangakis\/php\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.2.2"}};
!function(a,b,c){function d(a){var c=b.createElement("canvas"),d=c.getContext&&c.getContext("2d");return d&&d.fillText?(d.textBaseline="top",d.font="600 32px Arial","flag"===a?(d.fillText(String.fromCharCode(55356,56812,55356,56807),0,0),c.toDataURL().length>3e3):(d.fillText(String.fromCharCode(55357,56835),0,0),0!==d.getImageData(16,16,1,1).data[0])):!1}function e(a){var c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g;c.supports={simple:d("simple"),flag:d("flag")},c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.simple&&c.supports.flag||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
</script>
<style type="text/css">
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
</style>
<link rel='stylesheet' id='aps-animate-css-css' href='http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/plugins/accesspress-social-icons/css/animate.css?ver=1.3.1' media='all' />
<link rel='stylesheet' id='aps-frontend-css-css' href='http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/plugins/accesspress-social-icons/css/frontend.css?ver=1.3.1' media='all' />
<link rel='stylesheet' id='normalize-css' href='http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/themes/I%20Am%20Press%20Magazine/normalize.css?ver=1.0' media='all' />
<link rel='stylesheet' id='html5blank-css' href='http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/themes/I%20Am%20Press%20Magazine/style.css?ver=1.0' media='all' />
<script type='text/javascript' src='http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/themes/I%20Am%20Press%20Magazine/js/lib/conditionizr-4.3.0.min.js?ver=4.3.0'></script>
<script type='text/javascript' src='http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/themes/I%20Am%20Press%20Magazine/js/lib/modernizr-2.7.1.min.js?ver=2.7.1'></script>
<script type='text/javascript' src='http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-includes/js/jquery/jquery.js?ver=1.11.2'></script>
<script type='text/javascript' src='http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/themes/I%20Am%20Press%20Magazine/js/scripts.js?ver=1.0.0'></script>
<script type='text/javascript' src='http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/plugins/accesspress-social-icons/js/frontend.js?ver=1.3.1'></script>
<script>
// conditionizr.com
// configure environment tests
conditionizr.config({
assets: 'http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/themes/I%20Am%20Press%20Magazine',
tests: {}
});
</script>
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top" class="home logged-in">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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 page-scroll" href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php">I Am Press</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-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">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about">Home</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Intro Section -->
<section id="intro" class="intro-section">
<div class="container">
<div class="bx-wrapper">
<ul class="bxslider">
<li><div class="blog-featured">
<img src="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/uploads/2015/05/IMG_5939-750x510.png" class="attachment-post-thumbnail wp-post-image" alt="IMG_5939.PNG" /> <div class="featured-square">
<div class="featured-title" rel="bookmark" ><a class="featured-title-class" href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/travel/city-guide-istanbul/">City Guide: Istanbul</a></div>
<div class="featured-excerpt">
Over the May bank holiday I took a quick trip to Istanbul. This beautiful city is soaked in history and culture. With only three days to spend there I didn’t have much time to explore the city, therefore I have picked my favourite parts from my trip. What I did When it comes to being… <a class="view-article" href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/travel/city-guide-istanbul/">View Article</a> </div>
</div>
</div>
</li>
</ul>
</div>
</div>
</section>
<main role="main">
<!-- section -->
<section>
<!-- Latest Section -->
<section id="about" class="latest-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Latest Stories</h1>
</div>
</div>
<div class="sec-one-wrapper">
<div class="sec-one-image">
<img src="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/uploads/2015/06/IMG_7951-825x510.jpg" class="attachment-post-thumbnail wp-post-image" alt="IMG_7951" /> </div>
<div class="sec-one-time">
<div class="latest-category">
<div class="featured-cat" style="color:#ede625;">Fashion</div> </div>
<div class="the-time">June 21, 2015</div>
</div>
<div class="sec-one-title">
<a class="sec-one-title-link" href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/fashion/brown/">Brown and out</a>
</div>
</div>
<div class="sec-one-wrapper">
<div class="sec-one-image">
<img src="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/uploads/2015/06/DSC_0712-825x510.jpg" class="attachment-post-thumbnail wp-post-image" alt="DSC_0712" /> </div>
<div class="sec-one-time">
<div class="latest-category">
<div class="featured-cat" style="color:#ede625;">Fashion</div> </div>
<div class="the-time">June 18, 2015</div>
</div>
<div class="sec-one-title">
<a class="sec-one-title-link" href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/fashion/boom-boom/">Boom Boom</a>
</div>
</div>
<div class="sec-one-wrapper">
<div class="sec-one-image">
<img src="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/uploads/2015/06/IMG_6153-825x510.jpg" class="attachment-post-thumbnail wp-post-image" alt="IMG_6153.JPG" /> </div>
<div class="sec-one-time">
<div class="latest-category">
<div class="featured-cat" style="color:#ede625;">Fashion</div> </div>
<div class="the-time">June 11, 2015</div>
</div>
<div class="sec-one-title">
<a class="sec-one-title-link" href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/fashion/camouflage/">Camouflage</a>
</div>
</div>
</div>
</section>
<!-- Editors Favorites Section -->
<section id="services" class="editors-section">
<div class="container">
<div class="left-side">
<div class="row">
<div class="col-lg-12">
<h1>Editors Favorites</h1>
</div>
</div>
<div class="sec-two-wrapper">
<div class="sec-two-media">
<div class="sec-two-image">
<img src="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/uploads/2015/06/IMG_7951-150x150.jpg" class="sec-two-img wp-post-image" alt="IMG_7951" /> </div>
</div>
<div class="sec-two-text">
<div class="sec-two-time">
<a class="cat"><ul class="post-categories">
<li>Fashion</li></ul></a> June 21, 2015 </div>
<div class="sec-two-title">
<a href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/fashion/brown/" title="Brown and out">
</div>
<div class="sec-two-excerpt">
A simple neutral outfit can never go wrong. At the moment I am loving brown. I used to always wear shirts so I thought I’d throw on one of my old favourites. Unfortunately it is very big for me nowadays but I just can’t bring myself to get rid of it. The back of the… <a class="view-article" href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/fashion/brown/">View Article</a>
</div>
</div>
</div>
<div class="sec-two-wrapper">
<div class="sec-two-media">
<div class="sec-two-image">
<img src="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/uploads/2015/06/DSC_0712-150x150.jpg" class="sec-two-img wp-post-image" alt="DSC_0712" /> </div>
</div>
<div class="sec-two-text">
<div class="sec-two-time">
<a class="cat"><ul class="post-categories">
<li>Fashion</li></ul></a> June 18, 2015 </div>
<div class="sec-two-title">
<a href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/fashion/boom-boom/" title="Boom Boom">
</div>
<div class="sec-two-excerpt">
I am absolutely obsessed with my new Boom Boom The Label dress. From the fabric to the fit it is perfect. This particular dress is called the Tamera slit back dress. It also comes without the slit at the back, however for ease of movement as it is a bodycon dress I chose to buy the… <a class="view-article" href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/fashion/boom-boom/">View Article</a>
</div>
</div>
</div>
<div class="sec-two-wrapper">
<div class="sec-two-media">
<div class="sec-two-image">
<img src="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/uploads/2015/06/IMG_6153-150x150.jpg" class="sec-two-img wp-post-image" alt="IMG_6153.JPG" /> </div>
</div>
<div class="sec-two-text">
<div class="sec-two-time">
<a class="cat"><ul class="post-categories">
<li>Fashion</li></ul></a> June 11, 2015 </div>
<div class="sec-two-title">
<a href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/fashion/camouflage/" title="Camouflage">
</div>
<div class="sec-two-excerpt">
Summer is almost here! Finally, I got to wear my new Enza Costa dress. It’s a really simple ribbed jersey grey dress with a curved hem that accentuates curves. I teamed it with my favourite Adidas sliders and a camouflage jacket; after all camouflage is the new black! Jacket – Coming soon Dress Sliders <a href=”http://www.bloglovin.com/blog/13656875/?claim=2n8pkw6dgnk”>Follow… <a class="view-article" href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/fashion/camouflage/">View Article</a>
</div>
</div>
</div>
</section>
<!-- /section -->
</main>
<!-- pagination -->
<div class="pagination">
<span class='page-numbers current'>1</span>
<a class='page-numbers' href='http://www.samuraisound.co.uk/dev/alexiafrangakis/php/page/2/'>2</a>
<a class='page-numbers' href='http://www.samuraisound.co.uk/dev/alexiafrangakis/php/page/3/'>3</a>
<span class="page-numbers dots">…</span>
<a class='page-numbers' href='http://www.samuraisound.co.uk/dev/alexiafrangakis/php/page/20/'>20</a>
<a class="next page-numbers" href="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/page/2/">Next »</a></div>
<!-- /pagination -->
<!-- sidebar -->
<aside class="sidebar" role="complementary">
<!-- search -->
<form class="search" method="get" action="http://www.samuraisound.co.uk/dev/alexiafrangakis/php" role="search">
<input class="search-input" type="search" name="s" placeholder="To search, type and hit enter.">
<button class="search-submit" type="submit" role="button">Search</button>
</form>
<!-- /search -->
<div class="sidebar-widget">
</div>
<div class="sidebar-widget">
</div>
</aside>
<!-- /sidebar -->
<script type='text/javascript'>
/* <![CDATA[ */
var countVars = {"disqusShortname":"alexiafrangakis"};
/* ]]> */
</script>
<script type='text/javascript' src='http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/plugins/disqus-comment-system/media/js/count.js?ver=4.2.2'></script>
<!-- Footer -->
<section id="footer" class="footer">
<div class="container">
<div class="footer-widgets">
<div id="footer-widget-one">
</div>
<div id="footer-widget-two">
</div>
<div id="footer-widget-three">
</div>
<div id="footer-widget-four">
</div>
</div>
<hr>
<div id="footer-credits">
<div class="credits-left">© I Am Press 2015 </div>
<div class="credits-right">Beautifully hand-coded by Darius Carter</div>
</div>
</div>
</section>
<!-- Bootstrap Core JavaScript -->
<script src="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/themes/I%20Am%20Press%20Magazine/js/bootstrap.min.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/themes/I%20Am%20Press%20Magazine/js/jquery.easing.min.js"></script>
<script src="http://www.samuraisound.co.uk/dev/alexiafrangakis/php/wp-content/themes/I%20Am%20Press%20Magazine/js/scrolling-nav.js"></script>
</body>
</html>
<!-- Dynamic page generated in 0.350 seconds. -->
<!-- Cached page generated by WP-Super-Cache on 2015-07-09 20:32:03 -->

Try as follows
href="<?php echo get_template_directory_uri().'/css/ MY CSS FILES' ?> "

It's better to use wp_enqueue_scripts function for adding custom css/js files because it loads file before custom files added in header/footer.
function add_theme_css() {
wp_enqueue_style( 'cssfile', get_template_directory_uri() . '/css/file.css');
}
add_action( 'wp_enqueue_scripts', 'add_theme_css' );

Unable to store data in LocalStorage in an To-Do-List app

I am trying to build an simple To-Do-List app using jQuery-Mobile with Local Storage support but i tried in manyways i am failing while storing the data in local storage and displaying them in a List here is the code which i have made any help to correct my code will be appreciated
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>ToDoL</title>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.3.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.3.min.js"></script>
<script type="text/javascript">
var tasks[];
$(document).on("pagecreate","#todoadderpage",function(){
var appendTaskToList=function(val){
$("#todolist").append("<li>"+val+"</li>");
}
var addTask=function(){
//alert("Hello");
var val=$("#todotitle").val();
tasks.push(val);
localStorage['tasks']=JSON.stringify(tasks);
appendTaskToList(val);
}
$("#todoadderokbtn").click(addTask);
});
</script>
</head>
<body>
<section id="landing" data-role="page">
<header data-role="header" data-position="fixed" data-theme="b">
<h1>ToDoL Logo</h1>
</header>
<article data-role="main" class="ui-content">
<center>
Add To-Do
<input type="button" id="remover" value="Remove Completed Task" data-mini="true" data-inline="true"/>
</center>
<hr/>
<ul id="todolist" data-role="listview" data-inset="true">
<li data-role="list-divider">Your To-Do-List</li>
<li id="notodolist"><p>You Don't have any pending task</p></li>
</ul>
<br/><br/><br/>
</article>
<footer data-role="footer" data-position="fixed" data-theme="b">
<h1>&copy Reserved By Dinesh Raja</h1>
</footer>
</section>
<section id="todoadderpage" data-role="page" data-close-btn="none">
<header data-role="header" data-position="fixed" data-theme="b">
<h1>New To-Do</h1>
</header>
<article data-role="main" class="ui-content">
<form id="todoadderform">
<div data-role="fieldcontain">
<label for="todotitle">Title</label>
<input type="text" id="todotitle" data-mini="true"/><br/><br/><br/>
<center>
Cancel
<input type="button" id="todoadderokbtn" value="Ok" data-mini="true" data-inline="true"/>
</center>
</div>
</form>
</article>
</section>
<section id="todoviewerpage" data-role="page" data-close-btn="none">
<header data-role="header">
<h1>To-Do-Viewer</h1>
</header>
<article data-role="main" class="ui-content">
<center>
<label for="tododata"></label>
</center>
<p id="tododata"></p>
<center>
Ok
</center>
</article>
</section>
</body>
</html>

This should work
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>ToDoL</title>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.3.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.3.min.js"></script>
<script type="text/javascript">
var tasks[];
$(document).on("pagecreate","#todoadderpage",function(){
var appendTaskToList=function(val){
$("#todolist").append("<li>"+val+"</li>");
}
var addTask=function(){
//alert("Hello");
var val=$("#todotitle").val();
tasks.push(val);
local-Storage['tasks']=JSON.stringify(tasks);
appendTaskToList(val);
}
$("#todoadderokbtn").click(addTask);
});
</script>
</head>
<body>
<section id="landing" data-role="page">
<header data-role="header" data-position="fixed" data-theme="b">
<h1>ToDoL Logo</h1>
</header>
<article data-role="main" class="ui-content">
<center>
Add To-Do
<input type="button" id="remover" value="Remove Completed Task" data-mini="true" data-inline="true"/>
</center>
<hr/>
<ul id="todolist" data-role="listview" data-inset="true">
<li data-role="list-divider">Your To-Do-List</li>
<li id="notodolist"><p>You Don't have any pending task</p></li>
</ul>
<br/><br/><br/>
</article>
<footer data-role="footer" data-position="fixed" data-theme="b">
<h1>&copy Reserved By Dinesh Raja</h1>
</footer>
</section>
<section id="todoadderpage" data-role="page" data-close-btn="none">
<header data-role="header" data-position="fixed" data-theme="b">
<h1>New To-Do</h1>
</header>
<article data-role="main" class="ui-content">
<form id="todoadderform">
<div data-role="fieldcontain">
<label for="todotitle">Title</label>
<input type="text" id="todotitle" data-mini="true"/><br/><br/><br/>
<center>
Cancel
<input type="button" id="todoadderokbtn" value="Ok" data-mini="true" data-inline="true"/>
</center>
</div>
</form>
</article>
</section>
<section id="todoviewerpage" data-role="page" data-close-btn="none">
<header data-role="header">
<h1>To-Do-Viewer</h1>
</header>
<article data-role="main" class="ui-content">
<center>
<label for="tododata"></label>
</center>
<p id="tododata"></p>
<center>
Ok
</center>
</article>
</section>
</body>
</html>