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

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

References

animationDefinisce i parametri dell'animazione di un elemento o selettore
<link>Collega il documento corrente con una risorsa esterna
<iframe>Crea un frame all'interno di una pagina HTML.
accept-charsetAttribuisce un tipo di codifica dei caratteri per l'invio dei dati di un form HTML
<datalist>Crea una lista di opzioni pre-definite ed editabili per elementi di input
<!doctype>Dichiara la versione del linguaggio di sviluppo della pagina

Users

Log in to search for users

Explore

Find inspiration

Esercizi 05/03/2024 es1

Heads Or Tails Random Tally

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!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>