Agregar plantilla signal de https://github.com/ThemesGuide/bootstrap-themes

4 years ago · 688545c3dd
parent 6853a0176a
commit 688545c3dd
10 changed files with 7890 additions and 0 deletions
--- a/signal/index.html
+++ b/signal/index.html
@ -0,0 +1,679 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Signal Bootstrap 4 Theme Full Screen</title>
+    <meta name="description" content="Signal is a free, open source Bootstrap 4 theme" />
+    <meta name="generator" content="Themestr.app">
+    <link rel="icon" href="http://themes.guide/favicon.ico" type="image/x-icon" />
+    <link rel="shortcut icon" href="http://themes.guide/favicon.ico" type="image/x-icon" />
+    <meta property="og:image" name="twitter:image" content="http://bootstrap.themes.guide/assets/ss_signal.png">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:site" content="@ThemesGuide">
+    <meta name="twitter:creator" content="@ThemesGuide">
+    <meta name="twitter:title" content="Open-source Bootstrap 4 Themes">
+    <meta name="twitter:description" content="Download Signal - free, open source Bootstrap 4 theme by Themes.guide">
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/3.0.0/css/ionicons.css" rel="stylesheet">
+    <link href="./theme.css" rel="stylesheet">
+    <link href="./template.css" rel="stylesheet">
+  </head>
+  
+  <body data-spy="scroll" data-target="#navbar1" data-offset="60">
+    <header class="bg-primary">
+        <div class="container h-100">
+            <div class="row h-100">
+                <div class="col-12">
+                    <div class="text-center m-0 vh-100 d-flex flex-column justify-content-center text-light">
+                        <h1 class="display-4">Signal</h1>
+                        <p class="lead">Like sailing yacht flags in a busy harbor.</p>
+                        <div class="row">
+                            <div class="col-lg-4 col-sm-6 mx-auto">
+                                <div class="input-group mb-3">
+                                  <input type="text" class="form-control form-control-lg" placeholder="your@email">
+                                  <div class="input-group-append">
+                                    <button class="btn btn-outline-light btn-lg rounded-right" type="button">Sign-up</button>
+                                  </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="mt-2 mx-auto">
+                                                            <div class="btn-group">
+                                  <a href="theme.css" class="btn btn-outline-light btn-lg">
+                                    Download Theme
+                                  </a>
+                                  <button type="button" class="btn btn-lg btn-outline-light dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                    <span class="sr-only">Downloads</span>
+                                  </button>
+                                  <div class="dropdown-menu">
+                                      <a class="dropdown-item" href="theme.css">theme.css</a>
+                                      <a class="dropdown-item" href="theme.min.css">theme.min.css</a>
+                                      <div class="dropdown-divider"></div>
+                                      <a class="dropdown-item" href="theme.scss">theme.scss</a>
+                                      <div class="dropdown-divider"></div>
+                                      <a class="dropdown-item" target="new" href="https://github.com/ThemesGuide/bootstrap-themes/tree/master/signal">Full template</a>
+                                  </div>
+                                </div> 
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+        <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary" id="navbar1">
+        <div class="container">
+            <a class="navbar-brand mr-1 mb-1 mt-0" href="../">Bootstrap 4</a>
+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="navbar-collapse collapse justify-content-center" id="collapsingNavbar">
+                <ul class="navbar-nav">
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="themesDd" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                          Themes
+                        </a>
+                        <div class="dropdown-menu" aria-labelledby="themesDd">
+                            
+                            
+                            <a class="dropdown-item px-2 active" href="../signal">Signal</a>
+                            
+                            <a class="dropdown-item px-2 " href="../greyson">Greyson</a>
+                            
+                            <a class="dropdown-item px-2 " href="../fresca">Fresca</a>
+                            
+                            <a class="dropdown-item px-2 " href="../darkster">Darkster</a>
+                            
+                            <a class="dropdown-item px-2 " href="../hello_kiddie">Hello Kiddie</a>
+                            
+                            <a class="dropdown-item px-2 " href="../blue_voltage">Blue Voltage</a>
+                            
+                            <a class="dropdown-item px-2 " href="../hootstrap">Hootstrap</a>
+                            
+                            <a class="dropdown-item px-2 " href="../herbie">Herbie</a>
+                            
+                            <a class="dropdown-item px-2 " href="../boldstrap">Boldstrap</a>
+                            
+                            <a class="dropdown-item px-2 " href="../lovey">Lovey</a>
+                            
+                            <a class="dropdown-item px-2 " href="../bootstrap_purple">Bootstrap Purple</a>
+                            
+                            <a class="dropdown-item px-2 " href="../monotony">Monotony</a>
+                            
+                            <a class="dropdown-item px-2 " href="../poypull">Poypull</a>
+                            
+                            <a class="dropdown-item px-2 " href="../tequila">Tequila</a>
+                            
+                            <a class="dropdown-item px-2" href="https://themestr.app" rel="nofollow" target="_new" title="Bootstrap theme builder">Build your own...</a>
+                        </div>
+                    </li>
+                </ul>
+                <ul class="navbar-nav ml-auto">
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="layoutDd" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                          Layouts
+                        </a>
+                        <div class="dropdown-menu" aria-labelledby="layoutDd">
+                            <a class="dropdown-item px-2" href="./">Default</a>
+                            <a class="dropdown-item px-2" href="./template2.html">Layout 2</a>
+                            <a class="dropdown-item px-2" href="./template3.html">Layout 3</a>
+                        </div>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#buttons">Buttons</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#navs">Navs</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#cards">Cards</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#modals">Modals</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#typography">Typography</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#forms">Forms</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#grid">Grid</a>
+                    </li>
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="navbarDd" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                          More
+                        </a>
+                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDd">
+                            <a class="dropdown-item px-2" href="#more">Badges</a>
+                            <a class="dropdown-item px-2" href="#more">Tooltips &amp; Popups</a>
+                            <a class="dropdown-item px-2" href="#more">Progress &amp; Alerts</a>
+                            <div class="dropdown-divider"></div>
+                            <a class="dropdown-item px-2" href="#more">All</a>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav> 
+    <main>
+        <section class="container">
+            <div class="row vh-100">
+                <div class="col-12 my-auto">
+                    <div class="row text-center">
+                        <div class="col-lg-4 mb-4">
+                            <div class="card h-100">
+                                <div class="card-body d-flex flex-column justify-content-center align-items-center">
+                                    <h1 class="display-2 text-primary"><span class="ion ion-ios-snow-outline"></span></h1>
+                                    <h4 class="card-title text-primary">Unique</h4>
+                                    <p class="card-text">Don't like that typical Bootstrap look? Each theme has a custom look-and-feel, while maximizing use of Bootstrap without extensive additional CSS & JS.</p>
+                                    <a href="#" class="btn btn-primary mt-auto">Button</a>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-lg-4 mb-4">
+                            <div class="card h-100">
+                                <div class="card-body d-flex flex-column justify-content-center align-items-center">
+                                    <h1 class="display-2 text-primary"><span class="ion ion-ios-tablet-portrait-outline"></span></h1>
+                                    <h4 class="card-title text-primary">Responsive</h4>
+                                    <p class="card-text">Based on mobile-first Bootstrap 4, all themes are 100% responsive and designed to look great on everything from smartphones to tablets to desktops..</p>
+                                    <a href="#" class="btn btn-primary mt-auto">Button</a>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-lg-4 mb-4">
+                            <div class="card h-100">
+                                <div class="card-body d-flex flex-column justify-content-center align-items-center">
+                                    <h1 class="display-2 text-primary"><span class="ion ion-ios-checkmark-circle-outline"></span></h1>
+                                    <h4 class="card-title text-primary">Consistent</h4>
+                                    <p class="card-text">Themes are crafted with care for design and performance. All themes are built on modern HTML5 & CSS3 standards to ensure consistency and cross-browser support.</p>
+                                    <a href="#" class="btn btn-primary mt-auto">Button</a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+                <section id="buttons" class="pb-5">
+            <div class="container">
+                <div class="row">
+                    <div class="col-md-9">
+                        <div class="pb-3">
+                            <button type="button" class="btn btn-primary mr-1">Primary #FF304F</button>
+                            <button type="button" class="btn btn-outline-primary">Outline</button>
+                        </div>
+                        <div class="pb-3">
+                            <button type="button" class="btn btn-primary align-bottom btn-lg mr-1">Large</button>
+                            <button type="button" class="btn btn-primary align-bottom mr-1">Normal</button>
+                            <button type="button" class="btn btn-primary align-bottom btn-sm mr-1">Small</button>
+                            <a href="#" class="text-primary">Text</a>
+                        </div>
+                    </div>
+                    <div class="col-md d-none d-sm-block">
+                        <h4>Code Explorer</h4>
+                        <p>
+                        Just hover over any of the Bootstrap 
+                        components, and click the 
+                        <span class="d-inline-block rounded border align-middle pb-1 px-1 small"><small>&lt;&gt;</small></span>
+                        to view or copy the HTML markup for that element.
+                        </p>
+                    </div>
+                </div>
+                <div class="row py-2">
+                    <div class="col-md-auto col-3">
+                        <button class="btn btn-outline-secondary">Secondary</button>
+                    </div>
+                    <div class="col-md-auto col-3">
+                        <button class="btn btn-outline-info">Info</button>
+                    </div>
+                    <div class="col-md-auto col-3">
+                        <button class="btn btn-outline-danger">Danger</button>
+                    </div>
+                    <div class="col-md-auto col-3">
+                        <button class="btn btn-outline-success">Success</button>
+                    </div>
+                    <div class="col-md-auto col-3">
+                        <button class="btn btn-outline-warning">Warning</button>
+                    </div>
+                    <div class="col-md-auto col-3">
+                        <button class="btn btn-outline-light">Light</button>
+                    </div>
+                    <div class="col-md-auto col-3">
+                        <button class="btn btn-outline-dark">Dark</button>
+                    </div>
+                </div>
+                <div class="row py-2">
+                    <div class="col-md-auto col-3">
+                        <button class="btn btn-secondary">Secondary</button>
+                    </div>
+                    <div class="col-md-auto col-3">
+                        <button class="btn btn-info">Info</button>
+                    </div>
+                    <div class="col-md-auto col-3">
+                        <button class="btn btn-danger">Danger</button>
+                    </div>
+                    <div class="col-md-auto col-3">
+                        <button class="btn btn-success">Success</button>
+                    </div>
+                    <div class="col-md-auto col-3">
+                        <button class="btn btn-warning">Warning</button>
+                    </div>
+                    <div class="col-md-auto col-3">
+                        <button class="btn btn-light">Light</button>
+                    </div>
+                    <div class="col-md-auto col-3">
+                        <button class="btn btn-dark">Dark</button>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <section id="navs" class="container pb-5">
+            <div class="row">
+                <div class="col-xl-9 pb-4">
+                    <nav class="navbar navbar-expand-md navbar-dark bg-primary mb-2">
+                        <a class="navbar-brand" href="#">Light text</a>
+                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
+                            <span class="navbar-toggler-icon"></span>
+                        </button>
+                        <div class="collapse navbar-collapse" id="navbarColor02">
+                            <ul class="navbar-nav ml-auto">
+                                <li class="nav-item">
+                                    <a class="nav-link" href="#" title="Current breakpoint tier">
+                                        Tier     
+                                        <span class="d-xl-inline d-none">XL</span>
+                                        <span class="d-lg-inline d-xl-none d-none">LG</span>
+                                        <span class="d-md-inline d-lg-none d-none">MD</span>
+                                        <span class="d-sm-inline d-md-none d-none">SM</span>
+                                        <span class="d-inline d-sm-none">XS</span>
+                                    </a>
+                                </li>
+                                <li class="nav-item">
+                                    <a class="nav-link" href="#">About</a>
+                                </li>
+                            </ul>
+                        </div>
+                    </nav>
+                    <nav class="navbar navbar-expand-md navbar-light bg-primary mb-3">
+                        <a class="navbar-brand" href="#">Dark text</a>
+                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
+                            <span class="navbar-toggler-icon"></span>
+                        </button>
+                        <div class="collapse navbar-collapse" id="navbarColor03">
+                            <ul class="navbar-nav ml-auto">
+                                <li class="nav-item">
+                                    <a class="nav-link" href="#">Link</a>
+                                </li>
+                                <li class="nav-item">
+                                    <a class="nav-link" href="#">About</a>
+                                </li>
+                            </ul>
+                        </div>
+                    </nav>
+                    <div class="card border-0">
+                        <ul class="nav nav-tabs">
+                            <li class="nav-item">
+                                <a class="nav-link active" href="#tab1" data-toggle="tab">Tab</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="#tab2" data-toggle="tab">Tab</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="#tab3" data-toggle="tab">Tab</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link disabled" href="#tab4" data-toggle="tab">Disabled</a>
+                            </li>
+                        </ul>
+                        <div class="tab-content px-1 pt-3">
+                            <div class="tab-pane active" id="tab1">
+                                Select a palette, change the <span class="text-primary ">primary</span>, <span class="text-secondary ">secondary</span>, 
+                                <span class="text-success ">success</span>, <span class="text-danger ">danger</span>, 
+                                <span class="text-info ">info</span>, and <span class="text-warning ">warning</span> colors. 
+                                Choose from various Google Fonts, and modify most of the Bootstrap SASS variables. Click to generate your completely custom 
+                                Bootstrap theme.
+                            </div>
+                            <div class="tab-pane" id="tab2">
+                                The whole idea is to make the Bootstrap customization process easier, and allow you to visualize changes along the way. 
+                                For most users it's designed to be point-and-click, while advanced users can delve into the SASS as desired. It's a 4-step process.
+                            </div>
+                            <div class="tab-pane" id="tab3">3. Put some more content in your pane here.</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-xl-3 pb-4">
+                    <ul class="nav nav-pills flex-column mb-3">
+                        <li class="nav-item">
+                            <a class="nav-link active" href="#">Active</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#">Link</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#">Link</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#">Link</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link disabled" href="#">Disabled</a>
+                        </li>
+                    </ul>
+                    <div class="btn-group mb-3 w-100">
+                        <button type="button" class="btn btn-primary btn-block">Dropdown</button>
+                        <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            <span class="sr-only">Toggle Dropdown</span>
+                        </button>
+                        <div class="dropdown-menu dropdown-menu-right">
+                            <a class="dropdown-item" href="#">Action</a>
+                            <a class="dropdown-item" href="#">Link</a>
+                            <div class="dropdown-divider"></div>
+                            <a class="dropdown-item" href="#">Separated link</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <section id="cards" class="container pb-5">
+            <div class="d-flex my-3">
+                <div class="jumbotron w-100 py-5 mx-auto">
+                    <h1>Themestr.app</h1>
+                    <h4>Theme Builder for Bootstrap</h4>
+                    <p class="lead">
+                        Rapidy build custom themes for Bootstrap, the world's most 
+                        popular front-end component library for mobile-first, 
+                        responsive Web apps. <a class="font-weight-bold" href="https://themestr.app">Themestr.app</a> is a customizer and theme creator for Bootstrap. 
+                        Choose from a huge collection of color palettes, fonts and SASS variables. Prototype different styles, and 
+                        easily generate CSS from SASS to give your projects a unique look-and-feel.
+                    </p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-lg-4 mb-4">
+                    <div class="card border-primary h-100">
+                        <div class="card-body d-flex flex-column align-items-start">
+                            <h4 class="card-title text-primary">Card Outline</h4>
+                            <p class="card-text">Themestr.app makes it easy to customize this, and other free Bootstrap 4 themes for your downloading pleasure.</p>
+                            <a href="#" class="btn btn-primary mt-auto">Button</a>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-lg-4 mb-4">
+                    <div class="card border-primary h-100">
+                        <div class="card-body">
+                            <div class="list-group">
+                                <a href="#" class="list-group-item list-group-item-action active">Dis List Group</a>
+                                <a href="#" class="list-group-item list-group-item-action">Custom Colors</a>
+                                <a href="#" class="list-group-item list-group-item-action">Google Fonts</a>
+                                <a href="#" class="list-group-item list-group-item-action disabled">Ionicons</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-lg-4 mb-4">
+                    <div class="card bg-primary text-white h-100">
+                        <div class="card-body d-flex flex-column align-items-start">
+                            <h4 class="card-title">Scrollspy</h4>
+                            <p class="card-text">The top NavBar utilizes Bootstrap's Scrollspy component. You'll notice when you scroll the page the "active" nav section is highlighted.</p>
+                            <a href="https://getbootstrap.com/docs/4.1/components/scrollspy/" class="btn btn-primary border-white mt-auto">Read More</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <section id="modals" class="container pb-5">
+            <div class="row">
+                <div class="col-md-12">
+                    <div class="container-fluid">
+                        <div class="position-relative" style="z-index:1000">
+                            <div id="myModal" class="modal d-block position-relative" tabindex="-1" role="dialog" aria-hidden="true">
+                            <div class="modal-dialog">
+                                <div class="modal-content">
+                                    <div class="modal-header">
+                                        <h3>Modal</h3>
+                                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
+                                    </div>
+                                    <div class="modal-body">
+                                        <p>This is a basic Bootstrap 4 modal. The modal also comes in a <a href="#modal-sm" data-toggle="modal">smaller</a> and <a href="#modal-lg" data-toggle="modal">larger</a> sizes.</p>
+                                        <p>
+                                            What will you put in your modal? Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+                                            in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.
+                                        </p>
+                                    </div>
+                                    <div class="modal-footer">
+                                        <button class="btn" data-dismiss="alert" aria-hidden="true">Close</button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-9"></div>
+            </div>
+        </section>
+        <section id="typography" class="container pb-5">
+            <div class="row">
+                <div class="col-12">
+                    <h4><a target="_new" href="https://fonts.google.com/specimen/Comfortaa">Comfortaa</a></h4>
+                </div>
+                <div class="col-xl-4">
+                    <h6>Heading 6</h6>
+                    <h5>Heading 5</h5>
+                    <h4>Heading 4</h4>
+                    <h3 class="text-truncate">Heading 3</h3>
+                    <h2 class="text-truncate">Heading 2</h2>
+                    <h1 class="text-truncate">Heading 1</h1>
+                    <p class="lead">Lead</p>
+                    <p>Paragraph</p>
+                    <span class="badge badge-dark">badge</span>
+                </div>
+                <div class="col-xl-8 text-right">
+                    <p class="display-4 text-truncate">Display 4</p>
+                    <p class="display-3 text-truncate">Display 3</p>
+                    <p class="display-2 text-truncate">Display 2</p>
+                    <p class="display-1 text-truncate">Display 1</p>
+                </div>
+            </div>
+        </section>
+        <section id="forms" class="container pb-5">
+            <div class="row">
+                <div class="col-md-12">
+                    <form role="form">
+                        <div class="form-group row">
+                            <label class="col-md-2 col-form-label form-control-label text-muted">First</label>
+                            <div class="col-md-4">
+                                <input class="form-control" type="text" value="Jane">
+                            </div>
+                            <label class="col-md-1 col-form-label form-control-label text-muted">Last</label>
+                            <div class="col-md-5">
+                                <input class="form-control" type="text" value="Bishop">
+                            </div>
+                        </div>
+                        <div class="form-group row">
+                            <label class="col-lg-2 col-form-label form-control-label text-muted">Address</label>
+                            <div class="col-lg-10">
+                                <input class="form-control" type="text" placeholder="Street">
+                            </div>
+                        </div>
+                        <div class="form-group row">
+                            <label class="col-lg-2 col-form-label form-control-label text-muted"></label>
+                            <div class="col-lg-6">
+                                <input class="form-control" type="text" placeholder="City">
+                            </div>
+                            <div class="col-lg-4">
+                                <select class="form-control">
+                                    <option>State</option>
+                                    <option>AK</option>
+                                    <option>AZ</option>
+                                    <option>CA</option>
+                                    <option>CO</option>
+                                </select>
+                            </div>
+                        </div>
+                        <div class="form-group row was-validated">
+                            <label class="col-lg-2 col-form-label form-control-label text-muted">Username</label>
+                            <div class="col-lg-10">
+                                <input class="form-control" type="text" required="" id="un" name="un">
+                                <div class="invalid-feedback">
+                                  Username is required.
+                                </div>
+                            </div>
+                        </div>
+                        <div class="form-group row">
+                            <label class="col-lg-2 col-form-label form-control-label"></label>
+                            <div class="col-lg-10">
+                                <input type="reset" class="btn btn-outline-secondary mr-2" value="Cancel">
+                                <input type="button" class="btn btn-primary mr-2" value="Submit">
+                                <div class="custom-control custom-checkbox d-inline">
+                                  <input type="checkbox" class="custom-control-input" id="customCheck" checked>
+                                  <label class="custom-control-label" for="customCheck">Check me out</label>
+                                </div>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </section>
+        <section id="grid" class="container pb-5">
+            <p class="lead">The rows &amp; columns of the world famous Bootstrap grid speak for themselves.</p>
+            <div class="row">
+                <div class="col-sm-6">
+                    6
+                </div>
+                <div class="col-6">
+                    <div class="card my-1 bg-light">6</div>
+                </div>
+                <div class="col-sm-5">
+                    5
+                </div>
+                <div class="col-7">
+                    <div class="card my-1">7</div>
+                </div>
+                <div class="col-sm-4">
+                    4
+                </div>
+                <div class="col-8">
+                    <div class="card my-1">8</div>
+                </div>
+                <div class="col-sm-3">
+                    3
+                </div>
+                <div class="col-9">
+                    <div class="card my-1">9</div>
+                </div>
+                <div class="col-sm-2">
+                    2
+                </div>
+                <div class="col-10">
+                    <div class="card my-1">10</div>
+                </div>
+                <div class="col-sm-1">
+                    1
+                </div>
+                <div class="col-11">
+                    <div class="card my-1">11</div>
+                </div>
+            </div>
+        </section>
+        <section id="more" class="container pb-5">
+            <div class="row">
+                <div class="col-md-12">
+                    <div class="table-responsive">
+                        <table class="table table-hover table-sm">
+                            <tbody>
+                                <tr>
+                                    <th class="w-25">Location</th>
+                                    <th class="w-50">Date</th>
+                                    <th class="w-25">Visits</th>
+                                </tr>
+                                <tr>
+                                    <td>Westfield</td>
+                                    <td>08.05.18 <span class="badge badge-primary">badge</span></td>
+                                    <td>2323</td>
+                                </tr>
+                                <tr>
+                                    <td>Galway</td>
+                                    <td>08.05.18 <span class="badge badge-pill badge-primary">badge-pill</span></td>
+                                    <td>5362</td>
+                                </tr>
+                                <tr class="table-primary">
+                                    <td>Bern</td>
+                                    <td>08.05.18</td>
+                                    <td>153</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+                <div class="w-100 my-4"></div>
+                <div class="col-md-8">
+                    <a href="#" class="text-primary" data-toggle="tooltip" data-placement="right" title="This tooltip is on the right.">Right tooltip (hover)</a>
+                    <br>
+                    <a href="#" class="text-primary" data-toggle="tooltip" data-placement="bottom" title="This tooltip is on the bottom.">Bottom tooltip (hover)</a>
+                    <br>
+                </div>
+                <div class="col-md-4 text-right">
+                    <!--
+                    <div class="px-4 p-2 rounded bg-primary text-light" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">
+                        Toggle my popover
+                    </div>-->
+                    <button type="button" class="btn btn-lg btn-primary" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Toggle my popover</button>
+                </div>
+                <div class="w-100 my-4"></div>
+                <div class="col-md-12">
+                    <div class="progress mb-2">
+                        <div class="progress-bar bg-primary w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"> </div>
+                    </div>
+                </div>
+                <div class="col-md-12">
+                    <div class="alert alert-primary alert-dismissable show fade" role="alert">
+                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+                            <span aria-hidden="true">×</span>
+                        </button>
+                        <strong>Well done!</strong> You successfully read this important alert message.
+                    </div>
+                </div>
+                <div class="w-100 my-4"></div>
+            </div>
+        </section>
+    </main>
+        <footer id="footer" class="bg-dark text-light py-5">
+        <div class="container py-5">
+            <div class="row">
+                <div class="col-6 col-md-6 col-lg-3 mb-2">
+                    <h6 class="text-uppercase">Tools</h6>
+                    <ul class="nav flex-column">
+                        <li><a class="text-white" target="ext" rel="nofollow" href="https://themestr.app" title="Bootstrap theme builder">Themestr.app</a></li>
+                        <li><a class="text-white" target="ext" rel="nofollow" href="http://themes.guide" title="Bootstrap free and pro themes">Themes.guide</a></li>
+                        <li><a class="text-white" target="ext" rel="nofollow" href="http://codeply.com" title="Prototype and edit code for Bootstrap and other responsive frameworks">Codeply</a></li>
+                        <li><a class="text-white" target="ext" rel="nofollow" href="http://bootply.com">Bootply</a></li>
+                    </ul>
+                </div>
+                <div class="col-6 col-md-6 col-lg-3 mb-2">
+                    <h6 class="text-uppercase">More</h6>
+                    <ul class="nav flex-column">
+                        <li><a class="text-white" target="_new" href="http://wdstack.com" title="The top projects, tools and apps for Web developers">WDStack</a></li>
+                        <li><a class="text-white" target="_new" href="http://theme.cards">Theme.cards</a></li>
+                        <li><a class="text-white" target="_new" href="http://www.bootbundle.com">BootBundle</a></li>
+                        <li><a class="text-white" target="_new" title="Learn about Bootstrap 4 using this free theme" href="http://bootstrap4.guide">Bootstrap4.guide</a></li>
+                    </ul>
+                </div>
+                <div class="col-12 col-md-12 col-lg-6 mb-2 text-right">
+                    <h6 class="text-uppercase">Follow</h6>
+                    <ul class="nav float-right">
+                        <li><a class="text-white mr-2" rel="nofollow" href="http://twitter.com/ThemesGuide" title="Follow on Twitter"><i class="h1 fa fa-fw fa-twitter fa-2x ion-logo-twitter"></i></a></li>
+                        <li><a class="text-white mr-2" rel="nofollow" href="https://www.facebook.com/codeply" title="Follow on Facebook"><i class="h1 fa fa-fw fa-facebook fa-2x ion-logo-facebook"></i></a></li>
+                        <li><a class="text-white mr" rel="nofollow" href="https://github.com/ThemesGuide/bootstrap-themes" title="Follow on GitHub"><i class="h1 fa fa-fw fa-facebook fa-2x ion-logo-github"></i></a></li>
+                    </ul>
+                </div>
+            </div>
+            <!--/row-->
+        </div>
+    </footer>
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
+    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
+    <script src="scripts.js"></script>
+</body>
+</html>
--- a/signal/scripts.js
+++ b/signal/scripts.js
@ -0,0 +1,93 @@
+
+    /* simple scripts file for Themes.guide Bootstrap 4 theme templates */
+
+    // init Bootstrap tooltips & popovers
+    $("[data-toggle=popover]").popover();
+    $("[data-toggle=tooltip]").tooltip();
+    
+    
+    /* copy demo sources to clipboard */
+    function copyTextToClipboard(text) {
+      var textArea = document.createElement("textarea");
+      textArea.style.position = 'fixed';
+      textArea.style.top = 0;
+      textArea.style.left = 0;
+      textArea.style.width = '2em';
+      textArea.style.height = '2em';
+      textArea.style.padding = 0;
+      textArea.style.border = 'none';
+      textArea.style.outline = 'none';
+      textArea.style.boxShadow = 'none';
+      textArea.style.background = 'transparent';
+      textArea.value = text;
+      document.body.appendChild(textArea);
+      textArea.select();
+    
+      try {
+        var successful = document.execCommand('copy');
+        var msg = successful ? 'successful' : 'unsuccessful';
+        console.log('Copying text command was ' + msg);
+      } catch (err) {
+        console.log('Oops, unable to copy');
+      }
+    
+      document.body.removeChild(textArea);
+      return false;
+    }
+    
+    var modalCode       = $('<div id="modalCode" class="modal fade" />');
+    var modalDialog     = $('<div class="modal-dialog modal-dialog-centered modal-lg" />');
+    var modalContent    = $('<div class="modal-content" />');
+    var modalHeader     = $('<div class="modal-header align-items-center"><h3 class="mb-0">Source Code</h3><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button></div>');
+    var modalBody       = $('<div class="modal-body d-block py-3"><span class="badge badge-dark font-weight-light mb-2">The following markup was copied to the clipboard...</span><textarea id="code" class="form-control" rows="10" wrap="off"></textarea></div>');
+    modalHeader.appendTo(modalContent);
+    modalBody.appendTo(modalContent);
+    modalContent.appendTo(modalDialog);
+    modalDialog.appendTo(modalCode);
+    modalCode.appendTo('body');
+    
+    var css = ".copyable{position:relative}.copyable .copyable-trigger{color:#333;background-color:rgba(255,255,255,.8);border:1px #888 solid;border-radius:4px;position:absolute;padding:3px 6px;top:0;right:0;z-index:102;text-decoration:none;font-family:monospace;font-size:11px;cursor:pointer;display:none}.copyable:hover .copyable-trigger{display:inline-block}";
+    
+    $("head").append($(document.createElement("style"))
+        .html(css)
+    );
+    
+    $('main').find('.card, .btn-group, .btn, .navbar, .modal, .form-group, .list-group, .alert, .progress, .table-responsive, .jumbotron, .badge, .nav').each(function(){
+        var $this = $(this);
+        var content = $this.get(0).outerHTML;
+        var arrayOfLines = content.match(/[^\r\n]+/g);
+        var secondLine = 0;
+        for (var l in arrayOfLines) {
+            var tabCount;
+            if (l>0) {
+                tabCount = ((arrayOfLines[l]||'').match(/[\s{4}|\t{1}]\S/g)||[]).length;                
+                if (l==1) { secondLine = tabCount }
+                arrayOfLines[l] = arrayOfLines[l].replace(/\t{1}/g,'~');
+                arrayOfLines[l] = arrayOfLines[l].replace(/\s{4}/g,'~');
+                for (var i=0;i<secondLine+1;i++) {
+                    arrayOfLines[l] = arrayOfLines[l].replace(/~/,'');
+                }
+                arrayOfLines[l] = arrayOfLines[l].replace(/~/g,'\t');
+            }
+        }
+        content = arrayOfLines.join('\n');
+        var title = "Click to view/copy source";
+
+        $this.addClass("copyable");
+        var trigger = $("<a href class='copyable-trigger'>&lt;&gt;</a>");
+        $this.append(trigger);
+        
+        trigger.tooltip({
+            title: title,
+            placement: 'bottom',
+            trigger: 'hover'
+        });
+        
+        trigger.on('click',function(e){
+            copyTextToClipboard(content);
+            $("#code").text(content);
+            $("#modalCode").modal('show');
+            return false;
+        });
+    });
+    
--- a/signal/template.css
+++ b/signal/template.css
@ -0,0 +1,23 @@
+/* template */
+body,html {
+  height: 100%;
+  scroll-behavior: smooth;
+}
+
+/* hidden spacer before sections for proper offset */
+section:before {
+    height: 56px;
+    content: "";
+    display:block;
+}
+
+/* helpers */
+.vh-50 {
+    min-height: 50vh;
+}
+.vh-75 {
+    min-height: 75vh;
+}
+.vh-100 {
+    min-height: 100vh;
+}
--- a/signal/template2.css
+++ b/signal/template2.css
@ -0,0 +1,30 @@
+
+
+/* template */
+body,html {
+  height: 100%;
+  scroll-behavior: smooth;
+}
+
+/* body padding for fixed navbar */
+body {
+    padding-top: 56px;
+}
+
+/* hidden spacer before sections for proper offset */
+section:before {
+    height: 50px;
+    content: "";
+    display:block;
+}
+
+/* helpers */
+.vh-50 {
+    min-height: 50vh;
+}
+.vh-75 {
+    min-height: 75vh;
+}
+.vh-100 {
+    min-height: 100vh;
+}
--- a/signal/template2.html
+++ b/signal/template2.html
@ -0,0 +1,666 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Signal Bootstrap 4 Template 2</title>
+    <meta name="description" content="Signal is a free Bootstrap 4 theme by Themes.guide" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="generator" content="Themestr.app">
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
+    <link href="//cdnjs.cloudflare.com/ajax/libs/ionicons/3.0.0/css/ionicons.css" rel="stylesheet" />
+    <link rel="stylesheet" href="theme.css" />
+    <link rel="stylesheet" href="template2.css" />
+  </head>
+  <body data-spy="scroll" data-target="#navbar1" data-offset="60">
+    <div class="bg-primary">
+        <div class="container">
+            <div class="row align-items-center vh-50 py-5">
+                <div class="col-xl-5 col-lg-6 ml-auto py-2 text-light order-2 text-center text-lg-left">
+                    <h1 class="mb-0">
+                        <span>Signal</span>
+                    </h1>
+                    <p class="lead mb-3"><span>Like sailing yacht flags in a busy harbor.</span> This font face is Comfortaa. <a class="font-weight-bold text-white" href="http://themestr.app">Themestr.app</a> makes it easy to customize this, and other free Bootstrap 4 themes.</p>
+                    <a class="btn btn-outline-light btn-lg mr-2" href="http://themestr.app" target="_new">Customize</a> 
+                                                    <div class="btn-group">
+                                  <a href="theme.css" class="btn btn-outline-light btn-lg">
+                                    Download Theme
+                                  </a>
+                                  <button type="button" class="btn btn-lg btn-outline-light dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                    <span class="sr-only">Downloads</span>
+                                  </button>
+                                  <div class="dropdown-menu">
+                                      <a class="dropdown-item" href="theme.css">theme.css</a>
+                                      <a class="dropdown-item" href="theme.min.css">theme.min.css</a>
+                                      <div class="dropdown-divider"></div>
+                                      <a class="dropdown-item" href="theme.scss">theme.scss</a>
+                                      <div class="dropdown-divider"></div>
+                                      <a class="dropdown-item" target="new" href="https://github.com/ThemesGuide/bootstrap-themes/tree/master/signal">Full template</a>
+                                  </div>
+                                </div>  
+                </div>
+                <div class="col-xl-4 col-lg-6 col mr-auto order-1 order-lg-last align-items-center justify-content-center justify-content-lg-end d-flex">
+                     <div class="img-fluid text-white">
+                        <svg class="i-desktop" viewBox="0 0 32 32" width="240" height="240" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width=".5">
+                            <path d="M10 29 C10 29 10 24 16 24 22 24 22 29 22 29 L10 29 Z M2 6 L2 23 30 23 30 6 2 6 Z"></path>
+                        </svg>
+                     </div>
+                </div>
+            </div>
+        </div>
+    </div>
+        <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary" id="navbar1">
+        <div class="container">
+            <a class="navbar-brand mr-1 mb-1 mt-0" href="../">Bootstrap 4</a>
+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="navbar-collapse collapse justify-content-center" id="collapsingNavbar">
+                <ul class="navbar-nav">
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="themesDd" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                          Themes
+                        </a>
+                        <div class="dropdown-menu" aria-labelledby="themesDd">
+                            
+                            
+                            <a class="dropdown-item px-2 active" href="../signal">Signal</a>
+                            
+                            <a class="dropdown-item px-2 " href="../greyson">Greyson</a>
+                            
+                            <a class="dropdown-item px-2 " href="../fresca">Fresca</a>
+                            
+                            <a class="dropdown-item px-2 " href="../darkster">Darkster</a>
+                            
+                            <a class="dropdown-item px-2 " href="../hello_kiddie">Hello Kiddie</a>
+                            
+                            <a class="dropdown-item px-2 " href="../blue_voltage">Blue Voltage</a>
+                            
+                            <a class="dropdown-item px-2 " href="../hootstrap">Hootstrap</a>
+                            
+                            <a class="dropdown-item px-2 " href="../herbie">Herbie</a>
+                            
+                            <a class="dropdown-item px-2 " href="../boldstrap">Boldstrap</a>
+                            
+                            <a class="dropdown-item px-2 " href="../lovey">Lovey</a>
+                            
+                            <a class="dropdown-item px-2 " href="../bootstrap_purple">Bootstrap Purple</a>
+                            
+                            <a class="dropdown-item px-2 " href="../monotony">Monotony</a>
+                            
+                            <a class="dropdown-item px-2 " href="../poypull">Poypull</a>
+                            
+                            <a class="dropdown-item px-2 " href="../tequila">Tequila</a>
+                            
+                            <a class="dropdown-item px-2" href="https://themestr.app" rel="nofollow" target="_new" title="Bootstrap theme builder">Build your own...</a>
+                        </div>
+                    </li>
+                </ul>
+                <ul class="navbar-nav ml-auto">
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="layoutDd" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                          Layouts
+                        </a>
+                        <div class="dropdown-menu" aria-labelledby="layoutDd">
+                            <a class="dropdown-item px-2" href="./">Default</a>
+                            <a class="dropdown-item px-2" href="./template2.html">Layout 2</a>
+                            <a class="dropdown-item px-2" href="./template3.html">Layout 3</a>
+                        </div>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#buttons">Buttons</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#navs">Navs</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#cards">Cards</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#modals">Modals</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#typography">Typography</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#forms">Forms</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#grid">Grid</a>
+                    </li>
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="navbarDd" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                          More
+                        </a>
+                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDd">
+                            <a class="dropdown-item px-2" href="#more">Badges</a>
+                            <a class="dropdown-item px-2" href="#more">Tooltips &amp; Popups</a>
+                            <a class="dropdown-item px-2" href="#more">Progress &amp; Alerts</a>
+                            <div class="dropdown-divider"></div>
+                            <a class="dropdown-item px-2" href="#more">All</a>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav> 
+    <main>
+        <section class="container">
+            <div class="row py-5">
+                <div class="col-12 my-auto">
+                    <div class="row text-center">
+                        <div class="col-lg-4 mb-4">
+                            <div class="card h-100">
+                                <div class="card-body d-flex flex-column justify-content-center align-items-center">
+                                    <h1 class="display-2 text-primary"><span class="ion ion-ios-snow-outline"></span></h1>
+                                    <h4 class="card-title text-primary">Unique</h4>
+                                    <p class="card-text">Don't like that typical Bootstrap look? Each theme has a <strong>custom look-and-feel</strong>, while maximizing use of Bootstrap without extensive additional CSS & JS.</p>
+                                    <a href="#" class="btn btn-primary mt-auto">Button</a>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-lg-4 mb-4">
+                            <div class="card h-100">
+                                <div class="card-body d-flex flex-column justify-content-center align-items-center">
+                                    <h1 class="display-2 text-primary"><span class="ion ion-ios-tablet-portrait-outline"></span></h1>
+                                    <h4 class="card-title text-primary">Responsive</h4>
+                                    <p class="card-text">Based on <strong>mobile-first</strong> Bootstrap 4, all themes are 100% responsive and designed to look great on everything from smartphones to tablets to desktops..</p>
+                                    <a href="#" class="btn btn-primary mt-auto">Button</a>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-lg-4 mb-4">
+                            <div class="card h-100">
+                                <div class="card-body d-flex flex-column justify-content-center align-items-center">
+                                    <h1 class="display-2 text-primary"><span class="ion ion-ios-construct-outline"></span></h1>
+                                    <h4 class="card-title text-primary">Consistent</h4>
+                                    <p class="card-text">Themes are crafted with care for design and performance. Like Bootstrap, the themes are built on modern HTML5 & CSS3 standards to ensure consistency and <strong>cross-browser</strong> support.</p>
+                                    <a href="#" class="btn btn-primary mt-auto">Button</a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+                <section id="buttons" class="pb-5">
+            <div class="container">
+                <div class="row">
+                    <div class="col-md-9">
+                        <div class="pb-3">
+                            <button type="button" class="btn btn-primary mr-1">Primary #FF304F</button>
+                            <button type="button" class="btn btn-outline-primary">Outline</button>
+                        </div>
+                        <div class="pb-3">
+                            <button type="button" class="btn btn-primary align-bottom btn-lg mr-1">Large</button>
+                            <button type="button" class="btn btn-primary align-bottom mr-1">Normal</button>
+                            <button type="button" class="btn btn-primary align-bottom btn-sm mr-1">Small</button>
+                            <a href="#" class="text-primary">Text</a>
+                        </div>
+                    </div>
+                    <div class="col-md d-none d-sm-block">
+                        <h4>Code Explorer</h4>
+                        <p>
+                        Just hover over any of the Bootstrap 
+                        components, and click the 
+                        <span class="d-inline-block rounded border align-middle pb-1 px-1 small"><small>&lt;&gt;</small></span>
+                        to view or copy the HTML markup for that element.
+                        </p>
+                    </div>
+                </div>
+                <div class="row py-2">
+                    <div class="col-md-auto col-3">
+                        <button class="btn btn-outline-secondary">Secondary</button>
+                    </div>
+                    <div class="col-md-auto col-3">
+                        <button class="btn btn-outline-info">Info</button>
+                    </div>
+                    <div class="col-md-auto col-3">
+                        <button class="btn btn-outline-danger">Danger</button>
+                    </div>
+                    <div class="col-md-auto col-3">
+                        <button class="btn btn-outline-success">Success</button>
+                    </div>
+                    <div class="col-md-auto col-3">
+                        <button class="btn btn-outline-warning">Warning</button>
+                    </div>
+                    <div class="col-md-auto col-3">
+                        <button class="btn btn-outline-light">Light</button>
+                    </div>
+                    <div class="col-md-auto col-3">
+                        <button class="btn btn-outline-dark">Dark</button>
+                    </div>
+                </div>
+                <div class="row py-2">
+                    <div class="col-md-auto col-3">
+                        <button class="btn btn-secondary">Secondary</button>
+                    </div>
+                    <div class="col-md-auto col-3">
+                        <button class="btn btn-info">Info</button>
+                    </div>
+                    <div class="col-md-auto col-3">
+                        <button class="btn btn-danger">Danger</button>
+                    </div>
+                    <div class="col-md-auto col-3">
+                        <button class="btn btn-success">Success</button>
+                    </div>
+                    <div class="col-md-auto col-3">
+                        <button class="btn btn-warning">Warning</button>
+                    </div>
+                    <div class="col-md-auto col-3">
+                        <button class="btn btn-light">Light</button>
+                    </div>
+                    <div class="col-md-auto col-3">
+                        <button class="btn btn-dark">Dark</button>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <section id="navs" class="container pb-5">
+            <div class="row">
+                <div class="col-xl-9 pb-4">
+                    <nav class="navbar navbar-expand-md navbar-dark bg-primary mb-2">
+                        <a class="navbar-brand" href="#">Light text</a>
+                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
+                            <span class="navbar-toggler-icon"></span>
+                        </button>
+                        <div class="collapse navbar-collapse" id="navbarColor02">
+                            <ul class="navbar-nav ml-auto">
+                                <li class="nav-item">
+                                    <a class="nav-link" href="#" title="Current breakpoint tier">
+                                        Tier     
+                                        <span class="d-xl-inline d-none">XL</span>
+                                        <span class="d-lg-inline d-xl-none d-none">LG</span>
+                                        <span class="d-md-inline d-lg-none d-none">MD</span>
+                                        <span class="d-sm-inline d-md-none d-none">SM</span>
+                                        <span class="d-inline d-sm-none">XS</span>
+                                    </a>
+                                </li>
+                                <li class="nav-item">
+                                    <a class="nav-link" href="#">About</a>
+                                </li>
+                            </ul>
+                        </div>
+                    </nav>
+                    <nav class="navbar navbar-expand-md navbar-light bg-primary mb-3">
+                        <a class="navbar-brand" href="#">Dark text</a>
+                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
+                            <span class="navbar-toggler-icon"></span>
+                        </button>
+                        <div class="collapse navbar-collapse" id="navbarColor03">
+                            <ul class="navbar-nav ml-auto">
+                                <li class="nav-item">
+                                    <a class="nav-link" href="#">Link</a>
+                                </li>
+                                <li class="nav-item">
+                                    <a class="nav-link" href="#">About</a>
+                                </li>
+                            </ul>
+                        </div>
+                    </nav>
+                    <div class="card border-0">
+                        <ul class="nav nav-tabs">
+                            <li class="nav-item">
+                                <a class="nav-link active" href="#tab1" data-toggle="tab">Tab</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="#tab2" data-toggle="tab">Tab</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="#tab3" data-toggle="tab">Tab</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link disabled" href="#tab4" data-toggle="tab">Disabled</a>
+                            </li>
+                        </ul>
+                        <div class="tab-content px-1 pt-3">
+                            <div class="tab-pane active" id="tab1">
+                                Select a palette, change the <span class="text-primary ">primary</span>, <span class="text-secondary ">secondary</span>, 
+                                <span class="text-success ">success</span>, <span class="text-danger ">danger</span>, 
+                                <span class="text-info ">info</span>, and <span class="text-warning ">warning</span> colors. 
+                                Choose from various Google Fonts, and modify most of the Bootstrap SASS variables. Click to generate your completely custom 
+                                Bootstrap theme.
+                            </div>
+                            <div class="tab-pane" id="tab2">
+                                The whole idea is to make the Bootstrap customization process easier, and allow you to visualize changes along the way. 
+                                For most users it's designed to be point-and-click, while advanced users can delve into the SASS as desired. It's a 4-step process.
+                            </div>
+                            <div class="tab-pane" id="tab3">3. Put some more content in your pane here.</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-xl-3 pb-4">
+                    <ul class="nav nav-pills flex-column mb-3">
+                        <li class="nav-item">
+                            <a class="nav-link active" href="#">Active</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#">Link</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#">Link</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#">Link</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link disabled" href="#">Disabled</a>
+                        </li>
+                    </ul>
+                    <div class="btn-group mb-3 w-100">
+                        <button type="button" class="btn btn-primary btn-block">Dropdown</button>
+                        <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            <span class="sr-only">Toggle Dropdown</span>
+                        </button>
+                        <div class="dropdown-menu dropdown-menu-right">
+                            <a class="dropdown-item" href="#">Action</a>
+                            <a class="dropdown-item" href="#">Link</a>
+                            <div class="dropdown-divider"></div>
+                            <a class="dropdown-item" href="#">Separated link</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <section id="cards" class="container pb-5">
+            <div class="d-flex my-3">
+                <div class="jumbotron w-100 py-5 mx-auto">
+                    <h1>Themestr.app</h1>
+                    <h4>Theme Builder for Bootstrap</h4>
+                    <p class="lead">
+                        Rapidy build custom themes for Bootstrap, the world's most 
+                        popular front-end component library for mobile-first, 
+                        responsive Web apps. <a class="font-weight-bold" href="https://themestr.app">Themestr.app</a> is a customizer and theme creator for Bootstrap. 
+                        Choose from a huge collection of color palettes, fonts and SASS variables. Prototype different styles, and 
+                        easily generate CSS from SASS to give your projects a unique look-and-feel.
+                    </p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-lg-4 mb-4">
+                    <div class="card border-primary h-100">
+                        <div class="card-body d-flex flex-column align-items-start">
+                            <h4 class="card-title text-primary">Card Outline</h4>
+                            <p class="card-text">Themestr.app makes it easy to customize this, and other free Bootstrap 4 themes for your downloading pleasure.</p>
+                            <a href="#" class="btn btn-primary mt-auto">Button</a>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-lg-4 mb-4">
+                    <div class="card border-primary h-100">
+                        <div class="card-body">
+                            <div class="list-group">
+                                <a href="#" class="list-group-item list-group-item-action active">Dis List Group</a>
+                                <a href="#" class="list-group-item list-group-item-action">Custom Colors</a>
+                                <a href="#" class="list-group-item list-group-item-action">Google Fonts</a>
+                                <a href="#" class="list-group-item list-group-item-action disabled">Ionicons</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-lg-4 mb-4">
+                    <div class="card bg-primary text-white h-100">
+                        <div class="card-body d-flex flex-column align-items-start">
+                            <h4 class="card-title">Scrollspy</h4>
+                            <p class="card-text">The top NavBar utilizes Bootstrap's Scrollspy component. You'll notice when you scroll the page the "active" nav section is highlighted.</p>
+                            <a href="https://getbootstrap.com/docs/4.1/components/scrollspy/" class="btn btn-primary border-white mt-auto">Read More</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <section id="modals" class="container pb-5">
+            <div class="row">
+                <div class="col-md-12">
+                    <div class="container-fluid">
+                        <div class="position-relative" style="z-index:1000">
+                            <div id="myModal" class="modal d-block position-relative" tabindex="-1" role="dialog" aria-hidden="true">
+                            <div class="modal-dialog">
+                                <div class="modal-content">
+                                    <div class="modal-header">
+                                        <h3>Modal</h3>
+                                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
+                                    </div>
+                                    <div class="modal-body">
+                                        <p>This is a basic Bootstrap 4 modal. The modal also comes in a <a href="#modal-sm" data-toggle="modal">smaller</a> and <a href="#modal-lg" data-toggle="modal">larger</a> sizes.</p>
+                                        <p>
+                                            What will you put in your modal? Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+                                            in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.
+                                        </p>
+                                    </div>
+                                    <div class="modal-footer">
+                                        <button class="btn" data-dismiss="alert" aria-hidden="true">Close</button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-9"></div>
+            </div>
+        </section>
+        <section id="typography" class="container pb-5">
+            <div class="row">
+                <div class="col-12">
+                    <h4><a target="_new" href="https://fonts.google.com/specimen/Comfortaa">Comfortaa</a></h4>
+                </div>
+                <div class="col-xl-4">
+                    <h6>Heading 6</h6>
+                    <h5>Heading 5</h5>
+                    <h4>Heading 4</h4>
+                    <h3 class="text-truncate">Heading 3</h3>
+                    <h2 class="text-truncate">Heading 2</h2>
+                    <h1 class="text-truncate">Heading 1</h1>
+                    <p class="lead">Lead</p>
+                    <p>Paragraph</p>
+                    <span class="badge badge-dark">badge</span>
+                </div>
+                <div class="col-xl-8 text-right">
+                    <p class="display-4 text-truncate">Display 4</p>
+                    <p class="display-3 text-truncate">Display 3</p>
+                    <p class="display-2 text-truncate">Display 2</p>
+                    <p class="display-1 text-truncate">Display 1</p>
+                </div>
+            </div>
+        </section>
+        <section id="forms" class="container pb-5">
+            <div class="row">
+                <div class="col-md-12">
+                    <form role="form">
+                        <div class="form-group row">
+                            <label class="col-md-2 col-form-label form-control-label text-muted">First</label>
+                            <div class="col-md-4">
+                                <input class="form-control" type="text" value="Jane">
+                            </div>
+                            <label class="col-md-1 col-form-label form-control-label text-muted">Last</label>
+                            <div class="col-md-5">
+                                <input class="form-control" type="text" value="Bishop">
+                            </div>
+                        </div>
+                        <div class="form-group row">
+                            <label class="col-lg-2 col-form-label form-control-label text-muted">Address</label>
+                            <div class="col-lg-10">
+                                <input class="form-control" type="text" placeholder="Street">
+                            </div>
+                        </div>
+                        <div class="form-group row">
+                            <label class="col-lg-2 col-form-label form-control-label text-muted"></label>
+                            <div class="col-lg-6">
+                                <input class="form-control" type="text" placeholder="City">
+                            </div>
+                            <div class="col-lg-4">
+                                <select class="form-control">
+                                    <option>State</option>
+                                    <option>AK</option>
+                                    <option>AZ</option>
+                                    <option>CA</option>
+                                    <option>CO</option>
+                                </select>
+                            </div>
+                        </div>
+                        <div class="form-group row was-validated">
+                            <label class="col-lg-2 col-form-label form-control-label text-muted">Username</label>
+                            <div class="col-lg-10">
+                                <input class="form-control" type="text" required="" id="un" name="un">
+                                <div class="invalid-feedback">
+                                  Username is required.
+                                </div>
+                            </div>
+                        </div>
+                        <div class="form-group row">
+                            <label class="col-lg-2 col-form-label form-control-label"></label>
+                            <div class="col-lg-10">
+                                <input type="reset" class="btn btn-outline-secondary mr-2" value="Cancel">
+                                <input type="button" class="btn btn-primary mr-2" value="Submit">
+                                <div class="custom-control custom-checkbox d-inline">
+                                  <input type="checkbox" class="custom-control-input" id="customCheck" checked>
+                                  <label class="custom-control-label" for="customCheck">Check me out</label>
+                                </div>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </section>
+        <section id="grid" class="container pb-5">
+            <p class="lead">The rows &amp; columns of the world famous Bootstrap grid speak for themselves.</p>
+            <div class="row">
+                <div class="col-sm-6">
+                    6
+                </div>
+                <div class="col-6">
+                    <div class="card my-1 bg-light">6</div>
+                </div>
+                <div class="col-sm-5">
+                    5
+                </div>
+                <div class="col-7">
+                    <div class="card my-1">7</div>
+                </div>
+                <div class="col-sm-4">
+                    4
+                </div>
+                <div class="col-8">
+                    <div class="card my-1">8</div>
+                </div>
+                <div class="col-sm-3">
+                    3
+                </div>
+                <div class="col-9">
+                    <div class="card my-1">9</div>
+                </div>
+                <div class="col-sm-2">
+                    2
+                </div>
+                <div class="col-10">
+                    <div class="card my-1">10</div>
+                </div>
+                <div class="col-sm-1">
+                    1
+                </div>
+                <div class="col-11">
+                    <div class="card my-1">11</div>
+                </div>
+            </div>
+        </section>
+        <section id="more" class="container pb-5">
+            <div class="row">
+                <div class="col-md-12">
+                    <div class="table-responsive">
+                        <table class="table table-hover table-sm">
+                            <tbody>
+                                <tr>
+                                    <th class="w-25">Location</th>
+                                    <th class="w-50">Date</th>
+                                    <th class="w-25">Visits</th>
+                                </tr>
+                                <tr>
+                                    <td>Westfield</td>
+                                    <td>08.05.18 <span class="badge badge-primary">badge</span></td>
+                                    <td>2323</td>
+                                </tr>
+                                <tr>
+                                    <td>Galway</td>
+                                    <td>08.05.18 <span class="badge badge-pill badge-primary">badge-pill</span></td>
+                                    <td>5362</td>
+                                </tr>
+                                <tr class="table-primary">
+                                    <td>Bern</td>
+                                    <td>08.05.18</td>
+                                    <td>153</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+                <div class="w-100 my-4"></div>
+                <div class="col-md-8">
+                    <a href="#" class="text-primary" data-toggle="tooltip" data-placement="right" title="This tooltip is on the right.">Right tooltip (hover)</a>
+                    <br>
+                    <a href="#" class="text-primary" data-toggle="tooltip" data-placement="bottom" title="This tooltip is on the bottom.">Bottom tooltip (hover)</a>
+                    <br>
+                </div>
+                <div class="col-md-4 text-right">
+                    <!--
+                    <div class="px-4 p-2 rounded bg-primary text-light" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">
+                        Toggle my popover
+                    </div>-->
+                    <button type="button" class="btn btn-lg btn-primary" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Toggle my popover</button>
+                </div>
+                <div class="w-100 my-4"></div>
+                <div class="col-md-12">
+                    <div class="progress mb-2">
+                        <div class="progress-bar bg-primary w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"> </div>
+                    </div>
+                </div>
+                <div class="col-md-12">
+                    <div class="alert alert-primary alert-dismissable show fade" role="alert">
+                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+                            <span aria-hidden="true">×</span>
+                        </button>
+                        <strong>Well done!</strong> You successfully read this important alert message.
+                    </div>
+                </div>
+                <div class="w-100 my-4"></div>
+            </div>
+        </section>
+    </main>
+        <footer id="footer" class="bg-dark text-light py-5">
+        <div class="container py-5">
+            <div class="row">
+                <div class="col-6 col-md-6 col-lg-3 mb-2">
+                    <h6 class="text-uppercase">Tools</h6>
+                    <ul class="nav flex-column">
+                        <li><a class="text-white" target="ext" rel="nofollow" href="https://themestr.app" title="Bootstrap theme builder">Themestr.app</a></li>
+                        <li><a class="text-white" target="ext" rel="nofollow" href="http://themes.guide" title="Bootstrap free and pro themes">Themes.guide</a></li>
+                        <li><a class="text-white" target="ext" rel="nofollow" href="http://codeply.com" title="Prototype and edit code for Bootstrap and other responsive frameworks">Codeply</a></li>
+                        <li><a class="text-white" target="ext" rel="nofollow" href="http://bootply.com">Bootply</a></li>
+                    </ul>
+                </div>
+                <div class="col-6 col-md-6 col-lg-3 mb-2">
+                    <h6 class="text-uppercase">More</h6>
+                    <ul class="nav flex-column">
+                        <li><a class="text-white" target="_new" href="http://wdstack.com" title="The top projects, tools and apps for Web developers">WDStack</a></li>
+                        <li><a class="text-white" target="_new" href="http://theme.cards">Theme.cards</a></li>
+                        <li><a class="text-white" target="_new" href="http://www.bootbundle.com">BootBundle</a></li>
+                        <li><a class="text-white" target="_new" title="Learn about Bootstrap 4 using this free theme" href="http://bootstrap4.guide">Bootstrap4.guide</a></li>
+                    </ul>
+                </div>
+                <div class="col-12 col-md-12 col-lg-6 mb-2 text-right">
+                    <h6 class="text-uppercase">Follow</h6>
+                    <ul class="nav float-right">
+                        <li><a class="text-white mr-2" rel="nofollow" href="http://twitter.com/ThemesGuide" title="Follow on Twitter"><i class="h1 fa fa-fw fa-twitter fa-2x ion-logo-twitter"></i></a></li>
+                        <li><a class="text-white mr-2" rel="nofollow" href="https://www.facebook.com/codeply" title="Follow on Facebook"><i class="h1 fa fa-fw fa-facebook fa-2x ion-logo-facebook"></i></a></li>
+                        <li><a class="text-white mr" rel="nofollow" href="https://github.com/ThemesGuide/bootstrap-themes" title="Follow on GitHub"><i class="h1 fa fa-fw fa-facebook fa-2x ion-logo-github"></i></a></li>
+                    </ul>
+                </div>
+            </div>
+            <!--/row-->
+        </div>
+    </footer> 
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
+    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
+    <script src="scripts.js"></script>
+</body>
+</html>
--- a/signal/template3.css
+++ b/signal/template3.css
@ -0,0 +1,29 @@
+
+/* template */
+body,html {
+  height: 100%;
+  scroll-behavior: smooth;
+}
+
+/* body padding for fixed navbar */
+body {
+    padding-top: 56px;
+}
+
+/* hidden spacer before sections for proper offset */
+section:before {
+    height: 50px;
+    content: "";
+    display:block;
+}
+
+/* helpers */
+.vh-50 {
+    min-height: 50vh;
+}
+.vh-75 {
+    min-height: 75vh;
+}
+.vh-100 {
+    min-height: 100vh;
+}
--- a/signal/template3.html
+++ b/signal/template3.html
@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Signal Bootstrap 4 Template 3</title>
+    <meta name="description" content="A free, open source Bootstrap 4 theme by Themes.guide" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="generator" content="Themestr.app">
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ionicons/3.0.0/css/ionicons.css" />
+    <link rel="stylesheet" href="theme.css" />
+    <link rel="stylesheet" href="template3.css" />
+  </head>
+<body data-spy="scroll" data-target="#navbar1" data-offset="60">
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-12 p-0 bg-primary vh-50 py-5">
+            <div class="container">
+                <div class="row">
+                    <div class="col-xl-6 col-lg-7 py-2 text-light">
+                        <h1 class="display-3 mb-0">
+                            <span>Signal</span>
+                        </h1>
+                        <p class="lead mb-3 w-75">
+                            <span>Like sailing yacht flags in a busy harbor.</span> This font face is Comfortaa. <a class="font-weight-bold text-white" href="http://themestr.app">Themestr.app</a> makes 
+                            it easy to customize this, and other free Bootstrap 4 themes for your downloading pleasure.
+                        </p>
+                        <a class="btn btn-outline-light btn-lg mr-2" href="http://themestr.app" target="_new">Customize</a> 
+                                                        <div class="btn-group">
+                                  <a href="theme.css" class="btn btn-outline-light btn-lg">
+                                    Download Theme
+                                  </a>
+                                  <button type="button" class="btn btn-lg btn-outline-light dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                    <span class="sr-only">Downloads</span>
+                                  </button>
+                                  <div class="dropdown-menu">
+                                      <a class="dropdown-item" href="theme.css">theme.css</a>
+                                      <a class="dropdown-item" href="theme.min.css">theme.min.css</a>
+                                      <div class="dropdown-divider"></div>
+                                      <a class="dropdown-item" href="theme.scss">theme.scss</a>
+                                      <div class="dropdown-divider"></div>
+                                      <a class="dropdown-item" target="new" href="https://github.com/ThemesGuide/bootstrap-themes/tree/master/signal">Full template</a>
+                                  </div>
+                                </div> 
+                    </div>
+                    <div class="col-xl-6 col">
+                       <div class="text-lg-right" title="Theme colors">
+                           <h3>
+                               <span class="badge badge-pill bg-secondary" title="secondary">&nbsp;</span>
+                               <span class="badge badge-pill bg-success" title="success">&nbsp;</span>
+                               <span class="badge badge-pill bg-danger" title="danger">&nbsp;</span>
+                               <span class="badge badge-pill bg-info" title="info">&nbsp;</span>
+                               <span class="badge badge-pill bg-warning" title="warning">&nbsp;</span>
+                               <span class="badge badge-pill bg-light" title="light">&nbsp;</span>
+                               <span class="badge badge-pill bg-dark" title="dark">&nbsp;</span>
+                           </h3>
+                       </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+    <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary" id="navbar1">
+        <div class="container">
+            <a class="navbar-brand mr-1 mb-1 mt-0" href="../">Bootstrap 4</a>
+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="navbar-collapse collapse justify-content-center" id="collapsingNavbar">
+                <ul class="navbar-nav">
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="themesDd" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                          Themes
+                        </a>
+                        <div class="dropdown-menu" aria-labelledby="themesDd">
+                            
+                            
+                            <a class="dropdown-item px-2 active" href="../signal">Signal</a>
+                            
+                            <a class="dropdown-item px-2 " href="../greyson">Greyson</a>
+                            
+                            <a class="dropdown-item px-2 " href="../fresca">Fresca</a>
+                            
+                            <a class="dropdown-item px-2 " href="../darkster">Darkster</a>
+                            
+                            <a class="dropdown-item px-2 " href="../hello_kiddie">Hello Kiddie</a>
+                            
+                            <a class="dropdown-item px-2 " href="../blue_voltage">Blue Voltage</a>
+                            
+                            <a class="dropdown-item px-2 " href="../hootstrap">Hootstrap</a>
+                            
+                            <a class="dropdown-item px-2 " href="../herbie">Herbie</a>
+                            
+                            <a class="dropdown-item px-2 " href="../boldstrap">Boldstrap</a>
+                            
+                            <a class="dropdown-item px-2 " href="../lovey">Lovey</a>
+                            
+                            <a class="dropdown-item px-2 " href="../bootstrap_purple">Bootstrap Purple</a>
+                            
+                            <a class="dropdown-item px-2 " href="../monotony">Monotony</a>
+                            
+                            <a class="dropdown-item px-2 " href="../poypull">Poypull</a>
+                            
+                            <a class="dropdown-item px-2 " href="../tequila">Tequila</a>
+                            
+                            <a class="dropdown-item px-2" href="https://themestr.app" rel="nofollow" target="_new" title="Bootstrap theme builder">Build your own...</a>
+                        </div>
+                    </li>
+                </ul>
+                <ul class="navbar-nav ml-auto">
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="layoutDd" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                          Layouts
+                        </a>
+                        <div class="dropdown-menu" aria-labelledby="layoutDd">
+                            <a class="dropdown-item px-2" href="./">Default</a>
+                            <a class="dropdown-item px-2" href="./template2.html">Layout 2</a>
+                            <a class="dropdown-item px-2" href="./template3.html">Layout 3</a>
+                        </div>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#buttons">Buttons</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#navs">Navs</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#cards">Cards</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#modals">Modals</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#typography">Typography</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#forms">Forms</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#grid">Grid</a>
+                    </li>
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="navbarDd" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                          More
+                        </a>
+                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDd">
+                            <a class="dropdown-item px-2" href="#more">Badges</a>
+                            <a class="dropdown-item px-2" href="#more">Tooltips &amp; Popups</a>
+                            <a class="dropdown-item px-2" href="#more">Progress &amp; Alerts</a>
+                            <div class="dropdown-divider"></div>
+                            <a class="dropdown-item px-2" href="#more">All</a>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav> 
+<main>
+            <section id="buttons" class="pb-5">
+            <div class="container">
+                <div class="row">
+                    <div class="col-md-9">
+                        <div class="pb-3">
+                            <button type="button" class="btn btn-primary mr-1">Primary #FF304F</button>
+                            <button type="button" class="btn btn-outline-primary">Outline</button>
+                        </div>
+                        <div class="pb-3">
+                            <button type="button" class="btn btn-primary align-bottom btn-lg mr-1">Large</button>
+                            <button type="button" class="btn btn-primary align-bottom mr-1">Normal</button>
+                            <button type="button" class="btn btn-primary align-bottom btn-sm mr-1">Small</button>
+                            <a href="#" class="text-primary">Text</a>
+                        </div>
+                    </div>
+                    <div class="col-md d-none d-sm-block">
+                        <h4>Code Explorer</h4>
+                        <p>
+                        Just hover over any of the Bootstrap 
+                        components, and click the 
+                        <span class="d-inline-block rounded border align-middle pb-1 px-1 small"><small>&lt;&gt;</small></span>
+                        to view or copy the HTML markup for that element.
+                        </p>
+                    </div>
+                </div>
+                <div class="row py-2">
+                    <div class="col-md-auto col-3">
+                        <button class="btn btn-outline-secondary">Secondary</button>
+                    </div>
+                    <div class="col-md-auto col-3">
+                        <button class="btn btn-outline-info">Info</button>
+                    </div>
+                    <div class="col-md-auto col-3">
+                        <button class="btn btn-outline-danger">Danger</button>
+                    </div>
+                    <div class="col-md-auto col-3">
+                        <button class="btn btn-outline-success">Success</button>
+                    </div>
+                    <div class="col-md-auto col-3">
+                        <button class="btn btn-outline-warning">Warning</button>
+                    </div>
+                    <div class="col-md-auto col-3">
+                        <button class="btn btn-outline-light">Light</button>
+                    </div>
+                    <div class="col-md-auto col-3">
+                        <button class="btn btn-outline-dark">Dark</button>
+                    </div>
+                </div>
+                <div class="row py-2">
+                    <div class="col-md-auto col-3">
+                        <button class="btn btn-secondary">Secondary</button>
+                    </div>
+                    <div class="col-md-auto col-3">
+                        <button class="btn btn-info">Info</button>
+                    </div>
+                    <div class="col-md-auto col-3">
+                        <button class="btn btn-danger">Danger</button>
+                    </div>
+                    <div class="col-md-auto col-3">
+                        <button class="btn btn-success">Success</button>
+                    </div>
+                    <div class="col-md-auto col-3">
+                        <button class="btn btn-warning">Warning</button>
+                    </div>
+                    <div class="col-md-auto col-3">
+                        <button class="btn btn-light">Light</button>
+                    </div>
+                    <div class="col-md-auto col-3">
+                        <button class="btn btn-dark">Dark</button>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <section id="navs" class="container pb-5">
+            <div class="row">
+                <div class="col-xl-9 pb-4">
+                    <nav class="navbar navbar-expand-md navbar-dark bg-primary mb-2">
+                        <a class="navbar-brand" href="#">Light text</a>
+                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
+                            <span class="navbar-toggler-icon"></span>
+                        </button>
+                        <div class="collapse navbar-collapse" id="navbarColor02">
+                            <ul class="navbar-nav ml-auto">
+                                <li class="nav-item">
+                                    <a class="nav-link" href="#" title="Current breakpoint tier">
+                                        Tier     
+                                        <span class="d-xl-inline d-none">XL</span>
+                                        <span class="d-lg-inline d-xl-none d-none">LG</span>
+                                        <span class="d-md-inline d-lg-none d-none">MD</span>
+                                        <span class="d-sm-inline d-md-none d-none">SM</span>
+                                        <span class="d-inline d-sm-none">XS</span>
+                                    </a>
+                                </li>
+                                <li class="nav-item">
+                                    <a class="nav-link" href="#">About</a>
+                                </li>
+                            </ul>
+                        </div>
+                    </nav>
+                    <nav class="navbar navbar-expand-md navbar-light bg-primary mb-3">
+                        <a class="navbar-brand" href="#">Dark text</a>
+                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
+                            <span class="navbar-toggler-icon"></span>
+                        </button>
+                        <div class="collapse navbar-collapse" id="navbarColor03">
+                            <ul class="navbar-nav ml-auto">
+                                <li class="nav-item">
+                                    <a class="nav-link" href="#">Link</a>
+                                </li>
+                                <li class="nav-item">
+                                    <a class="nav-link" href="#">About</a>
+                                </li>
+                            </ul>
+                        </div>
+                    </nav>
+                    <div class="card border-0">
+                        <ul class="nav nav-tabs">
+                            <li class="nav-item">
+                                <a class="nav-link active" href="#tab1" data-toggle="tab">Tab</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="#tab2" data-toggle="tab">Tab</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="#tab3" data-toggle="tab">Tab</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link disabled" href="#tab4" data-toggle="tab">Disabled</a>
+                            </li>
+                        </ul>
+                        <div class="tab-content px-1 pt-3">
+                            <div class="tab-pane active" id="tab1">
+                                Select a palette, change the <span class="text-primary ">primary</span>, <span class="text-secondary ">secondary</span>, 
+                                <span class="text-success ">success</span>, <span class="text-danger ">danger</span>, 
+                                <span class="text-info ">info</span>, and <span class="text-warning ">warning</span> colors. 
+                                Choose from various Google Fonts, and modify most of the Bootstrap SASS variables. Click to generate your completely custom 
+                                Bootstrap theme.
+                            </div>
+                            <div class="tab-pane" id="tab2">
+                                The whole idea is to make the Bootstrap customization process easier, and allow you to visualize changes along the way. 
+                                For most users it's designed to be point-and-click, while advanced users can delve into the SASS as desired. It's a 4-step process.
+                            </div>
+                            <div class="tab-pane" id="tab3">3. Put some more content in your pane here.</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-xl-3 pb-4">
+                    <ul class="nav nav-pills flex-column mb-3">
+                        <li class="nav-item">
+                            <a class="nav-link active" href="#">Active</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#">Link</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#">Link</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#">Link</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link disabled" href="#">Disabled</a>
+                        </li>
+                    </ul>
+                    <div class="btn-group mb-3 w-100">
+                        <button type="button" class="btn btn-primary btn-block">Dropdown</button>
+                        <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            <span class="sr-only">Toggle Dropdown</span>
+                        </button>
+                        <div class="dropdown-menu dropdown-menu-right">
+                            <a class="dropdown-item" href="#">Action</a>
+                            <a class="dropdown-item" href="#">Link</a>
+                            <div class="dropdown-divider"></div>
+                            <a class="dropdown-item" href="#">Separated link</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <section id="cards" class="container pb-5">
+            <div class="d-flex my-3">
+                <div class="jumbotron w-100 py-5 mx-auto">
+                    <h1>Themestr.app</h1>
+                    <h4>Theme Builder for Bootstrap</h4>
+                    <p class="lead">
+                        Rapidy build custom themes for Bootstrap, the world's most 
+                        popular front-end component library for mobile-first, 
+                        responsive Web apps. <a class="font-weight-bold" href="https://themestr.app">Themestr.app</a> is a customizer and theme creator for Bootstrap. 
+                        Choose from a huge collection of color palettes, fonts and SASS variables. Prototype different styles, and 
+                        easily generate CSS from SASS to give your projects a unique look-and-feel.
+                    </p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-lg-4 mb-4">
+                    <div class="card border-primary h-100">
+                        <div class="card-body d-flex flex-column align-items-start">
+                            <h4 class="card-title text-primary">Card Outline</h4>
+                            <p class="card-text">Themestr.app makes it easy to customize this, and other free Bootstrap 4 themes for your downloading pleasure.</p>
+                            <a href="#" class="btn btn-primary mt-auto">Button</a>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-lg-4 mb-4">
+                    <div class="card border-primary h-100">
+                        <div class="card-body">
+                            <div class="list-group">
+                                <a href="#" class="list-group-item list-group-item-action active">Dis List Group</a>
+                                <a href="#" class="list-group-item list-group-item-action">Custom Colors</a>
+                                <a href="#" class="list-group-item list-group-item-action">Google Fonts</a>
+                                <a href="#" class="list-group-item list-group-item-action disabled">Ionicons</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-lg-4 mb-4">
+                    <div class="card bg-primary text-white h-100">
+                        <div class="card-body d-flex flex-column align-items-start">
+                            <h4 class="card-title">Scrollspy</h4>
+                            <p class="card-text">The top NavBar utilizes Bootstrap's Scrollspy component. You'll notice when you scroll the page the "active" nav section is highlighted.</p>
+                            <a href="https://getbootstrap.com/docs/4.1/components/scrollspy/" class="btn btn-primary border-white mt-auto">Read More</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <section id="modals" class="container pb-5">
+            <div class="row">
+                <div class="col-md-12">
+                    <div class="container-fluid">
+                        <div class="position-relative" style="z-index:1000">
+                            <div id="myModal" class="modal d-block position-relative" tabindex="-1" role="dialog" aria-hidden="true">
+                            <div class="modal-dialog">
+                                <div class="modal-content">
+                                    <div class="modal-header">
+                                        <h3>Modal</h3>
+                                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
+                                    </div>
+                                    <div class="modal-body">
+                                        <p>This is a basic Bootstrap 4 modal. The modal also comes in a <a href="#modal-sm" data-toggle="modal">smaller</a> and <a href="#modal-lg" data-toggle="modal">larger</a> sizes.</p>
+                                        <p>
+                                            What will you put in your modal? Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+                                            in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.
+                                        </p>
+                                    </div>
+                                    <div class="modal-footer">
+                                        <button class="btn" data-dismiss="alert" aria-hidden="true">Close</button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-9"></div>
+            </div>
+        </section>
+        <section id="typography" class="container pb-5">
+            <div class="row">
+                <div class="col-12">
+                    <h4><a target="_new" href="https://fonts.google.com/specimen/Comfortaa">Comfortaa</a></h4>
+                </div>
+                <div class="col-xl-4">
+                    <h6>Heading 6</h6>
+                    <h5>Heading 5</h5>
+                    <h4>Heading 4</h4>
+                    <h3 class="text-truncate">Heading 3</h3>
+                    <h2 class="text-truncate">Heading 2</h2>
+                    <h1 class="text-truncate">Heading 1</h1>
+                    <p class="lead">Lead</p>
+                    <p>Paragraph</p>
+                    <span class="badge badge-dark">badge</span>
+                </div>
+                <div class="col-xl-8 text-right">
+                    <p class="display-4 text-truncate">Display 4</p>
+                    <p class="display-3 text-truncate">Display 3</p>
+                    <p class="display-2 text-truncate">Display 2</p>
+                    <p class="display-1 text-truncate">Display 1</p>
+                </div>
+            </div>
+        </section>
+        <section id="forms" class="container pb-5">
+            <div class="row">
+                <div class="col-md-12">
+                    <form role="form">
+                        <div class="form-group row">
+                            <label class="col-md-2 col-form-label form-control-label text-muted">First</label>
+                            <div class="col-md-4">
+                                <input class="form-control" type="text" value="Jane">
+                            </div>
+                            <label class="col-md-1 col-form-label form-control-label text-muted">Last</label>
+                            <div class="col-md-5">
+                                <input class="form-control" type="text" value="Bishop">
+                            </div>
+                        </div>
+                        <div class="form-group row">
+                            <label class="col-lg-2 col-form-label form-control-label text-muted">Address</label>
+                            <div class="col-lg-10">
+                                <input class="form-control" type="text" placeholder="Street">
+                            </div>
+                        </div>
+                        <div class="form-group row">
+                            <label class="col-lg-2 col-form-label form-control-label text-muted"></label>
+                            <div class="col-lg-6">
+                                <input class="form-control" type="text" placeholder="City">
+                            </div>
+                            <div class="col-lg-4">
+                                <select class="form-control">
+                                    <option>State</option>
+                                    <option>AK</option>
+                                    <option>AZ</option>
+                                    <option>CA</option>
+                                    <option>CO</option>
+                                </select>
+                            </div>
+                        </div>
+                        <div class="form-group row was-validated">
+                            <label class="col-lg-2 col-form-label form-control-label text-muted">Username</label>
+                            <div class="col-lg-10">
+                                <input class="form-control" type="text" required="" id="un" name="un">
+                                <div class="invalid-feedback">
+                                  Username is required.
+                                </div>
+                            </div>
+                        </div>
+                        <div class="form-group row">
+                            <label class="col-lg-2 col-form-label form-control-label"></label>
+                            <div class="col-lg-10">
+                                <input type="reset" class="btn btn-outline-secondary mr-2" value="Cancel">
+                                <input type="button" class="btn btn-primary mr-2" value="Submit">
+                                <div class="custom-control custom-checkbox d-inline">
+                                  <input type="checkbox" class="custom-control-input" id="customCheck" checked>
+                                  <label class="custom-control-label" for="customCheck">Check me out</label>
+                                </div>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </section>
+        <section id="grid" class="container pb-5">
+            <p class="lead">The rows &amp; columns of the world famous Bootstrap grid speak for themselves.</p>
+            <div class="row">
+                <div class="col-sm-6">
+                    6
+                </div>
+                <div class="col-6">
+                    <div class="card my-1 bg-light">6</div>
+                </div>
+                <div class="col-sm-5">
+                    5
+                </div>
+                <div class="col-7">
+                    <div class="card my-1">7</div>
+                </div>
+                <div class="col-sm-4">
+                    4
+                </div>
+                <div class="col-8">
+                    <div class="card my-1">8</div>
+                </div>
+                <div class="col-sm-3">
+                    3
+                </div>
+                <div class="col-9">
+                    <div class="card my-1">9</div>
+                </div>
+                <div class="col-sm-2">
+                    2
+                </div>
+                <div class="col-10">
+                    <div class="card my-1">10</div>
+                </div>
+                <div class="col-sm-1">
+                    1
+                </div>
+                <div class="col-11">
+                    <div class="card my-1">11</div>
+                </div>
+            </div>
+        </section>
+        <section id="more" class="container pb-5">
+            <div class="row">
+                <div class="col-md-12">
+                    <div class="table-responsive">
+                        <table class="table table-hover table-sm">
+                            <tbody>
+                                <tr>
+                                    <th class="w-25">Location</th>
+                                    <th class="w-50">Date</th>
+                                    <th class="w-25">Visits</th>
+                                </tr>
+                                <tr>
+                                    <td>Westfield</td>
+                                    <td>08.05.18 <span class="badge badge-primary">badge</span></td>
+                                    <td>2323</td>
+                                </tr>
+                                <tr>
+                                    <td>Galway</td>
+                                    <td>08.05.18 <span class="badge badge-pill badge-primary">badge-pill</span></td>
+                                    <td>5362</td>
+                                </tr>
+                                <tr class="table-primary">
+                                    <td>Bern</td>
+                                    <td>08.05.18</td>
+                                    <td>153</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+                <div class="w-100 my-4"></div>
+                <div class="col-md-8">
+                    <a href="#" class="text-primary" data-toggle="tooltip" data-placement="right" title="This tooltip is on the right.">Right tooltip (hover)</a>
+                    <br>
+                    <a href="#" class="text-primary" data-toggle="tooltip" data-placement="bottom" title="This tooltip is on the bottom.">Bottom tooltip (hover)</a>
+                    <br>
+                </div>
+                <div class="col-md-4 text-right">
+                    <!--
+                    <div class="px-4 p-2 rounded bg-primary text-light" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">
+                        Toggle my popover
+                    </div>-->
+                    <button type="button" class="btn btn-lg btn-primary" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Toggle my popover</button>
+                </div>
+                <div class="w-100 my-4"></div>
+                <div class="col-md-12">
+                    <div class="progress mb-2">
+                        <div class="progress-bar bg-primary w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"> </div>
+                    </div>
+                </div>
+                <div class="col-md-12">
+                    <div class="alert alert-primary alert-dismissable show fade" role="alert">
+                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+                            <span aria-hidden="true">×</span>
+                        </button>
+                        <strong>Well done!</strong> You successfully read this important alert message.
+                    </div>
+                </div>
+                <div class="w-100 my-4"></div>
+            </div>
+        </section>
+</main>
+    <footer id="footer" class="bg-dark text-light py-5">
+        <div class="container py-5">
+            <div class="row">
+                <div class="col-6 col-md-6 col-lg-3 mb-2">
+                    <h6 class="text-uppercase">Tools</h6>
+                    <ul class="nav flex-column">
+                        <li><a class="text-white" target="ext" rel="nofollow" href="https://themestr.app" title="Bootstrap theme builder">Themestr.app</a></li>
+                        <li><a class="text-white" target="ext" rel="nofollow" href="http://themes.guide" title="Bootstrap free and pro themes">Themes.guide</a></li>
+                        <li><a class="text-white" target="ext" rel="nofollow" href="http://codeply.com" title="Prototype and edit code for Bootstrap and other responsive frameworks">Codeply</a></li>
+                        <li><a class="text-white" target="ext" rel="nofollow" href="http://bootply.com">Bootply</a></li>
+                    </ul>
+                </div>
+                <div class="col-6 col-md-6 col-lg-3 mb-2">
+                    <h6 class="text-uppercase">More</h6>
+                    <ul class="nav flex-column">
+                        <li><a class="text-white" target="_new" href="http://wdstack.com" title="The top projects, tools and apps for Web developers">WDStack</a></li>
+                        <li><a class="text-white" target="_new" href="http://theme.cards">Theme.cards</a></li>
+                        <li><a class="text-white" target="_new" href="http://www.bootbundle.com">BootBundle</a></li>
+                        <li><a class="text-white" target="_new" title="Learn about Bootstrap 4 using this free theme" href="http://bootstrap4.guide">Bootstrap4.guide</a></li>
+                    </ul>
+                </div>
+                <div class="col-12 col-md-12 col-lg-6 mb-2 text-right">
+                    <h6 class="text-uppercase">Follow</h6>
+                    <ul class="nav float-right">
+                        <li><a class="text-white mr-2" rel="nofollow" href="http://twitter.com/ThemesGuide" title="Follow on Twitter"><i class="h1 fa fa-fw fa-twitter fa-2x ion-logo-twitter"></i></a></li>
+                        <li><a class="text-white mr-2" rel="nofollow" href="https://www.facebook.com/codeply" title="Follow on Facebook"><i class="h1 fa fa-fw fa-facebook fa-2x ion-logo-facebook"></i></a></li>
+                        <li><a class="text-white mr" rel="nofollow" href="https://github.com/ThemesGuide/bootstrap-themes" title="Follow on GitHub"><i class="h1 fa fa-fw fa-facebook fa-2x ion-logo-github"></i></a></li>
+                    </ul>
+                </div>
+            </div>
+            <!--/row-->
+        </div>
+    </footer> 
+<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
+<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
+<script src="scripts.js"></script>
+</body>
+</html>
--- a/signal/theme.css
+++ b/signal/theme.css
--- a/signal/theme.min.css
+++ b/signal/theme.min.css
--- a/signal/theme.scss
+++ b/signal/theme.scss
@ -0,0 +1,24 @@
+/*! Themestr.app `Signal` Bootstrap 4.3.1 theme */
+@import url(https://fonts.googleapis.com/css?family=Nunito:200,300,400,700);
+$font-family-base:Nunito;
+@import url(https://fonts.googleapis.com/css?family=Comfortaa:200,300,400,700);
+$headings-font-family:Comfortaa;
+
+$enable-grid-classes:false;
+$primary:#FF304F;
+$secondary:#CACACA;
+$success:#015668;
+$danger:#06648C;
+$info:#0F81C7;
+$warning:#0DE2EA;
+$light:#ececec;
+$dark:#222222;
+
+/*! Import Bootstrap 4 variables */
+@import "functions";
+@import "variables";
+
+$gray-300:#e0e0e0;
+@import "bootstrap";
+
+// Add SASS theme customizations here..