API tools faq
paste
Advertisement
Katting

Katting's Zodiac Popups - Popups [HTML]

Katting
Sep 27th, 2016
475
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.03 KB | None | 0 0
raw download clone embed print report
  1. <!-------------------------------------------------------------------------
  2. ZODIAC POPUP BOXES BY FELINE THEMES
  3.  
  4. *PLEASE READ THIS IMPORTANT INFO*
  5.  
  6. - Do not change the letters in the "source" divs. They correspond to the zodiac symbol for that sign.
  7.  
  8. - You will need to keep the included stylesheet for the symbols to show.
  9.  
  10. - You do not need to use the 'fancy' sidebar links I provided in the tutorial, but you will need to make your links to these popups correspond to the right popup if you wish to use plain links.
  11.  
  12. - You may change the zodiac facts if you wish to, these are just ones I use in my personal one, and decided to include.
  13.  
  14. - Zodiac facts are sources from http://www.astrology-zodiac-signs.com/
  15. ****I TAKE NO CREDIT FOR THESE ZODIAC FACTS!****
  16.  
  17. FONTS AND COLORS USED:
  18.  
  19. I went for a very basic color scheme so that anyone can pick these up and edit them as they wish. The color codes used are as following, edit them as you see them:
  20.  
  21. - #ffffff
  22. - #888888
  23. - #cccccc
  24. - #363333
  25. - #eeeeee [only for the fade background]
  26.  
  27.  
  28. I used the fonts Raleway and Roboto for the main texts of these zodiac cards to correspond with my birthday page. As these are Google fonts they won't work without the script for the fonts. I provided the script in the tutorial if you want them. Otherwise just change the places where it says Roboto or Raleway to your desired custom font.
  29.  
  30.  
  31.  
  32. --------------------------------------------------------------------------->
  33.  
  34.  
  35. <link rel="stylesheet" href="http://static.tumblr.com/dq6g0mp/vwZoaft2f/stylesheet3.css
  36. ">
  37.  
  38.  
  39. <div id="01" class="popup_block">
  40. <div id="zodiacblock">
  41.  
  42. <div id="ztitle"> Aquarius </div>
  43.  
  44.  
  45. <div id="pictures">
  46.  
  47. <!-------------Images Go Here-------------->
  48.  
  49.  
  50. <!-----------I Have added the examples in here, delete them when you use it.
  51.  
  52.  
  53. Use this little formula to add in your icon links, change "felinethemes" to the username of the person you would like to add.
  54.  
  55.  
  56. <a href="http://felinethemes.tumblr.com" title="Name [Birthday]" target="blank">
  57. <img src="http://api.tumblr.com/v2/blog/felinethemes.tumblr.com/avatar/128/"></a>
  58.  
  59. --------------------------------------------------------------------------->
  60.  
  61.  
  62. <a href="http://felinethemes.tumblr.com" title="Name [Birthday]" target="blank">
  63. <img src="http://api.tumblr.com/v2/blog/felinethemes.tumblr.com/avatar/128/"></a>
  64.  
  65.  
  66. <a href="http://felinethemes.tumblr.com" title="Name [Birthday]" target="blank">
  67. <img src="http://api.tumblr.com/v2/blog/felinethemes.tumblr.com/avatar/128/"></a>
  68.  
  69.  
  70. <a href="http://felinethemes.tumblr.com" title="Name [Birthday]" target="blank">
  71. <img src="http://api.tumblr.com/v2/blog/felinethemes.tumblr.com/avatar/128/"></a>
  72.  
  73.  
  74. <a href="http://felinethemes.tumblr.com" title="Name [Birthday]" target="blank">
  75. <img src="http://api.tumblr.com/v2/blog/felinethemes.tumblr.com/avatar/128/"></a>
  76.  
  77.  
  78. <a href="http://felinethemes.tumblr.com" title="Name [Birthday]" target="blank">
  79. <img src="http://api.tumblr.com/v2/blog/felinethemes.tumblr.com/avatar/128/"></a>
  80.  
  81.  
  82. <a href="http://felinethemes.tumblr.com" title="Name [Birthday]" target="blank">
  83. <img src="http://api.tumblr.com/v2/blog/felinethemes.tumblr.com/avatar/128/"></a>
  84.  
  85.  
  86. <a href="http://felinethemes.tumblr.com" title="Name [Birthday]" target="blank">
  87. <img src="http://api.tumblr.com/v2/blog/felinethemes.tumblr.com/avatar/128/"></a>
  88.  
  89.  
  90. <a href="http://felinethemes.tumblr.com" title="Name [Birthday]" target="blank">
  91. <img src="http://api.tumblr.com/v2/blog/felinethemes.tumblr.com/avatar/128/"></a>
  92.  
  93.  
  94. <a href="http://felinethemes.tumblr.com" title="Name [Birthday]" target="blank">
  95. <img src="http://api.tumblr.com/v2/blog/felinethemes.tumblr.com/avatar/128/"></a>
  96.  
  97. <!----------------------------------------->
  98.  
  99. </div>
  100.  
  101.  
  102. <div id="zinfo">
  103. <h2>January 20-February 18</h2>
  104.  
  105. <div id="zfact"><b>Best Partnership:</b> Leo</div>
  106. <div id="zfact"><b>Compatible:</b> Gemini, Libra</div>
  107. <hr>
  108. <p><b>Strengths:</b> Progressive, original, independent, charitable</p>
  109. <p><b>Weaknesses:</b> Hard time with emotional expression, temperamental, uncompromising, standoffish.</p>
  110. <hr>
  111. <p><b>Likes:</b> Fun with friends, helping other people, fighting for causes they care about, intelligent conversation, a good listener. </p>
  112. <p><b>Dislikes:</b> Limitations, broken promises, being lonely, being bored, people who disagree with them.
  113.  
  114.  
  115. <a href="http://www.astrology-zodiac-signs.com/zodiac-signs/aquarius/" title="Learn More"><div id="source">K</div></a>
  116. </div>
  117.  
  118.  
  119. </div>
  120. </div>
  121.  
  122. <!--------------------------------------------------------------->
  123.  
  124.  
  125. <div id="02" class="popup_block">
  126. <div id="zodiacblock">
  127.  
  128. <div id="ztitle"> Pisces </div>
  129.  
  130.  
  131. <div id="pictures">
  132.  
  133. <!-------------Images Go Here-------------->
  134.  
  135. <!----------------------------------------->
  136.  
  137. </div>
  138.  
  139.  
  140. <div id="zinfo">
  141. <h2>February 19-March 20</h2>
  142.  
  143. <div id="zfact"><b>Best Partnership:</b> Virgo</div>
  144. <div id="zfact"><b>Compatible:</b> Scorpio, Cancer</div>
  145. <hr>
  146. <p><b>Strengths:</b> Compassionate, creative, intuitive, gentle, wise.</p>
  147. <p><b>Weaknesses:</b> Fearful, overly trusting in others, sad often, desires to escape reality, often a victim.</p>
  148. <hr>
  149. <p><b>Likes:</b> Being alone, sleeping, music, romance, visual media, swimming. </p>
  150. <p><b>Dislikes:</b> Know-it-alls, being criticized, the past coming back to haunt them, cruelty of any kind.
  151.  
  152.  
  153. <a href="http://www.astrology-zodiac-signs.com/zodiac-signs/pisces/" title="Learn More"><div id="source">L</div></a>
  154. </div>
  155.  
  156.  
  157. </div>
  158. </div>
  159.  
  160. <!--------------------------------------------------------------->
  161.  
  162. <div id="03" class="popup_block">
  163. <div id="zodiacblock">
  164.  
  165. <div id="ztitle"> Aries </div>
  166.  
  167.  
  168. <div id="pictures">
  169.  
  170. <!-------------Images Go Here-------------->
  171.  
  172. <!----------------------------------------->
  173.  
  174. </div>
  175.  
  176.  
  177. <div id="zinfo">
  178. <h2>March 21-April 19</h2>
  179.  
  180. <div id="zfact"><b>Best Partnership:</b> Libra</div>
  181. <div id="zfact"><b>Compatible:</b> Leo, Sagittarius</div>
  182. <hr>
  183. <p><b>Strengths:</b> Courageous, determined, confident, enthusiastic, optimistic, honest, passionate.</p>
  184. <p><b>Weaknesses:</b> Impatient, moody, short-tempered, impulsive, aggressive.</p>
  185. <hr>
  186. <p><b>Likes:</b> Comfortable clothes, taking on leadership roles, physical challenges, individual sports. </p>
  187. <p><b>Dislikes:</b> Inactivity, delays, work that does not use one's talents.
  188.  
  189.  
  190. <a href="http://www.astrology-zodiac-signs.com/zodiac-signs/aries/" title="Learn More"><div id="source">A</div></a>
  191. </div>
  192.  
  193.  
  194. </div>
  195. </div>
  196.  
  197. <!--------------------------------------------------------------->
  198.  
  199. <div id="04" class="popup_block">
  200. <div id="zodiacblock">
  201.  
  202. <div id="ztitle"> Taurus </div>
  203.  
  204.  
  205. <div id="pictures">
  206.  
  207. <!-------------Images Go Here-------------->
  208.  
  209. <!----------------------------------------->
  210.  
  211. </div>
  212.  
  213.  
  214. <div id="zinfo">
  215. <h2>April 20-May 20</h2>
  216.  
  217. <div id="zfact"><b>Best Partnership:</b> Scorpio</div>
  218. <div id="zfact"><b>Compatible:</b> Virgo, Capricorn</div>
  219. <hr>
  220. <p><b>Strengths:</b> Reliable, patient, practical, devoted, responsible, stable.</p>
  221. <p><b>Weaknesses:</b> Stubborn, possessive, uncompromising.</p>
  222. <hr>
  223. <p><b>Likes:</b> Gardening, cooking, music, romance, nice clothes, working with hands. </p>
  224. <p><b>Dislikes:</b> Sudden changes, complications, insecurity of any kind.
  225.  
  226.  
  227. <a href="http://www.astrology-zodiac-signs.com/zodiac-signs/taurus/" title="Learn More"><div id="source">B</div></a>
  228. </div>
  229.  
  230.  
  231. </div>
  232. </div>
  233.  
  234. <!--------------------------------------------------------------->
  235.  
  236. <div id="05" class="popup_block">
  237. <div id="zodiacblock">
  238.  
  239. <div id="ztitle"> Gemini </div>
  240.  
  241.  
  242. <div id="pictures">
  243.  
  244. <!-------------Images Go Here-------------->
  245.  
  246. <!----------------------------------------->
  247.  
  248. </div>
  249.  
  250.  
  251. <div id="zinfo">
  252. <h2>May 22-June 20</h2>
  253.  
  254. <div id="zfact"><b>Best Partnership:</b> Sagittarius</div>
  255. <div id="zfact"><b>Compatible:</b> Libra, Aquarius</div>
  256. <hr>
  257. <p><b>Strengths:</b> Gentle, affectionate, curious, adaptable, ability to learn quickly and exchange ideas.</p>
  258. <p><b>Weaknesses:</b> Nervous, inconsistent, indecisive.</p>
  259. <hr>
  260. <p><b>Likes:</b> Music, books, magazines, chatting with nearly anyone, short trips around the town. </p>
  261. <p><b>Dislikes:</b> Being alone, being confined, repetition and routine.
  262.  
  263.  
  264. <a href="http://www.astrology-zodiac-signs.com/zodiac-signs/gemini/" title="Learn More"><div id="source">C</div></a>
  265. </div>
  266.  
  267.  
  268. </div>
  269. </div>
  270.  
  271. <!--------------------------------------------------------------->
  272.  
  273. <div id="06" class="popup_block">
  274. <div id="zodiacblock">
  275.  
  276. <div id="ztitle"> Cancer </div>
  277.  
  278.  
  279. <div id="pictures">
  280.  
  281. <!-------------Images Go Here-------------->
  282.  
  283. <!----------------------------------------->
  284.  
  285. </div>
  286.  
  287.  
  288. <div id="zinfo">
  289. <h2>June 21-July 22</h2>
  290.  
  291. <div id="zfact"><b>Best Partnership:</b> Capricorn</div>
  292. <div id="zfact"><b>Compatible:</b> Scorpio, Pisces</div>
  293. <hr>
  294. <p><b>Strengths:</b> Tenacious, highly imaginative, loyal, emotional, sympathetic, persuasive.</p>
  295. <p><b>Weaknesses:</b> Moody, pessimistic, suspicious, manipulative, insecure.</p>
  296. <hr>
  297. <p><b>Likes:</b> Art, home-based hobbies, relaxing near or in water, helping loved ones, sharing good food with friends. </p>
  298. <p><b>Dislikes:</b> Strangers, any criticism of their mom, revealing of their personal life.
  299.  
  300.  
  301. <a href="http://www.astrology-zodiac-signs.com/zodiac-signs/cancer/" title="Learn More"><div id="source">D</div></a>
  302. </div>
  303.  
  304.  
  305. </div>
  306. </div>
  307.  
  308. <!--------------------------------------------------------------->
  309.  
  310. <div id="07" class="popup_block">
  311. <div id="zodiacblock">
  312.  
  313. <div id="ztitle"> Leo </div>
  314.  
  315.  
  316. <div id="pictures">
  317.  
  318. <!-------------Images Go Here-------------->
  319.  
  320. <!----------------------------------------->
  321.  
  322. </div>
  323.  
  324.  
  325. <div id="zinfo">
  326. <h2>July 23-August 22</h2>
  327.  
  328. <div id="zfact"><b>Best Partnership:</b> Aquarius</div>
  329. <div id="zfact"><b>Compatible:</b> Aries, Sagittarius</div>
  330. <hr>
  331. <p><b>Strengths:</b> Creative, passionate, generous, warm-hearted, cheerful, humorous.</p>
  332. <p><b>Weaknesses:</b> Arrogant, stubborn, self-centered, lazy, inflexible.</p>
  333. <hr>
  334. <p><b>Likes:</b> Theater, taking vacations, being admired, expensive things, bright colors, fun with friends. </p>
  335. <p><b>Dislikes:</b> Being ignored, facing difficult reality, not being treated like a king or queen.
  336.  
  337.  
  338. <a href="http://www.astrology-zodiac-signs.com/zodiac-signs/leo/" title="Learn More"><div id="source">E</div></a>
  339. </div>
  340.  
  341.  
  342. </div>
  343. </div>
  344.  
  345. <!--------------------------------------------------------------->
  346.  
  347. <div id="08" class="popup_block">
  348. <div id="zodiacblock">
  349.  
  350. <div id="ztitle"> Virgo </div>
  351.  
  352.  
  353. <div id="pictures">
  354.  
  355. <!-------------Images Go Here-------------->
  356.  
  357. <!----------------------------------------->
  358.  
  359. </div>
  360.  
  361.  
  362. <div id="zinfo">
  363. <h2>August 23-September 22</h2>
  364.  
  365. <div id="zfact"><b>Best Partnership:</b> Picses</div>
  366. <div id="zfact"><b>Compatible:</b> Taurus, Capricorn</div>
  367. <hr>
  368. <p><b>Strengths:</b> Loyal, analytical, kind, hardworking, practical.</p>
  369. <p><b>Weaknesses:</b> Shyness, worries a lot, overly critical of self and others, all work and no play.</p>
  370. <hr>
  371. <p><b>Likes:</b> Animals, healthy food, books, nature, cleanliness. </p>
  372. <p><b>Dislikes:</b> Rudeness, asking for help, taking center stage.
  373.  
  374.  
  375. <a href="http://www.astrology-zodiac-signs.com/zodiac-signs/virgo/" title="Learn More"><div id="source">F</div></a>
  376. </div>
  377.  
  378.  
  379. </div>
  380. </div>
  381.  
  382. <!--------------------------------------------------------------->
  383.  
  384. <div id="09" class="popup_block">
  385. <div id="zodiacblock">
  386.  
  387. <div id="ztitle"> Libra </div>
  388.  
  389.  
  390. <div id="pictures">
  391.  
  392. <!-------------Images Go Here-------------->
  393.  
  394. <!----------------------------------------->
  395.  
  396. </div>
  397.  
  398.  
  399. <div id="zinfo">
  400. <h2>September 23-October 22</h2>
  401.  
  402. <div id="zfact"><b>Best Partnership:</b> Aries</div>
  403. <div id="zfact"><b>Compatible:</b> Gemini, Aquarius</div>
  404. <hr>
  405. <p><b>Strengths:</b> Cooperative,diplomatic, gracious, fair-minded, social.</p>
  406. <p><b>Weaknesses:</b> Indecisive, avoids confrontations, will carry a grudge, self-pity.</p>
  407. <hr>
  408. <p><b>Likes:</b> Harmony, gentleness, sharing with other people, being outdoors. </p>
  409. <p><b>Dislikes:</b> Violence, injustice, loudmouths, conformity.
  410.  
  411.  
  412. <a href="http://www.astrology-zodiac-signs.com/zodiac-signs/libra/" title="Learn More"><div id="source">G</div></a>
  413. </div>
  414.  
  415.  
  416. </div>
  417. </div>
  418.  
  419. <!--------------------------------------------------------------->
  420.  
  421. <div id="10" class="popup_block">
  422. <div id="zodiacblock">
  423.  
  424. <div id="ztitle"> Scorpio </div>
  425.  
  426. <!-------------Images Go Here-------------->
  427.  
  428. <!----------------------------------------->
  429.  
  430. </div>
  431.  
  432.  
  433. <div id="zinfo">
  434. <h2>October 23-November 21</h2>
  435.  
  436. <div id="zfact"><b>Best Partnership:</b> Taurus</div>
  437. <div id="zfact"><b>Compatible:</b> Cancer, Pisces</div>
  438. <hr>
  439. <p><b>Strengths:</b> Resourceful, brave, passionate, stubborn, a true friend.</p>
  440. <p><b>Weaknesses:</b> Distrusting, jealous, secretive, violent.</p>
  441. <hr>
  442. <p><b>Likes:</b> Truth, facts, being right, longtime friends, teasing, a grand passion. </p>
  443. <p><b>Dislikes:</b> Dishonesty, revealing secrets, passive people.
  444.  
  445.  
  446. <a href="http://www.astrology-zodiac-signs.com/zodiac-signs/scorpio/" title="Learn More"><div id="source">H</div></a>
  447. </div>
  448.  
  449.  
  450. </div>
  451. </div>
  452.  
  453. <!--------------------------------------------------------------->
  454.  
  455. <div id="11" class="popup_block">
  456. <div id="zodiacblock">
  457.  
  458. <div id="ztitle"> Sagittarius </div>
  459.  
  460.  
  461. <div id="pictures">
  462.  
  463. <!-------------Images Go Here-------------->
  464.  
  465. <!----------------------------------------->
  466.  
  467. </div>
  468.  
  469.  
  470. <div id="zinfo">
  471. <h2>November 22-December 21</h2>
  472.  
  473. <div id="zfact"><b>Best Partnership:</b> Gemini</div>
  474. <div id="zfact"><b>Compatible:</b> Aries, Leo</div>
  475. <hr>
  476. <p><b>Strengths:</b> Generous, idealistic, great sense of humor.</p>
  477. <p><b>Weaknesses:</b> Promises more than can deliver, very impatient, will say anything no matter how undiplomatic.</p>
  478. <hr>
  479. <p><b>Likes:</b> Freedom, travel, philosophy, being outdoors. </p>
  480. <p><b>Dislikes:</b> Clingy people, being constrained, off-the-wall theories, details.
  481.  
  482.  
  483. <a href="http://www.astrology-zodiac-signs.com/zodiac-signs/sagittarius/" title="Learn More"><div id="source">I</div></a>
  484. </div>
  485.  
  486.  
  487. </div>
  488. </div>
  489.  
  490. <!--------------------------------------------------------------->
  491.  
  492.  
  493. <div id="12" class="popup_block">
  494. <div id="zodiacblock">
  495.  
  496. <div id="ztitle"> Capricorn </div>
  497.  
  498.  
  499. <div id="pictures">
  500.  
  501. <!-------------Images Go Here-------------->
  502.  
  503. <!----------------------------------------->
  504.  
  505. </div>
  506.  
  507.  
  508. <div id="zinfo">
  509. <h2>December 22-January 19</h2>
  510.  
  511. <div id="zfact"><b>Best Partnership:</b> Cancer</div>
  512. <div id="zfact"><b>Compatible:</b> Taurus, Virgo</div>
  513. <hr>
  514. <p><b>Strengths:</b> Responsible, disciplined, self-control, good managers.</p>
  515. <p><b>Weaknesses:</b> Can be a know-it-all, unforgiving, condescending, expects the worst.</p>
  516. <hr>
  517. <p><b>Likes:</b> Family, tradition, music, understated status, quality craftsmanship. </p>
  518. <p><b>Dislikes:</b> Almost everything at some point.
  519.  
  520.  
  521. <a href="http://www.astrology-zodiac-signs.com/zodiac-signs/capricorn/" title="Learn More"><div id="source">J</div></a>
  522. </div>
  523.  
  524.  
  525. </div>
  526. </div>
  527.  
  528. <!------------------------------------------------------------------------->
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!