Skip to content

jhblacklock/artheas-angels

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="favicon.ico">

    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="dist/css/theme.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body id="skrollr-body" data-spy="scroll" data-target=".navbar" class="layout-boxed-no" > <!-- "layout-boxed" class for boxed layout "layout-boxed-no" class for full size wrapper -->

<!-- Hero area -->
    <div class="wrapper-shadow">
        <section id="hero" class="wrapper wrapper-contrast wrapper-xs"  >
          <div class="container  wow fadeIn">
            <div class="row">
            </div>
          </div>
        </section>

        <!-- Page intro -->
        <section id="team" class="wrapper wrapper-accent wrapper-sm">
          <div class="container  wow fadeIn">
            <div class="row">
              <div class="col-md-8">
                <h1>Readme Doc</h1>
                <p class="lead">For: "Poncho" Bootstrap HTML Template</p>
              </div>
            </div>
          </div>
        </section>

                <section id="content-intro" class="wrapper wrapper-default">
          <div class="container">
            <div class="row">
              <div class="col-md-8">
                  <h2>Introduction</h2>
                  <p class="lead">
                  Welcome to the "Poncho" Bootstrap/HTML 5 template documentation. Thanks for buying it! 
                  </p>

                  <p class="lead">
                  Here are some important questions (and answers) to start with:
                  </p>
                  <p>
                  <strong>What is "Poncho" ?:</strong> "Poncho" is a modern and lightweight commercial HTML template made for developers and webdesigners to create smaller static websites like landingpages, portfolio pages, CV sites etc. It based on HTML5/CSS3 and the responsive grid framework Bootstrap (SASS version) and comes with Bower and Gulp support. It is a toolbox with different snippets to be combined by you to a great looking (and working...) website.
                  </p>

                  <p>
                  <strong>What is it not:</strong> It is not a WordPress theme nor another CMS template! It is not a full and ready-made website. 
                  </p>

                  <p>
                  <strong>What is all this Gulp, Bower, Bootstrap stuff? Do I need any advanced rocket sience degree to use this template?:</strong><br/> No, if you don´t have a clue what this is all about just don´t care about the <strong>/src</strong> folder in the templates ZIP archive. Just use the <strong>/template_itself</strong> folder  and you are good to go. In this case you just need some basic HTML and CSS knowledge to create a website based on "Poncho".
                  But if you are a professional frontend developer you probably love all this s*#!t. In this case take a look at the <strong>/dev</strong> folder
              </p></div>
              <div class="col-md-4">
                <h1>1.</h1>
              </div>
            </div>
          </div>
      </section>

       <section id="content-installation" class="wrapper wrapper-lightest">
          <div class="container">
            <div class="row">
              <div class="col-md-8">
                  <h2>Installation</h2>
                  <p class="lead">
                  Its very easy to install "Poncho". You just need a bit of webspace plus a FTP tool.
                  </p>
                  <h4>Check out the HTML file locally</h4>
                  <p>
                  First of all: Extract the downloaded .zip file to your local HDD. It includes two (besides other folders and files) folders: /dist and /src. At this point: Don´t care about the /src folder. <br>
                  The /dist/index.html file is your main HTML file. You can open it on your local computer. Just double click on it and your favorite browser will open "Poncho".</p>
                 

                  <h4>Upload the template to your webspace</h4>
                  <p>
                  Just upload the contens (all files and folders) from INSIDE the /dist folder via FTP to your webspace. Tatatata! Thats it...your website is online.
                  </p>
              </div>
              <div class="col-md-4">
                <h1>2.</h1>
              </div>
            </div>
          </div>
      </section>

      <section id="content-installation" class="wrapper wrapper-light">
          <div class="container">
            <div class="row">
              <div class="col-md-8">
                  <h2>The Contact Form</h2>
                  <p class="lead">
                  The template comes with a simple PHP mailing script and a build-in contact form. Make sure your webserver supports PHP. But than it is very easy to use:
                  </p>
                  <h4>Edit the contact.php file</h4>
                  <p>
                  Open the contact.php file located in: <br/>
                    <strong>src/php/contact.php</strong><br/>
                    Search for the following line of code:<br/>
                    <pre>$to = "templatedeck@mailinator.com"; // this is your Email address </pre>
                    Change the E-Mail portion <strong>templatedeck@mailinator.com</strong> to your mail address, save and upload the file.
                </p>
                 
              </div>
              <div class="col-md-4">
                <h1>3.</h1>
              </div>
            </div>
          </div>
      </section>



      <section id="content-development" class="wrapper wrapper-dark">
          <div class="container">
            <div class="row">
              <div class="col-md-8">
                  <h2>Developer Stuff</h2>
                  <p class="lead">
                  Okay, I can´t give you a basic introduction to SASS, Bower and Gulp at this point. Read on if you are familiar with it. If not take some time, Google it, learn it and enjoy it! And if you don´t enjoy it: No fear, you can use this template without all this blingbling stuff. It just takes a bit more time...
                  </p>
                  <p>Install npm, Bower, SASS and Gulp n your computer at first.<br>
