Epic Read - Recensioni di libri fa by @daniele - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

maxlengthDetermina il numero massimo di caratteri consentiti in un elemento input
listCollega un elemento input con una lista di opzioni datalist
<html>Tag primario di un documento HTML
<object>Incorpora risorse varie nella pagina web.
typeSpecifica la tipologia/funzione di un elemento.
preloadL'attributo preload indica se precaricare un contenuto audio e video con il documento HTML

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

INFORMATICA - ESERCIZIO 1 RISOLTO

Nuovo sito travel

voti con virgola

davidesimonteonline

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Epic Read - Recensioni di libri fantasy</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        body {
            font-family: 'Roboto', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f9f9f9;
            color: #333;
            line-height: 1.6;
        }
        header {
            background-color: #333;
            color: #fff;
            padding: 10px;
            text-align: center;
        }
        .logo {
            font-size: 25px;
            font-weight: bold;
        }
        nav {
            background-color: #666;
            padding: 10px;
            text-align: left;
        }
        nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: left;
        }
        nav ul li {
            margin: 0 5px;
            position: relative;
        }
        nav ul li a {
            color: #fff;
            text-decoration: none;
            padding: 3.5px;
            display: block;
            transition: all 0.3s ease;
        }
        nav ul li:hover > ul {
            display: block;
        }
        nav ul ul {
            display: none;
            position: absolute;
            top: 100%;
            background-color: #666;
            padding: 10px 0;
            width: 100%;
            left: 0;
        }
        nav ul ul li {
            margin: 0;
        }
        nav ul ul li a {
            padding: 10px;
        }
        nav a:hover {
            text-decoration: underline;
        }
        .container {
            max-width: 800px;
            margin: 20px auto;
            padding: 0 20px;
            display: flex;
            flex-direction: column; /* Imposta la direzione della flessione a colonna */
        }
        .post {
            background-color: #fff;
            padding: 30px;
            margin-bottom: 40px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            text-align: left;
            width: 75%;
            border-left: none; /* Rimuove il bordo sinistro */
            margin-left: 0; /* Imposta il margine sinistro a 0 */
        }
        .post:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .post h2 {
            color: #333;
            margin-bottom: 10px;
        }
        .post p {
            color: #666;
            margin-bottom: 20px;
        }
        .rating {
            color: #f39c12;
        }
        .fa-star {
            color: #f39c12;
        }
        .post-image {
            margin-bottom: 20px;
            text-align: center;
        }
        .post-image img {
            max-width: 100%;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 20px;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <header>
        <div class="logo">Epic Reader</div>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li>
                    <a href="#">Recensioni</a>
                    <ul>
                        <li><a href="#">Fantasy</a></li>
                        <li><a href="#">Fantascienza</a></li>
                        <li><a href="#">Horror</a></li>
                    </ul>
                </li>
                <li><a href="#">Contatti</a></li>
            </ul>
        </nav>
    </header>
    <div class="container">
        <div class="post">
            <div class="post-image">
                <img src="https://via.placeholder.com/600x400" alt="Immagine libro fantasy">
            </div>
            <h2>Recensione: Il Signore degli Anelli</h2>
            <p>Autore: J.R.R. Tolkien</p>
            <p class="rating"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i> 5/5</p>
            <p>Il Signore degli Anelli è un romanzo epico fantasy ambientato in un mondo immaginario creato da Tolkien. È considerato uno dei capolavori della letteratura fantastica.</p>
        </div>
        <div class="post">
            <div class="post-image">
                <img src="https://via.placeholder.com/600x400" alt="Immagine libro fantasy">
            </div>
            <h2>Recensione: Harry Potter e la Pietra Filosofale</h2>
            <p>Autore: J.K. Rowling</p>
            <p class="rating"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i><i class="far fa-star"></i> 4.5/5</p>
            <p>Harry Potter e la Pietra Filosofale è il primo romanzo della serie di Harry Potter. Narra le avventure del giovane mago Harry Potter e dei suoi amici.</p>
        </div>
        <!-- Aggiungere altre recensioni qui -->
    </div>
    <footer>
        <p>&copy; 2024 Epic Read - Tutti i diritti riservati.</p>
    </footer>
</body>
</html>