
<!DOCTYPE html>
<html lang="pt-br">

<head>

  <!-- Required meta tags -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Google fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">

  <!-- Stylesheets -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

  <link rel="stylesheet" href="css/vendors.css">
  <link rel="stylesheet" href="css/main.css">
   <link rel="icon" type="image/png" href="https://www.agenciadesites.com/img/fav.png" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  
  <script src="js/menu.js"></script>

  <meta name="theme-color" content="#ffffff">
  
  <title>Agência de Sites | Criação e Otimização de Sites</title>

  
  <script>

$(function () {
  $(window).scroll(function () {
    if ($(this).scrollTop() > 100) {
      $('header  .age').attr('src', 'img/logo/logo-svg.svg');
    }
    if ($(this).scrollTop() < 100) {
      $('header  .age').attr('src', 'img/logo/logo.svg');
    }
  })
});
</script>
</head>

<style>

:root {
  --orange: #ff9000;
}




.tabs {
  height: 29px;
  cursor: pointer;

}
.tab {
    position: relative;
    padding: 0;
    flex: 1;
    border: 2px solid #ff6f00;
    text-transform: capitalize;
    text-align: center;
}

.tab span{
  width: 0px;
  height: 3px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  background: #000;
}

.tab:hover span{
  width: 100%;
}

.activeTab span{
  width: 100%;
}



#product {
  display: block;
}

span {
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 0;
  height: 3px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  background: #000;
  transition: all 0.3s ease;
}

.list-item:hover span {
  width: 100%;
}



button:hover {
  background: var(--orange);
  color: #fff;
}

.min45 {
    min-height: 31vh;
}
.uv {
    background-image: url(img/fundo.png);
    height: 240px;
    width: 45%;
    background-repeat: no-repeat;
    background-position: 100% 1rem;
    position: absolute;
}

.uv2 {
    background-image: url(img/fundo2.png);
    height: 240px;
    width: 45%;
    background-repeat: no-repeat;
    background-position: 0 1rem;
    position: absolute;
}
.icones-servicos{
      width: 453px;
    margin-top: -2rem;
    float: right;
    margin-right: 13rem;
}
.a8rem {
    margin-top: -6rem;
}
.icone-servico-1{
  width: 500px;
    margin-top: -6rem;
    margin-right: 7rem;
    float: right;
}
.sliderMain.-type-1 .sliderMain__title {
    word-wrap: break-word;
    font-size: 7.6vw;
}
h2 {
    font-size: var(--text-4xl);
}
.icone-servico-2{
 width: 500px;
    margin-top: -6rem;
    float: left;
    margin-left: 7rem
}

.texto-esquerdo{
      text-align: right;
    width: 50%;
    float: right;
}
.layout-pt-lg {
    padding-top: 4.5rem;
}
.layout-pb-xl {
    padding-bottom: 4rem;
}
.y-gap-60 > * {
    padding-top: 0.125rem;
    padding-bottom: 0.0rem;
}
.bg-dark-1 {
    background-color: #ff6f00;
}
p {
    margin: 0;
    font-size: 0.9rem;
}
.text-light {
    color: rgb(255 255 255);
}
.is-unpinned{
  display:block;
}
.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}
hr {
    opacity: 0.4;
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}
.layout-pt-lg {
    padding-top: 4.5rem;
}
.layout-pb-lg {
    padding-bottom: 3.5rem;
}
.icone{
  background: #ff6f00;
    width: 94px;
    padding: 15px;
    margin-top: 1rem;
    border-radius: 8px;
}
.descr-icone {
    font-size: 0.9rem;
    margin-top: 1rem;
    text-align: center;
    padding: 0rem 1rem 0rem 0rem;
}

.descricao-portfolio {
    font-size: 0.9rem;
    padding: 1rem;
    border: 1px solid gainsboro;
    margin-bottom: 13px;
    border-radius: 5px;
}
.back-site{
  background-image: url('img/projects/horizontal/1.jpeg');
  background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    width: 100%;
    height: 100%;
    opacity: 1;
    transform: translate3d(0px, 0px, 0px);
    background-image: url(img/projects/horizontal/1.jpeg);
    transition-duration: 0ms;
}
.hei{
  height:400px;
}
@media (max-width:748px){
    .sliderMain.-type-1 .sliderMain__title {
    word-wrap: break-word;
    font-size: 16.6vw;
}
.hei{
  height:200px;
}
.bounce-1 {
    animation-name: bounce-1;
    animation-timing-function: linear;
    margin-top: 3rem!important;
}
.esquerdinha {
    padding: 0rem 0.5rem 0rem 0rem;
}
.direitinha {
    padding: 1rem 1rem 0rem 0.5rem;
}
.mt-16 {
    margin-top: 1rem !important;
    text-align: center;
    font-weight: 600!important;
    font-size: 1.1rem;
}
.mt-8 {
    margin-top: 0.5rem !important;
    text-align: center;
}
.sectionHeading.-lg .sectionHeading__title {
    text-align: center;
    font-size: 2rem;
}
.button.-outline-black {
    background-color: transparent;
    border: 0.0625rem solid #121212;
    width: 100%;
}
.segundo {
    width: 270px;
    padding: 0.3rem;
    vertical-align: middle;
    position: absolute;
    margin: 0 auto;
    margin-left: auto;
    left: 0;
}
.sectionHeading__subtitle {
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
    text-align: center;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: black;
}
.card {
    background: white;
    padding: 2rem;
}
}
</style>
  <!-- preloader start -->
 

