Here are some code samples from projects I've worked on.

<head>
<title>Home of Blank - Custom Blank</title>
<link rel="icon" href="/favicon.png"/>
<meta name="google-site-verification" content="b2ggaGV5IGZ1dHVyZSBsZXdpcywgaG93cyB0aGUgaW50ZXJ2aWV3IGdvaW5nPw" />
<meta name="description" content="We do Blank."/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel='dns-prefetch' href="othersite.com" />
<link href="main.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-3.3.1.js"></script>
<link rel="stylesheet" href="css/icons.css">
<script> 
$(document).ready(function(e) {  
  $( "#headernoscript" ).hide();
  $("#header").load("header.html"); 
  $("#footer").load("footer.html"); 
var ratiow = 1300; // this changes the defult aspect ratio for the slider
var ratioh = 600; // same^
$('.slide_viewer').css('padding-bottom',(ratioh/ratiow)*100 +'%');
var factor = 1.7; //changes where the arrows display for the slider
$('.directional_nav').css('top', -($('.slider_bg').height() / factor));
jQuery.getScript("/js/igget.js")
jQuery.getScript("/js/imgscroll.js")
});
</script> 
</head>

<body>
  <div class="wrapper">
    <div id="header"></div>
    <div class="content">
      <div id="headernoscript">
        <h3 style="position: absolute;">Please enable JavaScript to view the website properly.</h3>
        <a id="navlink" href="/contact-us">Contact Us</a>
        <a id="navlink" href="/non-culinary">Non-Culinary</a>
        <a id="navlink" href="/gallery">Gallery</a>
        <a id="navlink" href="/videos">Videos</a>
        <a id="navlink" href="/custom-mold-quote">Custom</a>
        <a id="navlink" href="/products"><span class="icon-cart"> </span> Products</a>
      </div>
     ...

.frac {
  display:inline-block;
  font-size:14px;
  border-top: 1px solid rgba(20,20,20,.3);
  text-align: center;
  width: 80px;
  padding: 3px;
}
.frac:last-child{
  border-bottom-right-radius: 4px;
}
.frac:nth-last-child(2){
  border-bottom-left-radius: 4px;
}
.frac:nth-child(4n), .frac:nth-child(4n-1) {
     background: rgba(220,220,220,.7);
}
.frac:nth-child(4n-2), .frac:nth-child(4n-3) {
      background: rgba(180,180,180,.5);
}

@keyframes mail-move {
  0% {opacity: 0; left: 3%;}
  40% {opacity: 1; left: 53%;}
  60% {left: 53%;}
  80% {opacity: 1;}
  100% {opacity: 0;left: 95%;}
}

@media screen and (max-width: 960px) {
nav a:link {
	color:#eee;
	text-decoration:none;
}

nav a:visited {
	color:#eee;
	text-decoration:none;
}
nav img {
	padding:5px 4%;
}

function trarray() {
mcanvas.clear();
var ch = mcanvas.height;
var cw = mcanvas.width;
mcanvas.setHeight(ch);
mcanvas.setWidth(cw);
var spacing = $("#spacing").val()*1;
var width = $("#shape-width").val()*1;
var height = $("#shape-length").val()*1;  
var radius = $("#shape-radius").val()*1;
var mwidth = $("#mold-width").val()*1;
var mheight = $("#mold-height").val()*1;
var unit = $("#unit").val();
var originalshape = canvas.item(0); 
var originalcolor = originalshape.fill;
var radpercent = radius/(width/2);
if (height<width) {radpercent = radius/(height/2)}
 var ii = 0;   
 var i = 0;
  while (((height + spacing*1)*ii + height/2+spacing*1) <= mheight-height/2-spacing*1) {
  i = 0;
  while ((((width/2 + (spacing*1/Math.sin(Math.atan(height/(width/2)))))*i)+width/2 +spacing*1)+((((width*1 + spacing*1)*i + width/2+spacing*1)-(((width/2 + (spacing*1/Math.sin(Math.atan(height/(width/2)))))*i)+width/2 +spacing*1))*radpercent) <= mwidth-width/2-spacing*1) {
   var arrayshape = fabric.util.object.clone(originalshape);
   arrayshape.set("top",fabric.util.parseUnit(((height + spacing*1)*ii + height/2+spacing*1)+unit));
   var trioffset = (((width/2 + (spacing*1/Math.sin(Math.atan(height/(width/2)))))*i)+width/2 +spacing*1);
   var rectoffset =((width*1 + spacing*1)*i + width/2+spacing*1);
   arrayshape.set("left",fabric.util.parseUnit(trioffset+((rectoffset-trioffset)*radpercent)+unit));
   arrayshape.angle = i*180;
   mcanvas.add(arrayshape);
   i++;
  }
  ii++;
  } 
  count = i*ii;
  if (count<1 || isNaN(count)) {$("#ccount").text(0);} else {$("#ccount").text(count);}
}

$headers = 'From: '."Quote request from ".$name." <".$email_from.">\r\n".
'Reply-To: '.$email_from."\r\n" .

if(isset($_FILES) && (bool) $_FILES) {
  
$upload_permitted_types= array('image/jpeg','image/png','image/gif','image/png','image/tiff','video/quicktime','image/vnd.adobe.photoshop','application/pdf','application/postscript','application/msword');
	
	$files = array();
	foreach($_FILES as $name=>$file) {
		$file_name = $file['name']; 
		$temp_name = $file['tmp_name'];
		$file_type = $file['type']; 
		$file_size = $file['size'];
		$max_size = 5100000;
		$path_parts = pathinfo($file_name);
		$ext = $path_parts['extension'];
		if ($file_name != "") {			
        if (!in_array($file_type, $upload_permitted_types)){
			 die("File $file_name has the extension $file_type which is not allowed.");
		   }
		}
		if($file_size > $max_size) {
			die("File $file_name is $file_size which is too large.");
		}
		array_push($files,$file);
	}

	// boundary 
	$semi_rand = md5(time()); 
	$mime_boundary = "==Multipart_Boundary_x{$semi_rand}x"; 
	 
	// headers for attachment 
	$headers .= "\nMIME-Version: 1.0\n" . "Content-Type: multipart/mixed;\n" . " boundary=\"{$mime_boundary}\""; 
	 
	// multipart boundary 
	$email_message = "This is a multi-part message in MIME format.\n\n" . "--{$mime_boundary}\n" . "Content-Type: text/plain; charset=\"iso-8859-1\"\n" . "Content-Transfer-Encoding: 7bit\n\n" . $email_message . "\n\n"; 
	$email_message .= "--{$mime_boundary}\n";
	 
	// preparing attachments
	for($x=0;$x<count($files);$x++){
		if ($files[$x]['name'] != "") {
		$file = fopen($files[$x]['tmp_name'],"rb");
		$data = fread($file,filesize($files[$x]['tmp_name']));
		fclose($file);
		$data = chunk_split(base64_encode($data));
		$name = $files[$x]['name'];
		$email_message .= "Content-Type: {\"application/octet-stream\"};\n" . " name=\"$name\"\n" . 
		"Content-Disposition: attachment;\n" . " filename=\"$name\"\n" . 
		"Content-Transfer-Encoding: base64\n\n" . $data . "\n\n";
		$email_message .= "--{$mime_boundary}\n";}}
     }
}
@mail($email_to, $email_subject, $email_message, $headers); 

