API tools faq
paste
word-bazaar

MUSE PAGE N°5 – SANDCASTLE

word-bazaar
Apr 25th, 2020
983
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.18 KB | None | 0 0
raw download clone embed print report
  1. <!------------------------------------------------------------------------
  2. <!------------------------------------------------------------------------
  3.  
  4. MUSE PAGE — SANDCASTLE
  5.  
  6. ♡ made by http://cassiopeis.tumblr.com/ ♡
  7.  
  8. - YOU MAY EDIT OR CHANGE AS MUCH AS YOU LIKE BUT
  9. !!!!! DO NOT REMOVE CREDIT !!!!!
  10.  
  11. - IF YOU HAVE A QUESTION OR SOMETHING GOES WRONG, YOU CAN MESSAGE ME AT:
  12. http://cassiopeis.tumblr.com/
  13.  
  14. 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').
  15.  
  16.  
  17. -------------------------------------------------------------------------->
  18.  
  19.  
  20. <html>
  21. <head>
  22.  
  23. <title>PAGE 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/css2?family=Abril+Fatface&display=swap" rel="stylesheet">
  30.  
  31. <style type="text/css">
  32.  
  33.  
  34. ::-webkit-scrollbar {width: 10px;}
  35. ::-webkit-scrollbar-track {background: #e3e3e0;}
  36. ::-webkit-scrollbar-thumb {background: #2c2c2c;}
  37.  
  38. ::selection {background: #282828; color:white;}
  39. ::-moz-selection {background: #282828; color: white;}
  40. ::-webkit-selection {background: #282828; color:white;}
  41.  
  42.  
  43.  
  44. a {
  45. color: #484848 ;
  46. text-decoration: none;
  47. -webkit-transition: all .3s ease-out;
  48. -moz-transition: all .3s ease-out;
  49. -ms-transition: all .3s ease-out;
  50. -o-transition: all .3s ease-out;
  51. transition: all .3s ease-out;
  52. }
  53.  
  54.  
  55.  
  56. body {
  57. background-color: #f1eee6;
  58. font-size: 9px;
  59. font-family: Times;
  60. }
  61.  
  62.  
  63.  
  64. #headerbox {
  65. background-color: #f1eee6;
  66. width: 1080px;
  67. height: 170px;
  68. position: fixed;
  69. top: 0px;
  70. z-index: 9999999;
  71. left: 50%;
  72. margin-left: -555px;
  73. text-align: center;
  74. }
  75.  
  76.  
  77.  
  78. .title {
  79. position: fixed;
  80. z-index: 99999999;
  81. width: 700px;
  82. top: -25px;
  83. margin-left: 50px;
  84. text-align: left;
  85. text-transform: uppercase;
  86. font-family: 'Abril Fatface', cursive;
  87. font-size: 150px;
  88. color: black;
  89. letter-spacing: 5px;
  90. }
  91.  
  92.  
  93.  
  94. .navigation a {
  95. margin-left: 20px;
  96. position: fixed;
  97. text-align: justify;
  98. font-family: Times;
  99. color: black;
  100. z-index: 999999999;
  101. height: 35px;
  102. background-image: url("https://66.media.tumblr.com/708b870b50e16a14735a2dbcdc2db21d/tumblr_olv0zt7QxX1s1bwvio1_r1_500.gif");
  103. width: 35px;
  104. border-radius: 100%;
  105. color: white;
  106. -moz-transition-duration:0.2s;
  107. -webkit-transition-duration:0.2s;
  108. -o-transition-duration:0.2s;
  109. }
  110.  
  111.  
  112.  
  113. .navigation a:hover {
  114. margin-left: 20px;
  115. color: #f1eee6;
  116. -moz-transition-duration:0.2s;
  117. -webkit-transition-duration:0.2s;
  118. -o-transition-duration:0.2s;
  119. }
  120.  
  121.  
  122.  
  123. .navigation i {
  124. padding-top: 9px;
  125. padding-left: 11px;
  126. }
  127.  
  128.  
  129.  
  130. .navilink1 {
  131. margin-top: -20px;
  132. margin-left: 200px;
  133. font-size: 16px;
  134. }
  135.  
  136.  
  137.  
  138. .navilink2 {
  139. margin-top: 65px;
  140. margin-left: 320px;
  141. font-size: 15px;
  142. }
  143.  
  144.  
  145.  
  146. .navilink3 {
  147. margin-top: 65px;
  148. margin-left: 440px;
  149. font-size: 13px;
  150. }
  151.  
  152.  
  153.  
  154. .navilink4 {
  155. margin-top: 65px;
  156. margin-left: 560px;
  157. font-size: 14px;
  158. }
  159.  
  160.  
  161.  
  162. .subquote {
  163. text-align: left;
  164. font-family: Times;
  165. font-size: 13px;
  166. letter-spacing: 0.4px;
  167. margin-top: 130px;
  168. width: 355px;
  169. margin-left: 640px;
  170. z-index: 99999999;
  171. line-height: 15px;
  172. border-left: 2px solid #B5B5B5;
  173. }
  174.  
  175.  
  176.  
  177. .subquote p {padding-left: 8px;}
  178.  
  179.  
  180.  
  181. #container {
  182. position: absolute;
  183. left: 50%;
  184. margin-left: -555px;
  185. width: 1110px;
  186. top: 65%;
  187. margin-top: -320px;
  188. margin-bottom: 45px;
  189. }
  190.  
  191.  
  192.  
  193. .musebox {
  194. background: #eee;
  195. width: 250px;
  196. padding: 10px;
  197. height: 90px;
  198. display: inline-block;
  199. margin: 50px;
  200. margin-top: 30px;
  201. margin-left: 50px;
  202. background-image: url("https://66.media.tumblr.com/708b870b50e16a14735a2dbcdc2db21d/tumblr_olv0zt7QxX1s1bwvio1_r1_500.gif");
  203. }
  204.  
  205.  
  206.  
  207. .musebox img {
  208. width: 110px;
  209. height: 110px;
  210. float: left;
  211. display: inline-block;
  212. margin-left: -10px;
  213. margin-right: 5px;
  214. margin-top: -10px;
  215. padding: 0px;
  216. -webkit-transition: all .4s ease-out;
  217. -moz-transition: all .4s ease-out;
  218. -ms-transition: all .4s ease-out;
  219. -o-transition: all .4s ease-out;
  220. transition: all .4s ease-out;
  221. }
  222.  
  223.  
  224.  
  225. .musebox img:hover {
  226. -webkit-transition: all .4s ease-out;
  227. -moz-transition: all .4s ease-out;
  228. -ms-transition: all .4s ease-out;
  229. -o-transition: all .4s ease-out;
  230. transition: all .4s ease-out;
  231. filter: grayscale(100%);
  232. }
  233.  
  234.  
  235.  
  236. #name {
  237. background: #eee;
  238. font-family: Times;
  239. float: right;
  240. width: 125px;
  241. margin-left: 10px;
  242. font-weight: 400;
  243. color: #ab9292;
  244. padding: 5px;
  245. font-size: 8px;
  246. text-align: center;
  247. text-transform:uppercase;
  248. letter-spacing: 2px;
  249. }
  250.  
  251.  
  252.  
  253. #description {
  254. color: #898383;
  255. float: right;
  256. font-size: 11px;
  257. letter-spacing: 1px;
  258. font-family: Times;
  259. width: 125px;
  260. padding: 5px;
  261. margin-top: 6px;
  262. background-color: black;
  263. height: 45px;
  264. overflow: auto;
  265. text-align: justify;
  266. line-height: 12px;
  267. }
  268.  
  269.  
  270.  
  271. #credit a {
  272. position: fixed;
  273. padding: 2px;
  274. right: 20px;
  275. font-size: 11px;
  276. bottom: 20px;
  277. color: black;
  278. -moz-transition-duration:0.5s;
  279. -webkit-transition-duration:0.5s;
  280. -o-transition-duration:0.5s;
  281. }
  282.  
  283.  
  284.  
  285. #credit a:hover {
  286. position: fixed;
  287. text-align: center;
  288. right: 20px;
  289. bottom: 20px;
  290. font-style: italic;
  291. color: #b4a57c;
  292. -moz-transition-duration:0.5s;
  293. -webkit-transition-duration:0.5s;
  294. -o-transition-duration:0.5s;
  295. }
  296.  
  297.  
  298.  
  299.  
  300. </style>
  301. </head>
  302.  
  303.  
  304. <body>
  305.  
  306. <div id="headerbox">
  307. <div class="title">muses;</div>
  308.  
  309.  
  310. <div class="navigation">
  311.  
  312.  
  313. <div class="navilink1"><a href="LINK URL HERE"><i class="fa fa-home" aria-hidden="true" title="LINK TITLE HERE">&nbsp;&nbsp;</i></a></div><!-- navigation link 1 -->
  314.  
  315.  
  316. <div class="navilink2"><a href="LINK URL HERE"><i class="fa fa-bars" aria-hidden="true" title="LINK TITLE HERE">&nbsp;&nbsp;</i></a></div><!-- navigation link 2 -->
  317.  
  318.  
  319. <div class="navilink3"><a href="LINK URL HERE"><i class="fa fa-envelope" aria-hidden="true" title="LINK TITLE HERE">&nbsp;&nbsp;</i></a></div><!-- navigation link 3 -->
  320.  
  321.  
  322. <div class="navilink4"><a href="LINK URL HERE"><i class="fa fa-file-text" aria-hidden="true" title="LINK TITLE HERE">&nbsp;&nbsp;</i></a></div><!-- navigation link 4 -->
  323.  
  324.  
  325. </div>
  326.  
  327.  
  328. <div class="subquote">
  329.  
  330. <p>“A daily dose of daydreaming heals the heart, soothes the soul, and strengthens the imagination.”</p><!-- little quote goes here, try to keep it no longer than two lines -->
  331.  
  332. </div>
  333. </div>
  334.  
  335.  
  336.  
  337.  
  338. <div id="container">
  339.  
  340.  
  341.  
  342.  
  343. <!-- MUSE BOX BEGINS HERE -->
  344. <div class="musebox">
  345. <div id="name"> TITLE GOES HERE </div>
  346. <a href="LINK GOES HERE">
  347. <img src="https://nsa40.casimages.com/img/2020/01/19/200119015526358218.png"></a><!-- picture goes here -->
  348. <div id="description"> <!-- you can make the description as long as you wish -->
  349. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac sodales risus.
  350. </div>
  351. </div>
  352. <!-- MUSE BOX ENDS HERE -->
  353.  
  354.  
  355.  
  356.  
  357. <!-- MUSE BOX BEGINS HERE -->
  358. <div class="musebox">
  359. <div id="name"> TITLE GOES HERE </div>
  360. <a href="LINK GOES HERE">
  361. <img src="https://nsa40.casimages.com/img/2020/01/19/200119015526358218.png"></a><!-- picture goes here -->
  362. <div id="description"> <!-- you can make the description as long as you wish -->
  363. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac sodales risus.
  364. </div>
  365. </div>
  366. <!-- MUSE BOX ENDS HERE -->
  367.  
  368.  
  369.  
  370.  
  371. <!-- MUSE BOX BEGINS HERE -->
  372. <div class="musebox">
  373. <div id="name"> TITLE GOES HERE </div>
  374. <a href="LINK GOES HERE">
  375. <img src="https://nsa40.casimages.com/img/2020/01/19/200119015526358218.png"></a><!-- picture goes here -->
  376. <div id="description"> <!-- you can make the description as long as you wish -->
  377. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac sodales risus.
  378. </div>
  379. </div>
  380. <!-- MUSE BOX ENDS HERE -->
  381.  
  382.  
  383.  
  384.  
  385. <!-- MUSE BOX BEGINS HERE -->
  386. <div class="musebox">
  387. <div id="name"> TITLE GOES HERE </div>
  388. <a href="LINK GOES HERE">
  389. <img src="https://nsa40.casimages.com/img/2020/01/19/200119015526358218.png"></a><!-- picture goes here -->
  390. <div id="description"> <!-- you can make the description as long as you wish -->
  391. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac sodales risus.
  392. </div>
  393. </div>
  394. <!-- MUSE BOX ENDS HERE -->
  395.  
  396.  
  397.  
  398.  
  399. <!-- MUSE BOX BEGINS HERE -->
  400. <div class="musebox">
  401. <div id="name"> TITLE GOES HERE </div>
  402. <a href="LINK GOES HERE">
  403. <img src="https://nsa40.casimages.com/img/2020/01/19/200119015526358218.png"></a><!-- picture goes here -->
  404. <div id="description"> <!-- you can make the description as long as you wish -->
  405. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac sodales risus.
  406. </div>
  407. </div>
  408. <!-- MUSE BOX ENDS HERE -->
  409.  
  410.  
  411.  
  412.  
  413. <!-- MUSE BOX BEGINS HERE -->
  414. <div class="musebox">
  415. <div id="name"> TITLE GOES HERE </div>
  416. <a href="LINK GOES HERE">
  417. <img src="https://nsa40.casimages.com/img/2020/01/19/200119015526358218.png"></a><!-- picture goes here -->
  418. <div id="description"> <!-- you can make the description as long as you wish -->
  419. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac sodales risus.
  420. </div>
  421. </div>
  422. <!-- MUSE BOX ENDS HERE -->
  423.  
  424.  
  425.  
  426.  
  427. <!-- MUSE BOX BEGINS HERE -->
  428. <div class="musebox">
  429. <div id="name"> TITLE GOES HERE </div>
  430. <a href="LINK GOES HERE">
  431. <img src="https://nsa40.casimages.com/img/2020/01/19/200119015526358218.png"></a><!-- picture goes here -->
  432. <div id="description"> <!-- you can make the description as long as you wish -->
  433. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac sodales risus.
  434. </div>
  435. </div>
  436. <!-- MUSE BOX ENDS HERE -->
  437.  
  438.  
  439.  
  440.  
  441. <!-- MUSE BOX BEGINS HERE -->
  442. <div class="musebox">
  443. <div id="name"> TITLE GOES HERE </div>
  444. <a href="LINK GOES HERE">
  445. <img src="https://nsa40.casimages.com/img/2020/01/19/200119015526358218.png"></a><!-- picture goes here -->
  446. <div id="description"> <!-- you can make the description as long as you wish -->
  447. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac sodales risus.
  448. </div>
  449. </div>
  450. <!-- MUSE BOX ENDS HERE -->
  451.  
  452.  
  453.  
  454.  
  455. <!-- MUSE BOX BEGINS HERE -->
  456. <div class="musebox">
  457. <div id="name"> TITLE GOES HERE </div>
  458. <a href="LINK GOES HERE">
  459. <img src="https://nsa40.casimages.com/img/2020/01/19/200119015526358218.png"></a><!-- picture goes here -->
  460. <div id="description"> <!-- you can make the description as long as you wish -->
  461. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac sodales risus.
  462. </div>
  463. </div>
  464. <!-- MUSE BOX ENDS HERE -->
  465.  
  466.  
  467.  
  468.  
  469. <!-- MUSE BOX BEGINS HERE -->
  470. <div class="musebox">
  471. <div id="name"> TITLE GOES HERE </div>
  472. <a href="LINK GOES HERE">
  473. <img src="https://nsa40.casimages.com/img/2020/01/19/200119015526358218.png"></a><!-- picture goes here -->
  474. <div id="description"> <!-- you can make the description as long as you wish -->
  475. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac sodales risus.
  476. </div>
  477. </div>
  478. <!-- MUSE BOX ENDS HERE -->
  479.  
  480.  
  481.  
  482.  
  483.  
  484. </div>
  485.  
  486.  
  487.  
  488.  
  489. <!--- The is the credit. DO NO REMOVE THIS PART!!!! --->
  490. <div id="credit">
  491. <p><a href="https://cassiopeis.tumblr.com"><i class="fa fa-star fa-spin" aria-hidden="true" title="@cassiopeis"></i></a></p>
  492. </a></div>
  493.  
  494.  
  495.  
  496. </body>
  497. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!