Time Burner Font

Preview:

DOWNLOAD

Radio Space Font

Preview:

DOWNLOAD

Simple Logo

Preview:

DOWNLOAD

Home Page HTML Code

Code:

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  <link rel="shortcut icon" type="image/x-icon" href="./etc/images/logo.png" />
  <link rel="stylesheet" type="text/css" href="./etc/main.css" />
 </head>
<body>
 <div id="header">
  <div class="tm">
   <img class="logo" src="./etc/images/logo.png" alt="" />
   <h1 class="title"></h1>
  </div>
  <div class="nav">
   <a class="link select" href="" target="_top">HOME</a>
   <a class="link" href="./browse" target="_top">BROWSE</a>
   <a class="link" href="./contact" target="_top">CONTACT</a>
  </div>
  <div class="banner">
   <img class="bg" src="./etc/images/banner.jpg" alt="" />
   <h1 class="label"></h1>
   <div class="preview">
    <img class="post" src="./etc/images/posts/1.png" alt="" />
    <img class="post" src="./etc/images/posts/2.png" alt="" />
    <img class="post" src="./etc/images/posts/3.png" alt="" />
   </div>
  </div>
 </div>
 <div id="center">
  <div class="inner">
   <p>Interested in viewing more of my posts? Visit the <a href="./browse" target="_top">Browse Page</a> and browse all of my recent posts.</p>
   <p>Have any comments or questions and concerns? Visit the <a href="./browse" target="_top">Contact Page</a> and send me a message.</p>
  </div>
 </div>
 <div id="footer">
  <div class="nav">
   <a class="link select" href="" target="_top">Home</a>
   <a class="link" href="./browse" target="_top">Browse</a>
   <a class="link" href="./contact" target="_top">Contact</a>
  </div>
  <div class="contact">
   <span class="label">E-mail: </span><a class="link" href="mailto:teamcentri@gmail.com">TeamCENTRI@gmail.com</a>
   <span class="label">Phone: </span><a class="link" href="tel:19512867181">1.(951).286.7181</a>
  </div>
 </div>
</body>
</html>

Browse Page HTML Code

Code:

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  <link rel="shortcut icon" type="image/x-icon" href="../etc/images/logo.png" />
  <link rel="stylesheet" type="text/css" href="../etc/main.css" />
  <link rel="stylesheet" type="text/css" href="./etc/browse.css" />
 </head>
<body>
 <div id="header">
  <div class="tm">
   <img class="logo" src="../etc/images/logo.png" alt="" />
   <h1 class="title"></h1>
  </div>
  <div class="nav">
   <a class="link" href="../" target="_top">HOME</a>
   <a class="link select" href="" target="_top">BROWSE</a>
   <a class="link" href="../contact" target="_top">CONTACT</a>
  </div>
 </div>
 <div id="center">
  <div class="inner">
   <img class="post" src="./etc/images/posts/1.png" />
   <img class="post" src="./etc/images/posts/2.png" />
   <img class="post" src="./etc/images/posts/3.png" />
   <img class="post" src="./etc/images/posts/4.png" />
   <img class="post" src="./etc/images/posts/5.png" />
   <img class="post" src="./etc/images/posts/6.png" />
   <img class="post" src="./etc/images/posts/7.png" />
   <img class="post" src="./etc/images/posts/8.png" />
   <img class="post" src="./etc/images/posts/9.png" />
   <img class="post" src="./etc/images/posts/10.png" />
  </div>
 </div>
 <div id="footer">
  <div class="nav">
   <a class="link" href="../" target="_top">Home</a>
   <a class="link select" href="" target="_top">Browse</a>
   <a class="link" href="../contact" target="_top">Contact</a>
  </div>
  <div class="contact">
   <span class="label">E-mail: </span><a class="link" href="mailto:teamcentri@gmail.com">TeamCENTRI@gmail.com</a>
   <span class="label">Phone: </span><a class="link" href="tel:19512867181">1.(951).286.7181</a>
  </div>
 </div>
</body>
</html>

Gallery Widget HTML Code

Code:

Gallery Widget CSS Code

Code:

