I'm trying to integrate the slide into my navigation. Here is the slide that I am trying to integrate.
Here is the code I'm working on and the website is rosannalui.com. I'm a bit stumped what I'm doing wrong and any help would be greatly appreciated. Thank you so much!
<html>
<head>
<title>Rosanna Lui</title>
<link href="https://fonts.googleapis.com/css?family=Lora:400" rel="stylesheet">
<link href="https://fonts.go``ogleapis.com/css?family=Montserrat:400,500" rel="stylesheet">
<link href="style.css?v=1" rel="stylesheet">
<meta name="viewport" content="width=700">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
position: relative;
}
#section1 {padding-top:50px;height:500px;color: #fff; background-color: #9E88E5;}
#section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
#section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
</style>
</head>
———
<div class="container-fluid">
——
<body class="bodyhome">
<!-- Menu -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class='container-fluid'>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a class =“menuhello” href="#">Hello</a></li>
<li><a class =“menuwork” href=“#work”>Work</a></li>
<li><a class =“menucontact” href=“#contact”>Contact</a></li>
</ul>
</div>
</div>
</div>
</nav>
<div id="section1" class="container-fluid">
<!-- Hello -->
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<div id="hello" class="darkgray">
<div id="hellotext">
<h1>I'm Rosanna, a visual and UX designer, and I am passionate about making <span class="bluetext">delightful</span> experiences.</h1>
</div>
</div>
<!-- Dots -->
<script>
particlesJS.load('hello', 'particles.json', function() {
console.log('hello#rosannalui.com');
});
</script>
</div>
<div id="section2" class="container-fluid">
<!-- Work -->
<a name="work"></a>
<div class="grid">
<div class="work work1">
<a href="./bee/">
<h2>Bee Adventurous</h2>
<h3>Augmented Reality Game</h3>
</a>
</div>
<div class="work work2">
<a href="./husky">
<h2>Husky Checkout</h2>
<h3>Equipment Rental Application</h3>
</a>
</div>
<div class="work work3">
<a href="./chord">
<h2>Chordinate</h2>
<h3>Networking App for Musicians</h3>
</a>
</div>
<div class="work work4">
<a href="./design">
<h2>Design Work</h2>
<h3>Illustration and Design</h3>
</a>
</div>
</div>
</div>
<div id="section3" class="container-fluid">
<!-- Contact -->
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<a name="contact"></a>
<div class="lightgray contact content">
<img src="images/rosanna.png" style="margin-top: -3vw" />
<div>
<h3>Rosanna Lui</h3>
<p>
I am a recent Interactive Media Design graduate at the University of Washington. Inspired by my background as a daughter of immigrants, I believe that it is important to design with the user in mind and to create content that is accessible to everyone.
I am always looking for new projects and opportunities to collaborate with others.
</p>
<p>
Email me: hello#rosannalui.com
</p>
</div>
</div>
</div>
<script>
$(document).ready(function(){
// Add scrollspy to <body>
$('body').scrollspy({target: ".navbar", offset: 50});
// Add smooth scrolling on all links inside the navbar
$("#myNavbar a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script>
</body>
</html>
For a quick and dirty solution use:
html{
scroll-behavior: smooth;
}
Note that not all browsers support this.
Another quick way is to use jump.js.
Add this to your head:
<script src="https://rawgit.com/jumpjs/jumpjs/master/dist/jumpjs.min.js"></script>
Related
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;
}
I want to make this mobile responsive
The button are overlaping
{%load static%}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<title>Upload_Image</title>
<style>
body,
html {
margin: 0;
padding: 0;
height: 100%;
background: #7abecc !important;
}
.material-icons {
vertical-align: middle;
}
.container2{
padding-left: 40%;
}
.alert{
padding-left: 40%;
}
</style>
</head>
<body>
{% if user.is_authenticated%}
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Image Captioning</a>
<i class="material-icons bg-light ">collections</i>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
</ul>
<span class="navbar-text">
WRITE CAPTION
Hi! {{ user.username }}
<i class="material-icons bg-dark mx-2 ">home</i>
<i class="material-icons bg-dark mx-3 ">logout</i>
</span>
</div>
</div>
</nav>
<div class="alert alert-success" role="alert">
<h1>Image Upload</h1>
</div>
<form method="post"action="/upload_save" enctype="multipart/form-data">
{%csrf_token%}
<div class="container"style="height:1000px;Max-width:100%;">
<div class ="container2" id ="images"><br>
<input type="button"class="btn btn-success cc"name="add_image" id ="add_image"value="Add Image">
<input type="submit"class="btn btn-success"value="Upload & Save Data"><br>
<!-- <input type="submit"class="btn btn-primary"value="Save Data"> -->
</div>
</form>
<script>
document.getElementById("add_image").onclick=function (ev) {
var image=document.getElementById("images");
var preview=document.createElement("img");
preview.style.width="300px";
preview.style.height="300px";
preview.style.marginTop = "20px";
preview.style.border = "thick solid #ffffff";
preview.style.borderRadius = "25px";
var newInput=document.createElement("input");
newInput.type="file";
newInput.name="file[]";
var br=document.createElement("br");
var br1=document.createElement("br");
newInput.onchange=function(ev1){
if(this.files && this.files[0])
{
var fileReader=new FileReader();
fileReader.onload=function(ev2){
preview.src=ev2.target.result;
};
fileReader.readAsDataURL(this.files[0])
}
};
image.appendChild(newInput)
image.appendChild(preview);
image.appendChild(br);
image.appendChild(br1);
}
</script>
{%else%}
<script type="text/javascript">
alert("Cant Access without Login");
window.location.href = "{%url 'login' %}"
</script>
{% endif %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</body>
</html>
This the code of my HTML file and i want to make it mobile responsive here the image preview option are going out of the screeen
i tried many things but nothing works so i have no idea what to do next how to resolve the issue
When using Bootstrap’s source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our predefined grid classes use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts.
Hi hacakaman79 just add below code on head style tag
#media only screen and (max-width: 767px){
form{
width : 100%;
margin : 0 auto;
clear : both;
}
.container2{
padding : 0;
margin : 0 auto;
}
}
Not sure if you are allowed to link your website but if it's allowed.
So I can hover all links in the navbar but I can't click them and the pictures of S's is hoverable but not clickable, what am I doing wrong?
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Nickeb0i Scripts - Landing Page</title>
<meta property="og:title" content="">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" href="fancybox/jquery.fancybox-v=2.1.5.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,600,300,200&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="prefetch" href="images/zoom.png">
</head>
<body>
<div class="navbar navbar-fixed-top" data-activeslide="1">
<div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav row">
<li data-slide="1" class="col-12 col-sm-2"><a id="menu-link-1"> <span class="icon icon-home"></span> <span class="text">HOME</span></a></li>
<li data-slide="2" class="col-12 col-sm-2"><a id="menu-link-2" href="/services"> <span class="icon icon-user"></span> <span class="text">SERVICES</span></a></li>
<li data-slide="3" class="col-12 col-sm-2"><a id="menu-link-3" href="/scripts"> <span class="icon icon-briefcase"></span> <span class="text">SCRIPTS</span></a></li></ul>
<div class="row">
<div class="col-sm-2 active-menu"></div>
</div>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar -->
<div class="slide story" id="slide-1" data-slide="1">
<div class="container">
<div id="home-row-1" class="row clearfix">
<div class="col-12">
<h1 class="font-semibold">NICKEB0I <span class="font-thin">SCRIPTS</span></h1>
<br>
<br>
</div><!-- /col-12 -->
</div><!-- /row -->
<div id="home-row-2" class="row clearfix">
<div class="col-12 col-sm-4"><div class="home-hover navigation-slide" data-slide="4"><img src="images/s03.png"></div><span>SCRIPTS</span></div>
<div class="col-12 col-sm-4"><div class="" data-slide="3"></div></div>
<div class="col-12 col-sm-4"><div class="home-hover navigation-slide" data-slide="5"><img src="images/s03.png"></div><span>SERVICES</span></div>
</div><!-- /row -->
</div><!-- /container -->
</div><!-- /slide1 -->
<footer>
<div class="container">
<p><font color="white">Copyright © Nickeb0i 2016</font><p>
</div>
</footer>
</body>
<script src="js/html5shiv.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox.pack-v=2.1.5.js"></script>
<script src="js/script.js"></script>
<script>
$(document).ready(function(e) {
var lis = $('.nav > li');
menu_focus( lis[0], 1 );
$(".fancybox").fancybox({
padding: 10,
helpers: {
overlay: {
locked: false
}
}
});
});
</script>
</html>
You have written href = "/services", add a forward-slash and write href = "/services/". This should work.
I'm not entirely sure that this is related to it but if I click a button my console immediately shows an error:
script.js:187 Uncaught TypeError: Cannot read property 'top' of undefined
You're getting this error
Uncaught TypeError: Cannot read property 'top' of undefined
Because you're trying to select a DOM object that doesn't exist:
var offset_top = ( dataslide == 1 ) ? '0px' : $('.slide[data-slide="' + dataslide + '"]').offset().top;
Adding the class slide to your elements with data-slide attributes stops the error.
But you should ask yourself, do you really need javascript like this for navigation and hover effects?
I have made a webpage - Campus Connect - Colleges. However, viewing this on mobile hides the button of the groups. And also, the buttons don't appear centered.
The whole page code is -
<!DOCTYPE html>
<html lang="en" hola_ext_inject="disabled">
<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="">
<meta name="author" content="">
<link rel="icon" href="http://getbootstrap.com/favicon.ico">
<link rel="stylesheet" type="text/css" href="fonts/glyphicons-halflings-regular.eot">
<title>Campus Connect</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<style type="text/css">
.colorb:hover{
background-color: #F5D357 !important;
}
.colorb:active{
background-color: #F5D357 !important;
}
</style>
<!-- Custom styles for this template -->
<link href="css/sticky-footer-navbar.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[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]-->
</head>
<body style="background-image:url('images/bkg.jpg');background-size:cover;background-repeat:no-repeat;">
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top" style="background-color:#383838;border:0;">
<div class="container">
<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 class="navbar-brand" style="padding:0;"><img src="images/logo.png" style="width:200px;height:100%;" onClick="document.location.href='app_index.html';"></div>
</div>
<div id="navbar" class="collapse navbar-collapse">
<!-- <ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul> -->
<ul class="nav navbar-nav navbar-right">
<li><a target="_blank" href="https://play.google.com/store/apps/details?id=com.campusconnect" style="color:#EBD07B;">Get the App</a></li>
<li><img src="images/android.png" class="img-responsive img-circle" alt="App" style="width:40px;height:40px;text-align:center;margin-top:5px;padding-top:5px;padding-bottom:5px;border: 2px solid #EBD07B;border-radius: 25px;"></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h2 id="coll_name" style="text-align:center;"></h2>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-1">
<div style="text-align:center;">
<span aria-hidden="true" style="font-size:50px;"><img src = "calendar.png"/></span>
</div>
<br/>
<div style="font-size:20px;">
<p style="text-align:center;" id="event_no"></p>
<p style="text-align:center;">Events Happening Today</p>
</div>
<button type="button" class="btn btn-info colorb" style="margin-left:30%;background-color:transparent;border-color:black;color:black;" onclick="location.href='calendar.html';"> Calendar</button>
</div>
<div class="col-md-3 col-md-offset-3">
<div style="text-align:center;">
<span aria-hidden="true" style="font-size:50px;"><img src = "groups.png"/></span>
</div>
<br/>
<div style="font-size:20px;">
<p id="group_no" style="text-align:center;"></p>
<p style="text-align:center;">Groups On Campus</p>
</div>
<button type="button" class="btn btn-success colorb" style="margin-left:30%;background-color:transparent;border-color:black;color:black;" onclick="location.href='groups.html';">Explore Groups</button></a>
</div>
</div>
</div>
<footer class="footer" style="background-color:#383838;height:100px">
<div class="container">
<div class="row" style="text-align:center;">
<img src="images/facebook_circle.png" style="width:40px;height:40px;margin-top:2px;">
</div>
<div class="row" style="text-align:center;color:white;">
<p>Copyright 2015 Campus Connect</p>
</div>
<div class="row" style="text-align:center;color:white;">
<p>Made with <img src="images/heart.png" style="height:20px;"> in Bangalore</p>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
<script type="text/javascript">
function init(){
gapi.client.load('xxxx', 'v1',loaded, 'xxxxx');
}
function loaded(){
var col_name = localStorage.getItem('CollegeName');
var col_id = localStorage.getItem('CollegeId');
document.getElementById('coll_name').innerHTML = col_name;
gapi.client.clubs.getClubList({'college_id':col_id}).execute(function(resp) {
console.log("Here and there");
console.log(resp.result.list.length);
console.log("Done here");
document.getElementById('group_no').innerHTML= resp.result.list.length;
});
now_date = getDate();
gapi.client.clubs.collegeFeed({'collegeId':col_id,'date':now_date}).execute(function(resp){
console.log('Success');
console.log(resp);
var flag;
if (resp.result.length === undefined)
{
flag = 0;
}
else
{
flag = resp.result.length;
}
document.getElementById('event_no').innerHTML=flag;
});
function getDate()
{
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
today = yyyy+'-'+mm+'-'+dd;
//final_date = '"'+today+'"';
console.log(today);
return today;
}
}
</script>
<script src="https://apis.google.com/js/client.js?onload=init"></script>
</body>
</html>
What is the error? And how do I fix this ?
Your sticky footer is the culprit. In sticky-footer-navbar.css row 25, adding a third padding value of 100px will do the trick:
body > .container {
padding: 60px 15px 100px;
}
If I were you, I would get rid of the inline styling as well. You have added a text-align styling on all paragraphs instead of defining a rule in a stylesheet. Furthermore, you can make the buttons centered under the imaged by:
style: block;
margin: 0 auto;
Remove margin-left=30% from the inline styles of the buttons.
Add text-align: center to
the wrapping element.
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' );