728 lines
28 KiB
HTML
728 lines
28 KiB
HTML
<!DOCTYPE html>
|
|
<!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]-->
|
|
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]-->
|
|
<!--[if (gte IE 8)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
|
|
<head>
|
|
|
|
<!--- Basic Page Needs
|
|
================================================== -->
|
|
<meta charset="utf-8">
|
|
<title>Daniel Tam - Administrator and Developer</title>
|
|
<meta name="description" content="">
|
|
<meta name="author" content="">
|
|
|
|
<!-- Mobile Specific Metas
|
|
================================================== -->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
|
|
<!-- CSS
|
|
================================================== -->
|
|
<link rel="stylesheet" href="css/default.css">
|
|
<link rel="stylesheet" href="css/layout.css">
|
|
<link rel="stylesheet" href="css/media-queries.css">
|
|
<link rel="stylesheet" href="css/magnific-popup.css">
|
|
|
|
<!-- Script
|
|
================================================== -->
|
|
<script src="js/modernizr.js"></script>
|
|
|
|
<!-- Favicons
|
|
================================================== -->
|
|
<link rel="shortcut icon" href="favicon.png" >
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- Header
|
|
================================================== -->
|
|
<header id="home">
|
|
|
|
<nav id="nav-wrap">
|
|
|
|
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
|
|
<a class="mobile-btn" href="#" title="Hide navigation">Hide navigation</a>
|
|
|
|
<ul id="nav" class="nav">
|
|
<li class="current"><a class="smoothscroll" href="#home">Home</a></li>
|
|
<li><a class="smoothscroll" href="#about">About</a></li>
|
|
<li><a class="smoothscroll" href="#resume">Resume</a></li>
|
|
<li><a class="smoothscroll" href="#portfolio">Works</a></li>
|
|
<li><a class="smoothscroll" href="#testimonials">Testimonials</a></li>
|
|
<li><a class="smoothscroll" href="#contact">Contact</a></li>
|
|
</ul> <!-- end #nav -->
|
|
|
|
</nav> <!-- end #nav-wrap -->
|
|
|
|
<div class="row banner">
|
|
<div class="banner-text">
|
|
<h1 class="responsive-headline">I'm Daniel Tam.</h1>
|
|
<h3>I'm a <span>systems administrator</span> and <span>application developer</span> that is able create and manage systems or applications
|
|
through all different kinds of technology for any given scenario. Let's <a class="smoothscroll" href="#about">start scrolling</a>
|
|
and learn more <a class="smoothscroll" href="#about">about me</a>.</h3>
|
|
<hr />
|
|
<ul class="social">
|
|
<li><a href="https://www.linkedin.com/in/danieltam-net/" title="LinkedIn"><i class="fa fa-linkedin"></i></a></li>
|
|
<li><a href="https://www.instagram.com/omgdanieltam" title="Instagram"><i class="fa fa-instagram"></i></a></li>
|
|
<li><a href="https://twitter.com/omgdanieltam" title="Twitter"><i class="fa fa-twitter"></i></a></li>
|
|
<li><a href="https://git.danieltam.net/daniel" title="GitLab"><i class="fa fa-gitlab"></i></a></li>
|
|
<li><a href="https://github.com/omgdanieltam" title="GitHub"><i class="fa fa-github"></i></a></li>
|
|
<li><a href="mailto:daniel@danieltam.net" title="E-Mail"><i class="fa fa-envelope"></i></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="scrolldown">
|
|
<a class="smoothscroll" href="#about"><i class="icon-down-circle"></i></a>
|
|
</p>
|
|
|
|
</header> <!-- Header End -->
|
|
|
|
|
|
<!-- About Section
|
|
================================================== -->
|
|
<section id="about">
|
|
|
|
<div class="row">
|
|
|
|
<div class="three columns">
|
|
|
|
<img class="profile-pic" src="images/profilepic.jpg" alt="" />
|
|
|
|
</div>
|
|
|
|
<div class="nine columns main-col">
|
|
|
|
<h2>About Me</h2>
|
|
|
|
<p>I am a systems administrator and applications developer that is self motivated to pursue
|
|
all things technology. In my pursuit of knowledge, I keep up new techonologies and apply
|
|
that information to every inch of my life. I pride myself on being skilled in many different
|
|
aspects from technologies such as Linux, Windows, Cisco switches, Checkpoint firewalls, C#,
|
|
PHP, and many more. From start to finish, I will always create the perfect solution for any
|
|
situation.
|
|
</p>
|
|
|
|
<div class="row">
|
|
|
|
<div class="columns contact-details">
|
|
|
|
<h2>Contact Details</h2>
|
|
<p class="address">
|
|
<span>Daniel Tam</span><br>
|
|
<span>Plano, TX 75075 US
|
|
</span><br>
|
|
<span>(469) 892-8730</span><br>
|
|
<span>daniel@danieltam.net</span>
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div class="columns download">
|
|
<p>
|
|
<a href="resume.pdf" class="button"><i class="fa fa-download"></i>Download Resume</a>
|
|
</p>
|
|
</div>
|
|
|
|
</div> <!-- end row -->
|
|
|
|
</div> <!-- end .main-col -->
|
|
|
|
</div>
|
|
|
|
</section> <!-- About Section End-->
|
|
|
|
|
|
<!-- Resume Section
|
|
================================================== -->
|
|
<section id="resume">
|
|
|
|
<!-- Work
|
|
----------------------------------------------- -->
|
|
<div class="row work">
|
|
|
|
<div class="three columns header-col">
|
|
<h1><span>Work</span></h1>
|
|
</div>
|
|
|
|
<div class="nine columns main-col">
|
|
|
|
<div class="row item">
|
|
|
|
<div class="twelve columns">
|
|
|
|
<h3>Trinity Consultants, Inc.</h3>
|
|
<p class="info">Network Adminsitrator <span>•</span> <em class="date">Janurary 2015 - Present</em></p>
|
|
|
|
<p>
|
|
As the network administrator for Trinity Consutlants, I'm in charge of configuring, deploying, and
|
|
maintaining all networking equipment including HP network switches and Checkpoint firewalls across more than 50
|
|
offices and locations. I also assited configuring and deploying new offices with new equipment such as
|
|
Windows servers and Windows workstations. I also managed the Mitel and Avaya phone systems within each office
|
|
from updating to adding new phones or lines. I became the dedicated Linux administrator for Trinity Consultants,
|
|
configuring and managing Linux machines where as needed and even creating and administrating a CAMx cluster
|
|
to perform parallel tasks for modeling air quality.
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div> <!-- item end -->
|
|
|
|
<div class="row item">
|
|
|
|
<div class="twelve columns">
|
|
|
|
<h3>Trinity Consultants, Inc.</h3>
|
|
<p class="info">Desktop Administrator <span>•</span> <em class="date">August 2013 - Janurary 2015</em></p>
|
|
|
|
<p>
|
|
During my time as the Desktop Administrator for Trinity Consultants, I ordered and deployed new workstations
|
|
to existing and new users. I assisted in troubleshooting hardware and software for over 500 different users
|
|
across the the company using remote tools such as VNC and remote powershell sessions. I deployed and updated
|
|
Trinity Consultants' workstation imaging software by setting up a Windows Deployment Service and Microsoft
|
|
Deployment Toolkit server. I also wrote C# programs and Powershell scripts to assist in the deployment of
|
|
new software and easier I.T. automation tools.
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div> <!-- item end -->
|
|
|
|
</div> <!-- main-col end -->
|
|
|
|
</div> <!-- End Work -->
|
|
|
|
|
|
<!-- Skills
|
|
----------------------------------------------- -->
|
|
<div class="row skill">
|
|
|
|
<div class="three columns header-col">
|
|
<h1><span>Skills</span></h1>
|
|
</div>
|
|
|
|
<div class="nine columns main-col">
|
|
|
|
<p>I'm never afraid of learning new technologies and am always working on improving my skills and trying
|
|
to stay up to date with the hottest new items. I strive to become a very knowledgeabke person that
|
|
has a very wide range of skills and assets that can contribute to any environment that I
|
|
am placeed into. While I continue to gather new skills, my main areas of knowledge lie mostly
|
|
in systems administration and application development. Below is an example of my skillset.
|
|
</p>
|
|
|
|
<div class="bars">
|
|
|
|
<ul class="skills">
|
|
<li><span class="bar-expand windows"></span><em>Window Systems Administrator</em></li>
|
|
<li><span class="bar-expand linux"></span><em>Linux Systems Administrator</em></li>
|
|
<li><span class="bar-expand csharp"></span><em>C# Development</em></li>
|
|
<li><span class="bar-expand php"></span><em>PHP Development</em></li>
|
|
<li><span class="bar-expand powershell"></span><em>Powershell Scripting</em></li>
|
|
<li><span class="bar-expand checkpoint"></span><em>Checkpoint Firewalls</em></li>
|
|
</ul>
|
|
|
|
</div><!-- end skill-bars -->
|
|
|
|
</div> <!-- main-col end -->
|
|
|
|
</div> <!-- End skills -->
|
|
|
|
</section> <!-- Resume Section End-->
|
|
|
|
|
|
<!-- Portfolio Section
|
|
================================================== -->
|
|
<section id="portfolio">
|
|
|
|
<div class="row">
|
|
|
|
<div class="twelve columns collapsed">
|
|
|
|
<h1>Check Out Some of My Works.</h1>
|
|
|
|
<!-- portfolio-wrapper -->
|
|
<div id="portfolio-wrapper" class="bgrid-quarters s-bgrid-thirds cf">
|
|
|
|
<div class="columns portfolio-item">
|
|
<div class="item-wrap">
|
|
|
|
<a href="#modal-01" title="">
|
|
<img alt="" src="images/portfolio/coffee.jpg">
|
|
<div class="overlay">
|
|
<div class="portfolio-item-meta">
|
|
<h5>Coffee</h5>
|
|
<p>Illustrration</p>
|
|
</div>
|
|
</div>
|
|
<div class="link-icon"><i class="icon-plus"></i></div>
|
|
</a>
|
|
|
|
</div>
|
|
</div> <!-- item end -->
|
|
|
|
<div class="columns portfolio-item">
|
|
<div class="item-wrap">
|
|
|
|
<a href="#modal-02" title="">
|
|
<img alt="" src="images/portfolio/console.jpg">
|
|
<div class="overlay">
|
|
<div class="portfolio-item-meta">
|
|
<h5>Console</h5>
|
|
<p>Web Development</p>
|
|
</div>
|
|
</div>
|
|
<div class="link-icon"><i class="icon-plus"></i></div>
|
|
</a>
|
|
|
|
</div>
|
|
</div> <!-- item end -->
|
|
|
|
<div class="columns portfolio-item">
|
|
<div class="item-wrap">
|
|
|
|
<a href="#modal-03" title="">
|
|
<img alt="" src="images/portfolio/judah.jpg">
|
|
<div class="overlay">
|
|
<div class="portfolio-item-meta">
|
|
<h5>Judah</h5>
|
|
<p>Webdesign</p>
|
|
</div>
|
|
</div>
|
|
<div class="link-icon"><i class="icon-plus"></i></div>
|
|
</a>
|
|
|
|
</div>
|
|
</div> <!-- item end -->
|
|
|
|
<div class="columns portfolio-item">
|
|
<div class="item-wrap">
|
|
|
|
<a href="#modal-04" title="">
|
|
<img alt="" src="images/portfolio/into-the-light.jpg">
|
|
<div class="overlay">
|
|
<div class="portfolio-item-meta">
|
|
<h5>Into The Light</h5>
|
|
<p>Photography</p>
|
|
</div>
|
|
</div>
|
|
<div class="link-icon"><i class="icon-plus"></i></div>
|
|
</a>
|
|
|
|
</div>
|
|
</div> <!-- item end -->
|
|
|
|
<div class="columns portfolio-item">
|
|
<div class="item-wrap">
|
|
|
|
<a href="#modal-05" title="">
|
|
<img alt="" src="images/portfolio/farmerboy.jpg">
|
|
<div class="overlay">
|
|
<div class="portfolio-item-meta">
|
|
<h5>Farmer Boy</h5>
|
|
<p>Branding</p>
|
|
</div>
|
|
</div>
|
|
<div class="link-icon"><i class="icon-plus"></i></div>
|
|
</a>
|
|
|
|
</div>
|
|
</div> <!-- item end -->
|
|
|
|
<div class="columns portfolio-item">
|
|
<div class="item-wrap">
|
|
|
|
<a href="#modal-06" title="">
|
|
<img alt="" src="images/portfolio/girl.jpg">
|
|
<div class="overlay">
|
|
<div class="portfolio-item-meta">
|
|
<h5>Girl</h5>
|
|
<p>Photography</p>
|
|
</div>
|
|
</div>
|
|
<div class="link-icon"><i class="icon-plus"></i></div>
|
|
</a>
|
|
|
|
</div>
|
|
</div> <!-- item end -->
|
|
|
|
<div class="columns portfolio-item">
|
|
<div class="item-wrap">
|
|
|
|
<a href="#modal-07" title="">
|
|
<img alt="" src="images/portfolio/origami.jpg">
|
|
<div class="overlay">
|
|
<div class="portfolio-item-meta">
|
|
<h5>Origami</h5>
|
|
<p>Illustrration</p>
|
|
</div>
|
|
</div>
|
|
<div class="link-icon"><i class="icon-plus"></i></div>
|
|
</a>
|
|
|
|
</div>
|
|
</div> <!-- item end -->
|
|
|
|
<div class="columns portfolio-item">
|
|
<div class="item-wrap">
|
|
|
|
<a href="#modal-08" title="">
|
|
<img alt="" src="images/portfolio/retrocam.jpg">
|
|
<div class="overlay">
|
|
<div class="portfolio-item-meta">
|
|
<h5>Retrocam</h5>
|
|
<p>Web Development</p>
|
|
</div>
|
|
</div>
|
|
<div class="link-icon"><i class="icon-plus"></i></div>
|
|
</a>
|
|
|
|
</div>
|
|
</div> <!-- item end -->
|
|
|
|
</div> <!-- portfolio-wrapper end -->
|
|
|
|
</div> <!-- twelve columns end -->
|
|
|
|
|
|
<!-- Modal Popup
|
|
--------------------------------------------------------------- -->
|
|
|
|
<div id="modal-01" class="popup-modal mfp-hide">
|
|
|
|
<img class="scale-with-grid" src="images/portfolio/modals/m-coffee.jpg" alt="" />
|
|
|
|
<div class="description-box">
|
|
<h4>Coffee Cup</h4>
|
|
<p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.</p>
|
|
<span class="categories"><i class="fa fa-tag"></i>Branding, Webdesign</span>
|
|
</div>
|
|
|
|
<div class="link-box">
|
|
<a href="http://www.behance.net">Details</a>
|
|
<a class="popup-modal-dismiss">Close</a>
|
|
</div>
|
|
|
|
</div><!-- modal-01 End -->
|
|
|
|
<div id="modal-02" class="popup-modal mfp-hide">
|
|
|
|
<img class="scale-with-grid" src="images/portfolio/modals/m-console.jpg" alt="" />
|
|
|
|
<div class="description-box">
|
|
<h4>Console</h4>
|
|
<p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.</p>
|
|
<span class="categories"><i class="fa fa-tag"></i>Branding, Web Development</span>
|
|
</div>
|
|
|
|
<div class="link-box">
|
|
<a href="http://www.behance.net">Details</a>
|
|
<a class="popup-modal-dismiss">Close</a>
|
|
</div>
|
|
|
|
</div><!-- modal-02 End -->
|
|
|
|
<div id="modal-03" class="popup-modal mfp-hide">
|
|
|
|
<img class="scale-with-grid" src="images/portfolio/modals/m-judah.jpg" alt="" />
|
|
|
|
<div class="description-box">
|
|
<h4>Judah</h4>
|
|
<p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.</p>
|
|
<span class="categories"><i class="fa fa-tag"></i>Branding</span>
|
|
</div>
|
|
|
|
<div class="link-box">
|
|
<a href="http://www.behance.net">Details</a>
|
|
<a class="popup-modal-dismiss">Close</a>
|
|
</div>
|
|
|
|
</div><!-- modal-03 End -->
|
|
|
|
<div id="modal-04" class="popup-modal mfp-hide">
|
|
|
|
<img class="scale-with-grid" src="images/portfolio/modals/m-intothelight.jpg" alt="" />
|
|
|
|
<div class="description-box">
|
|
<h4>Into the Light</h4>
|
|
<p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.</p>
|
|
<span class="categories"><i class="fa fa-tag"></i>Photography</span>
|
|
</div>
|
|
|
|
<div class="link-box">
|
|
<a href="http://www.behance.net">Details</a>
|
|
<a class="popup-modal-dismiss">Close</a>
|
|
</div>
|
|
|
|
</div><!-- modal-04 End -->
|
|
|
|
<div id="modal-05" class="popup-modal mfp-hide">
|
|
|
|
<img class="scale-with-grid" src="images/portfolio/modals/m-farmerboy.jpg" alt="" />
|
|
|
|
<div class="description-box">
|
|
<h4>Farmer Boy</h4>
|
|
<p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.</p>
|
|
<span class="categories"><i class="fa fa-tag"></i>Branding, Webdesign</span>
|
|
</div>
|
|
|
|
<div class="link-box">
|
|
<a href="http://www.behance.net">Details</a>
|
|
<a class="popup-modal-dismiss">Close</a>
|
|
</div>
|
|
|
|
</div><!-- modal-05 End -->
|
|
|
|
<div id="modal-06" class="popup-modal mfp-hide">
|
|
|
|
<img class="scale-with-grid" src="images/portfolio/modals/m-girl.jpg" alt="" />
|
|
|
|
<div class="description-box">
|
|
<h4>Girl</h4>
|
|
<p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.</p>
|
|
<span class="categories"><i class="fa fa-tag"></i>Photography</span>
|
|
</div>
|
|
|
|
<div class="link-box">
|
|
<a href="http://www.behance.net">Details</a>
|
|
<a class="popup-modal-dismiss">Close</a>
|
|
</div>
|
|
|
|
</div><!-- modal-06 End -->
|
|
|
|
<div id="modal-07" class="popup-modal mfp-hide">
|
|
|
|
<img class="scale-with-grid" src="images/portfolio/modals/m-origami.jpg" alt="" />
|
|
|
|
<div class="description-box">
|
|
<h4>Origami</h4>
|
|
<p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.</p>
|
|
<span class="categories"><i class="fa fa-tag"></i>Branding, Illustration</span>
|
|
</div>
|
|
|
|
<div class="link-box">
|
|
<a href="http://www.behance.net">Details</a>
|
|
<a class="popup-modal-dismiss">Close</a>
|
|
</div>
|
|
|
|
</div><!-- modal-07 End -->
|
|
|
|
<div id="modal-08" class="popup-modal mfp-hide">
|
|
|
|
<img class="scale-with-grid" src="images/portfolio/modals/m-retrocam.jpg" alt="" />
|
|
|
|
<div class="description-box">
|
|
<h4>Retrocam</h4>
|
|
<p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.</p>
|
|
<span class="categories"><i class="fa fa-tag"></i>Webdesign, Photography</span>
|
|
</div>
|
|
|
|
<div class="link-box">
|
|
<a href="http://www.behance.net">Details</a>
|
|
<a class="popup-modal-dismiss">Close</a>
|
|
</div>
|
|
|
|
</div><!-- modal-01 End -->
|
|
|
|
|
|
</div> <!-- row End -->
|
|
|
|
</section> <!-- Portfolio Section End-->
|
|
|
|
<!-- Testimonials Section
|
|
================================================== -->
|
|
<section id="testimonials">
|
|
|
|
<div class="text-container">
|
|
|
|
<div class="row">
|
|
|
|
<div class="two columns header-col">
|
|
|
|
<h1><span>Client Testimonials</span></h1>
|
|
|
|
</div>
|
|
|
|
<div class="ten columns flex-container">
|
|
|
|
<div class="flexslider">
|
|
|
|
<ul class="slides">
|
|
|
|
<li>
|
|
<blockquote>
|
|
<p>Your work is going to fill a large part of your life, and the only way to be truly satisfied is
|
|
to do what you believe is great work. And the only way to do great work is to love what you do.
|
|
If you haven't found it yet, keep looking. Don't settle. As with all matters of the heart, you'll know when you find it.
|
|
</p>
|
|
<cite>Steve Jobs</cite>
|
|
</blockquote>
|
|
</li> <!-- slide ends -->
|
|
|
|
<li>
|
|
<blockquote>
|
|
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet.
|
|
Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem
|
|
nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris.
|
|
</p>
|
|
<cite>Mr. Adobe</cite>
|
|
</blockquote>
|
|
</li> <!-- slide ends -->
|
|
|
|
</ul>
|
|
|
|
</div> <!-- div.flexslider ends -->
|
|
|
|
</div> <!-- div.flex-container ends -->
|
|
|
|
</div> <!-- row ends -->
|
|
|
|
</div> <!-- text-container ends -->
|
|
|
|
</section> <!-- Testimonials Section End-->
|
|
|
|
|
|
<!-- Contact Section
|
|
================================================== -->
|
|
<section id="contact">
|
|
|
|
<div class="row section-head">
|
|
|
|
<div class="two columns header-col">
|
|
|
|
<h1><span>Get In Touch.</span></h1>
|
|
|
|
</div>
|
|
|
|
<div class="ten columns">
|
|
|
|
<p class="lead">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
|
|
eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
|
|
voluptatem quia voluptas sit aspernatur aut odit aut fugit.
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="row">
|
|
|
|
<div class="eight columns">
|
|
|
|
<!-- form -->
|
|
<form action="" method="post" id="contactForm" name="contactForm">
|
|
<fieldset>
|
|
|
|
<div>
|
|
<label for="contactName">Name <span class="required">*</span></label>
|
|
<input type="text" value="" size="35" id="contactName" name="contactName">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="contactEmail">Email <span class="required">*</span></label>
|
|
<input type="text" value="" size="35" id="contactEmail" name="contactEmail">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="contactSubject">Subject</label>
|
|
<input type="text" value="" size="35" id="contactSubject" name="contactSubject">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="contactMessage">Message <span class="required">*</span></label>
|
|
<textarea cols="50" rows="15" id="contactMessage" name="contactMessage"></textarea>
|
|
</div>
|
|
|
|
<div>
|
|
<button class="submit">Submit</button>
|
|
<span id="image-loader">
|
|
<img alt="" src="images/loader.gif">
|
|
</span>
|
|
</div>
|
|
|
|
</fieldset>
|
|
</form> <!-- Form End -->
|
|
|
|
<!-- contact-warning -->
|
|
<div id="message-warning"> Error boy</div>
|
|
<!-- contact-success -->
|
|
<div id="message-success">
|
|
<i class="fa fa-check"></i>Your message was sent, thank you!<br>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<aside class="four columns footer-widgets">
|
|
|
|
<div class="widget widget_contact">
|
|
|
|
<h4>Address and Phone</h4>
|
|
<p class="address">
|
|
Jonathan Doe<br>
|
|
1600 Amphitheatre Parkway <br>
|
|
Mountain View, CA 94043 US<br>
|
|
<span>(123) 456-7890</span>
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div class="widget widget_tweets">
|
|
|
|
<h4 class="widget-title">Latest Tweets</h4>
|
|
|
|
<a class="twitter-timeline" data-height="510" data-theme="dark" href="https://twitter.com/omgdanieltam?ref_src=twsrc%5Etfw">Tweets by omgdanieltam</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
|
|
|
|
</div>
|
|
|
|
</aside>
|
|
|
|
</div>
|
|
|
|
</section> <!-- Contact Section End-->
|
|
|
|
|
|
<!-- footer
|
|
================================================== -->
|
|
<footer>
|
|
|
|
<div class="row">
|
|
|
|
<div class="twelve columns">
|
|
|
|
<ul class="social-links">
|
|
<li><a href="https://www.linkedin.com/in/danieltam-net/" title="LinkedIn"><i class="fa fa-linkedin"></i></a></li>
|
|
<li><a href="https://www.instagram.com/omgdanieltam" title="Instagram"><i class="fa fa-instagram"></i></a></li>
|
|
<li><a href="https://twitter.com/omgdanieltam" title="Twitter"><i class="fa fa-twitter"></i></a></li>
|
|
<li><a href="https://git.danieltam.net/daniel" title="GitLab"><i class="fa fa-gitlab"></i></a></li>
|
|
<li><a href="https://github.com/omgdanieltam" title="GitHub"><i class="fa fa-github"></i></a></li>
|
|
<li><a href="mailto:daniel@danieltam.net" title="E-Mail"><i class="fa fa-envelope"></i></a></li>
|
|
</ul>
|
|
|
|
<ul class="copyright">
|
|
<li>© Copyright 2014 CeeVee</li>
|
|
<li>Design by <a title="Styleshout" href="http://www.styleshout.com/">Styleshout</a></li>
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<div id="go-top"><a class="smoothscroll" title="Back to Top" href="#home"><i class="icon-up-open"></i></a></div>
|
|
|
|
</div>
|
|
|
|
</footer> <!-- Footer End-->
|
|
|
|
<!-- Java Script
|
|
================================================== -->
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
|
<script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"><\/script>')</script>
|
|
<script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>
|
|
|
|
<script src="js/jquery.flexslider.js"></script>
|
|
<script src="js/waypoints.js"></script>
|
|
<script src="js/jquery.fittext.js"></script>
|
|
<script src="js/magnific-popup.js"></script>
|
|
<script src="js/init.js"></script>
|
|
|
|
</body>
|
|
|
|
</html> |