Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Página Detalhe do Produto/Carrinho

Referente ao curso Guia de estilos: montando páginas com componentes, no capítulo Encerrando a página e atividade Conclusão

por Pablo Embarach Boeira
| 44.1k xp | 9 posts

Oi Matheus, tudo bem?

Segue abaixo meu código como forma de exercício, recriando a página de detalhe do produto.

Re-aproveitei muito do código que criei acompanhado você no curso, mas fiz também minhas próprias criações.

Minha única dificuldade, ou seja, que não consegui resolver, foi o espaçamento final entre a seção que chamei de "similares" com o rodapé, achei que deveria ficar um espaço maior.

Segue abaixo os códigos.

Adicional - adicionei a página "carrinho" também, código segue abaixo. Consegui recriar a página, porem tenho quase certeza que da melhor forma possível.

5 respostas
por Pablo Embarach Boeira
| 44.1k xp | 9 posts

html

<!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">
    <title>Detalhe do Produto | Casa Verde</title>
    <link href="https://fonts.googleapis.com/css2?family=Elsie+Swash+Caps:wght@900&family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/base/base.css">
    <link rel="stylesheet" href="assets/css/componetes/cabecalho.css">
    <link rel="stylesheet" href="assets/css/detalhes/detalhe.css">
    <link rel="stylesheet" href="assets/css/componetes/botoes.css">
    <link rel="stylesheet" href="assets/css/componetes/produto.css">
    <link rel="stylesheet" href="assets/css/componetes/rodape.css">
    <link rel="stylesheet" href="assets/css/detalhes/descricao.css">
    <link rel="stylesheet" href="assets/css/componetes/cartao.css">
</head>
<body>
    <header class="cabecalho container">
        <img src="assets/img/logo.svg" alt="Logo da casa verde" class="cabecalho__logo">
        <a href="#" aria-label="Meu Carrinho">
            <img src="assets/icones/carrinho.svg" alt="Icone do carrinho de compras" class="cabecalho__carrinho">
        </a>
        </header>
    <main>
        <section class="detalhe container">
            <span class="titulo-destaque">Cordyline fruticosa</span>
            <p class="produto__preco">R$ 20,00</p>
            <p class="detalhe__texto texto">Sed arcu risus, posuere viverra imperdiet eu, commodo interdum enim. Suspendisse finibus, quam dictum vestibulum tristique, nisi lectus luctus tellus, eget faucibus</p>
            <img src="assets/img/Detalhe-do-produto 1.png" alt="Foto do produto">
            <button class="botao">Comprar Agora</button>
                <button class="botao botao--alternativo">Adicionar ao carrinho</button>
        </section>
        <section class="descricao">
            <article class="descricao__cartao">
                <span class="descricao__titulo">Descrição do<br> produto</span>
                <p class="descricao__texto texto">Sed arcu risus, posuere viverra imperdiet eu, commodo interdum enim. Suspendisse finibus, quam dictum</p>
                <p class="descricao__texto-destaque">Leia mais</p>
            </article>
        </section>
        <section class="similares container">
            <h2 class="titulo alinhamento--meio">
                Conheça produtos
                <span class="titulo-destaque">similares</span>
            </h2>
            <ul>
                <li class="produto">
                    <img src="assets/img/similares-01.png" alt="Foto do produto" class="produto__imagem">
                    <div class="produto__conteudo">
                        <h3 class="produto__titulo titulo-destaque">Cyperus
                            rotundus</h3>
                        <p class="produto__preco">R$ 20,00</p>
                        <a href="" class="produto__comprar">Comprar<span class="produto__comprar--icone"></span></a>
                    </div>
                </li>
                <li class="produto">
                    <img src="assets/img/similares-02.png" alt="Foto do produto" class="produto__imagem">
                    <div class="produto__conteudo">
                        <h3 class="produto__titulo titulo-destaque">Delairea
                            odorata</h3>
                        <p class="produto__preco">R$ 20,00</p>
                        <a href="" class="produto__comprar">Comprar<span class="produto__comprar--icone"></span></a>
                    </div>
                </li>
                <li class="produto">
                    <img src="assets/img/similares-03.png" alt="Foto do produto" class="produto__imagem">
                    <div class="produto__conteudo">
                        <h3 class="produto__titulo titulo-destaque">Datura
                            metel</h3>
                        <p class="produto__preco">R$ 20,00</p>
                        <a href="" class="produto__comprar">Comprar<span class="produto__comprar--icone"></span></a>
                    </div>
                </li>
            </ul>
        </section>
    </main>
