index.html 2.5 KB

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