API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jul 21st, 2019
97
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 37.28 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!------------------------
  5. THEME MADE BY RECSBYLOTTE.TUMBLR.COM
  6. ❝ Look for instructions & feel free to ask for help if something's not clear or not working properly!
  7. Don't remove credit & don't claim as your own please.
  8. Thanks, petals 😊 ❞
  9. -------------------------->
  10. <!------------------------
  11. CREDITS
  12. psd by 85milk (https://85milk.tumblr.com/post/164829882277/85milk-psd-pack-1-soft01-download)
  13. ------------------------->
  14.  
  15. <title>Big city dreams</title> <!-- Change main title here -->
  16.  
  17. <link rel="apple-touch-icon" href="{PortraitURL-128}"/>
  18. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  19.  
  20. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  21. <script type='text/javascript' src='https://static.tumblr.com/hqb6dzr/4Etm7ryn5/tooltip.js'></script>
  22. <script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  23. <script type="text/javascript">
  24. //tooltips @ acuite
  25. (function($){
  26. $(document).ready(function(){
  27. $("[title]").style_my_tooltips({
  28. tip_follows_cursor:true,
  29. tip_delay_time:200,
  30. tip_fade_speed:300
  31. }
  32. );
  33. });
  34. })(jQuery);
  35. </script>
  36.  
  37.  
  38. <style type="text/css">
  39.  
  40. /*** FONTS ***/
  41. /*** Feel free to always contact me on how to upload a font if you had one in mind, lovelies! It's really easy! ***/
  42.  
  43. @font-face {
  44. font-family: "geosanslight";
  45. src:url('https://dl.dropboxusercontent.com/s/d2hi1xu80m0kpmc/GeosansLight-Oblique.ttf');
  46. }
  47. p.geosanslight {
  48. font-family: "Geosanslight";
  49. }
  50.  
  51. @font-face {
  52. font-family: "CaliforniaHarvest";
  53. src:url('https://dl.dropboxusercontent.com/s/ncqfbkqk5hfhvbc/CaliforniaHarvest.ttf');
  54. }
  55. p.CaliforniaHarvest {
  56. font-family: "CaliforniaHarvest";
  57. }
  58.  
  59.  
  60.  
  61.  
  62. /*** SCROLLBAR ***/
  63.  
  64. ::-webkit-scrollbar {
  65. width:11px;
  66. height:11px;
  67.  
  68. }
  69.  
  70. ::-webkit-scrollbar-thumb {
  71. border:5px solid rgba(250, 250, 250, 0);
  72. background-clip:padding-box;
  73. background-color:rgba(0, 0, 0, 1);
  74. }
  75.  
  76. /*** ESSENTIALS ***/
  77.  
  78. body {
  79. background: url('https://i.imgur.com/tEvgY7O.jpg'); /**** Change picture background here by only replacing url. If you want a solid color, delete url & just type background: #fff or whatever color you want ****/
  80. background-position: center, cover;
  81. background-size: cover;
  82. background-repeat: no-repeat;
  83. background-attachment: fixed;
  84. text-align: center;
  85. margin-left:0px;
  86. margin-top:0px;
  87. overflow-x:hidden;
  88. }
  89.  
  90. #title {
  91. font-size: 70px; /*** Change size main title here ***/
  92. padding: 20px;
  93. text-transform:uppercase;
  94. margin-top: 7%;
  95. width: 480px;
  96. text-align: center;
  97. line-height: 14px;
  98. color: #fff;
  99. font-family: californiaharvest;
  100. -webkit-animation: neon1 1.5s ease-in-out infinite alternate;
  101. -moz-animation: neon1 1.5s ease-in-out infinite alternate;
  102. animation: neon1 1.5s ease-in-out infinite alternate;
  103. }
  104.  
  105. /*** Glowing neon pulse effect ***/
  106. /* Quick explanation:
  107. 1. the inner colour of your text is currently #fff. I suggest you keep this because it gives the best neon effect but if you really want to change it, just replace ALL #fff codes by the colour code you want.
  108.  
  109. 2. The colour of your glow is currently #228DFF (the blue). So if you want to change that, replace ALL of them with the colour code you want.
  110.  
  111. 3. If you do NOT want it to pulsate, you can delete this part above:
  112. -webkit-animation: neon1 1.5s ease-in-out infinite alternate;
  113. -moz-animation: neon1 1.5s ease-in-out infinite alternate;
  114. animation: neon1 1.5s ease-in-out infinite alternate;
  115. And instead, you just add:
  116. text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
  117.  
  118. 4. If you think it's too bright, just remember this glow is just built up from several shadow layers. All you have to do, is change the farthest white layer (in this case the 30px one) by replacing #fff with the colour of the glow (in this case #228DFF). To make it brighter, vice versa. Replace the first outer colour (so in this case the 40px one) with white (or whatever your inner colour is)
  119. */
  120.  
  121. @-webkit-keyframes neon1 {
  122. from {
  123. text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
  124. }
  125. to {
  126. text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
  127. }
  128. }
  129.  
  130. .title2 {
  131. font-family: Geosanslight; /**** Change font bottom title here ****/
  132. color: #fff; /**** Change colour bottom title here ****/
  133. font-size: 25px; /*** Change size bottom title here ***/
  134. padding: 10px;
  135. margin: 0 auto;
  136. text-transform: uppercase;/*** Delete if you don't want text to be uppercase automatically ***/
  137. width: 480px;
  138. line-height: 10px;
  139. text-align:center;
  140. text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF; /*** Change colour of neon glow by replacing ALL #228DFF with outer colour code ***/
  141. }
  142.  
  143.  
  144. #box{
  145. background-color: rgba(0,0,0,.5); /*** Change box background color here. LEAVE LAST NUMBER INTACT FOR TRANSPARENCY ***/
  146. filter: alpha(opacity=50); /* For IE8 and earlier */
  147. width: 800px;
  148. height: 550px;
  149. margin-top: 5%;
  150. margin-left: 23%;
  151. padding: 10px;
  152. border-radius: 7px;
  153. position:absolute;
  154. overflow:auto;
  155. overflow-x:hidden;
  156. }
  157.  
  158. #box:hover {
  159. background-color: rgba(0,0,0,.7); /*** Make this same colour as above. LEAVE LAST NUMBER INTACT FOR TRANSPARENCY ***/
  160. filter: alpha(opacity=80); /* For IE8 and earlier */
  161. -webkit-transition: all 0.3s ease-out;
  162. -moz-transition: all 0.3s ease-out;
  163. -o-transition: all 0.3s ease-out;
  164. transition: all 0.3s ease-out;
  165. }
  166.  
  167. /*** POP UP INFORMATION/GRID WINDOW ***/
  168.  
  169. .modal {
  170. display: none;
  171. width: 100%;
  172. height: 100%;
  173. position: fixed;
  174. top: 0;
  175. }
  176. .modal_bg {
  177. background: rgb(0,0,0,0.7);
  178. height: 100%;
  179. width: 100%;
  180. position: fixed;
  181. top: 0;
  182. cursor: pointer;
  183. }
  184.  
  185. .modal_main {
  186. position: relative;
  187. max-width: 500px;
  188. height: 375px;
  189. top: 35%;
  190. left: 20%;
  191. background-color: #000; /*** Change colour background pop-up window here ***/
  192. border-radius: 7px;
  193. overflow-y: auto;
  194. overflow-x: auto;
  195. padding: 10px;
  196. z-index: 1;
  197. display: none;
  198. -webkit-animation-duration: .5s;
  199. -webkit-animation-delay: .0s;
  200. -webkit-animation-fill-mode: both;
  201. -moz-animation-fill-mode: both;
  202. -o-animation-fill-mode: both;
  203. -webkit-backface-visibility: visible!important;
  204. -webkit-animation-name: fadeInRight;
  205. }
  206. @-webkit-keyframes fadeInRight
  207. {0%{opacity:0;-webkit-transform:translateX(20px)}100%{opacity:1;-webkit-transform:translateX(0)}}
  208.  
  209. .closer {
  210. position: absolute;
  211. top: 3%;
  212. right: 3%;
  213. cursor: pointer;
  214. }
  215.  
  216.  
  217.  
  218. /*** MAIN IMAGES ***/
  219.  
  220. .img__wrap {
  221. max-width: 250px;
  222. position: relative;
  223. padding: 5px;
  224. }
  225.  
  226. .image {
  227. border-radius: 7px;
  228. width: 250px;
  229. height: 150px;
  230. position: relative;
  231. background-position: 50% 50%;
  232. background-repeat: no-repeat;
  233. background-size: cover;
  234. box-shadow: 0 0 5px #fff; 0 0 10px #228DFF;
  235. }
  236.  
  237. .img__description {
  238. position: absolute;
  239. max-width: 200px;
  240. padding: 10px;
  241. top: 7%;
  242. left: 7%;
  243. text-align:center;
  244. background-color: rgba(226,226,226,.5); /*** Change background colour of description. LAST NUMBER IS FOR OPACITY ***/
  245. color: #000; /*** Change font colour for description on image ***/
  246. font-size: 30px; /*** Change font size ***/
  247. font-family: Geosanslight; /*** Change font ***/
  248. overflow: hidden;
  249. border:1px solid #000; /*** Change colour for border around description on image ***/
  250. text-shadow: 0px 0px 0.5px rgba(0,0,0,.2);
  251. text-transform:uppercase; /*** Delete if you don't want automatic uppercase ***/
  252. visibility: hidden;
  253. opacity: 0;
  254. transition: all .4s ease-out;
  255. cursor: pointer;
  256. }
  257.  
  258. .img_descriptionsub {
  259. position: absolute;
  260. max-width: 200px;
  261. padding: 5px;
  262. top: 45%;
  263. left: 20%;
  264. text-align: center;
  265. background-color: rgba(18,63,106,.6); /*** Change background colour for subdescription ***/
  266. color: #e2e2e2; /*** Change font colour for subdescription ***/
  267. font-size: 15px; /*** Change font size ***/
  268. font-family: Geosanslight; /*** Change font ***/
  269. overflow: hidden;
  270. visibility: hidden;
  271. opacity: 0;
  272. transition: all .4s ease-out;
  273. cursor: pointer;
  274. text-transform: uppercase;
  275. }
  276.  
  277.  
  278. .image:hover {
  279. position: relative;
  280. background-color: rgba(0,0,0,0.8);
  281. -webkit-filter: blur(3px); /* Safari 6.0 - 9.0 */
  282. filter: blur(3px);
  283. -webkit-transition: all .4s ease-out;
  284. -moz-transition: all .4s ease-out;
  285. -o-transition: all .4s ease-out;
  286. -ms-transition: all .4s ease-out;
  287. transition: all .4s ease-out;
  288. }
  289.  
  290.  
  291. .img__wrap:hover .img__description {
  292. visibility: visible;
  293. opacity: 1;
  294. }
  295.  
  296. .img__wrap:hover .img_descriptionsub {
  297. visibility: visible;
  298. opacity:1;
  299. }
  300.  
  301. /*** INSIDE THE POP-UP WINDOW ***/
  302. .title1 {
  303. text-align:left;
  304. color: #fff; /*** Change font color ***/
  305. font-family: californiaharvest; /*** Change font big title ***/
  306. font-size:45px; /*** Change font size ***/
  307. background: transparent;
  308. width:450px;
  309. margin-top: 5%;
  310. letter-spacing:1px;
  311. line-height:20px;
  312. height:20px;
  313. text-shadow: 0 0 10px #228DFF, 0 0 15px #228DFF;
  314. }
  315. .subtitle {
  316. text-align:center;
  317. width:450px;
  318. color: #e2e2e2; /*** Change font colour ***/
  319. font-size:15px; /*** Change font size ***/
  320. font-family: Geosanslight; /*** Change font for subtitle ***/
  321. overflow:hidden;
  322. text-transform:uppercase; /*** Delete this if you don't want automatic uppercase ***/
  323. vertical-align:middle;
  324. opacity:1;
  325. letter-spacing:.5px;
  326. word-spacing:0px;
  327. z-index:9;
  328. font-weight:500;
  329. background:transparent;
  330. border-radius:5px;
  331. text-shadow: 0px 0px 0.5px rgba(0,0,0,.2);
  332. }
  333.  
  334. /* this styles text in the subtitle that is typed in italic */
  335. .subtitle i {
  336. padding:2px;
  337. text-transform:uppercase;
  338. font-style:italic;
  339. letter-spacing:1px;
  340. line-height:90%;
  341. font-weight:500;
  342. background: rgba(34,141,255,.6);
  343. color:white;
  344. text-shadow: 0px 0px 0.5px rgba(0,0,0,.2);
  345. }
  346.  
  347. .pictures {
  348. padding:0 10px;
  349. overflow: auto;
  350. margin-bottom:10px;
  351. }
  352.  
  353. .pic {
  354. float:left;
  355. }
  356.  
  357. .pic img {
  358. width:130px;
  359. height:130px;
  360. border: 2px solid #0b243c; /*** Change colour border around images in grid ***/
  361. margin:5px;
  362. background-position: 50% 50%;
  363. background-repeat: no-repeat;
  364. background-size: cover;
  365. }
  366.  
  367. /* DELETE THIS IF YOU DON'T WANT TO ZOOM IN */
  368. .zoomin img {
  369. height: 130px;
  370. width: 130px;
  371. -webkit-transition: all 2s ease;
  372. -moz-transition: all 2s ease;
  373. -ms-transition: all 2s ease;
  374. transition: all 2s ease;
  375. }
  376. .zoomin img:hover {
  377. width: 250px; /*** Change size of how big your image gets when zooming in ***/
  378. height: 250px; /*** Make this same size as above! ***/
  379. }
  380. /* DELETE UP UNTIL HERE IF YOU DON'T WANT TO ZOOM IN */
  381.  
  382. /*** SIDELINKS ***/
  383. .sidelinks {
  384. background-color: rgba(0,0,0,.5); /*** I suggest you make this the same color as the background of your box. LEAVE LAST NUMBER FOR TRANSPARENCY ***/
  385. border-radius: 7px;
  386. padding: 5px;
  387. position: absolute;
  388. text-transform: uppercase; /*** Delete if you don't want automatic uppercase ***/
  389. top: 50%;
  390. left: 4%;
  391. height: 35px;
  392. font-size:30px; /*** Change font size ***/
  393. font-family: Geosanslight; /*** Change font ***/
  394. text-align:center;
  395. text-height: 38px;
  396. letter-spacing: 5px;
  397. -moz-transform:rotate(-90deg);
  398. -webkit-transform:rotate(-90deg);
  399. -o-transform:rotate(-90deg);
  400. -ms-transform:rotate(-90deg);
  401. transform:rotate(-90deg);
  402. }
  403.  
  404. .sidelinks a{
  405. display: inline-block;
  406. color: #fff; /*** Change colour font links when hovering over link ***/
  407. text-align:center;
  408. text-transform:uppercase; /*** Delete if you don't want automatic uppercase ***/
  409. letter-spacing:1px;
  410. font-size:30px; /*** Change font size. Make this the same as font size above ***/
  411. -webkit-transition: all 0.5s ease-in-out;
  412. -o-transition: all 0.5s ease-in-out;
  413. -ms-transition: all 0.5s ease-in-out;
  414. transition: all 0.5s ease-in-out;
  415. text-shadow: 0 0 10px #228DFF, 0 0 15px #228DFF, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
  416. }
  417.  
  418.  
  419. a{
  420. color: rgba(0,0,0,.5);;
  421. text-decoration:none;
  422. -webkit-transition: all 0.5s ease-in-out;
  423. -moz-transition: all 0.5s ease-in-out;
  424. -o-transition: all 0.5s ease-in-out;
  425. -ms-transition: all 0.5s ease-in-out;
  426. transition: all 0.5s ease-in-out;
  427. }
  428.  
  429. a:hover, a:active{
  430. color: #228DFF; /*** Change colour font when you hover over links. LEAVE LAST NUMBER FOR OPACITY. ***/
  431. text-decoration: underline; /*** Delete if you don't want to underline links when hovering over ***/
  432.  
  433. -webkit-transition: all 0.5s ease-in-out;
  434. -moz-transition: all 0.5s ease-in-out;
  435. -o-transition: all 0.5s ease-in-out;
  436. -ms-transition: all 0.5s ease-in-out;
  437. transition: all 0.5s ease-in-out;
  438.  
  439. }
  440.  
  441. /*** FLOOR INDICATIONS ***/
  442. .inbetween_title {
  443. font-family: Geosanslight; /*** Change font of inbetween titles ***/
  444. font-size: 25px; /*** Change font size ***/
  445. text-decoration: underline; /*** Delete this if you don't want to automatically underline ***/
  446. color: white; /*** Change colour font ***/
  447. padding: 20px;
  448. text-transform: uppercase; /*** Delete this if you don't want automatic uppercase ***/
  449. /*** if you want background bar, add background-color: #000; ***/
  450. }
  451.  
  452. /*Delete this if you don't want quotes from here */
  453. q {
  454. quotes: "\00BB" "\00AB";
  455. }
  456. /*Delete upon till here */
  457. /*If you want to add quotes anywhere, just use the <q> function */
  458.  
  459. /*CREDIT: Please don't remove!*/
  460. .credit{
  461. position: fixed;
  462. bottom: 2%;
  463. left:10px;
  464. text-align:center;
  465. z-index:999;
  466. max-width:45px;
  467. max-height: 45px;
  468. cursor: pointer;
  469. }
  470.  
  471. /***TOOLTIP***/
  472. #s-m-t-tooltip{
  473. position: absolute;
  474. z-index: 99999;
  475. padding: 8px;
  476. font-size: 15px;
  477. font-weight: bold;
  478. text-align: center;
  479. text-transform: uppercase;
  480. color: lightgray;
  481. font-family: Geosanslight; /* change the font */
  482. background: black;
  483. border: 1px solid lightgray;
  484. border-radius: 5px;
  485. }
  486.  
  487. /*CREDIT ENDS HERE*/
  488.  
  489. </style>
  490. </head>
  491.  
  492. <body>
  493.  
  494. <div class="sidelinks">
  495. <a href="https://recsbylotte.tumblr.com/"><b>Home</b></a>
  496. <a href="https://recsbylotte.tumblr.com/ask"><b>Inbox</b></a>
  497. <a href="https://pastebin.com/AnVD4BqC"><b>Code</b></a>
  498. <a href="https://recsbylotte.tumblr.com/allaboutspice_preview2"><b>Preview 1</b></a>
  499. </div>
  500.  
  501. <div id="box">
  502. <div id="title">A PLACE TO STAY...</div> <!-- Change main title here -->
  503. <div class="title2"><b>is a place to display</b></div> <!-- Change bottom title here -->
  504.  
  505. <p style="margin-left:5px;margin-top:10px;">
  506. <div class="inbetween_title">First floor</div>
  507.  
  508. <div class="img__wrap">
  509. <img class="image" src="https://i.imgur.com/Ti4SanE.png"/> <!--Change URL to change image of category 1-->
  510. <p class="img__description call_modal" id="call_modal1">Kitchen</p> <!-- Change title category 1 -->
  511. <p class="img_descriptionsub" id="call_modalsub1">click for more</p>
  512. </div>
  513.  
  514. <div class="img__wrap">
  515. <img class="image call_modal" src="https://i.imgur.com/MwJ87cG.png" /> <!--Change URL to change image of category 2-->
  516. <p class="img__description call_modal" id="call_modal2">Bedroom</p> <!-- Change title category 2 -->
  517. <p class="img_descriptionsub" id="call_modalsub2">click for more</p>
  518. </div>
  519.  
  520. <div class="img__wrap">
  521. <img class="image call_modal" src="https://i.imgur.com/wrKpui8.png" /> <!--Change URL to change image of category 3-->
  522. <p class="img__description call_modal" id="call_modal3">Bathroom</p> <!-- Change title category 3-->
  523. <p class="img_descriptionsub" id="call_modalsub3">click for more</p>
  524. </div>
  525.  
  526. <div class="img__wrap">
  527. <img class="image call_modal" src="https://i.imgur.com/678VWKw.png" /> <!--Change URL to change image of category 4-->
  528. <p class="img__description call_modal" id="call_modal4">Living room</p> <!-- Change title category 4-->
  529. <p class="img_descriptionsub" id="call_modalsub4">click for more</p>
  530. </div>
  531.  
  532. <div class="img__wrap">
  533. <img class="image call_modal" src="https://i.imgur.com/1RkprEY.png" /> <!--Change URL to change image of category 5-->
  534. <p class="img__description call_modal" id="call_modal5">Dressing</p> <!-- Change title category 5-->
  535. <p class="img_descriptionsub" id="call_modalsub5">click for more</p>
  536. </div>
  537.  
  538. <div class="inbetween_title">Second floor</div>
  539.  
  540. <div class="img__wrap">
  541. <img class="image call_modal" src="https://placehold.it/250x150.png" /> <!--Change URL to change image of category 6-->
  542. <p class="img__description call_modal" id="call_modal6">TBA</p> <!-- Change title category 6-->
  543. <p class="img_descriptionsub" id="call_modalsub6">click for more</p>
  544. </div>
  545.  
  546. <div class="img__wrap">
  547. <img class="image call_modal" src="https://placehold.it/250x150.png" /> <!--Change URL to change image of category 7-->
  548. <p class="img__description call_modal" id="call_modal7">TBA</p> <!-- Change title category 7-->
  549. <p class="img_descriptionsub" id="call_modalsub7">click for more</p>
  550. </div>
  551.  
  552. <div class="img__wrap">
  553. <img class="image call_modal" src="https://placehold.it/250x150.png" /> <!--Change URL to change image of category 8-->
  554. <p class="img__description call_modal" id="call_modal8">TBA</p> <!-- Change title category 8-->
  555. <p class="img_descriptionsub" id="call_modalsub8">click for more</p>
  556. </div>
  557.  
  558. <div class="img__wrap">
  559. <img class="image call_modal" src="https://placehold.it/250x150.png" /> <!--Change URL to change image of category 9-->
  560. <p class="img__description call_modal" id="call_modal9">TBA</p> <!-- Change title category 9-->
  561. <p class="img_descriptionsub" id="call_modalsub9">click for more</p>
  562. </div>
  563.  
  564. </p>
  565.  
  566. <!-- FIRST MODAL -->
  567. <div class="modal" id="modal1">
  568. <div class="modal_bg close" id="close1"></div>
  569. <div class="modal_main">
  570. <img src="https://i.imgur.com/3wEkbAo.png" class="closer close" id="closecross1">
  571. <!--Content-->
  572. <div class="title1"><b>Lotte's kitchen</b></div><!-- Change title pop-up window -->
  573. <div class="subtitle">It is all about <i>spice</i> and sweets</div><!-- Change subtitle popup window -->
  574. <p></p>
  575.  
  576. <div class="pictures zoomin">
  577. <div class="pic"><img src="https://placehold.it/200x200"></div>
  578. <div class="pic"><img src="https://placehold.it/200x200"></div>
  579. <div class="pic"><img src="https://placehold.it/200x200"></div>
  580. <div class="pic"><img src="https://placehold.it/200x200"></div>
  581. <div class="pic"><img src="https://placehold.it/200x200"></div>
  582. <div class="pic"><img src="https://placehold.it/200x200"></div>
  583. <div class="pic"><img src="https://placehold.it/200x200"></div>
  584. <div class="pic"><img src="https://placehold.it/200x200"></div>
  585. <div class="pic"><img src="https://placehold.it/200x200"></div>
  586. <!-- To add more pictures, just copy <div class="pic"><img src="URL OF PIC YOU WANT"></a></div> and paste it above this line-->
  587. </div>
  588. </div>
  589. </div>
  590.  
  591. <!-- SECOND MODAL -->
  592. <div class="modal" id="modal2">
  593. <div class="modal_bg close" id="close2"></div>
  594. <div class="modal_main">
  595. <img src="https://i.imgur.com/3wEkbAo.png" class="closer close" id="closecross2">
  596. <!--Content-->
  597. <div class="title1"><b>Lotte's bedroom</b></div>
  598. <div class="subtitle">It is all about <i>spice</i> and sleep</div>
  599. <p></p>
  600.  
  601. <div class="pictures zoomin">
  602. <div class="pic"><img src="https://i.imgur.com/Q2p8T2n.png"></div>
  603. <div class="pic"><img src="https://i.imgur.com/gYZy6SB.png"></div>
  604. <div class="pic"><img src="https://i.imgur.com/2OnrpBC.png"></div>
  605. <div class="pic"><img src="https://i.imgur.com/K2GJop3.png"></div>
  606. <div class="pic"><img src="https://i.imgur.com/fJ9bDeC.png"></div>
  607. <div class="pic"><img src="https://i.imgur.com/zBHEPcF.png"></div>
  608. <div class="pic"><img src="https://placehold.it/200x200"></div>
  609. <div class="pic"><img src="https://placehold.it/200x200"></div>
  610. <div class="pic"><img src="https://placehold.it/200x200"></div>
  611. <!-- To add more pictures, just copy <div class="pic"><img src="URL OF PIC YOU WANT"></a></div> and paste it above this line-->
  612. </div>
  613. </div>
  614. </div>
  615.  
  616. <!-- THIRD MODAL -->
  617. <div class="modal" id="modal3">
  618. <div class="modal_bg close" id="close3"></div>
  619. <div class="modal_main">
  620. <img src="https://i.imgur.com/3wEkbAo.png" class="closer close" id="closecross3">
  621. <!--Content-->
  622. <div class="title1"><b>Lotte's bathroom</b></div>
  623. <div class="subtitle">words words words needed</div>
  624. <p></p>
  625.  
  626. <div class="pictures zoomin">
  627. <div class="pic"><img src="https://placehold.it/200x200"></div>
  628. <div class="pic"><img src="https://placehold.it/200x200"></div>
  629. <div class="pic"><img src="https://placehold.it/200x200"></div>
  630. <div class="pic"><img src="https://placehold.it/200x200"></div>
  631. <div class="pic"><img src="https://placehold.it/200x200"></div>
  632. <div class="pic"><img src="https://placehold.it/200x200"></div>
  633. <div class="pic"><img src="https://placehold.it/200x200"></div>
  634. <div class="pic"><img src="https://placehold.it/200x200"></div>
  635. <div class="pic"><img src="https://placehold.it/200x200"></div>
  636. <!-- To add more pictures, just copy <div class="pic"><img src="URL OF PIC YOU WANT"></a></div> and paste it above this line-->
  637. </div>
  638. </div>
  639. </div>
  640.  
  641. <!-- FOURTH MODAL -->
  642. <div class="modal" id="modal4">
  643. <div class="modal_bg close" id="close4"></div>
  644. <div class="modal_main">
  645. <img src="https://i.imgur.com/3wEkbAo.png" class="closer close" id="closecross4">
  646. <!--Content-->
  647. <div class="title1"><b>TBA</b></div>
  648. <div class="subtitle">words words words needed</div>
  649. <p></p>
  650.  
  651. <div class="pictures zoomin">
  652. <div class="pic"><img src="https://placehold.it/200x200"></div>
  653. <div class="pic"><img src="https://placehold.it/200x200"></div>
  654. <div class="pic"><img src="https://placehold.it/200x200"></div>
  655. <div class="pic"><img src="https://placehold.it/200x200"></div>
  656. <div class="pic"><img src="https://placehold.it/200x200"></div>
  657. <div class="pic"><img src="https://placehold.it/200x200"></div>
  658. <div class="pic"><img src="https://placehold.it/200x200"></div>
  659. <div class="pic"><img src="https://placehold.it/200x200"></div>
  660. <div class="pic"><img src="https://placehold.it/200x200"></div>
  661. <!-- To add more pictures, just copy <div class="pic"><img src="URL OF PIC YOU WANT"></a></div> and paste it above this line-->
  662. </div>
  663. </div>
  664. </div>
  665.  
  666. <!-- FIFTH MODAL -->
  667. <div class="modal" id="modal5">
  668. <div class="modal_bg close" id="close5"></div>
  669. <div class="modal_main">
  670. <img src="https://i.imgur.com/3wEkbAo.png" class="closer close" id="closecross5">
  671. <!--Content-->
  672. <div class="title1"><b>TBA</b></div>
  673. <div class="subtitle">words words words needed</div>
  674. <p></p>
  675.  
  676. <div class="pictures zoomin">
  677. <div class="pic"><img src="https://placehold.it/200x200"></div>
  678. <div class="pic"><img src="https://placehold.it/200x200"></div>
  679. <div class="pic"><img src="https://placehold.it/200x200"></div>
  680. <div class="pic"><img src="https://placehold.it/200x200"></div>
  681. <div class="pic"><img src="https://placehold.it/200x200"></div>
  682. <div class="pic"><img src="https://placehold.it/200x200"></div>
  683. <div class="pic"><img src="https://placehold.it/200x200"></div>
  684. <div class="pic"><img src="https://placehold.it/200x200"></div>
  685. <div class="pic"><img src="https://placehold.it/200x200"></div>
  686. <!-- To add more pictures, just copy <div class="pic"><img src="URL OF PIC YOU WANT"></a></div> and paste it above this line-->
  687. </div>
  688. </div>
  689. </div>
  690.  
  691. <!-- SIXTH MODAL -->
  692. <div class="modal" id="modal6">
  693. <div class="modal_bg close" id="close6"></div>
  694. <div class="modal_main">
  695. <img src="https://i.imgur.com/3wEkbAo.png" class="closer close" id="closecross6">
  696. <!--Content-->
  697. <div class="title1"><b>TBA</b></div>
  698. <div class="subtitle">words words words needed</div>
  699. <p></p>
  700.  
  701. <div class="pictures zoomin">
  702. <div class="pic"><img src="https://placehold.it/200x200"></div>
  703. <div class="pic"><img src="https://placehold.it/200x200"></div>
  704. <div class="pic"><img src="https://placehold.it/200x200"></div>
  705. <div class="pic"><img src="https://placehold.it/200x200"></div>
  706. <div class="pic"><img src="https://placehold.it/200x200"></div>
  707. <div class="pic"><img src="https://placehold.it/200x200"></div>
  708. <div class="pic"><img src="https://placehold.it/200x200"></div>
  709. <div class="pic"><img src="https://placehold.it/200x200"></div>
  710. <div class="pic"><img src="https://placehold.it/200x200"></div>
  711. <!-- To add more pictures, just copy <div class="pic"><img src="URL OF PIC YOU WANT"></a></div> and paste it above this line-->
  712. </div>
  713. </div>
  714. </div>
  715.  
  716. <!-- SEVENTH MODAL -->
  717. <div class="modal" id="modal7">
  718. <div class="modal_bg close" id="close7"></div>
  719. <div class="modal_main">
  720. <img src="https://i.imgur.com/3wEkbAo.png" class="closer close" id="closecross4">
  721. <!--Content-->
  722. <div class="title1"><b>TBA</b></div>
  723. <div class="subtitle">words words words needed</div>
  724. <p></p>
  725.  
  726. <div class="pictures zoomin">
  727. <div class="pic"><img src="https://placehold.it/200x200"></div>
  728. <div class="pic"><img src="https://placehold.it/200x200"></div>
  729. <div class="pic"><img src="https://placehold.it/200x200"></div>
  730. <div class="pic"><img src="https://placehold.it/200x200"></div>
  731. <div class="pic"><img src="https://placehold.it/200x200"></div>
  732. <div class="pic"><img src="https://placehold.it/200x200"></div>
  733. <div class="pic"><img src="https://placehold.it/200x200"></div>
  734. <div class="pic"><img src="https://placehold.it/200x200"></div>
  735. <div class="pic"><img src="https://placehold.it/200x200"></div>
  736. <!-- To add more pictures, just copy <div class="pic"><img src="URL OF PIC YOU WANT"></a></div> and paste it above this line-->
  737. </div>
  738. </div>
  739. </div>
  740.  
  741. <!-- EIGHTH MODAL -->
  742. <div class="modal" id="modal8">
  743. <div class="modal_bg close" id="close8"></div>
  744. <div class="modal_main">
  745. <img src="https://i.imgur.com/3wEkbAo.png" class="closer close" id="closecross8">
  746. <!--Content-->
  747. <div class="title1"><b>TBA</b></div>
  748. <div class="subtitle">words words words needed</div>
  749. <p></p>
  750.  
  751. <div class="pictures zoomin">
  752. <div class="pic"><img src="https://placehold.it/200x200"></div>
  753. <div class="pic"><img src="https://placehold.it/200x200"></div>
  754. <div class="pic"><img src="https://placehold.it/200x200"></div>
  755. <div class="pic"><img src="https://placehold.it/200x200"></div>
  756. <div class="pic"><img src="https://placehold.it/200x200"></div>
  757. <div class="pic"><img src="https://placehold.it/200x200"></div>
  758. <div class="pic"><img src="https://placehold.it/200x200"></div>
  759. <div class="pic"><img src="https://placehold.it/200x200"></div>
  760. <div class="pic"><img src="https://placehold.it/200x200"></div>
  761. <!-- To add more pictures, just copy <div class="pic"><img src="URL OF PIC YOU WANT"></a></div> and paste it above this line-->
  762. </div>
  763. </div>
  764. </div>
  765.  
  766. <!-- NINETH MODAL -->
  767. <div class="modal" id="modal9">
  768. <div class="modal_bg close" id="close9"></div>
  769. <div class="modal_main">
  770. <img src="https://i.imgur.com/3wEkbAo.png" class="closer close" id="closecross9">
  771. <!--Content-->
  772. <div class="title1"><b>TBA</b></div>
  773. <div class="subtitle">words words words needed</div>
  774. <p></p>
  775.  
  776. <div class="pictures zoomin">
  777. <div class="pic"><img src="https://placehold.it/200x200"></div>
  778. <div class="pic"><img src="https://placehold.it/200x200"></div>
  779. <div class="pic"><img src="https://placehold.it/200x200"></div>
  780. <div class="pic"><img src="https://placehold.it/200x200"></div>
  781. <div class="pic"><img src="https://placehold.it/200x200"></div>
  782. <div class="pic"><img src="https://placehold.it/200x200"></div>
  783. <div class="pic"><img src="https://placehold.it/200x200"></div>
  784. <div class="pic"><img src="https://placehold.it/200x200"></div>
  785. <div class="pic"><img src="https://placehold.it/200x200"></div>
  786. <!-- To add more pictures, just copy <div class="pic"><img src="URL OF PIC YOU WANT"></a></div> and paste it above this line-->
  787. </div>
  788. </div>
  789. </div>
  790.  
  791. </div> <!-- end of box -->
  792.  
  793. <!-- Don't remove the credit please! -->
  794. <div>
  795. <a href="https://recsbylotte.tumblr.com">
  796. <img class="credit" src="https://i.imgur.com/QxYzsC1.png">
  797. </a>
  798. </div>
  799. <!--End of credit -->
  800.  
  801. <!-- Note for more advanced HTML people: If you want to add more picture-categories with their own pop-up window:
  802. Add following base for your pop-up window and paste it above. BEFORE THE LAST DIV THAT INDICATES THE END OF THE BOX. (NUMBER should be replaced by a number. E.g. if you have already 9 posts, the next post could be named 10)
  803.  
  804. COPY FROM HERE
  805. <div class="modal" id="modalNUMBER">
  806. <div class="modal_bg close" id="closeNUMBER"></div>
  807. <div class="modal_main">
  808. <img src="https://i.imgur.com/3wEkbAo.png" class="closer close" id="closecross3">
  809. <div class="title1"><b>TITLE</b></div>
  810. <div class="subtitle">words words words needed</div>
  811. <p></p>
  812.  
  813. <div class="pictures zoomin">
  814. <div class="pic"><img src="https://placehold.it/200x200"></div>
  815. <div class="pic"><img src="https://placehold.it/200x200"></div>
  816. <div class="pic"><img src="https://placehold.it/200x200"></div>
  817. <div class="pic"><img src="https://placehold.it/200x200"></div>
  818. <div class="pic"><img src="https://placehold.it/200x200"></div>
  819. <div class="pic"><img src="https://placehold.it/200x200"></div>
  820. <div class="pic"><img src="https://placehold.it/200x200"></div>
  821. <div class="pic"><img src="https://placehold.it/200x200"></div>
  822. <div class="pic"><img src="https://placehold.it/200x200"></div>
  823. </div>
  824. </div>
  825. </div>
  826. COPY UP UNTIL HERE
  827.  
  828. Then add following base for your script: (Again, change NUMBER with the SAME number
  829.  
  830. COPY FROM HERE
  831. $(document).ready(function(){
  832. $("#call_modalNUMBER").click(function(){
  833. $("#modalNUMBER").fadeIn();
  834. $(".modal_main").show();
  835. });
  836. });
  837.  
  838. $(document).ready(function(){
  839. $("#call_modalsubNUMBER").click(function(){
  840. $("#modalNUMBER").fadeIn();
  841. $(".modal_main").show();
  842. });
  843. });
  844.  
  845. $(document).ready(function(){
  846. $("#closeNUMBER").click(function(){
  847. $("#modalNUMBER").fadeOut();
  848. $(".modal_main").fadeOut();
  849. });
  850. });
  851.  
  852. $(document).ready(function(){
  853. $("#closecrossNUMBER").click(function(){
  854. $("#modalNUMBER").fadeOut();
  855. $(".modal_main").fadeOut();
  856. });
  857. });
  858. COPY UP UNTIL HERE
  859. -->
  860.  
  861.  
  862. <!-- Script for pop-up window. Don't touch! Only add if you read above instructions -->
  863. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  864. <script>
  865.  
  866. /* WINDOW 1 */
  867. $(document).ready(function(){
  868. $("#call_modal1").click(function(){
  869. $("#modal1").fadeIn();
  870. $(".modal_main").show();
  871. });
  872. });
  873.  
  874. $(document).ready(function(){
  875. $("#call_modalsub1").click(function(){
  876. $("#modal1").fadeIn();
  877. $(".modal_main").show();
  878. });
  879. });
  880.  
  881. $(document).ready(function(){
  882. $("#close1").click(function(){
  883. $("#modal1").fadeOut();
  884. $(".modal_main").fadeOut();
  885. });
  886. });
  887.  
  888. $(document).ready(function(){
  889. $("#closecross1").click(function(){
  890. $("#modal1").fadeOut();
  891. $(".modal_main").fadeOut();
  892. });
  893. });
  894.  
  895. /* WINDOW 2 */
  896. $(document).ready(function(){
  897. $("#call_modal2").click(function(){
  898. $("#modal2").fadeIn();
  899. $(".modal_main").show();
  900. });
  901. });
  902.  
  903. $(document).ready(function(){
  904. $("#call_modalsub2").click(function(){
  905. $("#modal2").fadeIn();
  906. $(".modal_main").show();
  907. });
  908. });
  909.  
  910. $(document).ready(function(){
  911. $("#close2").click(function(){
  912. $("#modal2").fadeOut();
  913. $(".modal_main").fadeOut();
  914. });
  915. });
  916.  
  917. $(document).ready(function(){
  918. $("#closecross2").click(function(){
  919. $("#modal2").fadeOut();
  920. $(".modal_main").fadeOut();
  921. });
  922. });
  923.  
  924. /* WINDOW 3 */
  925. $(document).ready(function(){
  926. $("#call_modal3").click(function(){
  927. $("#modal3").fadeIn();
  928. $(".modal_main").show();
  929. });
  930. });
  931.  
  932. $(document).ready(function(){
  933. $("#call_modalsub3").click(function(){
  934. $("#modal3").fadeIn();
  935. $(".modal_main").show();
  936. });
  937. });
  938.  
  939. $(document).ready(function(){
  940. $("#close3").click(function(){
  941. $("#modal3").fadeOut();
  942. $(".modal_main").fadeOut();
  943. });
  944. });
  945.  
  946. $(document).ready(function(){
  947. $("#closecross3").click(function(){
  948. $("#modal3").fadeOut();
  949. $(".modal_main").fadeOut();
  950. });
  951. });
  952.  
  953. /*WINDOW 4*/
  954. $(document).ready(function(){
  955. $("#call_modal4").click(function(){
  956. $("#modal4").fadeIn();
  957. $(".modal_main").show();
  958. });
  959. });
  960.  
  961. $(document).ready(function(){
  962. $("#call_modalsub4").click(function(){
  963. $("#modal4").fadeIn();
  964. $(".modal_main").show();
  965. });
  966. });
  967.  
  968. $(document).ready(function(){
  969. $("#close4").click(function(){
  970. $("#modal4").fadeOut();
  971. $(".modal_main").fadeOut();
  972. });
  973. });
  974.  
  975. $(document).ready(function(){
  976. $("#closecross4").click(function(){
  977. $("#modal4").fadeOut();
  978. $(".modal_main").fadeOut();
  979. });
  980. });
  981.  
  982. /*WINDOW 5*/
  983. $(document).ready(function(){
  984. $("#call_modal5").click(function(){
  985. $("#modal5").fadeIn();
  986. $(".modal_main").show();
  987. });
  988. });
  989.  
  990. $(document).ready(function(){
  991. $("#call_modalsub5").click(function(){
  992. $("#modal5").fadeIn();
  993. $(".modal_main").show();
  994. });
  995. });
  996.  
  997. $(document).ready(function(){
  998. $("#close5").click(function(){
  999. $("#modal5").fadeOut();
  1000. $(".modal_main").fadeOut();
  1001. });
  1002. });
  1003.  
  1004. $(document).ready(function(){
  1005. $("#closecross5").click(function(){
  1006. $("#modal5").fadeOut();
  1007. $(".modal_main").fadeOut();
  1008. });
  1009. });
  1010.  
  1011. /*WINDOW 6*/
  1012. $(document).ready(function(){
  1013. $("#call_modal6").click(function(){
  1014. $("#modal6").fadeIn();
  1015. $(".modal_main").show();
  1016. });
  1017. });
  1018.  
  1019. $(document).ready(function(){
  1020. $("#call_modalsub6").click(function(){
  1021. $("#modal6").fadeIn();
  1022. $(".modal_main").show();
  1023. });
  1024. });
  1025.  
  1026. $(document).ready(function(){
  1027. $("#close6").click(function(){
  1028. $("#modal6").fadeOut();
  1029. $(".modal_main").fadeOut();
  1030. });
  1031. });
  1032.  
  1033. $(document).ready(function(){
  1034. $("#closecross6").click(function(){
  1035. $("#modal6").fadeOut();
  1036. $(".modal_main").fadeOut();
  1037. });
  1038. });
  1039.  
  1040. /*WINDOW 7*/
  1041. $(document).ready(function(){
  1042. $("#call_modal7").click(function(){
  1043. $("#modal7").fadeIn();
  1044. $(".modal_main").show();
  1045. });
  1046. });
  1047.  
  1048. $(document).ready(function(){
  1049. $("#call_modalsub7").click(function(){
  1050. $("#modal7").fadeIn();
  1051. $(".modal_main").show();
  1052. });
  1053. });
  1054.  
  1055. $(document).ready(function(){
  1056. $("#close7").click(function(){
  1057. $("#modal7").fadeOut();
  1058. $(".modal_main").fadeOut();
  1059. });
  1060. });
  1061.  
  1062. $(document).ready(function(){
  1063. $("#closecross7").click(function(){
  1064. $("#modal7").fadeOut();
  1065. $(".modal_main").fadeOut();
  1066. });
  1067. });
  1068.  
  1069. /*WINDOW 8*/
  1070. $(document).ready(function(){
  1071. $("#call_modal8").click(function(){
  1072. $("#modal8").fadeIn();
  1073. $(".modal_main").show();
  1074. });
  1075. });
  1076.  
  1077. $(document).ready(function(){
  1078. $("#call_modalsub8").click(function(){
  1079. $("#modal8").fadeIn();
  1080. $(".modal_main").show();
  1081. });
  1082. });
  1083.  
  1084. $(document).ready(function(){
  1085. $("#close8").click(function(){
  1086. $("#modal8").fadeOut();
  1087. $(".modal_main").fadeOut();
  1088. });
  1089. });
  1090.  
  1091. $(document).ready(function(){
  1092. $("#closecross8").click(function(){
  1093. $("#modal8").fadeOut();
  1094. $(".modal_main").fadeOut();
  1095. });
  1096. });
  1097.  
  1098. /*WINDOW 9*/
  1099. $(document).ready(function(){
  1100. $("#call_modal9").click(function(){
  1101. $("#modal9").fadeIn();
  1102. $(".modal_main").show();
  1103. });
  1104. });
  1105.  
  1106. $(document).ready(function(){
  1107. $("#call_modalsub9").click(function(){
  1108. $("#modal9").fadeIn();
  1109. $(".modal_main").show();
  1110. });
  1111. });
  1112.  
  1113. $(document).ready(function(){
  1114. $("#close9").click(function(){
  1115. $("#modal9").fadeOut();
  1116. $(".modal_main").fadeOut();
  1117. });
  1118. });
  1119.  
  1120. $(document).ready(function(){
  1121. $("#closecross9").click(function(){
  1122. $("#modal9").fadeOut();
  1123. $(".modal_main").fadeOut();
  1124. });
  1125. });
  1126.  
  1127. //credit. DON'T REMOVE PLEASE
  1128. $(".credit").mouseover(function (e) {
  1129. $(this).attr("src", $(this).attr("src").replace("https://i.imgur.com/QxYzsC1.png", "https://i.imgur.com/r4LH7Oe.gif"));
  1130. }).mouseout(function (e) {
  1131. $(this).attr("src", $(this).attr("src").replace("https://i.imgur.com/r4LH7Oe.gif", "https://i.imgur.com/QxYzsC1.png"));
  1132. });
  1133.  
  1134.  
  1135. </script>
  1136.  
  1137.  
  1138. </script>
  1139.  
  1140. </body>
  1141. </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!