<body class="preloader-visible">


  <!-- 
      <header class="header -dark -sticky-light js-header-light js-header">
 
        <div class="header__bar">
          <div class="header__logo js-header-logo">
            <a data-barba href="home-1.html">
              <img class="header__logo__light js-lazy" src="img/logo/logo-light.png" alt="Logo">
            </a>
            <a data-barba href="home-1.html">
              <img class="header__logo__dark js-lazy" src="img/logo/logo-dark.png" alt="Logo">
            </a>
          </div>

          <div class="header__menu js-header-menu">
            <button type="button" class="nav-button-open js-nav-open">
              <i class="icon" feather="menu"></i>
            </button>
          </div>
        </div>

        <nav class="nav js-nav">
          <div class="nav__inner js-nav-inner">
            <div class="nav__bg js-nav-bg"></div>

            <div class="nav__container">
              <div class="nav__header">
                <button type="button" class="nav-button-back js-nav-back">
                  <i class="icon" data-feather="arrow-left-circle"></i>
                </button>

                <button type="button" class="nav-btn-close js-nav-close pointer-events-none">
                  <i class="icon" data-feather="x"></i>
                </button>
              </div>

              <div class="nav__content">
                <div class="nav__content__left">
                  <div class="navList__wrap">
                    <ul class="navList js-navList">
                      <li>
                        <a data-barba href="home-1-classic.html">
                          Menu
                        </a>
                      </li>

                      <li class="menu-item-has-children">
                        <a>Home</a>
                      </li>

                      <li class="menu-item-has-children">
                        <a>Quem somos</a>
                      </li>


                      <li class="menu-item-has-children">
                        <a>Serviços</a>
                      </li>


                  
                      

                    

                      <li class="menu-item-has-children">
                        <a>Portfolio</a>

                        <ul class="subnav-list">
                          <li>
                            <a data-barba href="vertical-projects.html">Vertical Projects</a>
                          </li>
                          <li>
                            <a data-barba href="grid-simple-2-col.html">Simple 2 Columns</a>
                          </li>
                          <li>
                            <a data-barba href="grid-masonry-2-col.html">Masonry 2 Columns</a>
                          </li>
                          <li>
                            <a data-barba href="grid-masonry-3-col.html">Masonry 3 Columns</a>
                          </li>
                          <li>
                            <a data-barba href="grid-masonry-4-col.html">Masonry 4 Columns</a>
                          </li>
                          <li>
                            <a data-barba href="grid-fancy-2-col.html">Fancy 2 Columns</a>
                          </li>
                          <li>
                            <a data-barba href="grid-fancy-3-col.html">Fancy 3 Columns</a>
                          </li>
                        </ul>
                      </li>


                      <li class="menu-item-has-children">
                        <a>Contato</a>
                      </li>

                      

                      
                    </ul>
                  </div>
                </div>

                <div class="nav__content__right">
                  <div class="nav__info">
                    <div class="nav__info__item js-navInfo-item">
                      <h5 class="text-sm tracking-none fw-500">
                        Endereço
                      </h5>

                      <div class="nav__info__content text-lg text-white mt-16">
                      <div class="footer__content text-base text-light mt-16 sm:mt-12">
                  <p>R. Rodrigues Barbosa, 195 - Vila Reg. Feijó, São Paulo - SP, 03334-040</p>
                      </div>
                    </div>

                    <div class="nav__info__item js-navInfo-item">
                      <h5 class="text-sm tracking-none fw-500">
                        Siga-nos
                      </h5>

                      <div class="nav__info__content text-lg text-white mt-16">
                      <a style="    border: none;
    margin-bottom: 1rem;
" class="social__item text-white border-light" href="#">
                  <img class="d-redes" src="img/icones/instagram.svg" alt="">
                  </a>
                  <a  style="    border: none;
    margin-bottom: 1rem;
"  class="social__item text-white border-light" href="#">
                  <img class="d-redes" src="img/icones/facebook.svg" alt="">
                  </a>
                      </div>
                    </div>

                    <div class="nav__info__item js-navInfo-item">
                      <h5 class="text-sm tracking-none fw-500">
                        Contato
                      </h5>

                      <div class="nav__info__content text-lg text-white mt-16">
                        <a href="#">contato@agenciadesites.com</a>
                        <a href="#">11 3586-0346</a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </nav>  
      </header> -->

