<!DOCTYPE html>
<html lang="es">
<head>
<title>Evelyn Molina Studio</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="styles-heet" href="css/estilosgenerales.css?rand=<?php echo rand(); ?>">
<link rel="stylesheet" href="css/w3.css?rand=<?php echo rand(); ?>">
<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://fonts.googleapis.com/css?family=Montserrat">
 -->

<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> -->
<!-- <style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif}
.w3-bar,h1,button {font-family: "Montserrat", sans-serif}
.fa-anchor,.fa-coffee {font-size:200px}
</style> -->
</head>
<body>

<!-- Navbar -->
<div class="w3-top">
  <div class="w3-bar w3-red w3-card w3-left-align w3-large">
    <a class="w3-bar-item w3-button w3-hide-medium w3-hide-large w3-right w3-padding-large w3-hover-white w3-large w3-red" href="javascript:void(0);" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
    <a href="#" class="w3-bar-item w3-button w3-padding-large w3-white">Home</a>
    <a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Link 1</a>
    <a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Link 2</a>
    <a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Link 3</a>
    <a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Link 4</a>
  </div>

  <!-- Navbar on small screens -->
  <div id="navDemo" class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium w3-large">
    <a href="#" class="w3-bar-item w3-button w3-padding-large">Link 1</a>
    <a href="#" class="w3-bar-item w3-button w3-padding-large">Link 2</a>
    <a href="#" class="w3-bar-item w3-button w3-padding-large">Link 3</a>
    <a href="#" class="w3-bar-item w3-button w3-padding-large">Link 4</a>
  </div>
</div>

<!-- Header -->
<header class="w3-container w3-red w3-center" style="padding:128px 16px">
  <h1 class="w3-margin ">CELEBRA CON ESTILO ÚNICO,</h1>
  <p class="w3-xlarge">¡Celebra con nuestras tarjetas artesanales!</p>
  <button class="w3-button w3-black w3-padding-large w3-large w3-margin-top"> ¡Solicita ya tus tarjetas!</button>
</header>

<!-- First Grid -->
<div class="w3-row-padding w3-padding-64 w3-container">
  <div class="w3-content">
    <div class="w3-twothird">
      <h1>Detalles inolvidables para momentos especiales</h1>
      <h4>El toque único y exclusivo que tus eventos y celebraciones merecen</h4>
      <h5 class="w3-padding-32">En Evelyn Molina Studio creemos que los mejores regalos son aquellos que vienen del corazón. Por eso, te ofrecemos una colección única de tarjetas e invitaciones hechas a mano con dedicación y cariño. Cada tarjeta es una obra de arte, elaborada con materiales de alta calidad y con un diseño exclusivo. No encontrarás nada igual en las tiendas.</h5>

      <p class="w3-text-grey">Más que un simple regalo, nuestras tarjetas son una forma de expresar tus emociones de la manera más personal. Puedes elegir entre una gran variedad de diseños o pedirnos una tarjeta personalizada que se ajuste a tus necesidades.
      Sorprende a tus seres queridos con un regalo que nunca olvidarán. Regala una tarjeta o invitación hecha a mano de Evelyn Molina Studio </p>

      <button class="w3-button w3-black w3-padding-large w3-large w3-margin-top"> Mantente conectado!  Introduce tu correo electrónico, Suscribir</button>
    </div>

    <div class="w3-third w3-center">
      <i class="fa fa-anchor w3-padding-64 w3-text-red"></i>
    </div>
  </div>
</div>

<!-- Second Grid -->
<div class="w3-row-padding w3-light-grey w3-padding-64 w3-container">
  <div class="w3-content">

    <div class="w3-third w3-border" >
      <h1>YOU NEED IT - WE MAKE IT! </h1>
      <h5 class="w3-padding-32">Ofrecemos soluciones personalizadas y adaptables a tus necesidades.</h5>

      <p class="w3-text-grey">Creemos que cada evento y celebración son momentos especiales que merecen ser recordados. Por ello, te ofrecemos tarjetas e invitaciones personalizadas y hechas a mano que reflejen tu estilo y personalidad.</p>      
    </div>

    <div class="w3-quarter w3-content w3-border">
    <button class="w3-button w3-black w3-padding-large w3-large w3-margin-top w3-mobile"> Contáctanos</button>
    </div>

    <div class="w3-third w3-center w3-border">
      <i class="fa fa-coffee w3-padding-64 w3-text-red w3-margin-right"></i>
    </div>

  </div>
</div>



<div class="w3-container w3-black w3-center w3-opacity w3-padding-64">
    <h1 class="w3-margin w3-xlarge">Quote of the day: live life</h1>
</div>

<!-- Footer -->
<footer class="w3-container w3-padding-64 w3-center w3-opacity">  
  <div class="w3-xlarge w3-padding-32">
    <i class="fa fa-facebook-official w3-hover-opacity"></i>
    <i class="fa fa-instagram w3-hover-opacity"></i>
    <i class="fa fa-snapchat w3-hover-opacity"></i>
    <i class="fa fa-pinterest-p w3-hover-opacity"></i>
    <i class="fa fa-twitter w3-hover-opacity"></i>
    <i class="fa fa-linkedin w3-hover-opacity"></i>
 </div>
 <p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a></p>
</footer>

<script>
// Used to toggle the menu on small screens when clicking on the menu button
function myFunction() {
  var x = document.getElementById("navDemo");
  if (x.className.indexOf("w3-show") == -1) {
    x.className += " w3-show";
  } else { 
    x.className = x.className.replace(" w3-show", "");
  }
}
</script>

</body>
</html>