#212121
1.container { 2 color: white; 3 position: relative; 4 font-family: sans-serif; 5} 6 7.container::before, 8.container::after { 9 content: ""; 10 background-color: #fab5704c; 11 position: absolute; 12} 13 14.container::before { 15 border-radius: 50%; 16 width: 6rem; 17 height: 6rem; 18 top: 30%; 19 right: 7%; 20} 21 22.container::after { 23 content: ""; 24 position: absolute; 25 height: 3rem; 26 top: 8%; 27 right: 5%; 28 border: 1px solid; 29} 30 31.container .box { 32 width: 11.875em; 33 height: 15.875em; 34 padding: 1rem; 35 background-color: rgba(255, 255, 255, 0.074); 36 border: 1px solid rgba(255, 255, 255, 0.222); 37 -webkit-backdrop-filter: blur(20px); 38 backdrop-filter: blur(20px); 39 border-radius: 0.7rem; 40 transition: all ease 0.3s; 41} 42 43.container .box { 44 display: flex; 45 flex-direction: column; 46 justify-content: space-between; 47} 48 49.container .box .title { 50 font-size: 2rem; 51 font-weight: 500; 52 letter-spacing: 0.1em; 53} 54 55.container .box div strong { 56 display: block; 57 margin-bottom: 0.5rem; 58} 59 60.container .box div p { 61 margin: 0; 62 font-size: 0.9em; 63 font-weight: 300; 64 letter-spacing: 0.1em; 65} 66 67.container .box div span { 68 font-size: 0.7rem; 69 font-weight: 300; 70} 71 72.container .box div span:nth-child(3) { 73 font-weight: 500; 74 margin-right: 0.2rem; 75} 76 77.container .box:hover { 78 box-shadow: 0px 0px 20px 1px #ffbb763f; 79 border: 1px solid rgba(255, 255, 255, 0.454); 80} 81
21K views
21K views
Comments
MIT License