gpccaor-deployed/index.html

453 lines
10 KiB
HTML
Raw Normal View History

2021-10-30 07:52:57 -07:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="generator" content="Hugo 0.88.1" />
<title>GPCCA</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<meta http-equiv="Cache-Control" content="max-age= 3600" />
<base href="https://www.gpccaor.org/">
<link href="https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" />
<link href="//fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Open%20Sans" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/lightgallery/1.3.9/css/lightgallery.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/lightgallery/1.3.9/css/lg-transitions.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.16/css/perfect-scrollbar.min.css" type="text/css" media="screen" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/styles/default.min.css">
<link href="/css/base.css" rel="stylesheet">
<link href="/css/page.css" rel="stylesheet">
<link href="/css/navbar.css" rel="stylesheet">
<link href="/css/responsive.css" rel="stylesheet">
<style>
body { font-family:Open Sans,Helvetica,Arial,sans-serif; }
.nav-bar__menu-item:hover, .nav-bar__menu-item >a:hover {color: #26ad60; }
.nav-bar, .section--footer { background-color: #26ad60; }
.nav-bar__logo,.nav-bar__logo:hover, .nav-bar__menu, .nav-bar__menu-button, .section--footer { color: #1f5e3a; }
.nav-bar__menu-item:hover, .nav-bar__menu-item >a:hover { background-color: #1f5e3a; }
#hero { color: red; }
#hero { background-color: #6fc695; }
#hero h1 { color: red; }
#hero h2 { color: red; }
#hero h3 { color: red; }
#hero h4 { color: red; }
#hero hr { border-top-color: red; }
#hero { background-image: url("https://www.gpccaor.org/images/city-park.jpg"); }
.section--odd, .section--even .btn {
color: #1f5e3a;
background-color: #6fc695;
}
.section--even, .section--odd .btn {
color: #6fc695;
background-color: #1f5e3a;
}
.section--footer {
color: green;
background-color: black;
}
</style>
<link rel="stylesheet" href="/css/uci-shortcodes-custom.css">
<link rel="stylesheet" href="/css/uci-shortcodes.css">
<link rel="stylesheet" href="/css/custom.css">
</head>
<body>
<div id="nav-bar" class="nav-bar">
<div class="nav-bar__header">
<a href="#hero" class="nav-bar__logo">
GPCCA
</a>
<div class="nav-bar__menu-button"> <i class="fa fa-bars"></i></div>
<div class="nav-bar__draft"></div>
</div>
<ul class="nav-bar__menu hide-menu">
<li >
<a class="nav-bar__menu-item" href="#about">
About
</a>
</li>
</ul>
</div>
<div class="nav-bar-spacer"></div>
<section id="hero" class="section section--hero">
<div class="section__container" >
<div class="section__content section__content--hero" >
<h1>Greater Prairie City Community Association</h1>
<h2>GPCCA</h2>
<hr>
<h4> Serving Prairie City</h4>
</div>
</div>
</section>
<main class="sections">
<section id="about" class="section section--about section--odd"
style="color:; background-color:;"
>
<div class="section__container">
<div class="section__headline section__headline--about">
<h1>The GPCCA</h1>
</div>
<div class="section__content section-content--about" >
</div>
</div>
</section>
<section id="footer" class="section section--footer section--even"
style="color:; background-color:;"
>
<div class="section__container">
<div class="section__headline section__headline--footer">
<h1></h1>
</div>
<div class="section__content section-content--footer" >
<div class="updated">
2021-11-10 12:55:41 -08:00
<p>site updated: October 30, 2021@9:12 am</br>
2021-10-30 07:52:57 -07:00
status: initial development</br></p>
</div>
</div>
</div>
</section>
<div id="modal-test" class="section section--modal">
<div class="section__container section__container--modal">
<div class="section__headline section__headline--modal">
<h1>Example Modal</h1>
</div>
<div class="section__content section__content--modal" >
<p>Here is how you can add additional content to your page without having it take up space&hellip;use a modal!</p>
<p>To do that make a .md file in the <code>content/modals</code> directory.</p>
<p>Put any markdown content in it including shortcodes.</p>
<p>Then just link to it in a section markdown file using the link shortcode.</p>
<p><strong>example</strong></p>
<pre tabindex="0"><code>{{&lt; link url=&quot;#modal-test&quot; text=&quot;A test modal&quot; type=&quot;btn&quot; display=&quot;modal&quot; &gt;}}
</code></pre><p>where there is a file <code>test.md</code> in the <code>content/modals directory</code></p>
<p>and the url is `url=&quot;#modal-&lt;modal file name without .md&gt;&quot;``</p>
</div>
</div>
</div>
<div id="modal-map" class="section section--modal">
<div class="section__container section__container--modal">
<div class="section__headline section__headline--modal">
<h1>More Markdown</h1>
</div>
<div class="section__content section__content--modal" style="align-items: center;" >
<h3 id="and-now-for-the-rest-of-the-show">And now for the rest of the show</h3>
<div class="box ">
<div class="box box--column ">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-markdown" data-lang="markdown"><span style="color:#66d9ef">*</span> One
<span style="color:#66d9ef">*</span> Two
<span style="color:#66d9ef">*</span> Three
</code></pre></div></div>
<hr>
<div class="box ">
<div class="box box--column ">
<ol>
<li>Buy flour and salt</li>
<li>Mix together with water</li>
<li>Bake</li>
</ol>
</div>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-markdown" data-lang="markdown"><span style="color:#66d9ef">1.</span> Buy flour and salt
<span style="color:#66d9ef">1.</span> Mix together with water
<span style="color:#66d9ef">1.</span> Bake
</code></pre></div></div>
<hr>
<p>Monspaced Font Box:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-markdown" data-lang="markdown">Monospaced type box primarily for showing code
Indent three or enclose in```
</code></pre></div><p>or put it <code>inline</code> like this</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-markdown" data-lang="markdown">or put it <span style="color:#e6db74">`inline`</span> like this
</code></pre></div><hr>
<p>a separator line <br>
* * *</p>
<hr>
<p>This is <a href="http://example.com" title="example">an example</a> simple markdown link.</p>
<p><a href="http://example.com">This link</a> has no title attr.</p>
<p>This is [an example] <a href="http://example.com" title="Optional Title">someid</a> reference-style link.</p>
<pre><code>This is [an example](http://example.com &quot;Example&quot;) link.
[This link](http://example.com) has no title attr.
This is [an example] [id] reference-style link.
[id]: http://example.com &quot;Optional Title&quot;
</code></pre>
<p>Use the link plugin shortcode for doing more fancy things.</p>
<a
class="box box--btn btn btn--regular"
href="javascript:void( window.open('https://dkebler.github.io/landingpage-guide', 'blank', 'scrollbars=yes, toolbar=no, width=1000 ' ))">
<i class="btn__icon fa fa-space-shuttle"></i>
<div class="btn__text">A Button Styled Link with icon opens in window</div>
</a>
<hr>
<p>You can put images from external sources in this way</p>
<p><img src="http://placehold.it/200x50" alt="Alt Text" title="Image Title"></p>
<pre><code>![Alt Text](http://placehold.it/200x50 &quot;Image Title&quot;)
</code></pre>
<p>but it&rsquo;s probably better to use the plugin shortcode for your images</p>
<div class="box box--column box--image
"
style="
"
>
<div class="box__title">Where I Want To Be</div>
<a href="/images/green-landscape.jpg" target="_blank" >
<img
style="
"
src="/images/green-landscape.jpg" />
</a>
<div class="box__caption">Sure is Green</div>
</div>
<pre tabindex="0"><code>{{&lt; image filename=&quot;green-landscape.jpg&quot; title=&quot;Where I Want To Be&quot; caption=&quot;Sure is Green&quot; &gt;}}
</code></pre>
</div>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/g/lightgallery,lg-autoplay,lg-pager,lg-thumbnail,lg-video"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.16/js/perfect-scrollbar.jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/highlight.min.js"></script>
<script src="/js/util.js"></script>
<script src="/js/fitToWindow.js"></script>
<script src="/js/flowType.js"></script>
<script src="/js/youtube.js"></script>
<script src="/js/page.js"></script>
<script src="/js/docready.js"></script>
<script>
$(document).ready(function () {
lightgallery('#photos')
});
</script>
<script>
$(document).ready(function () {
lightgallery('.box--image-lightbox')
});
</script>
</body>
</html>