{"html":"

\n \n \n \n \n \n \n \n

Sunny

36°

42°/28°

23:56

MON 08-23

A Coruña

\n \n \n \n \n

\n","css":".card {\n display: flex;\n flex-direction: column;\n align-items: center;\n height: 180px;\n width: 280px;\n border-radius: 25px;\n background: lightgrey;\n overflow: hidden;\n transition: 100ms ease;\n box-shadow: rgba(0, 0, 0, 0.15) 2px 3px 4px;\n}\n\n/* ---------- Info section ---------- */\n\n.info-section {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n height: 75%;\n color: white;\n}\n\n.left-side {\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n height: 100%;\n z-index: 1;\n padding-left: 18px;\n}\n\nbutton {\n display: block;\n border: none;\n background: transparent;\n}\n\n.weather {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: 5px;\n}\n\n.weather div {\n display: flex;\n align-items: center;\n}\n\n.weather div:nth-child(1) {\n width: 40%;\n height: auto;\n}\n\n.temperature {\n font-size: 34pt;\n font-weight: 500;\n line-height: 8%;\n}\n\n.right-side {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n justify-content: space-around;\n height: 100%;\n padding-right: 18px;\n z-index: 1;\n}\n\n.right-side > div {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n}\n\n.hour {\n font-size: 19pt;\n line-height: 1em;\n}\n\n.date {\n font-size: 15px;\n}\n\n/* ---------- Background ---------- */\n.background-design {\n position: absolute;\n height: 100%;\n width: 100%;\n background-color: #ec7263;\n overflow: hidden;\n}\n\n.circle {\n background-color: #efc745;\n}\n\n.circle:nth-child(1) {\n position: absolute;\n top: -80%;\n right: -50%;\n width: 300px;\n height: 300px;\n opacity: 0.4;\n border-radius: 50%;\n}\n\n.circle:nth-child(2) {\n position: absolute;\n top: -70%;\n right: -30%;\n width: 210px;\n height: 210px;\n opacity: 0.4;\n border-radius: 50%;\n}\n\n.circle:nth-child(3) {\n position: absolute;\n top: -35%;\n right: -8%;\n width: 100px;\n height: 100px;\n opacity: 1;\n border-radius: 50%;\n}\n\n/* ---------- Days section ---------- */\n.days-section {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n height: 25%;\n background-color: #974859;\n gap: 2px;\n box-shadow: inset 0px 2px 5px #974859;\n}\n\n.days-section button {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n background-color: #a75265;\n box-shadow: inset 0px 2px 5px #974859;\n cursor: pointer;\n transition: 100ms ease;\n gap: 5px;\n}\n\n.days-section button:hover {\n scale: 0.9;\n border-radius: 10px;\n}\n\n.days-section .day {\n font-size: 10pt;\n font-weight: 500;\n color: white;\n opacity: 0.7;\n}\n\n.icon-weather-day {\n display: flex;\n align-items: center;\n width: 20px;\n height: 100%;\n}\n"}

mean-dolphin-87

👁 实时预览

📝 源代码