#center .inner .post_link {text-decoration:none; outline:none; padding:2px; border:2px solid rgba(0,0,0,0); margin:20px; display:inline-flex;}
#center .inner .post_link:hover,
#center .inner .post_link:focus {border:2px solid #000;}

#center .inner .post {min-height:100px; max-height:100px; min-width:0px; margin:0px;}

/*****************************************/

#fg {position:absolute; display:none; left:0px; top:0px; width:100%; background-color:rgba(0,0,0,0.7);}

#fg .app {position:relative; display:table; min-width:900px; max-width:900px; min-height:600px; max-height:600px; margin:0px auto; background-color:#fff; border:2px outset #666; border-radius:4px;}

#fg .app .close {position:absolute; text-decoration:none; display:table; z-index:2; right:0px; top:0px; margin-left:; margin-top:-15px; margin-right:-15px; font-size:20pt; border:2px solid #000; background-color:#660000; font-family:'Lucida Console', 'Sans Serif'; color:#ddd; text-shadow:0px -1px 0px #000, 0px 1px 0px #fff; border-radius:100px; text-align:center; width:30px; height:30px;}
#fg .app span {display:table-cell; vertical-align:middle;}

#fg .left {position:absolute; display:block; z-index:1; top:0px; left:0px; width:50px; height:100%; opacity:0.2; text-decoration:none; cursor:pointer;}
#fg .left:before {position:absolute; top:50%; left:10px; margin-top:-20px; content:''; border-style:solid; border-color:rgba(0,0,0,0) #000 rgba(0,0,0,0) rgba(0,0,0,0); border-width:20px 30px 20px 0px;}
#fg .left:hover {background-color:rgba(0,0,0,0.2); opacity:1;}
#fg .left:hover:before {border-color:rgba(0,0,0,0) #fff rgba(0,0,0,0) rgba(0,0,0,0);}

#fg .right {position:absolute; display:block; z-index:1; top:0px; right:0px; width:50px; height:100%; opacity:0.2; text-decoration:none; cursor:pointer;}
#fg .right:before {position:absolute; top:50%; left:10px; margin-top:-20px; content:''; border-style:solid; border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #000; border-width:20px 0px 20px 30px;}
#fg .right:hover {background-color:rgba(0,0,0,0.2); opacity:1;}
#fg .right:hover:before {border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #fff;}

#fg .left .obj,
#fg .right .obj {position:absolute; top:0px; left:0px; width:100%; height:100%; padding:0px; margin:0px; border:none; opacity:0; cursor:pointer; outline:none;}

#fg .center {overflow:hidden; display:table-cell; max-width:900px; text-align:center; vertical-align:middle;}
#fg img {vertical-align:middle;}

Gallery Widget JavaScript Code

Code:

var appState = 'none';

window.addEventListener('load',initApp);
function initApp()
{
 var content = document.getElementById('center').getElementsByTagName('div')[0];
 var posts = content.getElementsByTagName('img');

var html = '';

var len = posts.length - 1;
 for (var i = 0; i <= len; i++)
 {
  var code = 'preview(' + i + ', ' + len + ');';
  html += '<a class="post_link" href="#' + (i + 1) + '" ';
  html += 'onclick="' + code + '">';
  html += '<img id="' + (i + 1) + '" ';
  html += 'class="' + posts[i].getAttribute('class') + '" ';
  html += 'src="' + posts[i].src + '" />';
  html += '</a>';
 }

content.innerHTML = html;

window.removeEventListener('load',initApp);
}

function preview(n,len)
{
 appState = 'app view';

if (n < 0)
 {
  n = len;
 }
 else if (n > len)
 {
  n = 0;
 }

var fg = document.getElementById('fg');
 fg.style.height = document.body.clientHeight + 'px';

var code = 'closeApp();';
 var link = '#' + (n + 1);
 var close = document.getElementById('fg_app_close');
 close.setAttribute('href', link);
 close.setAttribute('onclick', code);

code = 'preview(' + (n - 1) + ', ' + len + ');';
 var left = document.getElementById('fg_app_left').getElementsByTagName('input')[0];
 left.setAttribute('onclick', code);

code = 'preview(' + (n + 1) + ', ' + len + ');';
 var right = document.getElementById('fg_app_right').getElementsByTagName('input')[0];
 right.setAttribute('onclick', code);

window.addEventListener('keydown',keyPressed);

var content = document.getElementById('center');
 var posts = content.getElementsByTagName('img');
 var url = posts[n].getAttribute('src');

var center = document.getElementById('fg_app_center');
 center.innerHTML = '<img src="' + url + '" />';

var image = center.getElementsByTagName('img')[0];
 image.addEventListener('load',viewImage);
}

