fanmobile.html 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>Lakes' Fanpages (Mobile)</title>
  6. <link rel="icon" href="favicon.png">
  7. </head>
  8. <body>
  9. <a href="index.html"><div class="otherpages">Home</div></a>
  10. <a href="/aboutme.html"><div class="otherpages">About Me</div></a>
  11. <a href="art.html"><div class="otherpages">Art</div></a>
  12. <a href="/blog.html"><div class="otherpages">Blogging</div></a>
  13. <a href="logcabin.html"><div class="otherpages">Chatroom</div></a>
  14. <a href="donate.html"><div class="otherpages">Fundraisers</div></a>
  15. <a href="extragraphics.html"><div class="otherpages">GIF Graphics</div></a>
  16. <a href="guestbook.html"><div class="otherpages">Guestbook</div></a>
  17. <a href="musicofwhenever.html"><div class="otherpages">Music of Whenever</div></a>
  18. <a href="/coolsitesandmutuals.html"><div class="otherpages">Other Sites</div></a>
  19. <main>
  20. <div class="iframe-container">
  21. <iframe src="fanpages/index.html" style="overflow-y: scroll;"></iframe>
  22. </div>
  23. </main>
  24. </body>
  25. </html>
  26. <style>
  27. body {
  28. background-image: url(metal003.gif);
  29. background-repeat: repeat;
  30. font-family: TheNitpickyCat;
  31. }
  32. @font-face {
  33. font-family: TheNitpickyCat;
  34. src: url(TheNitpickyCat3.ttf);
  35. }
  36. .otherpages
  37. {
  38. background: linear-gradient(to bottom, rgba(216,224,222,1) 0%,rgba(174,191,188,1) 22%,rgba(153,175,171,1) 33%,rgba(142,166,162,1) 50%,rgba(130,157,152,1) 67%,rgba(78,92,90,1) 82%,rgba(14,14,14,1) 100%);
  39. border: none;
  40. border-radius: 20px;
  41. color: white;
  42. padding: 15px 32px;
  43. text-align: center;
  44. text-decoration: none;
  45. display: inline-block;
  46. font-size: 16px;
  47. box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  48. text-shadow: 2px 2px 5px black;
  49. }
  50. .otherpages:hover {
  51. filter: brightness(87%);
  52. transition-duration: 0.3s;
  53. transform: scale(0.9);
  54. }
  55. .iframe-container {
  56. background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(30,87,153,0.96) 20%,rgba(41,137,216,0.9) 50%,rgba(30,87,153,0.84) 80%,rgba(30,87,153,0.8) 97%);
  57. width: 370px;
  58. height: 640px;
  59. box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  60. }
  61. .iframe-container iframe {
  62. position: absolute;
  63. align-items: center;
  64. justify-content: center;
  65. padding: 10px;
  66. width: 350px;
  67. height: 620px;
  68. border: 10px;
  69. box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  70. }