index.html 2.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>random</title>
  6. <script type="text/javascript" src="/js/jquery.min.js"></script>
  7. <link rel="stylesheet" href="/css/bootstrap.min.css">
  8. <script type="text/javascript" src="/js/bootstrap.min.js"></script>
  9. <link rel="preconnect" href="https://fonts.googleapis.com">
  10. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  11. <link href="https://fonts.googleapis.com/css2?family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700
  12. &family=Noto+Serif+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  13. <link rel="stylesheet" href="/css/style.css">
  14. <style>
  15. html,
  16. body {
  17. width: 100%;
  18. height: 100%;
  19. }
  20. * {
  21. margin: 0;
  22. padding: 0;
  23. }
  24. /*背景模糊*/
  25. .bg {
  26. width: 100%;
  27. height: 100%;
  28. position: relative;
  29. background: url('https://source.unsplash.com/random/1600x900') no-repeat fixed;
  30. background-color: black;
  31. background-size: cover;
  32. opacity: 50;
  33. box-sizing: border-box;
  34. z-index: 1;
  35. }
  36. .bg:after {
  37. content: "";
  38. width: 100%;
  39. height: 100%;
  40. position: absolute;
  41. left: 0;
  42. top: 0;
  43. background: inherit;
  44. /* filter: brightness(150%); */
  45. z-index: 2;
  46. }
  47. .content {
  48. position: absolute;
  49. background: inherit;
  50. text-shadow: -3px -3px 3px rosybrown, 3px 3px 3px royalblue, 3px -3px 5px whitesmoke, -3px 3px 5px whitesmoke, -3px -3px 5px yellow;
  51. filter: blur(50%);
  52. z-index: 3;
  53. }
  54. .shadow {
  55. text-shadow: -3px -3px 3px rosybrown, 3px 3px 3px royalblue, 3px -3px 5px whitesmoke, -3px 3px 5px whitesmoke, -3px -3px 5px yellow;
  56. }
  57. @media screen {
  58. .content {
  59. padding: 20px 5px 5px 5px;
  60. }
  61. }
  62. @media screen and (min-width:699px) {
  63. .content {
  64. padding: 20px 75px 40px 75px;
  65. }
  66. }
  67. @media screen and (min-width:1200px) {
  68. .content {
  69. padding: 20px 150px 40px 150px;
  70. }
  71. }
  72. </style>
  73. </head>
  74. <body itemscope itemtype="http://schema.org/WebPage" style="padding: 0px 0px 0px 0px">
  75. <div class="bg">
  76. <div class="content">
  77. <a class="btn btn-default shadow" href="\fun"><span
  78. class="glyphicon glyphicon-home"></span></a>
  79. <a class="btn btn-default" onclick="location.reload()"><span class="glyphicon glyphicon-refresh"></span></a>
  80. <h1>> schtonn</h1>
  81. </div>
  82. </div>
  83. </body>