JSFiddle - React, Tailwind, and code Playground

by Mariel Temblor

HTML

<?php
require 'PHPMailer/PHPMailerAutoload.php';

$to = "[email protected]";
$subject = isset($_POST['subject']) ? $_POST['subject'] : '';

$fname = isset($_POST['fname']) ? $_POST['fname'] : '';
$lname = isset($_POST['lname']) ? $_POST['lname'] : '';
$emailFrom = isset($_POST['email']) ? $_POST['email'] : '';
$pnum = isset($_POST['pnum']) ? $_POST['pnum'] : '';
$message = isset($_POST['message']) ? $_POST['message'] : '';
$emailType = isset($_POST['emailType']) ? $_POST['emailType'] : '';

$body = <<<Email

First Name: $fname
Last Name: $lname
Email Address: $emailFrom
Phone Number: $pnum
Message:
$message

Thanks,
$lname, $fname
 
Email;
$header = "From: $emailFrom";

$subject2 = $emailType." : ".$subject;

$email = new PHPMailer();
$email->From      = $emailFrom;
$email->FromName  = $fname." ".$lname;
$email->Subject   = $subject2;
$email->Body      = $body;

$email->AddReplyTo($emailFrom, $fname." ".$lname);
$email->AddAddress( $to );

if(isset($_FILES['fileAttach'])){
    $name_file = $_FILES['fileAttach']['name'];
    $path_file  = $_FILES['fileAttach']['tmp_name'];

    $email->AddAttachment( $path_file ,$name_file );
}

if($_POST){
	if($lname == '' || $fname == '' || $email == '' || $pnum == '' || $message == ''){
		echo "I'm sorry. Your email has not been sent. Please try again.";
	}else{
		mail($to, $subject2, $body, $header);
		echo "Thank you for sending us an email! We have recieved your message.";
	}

}
?>

<body>
<div id="container"> <!--wrapper-->
	<header id="header">
    	<div id="menu" class="menu"> <!--navMenu-->
        	<ul>
                <li><a href="index.php" > HOME </a></li>
                <li>OUR PRODUCT
				<ul> 
					<li><a href="productOverview.php" > PRODUCT OVERVIEW</a></li>
					<li><a href="usage.php" > CHEESECLOTH USAGE</a></li>
					<li><a href="reviews.php" > PRODUCT REVIEWS </a></li>
				</ul>
				</li>
				<li> SUGGESTIONS 
				<ul>
					<li><a href="tips.php" > TIPS and IDEAS </a></li>
					<li><a href="recipe.php"...

CSS

.fmenu,
.push {
  height: 4em;
  clear: both;
}
/*ends here */

body {
  background: url(images/cheeseclothBG.jpg)no-repeat center center fixed;
  font-family: Avenir !important;
  font-size: 12pt;
  line-height: 20px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#header {
  background: url(images/header.jpg) no-repeat;
  min-height: 270px;
  overflow: hidden;
  background-size: 100%;
}
#content {
  float: left;
  width: 100%;
  margin-top: -101px;
  background: #fff;
  position: relative;
}
#img {
  margin: 5px;
  padding: 5px;
  border: 1px solid #0000ff;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
}
#img img {
  display: inline;
  margin: 5px;
  border: 1px solid #ffffff;
}
#desc {
  text-align: center;
  font-weight: normal;
  width: 120px;
  margin: 5px;
}
#container {
  width: 826px;
  margin: 0 auto;
  box-shadow: 0 0 5px 1px #ccc;
}
#menu {
  margin: 0;
  padding: 0;
}
#menu ul {
  margin: 0;
  padding: 0;
  line-height: 30px;
  margin-left: 35px;
  margin-top: 139px;
}
#menu li {
  margin: 0;
  padding: 0;
  list-style: none;
  float: left;
  position: relative;
  background: #fff;
}
#menu ul li a {
  text-align: center;
  font-family: "Comic Sans MS", cursive;
  font-size: 12px;
  text-decoration: none;
  height: 30px;
  width: 150px;
  display: block;
  color: #000;
  margin-left: 10px;
  text-shadow: 1px 1px 1px #999;
}
#menu ul li {
  text-align: center;
  font-family: "Comic Sans MS", cursive;
  font-size: 12px;
  text-decoration: none;
  height: 30px;
  width: 150px;
  display: block;
  color: #000;
  text-shadow: 1px 1px 1px #999;
}
#menu ul li ul li a {
  text-align: center;
  margin-left: 0px;
}
#menu ul li ul {
  margin-top: -5px;
}
#menu ul li ul li {
  margin-top: -2px;
  margin-left: -35px;
  position: relative;
}
#menu ul ul {
  position: absolute;
  top: 32px;
}
#menu ul li:hover ul {
  z-index: 1;
}
/*******************************/

#menu...