index.html 2.7 KB

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