Difference between revisions of "User:Admin.marc/sandbox"

From wiki
Jump to navigation Jump to search
Line 1: Line 1:
 +
<html>
 +
 +
<!--
 +
    This template was designed by Chris Soueidan of Global Affairs Canada's InnoLab Group in the SIAI Division. Visit innolab.site for more information.
 +
-->
  
−
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 
−
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
−
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
 
<head>
 
<head>
−
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+
  <meta charset="utf-8">
−
  <title>How to Add a Favicon to your Site - QA @ W3C</title>
+
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
−
  <meta name="Keywords"
+
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
−
  content="qa, quality assurance, conformance, validity, test suite, favicon, well known location, Web architecture, profile, meta, link"
+
    <title>GCPedicure</title>
−
  />
+
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
−
  <meta name="Description"
+
    <link rel="stylesheet" href="styles.css">
−
  content="W3C QA - This guide reviews the correct way to add a favicon to your Web site and address some issues related to it."
+
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
−
  />
+
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
−
  <link rel="schema.DC" href="http://purl.org/dc" />
+
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
−
  <meta name="DC.Subject" xml:lang="en" lang="en"
+
    <style>
−
  content="favicon, well known location, Web architecture, profile, meta, link"
+
        /*==========INCLUDE CUSTOM CSS right here==============*/
−
  />
+
 
−
  <meta name="DC.Title" xml:lang="en" lang="en"
+
     </style>
−
  content="How to add a favicon to your Web site?" />
 
−
  <meta name="DC.Description.Abstract" xml:lang="en" lang="en"
 
−
  content="This guide reviews the correct way to add a favicon to your Web site and address some issues related to it."
 
−
  />
 
−
  <meta name="DC.Date.Created" content="2005-10-24" />
 
−
  <meta name="DC.Language" scheme="RFC1766" content="en" />
 
−
  <meta name="DC.Creator" content="Karl Dubost" />
 
−
  <meta name="DC.Publisher"
 
−
  content="W3C - World Wide Web Consortium - http://www.w3.org" />
 
−
  <meta name="DC.Rights"
 
−
  content="http://www.w3.org/Consortium/Legal/copyright-documents" />
 
−
  <link rel="Stylesheet" href="/2005/10/w3cdoc.css" type="text/css" />
 
−
  <style type="text/css">
 
