[go: up one dir, main page]
API tools faq
paste
y2kcarrds

kokonai ju mp menu

y2kcarrds
Jul 18th, 2022 (edited)
215
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.62 KB | None | 0 0
raw download clone embed print report
  1. /* credit to intruosers for this menu! */
  2.  
  3. <style>
  4.  
  5. @font-face {
  6. font-family: lovely;
  7. src: url(https://dl.dropbox.com/s/xde2bkhiie1bm8r/LovelyRegular.ttf);
  8. }
  9.  
  10. /* this centers everything and also controls how big the image is */
  11. #contain {
  12. border-width:7px;
  13. border-style:solid;
  14. border-image: url("https://i.imgur.com/NJa4bp2.png") 8 fill round;
  15. max-width: 300px; /* controls how big the image can get at max */
  16. margin: 0 auto; /* centers the image */
  17. position: relative; /* so the links are properly spaced */
  18. }
  19.  
  20. /* holds the image */
  21. #wow {
  22. max-width: 100%; /* no clue i think i put this here out of habit */
  23. position: relative; /* so that i can change the z index */
  24. z-index: 5; /* puts the image in front of the links */
  25. border: 1px solid white;
  26. }
  27.  
  28. /* overall link css */
  29. #links {
  30. font-family: lovely;
  31. color: white;
  32. text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
  33. text-decoration: none;
  34. font-size: 2.5em;
  35. position: absolute; /* so i can put the links under the image */
  36. width: 200px; /* controls how wide the links are */
  37. top: 50%; /* centering */
  38. transform: translateY(-50%); /* centering */
  39. left: 45%; /* peek out from behind the image */
  40. z-index: 1; /* habit i think */
  41. }
  42.  
  43. /* css for each link */
  44. #links a {
  45. text-decoration:none;
  46. display: block; /* so they aren't side by side*/
  47. margin-bottom: 9px; /* spaces them out */
  48. background: #FACAE7;
  49. padding: 5px;
  50. border: 1px solid white;
  51. transition: all 0.5s ease;
  52. }
  53.  
  54. /* when the links are hovered */
  55. #links a:hover {
  56. transform: translateX(122px); /* makes them pop out */
  57. transition: all 0.5s ease;
  58. }
  59.  
  60. /* the last link */
  61. #links a:last-child {
  62. margin-bottom: 0px; /* so the last link doesn't have extra space */
  63. }
  64.  
  65. /* whooooo boy this is how i tried to make it mobile friendly... you'll probably have to mess with this in order to change it for your specific image and text so this'll probably require some code knowledge beforehand */
  66. @media (max-width: 475px) {
  67. #contain {
  68. max-width: 250px;
  69. }
  70. #links {
  71. width: 150px;
  72. left: 50%;
  73. font-size: 2em;
  74. }
  75. #links a {
  76. margin-bottom: 12px;
  77. }
  78. #links a:hover {
  79. transform: translateX(90px);
  80. }
  81. }
  82.  
  83. @media (max-width: 375px) {
  84. #contain {
  85. max-width: 200px;
  86. }
  87. #links {
  88. width: 120px;
  89. left: 50%;
  90. font-size: 1.75em;
  91. }
  92. #links a {
  93. margin-bottom: 8px;
  94. }
  95. #links a:hover {
  96. transform: translateX(75px);
  97. }
  98. }
  99. </style>
  100. </head>
  101. <body>
  102. <div id="contain">
  103. <div id="wow">
  104. <img src="INSERT IMAGE LINK" style="display:block;" width="100%" height="auto">
  105. </div>
  106. <div id="links">
  107. <a href="/#a">one</a>
  108. <a href="/#b">two</a>
  109. <a href="/#c">three</a>
  110. <a href="/#home">four</a>
  111. </div>
  112. </div>
  113. </body>
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!