Advertisement
kyujouz

menu yeag

Dec 16th, 2021
3,134
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.41 KB | None | 0 0
  1. <link rel="preconnect" href="https://fonts.googleapis.com">
  2. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  3. <link href="https://fonts.googleapis.com/css2?family=Berkshire+Swash&display=swap" rel="stylesheet">
  4.  
  5. <!--art credit goes to ichigo_town on instagram-->
  6.  
  7. <style>
  8.  
  9. #cont {
  10. width: 200px;
  11. border-radius: 5px;
  12. margin:auto;
  13. height: 200px;
  14. border: 4px double #000;
  15. position: relative;
  16. overflow: hidden;
  17.  
  18. }
  19.  
  20. .img {
  21. width: 100%;
  22. height: 100%;
  23. object-fit: cover;
  24.  
  25. }
  26.  
  27. #numbers {
  28. position: absolute;
  29. bottom: -50px;
  30. border: 3.75px double #000;
  31. border-radius: 5px;
  32. background: white;
  33. padding-left: 5px;
  34. padding-right: 5px;
  35. padding-bottom: 5px;
  36. left: 10px;
  37. transition: .5s ease;
  38. }
  39.  
  40. #numbers a{
  41. text-decoration: none;
  42. font-weight: bold;
  43. font-family: 'Berkshire Swash', cursive;
  44. color: #F8BEB2;
  45. font-size: 1.5em;
  46. text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
  47.  
  48. }
  49.  
  50. #numbers a:hover{
  51. -webkit-transition: all .5s ease-in-out;
  52. -moz-transition: all .5s ease-in-out;
  53. -o-transition: all .5s ease-in-out;
  54. -ms-transition: all .5s ease-in-out;
  55. color: #fff;
  56. font-style: italic;
  57. }
  58.  
  59. #cont:hover #numbers {
  60. bottom: 10px;
  61. }
  62.  
  63. </style>
  64.  
  65. <div id="cont">
  66.  
  67. <img class=img src="https://cdn.discordapp.com/attachments/849194778729381889/872366441234583572/miya.png">
  68.  
  69. <div id="numbers"> <a href="#i">0</a> <a href="#ii">01</a> <a href="#iii">02</a> </div>
  70.  
  71. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement