Sitio web del tiempo

2,626 0 Andev.web Seguir

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Recomendado

26 August 2025

Plantilla HTML para sitio web de películas

24 August 2025

Especificaciones del coche (Acordeón) HTML

18 October 2024

Plantilla de sitio web de cartera HTML CSS

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Andev Web</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main>
        <form>
            <input type="text" id="name" autocomplete="off">
            <button>
                <i class="fa-solid fa-magnifying-glass"></i>
            </button>
        </form>
        <section class="result">

<figure class="name">
                <figcaption>London</figcaption> 
                <img src="https://flagsapi.com/GB/shiny/32.png">
            </figure>

<figure class="temperature">
                <img src="https://openweathermap.org/img/wn/10d@4x.png">
                <figcaption>
                    <span>31</span>
                    <sup>o</sup>
                </figcaption> 
            </figure>
            <p class="description">overcast clouds</p>
            <ul>
                <li>
                    <span>clouds</span>
                    <i class="fa-solid fa-cloud"></i>
                    <span id="clouds">98</span>%
                </li>
                <li>
                    <span>humidity</span>
                    <i class="fa-solid fa-droplet"></i>
                    <span id="humidity">98</span>%
                </li>
                <li>
                    <span>pressure</span>
                    <i class="fa-solid fa-gauge"></i>
                    <span id="pressure">1011</span>hPa
                </li>
            </ul>
        </section>
    </main>

CSS

body{
    margin: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: 
        linear-gradient(
            to bottom,
            #dcdcdc 50%,
            #e9e9e9 50%
        );
    font-family: sans-serif;
}
*{
    padding: 0;
    margin: 0;
}
main{
    width: 300px;
    height: max-content;
    min-height: 300px;
    background-color: #f7f7f7;
    border-radius: 30px;
    box-shadow: 0 30px 50px #5553;
    padding: 30px;
    box-sizing: border-box;
}
main form{
    border: 1px solid #5552;
    display: flex;
    border-radius: 30px;
    justify-content: space-between;
}
main form input, 
main form button{
    border: none;
    background-color: transparent;
    outline: none;
    padding: 10px;
    box-sizing: border-box;
}
main form i{
    opacity: 0.7;
}
main .result{
    padding-top: 20px;
    text-align: center;
}
main .result .name{
    font-weight: bold;
    font-size: large;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
main .temperature img{
    width: 150px;
    filter: drop-shadow(0 10px 50px #555);
}
main .temperature figcaption{
    font-size: 3em;
}
main .description{
    padding: 10px 0 30px;
}
main ul{
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
main li{
    background-color: #f78a55;
    color: #fff;
    border-radius: 10px;
    padding: 20px 10px;
    background-image: linear-gradient(
        to bottom,
        transparent 50%,
        #0003 50%
    );
    font-weight: bold;
    font-size: small;
}
main ul li i{
    font-size: 2em;
    margin: 20px 0;
    display: block!important;
}
main li:nth-child(2){
    background-color: #b56291;
}
main li:nth-child(3){
    background-color: #48567b;
}
main.error{
    animation: errorEffect 0.3s linear 1;
}
@keyframes errorEffect{
    0%{
        transform: translate(10px, 5px)
    }
    25%{
        transform: translate(-5px, 0)
    }
    50%{
        transform: translate(8px, 2px)
    }
    75%{
        transform: translate(-2px, 5px)
    }
    100%{
        transform: translate(0, 0); 
    }
}

clouds.innerText = data.clouds.all;
                humidity.innerText = data.main.humidity;
                pressure.innerText = data.main.pressure;
            }else{
                main.classList.add('error');
                setTimeout(() => {
                    main.classList.remove('error');
                }, 1000);
            }
            valueSearch.value = '';
        })
}
const initApp = () => {
    valueSearch.value = 'Washington';
    searchWeather();
}
initApp();

Comments 0

…