WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Application météo
974
skullbomb
Ouvrir dans l'éditeur
Publiez votre code
Precisa de um site?
Recommandé
24 July 2024
Modèle de site Web d'application
8 September 2024
Carte météo animée
20 June 2025
Interface utilisateur des icônes de lecteur et d'application CSS Glassmorphism
HTML
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Weather App</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="weather-container"> <h1>WEATHER APP</h1> <input type="text" id="city-input" placeholder="Enter city name"> <button id="get-weather">Get Weather</button> <div id="weather-result" class="hidden"> <h2 id="city-name"></h2> <p id="temperature"></p> <p id="condition"></p> <p id="humidity"></p> </div> </div> <script src="script.js"></script> </body> </html>
CSS
Copy
body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #87ceeb; } .weather-container { text-align: center; padding: 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); width: 300px; } .hidden { display: none; } #city-input { padding: 10px; width: 80%; margin-bottom: 10px; font-size: 1em; } button { padding: 10px 20px; font-size: 1em; color: #ffffff; background-color: #007bff; border: none; border-radius: 5px; cursor: pointer; } button:hover { background-color: #005663; } #weather-result p { margin: 5px 0; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
