Programando-com-amor-/comprar.html at main · AFREIRE-SF/Programando-com-amor- · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!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>Terras Distantes - Taberna</title>
    <link rel="stylesheet" href="style.css">
   </head>
<body>
    <div class="center">
        <div class="logo"> <img src="img/c.png "></div>
            <div class="menu">
              <a href="index.html">Início</a>
              <a href="parabens.html">Continuar a missão?</a>

            </div>
    </div>
      <!-- cabeçalho -->
      <header class="header-com">
        <h1>Taberna dos Druid's Cadman</h1>
            </header>


            <!-- Grid de produtos-->
            <main class="container-comprar">
                <section class="products-container">
                    <div class="card">
                        <div class="product-image" id="img-1"></div>
                            <h3>Saliva de pinta</h3>
                            <p>Esta saliva é retirada das glândulas de um dos cachorros mais perigosos do mundo, <strong>o Pinscher!</strong></p>
                            <p>
                                R$<span class="bold"> 129,99</span>
                            </p>
                            <a href="#" class="botao-b">Comprar</a>
                        </div>
                    <div class="card">
                        <div class="product-image" id="img-2"></div>
                            <h3>Camaradinha</h3>
                            <p>Este amigo ajuda a atravessar paredes e assusta os inimigos <strong>Não</strong> se engane com a carinha dele!</p>
                            <p>
                                R$<span class="bold"> 204,99</span>
                            </p>
                            <a href="#" class="botao-b"> Comprar</a>
                        </div>

                    <div class="card">
                        <div class="product-image" id="img-3"> </div>
                            <h3>Morcego-Drone</h3>
                            <p>Este amigo possui uma visão aguçada<strong> mas acompanha defeitos</strong> por exemplo, Guinchar muito!</p>
                            <p>
                                R$<span class="bold"> 501,99</span>
                            </p>
                            <a href="#" class="botao-b"> Comprar</a>
                        </div>

                    <div class="card">
                        <div class="product-image" id="img-4"></div>
                            <h3>Felino Negro</h3>
                            <p>Este amigo possui uma boa intuição para o perigo,<strong>mas normalmente</strong> ele foge... e você que se foda!</p>
                            <p>
                                R$<span class="bold"> 129,99</span>
                            </p>
                            <a href="#" class="botao-b"> Comprar</a>
                        </div>


                </section>
            </main>

    <footer class="footer-comprar">
        <p>
            <span class="bold">A.Freire</span>&copy;2022</p>
    </footer>


</body>
</html>