por Pablo Embarach Boeira
| 44.1k xp | 9 posts

css

Detalhe

.detalhe{
    padding-top: 2.5rem;

    margin-bottom: 2.5rem;

    position: relative;
}

.detalhe__texto{
    margin-bottom: 1.55rem;
}

Descrição

.descricao{
    margin-bottom: 1.55rem;
}

.descricao__cartao{
    box-sizing: border-box;

    padding-top: 2rem;
    padding-bottom: 2rem;

    margin-bottom: 5.625rem;

    background-color: var(--branco);

    box-shadow: 10px 10px 30px var(--preto-transparente);
}

.descricao__titulo{
    font-family: var(--familia-titulo-destaque);
    color: var(--preto);
    font-size: var(--tamanho-titulo-destaque);
    font-weight: var(--peso-titulo-destaque);

    display: block;

    margin-top: .75rem;
    margin-bottom: .75rem;
    margin-left: 1rem;
}

.descricao__texto{
    width: 12.5rem;

    margin-left: 1rem;
}

.descricao__texto-destaque{
    width: 12.5rem;

    margin-bottom: 1.55rem;
    margin-left: 1rem;

    color: var(--amarelo);
}

Similares

.similares{
    padding-top: 2.5rem;

    margin-bottom: 5rem;
}
por Pablo Embarach Boeira
| 44.1k xp | 9 posts

HTML Carrinho

<!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">
    <title>Carrinho | Casa Verde</title>
    <link href="https://fonts.googleapis.com/css2?family=Elsie+Swash+Caps:wght@900&family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/carrinho/carinho-base.css">
    <link rel="stylesheet" href="assets/css/componetes/produto.css">
    <link rel="stylesheet" href="assets/css/componetes/botoes.css">
</head>
<body>
    <main>
        <section class="carrinho__base">
            <a href="#"class="titulo__carrinho">Meu carrinho<span class="titulo__x"></span></a>
        </section>
        <section>
            <div class="carrinho__container">
                <img src="assets/img/Detalhe-do-produto 1.png" alt="" class="imagem__carrinho carrinho__cartao">
                <a href="#"class="texto__carrinho">Cordyline fruticosa</a>
                <span class="texto__x"></span>
                <a href="#"class="texto__preco">R$ 20,00</a>
                <a href="#"class="texto__qtd">1 qtd</a>
                <span class="texto__v"></span>
            </div> 
            <div class="carrinho__container">
                <img src="assets/img/Detalhe-do-produto 1.png" alt="" class="imagem__carrinho carrinho__cartao">
                <a href="#"class="texto__carrinho">Cordyline fruticosa</a>
                <span class="texto__x"></span>
                <a href="#"class="texto__preco">R$ 20,00</a>
                <a href="#"class="texto__qtd">1 qtd</a>
                <span class="texto__v"></span>
            </div> 
            <div class="carrinho__container">
                <img src="assets/img/Detalhe-do-produto 1.png" alt="" class="imagem__carrinho carrinho__cartao">
                <a href="#"class="texto__carrinho">Cordyline fruticosa</a>
                <span class="texto__x"></span>
                <a href="#"class="texto__preco">R$ 20,00</a>
                <a href="#"class="texto__qtd">1 qtd</a>
                <span class="texto__v"></span>
            </div> 
        </section>
        <section class="carrinho__base container__valores">
            <p class="texto__preco valor">Valor dos produtos</p>
            <p class="texto__preco valor__preco">R$60,00</p>
            <p class="texto__preco taxa">Taxa de entrega</p>
            <p class="texto__preco taxa__preco">R$10,00</p>
            <p class="texto__carrinho subtotal">Subtotal</p>
            <p class="texto__carrinho subtotal__preco">R$70,00</p>
        </section>
        <section class="carrinho__base">
            <button class="botao">Finalizar compra</button>
        </section>
    </main>
</body>
</html>
por Pablo Embarach Boeira
| 44.1k xp | 9 posts

CSS Carrinho

@import url(../../css/base/_variaveis.css);
@import url(../../css/base/_reset.css);

.carrinho__base{
    box-sizing: border-box;

    background-color: var(--branco);

    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1rem;
}

