├── README.md ├── index.html └── style.scss /README.md: -------------------------------------------------------------------------------- 1 | # gridbg 2 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Grid 9 | 10 | 11 |
12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 |
22 | 23 | -------------------------------------------------------------------------------- /style.scss: -------------------------------------------------------------------------------- 1 | .pattern { 2 | z-index: 1; 3 | position: absolute; 4 | top: 0; 5 | right: 0; 6 | width: 100%; 7 | height: 100vh; 8 | overflow: hidden; 9 | background: linear-gradient(45deg, #1b2040, #071029); 10 | overflow: hidden; 11 | 12 | @media (max-width: 1200px) { 13 | height: calc(100vh - var(--site-header-height)); 14 | } 15 | 16 | &:before { 17 | content: ""; 18 | z-index: 2; 19 | position: absolute; 20 | top: 0; 21 | left: 0; 22 | display: block; 23 | width: full; 24 | height: full; 25 | opacity: 0.45; 26 | background: radial-gradient( 27 | rgba(255, 255, 255, 0), 28 | theme("colors.black.500") 29 | ); 30 | } 31 | 32 | &-container { 33 | display: grid; 34 | grid-template-columns: repeat(10, 1fr); 35 | grid-template-rows: repeat(6, 1fr); 36 | width: 1640px; 37 | height: 1080px; 38 | transform: rotate(45deg) scale(1.75) translate3d(19%, -31%, 0); 39 | 40 | @media (max-width: 1440px) { 41 | width: 1140px; 42 | hight: 948px; 43 | } 44 | 45 | @media (max-width: 1200px) { 46 | width: 1000px; 47 | height: 500px; 48 | transform: rotate(45deg) scale(2.75) translate3d(14%, 17%, 0); 49 | } 50 | 51 | @media (max-width: 768px) { 52 | width: 500px; 53 | height: 400px; 54 | transform: rotate(135deg) scale(2.75) translate3d(12%, 1%, 0); 55 | } 56 | 57 | span { 58 | animation: breathe 25s infinite; 59 | 60 | &:nth-child(1) { 61 | position: relative; 62 | grid-column: span 3; 63 | grid-row: span 3; 64 | background: #68ddff; 65 | 66 | &:after { 67 | content: ""; 68 | position: absolute; 69 | top: 0; 70 | left: 0; 71 | width: 100%; 72 | height: calc(100% - 95px); 73 | background: linear-gradient(to right, transparent, #9ae5ff); 74 | } 75 | } 76 | 77 | &:nth-child(2) { 78 | grid-column: span 2; 79 | grid-row: span 3; 80 | background: linear-gradient(45deg, #2c3155, #0c142f); 81 | animation: breathe2 25s infinite; 82 | } 83 | 84 | &:nth-child(3) { 85 | position: relative; 86 | grid-column: span 1; 87 | grid-row: span 3; 88 | background-color: #11173c; 89 | 90 | &:after { 91 | content: ""; 92 | position: absolute; 93 | top: 0; 94 | left: 0; 95 | width: 100%; 96 | height: calc(100% - 95px); 97 | background: linear-gradient(to top, #b5c224, #6ec092, #1cbfd7); 98 | 99 | @media (max-width: 768px) { 100 | height: calc(100% - 35px); 101 | } 102 | } 103 | } 104 | 105 | &:nth-child(4) { 106 | grid-column: span 4; 107 | grid-row: span 7; 108 | background-color: #151a3a; 109 | } 110 | 111 | &:nth-child(5) { 112 | grid-column: span 3; 113 | grid-row: span 2; 114 | background: linear-gradient(to right, #b5c224, #6ec092, #1cbfd7); 115 | } 116 | 117 | &:nth-child(6) { 118 | grid-column: span 2; 119 | grid-row: span 2; 120 | background: linear-gradient(45deg, #2c3155, #0c142f); 121 | animation: breathe2 25s infinite; 122 | } 123 | 124 | &:nth-child(7) { 125 | grid-column: span 1; 126 | grid-row: span 2; 127 | background: linear-gradient(225deg, #b5c224, #6ec092, #1cbfd7); 128 | } 129 | } 130 | } 131 | } 132 | 133 | @keyframes breathe { 134 | 0%, 135 | 100% { 136 | transform: translateY(0); 137 | } 138 | 50% { 139 | transform: translateY(20%); 140 | } 141 | } 142 | 143 | @keyframes breathe2 { 144 | 0%, 145 | 100% { 146 | transform: translateY(0); 147 | } 148 | 50% { 149 | transform: translateY(40%); 150 | } 151 | } --------------------------------------------------------------------------------