Html Web Radio stuck in smartphone - html

i have create a html code for my web radio player in my site...in pc browser is ok except sometimes but when i open the page from my smartphone i need to refresh page 1-2 times and after plays as the browser?Can i have a solution.Thanks.
<script language="javascript" type="text/javascript"
src="https://radio.streamings.gr/system/player.js"></script>
<div class="cc_player" data-username="panicradio">Loading ...</div>


try to insert the script at the end like this
<!-- jQuery js -->
<script src="http://panicradio.gr/js/jquery.min.js"></script>
<!-- Popper js -->
<script src="http://panicradio.gr/js/popper.min.js"></script>
<!-- Bootstrap js -->
<script src="http://panicradio.gr/js/bootstrap.min.js"></script>
<!-- All js -->
<script src="http://panicradio.gr/js/poca.bundle.js"></script>
<!-- Active js -->
<script src="http://panicradio.gr/js/default-assets/active.js"></script>
<script src="https://radio.streamings.gr/system/player.js"></script>


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Poca- Podcast & Audio Template">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Title -->
<title>Panic Radio</title>
<!-- Favicon -->
<link rel="icon" href="./img/core-img/favicon.ico">
<!-- Core Stylesheet -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Preloader -->
<div id="preloader">
<div class="preloader-thumbnail">
<img src="./img/core-img/preloader.png" alt="">
</div>
</div>
<!-- ***** Header Area Start ***** -->
<header class="header-area">
<!-- Main Header Start -->
<div class="main-header-area">
<div class="classy-nav-container breakpoint-off">
<!-- Classy Menu -->
<nav class="classy-navbar justify-content-between" id="pocaNav">
<!-- Logo -->
<a class="nav-brand" href="index.html"><img src="./img/core-img/mini logo.png" alt=""></a>
<!-- Top Social Area -->
<div class="top-social-area">
</div>
</div>
<!-- Nav End -->
</div>
</nav>
</div>
</div>
</header>
<!-- ***** Header Area End ***** -->
<!-- ***** Welcome Area Start ***** -->
<section class="welcome-area">
<!-- Welcome Slides -->
<!-- Single Welcome Slide -->
<div class="welcome-welcome-slide bg-img bg-overlay" style="background-image: url(img/bg-img/2.jpg);">
<div class="container h-100">
<div class="row h-100 align-items-center">
<div class="col-8">
<!-- Welcome Text -->
<div class="welcome-text">
<h2 data-animation="fadeInUp" data-delay="100ms">Listen Now</h2>
<!-- Music Player -->
<div class="cc_player" data-username="panicradio">Loading ...</div>
<script language="javascript" type="text/javascript" src="https://radio.streamings.gr/system/player.js"></script>
<h5 >Αν δεν παίζει,κάντε refresh </h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by Colorlib
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>
</div>
</div>
</div>
<!-- ******* All JS ******* -->
<!-- jQuery js -->
<script src="http://panicradio.gr/js/jquery.min.js"></script>
<!-- Popper js -->
<script src="http://panicradio.gr/js/popper.min.js"></script>
<!-- Bootstrap js -->
<script src="http://panicradio.gr/js/bootstrap.min.js"></script>
<!-- All js -->
<script src="http://panicradio.gr/js/poca.bundle.js"></script>
<!-- Active js -->
<script src="http://panicradio.gr/js/default-assets/active.js"></script>
<script src="https://radio.streamings.gr/system/player.js"></script>
</body>
</html>

Related

How to position image at designated place with bootstrap

I trying position image in my html at the right side of the page but am not able to achieve. I want position text at the left
side of the page and image the right side of the page using bootstrap in the image attached.
If bootstrap has layout function to achieve such result, you can post the link for me learn.
<!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.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Hello, world</title>
</head>
<body>
<main class="hero-section">
<div class="container">
<div class="section-content">
<h4>LEARNING BOOTSTRAP</h4>
<h6>Discover places near you</h6>
<button class="btn btn-primary btn-sm" type="submit">SIGN UP</button>
<a class="btn btn-primary btn-sm" href="#" role="button">LEARN MORE</a>
</div>
<div class="section-device">
<img src="pc_image.png">
</div>
</div>
</main>
<!-- Footer -->
<footer class="page-footer font-small blue">
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2023 Copyright:
MDBootstrap.com
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>

bootstrap (AdminLTE) file upload wizard not showing uploaded filename in the checkbox