<header id="navigation" class="desk navbar navbar-dark bg-primary navbar-fixed-top">
  <a href="index.php"> <img class="float-left primeiro age" src="https://agenciadesites.com/img/logo/logo.svg" alt="">
  </a>
  <div class="top-icon" onclick="openNav()">

    <i class="fa fa-bars text-white menu1"></i>
  </div>
  <nav class="navbar navbar-expand-sm bg-custom opnesidenav " id="open">
    <ul class="navbar-nav">
      <li class="nav-item text-right">
        <a style="    height: 44px;" class="nav-link text-right" href="#" onclick="closeNav()"><i
            class="fa fa-close"></i></a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="index.php">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="quemsomos.php">Quem Somos</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="https://www.agenciadesites.com/blog">Blog</a>
      </li>
      <li class="nav-item">
        <a class="nav-link">Serviços</a>
        <a href="criacao-de-sites.php" class="nav-link ddx">Criação de sites</a>
        <a href="modelos-de-sites.php" class="nav-link ddx">Modelos de sites</a>
        <a href="otimizacao.php" class="nav-link ddx">Otimização</a>
        <a href="links-patrocinados.php" class="nav-link ddx">Links Patrocinados</a>
        <a href="producao-videos.php" class="nav-link ddx">Produção de videos</a>
        <a href="identidade-visual.php" class="nav-link ddx">Identidade visual</a>
        <a href="email-marketing.php" class="nav-link ddx">Email Marketing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="contato.php">Contato</a>
      </li>

    </ul>
  </nav>
  <a href="http://api.whatsapp.com/send?1=pt_BR&phone=5511993645083" class="float  bounce-1 boxx2" target="_blank"
    rel="noreferrer" title="Atendimento via WhatsApp" alt="Atendimento via WhatsApp">
    <i class="fa fa-whatsapp my-float"></i>
  </a>
</header>


<header id="navigation" style="background:red" class="mob navbar navbar-dark bg-primary navbar-fixed-top">
  <a href="index.php"> <img class="float-left primeiro age" src="img/logo/logo.svg" alt=""> </a>
  <div class="top-icon" onclick="openNavMob()">

    <i class="fa fa-bars text-white menu1"></i>
  </div>
  <nav class="navbar navbar-expand-sm bg-custom opnesidenav " id="openmob">
    <ul class="navbar-nav">
      <li class="nav-item text-right">
        <a style="    height: 44px;" class="nav-link text-right" href="#" onclick="closeNav()"><i
            class="fa fa-close"></i></a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="index.php">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="quemsomos.php">Quem Somos</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="https://www.agenciadesites.com/blog">Blog</a>
      </li>
      <li class="nav-item">
        <a class="nav-link">Serviços</a>
        <a href="criacao-de-sites.php" class="nav-link ddx">Criação de sites</a>
        <a href="otimizacao.php" class="nav-link ddx">Otimização</a>
        <a href="links-patrocinados.php" class="nav-link ddx">Links Patrocinados</a>
        <a href="producao-videos.php" class="nav-link ddx">Produção de videos</a>
        <a href="identidade-visual.php" class="nav-link ddx">Identidade visual</a>
        <a href="email-marketing.php" class="nav-link ddx">Email Marketing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="contato.php">Contato</a>
      </li>
    </ul>
  </nav>


  <a href="https://api.whatsapp.com/send?1=pt_BR&phone=5511993645083" class="float" target="_blank" rel="noreferrer"
    title="Atendimento via WhatsApp" alt="Atendimento via WhatsApp">
    <i class="fa fa-whatsapp my-float"></i>
  </a>

  <style rel="stylesheet" type="text/css">
    .float {
      position: fixed;
      width: 60px;
      height: 60px;
      bottom: 100px;
      right: 6px;
      background-color: #25d366;
      color: #FFF;
      border-radius: 50px;
      text-align: center;
      font-size: 30px;
      box-shadow: 2px 2px 3px #999;
      z-index: 100;
    }

    .my-float {
      margin-top: 16px;
    }
  </style>


