Love Letters

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!--

    Love Letters
    FAQ page by ciralism

    ::enjoy respectfully and follow the rules!::

    //love letters is the last in a series of pages by ciralism
    //see also, Introducing Me, The Crew, Compass Rose, The Circus, and Allow Me to Introduce

    //ask box not working?
        1. make sure to change YOUR URL HERE to your actual URL
        2. make sure your ask box is enabled for this blog
-->
<head>
    <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<style type="text/css">
body {background-color:#f3f3f3;height:100%;width:100%;font-family:Lato, Helvetica,Sans-Serif;font-size:10px;}
a {font-weight:300;letter-spacing:1px;border-bottom:1px solid #eee;text-decoration:none;color:#000;-webkit-transition-duration:500ms;-moz-transition-duration:500ms;-o-transition-duration:500ms;-ms-transition-duration:500ms;transition-duration:500ms;}
a:hover {border-bottom-color:#7da8c3;}
b, em, strong {font-weight:600;}
i {font-style:italic;font-weight:400;}
pre {font-family:Inconsolas;}
blockquote {padding:13px;background-color:#eee;color:#666;font-weight:300;line-height:180%;margin-left:10px auto!important;border:1px solid #e5e5e5;}
header {width:500px;padding:20px 15px;background-color:rgba(0,0,0,.9);color:#fff;margin:70px auto 10px auto;text-align:center;text-transform:uppercase;font-weight:700;letter-spacing:3px;font-size:12px;}
section {width:500px;background-color:#fff;margin:10px auto;padding: 10px 15px 12px 15px;text-align:center;border-bottom:1px solid #e1e1e1;}
.links a {display: inline-block;width: 100px;text-transform: uppercase;font-size: 8px;border: none;letter-spacing: 2px;font-weight: 300;}
.links a:hover {font-weight:600;}
.credit {position:fixed;right:5px;bottom:5px;text-transform:uppercase;font-size:7px;font-weight:600;}
.q {text-align:left;}
.question {border:none;cursor:pointer;font-weight:600;}
.question2 {border:none;font-weight:600;}
.angle {display:inline-block;float:right;margin-top:2px;-webkit-transition-duration:500ms;-moz-transition-duration:500ms;-o-transition-duration:500ms;-ms-transition-duration:500ms;transition-duration:500ms;}
.answer,.answer2 {margin:10px 0;font-weight:300;line-height:200%;}
.asktitle {text-transform:uppercase;font-size:9px;letter-spacing:1px;font-weight:900;margin-top:10px;}
.asksub {margin-bottom:15px;font-weight:300;letter-spacing:1px;margin-top:5px;}
</style>
</head>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".answer").hide();
//toggle the componenet with class msg_body
jQuery(".question").click(function()
{
jQuery(this).next(".answer").slideToggle(600);
});});
</script>
<body>
<header>YOUR TITLE HERE <!--TITLE GOES HERE--></header>
<section>
    <div class="links">
    <a href="/">home</a>
    <a href="/">link</a>
    <a href="/">archive</a>
    <a href="http://ciralism.tumblr.com">© THEME</a><!--DO NOT REMOVE--->
    </div>
</section>

<!---QUESTION WITH HIDDEN ANSWER--->
<section class="q">
    <a class="question">Sir, how do I get to the moon?<div class="angle"><i class="fa fa-angle-down"></i></div></a>
    <div class="answer">I wish I knew, my dear! Unfortunately, I know not. Try asking <a href="http://google.com">Google</a>.</div>
</section>

<!---QUESTION WITH UNHIDDEN ANSWER--->
<section class="q">
    <div class="question2">What if I don't want my answer hidden?</div>
    <div class="answer2">That's perfectly alright! If you would like your answer to be visible without clicking on the question, simply call your answer div "answer2" instead of "answer". This is a good idea for your most important FAQ's - the things that people definitely should not miss before they send you a question.</div>
</section>

<!---SECTION CONTAINING INBOX--->
<section class="box">
    <div class="asktitle">inbox</div>
    <div class="asksub">If you've thoroughly read my FAQ, feel free to send a message!</div>
    <p><iframe frameborder="0" scrolling="no" width="100%" height="190" src="http://www.tumblr.com/ask_form/YOUR URL HERE.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]--></p>
</section>


<a class="credit" href="http://ciralism.tumblr.com">ciralism</a>
</body></html>