Este é um placeholder de código customizado. Mude para a Pré-visualização ou publique a página para ver como seu código funciona. Dê clique duplo para editar

<style> main { /* min-width: 427px; */ /* height: 80vh; */ display: flex; flex-direction: column; align-items: center; } .swiper { width: 100%; height: auto; /* max-width: 400px; */ font-family: "DM Sans"; } .swiper-slide { font-size: 16px; background: #fff; display: flex !important; justify-content: center; align-items: center; height: auto !important; border-radius: 20px; min-width: 310px; } .card { padding: 40px; width: 100%; height: auto; /* background-color: aliceblue; */ display: flex; flex-direction: column; align-items: start; justify-content: center; gap: 20px; } .card>div { /* background-color: aqua; */ width: fit-content; height: auto; display: flex; flex-direction: row; align-items: end; justify-content: start; position: relative; gap: 20px; } .card>div>div{ width: fit-content; } .card> div .img{ display: flex; flex-direction: row; align-items: center; justify-content: center; width: 35%; max-height: 230px; } .card> div .img img{ width: 100%; object-fit: cover; border-radius: 100%; border: 4px solid var(--cor-destaque) !important; } .card > .img-logo-empresa{ display: flex; flex-direction: row; align-items: center; justify-content: start; width: 100%; height: 60px; } .card> .img-logo-empresa img{ max-width: 120px; height: 100%; object-fit: contain; } .carrossel-logo-linkedin{ width: 25px; position: absolute; top: 15px; right: 15px; } p.carrossel-nome{ font-weight: bold; font-size: 15px; width: fit-content; } p.sobrenome{ font-weight: bold; font-size: 16px; width: 100%; padding: 0px; border: none; color: var(--cor-destaque) !important; } p.carrossel-cargo{ font-weight: 500; font-size: 16px; color: #000; width: fit-content; } @media screen and (max-width: 570px) { .swiper-botoes{ display:#fff !important; } .carrossel-logo-linkedin{ width: 28px; position: absolute; top: 10px; right: 10px; } .carrossel-nome{ font-weight: bold; font-size: 22px; } .carrossel-cargo{ font-weight: 500; font-size: 15px; color: #002080; } div p{ font-size: 14px; } .card { padding: 20px; gap: 15px; } } .menu-swiper{ display: flex; flex-direction: row; margin-top: 40px; display: flex; align-items: center; justify-content: space-between; width: 100%; } .swiper-botoes{ background-color: #d4d9f2; display: flex; flex-direction: row; justify-content: center; align-items: center; border-radius: 30px; width: 100px; /* padding: 5px; */ } /* Estilo da navegação (botões anterior e próximo) */ .swiper-button-next-person, .swiper-button-prev-person { cursor: pointer; display: flex; align-items: center; justify-content: center; /* Cor do ícone */ width: 80px !important; /* Largura do botão */ height: 40px !important; /* Altura do botão */ } .swiper-button-next-person{ border-radius: 0 30px 30px 0; fill: #002080; } .swiper-button-prev-person > path, .swiper-button-prev-person > path { fill: #002080 !important; } .swiper-button-prev-person{ border-radius: 30px 0px 0px 30px; } .swiper-button-next-person:hover, .swiper-button-prev-person:hover { background-color: #002080 !important; /* Fundo ao passar o mouse */ } /* Estilo da paginação (pontos) */ .swiper-pagination-bullet { opacity: 0.5 !important; /* Opacidade dos pontos */ width: 10px !important; /* Largura dos pontos */ height: 10px !important; /* Altura dos pontos */ border-radius: 5px !important; } .swiper-pagination-bullet-active { background-color: #002080 !important; /* Cor dos pontos ativos */ opacity: 1 !important; /* Opacidade dos pontos ativos */ } .swiper-button-disabled path{ fill: #d4d9f2 !important; } </style> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" /> <main> <!-- Swiper --> <div class="swiper mySwiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="card"> <div> <div class="img"> <img src="https://media.licdn.com/dms/image/v2/D4D03AQGtheyt_t_jkw/profile-displayphoto-shrink_800_800/profile-displayphoto-shrink_800_800/0/1719419810082?e=1741824000&v=beta&t=Cec1W5PBdkgv45PNMOTKIUUo4nTcna95gENOJKrXEG0" alt=""> </div> <div> <p class="carrossel-nome">ANDRÉIA DE OLIVEIRA</p><p class="sobrenome">HIGGINS</p> <p class="carrossel-cargo">CEO ESG for All</p> </div> <a href="https://www.linkedin.com/in/andreiahiggins/" target="_blank"><img class="carrossel-logo-linkedin" src="https://multimedia.emkt.mail-softexpert.com/softexpert-B/photos/c65835ad-6e3f-47e8-b8ae-fd0cc955c4f8.png" alt=""></a> </div> <div> <p> Profissional com mais de 20 anos de experiência nas áreas de agronegócio, RH, marketing e tecnologia, com foco recente em ESG. Com MBA em Gestão de Pessoas e Negócios e especializações em Sustentabilidade e Energia, é especialista em transformar sustentabilidade em motor de crescimento e inovação. </p> </div> <div class="img-logo-empresa"> <img src="https://media.licdn.com/dms/image/v2/C4E0BAQHB_0MMwiZnHg/company-logo_200_200/company-logo_200_200/0/1677772396777/esf_for_all_logo?e=1744243200&v=beta&t=0UI4ptT7i5P1tXTKIjm7evEWFgU8_oA5xuGdupXZydQ" alt=""> </div> </div> </div> </div> </div> </div> </div> </div> <div class="menu-swiper"> <div class="swiper-pagination-person"></div> <div class="swiper-botoes"> <div class="swiper-button-prev-person"> <svg width="11" height="20" viewBox="0 0 11 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M2.72476 10.0001L10.0748 17.3501C10.3248 17.6001 10.4456 17.8918 10.4373 18.2251C10.4289 18.5584 10.2998 18.8501 10.0498 19.1001C9.79976 19.3501 9.50809 19.4751 9.17476 19.4751C8.84142 19.4751 8.54976 19.3501 8.29976 19.1001L0.599756 11.4251C0.399756 11.2251 0.249756 11.0001 0.149756 10.7501C0.0497559 10.5001 -0.000244141 10.2501 -0.000244141 10.0001C-0.000244141 9.75011 0.0497559 9.50011 0.149756 9.25011C0.249756 9.00011 0.399756 8.77511 0.599756 8.57511L8.29976 0.87511C8.54976 0.62511 8.84559 0.504277 9.18726 0.51261C9.52892 0.520944 9.82476 0.65011 10.0748 0.90011C10.3248 1.15011 10.4498 1.44178 10.4498 1.77511C10.4498 2.10844 10.3248 2.40011 10.0748 2.65011L2.72476 10.0001Z" fill="#040713"/> </svg> </div> <div class="swiper-button-next-person"> <svg width="12" height="20" viewBox="0 0 12 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8.47511 10L1.12511 2.65C0.87511 2.4 0.754277 2.10417 0.76261 1.7625C0.770944 1.42083 0.90011 1.125 1.15011 0.875C1.40011 0.625 1.69594 0.5 2.03761 0.5C2.37928 0.5 2.67511 0.625 2.92511 0.875L10.6001 8.575C10.8001 8.775 10.9501 9 11.0501 9.25C11.1501 9.5 11.2001 9.75 11.2001 10C11.2001 10.25 11.1501 10.5 11.0501 10.75C10.9501 11 10.8001 11.225 10.6001 11.425L2.90011 19.125C2.65011 19.375 2.35844 19.4958 2.02511 19.4875C1.69178 19.4792 1.40011 19.35 1.15011 19.1C0.90011 18.85 0.77511 18.5542 0.77511 18.2125C0.77511 17.8708 0.90011 17.575 1.15011 17.325L8.47511 10Z" fill="#040713"/> </svg> </div> </div> </div> </main> <script> (function () { var script = document.createElement("script"); script.src = "https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"; script.async = true; // Isso torna o script assíncrono script.onload = function () { // Inicialize o Swiper após o carregamento do script const swiper = new Swiper(".swiper", { // Optional parameters slidesPerView: 2, spaceBetween: 30, pagination: { el: ".swiper-pagination-person", clickable: true, }, // Navigation arrows navigation: { nextEl: ".swiper-button-next-person", prevEl: ".swiper-button-prev-person", }, // And if we need scrollbar scrollbar: { el: ".swiper-scrollbar", }, // Configuração de breakpoints breakpoints: { // Quando a largura da tela for >= 320px 200: { slidesPerView: 1, // 1 slide no mobile spaceBetween: 20 }, 700: { slidesPerView: 2, // 2 slides no desktop spaceBetween: 30 } } }); }; document.head.appendChild(script); })(); </script>

Este é um placeholder de código customizado. Mude para a Pré-visualização ou publique a página para ver como seu código funciona. Dê clique duplo para editar

<link href="https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.css" rel="stylesheet" /> <script> const close = document.getElementById("edi-zgzzkoc"); const openUm = document.getElementById("edi-352i3uk"); const openDois = document.getElementById("edi-qz99hbj"); const form = document.getElementById("edi-c1871ex"); const fundo = document.getElementById("section-9z0kh5n"); openUm.addEventListener("click", function (e) { form.style.display = "flex"; fundo.style.display = "block"; close.style.display = "block"; document.body.style.overflow = 'hidden'; }); openDois.addEventListener("click", function (e) { close.style.display = "block"; form.style.display = "flex"; fundo.style.display = "block"; document.body.style.overflow = 'hidden'; }); close.addEventListener("click", function (e) { close.style.display = "none"; form.style.display = "none"; fundo.style.display = "none"; document.body.style.overflow = 'unset'; }); </script>

Este é um placeholder de código customizado. Mude para a Pré-visualização ou publique a página para ver como seu código funciona. Dê clique duplo para editar

<style> div#edi-lx0ov5r{ border-radius: 12px; overflow: hidden; } div#edi-zgzzkoc{ cursor: pointer; } section#section-9z0kh5n { display:none; /* width: 100vw !important; */ height: 100% !important; position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; background: rgba(0, 0, 0, 0.2) !important; /* Fundo escuro semi-transparente */ backdrop-filter: blur(3px); /* Efeito de desfoque */ } div#edi-c1871ex{ display: none; position: fixed; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); z-index: 20000 !important; } #section-muiv698{ zoom: 2; } @media (max-width: 768px) { div#edi-kmfna55{ overflow: scroll; zoom: 0.85; } div#edi-3lmg753{ font-size: 30px; top: 20px !important; right: 10px !important; left: unset; } } @media (max-width: 1280px) { #section-muiv698{ zoom: 2; } html{ zoom: 0.80; } } @media (max-width: 768px) { #section-muiv698{ zoom: 2; } html{ zoom: 0.98; } } </style>