.titulo__carrinho{
    display: flex;
    align-items: center;

    font-family: var(--familia-titulo-destaque);
    color: var(--preto);
    font-size: var(--tamanho-titulo-destaque);
    font-weight: var(--peso-titulo-destaque);

}

.titulo__x{
    display: flex;
    align-items: center;

    width: 1rem;
    height: 1rem;

    margin-left: 6rem;

    background-image: url(../../icones/fechar.svg);
    background-size: contain;

    background-repeat: no-repeat;
    background-position: center;
}

.carrinho__container{
    display: grid;
    grid-template-columns: 4rem 10rem 3rem 3rem;
    grid-template-rows: 2.5rem 2.5rem;

    box-sizing: border-box;

    background-color: var(--branco);

    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1rem;

    margin-top: 2rem;

    border-bottom-width: 1rem;
    border-bottom: 1px solid var(--cinza)
}

.carrinho__cartao{
    box-sizing: border-box;

    padding-top: 1rem;
    padding-bottom: 1rem;

    background-color: var(--branco);

    box-shadow: 10px 10px 30px var(--preto-transparente);
}

.imagem__carrinho{
    display: grid;
    align-items: flex-start;
    grid-row: span 2;

    width: 4rem;
    height: 4rem;

    margin-bottom: 1.5rem;

    position: relative;
}


.texto__carrinho{
    display: grid;
    align-items: center;
    grid-column: span 2,3;

    width: 12.5rem;

    margin-bottom: 2rem;
    margin-left: 1rem;

    color: var(--preto);

    font-family: var(--familia-corpo);
}

.texto__x{
    display: grid;
    align-items: center;
    grid-column: 4;
    grid-row: 1;


    margin-left: 2rem;

    width: 1rem;
    height: 1rem;

    background-image: url(../../icones/fechar.svg);
    background-size: contain;

    background-repeat: no-repeat;
    background-position: center;
}

.texto__preco{
    display: grid;
    align-items: center;
    grid-column: 2;
    grid-row: 2;

    width: 12.5rem;

    margin-bottom: 2rem;
    margin-left: 1rem;

    color: var(--cinza);
    font-family: var(--familia-corpo);
}

.texto__qtd{
    display: grid;
    align-items: center;
    grid-column: 3;
    grid-row: 2;

    width: 12.5rem;

    margin-bottom: 2rem;
    margin-left: 2rem;

    color: var(--cinza);
    font-family: var(--familia-corpo);
}

.texto__v{
    display: grid;
    align-items: flex-end;
    grid-column: 4;
    grid-row: 2;


    margin-left: 2rem;
    margin-bottom: 2rem;

    width: 1rem;
    height: 1rem;

    background-image: url(../../icones/setabaixo.svg);
    background-size: contain;

    background-repeat: no-repeat;
    background-position: center;
}

.container__valores{
    display: grid;
    grid-template-columns: 1fr 1fr ;
    grid-template-rows: 1fr 1fr 1fr;

    margin-top: 2rem;

    box-sizing: border-box;

    background-color: var(--branco);
}

.valor{
    display: grid;
    grid-column: 1;
    grid-row: 1;
    margin-left: -0.10rem;
}

.valor__preco{
    display: grid;
    grid-column: 2;
    grid-row: 1;
    padding-left: 2.5rem;
}

.taxa{
    display: grid;
    grid-column: 1;
    grid-row: 2;
    margin-left: -0.10rem;
}

.taxa__preco{
    display: grid;
    grid-column: 2;
    grid-row: 2;
    padding-left: 2.5rem;
}

.subtotal{
    display: grid;
    grid-column: 1;
    grid-row: 3;
    margin-left: -0.10rem;
}

.subtotal__preco{
    display: grid;
    grid-column: 2;
    grid-row: 3;
    padding-left: 2.5rem;
}
solução!
por Lorena Garcia
| 8826k xp | 13160 posts
Alura Scuba Team Suporte Educacional

Oi Pablo, tudo bem?

Parabéns por criar as páginas de carrinho e produto e praticar bastante! Gostei muito do seu código, e com certeza você conseguiu consolidar o conhecimento ao fazer esses exercícios.

Espero que tenha curtido a experiência de aprendizado e que tenha postado o seu projeto nas redes sociais, as pessoas precisam ver o trabalho incrível que você fez.

Parabéns mais uma vez.

Um abraço e bons estudos.