Beiträge von Emess

<section id="galerie">
            
            <div class="container">
                <h1 class="heading-text">Galerie</h1>
                <div class="image-gallery">
                  <figure> 
                  <img src="img/galerie/dog/dog1.jpg" alt="Gerdtrud" />
                        <figcaption class="overlay">Gerdtrud</figcaption>
                   </figure> 
                  <figure><img src="img/galerie/food/kul1.jpg" alt="" />
                    <figcaption class="overlay">Entenschinken</figcaption>
                  </figure>  
                  <figure>
                    <img src="img/galerie/heimat/heimat1.jpg" alt="" />
                    <figcaption class="overlay">Heimat 1</figcaption>
                  </figure>  
                  <figure>
                    <img src="img/galerie/snake/korn1.jpg" alt="" />
                    <figcaption class="overlay">Abgestreift</figcaption>
                  </figure>  
                  <figure>
                    <img src="img/galerie/dog/dog2.jpg" alt="" />
                    <figcaption class="overlay">Gerdtrud als Welpe</figcaption>
                  </figure>  
                  <figure>
                    <img src="img/galerie/food/kul2.jpg" alt="" />
                    <figcaption class="overlay">Schnitzel</figcaption>
                  </figure>  
                  <figure>
                    <img src="img/galerie/heimat/heimat2.jpg" alt="" />
                    <figcaption class="overlay">Home</figcaption>
                  </figure>  
                  <figure>
                    <img src="img/galerie/snake/korn2.jpg" alt="" />
                    <figcaption class="overlay">Kornnatter1</figcaption>
                  </figure>  
                  <figure>
                    <img src="img/galerie/dog/dog3.jpg" alt="" />
                    <figcaption class="overlay">Lena&Oscar</figcaption>
                  </figure>  
                  <figure>
                    <img src="img/galerie/food/kul3.jpg" alt="" />
                    <figcaption class="overlay">Tortilla</figcaption>
                  </figure>  
                  <figure>
                    <img src="img/galerie/heimat/heimat3.jpg" alt="" />
                    <figcaption class="overlay">Otzberg</figcaption>
                  </figure>  
                  <figure>   
                  <img src="img/galerie/snake/korn3.jpg" alt="" />
                    <figcaption class="overlay">Kornnatter</figcaption>
                  </figure>  
                </div>
            </div>
                 </section>

#galerie {
    background-color:burlywood;
    min-height: 100vh;
   
}
.container {
    padding: 40px 5%;
  }
  
  .heading-text {
    margin-bottom: 2rem;
    font-size: 2rem;
    text-align: center;
  }
  
  .heading-text span {
    font-weight: 100;
  }
  .image-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  
  }

  figure {
    border: thin #c0c0c0 solid;
    display: flex;
    flex-flow: column;
    padding: 5px;
    max-width: 400px;
    margin: auto;
  }
  
  img {
    max-width: 400px;
    max-height: 200px;
  }
  
  figcaption {
    background-color: #222;
    color: #fff;
    font: italic smaller sans-serif;
    padding: 3px;
    text-align: center;
  }
 
  .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(57, 57, 57, 0.502);
    top: 0;
    left: 0;
    transform: scale(0);
    transition: all 0.2s 0.1s ease-in-out;
    color: #fff;
    border-radius: 5px;
    /* center overlay text */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* hover */
  .image-gallery img:hover .overlay {
    transform: scale(1);
  }

/*-----------------------------------------
        Gallerie
------------------------------------------- */

.container {
    padding: 40px 5%;
  }
  
  .heading-text {
    margin-bottom: 2rem;
    font-size: 2rem;
    text-align: center;
  }
  
  .heading-text span {
    font-weight: 100;
  }
  
  ul {
    list-style: none;
  }

#galerie
{
    background-color:burlywood;
}
.image-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  
  }
  
  .image-gallery > li {
    flex-basis: 350px; /* width: 350px; */
    position: relative;
    cursor: pointer;
  
  }
  .image-gallery::after {
    content: "";
    flex-basis: 350px;
  }
  
  .image-gallery li img {
    object-fit: cover;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    border-radius: 5px;
  }

  .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(57, 57, 57, 0.502);
    top: 0;
    left: 0;
    transform: scale(0);
    transition: all 0.2s 0.1s ease-in-out;
    color: #fff;
    border-radius: 5px;
    /* center overlay text */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* hover */
  .image-gallery li:hover .overlay {
    transform: scale(1);
  }


/*-----------------------------------------
        Gallerie Ende
------------------------------------------- */

 <section id="galerie">
            
            <div class="container">
                <h1 class="heading-text">Gallerie</h1>
                <ul class="image-gallery">
                    <li><img src="img/galerie/dog/dog1.jpg" alt="Gerdtrud" />
                        <div class="overlay"><span>Gerdtrud</span></div>
                  </li>
                  <li><img src="img/galerie/food/kul1.jpg" alt="" />
                    <div class="overlay"><span>Entenschinken</span></div>
                  </li>  
                  <li><img src="img/galerie/heimat/heimat1.jpg" alt="" />
                    <div class="overlay"><span>Heimat 1</span></div>
                  </li>  
                  <li><img src="img/galerie/snake/korn1.jpg" alt="" />
                    <div class="overlay"><span>Abgestreift</span></div>
                  </li>  
                  <li><img src="img/galerie/dog/dog2.jpg" alt="" />
                    <div class="overlay"><span>Gerdtrud als Welpe</span></div>
                  </li>  
                  <li><img src="img/galerie/food/kul2.jpg" alt="" />
                    <div class="overlay"><span>Schnitzel</span></div>
                  </li>  
                  <li><img src="img/galerie/heimat/heimat2.jpg" alt="" />
                    <div class="overlay"><span>Home</span></div>
                  </li>  
                  <li><img src="img/galerie/snake/korn2.jpg" alt="" />
                    <div class="overlay"><span>Kornnatter1</span></div>
                  </li>  
                  <li><img src="img/galerie/dog/dog3.jpg" alt="" />
                    <div class="overlay"><span>Lena&Oscar</span></div>
                  </li>  
                  <li><img src="img/galerie/food/kul3.jpg" alt="" />
                    <div class="overlay"><span>Tortilla</span></div>
                  </li>  
                  <li><img src="img/galerie/heimat/heimat3.jpg" alt="" />
                    <div class="overlay"><span>Otzberg</span></div>
                  </li>  
                </ul>
                
              </div>
        </section>

