Form

HTML

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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" type="text/css" href="/css/normalize.css/normalize.css" />
  <link rel="stylesheet" type="text/css" href="css/styles.css" />
  <link
    href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
    rel="stylesheet" />
  <title>Meinberg Administração e Corretagem de Seguros</title>
  <meta name="keywords"
    content="Seguro, seguro de vida, Seguro Residência, Seguro Empresarial, Seguro Saúde, Seguro de Automóvel, Previdência Privada, seguro Fiança, " />
  <meta name="description"
    content="Meinberg Administração e Corretagem de Seguros com foco em Seguros de Vida,  Previdência Privada, Soluções para Locação (Fiança / Capitalização / Imobiliária), Riscos de Engenharia (Energia Solar / Placas Fotovoltaicas), Seguro Residência, Seguro Empresarial, Seguro Saúde, Seguro de Automóvel" />
</head>

<body>
  <header class="site-header">
    <div class="wrapper">
      <div class="site-header__logo">
        <img src="img/Logo MM - branco.svg" alt="Logo Meinberg" />
      </div>

      <div class="site-header__menu-icon">
        <div class="site-header__menu-icon__middle"></div>
      </div>

      <div class="site-header__menu-content">
        <div class="site-header__btn-container">
          <a href="#" class="btn">Entre em contato</a>
        </div>
        <nav class="primary-nav primary-nav--col-right">
          <ul>
            <li><a href="#">Quem Somos</a></li>
            <li><a href="#">Seguros e Serviços</a></li>
            <li><a href="#">Fale Conosco</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </header>

  <div class="large-hero">
    <picture>
      <source media="(min-width: 1380px)" srcset="img/hero--large.jpg" />
      <source media="(min-width: 990px)" srcset="img/hero--medium.jpg" />
      <source media="(min-width: 640px)" srcset="img/hero--small.jpg" />
      <img src="img/hero--smaller.jpg" class="large-hero__image" alt="Skyline da Cidade de São Paulo" />
    </picture>
    <div class="large-hero__text-content">
      <div class="titulo">
        <h1 class="large-hero__title">Meinberg</h1>
        <h2 class="large-hero__subtitle">Corretor de Seguros</h2>
        <p class="large-hero__decription">
          Corretagem de Seguros / Serviços Financeiros / Serviços Imobiliários
        </p>
      </div>
    </div>
  </div>

  <section class="servicos">
    <div class="wrapper">
      <h2 class="headline headline--centered">Nossos Serviços</h2>
      <h3
        class="headline headline--centered headline--small headline--gold headline--small headline--narrow headline--b-margin">
        Soluções para <strong>Você</strong> e sua <strong>Família</strong>,
        benefícios para sua <strong>Empresa</strong>.
      </h3>

      <div class="grid">
        <div class="cards">
          <h3 class="headline headline--centered headline--bold headline--smaller">
            <ion-icon name="heart-outline"></ion-icon><br>
            Seguro Vida</h3>
          <p>
            Os seguros de vida foram desenvolvidos para assegurar o futuro financeiro da sua família e de quem importa para você, sem atrapalhar sua renda atual. Os planos geralmente cobrem várias situações: acidentes pessoais, morte acidental, morte natural e assistências personalizadas. Conheça nossos produtos e entre em contato para escolher a melhor opção.
          </p>
          <a href="#" class="btn btn--small">Saiba Mais</a>
        </div>
        <div class="cards">
          <h3 class="headline headline--centered headline--bold headline--smaller">
            <ion-icon name="cash-outline"></ion-icon><br>
            Soluções para Locação
          </h3>
          <p>
            As soluções de locação foram desenvolvidas para facilitar a vida de proprietários de imóveis, imobiliárias e inquilinos, substituindo com vantagens o fiador. As soluções trazem tranquilidade ao proprietários para o recebimento do aluguel e encargos vencidos, em caso de não pagamento pelo inquilino. Entre em contato para saber mais.
          </p>
          <a href="#" class="btn btn--small">Saiba Mais</a>
        </div>
        <div class="cards">
          <h3 class="headline headline--centered headline--bold headline--smaller">
            <ion-icon name="construct-outline"></ion-icon><br>
            Riscos de Engenharia
          </h3>
          <p class="headline--red">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat
            adipisci ea nobis eum perspiciatis quod officia, similique
            praesentium porro, eius voluptatibus vitae placeat qui inventore
            distinctio quidem repudiandae illo beatae.
          </p>
          <a href="#" class="btn btn--small">Saiba Mais</a>
        </div>
        <div class="cards">
          <h3 class="headline headline--centered headline--bold headline--smaller">
            <ion-icon name="home-outline"></ion-icon><br>
            Seguro Residência
          </h3>
          <p>
            Com um seguro residencial sua casa fica protegida por um custo muito menor do que você imagina. Além de proteger o bem mais precioso da sua família, você ainda conta com profissionais especializados em casos de pequenos imprevistos do dia a dia como reparos em eletrodomésticos, assistência de encanador e eletricista. Sem riscos e dores de cabeça, tudo por um custo que cabe no seu bolso. Fale conosco e faça sua cotação
          </p>
          <a href="#" class="btn btn--small">Saiba Mais</a>
        </div>
        <div class="cards">
          <h3 class="headline headline--centered headline--bold headline--smaller">
            <ion-icon name="business-outline"></ion-icon><br>
            Seguro Empresarial
          </h3>
          <p>
            O seguro empresarial é destinado para a pessoa física ou jurídica, proprietário ou locatário de um estabelecimento comercial, industrial ou de prestação de serviço. Ele garante que garantir o patrimônio da sua empresas está protegido contra os riscos a que estão expostos, proporcionando mais segurança e tranquilidade para sua você. Entre em contato e saiba todas as formas como sua empresa pode ficar protegida.
          </p>
          <a href="#" class="btn btn--small">Saiba Mais</a>
        </div>
        <div class="cards">
          <h3 class="headline headline--centered headline--bold headline--smaller">
            <ion-icon name="medkit-outline"></ion-icon><br>
            Seguro Saúde
          </h3>
          <p>
            Seguro saúde é um seguro que visa garantir uma melhor qualidade de vida e mais tranquilidade para você e sua família, oferecendo assistência médica, terapêutica, hospitalar e obstétrica com opções de profissionais e estabelecimentos de saúde. Os seguros saúde podem ser contratados em 3 modalidades: individual/familiar, coletivo por adesão ou coletivo empresarial. Entre em contato para saber qual a melhor opção para o seu caso.
          </p>
          <a href="#" class="btn btn--small">Saiba Mais</a>
        </div>
        <div class="cards">
          <h3 class="headline headline--centered headline--bold headline--smaller">
            <ion-icon name="car-outline"></ion-icon><br>
            Seguro Automóvel
          </h3>
          <p>
            O seguro de veículo (automóvel e motocicleta) é a forma mais completa de manter seu bem em segurança, mesmo quando você não está presente. Com diversas opções de seguros que combinam com o seu estilo de vida e suas necessidades temos as melhores soluções para o seu carro, moto, caminhão ou táxi. Escolha a alternativa que se encaixa melhor com a sua necessidade e fale conosco para ter uma cotação.
          </p>
          <a href="#" class="btn btn--small">Saiba Mais</a>
        </div>
        <div class="cards">
          <h3 class="headline headline--centered headline--bold headline--smaller">
            <ion-icon name="wallet-outline"></ion-icon><br>
            Previdência
          </h3>
          <p>
            A previdência privada é uma forma de você assegurar um futuro tranquilo contribuindo com uma pequena quantia em dinheiro por um determinado período. Esse esse valor fica rendendo, e quanto mais tempo o dinheiro ficar investido, mais ele vai render. Os pagamentos podem ser mensais ou de uma só vez e você ainda pode fazer contribuições adicionais sempre que tiver algum dinheiro sobrando. Você pode retirar seu dinheiro quando precisar. Entre em contato para saber mais.
          </p>
          <a href="#" class="btn btn--small">Saiba Mais</a>
        </div>
      </div>
    </div>
  </section>

  <section class="parceiras">
    <div class="wrapper">
      <h2 class="headline headline--centered headline--gold">
        <strong>Nossas Parceiras</strong>
      </h2>
      <h3
        class="headline headline--centered headline--small headline--gold headline--small headline--narrow headline--b-margin">
        As melhores seguradoras do mercado, você encontra em um lugar.
      </h3>
    </div>
    <div class="wrapper">
      <div class="galeria">
        <div class="logos">
          <img src="img/Seguradoras/allianz.jpg" alt="Logo Allianz" />
        </div>
          <div class="logos">
          <img src="img/Seguradoras/azul.jpg" alt="Logo Azul Seguros" />
        </div>
        <div class="logos">
          <img src="img/Seguradoras/bradesco.jpg" alt="Logo Bradesco Seguro" />
        </div>
        <div class="logos">
          <img src="img/Seguradoras/chubb.jpg" alt="Logo Chubb Seguros" />
        </div>
        <div class="logos">
          <img src="img/Seguradoras/hdi.jpg" alt="Logo HDI Seguros" />
        </div>
        <div class="logos">
          <img src="img/Seguradoras/humanas-seguros.jpg" alt="Logo Humanas Seguros" />
        </div>
        <div class="logos">
          <img src="img/Seguradoras/mag-seguros.jpg" alt="Logo MAG Seguros" />
        </div>
        <div class="logos">
          <img src="img/Seguradoras/mapfre.jpg" alt="Logo Mapfre Seguradora" />
        </div>
        <div class="logos">
          <img src="img/Seguradoras/porto.jpg" alt="Logo Porto Seguro" />
        </div>
        <div class="logos">
          <img src="img/Seguradoras/sulamerica.jpg" alt="Logo Sulamérica Seguros" />
        </div>
        <div class="logos">
          <img src="img/Seguradoras/univida.png" alt="Logo Univida Seguro de Pessoas" />
        </div>
        <div class="logos">
          <img src="img/Seguradoras/unisaude-master.png" alt="Logo Unisaúde Master" />
        </div>
      </div>
    </div>
  </section>

  <section class="fale-conosco" id="form">
    <div class="row">
      <h2 class="headline headline--centered">
        <strong>Fale Conosco</strong>
      </h2>
      <h3
        class="headline headline--centered  headline--gold headline--small headline--narrow headline--b-margin">
        Ficaremos felizes com o seu contato. Peça uma cotação ou tire suas dúvidas.
      </h3>
    </div>
    
      <form method="post" action="mailer-new.php" class="contact-form">
        <div class="row">
          <?php
            if ($_GET['success'] == 1) {
                echo "<div class=\"form-messages sucess\">
              Obrigado pelo contato. Responderemos o mais rápido possivel.
            </div>";
            }

            if ($_GET['success'] == -1) {
                echo "<div class=\"form-messages error\">
                Ops, alguma coisa deu errado. Tentar novamente.
            </div>";
            }

          ?>
        <div class="row">
          <div class="col-1-of-3">
            <label for="name">Nome</label>
          </div>
          <div class="col-2-of-3">
            <input type="text" name="name" id="name" placeholder="Nome" required>
          </div>
        </div>
        <div class="row">
          <div class="col-1-of-3">
            <label for="email">Email</label>
          </div>
          <div class="col-2-of-3">
            <input type="email" name="email" id="email" placeholder="E-mail" required>
          </div>
        </div>      
        <div class="row">
          <div class="col-1-of-3">
            <label for="msg">Mensagem</label>
          </div>
          <div class="col-2-of-3">
            <textarea name="mgs" id="msg" cols="30" rows="10" placeholder="Deixe a sua mensagem" required></textarea>
          </div>
        </div>
        <div class="row">
          <div class="col-1-of-3">
            <label for="button">&nbsp;</label>
          </div>
          <div class="col-2-of-3">
            <input type="submit" value="Enviar">
          </div>
        </div>
      </form>
    </div>
  </section>

  <footer class="site-footer">
    <div class="wrapper">
      <p>
        <span class="site-footer__text">Copyright &copy; 2020 <strong>Meinberg Corretora de Seguros</strong>. All rights reserved. Criado e desenvolvido por <strong><a href="https://fernandochiquito.github.io" target="_blank">Fernando Chiquito</a></strong>.
        </span>
        <a href="mailto:paulo@meinberg.biz" title="Entre em contato pra ter a sua cotação!" class="btn btn--small">Entre em Contato</a>
      </p>
    </div>

  </footer class="site-footer">
  <script type="module" src="js/app.js"></script>
  <script src="https://unpkg.com/ionicons@5.1.2/dist/ionicons.js"></script>
