{FAQ:1} Sunset

<!--
    // {FAQ:1}

      Sunset

    by espoirthemes //

    + basic html and css knowledge is required to customize this page
    + follow the instructions in the code to help you make edits
    + please do not move or remove the credit


-->


<!DOCTYPE html>

<html>

<head>


<!--change FAQ to whatever you want the title to be -->
  <title>FAQ</title>
<link rel="shortcut icon" href="{Favicon}">
   <link href="https://fonts.googleapis.com/css?family=ABeeZee" rel="stylesheet">
<link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">
</head>


<style type="text/css">


/* body styling */
body {
         margin: 0;
        font-family: ABeeZee, sans-serif;
        /* if you want to change the background a single color or image, replace the background line with this:
        background: #f8f8f8 url('');
        */
        background: linear-gradient(to bottom, #74819D, #FCA699, #F8D28B);
        background-attachment: fixed;
        word-wrap: break-word;
        font-size: 16px; /* please keep the font size above 12px */
        overflow-x:hidden;
        color: #151515;

}

/*links*/

a {
    color:#FEF0A5; /* color of the links */
    text-decoration: none; /* removes default underline */
}

/* ask sections */
article {
    position:relative;
    width:40%; /* you can change this to make the overall size of the sections bigger or smaller */
    color:white;
    margin:100px auto;
}

/* Question bubble */

.bubble {
    position:relative;
    background:rgba(0,0,0,.098); /* semi transparent black background */
    padding:20px; /* change space around edges */
    width:50%;
    transform:translate(20%,0); /* do not touch this, it's important to the positioning */
    border-radius:10px; /* erase this if you do not want rounded corners */
    border-top-left-radius:0px;

}

/* question icon */

.bubble span {
    color:rgba(255,255,255,.8);
    border-radius:100%; /* erase this if you want it to be a square */
    transform:translate(-60px, -12px);
    padding:4px 4px 0px 4px;
    border:2px solid rgba(255,255,255,.8); /* border around icon */
   position:absolute;
}

/* Answer bubble */

.bubbleb {
    position:relative;
    background:rgba(0,0,0, .098);
    padding:20px;
    transform:translate(20%, 0);
    margin:20px auto;
    width:50%;
    border-radius:10px;
    border-top-right-radius:0px;

}

.bubbleb span {
    color:rgba(255,255,255,.8);
    border-radius:100%;
    right:0px;
    transform:translate(40px, -12px);
    padding:6px 6px 2px 6px;
    border:2px solid rgba(255,255,255,.8);
   position:absolute;
}


/*here's where you can change the askbox's appearance*/
#askbox{position:relative; margin:100px auto; padding:10px;  width:400px; background:rgba(0,0,0,.098);}


/* top bar */
header {
    position:fixed;
    width:100%;
    top:0px;
    background:rgba(0,0,0,.04); /* semi transparent background */
    padding:20px;
}

nav a {
    margin:10px;
}

#egg { opacity:.8;left:10px; bottom:10px; position:fixed;bottom:4px;display:block; width: 14px; height: 18px; background-color:rgba(255,255,255,1); border:1px solid rgba(0,0,0,.4); -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
 z-index:4;

            }
 #egg:hover   { animation-name: egg;
    animation-duration: 1s;
    animation-iteration-count: infinite;}
    @keyframes egg{
        0%{}
        10%{transform:rotate(20deg)}
        80%{transform:rotate(-20deg)}
        100%{}
    }

  </style>

<body>

<header>
    <nav>
        <a href="http://.tumblr.com">Home</a>
        <a href="/archive">Archive</a>
        <a href="http://tumblr.com/">Dashboard</a>
        <!-- to add a link, copy and paste one of the above links, and replace the info with the new link -->
    </nav>
</header>

<!-- actual faq starts here
     to erase a question, erasae from <article> to </article>
-->

<!-- first question and answer set -->
<article>

<!-- question -->
    <div class="bubble">
    <!-- icon -->
        <span class="sf sf-question-mark"></span>
    <!-- here's where your first question goes -->
       What is the name of this page?
    </div> <!-- end question -->

    <!-- answer -->
        <div class="bubbleb">
        <!-- icon -->
        <span class="sf sf-chat-o"></span>
        <!-- here's where your answer goes -->
        This is a revamp of Faq 01.
    </div> <!-- end answer -->

</article> <!-- end q and a -->

<!-- second q and a set -->
<article>
    <!-- question -->
    <div class="bubble">
        <span class="sf sf-question-mark"></span>
        <!-- question goes here -->
        Why did you revamp it?
    </div> <!-- end question -->

    <!-- answer -->
        <div class="bubbleb">
        <span class="sf sf-chat-o"></span>
    <!-- answer goes here -->
        The font was too small, and it was the first page I ever made. The code was messy.
    </div>
</article> <!-- end q and a -->

<!-- start q and a -->
<article>
    <div class="bubble">
        <span class="sf sf-question-mark"></span>
        Where can I get this page?
    </div>

        <div class="bubbleb">
        <span class="sf sf-chat-o"></span>
        <a href="https://pastebin.com/ZeUwuzj5">This pastebin link has the code</a>
    </div>
</article> <!-- end q an a -->

<!-- template for a new question -->

<!--
    <article>
        <div class="bubble">
            <span class="sf sf-question-mark"></span>
            Question
        </div>

        <div class="bubbleb">
            <span class="sf sf-chat-o"></span>
            Answer
        </div>
    </article>
-->

<!-- askbox -->
<div id="askbox"><iframe id="ask_form" style="background-color: transparent;margin-left:200px overflow: hidden;" src="http://www.tumblr.com/ask_form/{name}.tumblr.com" frameborder="0" scrolling="no" width="400px" height="250"></iframe></div>


 <a href="http://espoirthemes.tumblr.com" title="credit"><div id="egg"></div></a>

</body>
</html>