<!DOCTYPE html>

<html lang = "pt-br">

<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">
    <link rel = "stylesheet" href = "/public/css/style.css">
    <title> catálogoLivre | Catálogo </title>
</head>

<body>
    <header>
        <div class="content">
            <nav>
                <p class="brand"> catálogo<strong>Livre </strong> </p>

                <ul>
                    <li> <a href = "#catalogar" > Catálogo </a> </li>

                    <li> <a href = "#informar" > Informações </a> </li>

                    <li> <a href = "#criar" > Criar </a> </li>

                    <li> <a href = "#editar" > Editar </a> </li>

                    <button> Login </button>
                </ul>
            </nav>

            <div class = "header-block">
                <div class="text">
                    <h2> Carros <strong>perfeitos</strong>, feitos para você </h2>

                    <p> Porque se contentar com pouco, não faz parte da sua identidade </p>
                </div>

                <img src = "/img/car-header.png" alt = "Audi amarelo">
            </div>
    </header>

    <section class="catalogar" id="catalogo">
        <div class="content">
            <div class="title-wrapper-catalogar">
                <p>Encontre o que você procura</p>
                <h3>Catálogo</h3>
            </div>

            <div class="filter-card">
                <input type="text" class="search-input" placeholder="Escolha o seu favorito"/>
                <button class="search-button">Buscar</button>
            </div>

            <div class="card-wrapper">
                <div class="card-item">
                    <img src = "/img/car-card.png" alt = "Cartão">

                    <div class="car-contend">
                        <h3>Audi Supra TT</h3>
                        <p>Um pedaço do <strong>paraíso</strong></p>
                        <button type="button">Eu quero!</button>
                    </div>
                </div>

                <div class="card-item">
                    <img src = "/img/car-card.png" alt = "Cartão">

                    <div class="car-contend">
                        <h3>Audi Supra TT</h3>
                        <p>Um pedaço do <strong>paraíso</strong></p>
                        <button type="button">Eu quero!</button>
                    </div>
                </div>

                <div class="card-item">
                    <img src = "/img/car-card.png" alt = "Cartão">

                    <div class="car-contend">
                        <h3>Audi Supra TT</h3>
                        <p>Um pedaço do <strong>paraíso</strong></p>
                        <button type="button">Eu quero!</button>
                    </div>
                </div>

                <div class="card-item">
                    <img src = "/img/car-card.png" alt = "Cartão">

                    <div class="car-contend">
                        <h3>Audi Supra TT</h3>
                        <p>Um pedaço do <strong>paraíso</strong></p>
                        <button type="button">Eu quero!</button>
                    </div>
                </div>

                <div class="card-item">
                    <img src = "/img/car-card.png" alt = "Cartão">

                    <div class="car-contend">
                        <h3>Audi Supra TT</h3>
                        <p>Um pedaço do <strong>paraíso</strong></p>
                        <button type="button">Eu quero!</button>
                    </div>
                </div>

                <div class="card-item">
                    <img src = "/img/car-card.png" alt = "Cartão">

                    <div class="car-contend">
                        <h3>Audi Supra TT</h3>
                        <p>Um pedaço do <strong>paraíso</strong></p>
                        <button type="button">Eu quero!</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <footer>
        <div class="main">
            <div class="content footer-links">
                <div class="footer-company">
                    <h4>Empresa</h4>
                    <h6>Sobre</h6>
                    <h6>Contato</h6>
                </div>
                <div class="footer-rental">
                    <h4>Aluguel</h4>
                    <h6>Dirija você mesmo</h6>
                    <h6>Contrate um Chauffer</h6>
                    <h6>Ajuda</h6>
                </div>
                <div class="footer-social">
                    <h4>Fique conectado</h4>
                    <div class="social-icons">
                        <img src="/img/instagram.png" alt="instagram">
                        <img src="/img/facebook.png" alt="facebook">
                    </div>
                </div>
                <div class="footer-contact">
                    <h4>Fale conosco</h4>
                    <h6>+55 41 992237780</h6>
                    <h6>diegocarravetta@icloud.com</h6>
                </div>
            </div>
        </div>
        <div class="last">
            Feito por Diego Carravetta com ajuda do vídeo aula de DevSuperior em 2021
        </div>
    </footer>
</body>

</html>