xxxxxxxxxx1
<!DOCTYPE HTML>2
<html>3
4
<head>5
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">6
<meta http-equiv="x-ua-compatible" content="ie=edge">7
<meta name="apple-mobile-web-app-capable" content="yes"/>8
<meta name="apple-mobile-web-app-status-bar-style" content="black">9
10
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/splash/splash-icon.png">11
<link rel="apple-touch-startup-image" href="img/splash/splash-screen.png" media="screen and (max-device-width: 320px)"/>12
<link rel="apple-touch-startup-image" href="img/splash/splash-screen@2x.png" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)"/>13
<link rel="apple-touch-startup-image" sizes="640x1096" href="img/splash/splash-screen@3x.png"/>14
<link rel="apple-touch-startup-image" sizes="1024x748" href="img/splash/splash-screen-ipad-landscape" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : landscape)"/>15
<link rel="apple-touch-startup-image" sizes="768x1004" href="img/splash/splash-screen-ipad-portrait.png" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : portrait)"/>16
<link rel="apple-touch-startup-image" sizes="1536x2008" href="img/splash/splash-screen-ipad-portrait-retina.png" media="(device-width: 768px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)"/>17
<link rel="apple-touch-startup-image" sizes="1496x2048" href="img/splash/splash-screen-ipad-landscape-retina.png" media="(device-width: 768px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"/>18
19
<title>Conversation Tools</title>20
21
<!-- Bootstrap core CSS -->22
<link href="css/bootstrap.min.css" rel="stylesheet">23
<!-- Material Design Bootstrap -->24
<link href="css/mdb.min.css" rel="stylesheet">25
<!-- Font Awesome -->26
<link href="node_modules/@fortawesome/fontawesome-pro/css/all.min.css" rel="stylesheet">27
<!-- Your custom styles (optional) -->28
<link href="css/style.css" rel="stylesheet">29
30
</head>31
32
<body class="fixed-sn white-skin">33
34
<!-- You write code for this content block in another file -->35
36
37
<!-- Start your project here-->38
<!-- Adds the nav macro -->39
40
41
<!-- params = { icon: 'fas fa-crown', title: 'Courageous Conversation', id: 'courageous' } -->42
43
<header>44
<!-- Sidebar navigation -->45
<div id="slide-out" class="side-nav fixed">46
<ul class="custom-scrollbar">47
<!-- Logo -->48
<li>49
<div class="logo-wrapper waves-light waves-effect waves-light">50
<a href="index.html"><img src="img/logo-stacked.png" class="img-fluid flex-center"></a>51
</div>52
</li>53
<!--/. Logo -->54
<!-- Side navigation links -->55
<li >56
<a href="normal-to-noble.html">Normal To Noble</a>57
</li>58
<li >59
<a href="which.html">Which Conversation?</a>60
</li>61
<li >62
<a href="courageous.html">Courageous</a>63
</li>64
<li >65
<a href="comforting.html">Comforting</a>66
</li>67
<li >68
<a href="connecting.html">Connecting</a>69
</li>70
<li >71
<a href="collaborating.html">Collaborating</a>72
</li>73
<li >74
<a href="conciliatory.html">Conciliatory</a>75
</li>76
<li >77
<a href="prayers.html">Prayers</a>78
</li>79
<li >80
<a href="character.html">About Character</a>81
</li>82
<li >83
<a href="contact-us.html">Contact Us</a>84
</li>85
<!--/. Side navigation links -->86
</ul>87
<div class="sidenav-bg mask-strong"></div>88
</div>89
<!--/. Sidebar navigation -->90
<!-- Navbar -->91
<nav class="navbar navbar-light fixed-top navbar-toggleable-md navbar-expand-lg double-nav">92
<!-- SideNav slide-out button -->93
<div class="float-left">94
<a href="#" data-activates="slide-out" class="button-collapse ml-0 pr-2">95
<i class="fas fa-bars"></i>96
</a>97
</div>98
<!-- Breadcrumb-->99
<div class="ml-2 mr-auto navbar-text navbar-light">100
<i class=""></i>101
102
Conversation Tools103
</div>104
</nav>105
<!-- /.Navbar -->106
</header>107
108
<!-- params = { icon: 'fas fa-crown', title: 'Courageous Conversation', id: 'courageous' } -->109
110
<main class="pt-5 pb-5">111
112
113
<!-- params = [{ imageURL, title, text, buttonText, buttonURL }] -->114
115
<!-- params = { cards: [ { imageURL, title, text, buttonIcon, buttonText, buttonURL }] } -->116
117
<!-- Card deck -->118
<div class="card-deck mx-1 mt-1">119
120
<!-- Card -->121
<div class="card mb-4">122
<!-- Card Image -->123
<div class="view overlay">124
<img class="card-img-top" src="./img/normal-to-noble/normal-to-noble-cover.jpg">125
<a href="./normal-to-noble.html">126
<div class="mask rgba-white-slight"></div>127
</a>128
</div>129
<!-- /Card Image -->130
<!-- Card Content -->131
<div class="card-body">132
<!--Title-->133
<h5 class="card-title">Normal To Noble</h5>134
<!--Text-->135
<p class="card-text">Breaking the normal cycle to walk the noble path</p>136
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->137
<a type="button" class="btn btn-light-blue btn-md float-bottom" href="./normal-to-noble.html">138
Read more139
</a>140
</div>141
<!-- /Card Content -->142
</div>143
<!-- /Card -->144
145
<!-- Card -->146
<div class="card mb-4">147
<!-- Card Image -->148
<div class="view overlay">149
<img class="card-img-top" src="./img/courageous/courageous-cover.jpg">150
<a href="./courageous.html">151
<div class="mask rgba-white-slight"></div>152
</a>153
</div>154
<!-- /Card Image -->155
<!-- Card Content -->156
<div class="card-body">157
<!--Title-->158
<h5 class="card-title">Courageous Conversation</h5>159
<!--Text-->160
<p class="card-text">Course correct and reconnect quickly in conflict</p>161
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->162
<a type="button" class="btn btn-light-blue btn-md float-bottom" href="./courageous.html">163
Read more164
</a>165
</div>166
<!-- /Card Content -->167
</div>168
<!-- /Card -->169
170
</div>171
<!-- /Card Deck -->172
173
174
<!-- params = { cards: [ { imageURL, title, text, buttonIcon, buttonText, buttonURL }] } -->175
176
<!-- Card deck -->177
<div class="card-deck mx-1 mt-1">178
179
<!-- Card -->180
<div class="card mb-4">181
<!-- Card Image -->182
<div class="view overlay">183
<img class="card-img-top" src="./img/comforting/comforting-cover.jpg">184
<a href="./comforting.html">185
<div class="mask rgba-white-slight"></div>186
</a>187
</div>188
<!-- /Card Image -->189
<!-- Card Content -->190
<div class="card-body">191
<!--Title-->192
<h5 class="card-title">Comforting Conversation</h5>193
<!--Text-->194
<p class="card-text">Move from adversity to joy</p>195
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->196
<a type="button" class="btn btn-light-blue btn-md float-bottom" href="./comforting.html">197
Read more198
</a>199
</div>200
<!-- /Card Content -->201
</div>202
<!-- /Card -->203
204
<!-- Card -->205
<div class="card mb-4">206
<!-- Card Image -->207
<div class="view overlay">208
<img class="card-img-top" src="./img/connecting/connecting-cover.jpg">209
<a href="./connecting.html">210
<div class="mask rgba-white-slight"></div>211
</a>212
</div>213
<!-- /Card Image -->214
<!-- Card Content -->215
<div class="card-body">216
<!--Title-->217
<h5 class="card-title">Connecting Conversation</h5>218
<!--Text-->219
<p class="card-text">Make a lasting and deep soul impression</p>220
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->221
<a type="button" class="btn btn-light-blue btn-md float-bottom" href="./connecting.html">222
Read more223
</a>224
</div>225
<!-- /Card Content -->226
</div>227
<!-- /Card -->228
229
</div>230
<!-- /Card Deck -->231
232
233
<!-- params = { cards: [ { imageURL, title, text, buttonIcon, buttonText, buttonURL }] } -->234
235
<!-- Card deck -->236
<div class="card-deck mx-1 mt-1">237
238
<!-- Card -->239
<div class="card mb-4">240
<!-- Card Image -->241
<div class="view overlay">242
<img class="card-img-top" src="./img/collaborating/collaborating-cover.jpg">243
<a href="./collaborating.html">244
<div class="mask rgba-white-slight"></div>245
</a>246
</div>247
<!-- /Card Image -->248
<!-- Card Content -->249
<div class="card-body">250
<!--Title-->251
<h5 class="card-title">Collaborating Conversation</h5>252
<!--Text-->253
<p class="card-text">Making the best decisions in one accord</p>254
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->255
<a type="button" class="btn btn-light-blue btn-md float-bottom" href="./collaborating.html">256
Read more257
</a>258
</div>259
<!-- /Card Content -->260
</div>261
<!-- /Card -->262
263
<!-- Card -->264
<div class="card mb-4">265
<!-- Card Image -->266
<div class="view overlay">267
<img class="card-img-top" src="./img/conciliatory/conciliatory-cover.jpg">268
<a href="./conciliatory.html">269
<div class="mask rgba-white-slight"></div>270
</a>271
</div>272
<!-- /Card Image -->273
<!-- Card Content -->274
<div class="card-body">275
<!--Title-->276
<h5 class="card-title">Conciliatory Conversation</h5>277
<!--Text-->278
<p class="card-text">How to apologize and bring lasting reconciliation</p>279
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->280
<a type="button" class="btn btn-light-blue btn-md float-bottom" href="./conciliatory.html">281
Read more282
</a>283
</div>284
<!-- /Card Content -->285
</div>286
<!-- /Card -->287
288
</div>289
<!-- /Card Deck -->290
291
292
<!-- params = { cards: [ { imageURL, title, text, buttonIcon, buttonText, buttonURL }] } -->293
294
<!-- Card deck -->295
<div class="card-deck mx-1 mt-1">296
297
<!-- Card -->298
<div class="card mb-4">299
<!-- Card Image -->300
<div class="view overlay">301
<img class="card-img-top" src="./img/prayers/prayers-cover.jpg">302
<a href="./prayers.html">303
<div class="mask rgba-white-slight"></div>304
</a>305
</div>306
<!-- /Card Image -->307
<!-- Card Content -->308
<div class="card-body">309
<!--Title-->310
<h5 class="card-title">Inspirational Prayers</h5>311
<!--Text-->312
<p class="card-text">Prayers to strengthen your identity and your spirit</p>313
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->314
<a type="button" class="btn btn-light-blue btn-md float-bottom" href="./prayers.html">315
Read more316
</a>317
</div>318
<!-- /Card Content -->319
</div>320
<!-- /Card -->321
322
<!-- Card -->323
<div class="card mb-4">324
<!-- Card Image -->325
<div class="view overlay">326
<img class="card-img-top" src="./img/character/character-cover.jpg">327
<a href="./character.html">328
<div class="mask rgba-white-slight"></div>329
</a>330
</div>331
<!-- /Card Image -->332
<!-- Card Content -->333
<div class="card-body">334
<!--Title-->335
<h5 class="card-title">About Character</h5>336
<!--Text-->337
<p class="card-text">The 49 character qualities of Christ and our spiritual transformation</p>338
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->339
<a type="button" class="btn btn-light-blue btn-md float-bottom" href="./character.html">340
Read more341
</a>342
</div>343
<!-- /Card Content -->344
</div>345
<!-- /Card -->346
347
</div>348
<!-- /Card Deck -->349
350
</main>351
<footer class="page-footer font-small fixed-bottom">352
<!-- Footer Elements -->353
<div class="container">354
<!-- Grid row-->355
<div class="row">356
<!-- Grid column -->357
<div class="col-md-12 py-1">358
<div class="mb-5 flex-center">359
<!-- Contact Us -->360
<a href="./contact-us.html">361
<i class="fas fa-envelope fa-lg white-text mx-md-5 mx-2 fa-2x"></i>362
</a>363
<!-- Facebook -->364
<a href="https://www.facebook.com/relatematters/">365
<i class="fab fa-facebook fa-lg white-text mx-md-5 mx-2 fa-2x"></i>366
</a>367
<!-- Twitter -->368
<a href="https://twitter.com/relatematters">369
<i class="fab fa-twitter fa-lg white-text mx-md-5 mx-2 fa-2x text-black"></i>370
</a>371
<!--Instagram-->372
<a href="https://www.instagram.com/relatematters/">373
<i class="fab fa-instagram fa-lg white-text mx-md-5 mx-2 fa-2x text-black"></i>374
</a>375
</div>376
</div>377
<!-- Grid column -->378
</div>379
<!-- Grid row-->380
</div>381
</footer>382
<!-- /Start your project here-->383
384
385
<!-- JQuery -->386
<script type="text/javascript" src="js/jquery-3.4.0.min.js"></script>387
<!-- Bootstrap tooltips -->388
<script type="text/javascript" src="js/popper.min.js"></script>389
<!-- Bootstrap core JavaScript -->390
<script type="text/javascript" src="js/bootstrap.min.js"></script>391
<!-- MDB core JavaScript -->392
<script type="text/javascript" src="js/mdb.min.js"></script>393
<!-- Your application script -->394
<script type="text/javascript" src="js/main.js"></script>395
396
<!-- You write code for this scripts block in another file -->397
398
399
<script>400
$(function () {401
const url = new URL(window.location.href);402
const tab = url.searchParams.get("tab");403
const name = url.searchParams.get("name");404
405
function onShownTab(e) {406
const anchor = $('a[name="' + name + '"]').get(0);407
anchor.scrollIntoView({ behavior: 'smooth', block: 'start'});408
$('ul.nav a[href="#' + tab + '"]').off('shown.bs.tab', onShownTab);409
}410
411
if (tab) {412
// If there is a tab, show it, then scroll to anchor413
name && $('ul.nav a[href="#' + tab + '"]').on('shown.bs.tab', onShownTab);414
$('ul.nav a[href="#' + tab + '"]').tab('show');415
} else if (name) {416
// No tab specified, so just scroll to anchor417
const anchor = $('a[name="' + name + '"]').get(0);418
anchor.scrollIntoView({ behavior: 'smooth', block: 'start'});419
}420
});421
</script>422
423
</body>424
</html>425
xxxxxxxxxx1
.courageous-text {2
color: #9E0B2C !important; }3
4
.courageous-button {5
background-color: #9E0B2C; }6
7
.normal-to-noble-button {8
background-color: #F6682F; }9
10
.comforting-button {11
background-color: #195BE7; }12
13
.connecting-button {14
background-color: #1B881F; }15
16
.collaborating-button {17
background-color: #805A33; }18
19
.conciliatory-button {20
background-color: #31A3DD; }21
22
.prayers-button {23
background-color: #A836F7; }24
25
.character-button {26
background-color: #A6C037; }27
28
.contact-us-button {29
background-color: #5961A8; }30
31
.bg-relate-purple {32
background: #5961A8 !important; }33
34
.bg-relate-red {35
background: #9C000D; }36
37
.flex-item {38
margin: 0;39
padding: 1.5em 1em 1em;40
width: 33.3%;41
height: 10em;42
line-height: 1.25em;43
font-size: 0.8em;44
text-align: center;45
border: thin solid white;46
color: white !important; }47
48
.nav {49
flex-wrap: nowrap; }50
51
.side-nav ul li.nav-item-selected {52
background-color: #1D83FB; }53
54
.side-nav ul li.nav-item-selected a {55
color: white; }56
57
.classic-tabs ul.tabs-white li.nav-item a.nav-link {58
font-weight: 500;59
border-right: 1px solid #F8F8F8 !important;60
border-left: 1px solid #F8F8F8 !important;61
color: #7B83CA; }62
63
.classic-tabs ul.tabs-white li.nav-item a.nav-link.active {64
color: #6A72B9;65
border-bottom: 2px solid #6A72B9 !important; }66
67
.classic-tabs .nav li:first-child {68
margin-left: 0px; }69
70
.fixed-sn main {71
margin-left: 0px;72
margin-right: 0px;73
padding-top: 3rem;74
padding-left: 0px; }75
76
@media only screen and (min-width: 768px) {77
.side-nav.fixed {78
-webkit-transform: translateX(0px);79
-ms-transform: translateX(0px);80
transform: translateX(0px) !important; }81
.navbar-text {82
margin-left: 255px !important; }83
.fixed-sn nav .button-collapse {84
display: none; }85
.fixed-sn main {86
margin-left: 15rem; }87
.page-footer {88
margin-left: 240px;89
padding-left: 50px !important;90
padding-right: 50px !important; } }91
92
@media only screen and (min-width: 993px) {93
.fixed-sn main {94
padding-top: 3.5rem; } }95
96
@media only screen and (min-width: 1441px) {97
.fixed-sn nav {98
margin-left: 0px; }99
.navbar-text {100
margin-left: 15px !important; } }101
xxxxxxxxxx1
// SideNav Button Initialization2
$(".button-collapse").sideNav();3
// SideNav Scrollbar Initialization4
var sideNavScrollbar = document.querySelector('.custom-scrollbar');5
Ps.initialize(sideNavScrollbar);6
7
new WOW().init();8
Console errors: 0