test.css 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. .container {
  2. max-width: 960px;
  3. }
  4. /*
  5. * Custom translucent site header
  6. */
  7. .site-header {
  8. background-color: rgba(0, 0, 0, .85);
  9. -webkit-backdrop-filter: saturate(180%) blur(20px);
  10. backdrop-filter: saturate(180%) blur(20px);
  11. }
  12. .site-header a {
  13. color: #999;
  14. transition: ease-in-out color .15s;
  15. }
  16. .site-header a:hover {
  17. color: #fff;
  18. text-decoration: none;
  19. }
  20. /*
  21. * Dummy devices (replace them with your own or something else entirely!)
  22. */
  23. .product-device {
  24. position: absolute;
  25. right: 10%;
  26. bottom: -30%;
  27. width: 300px;
  28. height: 540px;
  29. background-color: #333;
  30. border-radius: 21px;
  31. -webkit-transform: rotate(30deg);
  32. transform: rotate(30deg);
  33. }
  34. .product-device::before {
  35. position: absolute;
  36. top: 10%;
  37. right: 10px;
  38. bottom: 10%;
  39. left: 10px;
  40. content: "";
  41. background-color: rgba(255, 255, 255, .1);
  42. border-radius: 5px;
  43. }
  44. .product-device-2 {
  45. top: -25%;
  46. right: auto;
  47. bottom: 0;
  48. left: 5%;
  49. background-color: #e5e5e5;
  50. }
  51. /*
  52. * Extra utilities
  53. */
  54. .border-top { border-top: 1px solid #e5e5e5; }
  55. .border-bottom { border-bottom: 1px solid #e5e5e5; }
  56. .box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }
  57. .flex-equal > * {
  58. -ms-flex: 1;
  59. -webkit-box-flex: 1;
  60. flex: 1;
  61. }
  62. @media (min-width: 768px) {
  63. .flex-md-equal > * {
  64. -ms-flex: 1;
  65. -webkit-box-flex: 1;
  66. flex: 1;
  67. }
  68. }
  69. .overflow-hidden { overflow: hidden; }