Prova-jQuery-JavaScript/project.html at 2023 · alv-robozinhoo/Prova-jQuery-JavaScript · 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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!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">

    <!-- Windows import -->
    <link rel="stylesheet" href="./project.module.css">
    <script src="./project.script.js"></script>

    <!-- Gitpages import -->
    <link rel="stylesheet" href="/project.module.css">
    <script src="/project.script.js"></script>

    <link rel="shortcut icon" href="images/icon.ico" type="image/x-icon">
    <title>Projeto Abas</title>
</head>
<body>
    <header class="hdr">
        <img src="images/mall-logo-new.png" alt="logo">
    </header>
    <main id="main">
        <ul class="list">
            <li class="item">
                <button id="botao_all" onclick="mudarDivisaoDaPagina('all')"><img src="images/ALL_logo.svg" alt="all-logo"></button>
            </li>
            <li class="item">
                <button id="botao_nike" onclick="mudarDivisaoDaPagina('nike')"><img src="images/nike-logo.png" alt="nike-logo"></button>
            </li>
            <li class="item">
                <button id="botao_puma" onclick="mudarDivisaoDaPagina('puma')"><img src="images/puma-logo.png" alt="puma-logo"></button>
            </li>
            <li class="item">
                <button id="botao_adidas" onclick="mudarDivisaoDaPagina('adidas')"><img src="images/adidas-logo.png" alt="adidas-logo"></button>
            </li>
            <li class="item">
                <button id="botao_asics" onclick="mudarDivisaoDaPagina('asics')"><img src="images/asics-logo.png" alt="asics-logo"></button>
            </li>
        </ul>

        <script>
            window.onload = function()
            {
                mudarDivisaoDaPagina('all');
            }
        </script>

        <section id="all" class="catalog" style="display: none;"></section>
        <section id="nike" class="catalog" style="display: none;">
            <div class="card">
                <img src="images/nike-sbdunk.png" alt="sb dunk">
                <div class="info">
                    <p class="desc">Nike SB Dunk <br> Initial D</p>
                    <p class="price">R$640,00</p>
                </div>
            </div>
            <div class="card">
                <img src="images/nike-airforce1.png" alt="air force 1">
                <div class="info">
                    <p class="desc">Nike Air Force <br> White n Black</p>
                    <p class="price">R$599,00</p>
                </div>
            </div>
            <div class="card">
                <img src="images/nike-blazermid77-pomegranate.png" alt="blazermid77 pomegranate">
                <div class="info">
                    <p class="desc">Nike Blazer Mid 77 <br> Pomegranate</p>
                    <p class="price">R$767,00</p>
                </div>
            </div>
        </section>
        <section id="puma" class="catalog" style="display: none;">
            <div class="card">
                <img src="images/puma-smash.png" alt="smash">
                <div class="info">
                    <p class="desc">Puma Smash <br> Black n White</p>
                    <p class="price">R$259,99</p>
                </div>
            </div>
            <div class="card">
                <img src="images/puma-wiredcage.png" alt="wired cage">
                <div class="info">
                    <p class="desc">Puma Wired Cage <br> Black n Grey</p>
                    <p class="price">R$201,84</p>
                </div>
            </div>
            <div class="card">
                <img src="images/puma-shuffle-bdp.png" alt="shuffle bdp">
                <div class="info">
                    <p class="desc">Puma Shuffle BDP <br> White</p>
                    <p class="price">R$309,90</p>
                </div>
            </div>
        </section>
        <section id="adidas" class="catalog" style="display: none;">
            <div class="card">
                <img src="images/adidas-forum.png" alt="forum">
                <div class="info">
                    <p class="desc">Adidas Forum <br> White</p>
                    <p class="price">R$350,90</p>
                </div>
            </div>
            <div class="card">
                <img src="images/adidas-own-the-game-ii.png" alt="own the game II">
                <div class="info">
                    <p class="desc">Adidas Own The Game 2.0 </p>
                    <p class="price">R$341,99</p>
                </div>
            </div>
            <div class="card">
                <img src="images/adidas-grandcourt-base.png" alt="grand court base">
                <div class="info">
                    <p class="desc">Adidas Grand Court Base</p>
                    <p class="price">R$229,99</p>
                </div>
            </div>
        </section>
        <section id="asics" class="catalog" style="display: none;">
            <div class="card">
                <img src="images/asics-japans.png" alt="japan s">
                <div class="info">
                    <p class="desc">Asics Japan S <br> WRB</p>
                    <p class="price">R$299,00</p>
                </div>
            </div>
            <div class="card">
                <img src="images/asics-chuteira.png" alt="chuteira">
                <div class="info">
                    <p class="desc">Chuteira Asics <br> White n Blue</p>
                    <p class="price">R$439,00</p>
                </div>
            </div>
        </section>
    </main>
</body>
</html>