I am trying to develop a dashboard using the AdminLTE-3.0.5 starter template. I programmed to upload a file in the sidebar, but the uploaded filename is not shown in the box provided. If I hover mouse on the box I can see the uploaded filename in the tooltip text.
The modified starter page is shown below. What am I missing?
Thanks
<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>test dash</title>
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="./AdminLTE-3.0.5/plugins/fontawesome-free/css/all.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="./AdminLTE-3.0.5/dist/css/adminlte.min.css">
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-white navbar-light" style="background-color: #383c44;">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"
style="color:#d6d7d8"></i></a>
</li>
</ul>
</nav>
<!-- /.navbar -->
<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<!-- Brand Logo -->
<a href="#" class="brand-link">
<img src="./AdminLTE-3.0.5/dist/img/AdminLTELogo.png" alt="AdminLTE Logo"
class="brand-image img-circle elevation-3" style="opacity: .8">
<span class="brand-text font-weight-light">Dashboard</span>
</a>
<!-- Sidebar -->
<div class="sidebar">
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
<li class="nav-item has-treeview menu-closed">
<a href="#" class="nav-link active">
<!-- <i class="nav-icon fas fa-tachometer-alt"></i> -->
<p>
data analysis
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<div class="custom-file mb-2 mt-2">
<!-- <input type="file" id="myFile" name="filename2" style="color:#d6d7d8"> -->
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
<div class="input-group input-group-sm mb-2">
<button class="btn btn-primary">Upload</button>
</div>
<script>
// Add the following code if you want the name of the file appear on select
$(".custom-file-input").on("change", function () {
var fileName = $(this).val().split("\\").pop();
$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
</script>
</li>
</ul>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h4 class="m-0 text-dark">Selected Columns</h4>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->
<!-- Main content -->
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Box 1</h5>
</div>
</div>
<div class="card card-primary card-outline">
<div class="card-body">
<h5 class="card-title">Box 2</h5>
</div>
</div><!-- /.card -->
</div>
<!-- /.col-md-6 -->
<div class="col-lg-6">
<div class="card">
<div class="card-header">
<h5 class="m-0">Featured</h5>
</div>
</div>
<div class="card card-primary card-outline">
<div class="card-header">
<h5 class="m-0">Featured</h5>
</div>
</div>
</div>
<!-- /.col-md-6 -->
</div>
<!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Control sidebar content goes here -->
<div class="p-3">
<h5>Title</h5>
<p>Sidebar content</p>
</div>
</aside>
<!-- /.control-sidebar -->
<!-- Main Footer -->
<footer class="main-footer">
<!-- To the right -->
<div class="float-right d-none d-sm-inline">
Anything you want
</div>
<!-- Default to the left -->
<strong>Copyright © 2014-2019 AdminLTE.io.</strong> All rights reserved.
</footer>
</div>
<!-- ./wrapper -->
<!-- REQUIRED SCRIPTS -->
<!-- jQuery -->
<script src="./AdminLTE-3.0.5/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="./AdminLTE-3.0.5/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="./AdminLTE-3.0.5/dist/js/adminlte.min.js"></script>
</body>
</html>

you need to import this
<script src=".AdminLTE-3.0.5/plugins/bs-custom-file-input/bs-custom-file-input.min.js"></script>
and this code to initialize
<script>
$(function () {
bsCustomFileInput.init();
});
</script>

It seems the following required scripts that were provided at the bottom of the body should have been in the head section.
<!-- REQUIRED SCRIPTS -->
<!-- jQuery -->
<script src="./AdminLTE-3.0.5/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="./AdminLTE-3.0.5/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="./AdminLTE-3.0.5/dist/js/adminlte.min.js"></script>

Background image not loading on external page

So the problem I am having is the webpage is not loading the background image
Following image address does not seem to load so page background stay's pitch black and nothing can be read because of it.
Edit:
Here is my full css code.
#intro {
position: relative;
padding-bottom: 102px;
min-height: 900px;
width: 100%;
background: #161415
background-image: url("http://example.com/images/38697eae8ca030cd1f8cd11d752249ef.jpg"); no-repeat center center;
background-size: cover !important;
-webkit-background-size: cover !important;
}
this is what my index.html looks like.
<!DOCTYPE html>
<!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 8)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<head>
<!--- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title>Coming soon</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS
================================================== -->
<link rel="stylesheet" href="http://example.com/new/css/default.css">
<link rel="stylesheet" href="http://example.com/new/css/layout.css">
<link rel="stylesheet" href="http://example.com/new/css/media-queries.css">
<!-- Script
================================================== -->
<script src="http://example.com/new/js/modernizr.js"></script>
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="example.com/new/favicon.png" >
</head>
<body>
<div id="preloader">
<div id="status">
<img src="http://example.com/new/images/preloader.gif" height="64" width="64" alt="">
</div>
</div>
<!-- Intro Section
================================================== -->
<section id="intro">
<header class="row">
<div id="logo" >
<a href="#" >
<img src="http://185.27.134.27/login_logo/ce7c43a1c5602d942c279e478e4c7823.jpg" alt="Zoon">
</a>
</div>
<nav id="nav-wrap">
<a class="menu-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
<a class="menu-btn" href="#" title="Hide navigation">Hide navigation</a>
<ul id="nav" class="nav">
<li class="current">Home</li>
<li>About</li>
</ul> <!-- end #nav -->
</nav> <!-- end #nav-wrap -->
</header> <!-- Header End -->
<div id="main" class="row">
<div class="twelve columns">
<p>Attention if you are the website owner you are seeing this page because you have not yet uploaded or installed a website if you are having problems please contact support through your cpanel or you may login below to edit your website.</p>
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
</div>
<form action="http://cpanel.example.com/login.php" method="post" name="login" >
<label for="mod_login_username">Cpanel Username:<input name="uname" id="mod_login_username" type="text" class="inputbox" alt="username" size="10" /></label>
<label for="mod_login_password">Password:<input type="password" id="mod_login_password" name="passwd" class="inputbox" size="10" alt="password" /></label>
<input type="submit" name="Submit" class="button" value="Login" />
Lost your password?
</div>
</div> <!-- main end -->
</section> <!-- end intro section -->
<!-- About Section
================================================== -->
<section id="about">
<div class="row section-header">
<div class="twelve columns">
<div class="icon-wrap">
<i class="fa fa-group"></i>
</div>
</div>
</div> <!-- end section-header -->
<div class="row section-content">
<div class="six columns">
</div>
<div class="six columns">
</div>
</div> <!-- end section-content -->
<div class="row section-content">
<div class="six columns">
</div>
<div class="six columns">
</div>
</div> <!-- end section-content -->
<div id="call-to-action">
<div class="row section-ads">
<div class="twelve columns">
<div class="action">
</div>
</div>
</div> <!-- end section-ads -->
</div> <!-- end call-to-action -->
</section> <!-- About Section End-->
<!-- Location Section
================================================== -->
<section id="location">
<div class="contacts">
<div class="row contact-details">
<div class="columns">
</div>
<div class="columns">
</div>
<div class="columns end">
</div>
</div> <!-- end contact-details -->
</div> <!-- end contacts -->
</section> <!-- end location section -->
<!-- footer
================================================== -->
<footer>
<div class="row">
<div class="twelve columns">
<ul class="copyright">
<li>© Copyright 2016 Coming soon</li>
</ul>
</div>
</div>
<div id="go-top"><a class="smoothscroll" title="Back to Top" href="#intro"><i class="icon-up-open"></i></a></div>
</footer> <!-- Footer End-->
<!-- Java Script
================================================== -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="http://empire-webhosting.com/new/js/jquery-1.10.2.min.js"></script>')</script>
<script type="text/javascript" src="http://example.com/new/js/jquery-migrate-1.2.1.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<script src="http://example.com/new/js/gmaps.js"></script>
<script src="http://example.com/new/js/waypoints.js"></script>
<script src="http://example.com/new/js/jquery.countdown.js"></script>
<script src="http://example.com/new/js/jquery.placeholder.js"></script>
<script src="http://example.com/new/js/backstretch.js"></script>
<script src="http://example.com/new/js/init.js"></script>
</body>
</html>