−
     .status { background: #aaa; padding: 1em; border: thin black solid }
 
−
  </style>
 
 
</head>
 
</head>
 +
 +
<body>
 +
 +
    <section class="super-body">
 +
 +
        <nav class="navbar navbar-inverse navbar-fixed-top">
 +
            <div class="container">
 +
                <div class="navbar-header">
 +
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
 +
                        <span class="sr-only">Toggle navigation</span>
 +
                        <span class="icon-bar"></span>
 +
                        <span class="icon-bar"></span>
 +
                        <span class="icon-bar"></span>
 +
                      </button>
 +
                    <a class="navbar-brand" href="Loogart_tbs"><i class="fa fa-play-circle" aria-hidden="true"></i> GCPedicure</a>
 +
                </div>
 +
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 +
                    <ul class="nav navbar-nav navbar-right">
 +
                        <li><a href="#">Menu item</a></li>
 +
                        <li class="dropdown">
 +
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown item<span class="caret"></span></a>
 +
                            <ul class="dropdown-menu">
 +
                                <li><a href="#">Job Aids</a></li>
 +
                                <li><a href="#">Resources and Forms</a></li>
 +
                                <li><a href="#">Onboarding</a></li>
 +
                                <li><a href="#">Training</a></li>
 +
                                <li><a href="#">Messages from Management</a></li>
 +
                                <li><a href="#">Employee Corner</a></li>
 +
                            </ul>
 +
                        </li>
 +
                        <li class="dropdown">
 +
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Edit <span class="caret"></span></a>
 +
                            <ul class="dropdown-menu">
 +
                                <li><a href=" http://www.gcpedia.gc.ca/gcwiki/index.php?title=GCpedicure_&action=edit">Under the hood</a></li>
 +
                            </ul>
 +
                        </li>
 +
                        <li><a href="GCpedicure_fr">FR</a></li>
 +
                    </ul>
 +
                </div>
 +
            </div>
 +
        </nav>
 +
 +
        <!-- jumbotron section -->
 +
        <div class="jumbotron jumbotron--background-image">
 +
            <div class="container align-top">
 +
                <div class="row">
 +
                    <div class="col-sm-offset-1 col-sm-10">
 +
                        <h1>GCPedicure</h1>
 +
                        <h3>The cure for boring GCpedia pages.
 +
A pedicure to style them like a boss.</h3>
 +
                        <a href="#!"><img class="img-responsive" src="https://loogart.github.io/gcpedicure/img/feet.jpg" style="filter:grayscale(100%);"></a>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
        </div>
 +
 +
        <!-- content -->
 +
        <section class="home">
 +
            <div class="container">
 +
                <div class="row">
 +
                    <div class="col-sm-offset-1 col-sm-10">
 +
                        <div class="row">
 +
 +
                            <!-- basic content UI -->
 +
                            <div class="col-sm-8">
 +
                                <h2>GCpedia looks old school?</h2>
 +
                                <p>Do you feel that GCpedia limits your brand visually? Are you looking to have an impactful GCpedia presence available to the entire Government of Canada? Well look no further, you are looking at your solution right here: <b>GCpedicure</b>.</p>
 +
                                <h3>Got css?</h3>
 +
                                <p>You've seen those cool websites: the <a href="http://innolab.site" target="_blank">InnoLab</a>, the <a href="http://learndata.site" target="_blank">Data Analytics Training site</a>, the <a href="http://www.gcpedia.gc.ca/wiki/Blueprint_2020/Innovation_Fair_2017" target="_blank">2017 PCO Innovation Fair</a> and the <a href="http://www.gcpedia.gc.ca/wiki/Experimentation" target="_blank">GC-Exp site</a>. All these sites have something in common: they are a full-screen and look like a modern-day website. They all use the <i>GCpedicure</i> secret sauce.</p>
 +
                                <h3>Want to create something similar?</h3>
 +
                                <p>Follow the instructions below and you should be able to get through the process of building a similar GCpedicure website on GCpedia. Note that basic html knowledge is required in order to ensure you succeed at this, so if you need to learn about html first, please visit <a href="https://www.w3schools.com/html/default.asp">w3schools.com</a> and start learning.</p>
 +
                            </div>
 +
                            <div class="col-sm-4">
 +
                                <img class="" src="https://loogart.github.io/gcpedicure/img/gcpedia.png" style="width:600px">
 +
                            </div>
 +
 +
                            <!-- accordion style UI -->
 +
                            <div class="col-sm-12">
 +
                                <h2>Step by step, line by line...</h2>
 +
                                <p>Alright, here we go. You can get more detail on each step by clicking on it.</p>
 +
                                <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
 +
                                    <div class="panel panel-default">
 +
                                        <div class="panel-heading" role="tab" id="headingTwo">
 +
                                            <h4 class="panel-title">
 +
                                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
 +
                                                    <h4>1. Copy the starter template</h4>
 +
                                                </a>
 +
                                            </h4>
 +
                                        </div>
 +
                                        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
 +
                                            <div class="panel-body">
 +
                                                <p>At the top right of this page, hit the "Edit" dropdown and then click on "Under the hood". Copy paste ALL the content INSIDE the text editor box (you can hold CTRL + A to select all, then CTRL +C to copy your selection).</p>
 +
                                                <img class="img-responsive" src="https://loogart.github.io/gcpedicure/img/copy-content.png">
 +
                                            </div>
 +
                                        </div>
 +
                                    </div>
 +
                                    <div class="panel panel-default">
 +
                                        <div class="panel-heading" role="tab" id="headingOne">
 +
                                            <h4 class="panel-title">
 +
                                                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
 +
                                                    <h4>2. Create your new GCpedia page</h4>
 +
                                                </a>
 +
                                            </h4>
 +
                                        </div>
 +
                                        <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
 +
                                            <div class="panel-body">
 +
                                                <p>Open a new tab in your browser, go to <a href="http://www.gcpedia.gc.ca/">GCpedia</a> and hit <i>Log in</i> at the top right. If you don't have an account, create it by following the onscreen instructions - otherwise, simply sign in.</p>
 +
                                                <p>In the "Search GCpedia" box (note: not the "search GCTools" at the top right, the one right under it), type in the name of the new page you want to create. E.g. "My page".</p>
 +
                                                <img class="img-responsive" src="https://loogart.github.io/gcpedicure/img/search-box.png">
 +
                                                <p>If the page name is taken, try another name and hit search. If the page does not exist, go ahead and create the page "My page".</p>
 +
                                                <img class="img-responsive" src="https://loogart.github.io/gcpedicure/img/create-new-page.png">
 +
                                                <p>Once your new page is created, copy the current URL and save it somewhere (notepad, Word document, ...). This is <i>extremely important</i> since you will need to be able to edit your page in the near future.</p>
 +
                                                <img class="img-responsive" src="https://loogart.github.io/gcpedicure/img/url.png">
 +
 +
                                                <p>Now paste (CTRL + V) the content you copied inside the new text editor box. </p>
 +
                                                <img class="img-responsive" src="https://loogart.github.io/gcpedicure/img/new-page-text-editor.png">
 +
 +
                                                <p>Once all the content is pasted, hit CTRL + F and type in "###". Right under the ###, you will see a line that starts with <code>&lt;li&gt;&lt;a href="...&gt;</code>. Copy the URL you saved earlier and replace all the existing text inside the quotes. Now, you can hit the "Save page" button at the bottom.</p>
 +
                                                <img class="img-responsive" src="https://loogart.github.io/gcpedicure/img/replace-url.png">
 +
 +
                                                <p>Tadaaaaa! You have now managed to setup a new editable page with our starter template. Next step, let's edit this page.</p>
 +
                                            </div>
 +
                                        </div>
 +
                                    </div>
 +
                                    <div class="panel panel-default">
 +
                                        <div class="panel-heading" role="tab" id="headingThree">
 +
                                            <h4 class="panel-title">
 +
                                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
 +
                                                    <h4>3. Editing this starter template</h4>
 +
                                                </a>
 +
                                            </h4>
 +
                                        </div>
 +
                                        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
 +
                                            <div class="panel-body">
 +
                                                <p>This is where you will need html knowledge. This template is built on <a href="http://getbootstrap.com/" target="_blank">Bootstrap</a>'s html framework. If you have experience using this framework, you can now make magic happen and use the components that Bootstrap offers. For all custom css, you can either link a separate GCpedia page by including <code>&#x7b;&#x7b;your css page name&#x7d;&#x7d;</code> at the bottom of your code or simply create your css within the <code>&lt;style&gt;&lt;/style&gt;</code> brackets in the head section of your code.</p>
 +
                                                <img class="img-responsive" src="https://loogart.github.io/gcpedicure/img/head-css.png">
 +
                                                <p> If you have no experience with this, please seek the help of a colleague who can assist in this process(*). Or start learning html basics at <a href="https://www.w3schools.com/html/default.asp">w3schools.com</a>.</p>
 +
                                                <hr>
 +
                                                <b>*Note: The InnoLab will not assist with the creation or customization of your GCpedia page, but we are available to help and answer any questions you might have.</b>
 +
                                            </div>
 +
                                        </div>
 +
                                    </div>
 +
                                </div>
 +
                            </div>
 +
 +
                            <!-- basic content UI -->
 +
                            <div class="col-sm-12">
 +
                                <h2>Thank you</h2>
 +
                                <p>If you find a typo or if the GCpedicure instructions are unclear, don't hesitate to <a href="mailto:innolab@international.gc.ca">contact us</a> and we will assist you.</p>
 +
                            </div>
 +
 +
                            <a href="http://innolab.site" target="_blank"><img class="img-responsive" src="https://loogart.github.io/gcpedicure/img/laptop.png"></a>
 +
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
        </section>
 +
 +
        <!-- footer -->
 +
        <section class="footer">
 +
            <div class="container">
 +
                <div class="row">
 +
                    <div class="col-sm-offset-1 col-sm-10">
 +
                        <h6>© Designed by <a href="https://www.linkedin.com/in/chrissoueidan/" target="_blank">Chris</a> and brought to you by Global Affairs Canada's <a href="http://innolab.site" target="_blank">InnoLab</a></h6>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
        </section>
 +
 +
    </section>
 +
 +
</body>
 +
 +
</html>
 +
{{gcpedicure css}}

Revision as of 11:50, 26 October 2018

<html>


<head> 

  <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
   <title>GCPedicure</title>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   <link rel="stylesheet" href="styles.css">
   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
   <style>
       /*==========INCLUDE CUSTOM CSS right here==============*/

   </style>

</head>

<body> 

   <section class="super-body">

       <nav class="navbar navbar-inverse navbar-fixed-top">

                   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                       Toggle navigation
                       
                       
                       
                     </button>
                   <a class="navbar-brand" href="Loogart_tbs"> GCPedicure</a>

       </nav>

GCPedicure

The cure for boring GCpedia pages. A pedicure to style them like a boss.

                       <a href="#!"><img class="img-responsive" src="https://loogart.github.io/gcpedicure/img/feet.jpg" style="filter:grayscale(100%);"></a>

       <section class="home">

GCpedia looks old school?

Do you feel that GCpedia limits your brand visually? Are you looking to have an impactful GCpedia presence available to the entire Government of Canada? Well look no further, you are looking at your solution right here: GCpedicure.

Got css?

You've seen those cool websites: the <a href="http://innolab.site" target="_blank">InnoLab</a>, the <a href="http://learndata.site" target="_blank">Data Analytics Training site</a>, the <a href="http://www.gcpedia.gc.ca/wiki/Blueprint_2020/Innovation_Fair_2017" target="_blank">2017 PCO Innovation Fair</a> and the <a href="http://www.gcpedia.gc.ca/wiki/Experimentation" target="_blank">GC-Exp site</a>. All these sites have something in common: they are a full-screen and look like a modern-day website. They all use the GCpedicure secret sauce.

Want to create something similar?

Follow the instructions below and you should be able to get through the process of building a similar GCpedicure website on GCpedia. Note that basic html knowledge is required in order to ensure you succeed at this, so if you need to learn about html first, please visit <a href="https://www.w3schools.com/html/default.asp">w3schools.com</a> and start learning.

                               <img class="" src="https://loogart.github.io/gcpedicure/img/gcpedia.png" style="width:600px">

Step by step, line by line...

Alright, here we go. You can get more detail on each step by clicking on it.

At the top right of this page, hit the "Edit" dropdown and then click on "Under the hood". Copy paste ALL the content INSIDE the text editor box (you can hold CTRL + A to select all, then CTRL +C to copy your selection).

                                               <img class="img-responsive" src="https://loogart.github.io/gcpedicure/img/copy-content.png">

Open a new tab in your browser, go to <a href="http://www.gcpedia.gc.ca/">GCpedia</a> and hit Log in at the top right. If you don't have an account, create it by following the onscreen instructions - otherwise, simply sign in.

In the "Search GCpedia" box (note: not the "search GCTools" at the top right, the one right under it), type in the name of the new page you want to create. E.g. "My page".

                                               <img class="img-responsive" src="https://loogart.github.io/gcpedicure/img/search-box.png">

If the page name is taken, try another name and hit search. If the page does not exist, go ahead and create the page "My page".

                                               <img class="img-responsive" src="https://loogart.github.io/gcpedicure/img/create-new-page.png">

Once your new page is created, copy the current URL and save it somewhere (notepad, Word document, ...). This is extremely important since you will need to be able to edit your page in the near future.

                                               <img class="img-responsive" src="https://loogart.github.io/gcpedicure/img/url.png">

Now paste (CTRL + V) the content you copied inside the new text editor box. 

                                               <img class="img-responsive" src="https://loogart.github.io/gcpedicure/img/new-page-text-editor.png">

Once all the content is pasted, hit CTRL + F and type in "###". Right under the ###, you will see a line that starts with <li><a href="...>. Copy the URL you saved earlier and replace all the existing text inside the quotes. Now, you can hit the "Save page" button at the bottom.

                                               <img class="img-responsive" src="https://loogart.github.io/gcpedicure/img/replace-url.png">

Tadaaaaa! You have now managed to setup a new editable page with our starter template. Next step, let's edit this page.

This is where you will need html knowledge. This template is built on <a href="http://getbootstrap.com/" target="_blank">Bootstrap</a>'s html framework. If you have experience using this framework, you can now make magic happen and use the components that Bootstrap offers. For all custom css, you can either link a separate GCpedia page by including {{your css page name}} at the bottom of your code or simply create your css within the <style></style> brackets in the head section of your code.

                                               <img class="img-responsive" src="https://loogart.github.io/gcpedicure/img/head-css.png">

If you have no experience with this, please seek the help of a colleague who can assist in this process(*). Or start learning html basics at <a href="https://www.w3schools.com/html/default.asp">w3schools.com</a>.

                                               *Note: The InnoLab will not assist with the creation or customization of your GCpedia page, but we are available to help and answer any questions you might have.

Thank you

If you find a typo or if the GCpedicure instructions are unclear, don't hesitate to <a href="mailto:innolab@international.gc.ca">contact us</a> and we will assist you.

                           <a href="http://innolab.site" target="_blank"><img class="img-responsive" src="https://loogart.github.io/gcpedicure/img/laptop.png"></a>

       </section>

       <section class="footer">
© Designed by <a href="https://www.linkedin.com/in/chrissoueidan/" target="_blank">Chris</a> and brought to you by Global Affairs Canada's <a href="http://innolab.site" target="_blank">InnoLab</a>
       </section>

   </section>

</body>

</html> <html> <style> 

 html,
 body {
     height: 100%;
     -webkit-animation: fadein .5s;
     animation: fadein .5s;
 }
 
 @keyframes fadein {
     from {
         opacity: 0;
     }
     to {
         opacity: 1;
     }
 }
 
 @-webkit-keyframes fadein {
     from {
         opacity: 0;
     }
     to {
         opacity: 1;
     }
 }
 
 @import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700,900');
 * {
     margin: 0;
     padding: 0;
 }
 /* THIS IS THE SECRET SAUCE for GCpedia, BODY AND SUPER-BODY classes */
 
 body {
     overflow-y: hidden;
     background-color: #f8f8f8;
 }
 
 .super-body {
     position: fixed;
     overflow-y: scroll;
     overflow-x: hidden;
     -ms-overflow-x: hidden;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 10000;
     background-color: #fff;
     -webkit-transition: all .2s ease-in;
     transition: all .5s ease-in;
     font-family: 'Roboto', sans-serif;
     font-size: 14px;
     -webkit-overflow-scrolling: touch;
     -ms-overflow-style: -ms-autohiding-scrollbar;
 }
 
 div#mw-head {
     position: absolute;
     top: 145px;
     right: 0;
     width: 100%;
     display: none;
 }
 
 div#mw-panel {
     font-size: inherit;
     position: absolute;
     top: 160px;
     padding-top: 1em;
     width: 10em;
     left: 0;
     display: none;
 }
 
 #footer {
     display: none;
 }
 
 .mw-content-ltr ul,
 .mw-content-rtl .mw-content-ltr ul {
     margin: 0;
 }
 
 .mw-body .mw-body-content h1 {
     margin-top: 0;
 }
 
 .mw-body h1,
 .mw-body h2 {
     font-family: sans-serif;
     line-height: 1.3;
     margin-bottom: .25em;
     padding: 0;
     border-bottom: 1px solid transparent;
 }
 /*new css*/
 
 h4 {
     padding-top: 0;
 }
 
 .mw-body h3,
 .mw-body h4,
 .mw-body h5,
 .mw-body h6 {
     line-height: 1.2;
     margin-top: .1em;
     margin-bottom: .1em;
     padding-bottom: 0;
 }
 
 .navbar {
     position: relative;
     min-height: 50px;
     margin-bottom: 0px;
     border: 1px solid transparent;
 }
 
 .navbar-default {
     background-color: #fff;
     border-color: #e7e7e7;
 }
 
 .navbar-default .navbar-brand {
     color: #222;
 }
 
 .navbar-default .navbar-brand:hover,
 .navbar-default .navbar-brand:focus {
     color: #5e5e5e;
     background-color: transparent;
 }
 
 .navbar-default .navbar-text {
     color: #222;
 }
 
 .navbar-default .navbar-nav>li>a {
     color: #222;
 }
 
 .navbar-default .navbar-nav>li>a:hover,
 .navbar-default .navbar-nav>li>a:focus {
     color: #111;
     background-color: transparent;
 }
 
 .navbar-default .navbar-nav>.active>a,
 .navbar-default .navbar-nav>.active>a:hover,
 .navbar-default .navbar-nav>.active>a:focus {
     color: #555;
     background-color: #e7e7e7;
 }
 
 .navbar-default .navbar-nav>.disabled>a,
 .navbar-default .navbar-nav>.disabled>a:hover,
 .navbar-default .navbar-nav>.disabled>a:focus {
     color: #ccc;
     background-color: transparent;
 }
 
 .navbar-default .navbar-toggle {
     border-color: #ddd;
 }
 
 .navbar-default .navbar-toggle:hover,
 .navbar-default .navbar-toggle:focus {
     background-color: #ddd;
 }
 
 .navbar-default .navbar-toggle .icon-bar {
     background-color: #888;
 }
 
 .navbar-default .navbar-collapse,
 .navbar-default .navbar-form {
     border-color: #e7e7e7;
 }
 
 .navbar-default .navbar-nav>.open>a,
 .navbar-default .navbar-nav>.open>a:hover,
 .navbar-default .navbar-nav>.open>a:focus {
     color: #555;
     background-color: #e7e7e7;
 }
 
 @media (max-width: 767px) {
     .navbar-default .navbar-nav .open .dropdown-menu>li>a {
         color: #777;
     }
     .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover,
     .navbar-default .navbar-nav .open .dropdown-menu>li>a:focus {
         color: #333;
         background-color: transparent;
     }
     .navbar-default .navbar-nav .open .dropdown-menu>.active>a,
     .navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover,
     .navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus {
         color: #555;
         background-color: #e7e7e7;
     }
     .navbar-default .navbar-nav .open .dropdown-menu>.disabled>a,
     .navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:hover,
     .navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:focus {
         color: #ccc;
         background-color: transparent;
     }
 }
 
 .navbar-default .navbar-link {
     color: #777;
 }
 
 .navbar-default .navbar-link:hover {
     color: #333;
 }
 
 .navbar-default .btn-link {
     color: #777;
 }
 
 .navbar-default .btn-link:hover,
 .navbar-default .btn-link:focus {
     color: #333;
 }
 
 .navbar-default .btn-link[disabled]:hover,
 fieldset[disabled] .navbar-default .btn-link:hover,
 .navbar-default .btn-link[disabled]:focus,
 fieldset[disabled] .navbar-default .btn-link:focus {
     color: #ccc;
 }
 
 .navbar-brand {
     font-weight: bolder;
 }
 
 .logo {
     height: 21px;
 }
 
 .btn {
     min-height: 34px;
 }
 
 .navbar-default .navbar-nav>li>a:visited {
     color: #222;
 }
 
 ul.dropdown-menu {
     padding: 0;
 }
 
 .dropdown-menu>li>a {
     display: block;
     padding: 15px 20px;
     clear: both;
     font-weight: 400;
     line-height: 1.42857143;
     color: #333;
     white-space: nowrap;
     border-bottom: 1px solid #e8e8e8;
 }
 
 .home {
     padding: 20px;
     background-color: #fff;
 }
 
 .home p {
     font-size: 20px;
     font-weight: 400;
 }
 
 .home h2 {
     font-size: 3em;
     font-weight: bolder;
     margin-bottom: 20px;
 }
 
 .home h3 {
     font-weight: bolder;
     margin-top: 40px;
 }
 
 .home {
     padding: 0 0 30px;
 }
 
 .home .filter-button-group {
     padding: 15px 0;
 }
 
 .jumbotron--background-image {
     color: #222;
     min-height: 20vh;
          justify-content: center;
     background-position: 50% 100%;
     background-size: cover;
     background-repeat: no-repeat;
     background-color: #fff;
     text-align: center;
 }

 .jumbotron--background-image h1 {
     font-weight: bolder;
 }
 
 
 .jumbotron--background-image h3 {
     line-height: 1.4em;
     font-size: 24px;
     font-weight: bold;
 }
 
 div[class^="col-"] {
     margin-bottom: 20px;
 }
 
 div[class^="col-"] img {
     margin: 30px auto;
 }
 
 .footer {
     padding: 30px 0;
     background-color: #232323;
     color: #e8e8e8;
 }
 
 .footer a {
     color: #e8e8e8;
 }
 
 .navbar-inverse {
     background: rgba(0, 0, 0, 0.8);
 }
 
 .align-top {
     -ms-flex-item-align: start;
     align-self: flex-start;
 }

</style> </html>

Retrieved from "https://wiki.gccollab.ca/index.php?title=User:Admin.marc/sandbox&oldid=5798"