</header>

  <!-- barba container start -->
  <div class="barba-container">

 
    <main class="">






      <!-- section start -->
      <section class="sliderMain -type-1 bg-black js-sliderMain-type-1">
        <!-- swiper-wrapper start -->
        <div class="swiper-wrapper">

          <!-- swiper-slide start -->
          <div class="swiper-slide overflow-hidden">
            <div class="sliderMain__wrap">
              <div class="sliderMain__img -cover-dark z-1 js-image">
                <div class="back-site"></div>
              </div>

              <div class="sliderMain__bgTitle fw-800 pb-48 md:d-none z-2 js-bgTitle">
                Cresça!
              </div>

              <div class="container-fluid">
                <div class="row justify-content-center text-center">
                  <div class="col-sm-10">
                    <div class="sliderMain__content pt-24 z-3">
                      <div class="js-subtitle">
                        <p class="sliderMain__subtitle leading-xs text-xs tracking-md uppercase fw-500 text-white mb-32">
                          Soluções em marketing digital
                        </p>
                      </div>
                      <div class="js-title">
                        <h1 class="sliderMain__title fw-800 text-white bounce-1 boxx2">
                        Cresça!
                        </h1>
                      </div>
                      <div class="sliderMain__button js-button">
                        <a class="button -md -outline-white text-white mt-32" href="#1">
                          Saber mais
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- swiper-slide end -->




          <!-- swipe
          <!-- swiper-slide end -->

        </div>
        <!-- swiper-wrapper end -->

        <!-- ui-element start -->
        <div class="ui-element -bottom-left js-ui">
          <div class="ui-element__social text-white js-bottom-left-links">
            <a href="#"></a>
            <a href="https://www.instagram.com/agenciadesites/"> <img class="d-redes" src="img/icones/instagram.svg" alt=""></a>
            <a href="https://www.facebook.com/agenciadesite"><img class="d-redes" src="img/icones/facebook.svg" alt=""></i></a>
            <a href="#"><img class="d-redes" src="img/icones/email.svg" alt=""></a>
          </div>
        </div>
        <!-- ui-element end -->

        <!-- ui-element start -->
        <div class="ui-element -bottom sm:d-none js-ui">
       
           <img style=" width: 166px;" src="https://rhogan.com.br/wp-content/uploads/2020/11/scroll-white.gif" alt="">
          
        </div>
        <!-- ui-element end -->

        <!-- ui-element start -->
        
        <!-- ui-element end -->
      </section>
      <!-- section end -->


      <!-- section start -->
       <section class="layout-pt-xl layout-pb-xl" id="1">
        <!-- container start -->
        <div class="container"> 

          <!-- row start -->
          <div class="row"> 
           <div class="col-md-4">
              <div class="sectionHeading -lg">
                <p style="color: #ff7000;" class="sectionHeading__subtitle">
                  Gerando negócios
                </p>

                <h2 class="sectionHeading__title">
                  Juntos podemos conquistar coisas incríveis!
                </h2>

                <p class="mt-16">
                Estratégia aliada a design para empresas em constante movimento e crescimento, estamos no mercado há 17 anos, mais de 1000 empresas atendidas em diversos ramos de atividades. temos experiência e conhecimento para ajudar a vender de verdade!                </p>

                <a href="contato.php" class="button -md -outline-black text-black mt-32">
                  eu quero!
                </a>
              </div>
            </div>
            <div class="col-lg-7 col-md-7">
                 <img style="width: 100%; margin-top:-6rem;" class="bounce-1 boxx2" src="img/yesagencia.png" alt="">
            </div>
            <div class="col-md-12"><hr>
            </div>
          </div> 
          <!-- row end -->
          </div>
          <!-- row end -->

        </div> 
        <!-- container end -->
     </section> 
      <!-- section end -->



       <!-- section start -->
      <section>
        <!-- container start -->
        <div class="container">

          <!-- row start -->
          <div class="row">
            <div class="col-md-12">
              <div  class="sectionHeading -md">
                <p style="color: #ff7000;" class="text-center sectionHeading__subtitle">
                  Cresça!  
                </p>
                <h2 class="text-center  sectionHeading__title">
                  O que fazemos?
                </h2>
              </div>
            </div>
          </div>
          <!-- row end -->


          <!-- row start -->
          <div class="row x-gap-60 y-gap-60 layout-pt-md">

            <div class="col-md-4"> 
             <div class="row">
                 <div class="col-md-5">
                  <img style="width: 100%;" src="img/web.svg" alt="">
                 </div>
               <div class="col-md-7">
                  <div class="award">
                    <div class="award__content">
                      <h3 class="award__title text-2xl fw-500 mt-16">
                        Criação de sites
                      </h3>
                      <p class="award__text mt-8">
                        Fazemos a criação de sites profissionais para a sua empresa.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

             <div class="col-md-4"> 
             <div class="row">
                 <div class="col-md-5">
                  <img style="width: 100%;" src="img/seo.svg" alt="">
                 </div>
               <div class="col-md-7">
                  <div  class="award">
                    <div class="award__content">
                      <h3 class="award__title text-2xl fw-500 mt-16">
                       Otimização
                      </h3>
                      <p class="award__text mt-8">
                        Iremos otimizar o site da sua empresa para os mecanismos do google.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>


             <div class="col-md-4"> 
             <div class="row">
                 <div class="col-md-5">
                  <img style="width: 100%;" src="img/ads.svg" alt="">
                 </div>
               <div class="col-md-7">
                  <div class="award">
                    <div class="award__content">
                      <h3 class="award__title text-2xl fw-500 mt-16">
                        Links Patrocinados
                      </h3>
                      <p class="award__text mt-8">
                        Trabalhamos com campanhas para o google, facebook e instagram.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>


             <div class="col-md-4"> 
             <div class="row">
                 <div class="col-md-5">
                  <img style="width: 100%;" src="img/video.svg" alt="">
                 </div>
               <div class="col-md-7">
                  <div  class="award">
                    <div class="award__content">
                      <h3 class="award__title text-2xl fw-500 mt-16">
                        Produção de vídeos
                      </h3>
                      <p class="award__text mt-8">
                        Temos uma equipe especializada para fazer videos institucionais.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>


             <div class="col-md-4"> 
             <div class="row">
                 <div class="col-md-5">
                  <img style="width: 100%;" src="img/identidade.svg" alt="">
                 </div>
               <div class="col-md-7">
                  <div class="award">
                    <div class="award__content">
                      <h3 class="award__title text-2xl fw-500 mt-16">
                        Identidade visual
                      </h3>
                      <p class="award__text mt-8">
                        Nossa equipe irá criar a identidade visual  para a sua empresa.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>


             <div class="col-md-4"> 
             <div class="row">
                 <div class="col-md-5">
                  <img style="width: 100%;" src="img/email.svg" alt="">
                 </div>
               <div class="col-md-7">
                  <div  class="award">
                    <div class="award__content">
                      <h3 class="award__title text-2xl fw-500 mt-16">
                        Email marketing
                      </h3>
                      <p class="award__text mt-8">
                        Trabalhamos com elaboração de email marketing estratégicos.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

         
          </div>
          <!-- row end -->

        </div>
        <!-- container end -->
      </section>

      <!-- section start -->
