index.css 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. body {
  2. background: url('background_1.jpg');
  3. display: flex;
  4. flex-direction: row;
  5. flex: auto;
  6. justify-content: center;
  7. align-items: center;
  8. padding: 0 20px;
  9. box-sizing: border-box;
  10. position: fixed;
  11. top: 0;
  12. left: 0;
  13. right: 0;
  14. bottom: 0;
  15. }
  16. #striped {
  17. background-image: repeating-linear-gradient(
  18. 45deg,
  19. white,
  20. white 5px,
  21. #ea000e 5px,
  22. #ea000e 25px,
  23. white 25px,
  24. white 30px,
  25. #0083ff 30px,
  26. #0083ff 50px
  27. );
  28. height: 350px;
  29. width: 480px;
  30. }
  31. #white {
  32. display: flex;
  33. justify-content: center;
  34. align-items: center;
  35. flex-direction: column;
  36. height: 100%;
  37. background-color: white;
  38. margin: 0 10px;
  39. padding: 1px 10px 0 10px;
  40. }
  41. #label {
  42. background: #0297f8;
  43. border: 1px solid #0297f8;
  44. color: white;
  45. font-size: 24px;
  46. font-weight: 500;
  47. height: 60px;
  48. width: 200px;
  49. display: flex;
  50. justify-content: center;
  51. align-items: center;
  52. }
  53. #input {
  54. display: none;
  55. }
  56. #url {
  57. flex: 1;
  58. width: 100%;
  59. height: 32px;
  60. font-size: 24px;
  61. margin-top: 1em;
  62. }
  63. .button {
  64. flex: 1;
  65. display: block;
  66. background: #0297f8;
  67. border: 1px solid #0297f8;
  68. color: white;
  69. font-size: 24px;
  70. font-weight: 500;
  71. width: 95%;
  72. height: 32px;
  73. margin-top: 1em;
  74. }
  75. #send-another {
  76. margin-bottom: 1em;
  77. }