var galleryInt;
function viewImage()
{
 galleryInt = setTimeout(testImage,0);

fg.style.display = 'block';

window.addEventListener('resize',alignApp);
}
function testImage()
{
 var center = document.getElementById('fg_app_center');
 var image = center.getElementsByTagName('img')[0];

var imageWidth = image.clientWidth;
 var imageHeight = image.clientHeight;

if (imageHeight != 0 || imageHeight != 0)
 {
  imageWidth = image.clientWidth;
  imageHeight = image.clientHeight;

if (imageWidth > imageHeight)
  {
   var ratio = imageHeight / imageWidth;
   var inverse = 1 / ratio;
   var initHeight = ratio * 780;

if (initHeight > 580)
   {
    var dHeight = (initHeight - 580);
    var dWidth = inverse * dHeight;
    image.style.width = (780 - dWidth) + 'px';
   }
   else
   {
    image.style.width = '780px';
   }
  }
  else
  {
   var ratio = imageWidth / imageHeight;
   var inverse = 1 / ratio;
   var initWidth = ratio * 580;

if (initWidth > 780)
   {
    var dWidth = (initWidth - 780);
    var dHeight = inverse * dWidth;
    image.style.height = (580 - dHeight) + 'px';
   }
   else
   {
    image.style.height = '580px';
   }
  }

alignApp();

clearInterval(galleryInt);
 }
}

function alignApp()
{
 var app = document.getElementById('fg_app');
 var margin = (window.innerHeight - app.clientHeight) / 2;
 if (margin <= 15)
 {
  margin = 15;
 }
 margin += document.body.scrollTop;
 app.style.margin = margin + 'px auto';
}

function closeApp()
{
 var fg = document.getElementById('fg');
 fg.style.display = '';

var close = document.getElementById('fg_app_close');
 var n = close.getAttribute('href');
 n = n.replace('#','');
 n = parseInt(n) - 1;

var content = document.getElementById('center').getElementsByTagName('div')[0];
 var anchors = content.getElementsByTagName('a');
 anchors[n].focus();

appState = 'none';
}

function keyPressed()
{
 var e = event || window.event;
 var key = e.keyCode;

if (appState == 'app view')
 {
  var close = document.getElementById('fg_app_close');
  var n = close.getAttribute('href');
  n = n.replace('#','');
  n = parseInt(n) - 1;

var content = document.getElementById('center').getElementsByTagName('div')[0];
  var images = content.getElementsByTagName('img');
  var len = images.length;

if (key == 27)
  {
   closeApp();
   window.removeEventListener('keydown',keyPressed);
   window.removeEventListener('resize',alignApp);
  }

if (key == 37)
  {
   preview((n - 1), len);
  }

else if (key == 39)
  {
   preview((n + 1), len);
  }
 }
}

Contact Page HTML Code

Code:

<!DOCTYPE html>
<html>
 <head>
  <title>Designs by CENTRI:Contact</title>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  <link rel="shortcut icon" type="image/x-icon" href="../etc/images/logo.png" />
  <link rel="stylesheet" type="text/css" href="../etc/main.css" />
  <link rel="stylesheet" type="text/css" href="./etc/contact.css" />