<img style="width: 100%;    margin-bottom: -10rem;" src="img/wave-up.svg" alt="">
      <section style="    margin-top: 6rem;" class="layout-pt-lg layout-pb-lg bg-dark-1">
       
        <!-- container start -->
        <div class="container">
          <!-- row start -->
          <div class="row align-items-center">

            <div class="col-lg-6 z-1">
            <iframe width="100%" class="hei" src="https://www.youtube.com/embed/inpRUw4BDTY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>


            <div class="col-lg-5 offset-lg-1 col-md-9 md:mt-48 z-2">
              <div class="sectionHeading -md pt-16">
                <div >
                  <p class="sectionHeading__subtitle -light">
                   Nossa agência
                  </p>
                </div>
                <div >
                  <h2 class="sectionHeading__title text-white mt-40 md:mt-24">
                    Você não conhece a agência?
                  </h2>
                </div>
                <div>
                  <p class="text-light mt-32 md:mt-20">
                  A Agência de Sites surgiu em 2004 com o objetivo de gerenciar e orientar nossos clientes em um mercado ainda novo e promissor que era o de publicidade on-line no formato de Links Patrocinados no Google, dessa parceria de sucesso com nossos clientes foi que ao longo destes anos nossa empresa foi crescendo e se modificando de acordo com as necessidades desse mercado e de nossos clientes.                  </p>
                </div>
                <div>
                  <a href="quemsomos.php" class="button -md -outline-white text-white mt-48 md:mt-32">
                    Saber mais
                  </a>
                </div>
              </div>
            </div>

          </div>
          <!-- row end -->
        </div>
        <!-- container end -->
      </section>
      <!-- section end -->


     

      <section class="layout-pt-xl layout-pb-xl">
        <!-- container start -->
        <div class="container"> 

          <!-- row start -->
          <div class="row"> 
           <div class="col-md-5">
              <div class="sectionHeading -lg">
                <p style="color: #ff7000;" class="sectionHeading__subtitle">
                  Gerando negócios
                </p>

                <h2 class="sectionHeading__title">
                  Porque nós somos a melhor agência para você!
                </h2>

                <p class="mt-16">
               Nossa empresa foca no planejamento estratégico, criação, desenvolvimento, manutenção, tecnologia e mídias sociais para uso de plataformas interativas na internet para sempre garantir RESULTADO de nossos parceiros.               
               <div class="row">
                 <div class="col-md-3 vcenter">
                   <h6 class="descr-icone"><img class="icone" src="img/icones/trophy.svg" alt=""> <br><br>
                   Campeã em  resultados</h6>
                 </div>
                 <div class="col-md-3 vcenter">
                  <h6 class="descr-icone"><img class="icone" src="img/icones/favorites.svg" alt=""> <br><br>
                  Favorita dos clientes</h6>
                 </div>
                 <div class="col-md-3 vcenter">
                  <h6 class="descr-icone"> <img class="icone" src="img/icones/chart.svg" alt=""> <br><br>
                  Atualizada no mercado</h6>
                 </div>
                 <div class="col-md-3 vcenter">
                  <h6 class="descr-icone"> <img class="icone" src="img/icones/heart.svg" alt="">  <br><br>
                  Parceira dos clientes</h6>
                 </div>
               </div>
                </p>


              </div>
            </div>
            <div class="col-lg-6 col-md-6">
                 <img style="width: 100%; margin-top:-6rem;" class="bounce-1 boxx2" src="img/yesagencia2.png" alt="">
            </div>
            <div class="col-md-12"><hr>
            </div>
          </div> 
          <!-- row end -->
          </div>
          <!-- row end -->

        </div> 
        <!-- container end -->
     </section> 





     <div class="container">


          <div class="row">
            <div class="col-md-12">
              <device class="sectionHeading -md">
                <p style="color: #ff7000;" class="text-center sectionHeading__subtitle">
                  Portfólio!  
                </p>
                <h2 class="text-center  sectionHeading__title">
                  Alguns trabalhos
                </h2>
              </div>
            </div>
          </div>

       
        




     <div class="container">
  <ul class="nav nav-tabs justify-content-center align-items-center" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#home">Sites</a>
    </li>
    <li class="nav-item ">
      <a class="nav-link " data-toggle="tab" href="#menu1">Artes</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
  
    <div id="home" class="container tab-pane active"><br>
       <style>
    .img-portfolio {
        width: 100%;
        height: 325px;
        border: 1px solid white;
        object-fit: cover;
        border-radius: 6px;
    }
