API tools faq
paste
Advertisement
word-bazaar

MUSE PAGE N° 2: SUMMER WINE

word-bazaar
Oct 31st, 2017
6,854
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.33 KB | None | 0 0
raw download clone embed print report
  1. <!------------------------------------------------------------------------
  2. <!------------------------------------------------------------------------
  3.  
  4. ♡ made by http://cassiopeis.tumblr.com/ ♡
  5.  
  6. - YOU MAY EDIT OR CHANGE AS MUCH AS YOU LIKE BUT
  7. !!!!! DO NOT REMOVE CREDIT !!!!!
  8.  
  9. - IF YOU HAVE A QUESTION OR SOMETHING GOES WRONG, YOU CAN MESSAGE ME AT:
  10. http://scottpilgvrim.tumblr.com/ask
  11.  
  12. PS: If you want to add a background instead of a plain color, scroll a little bit down until you see "body". paste the link to your background so that it looks like this:background: url('link of the image').
  13.  
  14. IMPORTANT: To change the pictures, it's a bit down below and not in the body !!
  15. -------------------------------------------------------------------------->
  16.  
  17. <html>
  18.  
  19. <head>
  20.  
  21.  
  22.  
  23. <title>TITLE HERE</title> <!-- Page title goes here -->
  24.  
  25. <link rel="shortcut icon" href="{Favicon}">
  26.  
  27. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  28.  
  29. <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
  30.  
  31. <link href="https://fonts.googleapis.com/css?family=Zeyada" rel="stylesheet">
  32.  
  33. <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  34.  
  35. <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
  36.  
  37. <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
  38.  
  39.  
  40. <style type="text/css">
  41.  
  42.  
  43. ::-webkit-scrollbar {width: 10px;}
  44. ::-webkit-scrollbar-track {background: #FFF;}
  45. ::-webkit-scrollbar-thumb {background: #bcbbba;}
  46.  
  47. ::selection {background: #c1b4b4; color:#FFF;}
  48. ::-moz-selection {background: #c1b4b4; color:#FFF;}
  49. ::-webkit-selection {background: #c1b4b4; color:#FFF;}
  50.  
  51.  
  52.  
  53.  
  54. body {
  55. background: url('') no-repeat center center fixed;
  56. background-color: #f8f8f8;
  57. -webkit-background-size: cover;
  58. -moz-background-size: cover;
  59. -o-background-size: cover;
  60. background-size: cover;
  61. }
  62.  
  63.  
  64.  
  65. a:link, a:active, a:visited {
  66. color: #a9a9a9;
  67. text-decoration: none;
  68. -webkit-transition-duration: 0.5s;
  69. -moz-transition-duration: 0.5s;
  70. -o-transition-duration: 0.5s;
  71. -ms-transition-duration: 0.5s;
  72. }
  73.  
  74.  
  75.  
  76. a:hover {
  77. color: #a38383;
  78. text-decoration: none;
  79. font-size:12px;
  80. -webkit-transition-duration: 0.5s;
  81. -moz-transition-duration: 0.5s;
  82. -o-transition-duration: 0.5s;
  83. -ms-transition-duration: 0.5s;
  84. }
  85.  
  86.  
  87.  
  88.  
  89. p {
  90. margin: 0px 0px 8px;
  91. }
  92.  
  93.  
  94. h1 {
  95. font-family: 'Quicksand';
  96. font-size: 12px;
  97. font-style: bold;
  98. color: #a38383;
  99. display: inline;
  100. text-transform: uppercase;
  101. font-weight: bold;
  102. }
  103.  
  104.  
  105.  
  106. h2 {
  107. font-family: 'Roboto Condensed';
  108. font-size: 13px;
  109. color: #7e7e7e;
  110. text-transform: uppercase;
  111. font-weight: bold;
  112. }
  113.  
  114.  
  115.  
  116. #entete {
  117. position: fixed;
  118. width: 700px;
  119. z-index: 2;
  120. top: 2%;
  121. left: 25%;
  122. text-align: center;
  123. font-family:'Zeyada';
  124. font-size: 70px;
  125. color: #d7c7c4;
  126. text-shadow: 2px 2px #828282;
  127. }
  128.  
  129.  
  130.  
  131. #container {
  132. width: 1080px;
  133. height: 500px;
  134. position: fixed;
  135. top: 65%;
  136. margin-top: -320px;
  137. left: 50%;
  138. margin-left: -555px;
  139. text-align: center;
  140. }
  141.  
  142.  
  143.  
  144. #barreinfo { position: absolute;
  145. background-color: #f0f0f0;
  146. height: 512px;
  147. top: 0px;
  148. left: 0px;
  149. width: 280px;
  150. border: 1px solid #d5d5d5;
  151. }
  152.  
  153.  
  154. .information { position: absolute;
  155. margin-left: 15px;
  156. width: 250px;
  157. height: 30px;
  158. top: 13px;
  159. font-family: 'Montserrat';
  160. font-size: 17px;
  161. color: #b1a5a3;
  162. text-align: left;
  163. text-transform: uppercase;
  164. text-shadow: 2px 1px #ffffff;
  165. }
  166.  
  167.  
  168.  
  169.  
  170. .donnees { position: absolute;
  171. margin-left: 15px;
  172. width: 250px;
  173. height: 450px;
  174. top: 43px;
  175. font-family: Times New Roman;
  176. font-size: 12px;
  177. color: #a0a0a0 ;
  178. text-align: justify;
  179. overflow: auto;
  180. }
  181.  
  182.  
  183.  
  184. .firstimage {
  185. margin-left: 315px;
  186. width: 300px;
  187. height: 500px;
  188. background: #f8f5f4;
  189. background-image: url('https://placehold.it/300x500'); <----Here goes the main picture-->
  190. background-repeat: no-repeat;
  191. background-color: none;
  192. border: 7px solid #e5e5e5;
  193.  
  194. }
  195.  
  196.  
  197. .secondimage:hover { opacity: 1;
  198. background-image: url('https://placehold.it/300x500'); <----Here goes the picture that appears on hover-->
  199. }
  200.  
  201.  
  202.  
  203. .secondimage { opacity: 0;
  204. background-image: url('https://placehold.it/300x500'); <----Here goes the picture that appears on hover again-->
  205. width: 300px;
  206. height: 500px;
  207. background-repeat: no-repeat;
  208. background-color: none;
  209. -webkit-transition: all 1.3s ease;
  210. -moz-transition: all 1.3s ease;
  211. -o-transition: all 1.3s ease;}
  212.  
  213.  
  214.  
  215.  
  216.  
  217.  
  218. #facts { position: absolute;
  219. background-color: #f0f0f0;
  220. height: 180px;
  221. top: 0px;
  222. left: 660px;
  223. width: 450px;
  224. border: 1px solid #d5d5d5;
  225. }
  226.  
  227.  
  228.  
  229.  
  230.  
  231.  
  232. .faits { position: absolute;
  233. width: 225px;
  234. height: 140px;
  235. left: 44%;
  236. top: 37px;
  237. font-family: 'Quicksand';
  238. font-size: 12px;
  239. color: #a0a0a0 ;
  240. text-align: left;
  241. overflow: auto;
  242. text-transform: uppercase;
  243. }
  244.  
  245.  
  246. .lignegrise { position: absolute;
  247. width: 200px;
  248. height: 100px;
  249. left: 37%;
  250. top: 50px;
  251. font-family: 'Quicksand';
  252. font-size: 15px;
  253. color: #686868 ;
  254. text-align: justify;
  255. border-left: 1px solid #B5B5B5;
  256. }
  257.  
  258.  
  259. .nav { position: absolute;
  260. width: 165px;
  261. height: 140px;
  262. left: 5%;
  263. top: 45px;
  264. font-family: 'Quicksand';
  265. font-size: 12px;
  266. color: #686868 ;
  267. text-align: left;
  268. line-height: 130%;
  269. text-transform: uppercase;
  270. }
  271.  
  272.  
  273.  
  274.  
  275. .titrenavigation { position: absolute;
  276. width: 300px;
  277. height: 30px;
  278. left: 20px;
  279. top: 10px;
  280. font-family: 'Montserrat';
  281. font-size: 17px;
  282. color: #b1a5a3;
  283. text-align: left;
  284. text-transform: uppercase;
  285. text-shadow: 2px 1px #ffffff;
  286. }
  287.  
  288.  
  289.  
  290.  
  291.  
  292.  
  293. #bio{ position: absolute;
  294. background-color: #f0f0f0;
  295. width: 450px;
  296. height: 300px;
  297. top: 42.5%;
  298. left: 660px;
  299. border: 1px solid #d5d5d5;
  300. }
  301.  
  302.  
  303.  
  304.  
  305.  
  306. .titre { position: absolute;
  307. width: 450px;
  308. height: 130px;
  309. top: 0.5cm;
  310. left: 23px;
  311. font-family: 'Montserrat';
  312. font-size: 17px;
  313. color: #b1a5a3;
  314. text-align: left;
  315. text-transform: uppercase;
  316. text-shadow: 2px 1px #ffffff;
  317. }
  318.  
  319.  
  320.  
  321.  
  322.  
  323. .description { position: absolute;
  324. width: 400px;
  325. height: 218px;
  326. top: 1.5cm;
  327. left: 25px;
  328. font-family: Times;
  329. font-size: 12px;
  330. color: #737373 ;
  331. overflow: auto;
  332. text-align:justify;
  333. }
  334.  
  335.  
  336.  
  337.  
  338.  
  339. #credit a {opacity: 0.4;
  340. background-color: #c9c9c9;
  341. text-align: center;
  342. padding:2px;
  343. position:fixed;
  344. right:20px;
  345. font-size: 20px;
  346. bottom:20px;
  347. width: 25px;
  348. height: 25px;
  349. display: black;
  350. color: white;
  351. font-style: bold;
  352. font-family: 'Quicksand';
  353. border:1px solid white;
  354. border-radius: 25px;
  355. -moz-transition-duration:0.5s;
  356. -webkit-transition-duration:0.5s;
  357. -o-transition-duration:0.5s;
  358. }
  359.  
  360.  
  361.  
  362. #credit a:hover{opacity:1;
  363. background-color: #e1e1e1 ;
  364. text-align: center;
  365. position:fixed;
  366. right:20px;
  367. bottom:25px;
  368. color: white ;
  369. border:1px solid white;
  370. }
  371.  
  372.  
  373.  
  374.  
  375.  
  376. </style>
  377. </head>
  378.  
  379. <body>
  380.  
  381. <div id="entete">Name / Title</div><!-- Name or Title of the page -->
  382.  
  383.  
  384. <div id="container">
  385. <div id="barreinfo">
  386.  
  387. <div class="information">Information</div><!-- Title of the box on the left -->
  388.  
  389.  
  390.  
  391.  
  392.  
  393. <div class="donnees">
  394.  
  395. <!-- Below, you have the categories of the Information box on the left. To add a new category, copy the paragraph below from "Beginning of the category" to "End of the category"-->
  396.  
  397.  
  398.  
  399. <!-- Beginning of the category -->
  400. <p><h2>GENERAL</h2></p>
  401.  
  402. <p><h1>• FULL NAME </h1>. . . . . . . . . . . . . . This is an answer</p>
  403. <p><h1>• NICKNAME </h1>. . . . . . . . . . . . . . . This is an answer</p>
  404. <p><h1>• ORIENTATION </h1>. . . . . . . . . . . . This is an answer</p>
  405. <p><h1>• RELIGION</h1> . . . . . . . . . . . . . . . . This is an answer</p>
  406. <p><h1>• CURRENT LOCATION</h1> . . . . . This is an answer</p>
  407. <p><h1>• SOCIAL CLASS</h1> . . . . . . . . . . . This is an answer</p>
  408. <p><h1>• SPOKEN LANGUAGES</h1> . . . . This is an answer</p>
  409. <br>
  410. <!-- End of the category -->
  411.  
  412.  
  413.  
  414.  
  415. <p><h2>FAMILY</h2></p>
  416.  
  417.  
  418. <p><h1>• MOTHER</h1> . . . . . . . . . . . . . . . . . This is an answer</p>
  419. <p><h1>• FATHER</h1> . . . . . . . . . . . . . . . . . . This is an answer</p>
  420. <p><h1>• BROTHER(S)</h1> . . . . . . . . . . . . . This is an answer</p>
  421. <p><h1>• SISTER(S)</h1> . . . . . . . . . . . . . . . . This is an answer</p>
  422. <p><h1>• PET(S)</h1> . . . . . . . . . . . . . . . . . . . This is an answer</p>
  423. <br>
  424.  
  425.  
  426.  
  427.  
  428. <p><h2>PHYSICALLY</h2></p>
  429.  
  430.  
  431. <p><h1>• FACE CLAIM</h1> . . . . . . . . . . . . . . This is an answer</p>
  432. <p><h1>• HAIR COLOR</h1> . . . . . . . . . . . . . This is an answer</p>
  433. <p><h1>• EYE COLOR</h1> . . . . . . . . . . . . . . This is an answer</p>
  434. <p><h1>• TATOO(S)</h1> . . . . . . . . . . . . . . . . This is an answer</p>
  435. <p><h1>• SCAR(S)</h1> . . . . . . . . . . . . . . . . . This is an answer</p>
  436. <br>
  437.  
  438.  
  439.  
  440. <p><h2>PERSONALITY</h2></p>
  441.  
  442. <p><h1>• QUALITIES</h1> . . . . . . . . . . . . . . . This is an answer</p>
  443. <p><h1>• FLAWS</h1> . . . . . . . . . . . . . . . . . . . This is an answer</p>
  444. <p><h1>• MBTI</h1> . . . . . . . . . . . . . . . . . . . . This is an answer</p>
  445. <p><h1>• MORAL ALIGNMENT</h1> . . . . . . This is an answer</p>
  446. <p><h1>• ENNEAGRAM</h1> . . . . . . . . . . . . . This is an answer</p>
  447. <p><h1>• LIKES</h1> . . . . . . . . . . . . . . . . . . . . This is an answer</p>
  448. <p><h1>• DISLIKES</h1> . . . . . . . . . . . . . . . . . This is an answer</p>
  449.  
  450.  
  451.  
  452. </div>
  453.  
  454.  
  455.  
  456.  
  457. </div>
  458. <div class="firstimage">
  459. <div class="secondimage"></div>
  460. </div>
  461.  
  462.  
  463.  
  464.  
  465. <div id="facts">
  466.  
  467. <div class="titrenavigation">Navigation</div> <!-- Title of the box on the right at the top -->
  468.  
  469.  
  470. <div class="nav">
  471.  
  472.  
  473.  
  474. <p><a href="/"><i class="fa fa-home" aria-hidden="true"></i> HOME</a></p> <!-- Link here -->
  475.  
  476. <p><a href="/"><i class="fa fa-bars" aria-hidden="true"></i> HERE'S A LINK</a></p> <!-- Link here -->
  477.  
  478. <p><a href="/"><i class="fa fa-folder-open" aria-hidden="true"></i> HERE'S A LINK</a></p><!-- Link here -->
  479.  
  480. <p><a href="/"><i class="fa fa-envelope-o" aria-hidden="true"></i> HERE'S A LINK</a></p><!-- Link here -->
  481.  
  482. <p><a href="/"><i class="fa fa-book" aria-hidden="true"></i> HERE'S A LINK</a></p><!-- Link here -->
  483.  
  484.  
  485.  
  486. </div>
  487.  
  488.  
  489.  
  490. <div class="lignegrise"></div>
  491.  
  492.  
  493. <div class="faits"> <!-- You can change the basic info here -->
  494. <p><h1>• NAME </h1> Your answer</p>
  495. <p><h1>• AGE</h1> Your answer</p>
  496. <p><h1>• NATIONALITY</h1> Your answer</p>
  497. <p><h1>• STATUS</h1> Your answer</p>
  498. <p><h1>• OCCUPATION</h1> Your answer</p>
  499.  
  500. </div>
  501. </div>
  502.  
  503.  
  504.  
  505. <div id="bio">
  506.  
  507.  
  508. <div class="titre">Biography</div><!-- Title of the box on the right at the bottom -->
  509.  
  510.  
  511. <div class="description">
  512. <!-- Here goes your character bio ! Make it as long as you like -->
  513.  
  514.  
  515. Powder fruitcake candy canes. Candy tootsie roll gummies icing chocolate bar. Caramels pie cupcake. Jelly jelly beans sesame snaps. Soufflé toffee jujubes gummi bears chocolate bar bonbon jelly pudding brownie. Donut tootsie roll bonbon gummies. Oat cake cupcake dessert lollipop halvah. Toffee cupcake chocolate bar. Powder pie cupcake donut bear claw jelly beans jujubes dragée. Bear claw gingerbread jelly. Caramels pastry oat cake bonbon. Chocolate bar danish croissant chocolate bar croissant halvah marzipan lollipop bear claw. Bonbon oat cake bear claw cupcake.
  516.  
  517. <br><br>
  518.  
  519. Tootsie roll tootsie roll tootsie roll marzipan dessert chupa chups. Jelly-o croissant lemon drops biscuit sesame snaps liquorice pie powder. Cookie chupa chups brownie sugar plum candy gummi bears fruitcake topping. Apple pie jujubes tart topping oat cake powder pastry cake dessert. Powder cookie chupa chups dragée. Dessert jelly beans pastry pudding pastry dragée. Cupcake jelly chupa chups bonbon oat cake icing tart toffee marshmallow. Chocolate cake gummies gingerbread gummies fruitcake jelly-o. Muffin jelly bonbon macaroon cake danish. Muffin jujubes cupcake chocolate. Sesame snaps biscuit ice cream macaroon. Croissant pastry cheesecake caramels cupcake topping candy canes topping carrot cake. Muffin apple pie pastry icing chupa chups liquorice tart. Bear claw topping fruitcake bonbon jelly beans.
  520.  
  521. <br><br>
  522.  
  523. Cheesecake muffin jujubes. Gingerbread wafer caramels gummies brownie tiramisu oat cake powder. Sugar plum fruitcake topping chocolate bar tiramisu candy canes sugar plum icing marzipan. Cookie carrot cake tootsie roll. Wafer chocolate cake powder cake jelly. Ice cream cake toffee. Chocolate chocolate cake macaroon apple pie. Pie cheesecake sweet roll marshmallow gummi bears tootsie roll tart marshmallow pudding. Cookie gummies candy oat cake apple pie. Lollipop chocolate pie. Pudding danish dragée. Cheesecake sesame snaps cupcake muffin carrot cake. Chocolate cake fruitcake oat cake dragée chocolate cake gummi bears cheesecake bonbon marzipan. Cake chocolate chocolate cake tiramisu cheesecake macaroon.</div>
  524. </div>
  525.  
  526.  
  527. <!-- Credits. Don't. Change. Or. Delete. Thanks ;) -->
  528. <div id="credit">
  529. <p><a href="http://cassiopeis.tumblr.com/">C</a></p>
  530. </a></div>
  531.  
  532.  
  533.  
  534.  
  535. </body>
  536. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!