Projeto_grupo1/index.html at main · srssoares/Projeto_grupo1 · 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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ibar</title>
    <link rel="icon" href="./img/Green_Creative_Music_Logo.webp">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="stylei.css">
    <script src="script.js" defer></script>
</head>
<body>
    <header class="navbar">
        <div class="logo">
            <img src="./img/logo.png" alt="Logo Ibar" width="80">
        </div>
        <div class="menu-toggle" id="mobile-menu">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </div>
        <nav class="nav-links">
            <ul>
                <li class="drop-hover"><a href="./index.html">Página Inicial<i class="bi bi-caret-down-fill"></i></a>
                    <div class="drop">
                        <a href="#testimonials">Depoimentos</a>
                        <a href="#about-us">Sobre Nós</a>

                    </div>
                </li>
                <li>
                    <a href="./encontre_um_artista.html">Encontre um Artista</a>
                </li>
                <li>
                    <a href="./servico.html">Serviços</a>
                </li>
                <li>
                    <a href="./fale_conosco.html">Fale Conosco</a>
                </li>
            </ul>
        </nav>

        <div class="auth-links">
            <a href="./login.html">Entrar</a>
            <a href="./cadastros.html">Cadastre-se</a>
        </div>
    </header>

    <!-- Seção do título e imagem de fundo -->
    <section class="hero">
        <div class="container">
            <h1 class="display-4">Conectando talentos, <span class="sublinhado">criando</span> experiências</h1>
        </div>
    </section>

    <!--Seção resumo da página-->
    <section class="py-5">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6 papel">
                    <h2>Estamos aqui para ajudar você a encontrar o profissional perfeito para a sua necessidade</h2>
                    <p>Criada para conectar músicos a bares e eventos, nossa plataforma facilita a comunicação e a contratação de artistas, tornando a música ao vivo acessível e vibrante para todos.</p>
                </div>
                <div class="col-md-6 papel-imagem">
                    <img src="./img/pexels-yankrukov-9009532.jpg" class="img-fluid" alt="Imagem Lado Direito" style="width: 15cm; height: 20cm; object-fit: cover;">
                </div>
            </div>
        </div>
    </section>

    <!-- Seção de compartilhamento de talento -->
    <section id="share-talent" class="share-talent">
        <div class="share-talent-content">
            <h2>Compartilhe seu talento</h2>
            <div class="share-talent-info">
                <div class="share-talent-item">Dê vida aos seus sonhos</div>
                <div class="share-talent-item">Compartilhe seu talento com outras pessoas</div>
                <div class="share-talent-item">Amplie sua rede</div>
            </div>
            <button class="register-button">Cadastre-se</button>
        </div>
    </section>

    <!-- Seção de depoimentos -->
    <section id="testimonials" class="testimonials">
        <h2>O que os nossos usuários estão dizendo</h2>
        <div class="testimonial-items">
            <div class="testimonial-item">
                <img src="./img/usuario1.jpg" class="testimonial-img" alt="Foto Usuário 1">
                <h3>Gustavo L.</h3>
                <p>"Graças à plataforma, consegui fechar várias apresentações e expandir meu público. A contratação ficou muito mais fácil e rápida!"</p>
            </div>
            <div class="testimonial-item">
                <img src="./img/usuario2.jpg" class="testimonial-img" alt="Foto Usuário 2">
                <h3>Ariel</h3>
                <p>"Como artista trans, a plataforma me deu visibilidade e oportunidades que antes eram difíceis de alcançar. Agora, posso me conectar com eventos inclusivos e encontar locais que celebram a diversidade. Isso tem sido fundamental para o meu crescimento profissional e pessoal."</p>
            </div>
            <div class="testimonial-item">
                <img src="./img/usuaria3.jpg" class="testimonial-img" alt="Foto Usuário 3">
                <h3>Dandara</h3>
                <p>"A plataforma facilitou muito a minha vida como música. Graças a isso, tenho tocado em eventos incríveis e alcançado um público maior."</p>

            </div>
    </section>

<!-- Seção do título e imagem de fundo -->
<section class="hero-servicos">
    <div class="container">
        <h1 class="display-4">A música nos conecta.</h1>
    </div>
</section>

<main class="main">
    <section class="py-5 servicos">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <h2>Venha conhecer a maior comunidade musical do Brasil</h2>
                    <p>Conte com nossa AI para encontrar o que você precisa. Cadastre-se agora e baixe nosso app gratuitamente.</p>
                </div>
            </div>
        </div>
    </section>
    <section class="paineis">
        <figure class="card">
            <img src="./img/banda2.jpg" class="image-register-service" alt="homen cantando para a multidão">
            <figcaption>Encontre o happy hour perfeito para você, sua família e amigos.</figcaption>

        </figure>
        <figure class="card">
            <img src="./img/dj2.jpg" class="image-register-service" alt="dj tocando para várias pessoas">
            <figcaption>Contrate o profissional ideal para seu estabelecimento ou evento.</figcaption>

        </figure>
        <figure class="card">
            <img src="./img/jazz.jpg" class="image-register-service" alt="mulher cantando sentada">
            <figcaption>Divulgue seu talento e descubra novas oportunidades de trabalho.</figcaption>

        </figure>
    </section>
</main>

    <!-- Seção sobre nós -->
    <section id="about-us" class="about-us">

        <div class="about-us-text">
            <h2>Sobre Nós</h2>
            <p>Somos uma plataforma de intermediação de serviços musicais dedicada a conectar músicos talentosos com eventos e bares que necessitam de cantores e bandas. Nosso objetivo é facilitar a comunicação, negociação e contratação de artistas, proporcionando uma experiência única e memorável para todos os envolvidos. Unimos a paixão pela música à necessidade de entretenimento de qualidade, criando oportunidades para músicos e organizadores de eventos se encontrarem e realizarem shows inesquecíveis.</p>
        </div>
        <div class="about-us-image">
            <img src="./img/sobre nós.jpg" alt="Imagem Sobre Nós" style="width: 15cm; height: 20cm; object-fit: cover;">
        </div>
    </section>


    <footer class="footer">
        <div class="footer-content">
            <div class="left">
                <div class="logo">Ibar</div>
                <div>© 2024 Ibar. Todos os direitos reservados.</div>
                <div>Contato: <a href="mailto:contato@ibar.com.br">contato@ibar.com.br</a></div>
            </div>
            <div class="center social-icons">
                <a href="#" title="Facebook"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z"/></svg></a>
                <a href="#" title="Instagram"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg></a>
                <a href="mailto:contato@ibar.com.br" title="Email"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/></svg></a>
                <a href="#" title="WhatsApp"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7 .9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"/></svg></a>
            </div>
            <div class="right">
                <div>Baixe nosso App</div>
                <div class="app-links">
                    Disponível para iOS e Android:<br>
                    <a href="#">App Store</a><br>
                    <a href="#">Google Play</a>
                </div>
            </div>
        </div>
    </footer>

</body>
</html>