I was trying to adjust the fonts in my html page according to the screen size.
I was using
body{
font-size:1vmax;
}
but when i decided to not use it anymore, the font is still changes according to the screen size. It seems fine when i not reference the css code though.. can anyone help me?
here is my html code:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Kokeru</title>
<!-- fonts -->
<!-- raleway for kokeru title -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght#1,600&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!-- custom styling -->
<link href="assets/css/custom-style.css" rel="stylesheet">
</head>
<body>
<!-- navbar -->
<nav class="navbar py-0">
<a class="navbar-brand " href="#" id="kokeruBrand">Kokeru</a>
<a class="my-0 ml-auto mr-5 py-0" href="#">
<button class="btn btn-outline-info" type="button">Login</button>
</a>
<!-- navbar -->
</nav>
<!-- penjelasan kokeru -->
<!-- beserta tanggal dan jam -->
<div class="text-center" id="penjelasanKokeru">
<h2>Monitoring Kebersihan dan Kerapihan Ruangan<br>Gedung Bersama Maju</h2>
<h3>Hari Minggu Tanggal 13 Desember 2020 Jam 11:11</h3>
</div>
<!-- ruangan2nya -->
<div class="container-fluid my-5">
<div class="row">
<a href="#" class="card-link col-lg-2">
<div class="card mx-3 px-0">
<div class="card-body text-center">
<h4 class="card-title text-center">R.123</h4>
BELUM<br>
Hilmi<br>
click for more detail
</div>
</div>
</a>
<a href="#" class="card-link col-lg-2">
<div class="card mx-3 px-0" style="width: 13rem;">
<div class="card-body text-center">
<h4 class="card-title text-center">R.123</h4>
BELUM<br>
Hilmi<br>
click for more detail
</div>
</div>
</a>
<a href="#" class="card-link col-lg-2">
<div class="card mx-3 px-0" style="width: 13rem;">
<div class="card-body text-center">
<h4 class="card-title text-center">R.123</h4>
BELUM<br>
Hilmi<br>
click for more detail
</div>
</div>
</a>
<a href="#" class="card-link col-lg-2">
<div class="card mx-3 px-0" style="width: 13rem;">
<div class="card-body text-center">
<h4 class="card-title text-center">R.123</h4>
BELUM<br>
Hilmi<br>
click for more detail
</div>
</div>
</a>
<a href="#" class="card-link col-lg-2">
<div class="card mx-3 px-0" style="width: 13rem;">
<div class="card-body text-center">
<h4 class="card-title text-center">R.123</h4>
BELUM<br>
Hilmi<br>
click for more detail
</div>
</div>
</a>
<a href="#" class="card-link col-lg-2">
<div class="card mx-3 px-0" style="width: 13rem;">
<div class="card-body text-center">
<h4 class="card-title text-center">R.123</h4>
BELUM<br>
Hilmi<br>
click for more detail
</div>
</div>
</a>
<!-- row -->
</div>
<!-- ruangan2nya -->
</div>
<!-- Option 2: jQuery, Popper.js, and Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</body>
</html>
here is my custom-style.css code :
body{
background-color: #bed0ca;
/* font-size: 1vmax; */
}
#kokeruBrand{
font-family: 'Raleway', sans-serif;
}
nav{
background-color: #e3f2fd;
}
#penjelasanKokeru{
color: blue;
}
/* a.card-link,
a.card-link:hover {
color: inherit;
} */
/*
#media screen and (max-width : 320)
{
body
{
font:1.5rem;
}
}
#media screen and (max-width : 1204px)
{
body
{
font:2.5rem;
}
} */
according to the comment, it seems that i still use my cached version of my stylesheet.
According to the comment, and like the Wechuck's answer,
take a look at the styling used via your browsers inspector/developer-tools you are probably still using a cached version of your stylesheet. Ctrl+F5 should force a reload.
according to the comment, it seems that i still use my cached version of my stylesheet.
You should reload the browser with Ctrl + F5
Or Ctrl + Shift + R
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>
Website structure currently looks like this:
index.html:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- FontAwesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<!-- Own styles -->
<link rel="stylesheet" href="css/styles.css">
<title>My website</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md-4 sidebar d-flex flex-column align-items-center justify-content-center text-center fixed-top">
<img src="images/avatar.jpg" class="rounded-circle">
<h3 class="text-light">John Doe</h3>
<h5 class="text-light">programmer</h5>
<p class="text-muted mt-5 mb-0">123 456 789</p>
<p class="text-muted">test#test.com</p>
<p class="mt-5 text-white">
Language 1
|
Language 2
</p>
<p class="social">
<i class="fab fa-facebook-f"></i></i>
<i class="fab fa-twitter"></i></i>
</p>
<p class="text-muted">© Someone | 2015 - 2019</p>
</div>
<div class="col-12 col-md-8 offset-md-4 d-flex flex-column mt-5 content">
<p>Content</p>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jquery.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
styles.css:
#media (max-width: 767.98px) {
.sidebar {
height: auto !important;
padding-top: 10px;
padding-bottom: 10px;
position: static;
}
}
.sidebar {
background-color: #9DB9E8;
height: 100vh;
}
On devices with class md and less I want to split sidebar on the left into two parts. First part should be on the top of the page only with following lines of code:
<img src="images/avatar.jpg" class="rounded-circle">
<h3 class="text-light">John Doe</h3>
<h5 class="text-light">programmer</h5>
Second part should be at the bottom of the page (under div with class content) and contain all the remaining lines of code from sidebar. Both parts should have same styles as sidebar.
How do I achieve this in Bootstrap 4?
To do this, you should split them into two divs.
<div id="section1">
(what ever you want in 1st section.)
</div>
<div id="section2">
(whatever you want in 2nd section.)
</div>
I have following HTML code with bootstrap with a simple login. I want to make a box behind the login form and to be something like this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Login Page</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- HOVER CSS -->
<link href="css/hover-min.css" rel="stylesheet" media="all">
<link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="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>
<div class="logo" class="col-xs-4 col-xs-offset-1">
<img src="img/tei.png" class="img-responsive" alt="Responsive image">
</div>
<!-- NAVBAR -->
<div class="navbar navbar-default navbar-custom navbar-fixed-top" role="navigation">
<div class="container container-nav">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle Nav</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Contact
</li>
</ul>
</div>
</div>
</div>
<!-- END NAVBAR -->
<!-- LOGIN BOX -->
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-6">
<div class="panel panel-default hvr-glow">
<div class="panel-heading"> <strong class="">Σύνδεση στην πλατφόρμα Εργαστηρίων</strong>
</div>
<div class="panel-body">
<form class="form-horizontal" role="form" method="post">
<div class="form-group">
<label for="onoma-xristi" class="col-sm-3 control-label">Όνομα Χρήστη</label>
<div class="col-sm-9">
<input name="username" type="text" class="form-control" id="onoma-xristi" placeholder="" required="">
</div>
</div>
<div class="form-group">
<label for="kwdikos-xristi" class="col-sm-3 control-label">Κωδικός</label>
<div class="col-sm-9">
<input name="password" type="password" class="form-control" id="kwdikos-xristi" placeholder="" required="">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<div class="checkbox">
<label class="">
<input type="checkbox" class="">Να με θυμάσαι</label>
</div>
</div>
</div>
<div class="form-group last">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-success btn-sm hvr-grow-shadow">Σύνδεση</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- END LOGIN BOX -->
<!-- HEADER -->
<div class="header">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
</div>
</div>
</div>
</div>
<!-- END HEADER -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
And live at
Live here
I searched a lot for this border or box but i didnt find anything at all at bootstrap site.
Can anyone guide me of how to make this border and put the login box in the middle of the box and i will play with the margin top.
Thanks a lot for your time!
Wrap it in a container element. A "Bootstrap" way to do this would be something along the lines of nesting columns.
<div class="container">
<div class="row"><!-- new -->
<div class="col-md-12 form-container"><!-- new -->
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-default hvr-glow">
<!-- rest of your markup -->
</div>
</div>
</div>
</div><!-- new -->
</div><!-- new -->
</div>
Style .form-container as needed; i.e. background-color: white; border-radius: 10px;.
I see you have a custom CSS selector on your navbar's .container element of .container-nav that limits the width of the navbar. You'd have to apply something similar if you wanted what I have above to only be as wide as the navbar.
It looks like this project is a work-in-progress as I foresee issues with your logo and the layout you currently have. So I think any answer you get won't be exactly on point.
Hope this gets you pointed in the right direction though.
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' );