header("Location:/success");

?>

# Alternate default index page
DirectoryIndex index.html

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.+?)/$ /$1 [R=302,NE,L]
RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\ /.*\.html\ HTTP/
RewriteRule ^(.*)\.html$ /$1 [R=301,L]

# Error page
ErrorDocument 403 /error403.html
ErrorDocument 404 /error404.html
ErrorDocument 500 /error500.html

# STRONG HTACCESS PROTECTION
<Files ~ "^.*\.([Hh][Tt][Aa])">
 order allow,deny
 deny from all
</Files>


Redirect 302 /temp /custom-mold-quote
Redirect 301 /articles /gallery

<?php
$host_name = '8745210.db.1and1.com';
$database = 'db7456734';
$user_name = 'notreal';
$password = 'tyhgr89';

// Create connection
$conn = mysqli_connect($host_name, $user_name, $password, $database);
// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}
$contop = $_POST['contop']; if ($contop == "on") {$contop = "true";} else {$contop = "false";};
$cornrad = mysqli_real_escape_string($conn, $_POST['cornrad']);
$engraved = mysqli_real_escape_string($conn, $_POST['engraved']);
$jobnum = mysqli_real_escape_string($conn, $_POST['jobnum']);
$mheight = mysqli_real_escape_string($conn, $_POST['mheight']);
$moldtype = mysqli_real_escape_string($conn, $_POST['radio2']);
$mwidth = mysqli_real_escape_string($conn, $_POST['mwidth']);
$offset = $_POST['offset']; if ($offset == "on") {$offset = "true";} else {$offset = "false";};
$sdepth = mysqli_real_escape_string($conn, $_POST['sdepth']);
$shapetype = mysqli_real_escape_string($conn, $_POST['radio']);
$sheight = mysqli_real_escape_string($conn, $_POST['sheight']);
$spacing = mysqli_real_escape_string($conn, $_POST['spacing']);
$swidth = mysqli_real_escape_string($conn, $_POST['swidth']);
$units = mysqli_real_escape_string($conn, $_POST['units']);

$sql = "INSERT INTO qq (contop, cornrad, engraved, jobnum, mheight, moldtype, mwidth, offset, sdepth, shapetype, sheight, spacing, swidth, units)
VALUES ('$contop', '$cornrad', '$engraved', '$jobnum', '$mheight', '$moldtype', '$mwidth', '$offset', '$sdepth', '$shapetype', '$sheight', '$spacing', '$swidth', '$units')
ON DUPLICATE KEY UPDATE contop = '$contop', cornrad = '$cornrad', engraved = '$engraved', jobnum = '$jobnum', mheight = '$mheight', moldtype = '$moldtype', mwidth = '$mwidth', offset = '$offset', sdepth = '$sdepth', shapetype = '$shapetype', sheight = '$sheight', spacing = '$spacing', swidth = '$swidth', units = '$units'";

if (mysqli_query($conn, $sql)) {
    echo "New record created successfully";
} else {
    echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}

mysqli_close($conn);
?>