</body>

</html>

CSS

              
                *,
:after,
:before {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-rendering: optimizeLegibility;
}

body {
  font-family: "Lato", sans-serif;
  line-height: 1.5;
}

section {
  padding: 20px 18px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

@media (min-width: 530px) {
  section {
    max-width: 11000px;
  }
}

section--full {
  max-width: 3000px;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

ul {
  list-style: none;
}

.wrapper {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.large-hero {
  position: relative;
  border-bottom: 10px solid #070035;
}

.large-hero__image {
  display: block;
}

.large-hero__text-content {
  padding-top: 60px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-75%);
          transform: translateY(-75%);
  width: 100%;
  text-align: center;
}

@media (min-width: 800px) {
  .large-hero__text-content {
    -webkit-transform: translateY(-80%);
            transform: translateY(-80%);
  }
}

.large-hero__title {
  font-weight: 300;
  text-transform: uppercase;
  color: #070035;
  font-size: 2.4rem;
  margin: 0;
}

@media (min-width: 530px) {
  .large-hero__title {
    font-size: 3.2rem;
  }
}

@media (min-width: 800px) {
  .large-hero__title {
    font-size: 4.8rem;
  }
}

.large-hero__subtitle {
  font-weight: 500;
  color: #BD9441;
  font-size: 1.5rem;
  margin: 0;
}

@media (min-width: 530px) {
  .large-hero__subtitle {
    font-size: 2.2rem;
  }
}

.large-hero__decription {
  color: #141414;
  font-size: 1.1rem;
  font-weight: 300;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
  max-width: 35rem;
  margin-top: 1rem;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 530px) {
  .large-hero__decription {
    font-size: 1.5rem;
  }
}

.grid {
  display: -ms-grid;
  display: grid;
  grid-gap: 20px;
  -ms-grid-columns: (minmax(250px, 1fr))[auto-fill];
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.row {
  max-width: 1140px;
  margin: 0 auto;
}

.row:not(:last-child) {
  margin-bottom: 10px;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

.row [class^="col-"] {
  float: left;
}

.row [class^="col-"]:not(:last-child) {
  margin-right: 30px;
}

.row .col-1-of-2 {
  width: calc((100% - 30px) / 2);
}

.row .col-1-of-3 {
  width: calc((100% - (30px * 2)) / 3);
}

.row .col-2-of-3 {
  width: calc(((100% - (30px * 2)) / 3)* 2 + 30px);
}

.row .col-1-of-4 {
  width: calc((100% - (30px * 3)) / 4);
}

.row .col-2-of-4 {
  width: calc(((100% - (30px * 3)) / 4)* 2 + 30px);
}

.row .col-3-of-4 {
  width: calc(((100% - (30px * 3)) / 4)* 3 + (2 * 30px));
}

.headline {
  color: #070035;
  font-weight: 300;
  font-size: 1.9rem;
  margin-bottom: 0;
}

.headline--centered {
  text-align: center;
}

.headline--gold {
  color: #BD9441;
}

.headline--white {
  color: #EDFFD9;
}

.headline--red {
  color: red;
}

.headline--narrow {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.headline--small {
  font-size: 1.75rem;
}

.headline--smaller {
  font-size: 1.3rem;
}

.headline--b-margin {
  margin-bottom: 2rem;
}

.headline--bold {
  font-weight: 500;
}

.cards {
  margin: .75rem;
  padding: 1rem;
}

.cards p {
  line-height: 1.65;
  font-size: .85rem;
  margin: .75rem 0 1.5rem 0;
}

ion-icon {
  font-size: 2.1rem;
  color: #070035;
}

.btn,
input[type=submit] {
  background-color: #BD9441;
  color: #fff;
  text-decoration: none;
  padding: .75rem 1.2rem;
  display: inline-block;
  -webkit-transition: all .2s;
  transition: all .2s;
}

.btn:hover,
input[type=submit]:hover {
  background-color: #7e5d1b;
  -webkit-transform: translateY(-0.3rem);
          transform: translateY(-0.3rem);
  -webkit-box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
          box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
}

.btn:active,
input[type=submit]:active {
  -webkit-transform: translateY(-0.1rem);
          transform: translateY(-0.1rem);
  -webkit-box-shadow: 0 0.5rem 0.7rem rgba(0, 0, 0, 0.2);
          box-shadow: 0 0.5rem 0.7rem rgba(0, 0, 0, 0.2);
}

.btn--small,
input[type=submit]--small {
  font-size: .75rem;
  padding: .5rem 1rem;
}

.galeria {
  display: -ms-grid;
  display: grid;
  grid-gap: 1rem;
  -ms-grid-columns: (150px)[auto-fill];
      grid-template-columns: repeat(auto-fill, 150px);
  grid-auto-rows: 130px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.logos {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 5px;
  background-color: white;
  height: 130px;
}

.parceiras {
  background-color: #070035;
}

.site-footer {
  background-color: #141414;
  color: #ffffff;
  padding: .5rem 0;
  font-size: .75rem;
  text-align: center;
}

.site-footer a {
  color: #ffffff;
}

.site-footer a:hover {
  color: #818181;
}

.site-footer__text {
  display: block;
  margin-bottom: 1rem;
  margin-right: 1.5rem;
}

@media (min-width: 800px) {
  .site-footer__text {
    display: inline;
    margin-bottom: 0;
  }
}

.site-header {
  padding: 10px 0;
  position: absolute;
  width: 100%;
  z-index: 2;
  -webkit-transition: background-color .3s ease-out;
  transition: background-color .3s ease-out;
}

.site-header--is-expanded {
  background-color: rgba(20, 20, 20, 0.7);
}

@media (min-width: 800px) {
  .site-header {
    background-color: rgba(20, 20, 20, 0.3);
  }
}

@media (min-width: 800px) {
  .site-header__btn-container {
    float: right;
  }
}

.site-header img {
  max-width: 100px;
  height: auto;
}

@media (min-width: 800px) {
  .site-header img {
    max-width: 150px;
  }
}

.site-header__logo {
  background-color: #070035;
  top: 0;
  padding: 7px 15px;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

@media (min-width: 800px) {
  .site-header__logo {
    left: auto;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    padding: 15px 20px;
  }
}

.site-header__menu-icon {
  width: 20px;
  height: 19px;
  position: absolute;
  top: 17px;
  right: 17px;
  z-index: 10;
}

.site-header__menu-icon::before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 3px;
  background-color: #EDFFD9;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transition: -webkit-transform .3s ease-out;
  transition: -webkit-transform .3s ease-out;
  transition: transform .3s ease-out;
  transition: transform .3s ease-out, -webkit-transform .3s ease-out;
}

.site-header__menu-icon__middle {
  position: absolute;
  top: 8px;
  left: 0;
  width: 20px;
  height: 3px;
  background-color: #EDFFD9;
  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;
  -webkit-transform-origin: 0 50%;
          transform-origin: 0 50%;
}

.site-header__menu-icon::after {
  content: " ";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 20px;
  height: 3px;
  background-color: #EDFFD9;
  -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
  -webkit-transition: -webkit-transform .3s ease-out;
  transition: -webkit-transform .3s ease-out;
  transition: transform .3s ease-out;
  transition: transform .3s ease-out, -webkit-transform .3s ease-out;
}

@media (min-width: 800px) {
  .site-header__menu-icon {
    display: none;
  }
}

.site-header__menu-icon--close-x::before {
  -webkit-transform: rotate(45deg) scalex(1.25);
          transform: rotate(45deg) scalex(1.25);
}

.site-header__menu-icon--close-x .site-header__menu-icon__middle {
  opacity: 0;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
}

.site-header__menu-icon--close-x::after {
  -webkit-transform: rotate(-45deg) scalex(1.25) translateY(1px);
          transform: rotate(-45deg) scalex(1.25) translateY(1px);
}

.site-header__menu-content {
  opacity: 0;
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;
  position: relative;
  z-index: -10;
  padding-top: 70px;
  text-align: center;
}

@media (min-width: 800px) {
  .site-header__menu-content {
    opacity: 1;
    z-index: 1;
    padding-top: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

.site-header__menu-content--is-visible {
  opacity: 1;
  z-index: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}

.primary-nav {
  padding-top: 10px;
}

@media (min-width: 800px) {
  .primary-nav {
    padding-top: 0;
  }
}

@media (min-width: 800px) {
  .primary-nav--col-right {
    float: right;
  }
}

.primary-nav ul {
  padding: 0;
}

.primary-nav ul::after {
  content: "";
  clear: both;
  display: table;
}

.primary-nav li {
  display: inline-block;
  padding-right: 7 px;
}

@media (min-width: 800px) {
  .primary-nav li {
    padding-right: 20px;
    float: left;
    display: block;
  }
}

.primary-nav li:last-child {
  padding-right: 0;
}

@media (min-width: 800px) {
  .primary-nav li:last-child {
    padding-right: 20px;
  }
}

.primary-nav a {
  color: #EDFFD9;
  display: block;
  padding: 5px 8px;
  font-size: .8rem;
  background-color: rgba(20, 20, 20, 0.5);
}

@media (min-width: 800px) {
  .primary-nav a {
    font-size: 1rem;
    padding: 10px 0;
    background-color: transparent;
  }
}

.contact-form {
  width: 60%;
  margin: 0 auto;
}

label {
  color: #141414;
  font-weight: 300;
}

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  width: 100%;
  padding: 7px;
}

textarea {
  height: 100px;
}

input[type="checkbox"] {
  margin: 10px 5px 10px 0;
}

*:focus {
  outline: none;
}

.form-messages {
  width: 70%;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid #cccccc;
  border-radius: 3px;
  margin-bottom: 30px;
}

.sucess {
  background-color: #BD9441;
  color: white;
  text-align: center;
}

.error {
  background-color: #070035;
  color: white;
  text-align: center;
}
/*# sourceMappingURL=styles.css.map */

JS

              
                <?php

    // Get the form fields, removes html tags and whitespace.
    $name = strip_tags(trim($_POST["name"]));
    $name = str_replace(array("\r","\n"),array(" "," "),$name);
    $email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
    $msg = trim($_POST["msg"]);

    // Check the data.
    if (empty($name) OR empty($msg) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {
        header("Location: https://www.meinberg.biz/new/index.php?success=-1#form");
        exit;
    }

    // Set the recipient email address. Update this to YOUR desired email address.
    $recipient = "paulo@meinberg.biz";

    // Set the email subject.
    $subject = "Fale Conosco $name";

    // Build the email content.
    $email_content = "Name: $name\n";
    $email_content .= "Email: $email\n\n";
    $email_content .= "Msg:\n$msg\n";

    // Build the email headers.
    $email_headers = "From: $name <$email>";

    // Send the email.
    mail($recipient, $subject, $email_content, $email_headers);
    
    // Redirect to the index.html page with success code
    header("Location: https://www.meinberg.biz/new/index.php?success==1#form");

?>

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Save Automatically?

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions