3.9K views
1.container { 2 height: 300px; 3 width: 300px; 4 border-radius: 10px; 5 box-shadow: 4px 4px 30px rgba(0, 0, 0, .2); 6 display: flex; 7 flex-direction: column; 8 align-items: center; 9 justify-content: space-between; 10 padding: 10px; 11 gap: 5px; 12 background-color: rgba(0, 110, 255, 0.041); 13} 14 15.header { 16 flex: 1; 17 width: 100%; 18 border: 2px dashed royalblue; 19 border-radius: 10px; 20 display: flex; 21 align-items: center; 22 justify-content: center; 23 flex-direction: column; 24} 25 26.header svg { 27 height: 100px; 28} 29 30.header p { 31 text-align: center; 32 color: black; 33} 34 35.footer { 36 background-color: rgba(0, 110, 255, 0.075); 37 width: 100%; 38 height: 40px; 39 padding: 8px; 40 border-radius: 10px; 41 cursor: pointer; 42 display: flex; 43 align-items: center; 44 justify-content: flex-end; 45 color: black; 46 border: none; 47} 48 49.footer svg { 50 height: 130%; 51 fill: royalblue; 52 background-color: rgba(70, 66, 66, 0.103); 53 border-radius: 50%; 54 padding: 2px; 55 cursor: pointer; 56 box-shadow: 0 2px 30px rgba(0, 0, 0, 0.205); 57} 58 59.footer p { 60 flex: 1; 61 text-align: center; 62} 63 64#file { 65 display: none; 66}
MIT License