#212121
1.card { 2 position: relative; 3 padding: 10px; 4 font: 500 15px / 15px Almohtarif; 5 vertical-align: baseline; 6 box-sizing: border-box; 7 background: #fff; 8 border-radius: 8px; 9 width: 200px; 10 height: 250px; 11 z-index: 1; 12 transition: all 500ms ease-in-out; 13} 14 15.card::after { 16 content: '2022'; 17 width: 200px; 18 height: 35%; 19 background-color: blue; 20 position: absolute; 21 z-index: -1; 22 left: 0; 23 top: 0; 24 display: flex; 25 font-size: 30px; 26 align-items: center; 27 justify-content: center; 28 text-align: center; 29 color: #fff; 30} 31 32.card::before { 33 content: 'france'; 34 color: #fff; 35 text-transform: uppercase; 36 width: 200px; 37 height: 35%; 38 background-color: red; 39 position: absolute; 40 z-index: -1; 41 right: 0; 42 bottom: 0; 43 text-align: center; 44 display: flex; 45 align-items: center; 46 justify-content: center; 47 font-size: 30px; 48} 49 50.card:hover { 51 transform: scale(1.1); 52} 53 54.card svg { 55 width: 100px; 56 align-items: center; 57 display: flex; 58 justify-content: center; 59 margin-left: auto; 60 margin-right: auto; 61} 62
1.1K views
1.1K views
Comments
MIT License