</style>
<div class="row">

    <div class="col-md-4 mb-3">
        <a target="_blank" href="img/mockup-1-site.jpg">
            <img class="img-portfolio" src="img/mockup-1-site.jpg" alt="Mockup Site 1">
        </a>
    </div>

    <div class="col-md-4 mb-3">
        <a target="_blank" href="img/mockup-site-2.jpg">
            <img class="img-portfolio" src="img/mockup-site-2.jpg" alt="Mockup Site 2">
        </a>
    </div>

    <div class="col-md-4 mb-3">
        <a target="_blank" href="img/mockup-site-3.jpg">
            <img class="img-portfolio" src="img/mockup-site-3.jpg" alt="Mockup Site 3">
        </a>
    </div>

    <div class="col-md-4 mb-3">
        <a target="_blank" href="img/mockup-site-4.jpg">
            <img class="img-portfolio" src="img/mockup-site-4.jpg" alt="Mockup Site 4">
        </a>
    </div>

    <div class="col-md-4 mb-3">
        <a target="_blank" href="img/mockup-site-5.jpg">
            <img class="img-portfolio" src="img/mockup-site-5.jpg" alt="Mockup Site 5">
        </a>
    </div>

    <div class="col-md-4 mb-3">
        <a target="_blank" href="img/mockup-site-6.jpg">
            <img class="img-portfolio" src="img/mockup-site-6.jpg" alt="Mockup Site 6">
        </a>
    </div>


    <div style="padding: 0;" class="col-md-4">
        <div class="row">
            <div class="col-md-12">
                <a target="_blank" href="https://tropicoolbrasil.com.br/"><img class="img-portfolio"
                        src="img/tropicool-site.jpg" alt="Tropicool Site"></a>
            </div>
        </div>
    </div>

    <div style="padding: 0;" class="col-md-4">
        <div class="row">
            <div class="col-md-12">
                <a target="_blank" href="https://www.bcmengenharia.com/"> <img class="img-portfolio"
                        src="img/Bcm-engenharia-site.jpg" alt="Bcm Engenharia Site"></a>
            </div>
        </div>
    </div>

    <div style="padding: 0;" class="col-md-4">
        <div class="row">
            <div class="col-md-12">
                <a target="_blank" href="https://benteq.com.br/index.php"><img class="img-portfolio"
                        src="img/benteq-site.jpg" alt="Benteq Site"></a>
            </div>
        </div>
    </div>

    <div style="padding: 0;" class="col-md-4">
        <div class="row">
            <div class="col-md-12">
                <a target="_blank" href="https://www.ovoscampoverde.com.br/"><img class="img-portfolio"
                        src="img/campo-verde-site.jpg" alt="Campo Verde Site"></a>
            </div>
        </div>
    </div>

    <div style="padding: 0;" class="col-md-4">
        <div class="row">
            <div class="col-md-12">
                <a target="_blank" href="https://www.diamanbears.com.br/"><img class="img-portfolio"
                        src="img/diman-bears-site.jpg" alt="Diman Bears Site"></a>
            </div>
        </div>
    </div>

    <div style="padding: 0;" class="col-md-4">
        <div class="row">
            <div class="col-md-12">
                <a target="_blank" href="https://mgcafe.com.br/"><img class="img-portfolio"
                        src="img/harmonize-cafe-site.jpg" alt="Harmonize Café Site"></a>
            </div>
        </div>
    </div>

    <div style="padding: 0;" class="col-md-4">
        <div class="row">
            <div class="col-md-12">
                <a target="_blank" href="https://lumegestaodepessoas.com.br/"><img class="img-portfolio"
                        src="img/lume-site.jpg" alt="Lume Site"></a>
            </div>
        </div>
    </div>

    <div style="padding: 0;" class="col-md-4">
        <div class="row">
            <div class="col-md-12">
                <a target="_blank" href="http://jduniformes.com.br"><img class="img-portfolio"
                        src="img/paulinho-unf-site.jpg" alt="Paulinho UNF Site"></a>
            </div>
        </div>
    </div>



    <div style="padding: 0;" class="col-md-4">
        <div class="row">
            <div class="col-md-12">
                <a target="_blank" href="https://momentocake.com.br/"><img class="img-portfolio" src="img/iimm1.jpg"
                        alt=""></a>
            </div>
        </div>
    </div>




    <div style="padding: 0;" class="col-md-4">
        <div class="row">
            <div class="col-md-12">
                <a target="_blank" href="https://uppertruck.com/"><img class="img-portfolio" src="img/iimm2.jpg"
                        alt=""></a>
            </div>
        </div>
    </div>


    <div style="padding: 0;" class="col-md-4">
        <div class="row">
            <div class="col-md-12">
                <a target="_blank" href="https://moduenergia.com.br/"><img class="img-portfolio" src="img/iimm3.jpg"
                        alt="Paulinho UNF Site"></a>
            </div>
        </div>
    </div>

    <div style="padding: 0;" class="col-md-4">
        <div class="row">
            <div class="col-md-12">
                <a target="_blank" href="https://andramaquinas.com.br/"><img class="img-portfolio" src="img/iimm4.jpg"
                        alt="Paulinho UNF Site"></a>
            </div>
        </div>
    </div>


    <!-- <div style="padding: 0;" class="col-md-4">
        <div class="row">
            <div class="col-md-12">
                <img class="img-portfolio" class="img-portfolio" src="img/portfolio/6.jpg" alt="">
            </div>
        </div>
    </div>

    <div style="padding: 0;" class="col-md-4">
        <div class="row">
            <div class="col-md-12">
                <img class="img-portfolio" src="img/portfolio/2.jpg" alt="">
            </div>
        </div>
    </div>

    <div style="padding: 0;" class="col-md-4">
        <div class="row">
            <div class="col-md-12">
                <img class="img-portfolio" src="img/portfolio/3.jpg" alt="">
            </div>
        </div>
    </div>

    <div style="padding: 0;" class="col-md-4">
        <div class="row">
            <div class="col-md-12">
                <img class="img-portfolio" src="img/portfolio/4.jpg" alt="">
            </div>
        </div>
    </div>

    <div style="padding: 0;" class="col-md-4">
        <div class="row">
            <div class="col-md-12">
                <img class="img-portfolio" src="img/portfolio/5.jpg" alt="">
            </div>
        </div>
    </div>

    <div style="padding: 0;" class="col-md-4">
        <div class="row">
            <div class="col-md-12">
                <img class="img-portfolio" src="img/portfolio/7.jpg" alt="">
            </div>
        </div>
    </div>

    <div style="padding: 0;" class="col-md-4">
        <div class="row">
            <div class="col-md-12">
                <img class="img-portfolio" src="img/portfolio/1.jpg" alt="">
            </div>
        </div>
    </div>
    <div style="padding: 0;" class="col-md-4">
        <div class="row">
            <div class="col-md-12">
                <img class="img-portfolio" src="img/portfolio/8.jpg" alt="">
            </div>
        </div>
    </div>
    <div style="padding: 0;" class="col-md-4">
        <div class="row">
            <div class="col-md-12">
                <img class="img-portfolio" src="img/portfolio/9.jpg" alt="">
            </div>
        </div>
    </div> -->