Then open you terminal and go to the: <br>
                  </p><pre>/src</pre>
                  folder inside the extracted .zip folder.
                  <p></p>

                  <p>Run:
                    </p><pre> $ npm install </pre>
                    that installes all the gulp dependencies.
                    Than type:
                    <pre>$ bower install </pre>
                    to install all the frontend dependencies. Than everything should be there and you are ready to go. 
                  <p></p>


              </div>
                            <div class="col-md-4">
                <h1>4.</h1>
              </div>
            </div>
          </div>
      </section>

            <section id="content-development" class="wrapper wrapper-accent">
          <div class="container">
            <div class="row">
              <div class="col-md-8">
                  <h2>Important Gulp tasks</h2>
                  <p class="lead">
                  There are three important Gulp task to to compile the SCSS files and distribute the source files into the /dist folder:
                  </p>
                  <p>Compile SCSS into CSS maually: <br>
                  </p><pre>/gulp sass</pre>
                  <p></p>

                  <p>Watch file changes and compile SCSS fils into CSS automatically on save:
                    </p><pre>/gulp watch</pre>
                  <p></p>

                      <p>Clean up folders, minifies images and CSS files and move everything to the /dist folder: <br>
                  </p><pre>/gulp dist</pre>
                  <p></p>


              </div>
                            <div class="col-md-4">
                <h1>5.</h1>
              </div>
            </div>
          </div>
      </section>

      <section id="content-markup" class="wrapper wrapper-darker">
          <div class="container">
            <div class="row">
              <div class="col-md-8">
                  <h2>Assets and Credits</h2>
                  <p class="lead">
                  "Poncho" uses a lot of 3rd party scripts and assets. Here is a list of it:
                  </p><ul>
                  <li><strong>jQuery 2.1.4</strong> - Okay I don´t think I have to say something about it...</li>
                  <li><strong>Bootstrap 3.3.6 (SASS ported version)- CSS Grid Framework</strong> - Visit <a href="http://www.getbootstrap.com" target="_blank">getbootstrap.com</a> to learn more about it.</li>
                  <li><strong>Owl Carousel Slider 2</strong> - <a href="http://www.owlcarousel.owlgraphic.com/" target="_blank">Visit the authors website</a></li>
                  <li><strong>Skrollr scrolling script</strong> - <a href="https://github.com/Prinzhorn/skrollr" target="_blank">By Prinzhorn</a></li>
                  <li><a href="https://github.com/Prinzhorn/skrollr" target="_blank"><strong>bootstrap-validator.js 0.8.1</strong></a></li>
                  <li><a href="http://fortawesome.github.io/Font-Awesome/" target="_blank"><strong>Font Awesome Icon Set 4.5.0 </strong></a></li>
                  <li><strong>wow.js 1.1.2</strong> - <a href="http://mynameismatthieu.com/WOW/" target="_blank">By Matt Aussaguel</a></li>
                  <li><strong>animate.css 3.3.1</strong> - <a href="http://daneden.github.io/animate.css/" target="_blank">By Daniel Eden.</a></li>
                  <li>CC Zero licensed images from <a href="https://unsplash.com/">Unsplash</a>, <a href="http://startupstockphotos.com/">StartUp Stock Photos</a> and <a href="http://deathtothestockphoto.com/">deathtostockphotos</a></li>
                </ul>
              </div>
                            <div class="col-md-4">
                <h1>6.</h1>
              </div>
            </div>
          </div>
      </section>



      <section id="content-support" class="wrapper wrapper-darkest">
          <div class="container">
            <div class="row">
              <div class="col-md-8">
                  <h2>Need more help?</h2>
                  <p class="lead">
                  Any question, problem or suggestion? Send me an <a target="_blank" href="mailto:hello@templatedeck.com">E-Mail</a> or contact me via <a target="_blank" href="http://www.twitter.com/templatedeck">Twitter</a>
                  </p>
              </div>
                            <div class="col-md-4">
                <h1>7.</h1>
              </div>
            </div>
          </div>
      </section>

    <!-- All core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="dist/js/jquery.min.js" type="text/javascript"></script> <!-- A must-have - dont remove it! -->
    <script src="dist/js/bootstrap.min.js" type="text/javascript"></script> <!-- A must-have - dont remove it! -->
    <script src="dist/js/smoothscroll.min.js" type="text/javascript"></script> <!-- smoothscrolling script - remove if you don´t use it -->
    <script type="text/javascript">
        //<![CDATA[
            $(window).load(function() { // makes sure the whole site is loaded
                $('#status').fadeOut(); // will first fade out the loading animation
                $('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.
                $('body').delay(350).css({'overflow':'visible'});
            })
        //]]>
    </script>
  </body>
</html>