+ <li class="nav-item"><a class="nav-link" href="#nug-opening">User Guide</a></li>

+ <nav class="nav nav-pills flex-column" style="display:none;">

+ {% for sectionnug in site.data.nug-sections %}

+ <a class="nav-link ml-3 my-1" href="#{{ sectionnug.slug }}">{{ sectionnug.name }}</a>

+ {% endfor %}

+ </nav>

+<div id="nug" class="container-fluid">

+ <div class="row justify-content">

+ <div id="nug-opening" class="feature-section">

+ <div class="container offsetanchor">

+ <div class="section-header" id="features-section">

+ <center>

+ <span class="fa fa-user"aria-hidden="true"></span>

+ <h2>New User Guide</h2>

+ </center>

+ </div>

+ <div id="feature-heading-content">

+ <hr class="my-4">

+ <blockquote class="blockquote">

+ <p class="mb-0"></p>

+ </blockquote>

+ </div>

+ </div>

+ </div>

+

+ <!-- Starting the content section of the page -->

+ <div id="nug-content" class="col-sm-10">

+ <!-- Site Features -->

+ {% for section in site.data.nug-sections %}

+ <div id="{{ section.slug }}" class="index-section nug-feature-section" style="background-color:#{{ section.color }};">

+ <div class="container offsetanchor">

+ <div id="nug-{{ section.slug }}" class="section-header">

+ <center>

+ <span class="{{ section.glyph }}" style="font-size:100px;" aria-hidden="true"></span>

+ <h2>{{ section.name }}</h2>

+ </center>

+ </div>

+ <div class="feature-{{ section.slug }}">

+ <div class="row">

+ <p>{{ section.text }}</p>

+ {% for feature in site.data.features %}

+ {% if feature.section == section.slug %}

+ <div class="{% if section.col == 3 %}col-md-4{% else %}col-sm-6{% endif %}" style="min-height:280px;">

+ <h3>{{ feature.name }}</h3>

+ <p>{{ feature.text }}</p>

+ </div>

+ {% endif %}

+ {% endfor %}

+ </div>

+ </div>

+ </div>

+ </div>

+ {% endfor %}

+ </div>

+ <!-- Ending the content section of the page -->

+

+ <!-- Starting the page index nav menu -->

+ <div id="nug-index" class="col-2 hidden-sm-down">

+ <nav id="navbar-main" class="sticky-top navbar navbar-light" style="padding-top:50px;margin-top:-50px;">

+ <nav id="nug-nav-body" class="nav nav-pills flex-column">

+ <a id="features-index" href="#nug-opening" style="color:#000;line-height:50px;text-align:center;font-size:1.3rem;"><b>User Guide</b></a>

+ {% for section in site.data.nug-sections %}

+ <nav class="nav nav-pills flex-column nav-item align-middle">

+ <a class="nav-link ml-3 my-1" href="#{{ section.slug }}"><span id="nug-index-span">{{ section.name }}</span></a>

+ </nav>

+ {% endfor %}

+ </nav>

+ </nav>

+ </div>

+ <!-- Ending the page index nav menu -->

+

+

+ </div> <!-- Closing the row justify-content clases -->

+</div> <!-- Closing the ID creating-account and the main container class -->

+<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

+ <div class="modal-dialog" role="document" style="max-width:400px;">

+ <div class="modal-content">

+ <div class="modal-header">

+ <h5 class="modal-title" id="exampleModalLabel">Reset your XMPP Account Password</h5>

+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">

+ <span aria-hidden="true">&times;</span>

+ </button>

+ </div>

+ <div class="modal-body">

+

+

+ <form action="{{ site.url }}:5281/resetpass/" method="post" class="form-horizontal needs-validation" style="padding: 15px;" novalidate="">

+ <p class="error"></p>

+ <div style="margin-bottom: 25px" class="input-group">

+ <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>

+ <div class="input-group">

+ <input type="text" class="form-control" name="username" placeholder="Username" id="username" required="">

+ <div class="input-group-append">

+ <span class="input-group-text" style="font-size:0.8em;font-weight:bold;">@{{ site.xmpp-url }}</span>

+ </div>

+ <div class="invalid-feedback" style="width: 100%;">Your username is required.</div>

+ </div>

+ </div>

+ <div style="margin-bottom: 25px" class="input-group">

+ <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>

+ <div class="input-group">

+ <input type="email" class="form-control" name="email" placeholder="E-Mail" id="email" required="">

+ <div class="invalid-feedback" style="width: 100%;">Your email address is required.</div>

+ </div>

+ </div>

+

+

+

+ <p>After submitting, a link will be sent to the email address that appears on your vCard.</p>

+ <div class="modal-footer">

+ <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

+ <button id="button" type="submit" class="btn btn-primary">Submit</button>

+ </div>

+ </form>

+ </div>

+ </div>

+ </div>

+</div>

+ <div id="reset-password-link" style="float:right;padding:10px 30px 0 0;">

+ <a href="#" data-toggle="modal" data-target="#exampleModal" class="float-right">Reset Password</a>

+ </div>

+ </div>

+ </div>

+ </div>

+ </div>

+ {% include password-reset.html %}