</div>    </div>

    <div id="menu1" class="container tab-pane fade"><br>
       
<div class="row">
<div  style="padding: 0;" class="col-md-4"> 
<div class="row">
    <div class="col-md-12">
        <img  class="img-portfolio2" src="img/portfolio/a8.jpg" alt="">
   
    </div>
    </div>
</div>

<div style="padding: 0;" class="col-md-4"> 
<div class="row">
    <div class="col-md-12">
        <img class="img-portfolio2" src="img/portfolio/a9.jpg" alt="">
   
    </div>
    </div>
</div>

<div style="padding: 0;" class="col-md-4"> 
<div class="row">
    <div class="col-md-12">
        <img class="img-portfolio2"  src="img/portfolio/a4.jpg" alt="">
   
    </div>
    </div>
</div>

<div style="padding: 0;" class="col-md-4"> 
<div class="row">
    <div class="col-md-12">
        <img class="img-portfolio2" src="img/portfolio/a3.jpg" alt="">
   
    </div>
    </div>
</div>

<div style="padding: 0;" class="col-md-4"> 
<div class="row">
    <div class="col-md-12">
        <img class="img-portfolio2"  src="img/portfolio/a5.jpg" alt="">
   
    </div>
    </div>
</div>

<div style="padding: 0;" class="col-md-4"> 
<div class="row">
    <div class="col-md-12">
        <img class="img-portfolio2" src="img/portfolio/a7.jpg" alt="">
   
    </div>
    </div>
</div>

<div style="padding: 0;" class="col-md-4"> 
<div class="row">
    <div class="col-md-12">
        <img class="img-portfolio2" src="img/portfolio/1a.jpg" alt="">
   
    </div>
    </div>
</div>

<div style="padding: 0;" class="col-md-4"> 
<div class="row">
    <div class="col-md-12">
        <img class="img-portfolio2" src="img/portfolio/a6.jpg" alt="">
   
    </div>
    </div>
</div>

<div style="padding: 0;" class="col-md-4"> 
<div class="row">
    <div class="col-md-12">
        <img class="img-portfolio2" src="img/portfolio/a2.jpg" alt="">
   
    </div>
    </div>
</div>
</div>    </div>
  
  </div>
</div>









    
    <div class="tab-content" id="js" data-tab-content>
    <div style="padding-top: 3rem;" class="row x-gap-60 y-gap-60 layout-pt-md">


</div>
</div>
    </div>





  </div>     </div>

     
       









      <!-- footer start -->
       <footer style="margin-top:3rem" class="footer -type-1 bg-dark-1">
        <!-- container start -->
        <div class="container">

          <div class="footer__top">
            <!-- row start -->
            <div class="row y-gap-48 justify-content-between">
              <div class="col-lg-auto col-sm-12">
                <a href="https://agenciadesites.com/" class="footer__logo text-white">
                  Agência de Sites
                </a>
              </div>

              <div class="col-lg-3 col-sm-6">
                <h4 class="text-xl fw-500 text-white">
                  Onde Estamos
                </h4>

                <div class="footer__content text-base text-light mt-16 sm:mt-12">
                  <div style="border-bottom: solid 1px;margin-bottom: 10px;padding-bottom: 10px;"><i class="fa fa-map-marker fa-2x"></i> R. Rodrigues Barbosa, 195 - Vila Reg. Feijó, São Paulo - SP,<br> 03334-040</div>
                  <div style="border-bottom: solid 1px;margin-bottom: 10px;padding-bottom: 10px;"><a href="contato.php" class="button -underline"><i class="fa fa-envelope"></i> contato@agenciadesites.com</a></div>
                  <div style="border-bottom: solid 1px;margin-bottom: 10px;padding-bottom: 10px;"><a href="tel:01135860346" class="button -underline"><i class="fa fa-phone"></i> 11 3586-0346</a></div>
				  <div style="border-bottom: solid 1px;margin-bottom: 10px;padding-bottom: 10px;"><a href="http://api.whatsapp.com/send?1=pt_BR&phone=5511993645083" class="button -underline"><i class="fa fa-whatsapp"></i> 11 99364-5083</a></div>	
                </div>
              </div>

              <div class="col-lg-auto col-sm-4">
                <h4 class="text-xl fw-500 text-white">
                O Que Fazemos
                </h4>

                <div class="footer__content text-base text-light mt-16 sm:mt-12">
                  <div style="border-bottom: solid 1px;margin-bottom: 10px;padding-bottom: 10px;"><a  href="criacao-de-sites.php" class="button -underline">Criação de Sites</a></div>
                  <div style="border-bottom: solid 1px;margin-bottom: 10px;padding-bottom: 10px;"><a  href="otimizacao.php" class="button -underline mt-4">SEO - Otimizção de Sites</a></div>
                  <div style="border-bottom: solid 1px;margin-bottom: 10px;padding-bottom: 10px;"><a  href="links-patrocinados.php" class="button -underline mt-4">Links Patrocinados</a></div>
                  <div style="border-bottom: solid 1px;margin-bottom: 10px;padding-bottom: 10px;"><a  href="producao-videos.php" class="button -underline mt-4">Produção de Vídeos</a></div>
				  <div style="border-bottom: solid 1px;margin-bottom: 10px;padding-bottom: 10px;"><a  href="identidade-visual.php" class="button -underline mt-4">Identidade Visual</a></div>	
				  <div style="border-bottom: solid 1px;margin-bottom: 10px;padding-bottom: 10px;"><a  href="email-marketing.php" class="button -underline mt-4">E-Mail MKT</a></div>	
                </div>
              </div>

              <div class="col-lg-auto col-auto">
                <h4 class="text-xl fw-500 text-white">
                  Siga-nos nas Redes Sociais
                </h4>

                <div class="social -bordered mt-16 sm:mt-12">
                
                  <a class="social__item text-white border-light" href="https://www.instagram.com/agenciadesites/">
                  <img class="d-redes" src="img/icones/instagram.svg" alt="">
                  </a>
                  <a class="social__item text-white border-light" href="https://www.facebook.com/agenciadesite">
                  <img class="d-redes" src="img/icones/facebook.svg" alt="">
                  </a>
                 
                </div>
              </div>
            </div>
            <!-- row end -->
          </div>


          <div class="footer__bottom -light">
            <!-- row start -->
            <div class="row">
              <div class="col">
                <div class="footer__copyright">
                  <p class="text-light">
                    @ 2021, Agência de sites.
                  </p>
                </div>
              </div>
            </div>
            <!-- row end -->
          </div>

        </div>
        <!-- container end -->
      </footer>      <!-- footer end -->


    </main>

  </div>
  <!-- barba container end -->
  <script>
      function openNav() {
        document.getElementById("open").style.width = "30%";
      }
      
      function closeNav() {
        document.getElementById("open").style.width = "0%";
      }
 


    </script>

    <script>
            function openNavMob() {
        document.getElementById("openmob").style.width = "100%";
      }
      
      function closeNavMob() {
        document.getElementById("openmob").style.width = "0%";
      }
    </script>

<script type="text/javascript">//<![CDATA[


$(function () {
  $(document).scroll(function () {
	  var $nav = $(".navbar-fixed-top");
	  $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
	});
});
  //]]></script>

<script type="text/javascript">
$(function () {
  $(document).scroll(function () {
	  var $nav = $(".primeiro");
	  $nav.toggleClass('segundo', $(this).scrollTop() > $nav.height());
	});
});
</script>

<script type="text/javascript">
$(function () {
  $(document).scroll(function () {
	  var $nav = $(".menu1");
	  $nav.toggleClass('menu2', $(this).scrollTop() > $nav.height());
	});
});
</script>

  <script src="js/portfolio.js"></script>

  <script src="js/main.js"></script>

</body>

</html>