Cake PHP Theme integration - php

Question

I have following html/css theme and trying to convert it to cake php theme.
I was reading through tutorials but I just don't understand it. Either css file is not working or the content is not displaying.
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Shedule Me</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/styles.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="framework/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
<!-- Navigation -->
<nav id="mainNav" class="navbar navbar-default navbar-custom">
<div class="container header">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span><i class="fa fa-bars"></i>
</button>
<a class="navbar-brand logo-text" href="#page-top">New Theme</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
</li>
<li class="page-scroll">
Home
</li>
<li class="page-scroll">
About
</li>
<li class="page-scroll">
Services
</li>
<li class="page-scroll">
Contact Us
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- Header -->
<section>
<div class="container">
<div class="row">
<div class="col-md-7">
<img src="img/benner.png" alt="Banner" class="img-responsive" />
</div>
<div class="col-md-5">
<div class="card">
<h3 class="title-log">Already a Member?</h3>
<label>
Email
<input style="display:block;margin:0 auto;" type="text"/>
</label>
<label>
Password
<input style="display:block;margin:0 auto;" type="password"/>
</label>
<input type="button" value="Log in" class="elevator"/>
<h3>Not a Member?</h3>
Sign up
</div>
</div>
</div>
</div>
</section>
<!-- jQuery -->
<script src="framework/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="framework/bootstrap/js/bootstrap.min.js"></script>

Answer 1

webroot/
custom/ <-- custom css/js plugin folder, for example datepicker plugin
css/
js/
css/
img/
js/
CSS
// load css from css folder, example.com/css/bootstrap.min.css
<?= $this->Html->css('bootstrap.min') ?>
// load css from custom folder, example.com/custom/bootstrap.min.css
<?= $this->Html->css('/custom/bootstrap.min') ?>
// load remote / cdn css file, note without http or https
<?= $this->Html->css('//fonts.googleapis.com/css?family=Montserrat:400,700') ?>
JS / jQuery
// load js file from js folder, example.com/js/bootstrap.min.js
<?= $this->Html->js('bootstrap.min') ?>
// load js file from custom folder, example.com/custom/bootstrap.min.js
<?= $this->Html->js('/custom/bootstrap.min') ?>
// load remote / cdn js file, note without http or https
<?= $this->Html->js('//code.jquery.com/jquery-2.2.4.min.js') ?>
read more http://book.cakephp.org/3.0/en/views/helpers/html.html