index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PelisC2</title>
    <link rel="stylesheet" href="./styles.css">
    <script src="https://kit.fontawesome.com/2486c628c2.js" crossorigin="anonymous"></script>
</head>

<body>
    <header class="header__container">

        <div class="nav__container">
            <nav class="nav__contain__info container">

                <a class="nav__logo" href="./index.html">

                    <img src="./img/film-movies-icon.svg" width="50px" alt="">
                    <p>Pelis C2</p>
                </a>
                <a href="#">Películas</a>
            </nav>
        </div>


        <div class="hero__background">

            <form action="" class="form__search">

                <i class="fa-solid fa-magnifying-glass"></i>
                <input id="search" class="search" type="text">

            </form>
        </div>
    </header>


    <main class="main__container">
        <h2 class="hero__tittle">Películas</h2>

        <section id="crearCards" class="cards__container container">

            <div class="card">
                <figure>
                    <img width="200px" src="./img/titanic-1.jpg" alt="">
                </figure>
                <div class="info__card">
                    <h2 class="card__tittle">TITANIC</h2>
                    <p class="gerero">Drama</p>
                    <div class="puntuacion__container">
                        <i class="fa-solid fa-star"></i>
                        <p>8/10</p>
                    </div>
                </div>
            </div>

        </section>

    </main>


    <script src="./main.js"></script>
</body>

</html>