WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
aplicativo de clima
1433
AmirAliAkrami
Abrir no Editor
Publique Seu Código
Recomendado
22 December 2024
diretórios de carros
19 November 2024
código de revisão do iphone 16
1 December 2024
Botão de ação de chamada Efeito de foco
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) */