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… 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 > {{< link url=" #modal-test" text=" A test modal" type=" btn" display=" modal" > }}
< / 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=" #modal-< modal file name without .md> " ``< / 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 " Example" ) link.
[This link](http://example.com) has no title attr.
This is [an example] [id] reference-style link.
[id]: http://example.com " Optional Title"
< / 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 > 
< / code > < / pre >
< p > but it’ 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 > {{< image filename=" green-landscape.jpg" title=" Where I Want To Be" caption=" Sure is Green" > }}
< / 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 >
