9 html (Python) - myCompiler

Fork
<!DOCTYPE html>
<html lang="pt-br">

<head>

    <meta charset="UTF-8">

    <title>Catálogo de Filmes</title>

    <style>

        body {
            font-family: Arial;
            margin: 0;
            background-color: #eeeeee;
        }

        /* MENU */

        nav {
            background-color: #222222;
            padding: 15px;
            text-align: center;
        }

        nav a {
            color: white;
            text-decoration: none;
            margin: 15px;
            font-weight: bold;
        }

        nav a:hover {
            color: #ff9900;
        }

        /* TÍTULO */

        h1 {
            text-align: center;
            color: #333333;
            padding: 20px;
        }

        /* CATEGORIA */

        .categoria {
            width: 80%;
            margin: 30px auto;
            background-color: white;
            padding: 20px;
            border-radius: 10px;
        }

        .categoria h2 {
            color: #cc0000;
        }

        /* FILMES */

        .filme {
            border: 1px solid #cccccc;
            padding: 15px;
            margin: 15px 0;
        }

        .filme h3 {
            color: #333333;
        }

        .trailer {
            background-color: #cc0000;
            color: white;
            padding: 8px;
            text-decoration: none;
            display: inline-block;
        }

        .trailer:hover {
            background-color: #770000;
        }

    </style>

</head>

<body>


    <!-- MENU DE NAVEGAÇÃO -->

    <nav>

        <a href="#acao">Ação</a>

        <a href="#comedia">Comédia</a>

        <a href="#ficcao">Ficção Científica</a>

    </nav>


    <h1>🎬 Catálogo de Filmes</h1>


    <!-- CATEGORIA AÇÃO -->

    <section id="acao" class="categoria">

        <h2>🎯 Ação</h2>


        <div class="filme">

            <h3>John Wick</h3>

            <p>
                Um ex-assassino volta à ação e enfrenta
                diversos inimigos em busca de vingança.
            </p>

            <a class="trailer"
               href="https://[Log in to view URL]"
               target="_blank">

                Assistir trailer

            </a>

        </div>


        <div class="filme">

            <h3>Velozes e Furiosos</h3>

            <p>
                Uma equipe de pilotos participa de corridas
                e missões envolvendo carros e muita ação.
            </p>

            <a class="trailer"
               href="https://[Log in to view URL]"
               target="_blank">

                Assistir trailer

            </a>

        </div>

    </section>


    <!-- CATEGORIA COMÉDIA -->

    <section id="comedia" class="categoria">

        <h2>😂 Comédia</h2>


        <div class="filme">

            <h3>As Branquelas</h3>

            <p>
                Dois agentes precisam se disfarçar e acabam
                vivendo diversas situações engraçadas.
            </p>

            <a class="trailer"
               href="https://[Log in to view URL]"
               target="_blank">

                Assistir trailer

            </a>

        </div>


        <div class="filme">

            <h3>Todo Mundo em Pânico</h3>

            <p>
                Uma comédia que brinca com situações
                comuns dos filmes de terror.
            </p>

            <a class="trailer"
               href="https://[Log in to view URL]"
               target="_blank">

                Assistir trailer

            </a>

        </div>

    </section>


    <!-- CATEGORIA FICÇÃO CIENTÍFICA -->

    <section id="ficcao" class="categoria">

        <h2>🚀 Ficção Científica</h2>


        <div class="filme">

            <h3>Interestelar</h3>

            <p>
                Astronautas viajam pelo espaço em busca
                de um novo planeta para a humanidade.
            </p>

            <a class="trailer"
               href="https://[Log in to view URL]"
               target="_blank">

                Assistir trailer

            </a>

        </div>


        <div class="filme">

            <h3>Matrix</h3>

            <p>
                Um homem descobre que a realidade em que
                vive pode ser uma grande simulação.
            </p>

            <a class="trailer"
               href="https://[Log in to view URL]"
               target="_blank">

                Assistir trailer

            </a>

        </div>

    </section>


</body>

</html>
Fork
Embed on website