E-Mail-Informationen
Angaben zu SMTP:
Ports:
465 (mit SSL/TLS verschlüsselt) oder 25 (ohne Verschlüsselung)
Angaben zu POP3:
Ports:
995 (mit SSL/TLS verschlüsselt) oder 110 (ohne Verschlüsselung)
Posteingangsserver:
web56.alfahosting-server.de
Postausgangsserver:
web56.alfahosting-server.de
Angaben zu IMAP:
Ports:
993 (mit SSL/TLS verschlüsselt) oder 143 (ohne Verschlüsselung)
Posteingangsserver:
web56.alfahosting-server.de
Postausgangsserver:
web56.alfahosting-server.de

<?php
/*
THIS FILE USES PHPMAILER INSTEAD OF THE PHP MAIL() FUNCTION
AND ALSO SMTP TO SEND THE EMAILS
*/

require 'PHPMailer-master/PHPMailerAutoload.php';

/*
*  CONFIGURE EVERYTHING HERE
*/

// an email address that will be in the From field of the email.
$fromEmail = 'kontakt@ristorante-sicilia-reinheim.de';
$fromName = 'ristorante';

// an email address that will receive the email with the output of the form
$sendToEmail = 'kontakt@ristorante-sicilia-reinheim.de';
$sendToName = 'ristorante';

// subject of the email
$subject = 'New message from contact form';

// smtp credentials and server

$smtpHost = 'web56.alfahosting-server.de';
$smtpUsername = 'kontakt@ristorante-sicilia-reinheim.de';
$smtpPassword = 'xgeheimx';

// form field names and their translations.
// array variable name => Text to appear in the email
$fields = array('name' => 'Name', 'surname' => 'Surname', 'phone' => 'Phone', 'email' => 'Email', 'message' => 'Message');

// message that will be displayed when everything is OK :)
$okMessage = 'Contact form successfully submitted. Thank you, I will get back to you soon!';

// If something goes wrong, we will display this message.
$errorMessage = 'There was an error while submitting the form. Please try again later';

/*
*  LET'S DO THE SENDING
*/

// if you are not debugging and don't need error reporting, turn this off by error_reporting(0);
error_reporting(E_ALL & ~E_NOTICE);

try {
    if (count($_POST) == 0) {
        throw new \Exception('Form is empty');
    }
    
    $emailTextHtml = "<h1>You have a new message from your contact form</h1><hr>";
    $emailTextHtml .= "<table>";
    
    foreach ($_POST as $key => $value) {
        // If the field exists in the $fields array, include it in the email
        if (isset($fields[$key])) {
            $emailTextHtml .= "<tr><th>$fields[$key]</th><td>$value</td></tr>";
        }
    }
    $emailTextHtml .= "</table><hr>";
    $emailTextHtml .= "<p>Have a nice day,<br>Best,<br>Ondrej</p>";
    
    $mail = new PHPMailer;
    
    $mail->setFrom($fromEmail, $fromName);
    $mail->addAddress($sendToEmail, $sendToName); // you can add more addresses by simply adding another line with $mail->addAddress();
    $mail->addReplyTo($from);
    
    $mail->isHTML(true);
    
    $mail->Subject = $subject;
    $mail->Body    = $emailTextHtml;
    $mail->msgHTML($emailTextHtml); // this will also create a plain-text version of the HTML email, very handy
    
    
    $mail->isSMTP();
    
    //Enable SMTP debugging
    // 0 = off (for production use)
    // 1 = client messages
    // 2 = client and server messages
    $mail->SMTPDebug = 0;
    $mail->Debugoutput = 'html';
    
    //Set the hostname of the mail server
    // use
    // $mail->Host = gethostbyname('smtp.gmail.com');
    // if your network does not support SMTP over IPv6
    $mail->Host = gethostbyname($smtpHost);
    
    //Set the SMTP port number - 587 for authenticated TLS, a.k.a. RFC4409 SMTP submission
    $mail->Port = 465;
    
    //Set the encryption system to use - ssl (deprecated) or tls
    $mail->SMTPSecure = 'ssl';
    
    //Whether to use SMTP authentication
    $mail->SMTPAuth = true;
    
    //Username to use for SMTP authentication - use full email address for gmail
    $mail->Username = kontakt@ristorant-sicilia-reinheim.de;
    
    //Password to use for SMTP authentication
    $mail->Password = xgeheimx;
    
    if (!$mail->send()) {
        throw new \Exception('I could not send the email.' . $mail->ErrorInfo);
    }
    
    $responseArray = array('type' => 'success', 'message' => $okMessage);
} catch (\Exception $e) {
    // $responseArray = array('type' => 'danger', 'message' => $errorMessage);
    $responseArray = array('type' => 'danger', 'message' => $e->getMessage());
}


// if requested by AJAX request return JSON response
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    $encoded = json_encode($responseArray);
    
    header('Content-Type: application/json');
    
    echo $encoded;
}
// else just display the message
else {
    echo $responseArray['message'];
}