Card by Hoseinnaqvi
This card was created for One <div> challenge
#e8e8e8
1.one-div { 2 margin-top: 40px; 3 width: 300px; 4 height: 300px; 5 background-image: linear-gradient(to right,red,orange); 6 border-radius: 40%; 7 box-shadow: 0px 0px 10px black; 8 display: flex; 9 justify-content: center; 10 align-items: center; 11 flex-direction: row; 12} 13 14.one-div::before { 15 content: ''; 16 height: 90px; 17 width: 90px; 18 border-radius: 0 40% 0 60%; 19 background-color: green; 20 position: absolute; 21 top: 5%; 22 left: 42%; 23 box-shadow: 0px -3px 6px rgba(4, 4, 4, 0.695); 24 z-index: -1; 25} 26 27.one-div::after { 28 content: '๐'; 29 filter: hue-rotate(130deg); 30 font-size: 10em; 31 font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; 32 border-radius: 0 40% 0 60%; 33 text-align: center; 34 top: 33%; 35 left: 37%; 36 animation: txt 1s infinite alternate; 37} 38 39@keyframes txt { 40 0% { 41 opacity: 0.1; 42 } 43 44 100% { 45 opacity: 1; 46 } 47} 48 49@keyframes intro { 50 0% { 51 top: -100px; 52 } 53 54 50% { 55 top: -50px; 56 } 57 58 100% { 59 top: 0px; 60 } 61} 62
ย
503 views
503 views
MIT License