</head>
<body>
 <div id="header">
  <div class="tm">
   <img class="logo" src="../etc/images/logo.png" alt="" />
   <h1 class="title">Designs by CENTRI</h1>
  </div>
  <div class="nav">
   <a class="link" href="../" target="_top">HOME</a>
   <a class="link" href="../browse" target="_top">BROWSE</a>
   <a class="link select" href="" target="_top">CONTACT</a>
  </div>
 </div>
 <div id="center">
  <div class="inner">
   <h1 class="title">Contact Form</h1>
   <h4 class="sub">SEND ME A MESSAGE!</h4>
   <form class="form" id="contact" method="POST" action="./etc/contact.php">
    <input type="hidden" value="yes" id="request" name="request" />
    <h3 class="label"><span class="marker">*</span>Subject:</h3>
    <div class="section">
     <input type="text" id="subject" class="text" name="subject" />
    </div>
    <h3 class="label"><span class="marker">*</span>Message</h3>
    <div class="section msg">
     <textarea class="text" id="message" form="contact" name="message" ></textarea>
    </div>
    <h3 class="label l2"><span class="marker">*</span>Email:</h3>
    <div class="section s2">
     <input class="text" type="email" id="email" name="email" />
    </div>
    <h3 class="label l2"><span class="marker m2">*</span>Phone:</h3>
    <div class="section s2">
     <input class="text" type="phone" id="phone" name="phone" />
    </div>
    <div class="buttons">
     <div class="btn">
      <input type="reset" value="RESET" />
     </div>
     <div class="btn">
      <input type="submit" value="SUBMIT" />
     </div>
    </div>
   </form>
  </div>
 </div>
 <div id="footer">
  <div class="nav">
   <a class="link" href="../" target="_top">Home</a>
   <a class="link" href="../browse" target="_top">Browse</a>
   <a class="link select" href="" target="_top">Contact</a>
  </div>
  <div class="contact">
   <span class="label">E-mail: </span><a class="link" href="mailto:teamcentri@gmail.com">TeamCENTRI@gmail.com</a>
   <span class="label">Phone: </span><a class="link" href="tel:19512867181">1.(951).286.7181</a>
  </div>
 </div>
</body>
</html>

Contact Page CSS Code

Code:

#center .inner .title {font-size:35pt; font-family:'Radio Space'; margin:40px 40px 0px; color:#69c; text-shadow:0px 1px 0px #000;}

#center .inner .sub {font-family:'Arial'; font-size:12pt; margin:4px 40px 0px; text-shadow:0px -1px 0px #000; color:#666; text-align:right;}

#center .inner .form {display:block; width:500px; margin:40px;}

#center .inner .form .label {margin:auto 20px 4px; font-family:'Time Burner Regular', 'Arial';}
#center .inner .form .l2 {display:inline-block; vertical-align:bottom;}

#center .inner .form .label .marker {color:#c00;}
#center .inner .form .label .m2 {opacity:0;}

#center .inner .form .section {position:relative; border:2px solid #000; border-radius:4px; background-color:#eee; box-shadow:0px 4px 4px rgba(0,0,0,0.3) inset; overflow:hidden; padding:0px; font-family:'Time Burner Regular'; color:#191919; margin:0px 20px 20px;}
#center .inner .form .msg {height:300px;}
#center .inner .form .section:hover {border-color:#369;}

#center .inner .form .s2 {display:inline-block; vertical-align:bottom; width:250px; margin-bottom:4px; float:right;}

#center .inner .form .section .text {display:block; resize:none; font-size:100%; outline:none; background-color:rgba(0,0,0,0); border:none; margin:0px; padding:0px; width:100%; height:100%; border-radius:0px;}

#center .inner .form .buttons {display:table; width:500px; border-spacing:20px;}
#center .inner .form .buttons .btn {display:table-cell; width:50%;}
#center .inner .form .buttons .btn input {cursor:pointer; padding:0px 8px; border:2px outset #666; color:#fff; background-color:#69c; text-shadow:0px -1px 0px #000; padding:2px; border-radius:8px; box-shadow:0px -20px 20px rgba(0,0,0,0.5) inset; font-size:18pt; font-family:'Radio Space', 'Arial'; font-weight:bold; width:100%;}
#center .inner .form .buttons .btn input:hover {color:#ff9;}
#center .inner .form .buttons .btn input:active {box-shadow:0px -20px 20px rgba(0,0,0,0.8) inset;}

Browse Page XML Database

Code:

