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

_selfApre collegamenti ipertestuali nella stessa pagina del browser
<a>Inserisce link e collegamenti ipertestuali
mutedL'attributo muted viene utilizzato impostare risorse HTML audio e video con volume muto
<ul>Usato per la creazione di liste non ordinate.
<object>Incorpora risorse varie nella pagina web.
<html>Tag primario di un documento HTML

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Due Sezioni - 4 colori (2x2)

Home principale

Esercizi lezione 19-11-20

dati dell-utente

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>