Change your css to this, because your css is invalid (when you define background-image you can't include the no-repeat. either use background: url() no-repeat; or add background-repeat: no-repeat;):
#intro {
position: relative;
padding-bottom: 102px;
min-height: 900px;
width: 100%;
background: #161415 url(http://example.com/images/38697eae8ca030cd1f8cd11d752249ef.jpg) no-repeat center center;
background-size: cover;
}
Also, not necessary to include the quotes in the url syntax. I prefer to leave it out. More information on this in this post: Is quoting the value of url() really necessary?

Material Design Lite fixed tabs menu title not alignied?

When trying to use the example of the menu layout with Fixed Tabs, with Googl'es MDL: http://www.getmdl.io/components/index.html#layout-section/layout .
The "title", next to the hamburger menu, isnt aligned horizontally, like it is in the example.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Material Design Lite -->
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Simple header with fixed tabs. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header
mdl-layout--fixed-tabs">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
</div>
<!-- Tabs -->
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
Tab 1
Tab 2
Tab 3
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
</div>
<main class="mdl-layout__content">
<section class="mdl-layout__tab-panel is-active" id="fixed-tab-1">
<div class="page-content"><!-- Your content goes here --></div>
</section>
<section class="mdl-layout__tab-panel" id="fixed-tab-2">
<div class="page-content"><!-- Your content goes here --></div>
</section>
<section class="mdl-layout__tab-panel" id="fixed-tab-3">
<div class="page-content"><!-- Your content goes here --></div>
</section>
</main>
</div>
</body>
</html>
http://codepen.io/anon/pen/EPaBzW

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' );