contato.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">

    <link rel="stylesheet" href="style.css">

    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet"> 

    <title>contato</title>
</head>
<body>
    <div class="container">
        <header>
            <svg width="219" height="43" viewBox="0 0 219 43" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M31.6533 35.6563L2.42233 15.9911C-0.539878 13.9983 0.467078 9.84916 4.16087 8.87348L35.2281 0.649847C35.8863 0.418249 36.5915 0.34307 37.2853 0.43055C37.9792 0.51803 38.6417 0.765644 39.2177 1.15285C39.7938 1.54005 40.2669 2.05566 40.5978 2.6569C40.9286 3.25814 41.1076 3.92766 41.1199 4.6099L39.2787 32.4971C39.0604 35.8072 34.6155 37.649 31.6533 35.6563Z" fill="#E9327C"/>
                <path d="M22.3821 40.511L5.16124 7.66573C4.76759 6.91434 4.59436 6.07151 4.66067 5.23018C4.72697 4.38887 5.03022 3.58174 5.53698 2.89783C6.04375 2.21392 6.73432 1.6798 7.53253 1.35435C8.3308 1.0289 9.20568 0.924786 10.0608 1.05347L41.9753 5.85734C42.7101 5.96795 43.4075 6.24708 44.01 6.67177C44.6127 7.09647 45.1033 7.65456 45.4416 8.30026C45.7799 8.94595 45.9563 9.66072 45.9562 10.3858C45.9561 11.1109 45.7795 11.8256 45.441 12.4712L30.7392 40.5126C30.3444 41.2618 29.7454 41.8904 29.0082 42.3293C28.2709 42.7681 27.4238 43.0001 26.5601 43C25.6964 42.9999 24.8494 42.7675 24.1124 42.3283C23.3753 41.8892 22.7765 41.2604 22.3821 40.511Z" fill="#1DACE3"/>
                <path d="M41.0418 5.71592L25.1325 3.32114L5.59961 8.4937L13.3961 23.3693L31.6533 35.6563C32.0561 35.9243 32.4991 36.1296 32.9666 36.2649L39.9012 23.0388L41.0418 5.71592Z" fill="#001A49"/>
                <path d="M121.625 9.55524C121.625 8.97848 121.801 8.4147 122.129 7.93518C122.458 7.45559 122.925 7.08183 123.471 6.86115C124.018 6.64045 124.619 6.58271 125.199 6.69522C125.779 6.80774 126.312 7.08544 126.73 7.49325C127.148 7.90105 127.433 8.42066 127.548 8.98632C127.664 9.55198 127.604 10.1383 127.378 10.6711C127.152 11.2039 126.768 11.6594 126.277 11.9797C125.785 12.3002 125.207 12.4712 124.616 12.4712C123.825 12.4634 123.07 12.1536 122.511 11.6084C121.952 11.0633 121.634 10.3261 121.625 9.55524ZM122.124 13.8966H127.109V30.096H122.124V13.8966Z" fill="#001A49"/>
                <path d="M148.632 21.9963C148.691 23.0671 148.531 24.1384 148.162 25.1488C147.794 26.1591 147.225 27.0885 146.487 27.8834C145.75 28.6785 144.858 29.3233 143.864 29.7811C142.87 30.2387 141.792 30.5003 140.695 30.5505C139.77 30.5995 138.847 30.4476 137.991 30.1057C137.135 29.7638 136.367 29.2404 135.744 28.5737V36.5764H130.762V13.8967H135.744V15.419C136.368 14.7525 137.135 14.2295 137.991 13.8878C138.847 13.5462 139.77 13.3945 140.695 13.4438C141.792 13.4938 142.869 13.7551 143.863 14.2126C144.858 14.6702 145.75 15.315 146.487 16.1098C147.225 16.9046 147.794 17.8339 148.162 18.8441C148.531 19.8544 148.691 20.9257 148.632 21.9963ZM143.65 21.9963C143.63 21.2379 143.382 20.5019 142.936 19.8805C142.489 19.2591 141.865 18.7799 141.141 18.5029C140.417 18.2258 139.625 18.1632 138.864 18.3229C138.104 18.4826 137.408 18.8575 136.865 19.4007C136.322 19.9439 135.956 20.6313 135.811 21.3768C135.667 22.1223 135.751 22.8927 136.053 23.5918C136.355 24.2909 136.862 24.8875 137.51 25.3069C138.158 25.7264 138.919 25.9501 139.697 25.95C140.231 25.9735 140.765 25.8865 141.262 25.6948C141.759 25.503 142.209 25.2109 142.582 24.8375C142.956 24.4641 143.244 24.0179 143.428 23.5283C143.612 23.0387 143.687 22.5166 143.65 21.9963Z" fill="#001A49"/>
                <path d="M164.012 25.2333C164.012 28.9598 160.69 30.5473 157.102 30.5473C155.652 30.6752 154.197 30.376 152.924 29.6884C151.651 29.0009 150.619 27.9565 149.96 26.6905L154.278 24.2942C154.454 24.8794 154.83 25.388 155.344 25.7352C155.858 26.0822 156.479 26.2467 157.102 26.2011C158.298 26.2011 158.895 25.8436 158.895 25.1968C158.895 23.4138 150.723 24.3545 150.723 18.7481C150.723 15.2171 153.778 13.4358 157.241 13.4358C158.539 13.396 159.825 13.6966 160.964 14.3062C162.103 14.9157 163.054 15.812 163.718 16.9016L159.466 19.1375C159.28 18.7123 158.97 18.3498 158.574 18.0955C158.178 17.8412 157.714 17.7062 157.241 17.7073C156.377 17.7073 155.846 18.0251 155.846 18.6147C155.841 20.474 164.012 19.2424 164.012 25.2333Z" fill="#001A49"/>
                <path d="M182.224 13.8966V30.096H177.241V28.5705C176.666 29.2425 175.935 29.772 175.109 30.1155C174.283 30.4592 173.386 30.6071 172.49 30.5473C169.135 30.5473 166.278 28.2145 166.278 23.8397V13.8966H171.262V23.131C171.22 23.5171 171.264 23.9074 171.393 24.2749C171.521 24.6423 171.73 24.9781 172.005 25.2587C172.281 25.5392 172.615 25.758 172.986 25.8996C173.356 26.0412 173.754 26.1024 174.152 26.0787C175.978 26.0787 177.248 25.0427 177.248 22.7416V13.8966H182.224Z" fill="#001A49"/>
                <path d="M210.784 20.1482V30.096H205.801V20.5709C205.801 18.9516 205.002 17.9139 203.409 17.9139C201.747 17.9139 200.818 19.0485 200.818 20.9602V30.096H195.834V20.5709C195.834 18.9516 195.037 17.9139 193.442 17.9139C191.782 17.9139 190.851 19.0485 190.851 20.9602V30.096H185.869V13.8967H190.86V15.3809C191.376 14.72 192.054 14.1959 192.831 13.8564C193.609 13.5169 194.461 13.3728 195.311 13.4374C196.164 13.3967 197.013 13.5722 197.776 13.9468C198.539 14.3214 199.189 14.8823 199.663 15.5748C200.215 14.8502 200.947 14.274 201.789 13.9003C202.632 13.5264 203.558 13.3672 204.481 13.4374C208.293 13.4438 210.784 16.0992 210.784 20.1482Z" fill="#001A49"/>
                <path d="M215.005 13.7965C217.048 13.7965 218.704 12.1815 218.704 10.1893C218.704 8.197 217.048 6.582 215.005 6.582C212.962 6.582 211.306 8.197 211.306 10.1893C211.306 12.1815 212.962 13.7965 215.005 13.7965Z" fill="#001A49"/>
                <path d="M53.5961 6.44531H58.5803V30.096H53.5961V6.44531ZM61.4024 21.9963C61.3969 20.2979 61.9083 18.6363 62.8717 17.2215C63.8352 15.8068 65.2074 14.7027 66.8146 14.0491C68.422 13.3955 70.1919 13.2217 71.9006 13.5497C73.6092 13.8778 75.1793 14.6929 76.4128 15.8919C77.6463 17.091 78.4866 18.6199 78.8288 20.2853C79.1702 21.9505 78.9974 23.6773 78.3327 25.2469C77.6673 26.8165 76.5394 28.1583 75.0918 29.1024C73.6449 30.0465 71.9425 30.5505 70.201 30.5505C69.0445 30.5625 67.897 30.3498 66.8258 29.9245C65.7545 29.4992 64.7808 28.8699 63.9617 28.0736C63.1426 27.2772 62.4943 26.3296 62.0549 25.2862C61.6155 24.2427 61.3937 23.1243 61.4024 21.9963ZM74.0269 21.9963C74.0073 21.2637 73.7666 20.553 73.3349 19.953C72.9032 19.3531 72.3001 18.8907 71.6004 18.6234C70.9007 18.3562 70.136 18.2961 69.4014 18.4506C68.6669 18.6051 67.9954 18.9675 67.4709 19.4923C66.9465 20.0171 66.5924 20.6811 66.4528 21.4012C66.3133 22.1213 66.3945 22.8655 66.6863 23.5408C66.9782 24.2161 67.4678 24.7924 68.0938 25.1978C68.7198 25.6031 69.4545 25.8194 70.2059 25.8197C70.7202 25.834 71.2324 25.7442 71.7095 25.5559C72.1867 25.3676 72.6191 25.085 72.9781 24.7257C73.3377 24.3665 73.6176 23.9385 73.7988 23.4688C73.9807 22.999 74.0605 22.4977 74.0332 21.9963H74.0269ZM98.8732 13.8919V29.2824C98.8732 34.7251 94.5212 37.0245 90.1041 37.0245C88.5488 37.139 86.992 36.8337 85.6031 36.1422C84.2142 35.4507 83.0472 34.3996 82.2306 33.1042L86.4819 30.7062C86.8247 31.3823 87.3712 31.9401 88.0485 32.305C88.7251 32.67 89.5003 32.8245 90.27 32.7482C90.7611 32.8137 91.2614 32.7707 91.733 32.6224C92.2046 32.4742 92.6363 32.2246 92.9959 31.8919C93.3556 31.5593 93.634 31.1521 93.811 30.7005C93.9881 30.2488 94.0587 29.7642 94.0174 29.2824V27.7918C93.4339 28.4879 92.6909 29.041 91.8484 29.4066C91.006 29.7722 90.088 29.9404 89.1666 29.8974C86.9745 29.8309 84.8943 28.9348 83.3676 27.3988C81.8409 25.8628 80.9873 23.8074 80.9873 21.6682C80.9873 19.5289 81.8409 17.4736 83.3676 15.9375C84.8943 14.4015 86.9745 13.5054 89.1666 13.439C90.088 13.396 91.006 13.5641 91.8484 13.9297C92.6909 14.2954 93.4339 14.8484 94.0174 15.5446V13.8919H98.8732ZM94.0237 21.6674C94.0566 20.885 93.8488 20.1108 93.4269 19.4445C93.005 18.7783 92.3886 18.2503 91.6567 17.9285C90.9249 17.6067 90.1111 17.5058 89.3198 17.6387C88.5285 17.7718 87.7959 18.1325 87.2166 18.6746C86.6372 19.2168 86.237 19.9156 86.0684 20.6811C85.8998 21.4467 85.969 22.244 86.2685 22.9706C86.5679 23.6972 87.0836 24.3198 87.7483 24.7584C88.4137 25.197 89.1981 25.4316 90.0013 25.4319C90.5246 25.4679 91.0501 25.3965 91.5434 25.2224C92.0374 25.0484 92.4879 24.7756 92.8665 24.4214C93.2457 24.0672 93.5445 23.6397 93.7439 23.1662C93.9433 22.6927 94.0384 22.1838 94.0237 21.6721V21.6674ZM101.695 21.9852C101.689 20.2869 102.201 18.6251 103.164 17.2104C104.128 15.7957 105.5 14.6916 107.108 14.038C108.715 13.3844 110.484 13.2106 112.193 13.5386C113.902 13.8667 115.472 14.6818 116.705 15.8808C117.939 17.0798 118.78 18.6088 119.121 20.2741C119.463 21.9394 119.291 23.6662 118.625 25.2358C117.96 26.8054 116.833 28.1472 115.385 29.0912C113.937 30.0354 112.235 30.5394 110.494 30.5394C109.338 30.5514 108.192 30.3389 107.121 29.9143C106.051 29.4898 105.077 28.8615 104.259 28.0664C103.439 27.2712 102.791 26.3249 102.351 25.2828C101.911 24.2406 101.688 23.1234 101.695 21.9963V21.9852ZM114.319 21.9852C114.3 21.2521 114.06 20.5409 113.628 19.9404C113.196 19.34 112.593 18.8771 111.893 18.6095C111.193 18.3419 110.428 18.2817 109.692 18.4363C108.958 18.5908 108.285 18.9534 107.761 19.4785C107.236 20.0036 106.882 20.668 106.743 21.3886C106.603 22.1091 106.684 22.8538 106.976 23.5295C107.269 24.2051 107.758 24.7817 108.385 25.187C109.012 25.5925 109.747 25.8087 110.498 25.8086C111.012 25.8219 111.522 25.7317 111.998 25.5437C112.473 25.3556 112.904 25.0739 113.262 24.716C113.621 24.3581 113.9 23.9318 114.082 23.4638C114.264 22.9958 114.345 22.4962 114.319 21.9963V21.9852Z" fill="#001A49"/>
                </svg>  
            <nav>
                <a href="./index.html">Início</a>
                <a href="">Sobre</a>
                <a href="./contato.html">Contato</a>
            </nav>
        </header>
        <div class="main-container">
        <section class="content">
            <article class="cards">
                <div class="cards-header">
                    <h1>Contato</h1> 
                </div>
                <div  class="cards-content">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus quis augue elementum vestibulum. Nam a orci erat. Aenean arcu mauris, finibus a rutrum quis, commodo sollicitudin nibh. Morbi diam lacus, suscipit nec maximus et, tincidunt at quam. 
                    </p>
                    <div class="contatos-info">
                        <h3>INFORMAÇÕES PARA CONTATO</h3>
                        
                        <img src="./assets/localizacao.png" alt="">
                        <h4 class="desc-icons">Endereço</h4>
                        <p>Av. Tancredo Neves, 2227, Ed. Salvador Prime Caminho das Árvores, Salvador • Bahia</p>

                       
                        <img src="./assets/telefone.png" alt="">
                        <h4 class="desc-icons">Telefone</h4>   
                        
                        <p>(71) 9 9999-9999 | (11) 1 1111-1111</p>

                        <img src="./assets/headset.png" alt="">           
                        <h4 class="desc-icons">Suporte</h4>
                        <p>suporte@cubos.academy</p>
                            

                    </div>
                    
                    <div>
                        <h3>ENTRE EM CONTATO</h3>
                    <form class="formulario-contato">
                        <div class="form-contato-input">
                            <label>Nome <input type="text"></label>
                            <label>E-mail<input type="email"></label>
                        </div>

                        <label for="form-contato-assunto">Assunto</label>
                        <input id="form-contato-assunto"type="text">

                        <label for="form-contato-coment">Comentário</label>
                        <textarea name="" id="form-contato-coment" cols="30" rows="10"></textarea>

                        <button type="submit" class="btn-enviar">Enviar</button>
                    </form>
                    </div>
                </div>
            </article>
        </section>
        <aside class="categories-adv">
            <input type="text" placeholder="Pesquise aqui..."/>
            <div class="categories">
                <h1>Categorias</h1>
                <ul class="categories-list">
                    <li>
                        <p>Tecnologia</p>
                        <p>25</p>
                    </li>

                    <li> 
                        <p>Estilo de vida</p>
                        <p>8</p>
                    </li>
    
                    <li>
                        <p>Arte</p>
                        <p>2</p>
                    </li>
                    <li>
                        <p>Corrida</p>
                        <p>12</p>
                    </li>
                    <li>
                        <p>Aventura</p>
                        <p>9</p>
                    </li>
                    <li>
                        <p>Moda</p>
                        <p>12</p>
                    </li>
                </ul>

            </div>
            <div class="adv">
                <h1>Publicidade</h1>
                <div class="pub-img-group">
                <p class="publicidade-img">340 x 240</p>
                <p class="publicidade-img">340 x 240</p>
                <p class="publicidade-img">340 x 240</p>
                </div>

            </div>
        </aside>
    </div>
        <footer class="footer">
            <p>Copyright ©2020 Todos os direitos reservados | by Fulano</p>

        </footer>
    </div>
</body>
</html>