<?xml version="1.0" encoding="UTF-8" ?>
<xml>
 <img src="./etc/images/posts/1.png" />
 <img src="./etc/images/posts/2.png" />
 <img src="./etc/images/posts/3.png" />
 <img src="./etc/images/posts/4.png" />
 <img src="./etc/images/posts/5.png" />
 <img src="./etc/images/posts/6.png" />
 <img src="./etc/images/posts/7.png" />
 <img src="./etc/images/posts/8.png" />
 <img src="./etc/images/posts/9.png" />
 <img src="./etc/images/posts/10.png" />
 <img src="./etc/images/posts/11.png" />
 <img src="./etc/images/posts/12.png" />
 <img src="./etc/images/posts/13.png" />
 <img src="./etc/images/posts/14.png" />
 <img src="./etc/images/posts/15.png" />
 <img src="./etc/images/posts/16.png" />
 <img src="./etc/images/posts/17.png" />
 <img src="./etc/images/posts/18.png" />
 <img src="./etc/images/posts/19.png" />
 <img src="./etc/images/posts/20.png" />
 <img src="./etc/images/posts/21.png" />
 <img src="./etc/images/posts/22.png" />
 <img src="./etc/images/posts/23.png" />
 <img src="./etc/images/posts/24.png" />
 <img src="./etc/images/posts/25.png" />
 <img src="./etc/images/posts/26.png" />
 <img src="./etc/images/posts/27.png" />
 <img src="./etc/images/posts/28.png" />
 <img src="./etc/images/posts/29.png" />
 <img src="./etc/images/posts/30.png" />
 <img src="./etc/images/posts/31.png" />
 <img src="./etc/images/posts/32.png" />
 <img src="./etc/images/posts/33.png" />
 <img src="./etc/images/posts/34.png" />
 <img src="./etc/images/posts/35.png" />
</xml>

Browse Page JS Database

Code:

Simple PHP Mailer

Code:

AJAX Mailer

Code:

var xhr_contact;

window.addEventListener('load',initContactVars);
function initContactVars()
{
 var form = document.getElementById('contact');
 var method = form.getAttribute('method');
 var action = form.getAttribute('action');

var handle = function()
 {
  submitContactForm(method,action);
 };
 var submitButton = document.getElementById('submit_form_button');
 submitButton.addEventListener('click',handle);
}

function submitContactForm(method,action)
{
 if (window.XMLHttpRequest)
 {
  xhr_contact = new XMLHttpRequest();
 }
 else
 {
  xhr_contact = new ActiveXObject('MICROSOFT.XMLHTTP');
 }

var subject = document.getElementById('subject').value;
 var message = document.getElementById('message').value;
 var email = document.getElementById('email').value;
 var phone = document.getElementById('phone').value;
 var data = 'subject=' + subject + '&';
 data += 'message=' + message + '&';
 data += 'email=' + email + '&';
 data += 'phone=' + phone;
 data += '&request=yes';
console.log(data);

var vars = null;

if (method == 'GET')
 {
  action += '?' + vars;
 }
 xhr_contact.open(method,action,true);
 if (method == 'POST')
 {
  vars = data;
  xhr_contact.setRequestHeader('Content-type','application/x-www-form-urlencoded');
 }
 xhr_contact.onreadystatechange = function()
 {
  if (xhr_contact.status == 200 && xhr_contact.readyState == 4)
  {
   var response = xhr_contact.responseText;
   if (response != '')
   {
    alert(response);
   }
  }
 };
 xhr_contact.send(vars);
}

Web Development Practice

Pages

Downloads

Time Burner Font

Preview:

Radio Space Font

Preview:

Simple Logo

Preview:

Home Page HTML Code

Code:

Browse Page HTML Code

Code:

Gallery Widget HTML Code

Code:

Gallery Widget CSS Code

Code:

Gallery Widget JavaScript Code

Code:

Contact Page HTML Code

Code:

Contact Page CSS Code

Code:

Browse Page XML Database

Code:

Browse Page JS Database

Code:

Simple PHP Mailer

Code:

AJAX Mailer

Code:

sitmap.xml

Code:

No comments:

Post a Comment