WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
application météo
1431
AmirAliAkrami
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
16 April 2024
Carte HTML de l'application
6 December 2024
Application météo
22 May 2025
Application vocale
HTML
Copy
Weather Stats
Period
Last 30 days
7°F
Cool
Warm
Update Settings
Weather Stats
Period
Last 30 days
7°F
Cool
Warm
Update Settings
CSS
Copy
:root { --font-color: #222; --bg-color: #f2f3f7; --button-bg-color: #f2f3f7; --button-shadow: -6px -6px 8px rgba(255, 255, 255, 0.9), 5px 5px 8px rgba(0, 0, 0, 0.07); } [data-theme="dark"] { --font-color: #fff; --bg-color: #181818; --button-bg-color: #121212; --button-shadow: -2px -2px 4px rgba(255, 255, 255, 0.05), 0 0 10px 10px rgba(255, 255, 255, 0.005), 2px 2px 8px rgba(60, 60, 60, 0.1); } html { box-sizing: border-box; font-size: 18px; font-family: 'Roboto', sans-serif; color: var(--font-color); } *, *:before, *:after { box-sizing: inherit; } body { background-color: #f2f2f2; } .color-cool { color: #077dfe; } .color-warm { color: #ff7a00; } .container { display: flex; justify-content: space-evenly; padding-top: 25px; align-items: center; flex-direction: column; } @media screen and (min-width:800px) { .container { flex-direction: row; } } .app-container { background-color: var(--bg-color); border-radius: 40px; box-shadow: -2px -2px 4px 0px #ffffff, 50px 50px 50px 0px rgba(0, 0, 0, .25); display: block; flex: 1; min-height: 500px; max-width: 350px; margin-bottom: 25px; overflow: hidden; padding: 30px; } .app-top-bar { display: flex; align-items: center; margin-bottom: 30px; } .app-heading { color: var(--font-color); display: block; flex: 1; font-size: 28px; font-weight: 800; margin: 0; text-align: center; } button { border: 0; &:focus { border: none; outline: 0 !important; outline-style: none; } } .button { color: var(--font-color); position: relative; border-radius: 15px; background: var(--button-bg-color); font-weight: 700; transition: all 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: var(--button-shadow); cursor: pointer; &.button-link { color: #067CF8; display: block; font-size: 17px; margin: 30px 0 0; padding: 20px 0; width: 100%; } &.button-small { color: #6D6E74; font-size: 22px; line-height: 40px; width: 40px; height: 40px; } &.button-large { display: flex; font-size: 20px; flex-direction: column; padding: 15px; text-align: left; width: 45%; & svg { margin-bottom: 40px; width: 30px; } } } .button-dial { border-radius: 50%; display: flex; height: 270px; margin: 35px auto; align-items: center; justify-content: center; width: 270px; } .button-dial-top { background: var(--button-bg-color); box-shadow: var(--button-shadow); border-radius: 50%; width: 70%; height: 70%; margin: 0 auto; position: absolute; top: 15%; left: 15%; text-align: center; z-index: 5; } .button-dial-label { color: #067CF8; font-size: 28px; fill: #067CF8; position: relative; z-index: 10; } .button-dial-spoke { background-color: rgba(96, 171, 254, 0.6); display: block; height: 2px; width: 83%; position: absolute; margin: 0 auto; z-index: 5; top: 50%; &:nth-child(2) { transform: rotate(30deg); } &:nth-child(3) { transform: rotate(60deg); } &:nth-child(4) { transform: rotate(90deg); } &:nth-child(5) { transform: rotate(120deg); } &:nth-child(6) { transform: rotate(150deg); } } .button-block { align-items: center; display: flex; justify-content: space-between; padding: 15px 24px; width: 100%; span { font-size: 16px; } } .subtle { color: #6D6E74; } .flex-button-container { display: flex; justify-content: space-between; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */