@extends('welcome')


@section('title', 'Contato | JMA')

@section('meta')

@endsection



@section('css')
<style type="text/css">

.aling{text-align:center;margin:auto;}
.mt5{margin-top:5px;}
.mt30{margin-top:30px;}
.mt50{margin-top:50px;}
.mt60{margin-top:60px;}
.mt100{margin-top:100px;}
.mt180{margin-top:180px;}
.fs30{font-size:30px;}
.mrg20{margin:20px;}



@import url(https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700);
h1,h2,h3,h4,h5,h6{font-family:montserrat,sans-serif;color:#2d2d2d;line-height:1.3;margin:0}
.sp-page-title{padding:70px 0;text-align:center}
.sp-page-title .sp-page-title-heading,.sp-page-title .sp-page-title-sub-heading{margin:0;padding:0;color:#fff;position:relative;z-index:10;display:block}
.sp-page-title .sp-page-title-heading{font-size:43px;font-weight:500;letter-spacing:1px;text-align:center;margin:10px 0 20px;text-shadow:7px 7px 0 rgba(150,150,150,.2)}
.sp-page-title .sp-page-title-heading:before{content:'';display:block;width:90px;height:2px;margin:auto;margin-bottom:15px;background:#fff}
.sp-page-title .sp-page-title-sub-heading{font-size:12px;font-weight:500;letter-spacing:15px;color:#fff;text-align:center;text-transform:uppercase}

</style>
@endsection



@section('body')


<section>

  <div class="row">
    <div id="sp-title" class="col-lg-12 ">
      <div class="sp-column ">
        <div class="sp-page-title"style="background-color: #1d1d1d;">
          <div class="container">
            <h2 class="sp-page-title-heading">Contato</h2>
            <h3 class="sp-page-title-sub-heading">Josicler Marques</h3>
          </div>
        </div>
      </div>
    </div>
  </div>

</section>


<section class="mt100">
  <div class="row">
    <div class="col-sm-12 col-md-1"></div>
    <div class="col-sm-12 col-md-3">
     
      <div class="row">
        <div class="col-2 aling"><span class="aling"><i class="fas fa-phone-alt aling fs30"></i></span> </div>
        <div class="col-10">
          <h5 class="text-danger"><strong>Telefone</strong></h5>
          <h6 class="mt5">(66) 9 9656-2745</h6>
        </div>
      </div><hr/>
      <div class="row mt60">
        <div class="col-2 aling"><span class="aling"><i class="fas fa-envelope aling fs30"></i></span> </div>
        <div class="col-10">
          <h5 class="text-danger"><strong>Email</strong></h5>
          <h6 class="mt5">joseicler@josicler.com.br</h6>
        </div>
      </div><hr/>
      <div class="row mt60">
        <div class="col-2 aling"><span class="aling"><i class="fas fa-map-marker-alt aling fs30"></i></span> </div>
        <div class="col-10">
          <h5 class="text-danger"><strong>Endereço</strong></h5>
          <h6 class="mt5">Rua Celeste, 451 - Bela Vista</h6>
          <h6>Sorriso - MT</h6>
        </div>
      </div><hr/>  

    </div>
    <div class="col-sm-12 col-md-7">
     
      <div class="form-group">
        <input type="text" class="form-control form-control-lg" id="name" placeholder="Nome" autocomplete="off" />
      </div>
      <div class="form-group">
        <input type="email" class="form-control form-control-lg mt30" id="mail" placeholder="Email" autocomplete="off" />
      </div>
      <div class="form-group">
        <textarea rows="4" placeholder="Deixe sua menssagem" class="form-control mt30" aria-label="With textarea" autocomplete="off"></textarea>
      </div>
      <button class="btn btn-danger float-right mt30" style="width:100%;">Enviar email</button>     
      
    </div>
    <div class="col-sm-12 col-md-1"></div>
  </div>
</section>

<section>
  <div class="mt60 aling" style="background-color: #1d1d1d;height:90px;">    
    <a href="https://www.instagram.com/jma_arquitetura/?hl=pt-br"><img class="mrg20" width="50" src="{{asset('/assets/images/instagram.png')}}"></a>
    <img class="mrg20" width="50" src="{{asset('/assets/images/facebook.png')}}">
    <a href="https://l.instagram.com/?u=http%3A%2F%2Fwa.me%2F5566996562745&e=ATNpTtUAZHV0ZOh3sSEIE1CIeF0vFugN2ovcoeBSC-rEJ2aNMH6gDOjVlpUBTTY5ziAcvtsRJjcRH-9xcqlHcYc&s=1"><img class="mrg20" width="50" src="{{asset('/assets/images/whatsapp.png')}}"></a>
  </div>
</section>

<section>
  <div class="row">
    <div class="col-12">
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d578.9376068726525!2d-55.73796750274462!3d-12.541807127545601!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x93a0b3a11fbb9c57%3A0x4682835436c9f59d!2sJosicler%20Marques%20Arquitetura!5e0!3m2!1spt-BR!2sbr!4v1639154026831!5m2!1spt-BR!2sbr" height="500" style="border:0; width: 100%;" allowfullscreen="" loading="lazy"></iframe>
    </div>
  </div>
</section>



@endsection




@section('js')
<script type="text/javascript">

$(function(){

 

});

</script>

@endsection