Retomada-HTML/index.html at main · pgoncalves01/Retomada-HTML · 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
Claro! Vou adicionar imagens de pratos típicos de comida italiana ao lado dos checkboxes. Aqui está o código HTML modificado:

```html
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Comida Italiana</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f2f2f2;
        }
        header {
            background-color: #E64A19;
            color: white;
            padding: 20px;
            text-align: center;
        }
        section {
            padding: 20px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            margin: 20px auto;
            max-width: 600px;
        }
        h2 {
            color: #E64A19;
        }
        form {
            display: flex;
            flex-direction: column;
        }
        label {
            margin-bottom: 10px;
            font-weight: bold;
            display: flex;
            align-items: center;
        }
        input[type="checkbox"] {
            margin-right: 5px;
        }
        img {
            width: 50px;
            height: auto;
            margin-right: 10px;
            border-radius: 5px;
        }
        button {
            background-color: #E64A19;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            align-self: flex-start;
        }
        button:hover {
            background-color: #FF5722;
        }
        footer {
            background-color: #E64A19;
            color: white;
            text-align: center;
            padding: 10px;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <header>
        <h1>Comida Italiana</h1>
    </header>

    <section>
        <h2>Pratos Típicos</h2>
        <form id="pratos-form">
            <label>
                <img src="pizza.jpg" alt="Pizza">
                <input type="checkbox" id="pizza" name="prato" value="Pizza">
                Pizza
            </label><br>
            <label>
                <img src="pasta.jpg" alt="Pasta">
                <input type="checkbox" id="pasta" name="prato" value="Pasta">
                Pasta
            </label><br>
            <label>
                <img src="risoto.jpg" alt="Risoto">
                <input type="checkbox" id="risoto" name="prato" value="Risoto">
                Risoto
            </label><br>
            <label>
                <img src="lasanha.jpg" alt="Lasanha">
                <input type="checkbox" id="lasanha" name="prato" value="Lasanha">
                Lasanha
            </label><br>
            <label>
                <img src="gnocchi.jpg" alt="Gnocchi">
                <input type="checkbox" id="gnocchi" name="prato" value="Gnocchi">
                Gnocchi
            </label><br>
            <button type="submit">Enviar</button>
        </form>
    </section>

    <footer>
        <p>&copy; 2024 Comida Italiana. Todos os direitos reservados.</p>
    </footer>
</body>
</html>
```

Neste código, adicionei tags `<img>` dentro de cada `<label>`, que exibem as imagens dos pratos. Certifique-se de substituir os caminhos das imagens (`src`) pelos caminhos corretos das imagens que você deseja utilizar.