#212121
1.cardm { 2 position: absolute; 3 display: flex; 4 align-items: center; 5 justify-content: center; 6 top: 46.64%; 7 left: 50%; 8} 9 10.card { 11 position: absolute; 12 width: 250px; 13 height: 130px; 14 border-radius: 25px; 15 background: whitesmoke; 16 color: black; 17 z-index: 2; 18 transition: .4s ease-in-out; 19} 20 21.weather { 22 position: relative; 23 margin: 1em; 24} 25 26.main { 27 font-size: 2em; 28 position: relative; 29 top: -3em; 30 left: 4.3em; 31} 32 33.mainsub { 34 position: relative; 35 top: -10.2em; 36 left: 14em; 37 font-size: 0.6em; 38} 39 40.card2 { 41 position: absolute; 42 display: flex; 43 flex-direction: row; 44 width: 240px; 45 height: 130px; 46 border-radius: 35px; 47 background: white; 48 z-index: -1; 49 transition: .4s ease-in-out; 50} 51 52.card:hover { 53 background-color: #FFE87C; 54 cursor: pointer; 55} 56 57.card:hover + .card2 { 58 height: 300px; 59 border-bottom-left-radius: 0px; 60 border-bottom-right-radius: 0px; 61} 62 63.card:hover + .card2 .lower { 64 top: 20.2em; 65} 66 67.upper { 68 display: flex; 69 flex-direction: row; 70 position: relative; 71 color: black; 72 left: 1.8em; 73 top: 0.5em; 74 gap: 4em; 75} 76 77.humiditytext { 78 position: relative; 79 left: 3.6em; 80 top: 2.7em; 81 font-size: 0.6em; 82} 83 84.airtext { 85 position: relative; 86 left: 3.8em; 87 top: 2.7em; 88 font-size: 0.6em; 89} 90 91.lower { 92 display: flex; 93 flex-direction: row; 94 position: absolute; 95 text-align: center; 96 color: black; 97 left: 3em; 98 top: 1em; 99 margin-top: 0.7em; 100 font-size: 0.7em; 101 transition: .4s ease-in-out; 102} 103 104.aqi { 105 margin-right: 3.25em; 106} 107 108.realfeel { 109 margin-right: 1.8em; 110} 111 112.card3 { 113 position: absolute; 114 display: flex; 115 flex-direction: row; 116 justify-content: center; 117 align-items: center; 118 width: 240px; 119 height: 30px; 120 top: 4.7em; 121 left: -2.4em; 122 font-size: 1.24em; 123 border-bottom-left-radius: 35px; 124 border-bottom-right-radius: 35px; 125 background: limegreen; 126 transition: .4s ease-in-out; 127}
Comments
MIT License