- I can't change background color of navbar. The navbar-dark class works and changes text to white but none of the color classes work.
- My accordian is running over the footer and not staying in its container. How do I fix this?
- I copied the same code of my accordian from another faq page and this accordian text looks different.
Thank you in advance for your help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Permitting for PMNM</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="css/front-page.css" rel="stylesheet">
</head>
<!-- Start your project here-->
<body class="fixed-sn mdb-skin">
<!-- Main navigation -->
<header>
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark mdb-color darken-3">
<div class="container">
<a class="navbar-brand" href="#">
<strong>PMNM Permitting</strong>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-7" aria-controls="navbarSupportedContent-7" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent-7">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<!-- Content -->
<div class="container mt-3">
<!-- Card -->
<div class="card card-cascade wider">
<!-- Card image -->
<div class="view view-cascade gradient-card-header peach-gradient">
<!-- Title -->
<h2 class="card-header-title mb-3">FAQ</h2>
</div>
<!-- Card content -->
<div class="card-body">
<!--Accordion wrapper-->
<div class="accordion md-accordion" id="accordionEx" role="tablist" aria-multiselectable="true">
<!-- Accordion card -->
<div class="card">
<!-- Card header -->
<div class="card-header" role="tab" id="headingOne">
<a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<h5 class="mb-0">
Permit Application Procedures <i class="fa fa-angle-down rotate-icon"></i>
</h5>
</a>
</div>
<!-- Card body -->
<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordionEx" >
<div class="card-body">
<p>Monument Permitting Process Documents, Sample Applications and Instructions!</p>
<p>There are six Monument permit categories. Permits may be issued in the Monument for activities that:</p>
<div class="container-fluid mt-1 indent">
<p>1. further the understanding of Monument resources and qualities through <span class="underline">research;</span></p>
<p>2. further the <span class="underline">educational</span> value of the Monument;</p>
<p>3. assist in the <span class="underline">conservation and management</span> of the Monument;</p>
<p>4. allow <span class="underline">Native Hawaiian practices;</span></p>
<p>5. allow a <span class="underline">special ocean use;</span></p>
<p>6. allow <span class="underline">recreational</span> activities within the Midway Atoll Special Management Area.</p>
</div>
</div>
</div>
<!-- Accordion card -->
<!-- Accordion card -->
<div class="card">
<!-- Card header -->
<div class="card-header" role="tab" id="headingTwo">
<a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<h5 class="mb-0">
Permit Applications & Processing Information<i class="fa fa-angle-down rotate-icon"></i>
</h5>
</a>
</div>
<!-- Card body -->
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordionEx" >
<div class="card-body">
<p>Process Steps</p>
<p>1. Double check the Permit Deadlines below, to ensure that you are within the appropriate timeframe to submit your application.</p>
<p>2. Download and review the instructions most appropriate for your proposed activity. If you need assistance in choosing the most appropriate application type, please contact the Monument Permit Coordinator (contact information below).</p>
<p>3. Download and review the Compliance Information Sheet instructions. This form DOES NOT need to be submitted by the application deadline, but is required to be completed in full and submitted prior to the issuance of a Monument permit.</p>
<p>4. Download the sample application to help fill out your own application correctly.</p>
<p>5. Read through the application and then complete in full. It is suggested that all information submitted be double checked for accuracy.</p>
<p>6. Be sure to read the <strong><em>Monument's Unified Public Notification Policy</strong></em>, since all application summaries, as well as full applications, will be posted to the Monument website.</p>
<p>7. Submit the application. If possible, an initial submission of all applications via this online system is preferred but not required. <em>However, all applicants MUST mail in an ORIGINAL, SIGNED signature page of the application to the Monument office.</em></p>
<p><strong>8. Mail original, signed applications to:</strong>
<br>Monument Permit Coordinator
<br>Papahānaumokuākea Marine National Monument
<br>6600 Kalaniana‘ole Hwy., Suite 300
<br>Honolulu, Hawai‘i 96825 </p>
</div>
</div>
</div>
<!-- Accordion card -->
<!-- Accordion card -->
<div class="card">
<!-- Card header -->
<div class="card-header" role="tab" id="headingThree">
<a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<h5 class="mb-0">
General Documents <i class="fa fa-angle-down rotate-icon"></i>
</h5>
</a>
</div>
<!-- Card body -->
<div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordionEx">
<div class="card-body">
<p>Compliance Information Sheet</p>
<p><a href="#">Download Instructions</a></p>
<br>
<p>Sample Permit Application</p>
<p><a href="#">Download</a></p>
<br>
<p>Unified Public Notification Policy</p>
<p><a href="#">Download</a></p>
<br>
</div>
</div>
</div>
<!-- Accordion card -->
<!-- Accordion card -->
<div class="card">
<!-- Card header -->
<div class="card-header" role="tab" id="headingFour">
<a class="collapsed" data-toggle="collapse" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
<h5 class="mb-0">
Permit Application Types <i class="fa fa-angle-down rotate-icon"></i>
</h5>
</a>
</div>
<!-- Card body -->
<div id="collapseFour" class="collapse" role="tabpanel" aria-labelledby="headingFour" data-parent="#accordionEx">
<div class="card-body">
<!--Table-->
<table class="table table-hover">
<!--Table head-->
<thead>
<tr>
<th></th>
<th>Permit Applicate Type</th>
<th>Instructions</th>
</tr>
</thead>
<!--Table head-->
<!--Table body-->
<tbody>
<tr>
<th scope="row"></th>
<td>Research</td>
<td><a href="#">Download</a></td>
</tr>
<tr>
<th scope="row"></th>
<td>Education</td>
<td><a href="#">Download</a></td>
</tr>
<tr>
<th scope="row"></th>
<td>Conservation & Management</td>
<td><a href="#">Download</a></td>
</tr>
<tr>
<th scope="row"></th>
<td>Native Hawaiian Practices</td>
<td><a href="#">Download</a></td>
</tr>
<tr>
<th scope="row"></th>
<td>Special Ocean Use (SOU)</td>
<td><a href="#">Download</a></td>
</tr>
<tr>
<th scope="row"></th>
<td>Recreational (Midway Only)</td>
<td><a href="#">Download</a></td>
</tr>
</tbody>
<!--Table body-->
</table>
<!--Table-->
</div>
</div>
</div>
<!-- Accordion card -->
<!-- Accordion card -->
<div class="card">
<!-- Card header -->
<div class="card-header" role="tab" id="headingFive">
<a class="collapsed" data-toggle="collapse" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
<h5 class="mb-0">
Permit Deadlines <i class="fa fa-angle-down rotate-icon"></i>
</h5>
</a>
</div>
<!-- Card body -->
<div id="collapseFive" class="collapse" role="tabpanel" aria-labelledby="headingFive" data-parent="#accordionEx">
<div class="card-body">
<p>Permit applications received after the deadline dates are not guaranteed to be processed before the associated activity period commences.</p>
<br>
<p><strong>February 1</strong></p>
<p><i>For activities occurring between June 1 and Aug. 31</i></p>
<br>
<p><strong>May 1</strong></p>
<p><i>For activities occurring between Sept. 1 and Dec. 31</i></p>
<br>
<p><strong>September 1</strong></p>
<p><i>For activities occurring between Jan. 1 and May 31</i></p>
<br>
</div>
</div>
</div>
<!-- Accordion card -->
<!-- Accordion card -->
<div class="card">
<!-- Card header -->
<div class="card-header" role="tab" id="headingSix">
<a class="collapsed" data-toggle="collapse" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
<h5 class="mb-0">
For Information & Assistance <i class="fa fa-angle-down rotate-icon"></i>
</h5>
</a>
</div>
<!-- Card body -->
<div id="collapseSix" class="collapse" role="tabpanel" aria-labelledby="headingSix" data-parent="#accordionEx">
<div class="card-body">
<p>For more information, or if you need assistance of any kind, please contact the Monument Permit Coordinator:</p>
<p>Phone: (808) 397-2660</p>
<p>e-mail: nwhipermit@noaa.gov</p>
</div>
</div>
</div>
<!-- Accordion card -->
</div>
<!--/.Accordion wrapper-->
</div>
<!-- Card content -->
</div>
<!-- Card -->
</div>
<!-- Content -->
</header>
<!-- Footer -->
<footer class="page-footer font-small stylish-color-dark pt-4">
<!-- Footer Links -->
<div class="container text-center text-md-left">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-4 mx-auto">
<!-- Content -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">About Papahānaumokuākea Online Permitting</h5>
<p>This online permitting system allows you to apply to conduct activities within Papahānaumokuākea Marine National Monument. </p>
</br>
<p>Once your application is completed using this online permitting system, you will be able to manage your applications, obtain status updates, and subsequently report on your permitting activities.</p>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-2 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Instructions</h5>
<ul class="list-unstyled">
<li>
<a href="#!">Link 1</a>
</li>
<li>
<a href="#!">Link 2</a>
</li>
<li>
<a href="#!">Link 3</a>
</li>
<li>
<a href="#!">Link 4</a>
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-2 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Permit Deadlines</h5>
<ul class="list-unstyled">
<li>
<a href="#!">Link 1</a>
</li>
<li>
<a href="#!">Link 2</a>
</li>
<li>
<a href="#!">Link 3</a>
</li>
<li>
<a href="#!">Link 4</a>
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-2 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Contact Us</h5>
<ul class="list-unstyled">
<li>
<a href="#!">Link 1</a>
</li>
<li>
<a href="#!">Link 2</a>
</li>
<li>
<a href="#!">Link 3</a>
</li>
<li>
<a href="#!">Link 4</a>
</li>
</ul>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<hr>
<!-- Call to action -->
<ul class="list-unstyled list-inline text-center py-2">
<li class="list-inline-item">
<h5 class="mb-1">Create an account for free</h5>
</li>
<li class="list-inline-item">
<a href="#!" class="btn peach-gradient btn-lg">Sign up</a>
</li>
</ul>
<!-- Call to action -->
<hr>
<!-- Social buttons -->
<ul class="list-unstyled list-inline text-center">
<li class="list-inline-item">
<a class="btn-floating btn-fb mx-1">
<i class="fa fa-facebook"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-tw mx-1">
<i class="fa fa-twitter"> </i>
</a>
</li>
</ul>
<!-- Social buttons -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2017 Copyright:
<a href="https://papahanaumokuakea.gov"> Papahānaumokuākea Marine National Monument</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<script>
// Animations initialization
new WOW().init();
</script>
</body>
</html>
