Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <head><title>{Title}</title>
- <link rel="shortcut icon" href="{Favicon}">
- <link href='https://fonts.googleapis.com/css?family=Quicksand:400,700|Codystar' rel='stylesheet' type='text/css'>
- <!--
- SUMIKKO FAQ PAGE THEME BY COCORINI (https://cocorini.tumblr.com).
- PLEASE DON'T REMOVE THE CREDITS. THANK YOU!
- Edit your content under '<body>' (Use the CTRL + F [Windows] or Command + F [Mac] to find it).
- PATTERNS: https://www.cocorini.tumblr.com
- IMAGES: https://www.san-x.co.jp
- -->
- <style type="text/css">
- @font-face {font-family: "tinytots";src: url('https://dl.dropboxusercontent.com/u/54526653/tinytots.TTF');}
- /* BACKGROUND */
- body {
- background-image: url('https://41.media.tumblr.com/31885ce96fe953c6aa71745d33bcd9b0/tumblr_inline_nlocwrEnvo1rnjuep_500.png');
- background-attachment: fixed;
- font-family: 'Quicksand', sans-serif;
- font-size: 12px;
- }
- ::-webkit-scrollbar-thumb:vertical {
- background-color: #eed7bd;
- height: auto;
- }
- ::-webkit-scrollbar-thumb:horizontal {
- background-color: #eed7bd;
- height: auto;
- }
- ::-webkit-scrollbar {
- height: 3px;
- width: 3px;
- background-color: #fcfafb;
- }
- ::selection {
- background: #f6e9d2;
- color: #da915b;
- }
- ::-moz-selection {
- background: #f6e9d2;
- color: #da915b;
- }
- p::selection {
- background: #f6e9d2;
- color: #da915b;
- }
- p::-moz-selection {
- background: #f6e9d2;
- color: #da915b;
- }
- /* BACKGROUND - BORDER */
- #top {
- position: fixed;
- top: 0px;
- width: 100%;
- height: 20px;
- background-color: #f8b79e;
- }
- #left {
- position: fixed; top: 0px;
- left: 0px;
- width: 20px;
- height: 100%;
- background-color: #f8b79e;
- z-index: 999;
- }
- #right {
- position: fixed;
- right: 0px;
- top: 0px;
- width: 20px;
- height: 100%;
- background-color: #f8b79e;
- z-index: 999;
- }
- #bottom {
- position: fixed;
- bottom: 0px;
- width: 100%;
- height: 20px;
- background-color: #f8b79e;
- z-index: -1;
- }
- #bottomimg {
- position: fixed;
- bottom: 15px;
- z-index: -1;
- }
- /* MAIN CONTENT - DESIGN */
- #container {
- margin: auto;
- width: 525px;
- margin-top: 150px;
- }
- #content {
- width: 525px;
- height: 400px;
- background-color: #fff;
- border-radius: 12px;
- background-image: url('https://41.media.tumblr.com/75af436d9cf8833df3f2f8f4b155c2b0/tumblr_inline_nloy1xx8k01rnjuep_500.png');
- border: 5px solid #fbd2be;
- }
- #attic {
- position: fixed;
- margin-top: -98px;
- margin-left: -10px;
- }
- #return {
- position: fixed;
- margin-left: 400px;
- margin-top: -40px;
- }
- #return img {
- max-width: 40px;
- }
- #returnlink {
- position: fixed;
- margin-top: -30px;
- margin-left: -65px;
- }
- #returnlink a {
- display: inline-block;
- padding: 5px;
- background-color: #f0baa6;
- color: #fff;
- font-family: 'tinytots';
- text-decoration: none;
- font-size: 8px;
- text-transform: uppercase;
- letter-spacing: 1px;
- }
- #arrow {
- position: fixed;
- margin-top: -28px;
- margin-left: -16px;
- font-size: 11px;
- color: #f0baa6;
- -webkit-transform: rotate(270deg);
- -moz-transform: rotate(270deg);
- -o-transform: rotate(270deg);
- }
- #rightimg {
- position: fixed;
- margin-left: 523px;
- margin-top: 110px;
- }
- #title {
- position: fixed;
- margin-left: 270px;
- margin-top: 10px;
- width: 210px;
- border-radius: 10px;
- background-color: #f0baa6;
- box-shadow: 0px 0px 0px 5px #f0baa6;
- border: 2px dashed #fff;
- font-family: 'Codystar', sans-serif;
- padding: 10px 15px 10px 15px;
- text-align: center;
- letter-spacing: 10px;
- color: #fff;
- font-size: 22px;
- }
- #faq {
- position: fixed;
- margin-top: 80px;
- width: 500px;
- height: 310px;
- overflow: auto;
- padding: 0px 10px 10px 10px;
- }
- /* MAIN CONTENT - ASK (There's 4 different styles) */
- #icon img {
- float: left;
- margin: 8px 10px 5px 5px;
- max-width: 50px;
- }
- #ask1, #ask2, #ask3, #ask4 {
- width: 400px;
- padding: 10px;
- margin: 10px 0px 10px 70px;
- font-size: 12px;
- letter-spacing: 1px;
- min-height: 25px;
- border-radius: 10px;
- line-height: 18px;
- }
- #ask1 a, #ask2 a, #ask3 a, #ask4 a {
- color: #3bc9df;
- text-decoration: none;
- border-bottom: 1px solid #c5e4e9;
- }
- /* ASK STYLE 1 -- Penguin (GREEN) */
- #ask1 {
- background-color: #f4f9eb;
- box-shadow: 0px 0px 0px 3px #f4f9eb;
- border: 2px dashed #c5e395;
- color: #599d46;
- }
- #ask1 b, strong {
- font-weight: 700;
- color: #43a27f;
- }
- #ask1 i, em {
- color: #9cb030;
- }
- /* ASK STYLE 2 -- White Bear (PINK) */
- #ask2 {
- background-color: #fbf0ed;
- box-shadow: 0px 0px 0px 3px #fbf0ed;
- border: 2px dashed #f9bebe;
- color: #ca6970;
- }
- #ask2 b, strong {
- font-weight: 700;
- color: #f0848b;
- }
- #ask2 i, em {
- color: #f3618a;
- }
- /* ASK STYLE 3 -- Cat (YELLOW) */
- #ask3 {
- background-color: #faf8e1;
- box-shadow: 0px 0px 0px 3px #faf8e1;
- border: 2px dashed #f6d4b1;
- color: #afa63c;
- }
- #ask3 b, strong {
- font-weight: 700;
- color: #efae6b;
- }
- #ask3 i, em {
- color: #c4a30a;
- }
- /* ASK STYLE 4 -- Tonkatsu (ORANGE) */
- #ask4 {
- background-color: #fef6e9;
- box-shadow: 0px 0px 0px 3px #fef6e9;
- border: 2px dashed #f4cc8c;
- color: #c19975;
- }
- #ask4 b, strong {
- font-weight: 700;
- color: #e0883a;
- }
- #ask4 i, em {
- color: #cb7c6a;
- }
- /* MAIN CONTENT - ANSWER */
- #answer {
- width: 470px;
- background-color: #fff;
- box-shadow: 0px 0px 0px 3px #fff;
- border: 2px dashed #fcd2c2;
- padding: 10px;
- margin: 15px 0px 0px 0px;
- font-size: 12px;
- letter-spacing: 1px;
- min-height: 25px;
- border-radius: 10px;
- line-height: 18px;
- color: #877f7b;
- }
- #answer b, strong {
- font-weight: 700;
- color: #b4857c;
- }
- #answer i, em {
- color: #b9a775;
- }
- #answer a {
- color: #3bc9df;
- text-decoration: none;
- border-bottom: 1px solid #c5e4e9;
- }
- #credit a {
- position: fixed;
- right: 25px;
- bottom: 25px;
- font-size: 10px;
- color: #9d856e;
- z-index: 9999;
- text-shadow: 1px 1px 1px #fff;
- text-decoration: none;
- }
- </style>
- </head><body>
- <div id="top"></div><div id="left"></div><div id="right"></div><div id="bottom"></div><div id="bottomimg"><img src="https://40.media.tumblr.com/c67fb933f3c9c779765b0bff4857285a/tumblr_nloc5mUQB41ru3nbdo2_r1_1280.png"></div>
- <div id="container">
- <div id="content">
- <div id="attic"><img src="https://40.media.tumblr.com/77b377a04202c665f56ebb3d41b50169/tumblr_inline_nlpsyaucPn1rnjuep_500.png"></div>
- <div id="return"><img src="https://40.media.tumblr.com/2e169bfaf8f93704f41e467c65ea1103/tumblr_inline_nlq6qpMOIY1rnjuep_500.png">
- <div id="arrow">▼</div>
- <div id="returnlink"><a href="/">return?</a></div>
- </div>
- <div id="rightimg"><img src="https://41.media.tumblr.com/8023d399f51f7e05537240fc69958a4e/tumblr_inline_nlpzvumXaR1rnjuep_500.png"></div>
- <div id="title">✏ f.a.q.</div>
- <div id="faq">
- <!-- EDIT YOUR CONTENT BELOW THIS LINE -->
- <!-- QUESTION & ANSWER CODES START -->
- <!-- QUESTION & ANSWER 1 -->
- <div id="icon"><img src="https://40.media.tumblr.com/4581054423bf960b2233f0537a509ff8/tumblr_inline_nloxylpPzi1rnjuep_500.png"></div>
- <div id="ask1">
- <b>Question:</b> This is a <i>question</i>.
- </div>
- <div id="answer">
- <b>Answer:</b> This is your answer to the question. Here is a <a href="">link</a>.
- </div>
- <br>
- <!-- QUESTION & ANSWER 2 -->
- <div id="icon"><img src="https://40.media.tumblr.com/082b0cb3155d3edb4d32185b1ca35f53/tumblr_inline_nlpwzpH1iM1rnjuep_500.png"></div>
- <div id="ask2">
- <b>Question:</b> This is a <i>question</i>.
- </div>
- <div id="answer">
- <b>Answer:</b> This is your answer to the question. Here is a <a href="">link</a>.
- </div>
- <br>
- <!-- QUESTION & ANSWER 3 -->
- <div id="icon"><img src="https://40.media.tumblr.com/c1859c327b55dc0b6106116e32cb2ffb/tumblr_inline_nlpyacSBCs1rnjuep_500.png"></div>
- <div id="ask3">
- <b>Question:</b> This is a <i>question</i>.
- </div>
- <div id="answer">
- <b>Answer:</b> This is your answer to the question. Here is a <a href="">link</a>.
- </div>
- <br>
- <!-- QUESTION & ANSWER 4 -->
- <div id="icon"><img src="https://36.media.tumblr.com/830c0693c3c8993525188bbb0ab83bdd/tumblr_inline_nlpyl1jHWY1rnjuep_500.png"></div>
- <div id="ask4">
- <b>Question:</b> This is a <i>question</i>.
- </div>
- <div id="answer">
- <b>Answer:</b> This is your answer to the question. Here is a <a href="">link</a>.
- </div>
- <br>
- <!-- QUESTION & ANSWER CODES END -->
- <!-- TO ADD MORE QUESTIONS: There are 4 different styles of ask, so to keep the design consistent you must copy the entire Question & Answer 1, 2, 3 and 4 codes and paste them below this line -->
- <br> <!-- IMPORTANT! PLEASE KEEP THIS HERE -->
- <!-- ASK BOX CODE -->
- <!-- In the following part where you see this: 'https://www.tumblr.com/ask_form/YOUR-USER-NAME', change YOUR-USER-NAME to your own URL name so that the ask box works for your blog (must have the ask feature enabled on your blog) -->
- <iframe frameborder="0" scrolling="no" width="500" height="190" src="https://www.tumblr.com/ask_form/YOUR-USER-NAME" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe>
- </div></div></div> <!-- IMPORTANT! PLEASE KEEP THIS HERE -->
- <div id="credit"><a href="https://cocorini.tumblr.com" target="_blank">☂</a></div> <!-- PLEASE LEAVE THIS HERE. THANK YOU -->
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement