nekocentral
/
Websites
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Activity
In this repo i store all my websites, each in a different branch
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 Commit
7 Branches
28 MiB
Tree: 080593cd9e
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '080593cd9e'
${ noResults }
Websites/index.html

329 lines
15 KiB
Raw Normal View History

Upload site from soon to be shutdown server
6 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>Marcel Haazen | Home</title>
  6.     <meta name="description" content="" />
  7.     <meta name="keywords" content="" />
  8.     <meta name="author" content="Marcel Haazen">
  9.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
  10.     <!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
  11. 

  12.     <!-- Favicone Icon -->
  13.     <link rel="apple-touch-icon" sizes="180x180" href="/img/flavicon/apple-touch-icon.png">
  14.     <link rel="icon" type="image/png" sizes="32x32" href="/img/flavicon/favicon-32x32.png">
  15.     <link rel="icon" type="image/png" sizes="16x16" href="/img/flavicon/favicon-16x16.png">
  16.     <link rel="manifest" href="/img/flavicon/manifest.json">
  17.     <link rel="mask-icon" href="/img/flavicon/safari-pinned-tab.svg" color="#5bbad5">
  18.     <link rel="shortcut icon" href="/img/flavicon/favicon.ico">
  19.     <meta name="msapplication-config" content="/img/flavicon/browserconfig.xml">
  20.     <meta name="theme-color" content="#646464">
  21. 

  22.     <!-- CSS -->
  23.     <link href="css/style.css" rel="stylesheet" type="text/css" />
  24.     <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
  25.     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
  26.     <script src="js/ityped.js" type="text/javascript"></script>
  27. </head>
  28. <body>
  29. 

  30. <!-- Site Wraper -->
  31. <div class="wrapper">
  32. 

  33.     <!-- Header -->
  34.     <header id="header" class="header">
  35.         <div class="container header-inner">
  36. 

  37.             <!-- Logo -->
  38.             <div class="logo">
  39.                 <a href="index.html">
  40.                     <img class="logo-light" src="img/logo-black.png" alt="Haazen" />
  41.                     <img class="logo-dark" src="img/logo-white.png" alt="Haazen" />
  42.                 </a>
  43.             </div>
  44.             <!-- End Logo -->
  45. 

  46.             <!-- Mobile Navbar Icon -->
  47.             <div class="nav-mobile nav-bar-icon">
  48.                 <span></span>
  49.             </div>
  50.             <!-- End Mobile Navbar Icon -->
  51. 

  52.             <!-- Navbar Navigation -->
  53.             <div class="nav-menu">
  54.                 <ul class="nav-menu-inner">
  55.                     <li><a href="/">Home</a></li>
  56.                     <li><a href="service.html">Services</a></li>
  57.                 </ul>
  58.             </div>
  59.             <!-- End Navbar Navigation -->
  60. 

  61.         </div>
  62.     </header>
  63.     <!-- End Header -->
  64. 

  65.     <!-- CONTENT --------------------------------------------------------------------------------->
  66.     <!-- Intro -->
  67.     <section id="intro" class="intro">
  68.         <!-- Intro Scroll Down -->
  69.         <div class="intro-scroll-down">
  70.             <a class="scroll-down"> <span class="mouse">
  71.                         <span class="mouse-dot"></span> </span>
  72.             </a>
  73.         </div>
  74.         <!-- End Intro Scroll Down -->
  75.         <!-- Static Intro -->
  76.         <div class="bg-image overlay-dark80 dark-bg" data-background-img="img/full/09.jpg">
  77.             <div class="js-fullscreen-height container">
  78.                 <div class="intro-content">
  79.                     <div class="intro-content-inner">
  80.                         <h1 class="">hi, I'm <span id="desc"></span>
  81.                         </h1>
  82.                         <script>
  83.                             ityped.init('#desc', {
  84.                                 strings:['Marcel Haazen', 'a SysAdmin', 'a Programmer'], loop:true
  85.                             });
  86.                         </script>
  87.                         <br>
  88.                         <div><a class="btn btn-md btn-white-line xs-hidden" href="service.html">My services</a><span class="btn-space-10 xs-hidden"></span><a class="btn btn-md btn-white-line">My work</a></div>
  89.                     </div>
  90.                 </div>
  91.             </div>
  92.         </div>
  93.         <!-- End Static Intro -->
  94.     </section>
  95.     <!-- End Intro -->
  96. 

  97.     <!-- Service Section -->
  98.     <section id="service" class="ptb-60 dark-bg ptb-sm-60">
  99.         <div class="container text-center">
  100.             <h3>My Services</h3>
  101.             <div class="spacer-60"></div>
  102.             <div class="row">
  103.                 <div class="col-md-3 col-sm-6 mb-45">
  104.                     <div class="page-icon-top"><i class="fa fa-server"></i></div>
  105.                     <h5>Server Administration</h5>
  106.                     <p>Do you need a server configured or setup from scratch? I will setup and configure everything so you never have to worry about a thing.</p>
  107.                 </div>
  108.                 <div class="col-md-3 col-sm-6 mb-45">
  109.                     <div class="page-icon-top"><i class="fa fa-shield"></i></div>
  110.                     <h5>Cyber Security</h5>
  111.                     <p>Nowadays security is a must but you might not know how to set it up. I'll help you secure your systems so you don't have to worry.</p>
  112.                 </div>
  113.                 <div class="col-md-3 col-sm-6 mb-45">
  114.                     <div class="page-icon-top"><i class="fa fa-code"></i></div>
  115.                     <h5>Programming</h5>
  116.                     <p>Need a custom system for a blog, website or API? I will create and set it up for you so you can be happy.</p>
  117.                 </div>
  118.                 <div class="col-md-3 col-sm-6 mb-45">
  119.                     <div class="page-icon-top"><i class="fa fa-exchange"></i></div>
  120.                     <h5>Migration</h5>
  121.                     <p>People want to be able to change hosts or change the application they use. Usually its a pain but I'm here to make it as easy as possible.</p>
  122.                 </div>
  123.             </div>
  124.             <div class="spacer-15"></div>
  125.             <div class="row">
  126.                 <div class="col-md-8 col-sm-8">
  127.                     <h4 class="">Want to see the rest?</h4>
  128.                     <p class="mb-0">Click the button to see the rest of my services.</p>
  129.                 </div>
  130.                 <div class="col-md-2 col-sm-2 see-more">
  131.                     <a class="btn btn-md btn-white-line float-right float-none-xs" href="service.html">See All services</a>
  132.                 </div>
  133.                 <div class="col-md-2 col-sm-2"></div>
  134.             </div>
  135.         </div>
  136.     </section>
  137.     <!-- End Service Section -->
  138. 

  139.     <!-- Work Section -->
  140.     <section id="work" class="pt-60 pt-sm-60 text-center">
  141.         <div class="container">
  142.             <h3>My Work</h3>
  143.             <div class="spacer-30"></div>
  144.             <!-- work Filter -->
  145.             <div class="row">
  146.                 <ul class="container-filter categories-filter">
  147.                     <li><a class="categories active" data-filter="*">All</a></li>
  148.                     <li><a class="categories" data-filter=".admin">Server Administration</a></li>
  149.                     <li><a class="categories" data-filter=".design">Design</a></li>
  150.                     <li><a class="categories" data-filter=".program">Programming</a></li>
  151.                     <li><a class="categories" data-filter=".other">other</a></li>
  152.                 </ul>
  153.             </div>
  154.             <!-- End work Filter -->
  155.         </div>
  156.         <!-- Work Gallary -->
  157.         <div class="container-fluid ">
  158.             <div class="row">
  159.                 <div class="container-grid nf-col-4">
  160. 

  161.                     <div class="nf-item design other">
  162.                         <div class="item-box">
  163.                             <a class="cbox-gallary1" href="img/portfolio/puritysite.png" title="Template based Site - Purity Media">
  164.                                 <img class="item-container" src="img/portfolio/puritysite.png" alt="site" />
  165.                                 <div class="item-mask">
  166.                                     <div class="item-caption">
  167.                                         <h5 class="white">Template based Site - Purity Media</h5>
  168.                                         <p class="white">Design, Other</p>
  169.                                     </div>
  170.                                 </div>
  171.                             </a>
  172.                         </div>
  173.                     </div>
  174. 

  175.                     <div class="nf-item design other">
  176.                         <div class="item-box">
  177.                             <a class="cbox-gallary1" href="img/portfolio/opimizesite.png" title="Template based site - Optimize Group">
  178.                                 <img class="item-container" src="img/portfolio/opimizesite.png" alt="site" />
  179.                                 <div class="item-mask">
  180.                                     <div class="item-caption">
  181.                                         <h5 class="white">Template based site - Optimize Group</h5>
  182.                                         <p class="white">Design, Other</p>
  183.                                     </div>
  184.                                 </div>
  185.                             </a>
  186.                         </div>
  187.                     </div>
  188. 

  189.                     <div class="nf-item design other program">
  190.                         <div class="item-box">
  191.                             <a class="cbox-gallary1" href="img/portfolio/optimizeblog.png" title="Custom Blog - Optimize Group">
  192.                                 <img class="item-container" src="img/portfolio/optimizeblog.png" alt="Blog" />
  193.                                 <div class="item-mask">
  194.                                     <div class="item-caption">
  195.                                         <h5 class="white">Custom Blog - Optimize Group</h5>
  196.                                         <p class="white">Design, Programming, Other</p>
  197.                                     </div>
  198.                                 </div>
  199.                             </a>
  200.                         </div>
  201.                     </div>
  202. 

  203.                 </div>
  204.             </div>
  205.         </div>
  206.         <!-- End Work Gallary -->
  207.     </section>
  208.     <!-- End Work Section -->
  209. 

  210.     <!-- Action Box Section -->
  211.     <section id="action-box" class="ptb-60">
  212.         <div class="container">
  213.             <div class="row">
  214.                 <div class="col-md-8 col-sm-8">
  215.                     <h4 class="">Want to see more?</h4>
  216.                     <p class="mb-0">Click the button to see the rest of my work.</p>
  217.                 </div>
  218.                 <div class="col-md-4 col-sm-4 see-more">
  219.                     <a class="btn btn-md btn-black-line float-right float-none-xs">See All Work</a>
  220. 

  221.                 </div>
  222.             </div>
  223.         </div>
  224.     </section>
  225.     <!-- End Action Box Section -->
  226. 

  227.     <!-- Process -->
  228.     <section id="process" class="dark-bg ptb-60 ptb-sm-60">
  229.         <div class="container text-center">
  230.             <h3>Easy Process</h3>
  231.             <div class="spacer-60"></div>
  232.             <div class="row">
  233.                 <div class="col-md-2 col-sm-4 col-xs-6">
  234.                     <div class="tipped" data-title="Step1 - Skype Interview" data-tipper-options='{"direction":"top"}'>
  235.                         <div class="page-icon-top"><i class="ion ion-ios-people-outline"></i></div>
  236.                         <h6>Interview</h6>
  237.                     </div>
  238.                 </div>
  239.                 <div class="col-md-2 col-sm-4 col-xs-6">
  240.                     <div class="tipped" data-title="Step2 - Project Plan" data-tipper-options='{"direction":"top"}'>
  241.                         <div class="page-icon-top"><i class="ion ion-ios-paper-outline"></i></div>
  242.                         <h6>Plan</h6>
  243.                     </div>
  244.                 </div>
  245.                 <div class="col-md-2 col-sm-4 col-xs-6">
  246.                     <div class="tipped" data-title="Step3 - Design" data-tipper-options='{"direction":"top"}'>
  247.                         <div class="page-icon-top"><i class="ion ion-ios-compose-outline"></i></div>
  248.                         <h6>Design</h6>
  249.                     </div>
  250.                 </div>
  251.                 <div class="col-md-2 col-sm-4 col-xs-6">
  252.                     <div class="tipped" data-title="Step4 - Development" data-tipper-options='{"direction":"top"}'>
  253.                         <div class="page-icon-top"><i class="ion ion-ios-gear-outline"></i></div>
  254.                         <h6>Development</h6>
  255.                     </div>
  256.                 </div>
  257.                 <div class="col-md-2 col-sm-4 col-xs-6">
  258.                     <div class="tipped" data-title="Step5 - Testing" data-tipper-options='{"direction":"top"}'>
  259.                         <div class="page-icon-top"><i class="ion ion-ios-pulse"></i></div>
  260.                         <h6>Testing</h6>
  261.                     </div>
  262.                 </div>
  263.                 <div class="col-md-2 col-sm-4 col-xs-6">
  264.                     <div class="tipped" data-title="Step6 - Delivery" data-tipper-options='{"direction":"top"}'>
  265.                         <div class="page-icon-top"><i class="ion ion-ios-clock-outline"></i></div>
  266.                         <h6>Delivery</h6>
  267.                     </div>
  268.                 </div>
  269.             </div>
  270.         </div>
  271.     </section>
  272.     <!-- End Process -->
  273. 

  274.     <!-- END CONTENT ---------------------------------------------------------------------------->
  275. 

  276.     <!-- FOOTER -->
  277.     <footer class="footer pt-15-b5">
  278.         <div class="container">
  279.             <div class="row">
  280.                 <!-- Copyright -->
  281.                 <div class="col-md-7 col-sm-8 col-xs-12 mt-xs-15">
  282.                     <p>© 2015-<script>document.write(new Date().getFullYear())</script> <a><b>Marcel Haazen</b></a>. All Rights Reserved</p>
  283.                 </div>
  284.                 <!-- End Copyright -->
  285. 

  286.                 <!-- Social -->
  287.                 <div class="col-md-3 col-md-offset-2 col-sm-4 col-xs-12  mb-xs-15">
  288.                     <ul class="social">
  289.                         <li><a target="_blank" href="https://www.linkedin.com/in/mhaazen"><i class="fa fa-linkedin"></i></a></li>
  290.                         <li><a target="_blank" href="https://twitter.com/NekoCentral"><i class="fa fa-twitter"></i></a></li>
  291.                         <li><a target="_blank" href="https://www.facebook.com/mhaazen"><i class="fa fa-facebook"></i></a></li>
  292.                         <li><a target="_blank" href="https://github.com/inpothet"><i class="fa fa-github"></i></a></li>
  293. 

  294.                     </ul>
  295.                 </div>
  296.                 <!-- End Social -->
  297.             </div>
  298.         </div>
  299.     </footer>
  300.     <!-- END FOOTER -->
  301. 

  302.     <!-- Scroll Top -->
  303.     <a class="scroll-top">
  304.         <i class="fa fa-angle-double-up"></i>
  305.     </a>
  306.     <!-- End Scroll Top -->
  307. 

  308. </div>
  309. <!-- Site Wraper End -->
  310. 

  311. 

  312. <!-- JS -->
  313. 

  314. <script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>
  315. <script src="js/jquery-ui.min.js" type="text/javascript"></script>
  316. <script src="js/plugin/jquery.easing.js" type="text/javascript"></script>
  317. <script src="js/bootstrap.min.js" type="text/javascript"></script>
  318. <script src="js/plugin/jquery.viewportchecker.js" type="text/javascript"></script>
  319. <script src="js/plugin/jquery.colorbox-min.js" type="text/javascript"></script>
  320. <script src="js/plugin/owl.carousel.min.js" type="text/javascript"></script>
  321. <script src="js/plugin/isotope.pkgd.min.js" type="text/javascript"></script>
  322. <script src="js/plugin/imagesloaded.pkgd.min.js" type="text/javascript"></script>
  323. <script src="js/plugin/jquery.fs.tipper.min.js" type="text/javascript"></script>
  324. <script src="js/plugin/mediaelement-and-player.min.js"></script>
  325. <script src="js/theme.js" type="text/javascript"></script>
  326. 

  327. 

  328. </body>
  329. </html>