glucose: FAQ page

<!--

" glucose "

FAQ page by felinum

Please, don't: steal the code, remove the credit, claim the code as your own. Thank you, enjoy!


-->


<!DOCTYPE html>
<html>
<head>
<title>{Title}</title>
<link href='https://fonts.googleapis.com/css?family=Chivo|Cardo' rel='stylesheet' type='text/css'>
<link href="http://static.tumblr.com/0cdn90j/dSJomd0eu/style.css" rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">

<style>

    body {
        font:10px chivo;
        color:#707070;
    }

    #container:before {
        border-left:1px solid #f8e4e4; /*vertical border*/
    }

    nav {
        background:#f8f8f8;  /*header background*/
    }

    #img {
        background:#f8e4e4; /*icon background on hover*/
    }

    #title {
        color:#606060; /*header title*/
    }

    .lnr {
        color:#000;
        background:#f8e4e4; /*link icons background and color*/
    }

    .lnr:hover {background:transparent;} /*link icons bg on hover*/

    .tt span { /*section title*/
        background:#fff7f7;
        border:1px solid #f8e4e4;
        color:#515151;
    }

    .tt::before {
        margin-left:-52px;
        background:#f8e4e4; /*section counter bg*/
    }

    .tt::after {
        border-bottom:1px solid #f8e4e4; /*make sure the color matches section counter bg*/
    }

    blockquote { /*question appearance*/
        border-bottom:1px solid #fcf2f2;
        background:#fafafa;
        color:#545454;
        font:bold 1.15em cardo;
    }

    blockquote:hover, .inquire {border:1px solid #f8e4e4; background:#f9f7f7;} /*question appearance on hover*/

    blockquote:hover {color:#000;}

    p {line-height:1.6em;}

    i {color:#c47171;} /*italic*/

    code {background:#f0f0f0;} /*code bg*/

    section a { /*faq links*/
        color:black;
        background:#f8e4e4;
        padding:2px 4px;
    }

    section a:hover { /*faq links hover*/
        background:transparent;
        border:1px solid #e8b7b7;
    }

    #s-m-t-tooltip { /*link icons tooltips*/
        background-color:white;
        font:bold .8em cardo;
        text-transform:uppercase;
        letter-spacing:1px;
        color:#565656;
        border-radius:3px;
    }

    /*selection bg and color*/
    ::selection {background-color:#f9eded; color:black;}
    ::-moz-selection {background-color:#f9eded; color:black;}


</style>
</head>

<body>

<div id="container">

<!-- HEADER -->

    <nav>

        <div id="blog">
            <div id="img">
                <a href="http://{name}.tumblr.com">

                <!-- replace the img url with your own url -->

                <img src="https://68.media.tumblr.com/a28901f544e1834b8d968895570dd2a0/tumblr_omczwyg5qf1rupvqko1_75sq.png"></a>
            </div>

            <div id="title">FAQ</br>@<a href="http://{name}.tumblr.com">{name}</a></div>
        </div>


        <div id="links">

        <!-- links; edit the url and title -->

            <a href="/" title="home"><i class="lnr lnr-user" aria-hidden="true"></i></a>
            <a href="/" title="link 2"><i class="lnr lnr-bookmark" aria-hidden="true"></i></a>
            <a href="/" title="link 3"><i class="lnr lnr-rocket" aria-hidden="true"></i></a>
            <a href="http://tumblr.com/dashboard" title="dash"><i class="lnr lnr-home" aria-hidden="true"></i></a>
        </div>

    </nav>


    <section>


    <!-- INSTRUCTIONS:

    1. <blockquote>...</blockquote> - question tags

    2. <div><p>...</p></div> - answer tags; delete <div> and </div> to make your answer non-collapsible


    <!-------------section 1------------->

        <!--section 1 title-->
        <div class="tt"><span>
            section 1 title
        </span></div>
        <!--end section 1 title-->


        <!--question 1-->
        <blockquote>
            Write your question here.
        </blockquote>
        <!-- end question 1-->


         <!--answer 1-->
        <div><p>
            Here goes your answer. A link <a href="/">example</a>
        </p></div>
        <!--end answer 1-->


        <!--question 2-->
        <blockquote>
            Another question
        </blockquote>
        <!-- end question 2-->


         <!--answer 2-->
        <div><p>
            Another answer. <i>Italic</i>. <b>Bold</b>. <code>Code</code>.
        </p></div>
        <!--end answer 2-->


    <!-------------section 2------------->

        <!--section title-->
        <div class="tt"><span>
            section 2 title
        </span></div>
        <!--end section title-->

        <div class="text">

        <!--question 1-->
        <blockquote>
            Question with non-collapsible answer.
        </blockquote>
        <!-- end question 1-->

         <!--answer 1-->
         <!--to make your answer non-collapsible, delete the <div> and </div> tags, but keep <p> and </p> like so:-->

        <p>
            Phasellus non massa eleifend, commodo diam sed, sodales turpis. Suspendisse congue, nunc eget mollis vehicula, odio metus rhoncus velit, sit amet lacinia dolor ex ac risus.
        </p>

        <!--end answer 1-->


        <!--question 2-->
        <blockquote>
            Lorem ipsum
        </blockquote>
        <!-- end question 2-->

         <!--answer 2-->
        <div><p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam elementum enim eu quam congue, nec maximus lacus viverra. Duis eu posuere nisl. In porttitor lacinia mollis. Praesent hendrerit enim in ante aliquet facilisis. Fusce tempor eu nibh ac ornare. Fusce imperdiet erat eu libero sodales accumsan. Aenean quam leo, tempus id erat non, elementum malesuada nisl.
        </p></div>
        <!--end answer 2-->

        </div>


    <!-------------section 3------------->

        <!--section title-->
        <div class="tt"><span>
            section 3 title
        </span></div>
        <!--end section title-->


        <!--no question = no collapsible answer-->
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam elementum enim eu quam congue, nec maximus lacus viverra. Duis eu posuere nisl. In porttitor lacinia mollis.
        </p>
        <!--end non-collapsible content-->


    <!-------------section askbox------------->

        <!--section title-->
        <div class="tt"><span>
            inquire
        </span></div>
        <!--end section title-->


        <blockquote class="inquire">
            Put some info here.
        </blockquote>


    <!-------------no editing beyond this line------------->

        <p><iframe frameborder="0" height="190" id="ask_form" scrolling="yes" src="http://www.tumblr.com/ask_form/{name}.tumblr.com" width="100%" style="background-color: transparent; overflow: hidden;"></iframe>&nbsp;&nbsp;</p>

    </section>


</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><script>$(document).ready(function(){$("blockquote + div").hide();$("blockquote").click(function(){$(this).next("div").slideToggle(500);});});</script><div class="sco">© Page by <a href="http://felinum.tumblr.com">felinum</a></div><script src="http://static.tumblr.com/0cdn90j/glvnidntk/jquery.style-my-tooltips.js"></script><script>(function($){$(document).ready(function(){$("[title]").style_my_tooltips({tip_follows_cursor:true,tip_delay_time:0,tip_fade_speed:0,attribute:"title"});});})(jQuery);</script>

</body>
</html>