This might sound odd... or insulting... but really you might want to learn how to use codepen before blindly pasting code into it.
The way you have written your code, ALL of it belongs in the right-most text are. The center box is for RAW CSS, aka without the HTML around it. The right box is for RAW JS, without the markup around it.
As such when assembled it's turning into gibberish.
See how you have in the center box:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!--jQuery CSS-->
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
<!--FontAwesome-->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
That's MARKUP, link tags, HTML... THAT IS NOT CSS so it' doesn't go there! Those are HTML links TO CSS.
See where you have:
<style>
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
</style>
What's inside those style tags IS CSS, but in the CSS box on codepen you would ONLY have the CSS, just like you would in an external CSS file.
Oh, and don't trust margin-bottom on body, it does strange things. Use padding instead.
So the ONLY thing that belongs in the center box on codepen is:
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
THAT'S IT. you don't put HTML there! Same goes for your scripting. This:
<!--jQuery: must be loaded before booststraps javascript-->
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<!--jQuery UI-->
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
contains NO JavaScript, that is HTML linking TO JavaScript.
Really though that's why I advise against rubbish like online editors/previewers and just work in a proper flat text editor testing in actual browsers. You want to share, get a hosting account somewhere and put it there.
As to PHP, codepen doesn't support PHP so I've no clue what you're expecting there... though:
<?phpinclude('config/css.php');?>
<?phpinclude('config/js.php');?>
Do we SEE a problem here? No spaces.
<?php include('config/css.php'); ?>
<?php include('config/js.php'); ?>
phpinclude is NOT all one word. <?php opens PHP, which you then are using the 'include' command. Two separate things! That's why for clarity sake even if it's a few extra characters, I like to split things into multiple lines.... AND it means if you are doing a bunch of PHP in a row, you don't have to open and close it every blasted line.
<?php
include('config/css.php');
include('config/js.php');
?>
See?
