Marcel Haazen
5 years ago
commit
c20badddc0
75 changed files with 15759 additions and 0 deletions
Split View
Diff Options
-
+1 -0README.md
-
+91 -0about.htm
-
+120 -0contact.htm
-
+37 -0contactengine.php
-
+126 -0creator.htm
-
+2050 -0css/foundation.css
-
+146 -0css/stata.css
-
+713 -0css/style.css
-
+127 -0equalscope.htm
-
BINfavicon.ico
-
BINimg/certifications/mose.jpg
-
BINimg/certifications/mosp.jpg
-
BINimg/certifications/mosw.jpg
-
BINimg/certifications/mtan.jpg
-
BINimg/certifications/mtas.jpg
-
BINimg/certifications/mtasec.jpg
-
BINimg/certifications/mtaw.jpg
-
BINimg/certifications/ytca.jpg
-
BINimg/certifications/ytcc.jpg
-
BINimg/certifications/ytcd.jpg
-
BINimg/flavicon/android-chrome-192x192.png
-
BINimg/flavicon/android-chrome-512x512.png
-
BINimg/flavicon/apple-touch-icon.png
-
+9 -0img/flavicon/browserconfig.xml
-
BINimg/flavicon/favicon-16x16.png
-
BINimg/flavicon/favicon-32x32.png
-
BINimg/flavicon/favicon.ico
-
+18 -0img/flavicon/manifest.json
-
BINimg/flavicon/mstile-150x150.png
-
+68 -0img/flavicon/safari-pinned-tab.svg
-
BINimg/logo.png
-
BINimg/person.jpg
-
BINimg/portfolio/Thumbs.db
-
BINimg/portfolio/creator-loggedin.png
-
BINimg/portfolio/creator-login.png
-
BINimg/portfolio/creator.jpg
-
BINimg/portfolio/email.jpg
-
BINimg/portfolio/equalscope.jpg
-
BINimg/portfolio/optimize-front.png
-
BINimg/portfolio/optimize-youtubepage.png
-
BINimg/portfolio/optimize.jpg
-
BINimg/portfolio/optimizeblog-article.png
-
BINimg/portfolio/optimizeblog-front.png
-
BINimg/portfolio/optimizeblog.jpg
-
BINimg/portfolio/taskify-loggedin.png
-
BINimg/portfolio/taskify.jpg
-
BINimg/portfolio/taskify.png
-
BINimg/single/single1.jpg
-
BINimg/single/single2.jpg
-
BINimg/single/single3.jpg
-
BINimg/single/single4.jpg
-
BINimg/single/single5.jpg
-
BINimg/slider/slide1.jpg
-
BINimg/slider/slide2.jpg
-
BINimg/slider/slide3.jpg
-
+124 -0index.htm
-
+4 -0js/email.js
-
+13 -0js/foundation.min.js
-
+52 -0js/foundation/foundation.alerts.js
-
+516 -0js/foundation/foundation.clearing.js
-
+177 -0js/foundation/foundation.dropdown.js
-
+440 -0js/foundation/foundation.js
-
+412 -0js/foundation/foundation.orbit.js
-
+1 -0js/main.js
-
+1 -0js/make_dropdown.min.js
-
+4 -0js/vendor/custom.modernizr.js
-
+9789 -0js/vendor/jquery.js
-
+2 -0js/vendor/zepto.js
-
+125 -0optimize.htm
-
+125 -0optimizeblog.htm
-
+125 -0page.htm
-
+113 -0purity.htm
-
+4 -0robots.txt
-
+128 -0taskify.htm
-
+98 -0work.htm
+ 1
- 0
README.md
View File
| @ -0,0 +1 @@ | |||
| # Haazen_website | |||
+ 91
- 0
about.htm
View File
| @ -0,0 +1,91 @@ | |||
| <!DOCTYPE html> | |||
| <!--[if IE 8]> <html class="no-js lt-ie9" lang="en" > <![endif]--> | |||
| <!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]--> | |||
| <head> | |||
| <meta charset="utf-8"> | |||
| <meta lang="en-US"> | |||
| <meta name="viewport" content="width=device-width"> | |||
| <title>Marcel Haazen - About me</title> | |||
| <meta name="author" content="Marcel Haazen"> | |||
| <meta name="description" content="This is my about page, here I tell some information about my self"> | |||
| <meta name="keywords" content="Marcel Haazen, Marcel, Haazen, Resume, Certificates, Portfolio, Freelancer, Server, Server Administration, Server Setup, Web Design, YoutTube Certified, About me" /> | |||
| <link rel="stylesheet" href="css/foundation.css"> | |||
| <link rel="stylesheet" href="css/style.css"> | |||
| <script src="js/email.js"></script> | |||
| </head> | |||
| <body> | |||
| <bordercolor></bordercolor> | |||
| <div class="row"> | |||
| <div class="animated fadeInLeft"> | |||
| <div class="large-3 columns"> | |||
| <logo> | |||
| <img src="img/logo.png" alt="" /> | |||
| </logo> | |||
| </div> | |||
| </div><!-- anaimation --> | |||
| <!-- Responsive Drop Down Menu --> | |||
| <!-- Responsive Drop Down Menu --> | |||
| <div class="large-9 columns"> | |||
| <ul id="menubar"> | |||
| <li><a href="/">Home</a></li> | |||
| <li><a href="work">My work</a></li> | |||
| <li><a href="about" id="active">About</a></li> | |||
| <li><a href="contact">Contact</a></li> | |||
| </ul> | |||
| </div><!-- 9 columns --> | |||
| </div><!-- row --> | |||
| <div class="animated fadeInUp"> | |||
| <div class="row"> | |||
| <div class="large-3 columns"> | |||
| <about> | |||
| <ul class="small-block-grid-1 large-block-grid-1"> | |||
| <li> | |||
| <img src="img/person.jpg"> | |||
| <h5>Marcel H.</h5> | |||
| <br> | |||
| <a href="https://twitter.com/NekoCentral" class="social twitter">t</a> | |||
| <a href="https://www.facebook.com/mhaazen" class="social facebook">f</a> | |||
| <a href="https://plus.google.com/u/0/106949509688420714306/" class="social google">g+</a> | |||
| <a href="https://www.linkedin.com/in/mhaazen" class="social linkedin">in</a> | |||
| </li> | |||
| </ul> | |||
| </about> | |||
| </div> | |||
| <div class="large-6 columns"> | |||
| <about> | |||
| <h1>About me</h1> | |||
| <p>I'm Marcel, I'm an 20 Years old IT Student. In my free time I setup servers and manage them.</p> | |||
| </about> | |||
| </div> | |||
| </div> | |||
| </div><!-- animation --> | |||
| <footer> | |||
| <div class="row"> | |||
| <div class="large-12 columns"> | |||
| <foot> | |||
| Copyright © 2017-2018 by Marcel Haazen | |||
| </foot> | |||
| </div> | |||
| </div> | |||
| </footer> | |||
| <script src="js/vendor/jquery.js" type="text/javascript"></script> | |||
| <script src="js/foundation.min.js"></script> | |||
| <!-- | |||
| <script src="js/foundation/foundation.js"></script> | |||
| <script src="js/foundation/foundation.dropdown.js"></script> | |||
| <script src="js/foundation/foundation.alerts.js"></script> | |||
| <script src="js/foundation/foundation.clearing.js"></script> | |||
| <script src="js/foundation/foundation.orbit.js"></script> | |||
| --> | |||
| </body> | |||
| </html> | |||
+ 120
- 0
contact.htm
View File
| @ -0,0 +1,120 @@ | |||
| <!DOCTYPE html> | |||
| <!--[if IE 8]> <html class="no-js lt-ie9" lang="en" > <![endif]--> | |||
| <!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]--> | |||
| <head> | |||
| <meta charset="utf-8"> | |||
| <meta lang="en-US"> | |||
| <meta name="viewport" content="width=device-width"> | |||
| <title>Marcel Haazen - Contact</title> | |||
| <meta name="author" content="Marcel Haazen"> | |||
| <meta name="description" content="On here you can contact me about questions, sugestions or even hire me."> | |||
| <meta name="keywords" content="Marcel Haazen, Marcel, Haazen, Resume, Certificates, Portfolio, Freelancer, Server, Server Administration, Server Setup, Web Design, YoutTube Certified, Contact Me" /> | |||
| <link rel="stylesheet" href="css/foundation.css"> | |||
| <link rel="stylesheet" href="css/style.css"> | |||
| <script src="js/email.js"></script> | |||
| </head> | |||
| <body> | |||
| <bordercolor></bordercolor> | |||
| <div class="row"> | |||
| <div class="animated fadeInLeft"> | |||
| <div class="large-3 columns"> | |||
| <logo> | |||
| <img src="img/logo.png" alt="" /> | |||
| </logo> | |||
| </div> | |||
| </div> | |||
| <!-- Responsive Drop Down Menu --> | |||
| <script src="js/vendor/jquery.js" type="text/javascript"></script> | |||
| <script src="js/make_dropdown.min.js" type="text/javascript"></script> | |||
| <script type="text/javascript"> | |||
| $(document).ready(function(){ $('#menubar > li').make_dropdown(); }); | |||
| </script> | |||
| <!-- Responsive Drop Down Menu --> | |||
| <div class="large-9 columns"> | |||
| <ul id="menubar"> | |||
| <li><a href="/">Home</a></li> | |||
| <li><a href="work">My work</a></li> | |||
| <li><a href="about">About</a></li> | |||
| <li><a href="contact" id="active">Contact</a></li> | |||
| </ul> | |||
| </div><!-- 9 columns --> | |||
| </div><!-- row --> | |||
| <contact> | |||
| <div class="animated fadeInUp"> | |||
| <div class="row"> | |||
| <div class="large-3 columns"> | |||
| <h5>I love discussing new ideas.</h5> | |||
| <p>coming Soon</p> | |||
| </div> | |||
| <div class="large-6 columns"> | |||
| <h5>Contact Form</h5> | |||
| <div id="contact-area"> | |||
| <form method="post" action="contactengine.php"> | |||
| <clabel for="Name">Name:</clabel> | |||
| <input type="text" name="Name" id="Name" /> | |||
| <clabel for="Email">Email:</clabel> | |||
| <input type="text" name="Email" id="Email" /> | |||
| <clabel for="Subject">Subject:</clabel> | |||
| <input type="text" name="Subject" id="Subject" /> | |||
| <clabel for="Message">Message:</clabel><br /> | |||
| <textarea name="Message" rows="10" cols="50" id="Message"></textarea> | |||
| <input type="submit" name="submit" value="Submit" class="submit-button" /> | |||
| </form> | |||
| </div> | |||
| </div> | |||
| <div class="large-3 columns"> | |||
| <h5>Contact Info</h5> | |||
| <p>Marcel Haazen<br> | |||
| Email: <script>gen_mail_to_link('marcel','haazen.xyz');</script><br><br> | |||
| Twitter: <a href="https://twitter.com/NekoCentral">@nekocentral</a><br> | |||
| Facebook: <a href="https://www.facebook.com/mhaazen">mhaazen</a><br> | |||
| Google+: <a href="https://plus.google.com/u/0/106949509688420714306/">Marcel Haazen</a><br> | |||
| LinkedIn: <a href="https://www.linkedin.com/in/mhaazen">Marcel Haazen</a><br> | |||
| YouTube: <a href="https://youtube.com/c/nekocentral">Neko Central</a><br> | |||
| </p> | |||
| </div> | |||
| </div> | |||
| </div><!-- anaimation --> | |||
| </contact> | |||
| <footer> | |||
| <div class="row"> | |||
| <div class="large-12 columns"> | |||
| <foot> | |||
| Copyright © <script>document.write(new Date().getFullYear())</script> by Marcel Haazen | |||
| </foot> | |||
| </div> | |||
| </div> | |||
| </footer> | |||
| <script> | |||
| document.write('<script src=' + | |||
| ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') + | |||
| '.js><\/script>') | |||
| </script> | |||
| <script src="js/foundation.min.js"></script> | |||
| <!-- | |||
| <script src="js/foundation/foundation.js"></script> | |||
| <script src="js/foundation/foundation.dropdown.js"></script> | |||
| <script src="js/foundation/foundation.alerts.js"></script> | |||
| <script src="js/foundation/foundation.clearing.js"></script> | |||
| <script src="js/foundation/foundation.orbit.js"></script> | |||
| --> | |||
| <script> | |||
| $(document).foundation(); | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 37
- 0
contactengine.php
View File
| @ -0,0 +1,37 @@ | |||
| <?php | |||
| $EmailTo = "marcel@haazen.xyz"; | |||
| $Name = Trim(stripslashes($_POST['Name'])); | |||
| $Subject = Trim(stripslashes($_POST['Subject'])); | |||
| $Email = Trim(stripslashes($_POST['Email'])); | |||
| $Message = Trim(stripslashes($_POST['Message'])); | |||
| // validation | |||
| if (empty($_POST['Email']) || empty($_POST['Subject']) || empty($_POST['Message']) || empty($_POST['Name'])) { | |||
| print "<meta http-equiv=\"refresh\" content=\"0;URL=contact\">"; | |||
| exit; | |||
| } | |||
| // prepare email body text | |||
| $Body = ""; | |||
| $Body .= "Name: "; | |||
| $Body .= $Name; | |||
| $Body .= "\n"; | |||
| $Body .= "Email: "; | |||
| $Body .= $Email; | |||
| $Body .= "\n"; | |||
| $Body .= "Message: "; | |||
| $Body .= $Message; | |||
| $Body .= "\n"; | |||
| // send email | |||
| $success = mail($EmailTo, $Subject, $Body, "From: <$Email>"); | |||
| // redirect to success page | |||
| if ($success){ | |||
| print "<meta http-equiv=\"refresh\" content=\"0;URL=contact\">"; | |||
| } | |||
| else{ | |||
| print "error"; | |||
| } | |||
| ?> | |||
+ 126
- 0
creator.htm
View File
| @ -0,0 +1,126 @@ | |||
| <!DOCTYPE html> | |||
| <!--[if IE 8]> <html class="no-js lt-ie9" lang="en" > <![endif]--> | |||
| <!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]--> | |||
| <head> | |||
| <meta charset="utf-8"> | |||
| <meta lang="en-US"> | |||
| <meta name="viewport" content="width=device-width"> | |||
| <title>Marcel Haazen - Creator Dashboard Server</title> | |||
| <meta name="author" content="Marcel Haazen"> | |||
| <meta name="description" content="On here is a bit of information about my previous work I did on the Creator Dashboard server"> | |||
| <meta name="keywords" content="Marcel Haazen, Marcel, Haazen, Resume, Certificates, Portfolio, Freelancer, Server, Server Administration, Server Setup, Web Design, YoutTube Certified, Creator Dashboard" /> | |||
| <link rel="stylesheet" href="css/foundation.css"> | |||
| <link rel="stylesheet" href="css/style.css"> | |||
| <script src="js/email.js"></script> | |||
| </head> | |||
| <body> | |||
| <bordercolor></bordercolor> | |||
| <div class="row"> | |||
| <div class="animated fadeInLeft"> | |||
| <div class="large-3 columns"> | |||
| <logo> | |||
| <img src="img/logo.png" alt="Marcel Haazen" /> | |||
| </logo> | |||
| </div><!-- 3 columns --> | |||
| </div><!-- animation --> | |||
| <!-- Responsive Drop Down Menu --> | |||
| <script src="js/vendor/jquery.js" type="text/javascript"></script> | |||
| <script src="js/make_dropdown.min.js" type="text/javascript"></script> | |||
| <script type="text/javascript"> | |||
| $(document).ready(function(){ $('#menubar > li').make_dropdown(); }); | |||
| </script> | |||
| <!-- Responsive Drop Down Menu --> | |||
| <div class="large-9 columns"> | |||
| <ul id="menubar"> | |||
| <li><a href="/">Home</a></li> | |||
| <li><a href="work" id="active">My work</a></li> | |||
| <li><a href="about">About</a></li> | |||
| <li><a href="contact">Contact</a></li> | |||
| </ul> | |||
| </div><!-- 9 columns --> | |||
| </div><!-- row --> | |||
| <div class="animated fadeInUp"> | |||
| <works> | |||
| <div class="row"> | |||
| <div class="large-6 columns"> | |||
| <ul class="clearing-thumbs clearing-feature" data-clearing> | |||
| <li class="clearing-featured-img"> | |||
| <img src="img/portfolio/creator-login.png" alt="Login page"> | |||
| </li> | |||
| <li class="clearing-featured-img"> | |||
| <img src="img/portfolio/creator-loggedin.png" alt="Logged In"> | |||
| </li> | |||
| </ul> | |||
| </div> | |||
| <div class="large-6 columns"> | |||
| <h1>Creator Dashboard Web Server</h1> | |||
| <small>An Nginx based web server for a YouTube dashboard.</small> | |||
| </div> | |||
| </div> | |||
| <div class="row"> | |||
| <div class="large-6 columns"> | |||
| <h4>Project Details</h4> | |||
| <p>Coming Soon</p> | |||
| <ul class="small-block-grid-2 large-block-grid-2"> | |||
| <li><h5>Client</h5><p>Nick Morgan, Purity Network</p></li> | |||
| <li><h5>Date</h5><p>2016</p></li> | |||
| </ul> | |||
| <h4>User Experience</h4> | |||
| <p>Coming Soon</p> | |||
| <h5>Services</h5><p>Server Administration, Server Setup, Web Server Setup</p> | |||
| <h5>Link</h5><p><a href="https://creator-dashboard.net">https://creator-dashboard.net</a></p> | |||
| </div> | |||
| </div> | |||
| </works> | |||
| </div> | |||
| <!-- animation --> | |||
| <div class="row"> | |||
| <div class="large-12 columns"> | |||
| <usernext> | |||
| <a href="work" class="button radius secondary">All works</a> | |||
| </usernext> | |||
| </div> | |||
| </div> | |||
| <footer> | |||
| <div class="row"> | |||
| <div class="large-12 columns"> | |||
| <foot> | |||
| Copyright © <script>document.write(new Date().getFullYear())</script> by Marcel Haazen | |||
| </foot> | |||
| </div> | |||
| </div> | |||
| </footer> | |||
| <script> | |||
| document.write('<script src=' + | |||
| ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') + | |||
| '.js><\/script>') | |||
| </script> | |||
| <script src="js/foundation.min.js"></script> | |||
| <!-- | |||
| <script src="js/foundation/foundation.js"></script> | |||
| <script src="js/foundation/foundation.dropdown.js"></script> | |||
| <script src="js/foundation/foundation.alerts.js"></script> | |||
| <script src="js/foundation/foundation.clearing.js"></script> | |||
| <script src="js/foundation/foundation.orbit.js"></script> | |||
| --> | |||
| <script> | |||
| $(document).foundation(); | |||
| </script> | |||
| <script> | |||
| window.onload = function() { | |||
| setTimeout(function(){window.scrollTo(0, 1);}, 1); | |||
| } | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 2050
- 0
css/foundation.css
File diff suppressed because it is too large
View File
+ 146
- 0
css/stata.css
View File
| @ -0,0 +1,146 @@ | |||
| @import url("https://fonts.googleapis.com/icon?family=Material+Icons"); | |||
| .header { | |||
| background-color: #363f47; | |||
| padding-bottom: 54px; | |||
| } | |||
| .header img { | |||
| filter: brightness(100); | |||
| height: 55px; | |||
| } | |||
| .content .container > div:first-child { | |||
| background: #ffffff; | |||
| border-radius: 3px; | |||
| box-shadow: 0px 1px 3px 0px #eee; | |||
| box-shadow: 0px 1px 3px 1px rgba(0,0,0,.13); | |||
| padding: 7px 19px; | |||
| position: relative; | |||
| z-index: 3; | |||
| margin-top: -69px; | |||
| } | |||
| #loading h3 { | |||
| border-bottom: 1px solid #e0e0e0; | |||
| padding: 14px 19px; | |||
| margin: 20px 0 0; | |||
| border: 1px solid #e0e0e0; | |||
| border-bottom: 0px none; | |||
| border-top-left-radius: 3px; | |||
| border-top-right-radius: 3px; | |||
| box-shadow: 0px 1px 3px 0 #eee; | |||
| box-shadow: 0px 0.5px 1.5px 0.5px rgba(0,0,0,.065); | |||
| position: relative; | |||
| z-index: 1; | |||
| } | |||
| #loading table { | |||
| border-collapse: separate !important; | |||
| border: 1px solid #e0e0e0; | |||
| border-top: 0 none; | |||
| border-radius: 0px; | |||
| border-bottom-left-radius: 3px; | |||
| border-bottom-right-radius: 3px; | |||
| box-shadow: 0px 1px 3px 0 #eee; | |||
| box-shadow: 0px 0.5px 1.5px 0.5px rgba(0,0,0,.065); | |||
| position: relative; | |||
| z-index: 2; | |||
| } | |||
| #loading tr td { | |||
| color: #999; | |||
| flex: 1 0; | |||
| padding: 14px 19px; | |||
| } | |||
| #loading tr { | |||
| border-top: 1px solid #e0e0e0; | |||
| display: block; | |||
| display: flex; | |||
| } | |||
| .wrapper > div.container:last-child { | |||
| color: #999; | |||
| } | |||
| table td.ok::after { | |||
| font-family: 'Material Icons'; | |||
| font-weight: normal !important; | |||
| font-style: normal; | |||
| font-size: 1.4em !important; | |||
| display: inline-block; | |||
| line-height: 1; | |||
| text-transform: none !important; | |||
| letter-spacing: normal; | |||
| word-wrap: normal; | |||
| white-space: nowrap; | |||
| direction: ltr; | |||
| -webkit-font-smoothing: antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| font-feature-settings: 'liga'; | |||
| content: "check_circle" !important; | |||
| } | |||
| table td.down::after { | |||
| font-family: 'Material Icons'; | |||
| font-weight: normal !important; | |||
| font-style: normal; | |||
| font-size: 1.4em !important; | |||
| display: inline-block; | |||
| line-height: 1; | |||
| text-transform: none !important; | |||
| letter-spacing: normal; | |||
| word-wrap: normal; | |||
| white-space: nowrap; | |||
| direction: ltr; | |||
| -webkit-font-smoothing: antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| font-feature-settings: 'liga'; | |||
| content: "error_outline" !important; | |||
| } | |||
| table td.degraded::after { | |||
| font-family: 'Material Icons'; | |||
| font-weight: normal !important; | |||
| font-style: normal; | |||
| font-size: 1.4em !important; | |||
| display: inline-block; | |||
| line-height: 1; | |||
| text-transform: none !important; | |||
| letter-spacing: normal; | |||
| word-wrap: normal; | |||
| white-space: nowrap; | |||
| direction: ltr; | |||
| -webkit-font-smoothing: antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| font-feature-settings: 'liga'; | |||
| content: "info_outline" !important; | |||
| } | |||
| table td.maintenance::after { | |||
| font-family: 'Material Icons'; | |||
| font-weight: normal !important; | |||
| font-style: normal; | |||
| font-size: 1.4em !important; | |||
| display: inline-block; | |||
| line-height: 1; | |||
| text-transform: none !important; | |||
| letter-spacing: normal; | |||
| word-wrap: normal; | |||
| white-space: nowrap; | |||
| direction: ltr; | |||
| -webkit-font-smoothing: antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| font-feature-settings: 'liga'; | |||
| content: "network_locked" !important; | |||
| } | |||
+ 713
- 0
css/style.css
View File
| @ -0,0 +1,713 @@ | |||
| img { | |||
| border-radius: 3px; | |||
| } | |||
| button, .button { | |||
| border-style: solid; | |||
| border-width: 1px; | |||
| cursor: pointer; | |||
| margin: 0 0 1.25em; | |||
| position: relative; | |||
| text-decoration: none; | |||
| text-align: center; | |||
| display: inline-block; | |||
| padding-top: 0.75em; | |||
| padding-right: 1.5em; | |||
| padding-bottom: 0.8125em; | |||
| padding-left: 1.5em; | |||
| background-color: #334252; | |||
| border-color: #1e2731; | |||
| color: #ffffff; | |||
| font-weight: normal; | |||
| font-size: 1em; | |||
| line-height: 1; | |||
| font-style: normal; | |||
| } | |||
| button:hover, button:focus, .button:hover, .button:focus { | |||
| background-color: #293542; | |||
| color: #ffffff; | |||
| } | |||
| bordercolor { | |||
| height: 5px; | |||
| display: block; | |||
| background-color: #293542; | |||
| } | |||
| logo img { | |||
| margin: 50px 0px 60px 0px; | |||
| max-width: 200px; | |||
| } | |||
| ul a { | |||
| color: #525252; | |||
| } | |||
| ul a:hover { | |||
| color: #293542; | |||
| } | |||
| #menubar { | |||
| margin-top: 65px; | |||
| padding: 0; | |||
| float: right; | |||
| z-index: 1; | |||
| } | |||
| #menubar li { | |||
| display: inline; | |||
| margin-left: 30px; | |||
| list-style: none; | |||
| } | |||
| #menubar li a { | |||
| display: block; | |||
| text-decoration: none; | |||
| display: inline; | |||
| color: #525252; | |||
| white-space: nowrap; | |||
| } | |||
| #menubar li a:hover , #menubar li:hover { | |||
| color: #293542; | |||
| } | |||
| #menubar li ul { | |||
| margin: 30px 0px 0px -130px; | |||
| padding: 20px 50px; | |||
| border-radius: 3px; | |||
| position: absolute; | |||
| visibility: hidden; | |||
| background: #293542; | |||
| display: inline; | |||
| z-index: 2; | |||
| text-align: center; | |||
| } | |||
| #menubar li ul li { | |||
| float: none; | |||
| margin: 0px; | |||
| display: inline; | |||
| } | |||
| #menubar li ul li a { | |||
| padding: 0px; | |||
| margin: 0px; | |||
| text-align: center; | |||
| z-index: 2; | |||
| color: #ffffff; | |||
| } | |||
| #menubar li ul li a:hover { | |||
| color: #117d67; | |||
| } | |||
| bord { | |||
| display: block; | |||
| height: 10px; | |||
| background-color: #ffffff; | |||
| } | |||
| #menubar li a#active { | |||
| color: #334252; | |||
| border-bottom: 1px solid #3f5266; | |||
| } | |||
| li#active { | |||
| color: #3f5266; | |||
| border-bottom: 1px solid #3f5266; | |||
| } | |||
| #active1 { | |||
| color: #3f5266; | |||
| } | |||
| lin { | |||
| height: 1px; | |||
| margin: 10px -50px; | |||
| background-color: #3f5266; | |||
| display: block; | |||
| } | |||
| #slider , #slider img { | |||
| border-radius: 3px; | |||
| overflow: hidden; | |||
| z-index: 1; | |||
| } | |||
| .slideshow-wrapper { | |||
| min-height: 355px; | |||
| } | |||
| .orbit-timer { | |||
| display: none; | |||
| } | |||
| whatido { | |||
| margin-top: 50px; | |||
| display: block; | |||
| text-align: center; | |||
| padding-bottom: 340px; | |||
| border-bottom: 1px solid #e8e8e8; | |||
| } | |||
| box { | |||
| display: block; | |||
| margin-top: 25px; | |||
| text-align: left; | |||
| } | |||
| box img { | |||
| width: 40px; | |||
| margin-bottom: 20px; | |||
| } | |||
| box h1 { | |||
| font-size: 20px; | |||
| color: #525252; | |||
| } | |||
| work { | |||
| display: block; | |||
| margin-top: 50px; | |||
| padding-bottom: 70px; | |||
| text-align: center; | |||
| border-bottom: 1px solid #e8e8e8; | |||
| } | |||
| work h1 { | |||
| font-size: 35px; | |||
| margin-bottom: 50px; | |||
| color: #293542; | |||
| } | |||
| work a:hover { | |||
| opacity: .7; | |||
| } | |||
| certificates { | |||
| display: block; | |||
| margin-top: 50px; | |||
| padding-bottom: 0px; | |||
| text-align: center; | |||
| } | |||
| certificates h1 { | |||
| font-size: 35px; | |||
| margin-bottom: 30px; | |||
| color: #293542; | |||
| } | |||
| certificates img { | |||
| opacity: .5; | |||
| background-color: #f6f4f6; | |||
| border-radius: 5px; | |||
| border: 2px solid #f6f4f6; | |||
| } | |||
| certificates img:hover { | |||
| opacity: 1; | |||
| } | |||
| footer { | |||
| display: block; | |||
| margin-top: 100px; | |||
| border-top: 1px solid #e7e7e7; | |||
| background-color: #f6f5f6; | |||
| } | |||
| social a { | |||
| line-height: 35px; | |||
| } | |||
| foot { | |||
| text-align: right; | |||
| padding: 20px 0px; | |||
| display: block; | |||
| border-top: 1px solid #e8e7e8; | |||
| font-size: 12px; | |||
| color: #cccccc; | |||
| } | |||
| foot img { | |||
| width: 5%; | |||
| margin-top: -3px; | |||
| opacity: .4; | |||
| } | |||
| foot img:hover { | |||
| opacity: 1; | |||
| } | |||
| /* social icon */ | |||
| .social { | |||
| padding: 8px 14px; | |||
| border-radius: 3px; | |||
| background-color: #dddddd; | |||
| transition: all .6s; | |||
| -moz-transition: all .6s; | |||
| -webkit-transition: all .6s; | |||
| -o-transition: all .6s; | |||
| color: #ffffff; | |||
| } | |||
| .social:hover { | |||
| transition: all .3s; | |||
| -moz-transition: all .3s; | |||
| -webkit-transition: all .3s; | |||
| -o-transition: all .3s; | |||
| color: #ffffff; | |||
| } | |||
| .facebook:hover { | |||
| background-color: #3B5998; | |||
| } | |||
| .twitter:hover { | |||
| background-color: #55ACEE; | |||
| } | |||
| .google:hover { | |||
| background-color: #DC4E41; | |||
| } | |||
| .linkedin:hover { | |||
| background-color: #0077B5; | |||
| } | |||
| /* work page & single work page */ | |||
| works { | |||
| text-align: center; | |||
| display: block; | |||
| padding-bottom: 30px; | |||
| } | |||
| works h1 { | |||
| line-height: 20px; | |||
| font-size: 30px; | |||
| margin-top: 20px; | |||
| text-align: left; | |||
| } | |||
| works small { | |||
| font-size: 15px; | |||
| display: block; | |||
| padding-bottom: 20px; | |||
| border-bottom: 1px solid #e7e6e7; | |||
| margin-bottom: 70px; | |||
| color: #293542; | |||
| text-align: left; | |||
| } | |||
| works img:hover { | |||
| opacity: .7; | |||
| transition: all .3s; | |||
| -moz-transition: all .3s; | |||
| -webkit-transition: all .3s; | |||
| -o-transition: all .3s; | |||
| } | |||
| works p { | |||
| font-size: 15px; | |||
| line-height: 20px; | |||
| text-align: left; | |||
| } | |||
| line { | |||
| display: block; | |||
| height: 1px; | |||
| margin: 10px 0px; | |||
| background-color: #e7e5e7; | |||
| } | |||
| usernext { | |||
| text-align: center; | |||
| margin-top: 90px; | |||
| padding-top: 20px; | |||
| display: block; | |||
| border-top: 1px solid #e7e6e7; | |||
| } | |||
| social1 { | |||
| line-height: 35px; | |||
| display: block; | |||
| text-align: right; | |||
| } | |||
| works h4 { | |||
| text-align: left; | |||
| } | |||
| works h5 { | |||
| border-bottom: 1px dotted #e7e5e7; | |||
| padding-bottom: 8px; | |||
| text-align: left; | |||
| } | |||
| .clearing-featured-img img { | |||
| margin-bottom: 20px; | |||
| } | |||
| .clearing-featured-img img:hover { | |||
| cursor: -webkit-zoom-in; | |||
| cursor: -moz-zoom-in; | |||
| cursor: zoom-in; | |||
| } | |||
| /* About page */ | |||
| about { | |||
| display: block; | |||
| padding-bottom: 30px; | |||
| text-align: center; | |||
| } | |||
| about li { | |||
| margin-bottom: 20px; | |||
| } | |||
| about h1 { | |||
| line-height: 20px; | |||
| font-size: 30px; | |||
| margin-top: 20px; | |||
| text-align: left; | |||
| } | |||
| about small { | |||
| font-size: 15px; | |||
| display: block; | |||
| padding-bottom: 20px; | |||
| border-bottom: 1px solid #e7e6e7; | |||
| margin-bottom: 70px; | |||
| color: #293542; | |||
| text-align: left; | |||
| } | |||
| about h5 { | |||
| font-size: 25px; | |||
| margin-top: 40px; | |||
| text-align: center; | |||
| line-height: 10px; | |||
| } | |||
| about small1 { | |||
| font-size: 15px; | |||
| display: block; | |||
| padding-bottom: 20px; | |||
| border-bottom: 1px solid #e7e6e7; | |||
| margin-bottom: 25px; | |||
| color: #19bc9b; | |||
| text-align: center; | |||
| } | |||
| about p { | |||
| font-size: 15px; | |||
| line-height: 20px; | |||
| text-align: center; | |||
| } | |||
| /* Contact page */ | |||
| contact { | |||
| display: block; | |||
| padding-bottom: 30px; | |||
| } | |||
| #contact-area { | |||
| margin-top: 25px; | |||
| } | |||
| #contact-area input, #contact-area textarea { | |||
| padding: 5px; | |||
| width: 300px; | |||
| font-family: Helvetica, sans-serif; | |||
| margin: 0px 0px 10px 0px; | |||
| border: 2px solid #ccc; | |||
| } | |||
| #contact-area textarea:focus, #contact-area input:focus { | |||
| border: 2px solid #900; | |||
| } | |||
| #contact-area input.submit-button { | |||
| width: 100px; | |||
| float: right; | |||
| } | |||
| clabel { | |||
| float: left; | |||
| text-align: right; | |||
| margin-right: 15px; | |||
| width: 100px; | |||
| padding-top: 5px; | |||
| } | |||
| contact h1 { | |||
| line-height: 20px; | |||
| font-size: 30px; | |||
| margin-top: 20px; | |||
| text-align: left; | |||
| } | |||
| contact small { | |||
| font-size: 15px; | |||
| display: block; | |||
| padding-bottom: 20px; | |||
| border-bottom: 1px solid #e7e6e7; | |||
| margin-bottom: 50px; | |||
| color: #293542; | |||
| text-align: left; | |||
| } | |||
| contact h5 { | |||
| font-size: 15px; | |||
| padding-bottom: 20px; | |||
| margin-bottom: 20px; | |||
| margin-top: 40px; | |||
| border-bottom: 1px solid #e7e6e7; | |||
| } | |||
| contact small1 { | |||
| font-size: 15px; | |||
| display: block; | |||
| padding-bottom: 20px; | |||
| border-bottom: 1px solid #e7e6e7; | |||
| margin-bottom: 25px; | |||
| color: #19bc9b; | |||
| text-align: center; | |||
| } | |||
| contact p { | |||
| font-size: 15px; | |||
| line-height: 20px; | |||
| text-align: left; | |||
| } | |||
| /* Elements page */ | |||
| elements { | |||
| display: block; | |||
| padding-bottom: 30px; | |||
| } | |||
| elements h1 { | |||
| line-height: 20px; | |||
| font-size: 30px; | |||
| margin-top: 20px; | |||
| text-align: left; | |||
| } | |||
| body{ | |||
| background-color: #f6f5f6; | |||
| } | |||
| elements small { | |||
| font-size: 15px; | |||
| display: block; | |||
| padding-bottom: 20px; | |||
| border-bottom: 1px solid #e7e6e7; | |||
| margin-bottom: 50px; | |||
| color: #293542; | |||
| text-align: left; | |||
| } | |||
| elements h5 { | |||
| font-weight: bold; | |||
| } | |||
| line1 { | |||
| display: block; | |||
| height: 1px; | |||
| margin: 40px 0px; | |||
| background-color: #e7e5e7; | |||
| } | |||
| elements .clearing-thumbs img { | |||
| width: 200px; | |||
| } | |||
| elements .clearing-thumbs img:hover { | |||
| opacity: .7; | |||
| } | |||
| /* Responsive */ | |||
| @media only screen and (max-width: 850px) and (min-width: 768px) { | |||
| logo img { | |||
| width: 150px; | |||
| padding-top: 10px; | |||
| } | |||
| #menubar li { | |||
| margin-left: 20px; | |||
| } | |||
| whatido { | |||
| padding-bottom: 400px; | |||
| } | |||
| .slideshow-wrapper { | |||
| min-height: 300px; | |||
| } | |||
| } | |||
| @media only screen and (max-width: 767px) and (min-width: 500px) { | |||
| logo { | |||
| text-align: center; | |||
| display: block; | |||
| margin-top: -30px; | |||
| } | |||
| #menubar li a#active { | |||
| border: 0px; | |||
| padding: 5px 10px; | |||
| border-radius: 3px; | |||
| background-color: #293542; | |||
| color: #ffffff; | |||
| } | |||
| #menubar { | |||
| margin-top: -25px; | |||
| margin-bottom: 20px; | |||
| float: none; | |||
| text-align: center; | |||
| } | |||
| #menubar li { | |||
| margin: 0px 10px; | |||
| } | |||
| #menubar li a { | |||
| display: block; | |||
| text-decoration: none; | |||
| display: inline; | |||
| line-height: 40px; | |||
| } | |||
| #menubar li ul { | |||
| margin: 40px 0px 0px -130px; | |||
| padding: 10px 50px; | |||
| } | |||
| whatido { | |||
| border: 0px; | |||
| } | |||
| work { | |||
| border-top: 1px solid #e8e7e8; | |||
| padding-top: 40px; | |||
| } | |||
| footer { | |||
| padding-top: 0px; | |||
| } | |||
| footer h4 { | |||
| margin-top: 50px; | |||
| } | |||
| about li { | |||
| margin-bottom: 30px; | |||
| } | |||
| .slideshow-wrapper { | |||
| min-height: 200px; | |||
| } | |||
| foot img { | |||
| width: 9%; | |||
| } | |||
| } | |||
| @media only screen and (max-width: 499px) { | |||
| logo { | |||
| text-align: center; | |||
| display: block; | |||
| margin-top: -30px; | |||
| } | |||
| #menubar li a#active { | |||
| border: 0px; | |||
| padding: 5px 10px; | |||
| border-radius: 3px; | |||
| background-color: #293542; | |||
| color: #ffffff; | |||
| } | |||
| #menubar { | |||
| margin-top: -35px; | |||
| margin-bottom: 20px; | |||
| float: none; | |||
| text-align: center; | |||
| } | |||
| #menubar li { | |||
| margin: 0px 7px; | |||
| } | |||
| #menubar li a { | |||
| display: block; | |||
| text-decoration: none; | |||
| display: inline; | |||
| line-height: 40px; | |||
| } | |||
| #menubar li ul { | |||
| margin: 40px 0px 0px -115px; | |||
| padding: 10px 30px; | |||
| } | |||
| whatido { | |||
| border: 0px; | |||
| margin: 0px; | |||
| } | |||
| box { | |||
| text-align: center; | |||
| } | |||
| box img { | |||
| display: inline; | |||
| width: 30px; | |||
| margin-right: 10px; | |||
| margin-bottom: 9px; | |||
| } | |||
| box h1 { | |||
| display: inline; | |||
| } | |||
| work { | |||
| border-top: 1px solid #e8e7e8; | |||
| padding-top: 20px; | |||
| padding-bottom: 20px; | |||
| } | |||
| clients { | |||
| margin-top: 20px; | |||
| } | |||
| footer { | |||
| padding-top: 0px; | |||
| margin-top: 30px; | |||
| text-align: center; | |||
| } | |||
| footer h4 { | |||
| margin-top: 30px; | |||
| } | |||
| foot { | |||
| text-align: center; | |||
| margin-top: 10px; | |||
| } | |||
| foot img { | |||
| width: 13%; | |||
| } | |||
| about li { | |||
| margin-bottom: 30px; | |||
| } | |||
| #slider .orbit-caption , .orbit-prev , .orbit-next { | |||
| display: none; | |||
| } | |||
| .slideshow-wrapper { | |||
| min-height: 100px; | |||
| } | |||
| social1 { | |||
| margin-top: 15px; | |||
| } | |||
| works small { | |||
| margin-bottom: 40px; | |||
| } | |||
| usernext { | |||
| margin-top: 0px; | |||
| padding-top: 40px; | |||
| } | |||
| lin { | |||
| height: 1px; | |||
| margin: 0px -30px; | |||
| } | |||
| elements .clearing-thumbs img { | |||
| width: 150px; | |||
| } | |||
| #contact-area input, #contact-area textarea { | |||
| padding: 5px; | |||
| width: 471px; | |||
| font-family: Helvetica, sans-serif; | |||
| font-size: 1.4em; | |||
| margin: 0px 0px 10px 0px; | |||
| border: 2px solid #ccc; | |||
| } | |||
| } | |||
| /* Animation */ | |||
| .animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s}.animated.hinge{-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px)}100%{opacity:1;-webkit-transform:translateY(0)}}@-moz-keyframes fadeInUp{0%{opacity:0;-moz-transform:translateY(20px)}100%{opacity:1;-moz-transform:translateY(0)}}@-o-keyframes fadeInUp{0%{opacity:0;-o-transform:translateY(20px)}100%{opacity:1;-o-transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}.fadeInUp{-webkit-animation-name:fadeInUp;-moz-animation-name:fadeInUp;-o-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px)}100%{opacity:1;-webkit-transform:translateX(0)}}@-moz-keyframes fadeInLeft{0%{opacity:0;-moz-transform:translateX(-20px)}100%{opacity:1;-moz-transform:translateX(0)}}@-o-keyframes fadeInLeft{0%{opacity:0;-o-transform:translateX(-20px)}100%{opacity:1;-o-transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;transform:translateX(-20px)}100%{opacity:1;transform:translateX(0)}}.fadeInLeft{-webkit-animation-name:fadeInLeft;-moz-animation-name:fadeInLeft;-o-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px)}100%{opacity:1;-webkit-transform:translateX(0)}}@-moz-keyframes fadeInRight{0%{opacity:0;-moz-transform:translateX(20px)}100%{opacity:1;-moz-transform:translateX(0)}}@-o-keyframes fadeInRight{0%{opacity:0;-o-transform:translateX(20px)}100%{opacity:1;-o-transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;transform:translateX(20px)}100%{opacity:1;transform:translateX(0)}}.fadeInRight{-webkit-animation-name:fadeInRight;-moz-animation-name:fadeInRight;-o-animation-name:fadeInRight;animation-name:fadeInRight} | |||
+ 127
- 0
equalscope.htm
View File
| @ -0,0 +1,127 @@ | |||
| <!DOCTYPE html> | |||
| <!--[if IE 8]> <html class="no-js lt-ie9" lang="en" > <![endif]--> | |||
| <!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]--> | |||
| <head> | |||
| <meta charset="utf-8"> | |||
| <meta lang="en-US"> | |||
| <meta name="viewport" content="width=device-width"> | |||
| <title>Marcel Haazen - EqualScope Server</title> | |||
| <meta name="author" content="Marcel Haazen"> | |||
| <meta name="description" content="On here is a bit of information about my previous work I did on the EqualScope server"> | |||
| <meta name="keywords" content="Marcel Haazen, Marcel, Haazen, Resume, Certificates, Portfolio, Freelancer, Server, Server Administration, Server Setup, Web Design, YoutTube Certified, EqualScope" /> | |||
| <link rel="stylesheet" href="css/foundation.css"> | |||
| <link rel="stylesheet" href="css/style.css"> | |||
| <script src="js/email.js"></script> | |||
| </head> | |||
| <body> | |||
| <bordercolor></bordercolor> | |||
| <div class="row"> | |||
| <div class="animated fadeInLeft"> | |||
| <div class="large-3 columns"> | |||
| <logo> | |||
| <img src="img/logo.png" alt="Marcel Haazen" /> | |||
| </logo> | |||
| </div><!-- 3 columns --> | |||
| </div><!-- animation --> | |||
| <!-- Responsive Drop Down Menu --> | |||
| <script src="js/vendor/jquery.js" type="text/javascript"></script> | |||
| <script src="js/make_dropdown.min.js" type="text/javascript"></script> | |||
| <script type="text/javascript"> | |||
| $(document).ready(function(){ $('#menubar > li').make_dropdown(); }); | |||
| </script> | |||
| <!-- Responsive Drop Down Menu --> | |||
| <div class="large-9 columns"> | |||
| <ul id="menubar"> | |||
| <li><a href="/">Home</a></li> | |||
| <li><a href="work" id="active">My work</a></li> | |||
| <li><a href="about">About</a></li> | |||
| <li><a href="contact">Contact</a></li> | |||
| </ul> | |||
| </div><!-- 9 columns --> | |||
| </div><!-- row --> | |||
| <div class="animated fadeInUp"> | |||
| <works> | |||
| <div class="row"> | |||
| <div class="large-6 columns"> | |||
| <ul class="clearing-thumbs clearing-feature" data-clearing> | |||
| <li class="clearing-featured-img"> | |||
| <img src="http://placehold.it/1920x1080"> | |||
| </li> | |||
| <li class="clearing-featured-img"> | |||
| <img src="http://placehold.it/1920x1080"> | |||
| </li> | |||
| </ul> | |||
| </div> | |||
| <div class="animated fadeInUp"> | |||
| <div class="large-6 columns"> | |||
| <h1>EqualScope Web Server</h1> | |||
| <small>An Apache based Web server hosting multiple sites.</small> | |||
| </div> | |||
| </div> | |||
| <div class="row"> | |||
| <div class="large-6 columns"> | |||
| <h4>Project Details</h4> | |||
| <p>Coming Soon</p> | |||
| <ul class="small-block-grid-2 large-block-grid-2"> | |||
| <li><h5>Client</h5><p>Tim Todd</p></li> | |||
| <li><h5>Date</h5><p>2016</p></li> | |||
| </ul> | |||
| <h4>User Experience</h4> | |||
| <p>Coming Soon</p> | |||
| <h5>Services</h5><p>Server Setup, Web Server, Multiple Sites</p> | |||
| <h5>Link</h5><p><a href="https://equalscope.com">EqualScope</a><br><a href="http://equalmediatv.net">EqualMediaTV</a></p> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </works> | |||
| </div><!-- animation --> | |||
| <div class="row"> | |||
| <div class="large-12 columns"> | |||
| <usernext> | |||
| <a href="work" class="button radius secondary">All works</a> | |||
| </usernext> | |||
| </div> | |||
| </div> | |||
| <footer> | |||
| <div class="row"> | |||
| <div class="large-12 columns"> | |||
| <foot> | |||
| Copyright © <script>document.write(new Date().getFullYear())</script> by Marcel Haazen | |||
| </foot> | |||
| </div> | |||
| </div> | |||
| </footer> | |||
| <script> | |||
| document.write('<script src=' + | |||
| ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') + | |||
| '.js><\/script>') | |||
| </script> | |||
| <script src="js/foundation.min.js"></script> | |||
| <!-- | |||
| <script src="js/foundation/foundation.js"></script> | |||
| <script src="js/foundation/foundation.dropdown.js"></script> | |||
| <script src="js/foundation/foundation.alerts.js"></script> | |||
| <script src="js/foundation/foundation.clearing.js"></script> | |||
| <script src="js/foundation/foundation.orbit.js"></script> | |||
| --> | |||
| <script> | |||
| $(document).foundation(); | |||
| </script> | |||
| <script> | |||
| window.onload = function() { | |||
| setTimeout(function(){window.scrollTo(0, 1);}, 1); | |||
| } | |||
| </script> | |||
| </body> | |||
| </html> | |||
BIN
favicon.ico
View File
| Before | After |
|---|---|
|
|
BIN
img/certifications/mose.jpg
View File
| Before | After |
|---|---|
|
|
| Width: 600 | Height: 403 | Size: 11 KiB |
BIN
img/certifications/mosp.jpg
View File
| Before | After |
|---|---|
|
|
| Width: 600 | Height: 403 | Size: 12 KiB |
BIN
img/certifications/mosw.jpg
View File
| Before | After |
|---|---|
|
|
| Width: 600 | Height: 403 | Size: 11 KiB |
BIN
img/certifications/mtan.jpg
View File
| Before | After |
|---|---|
|
|
| Width: 600 | Height: 403 | Size: 14 KiB |
BIN
img/certifications/mtas.jpg
View File
| Before | After |
|---|---|
|
|
| Width: 600 | Height: 403 | Size: 23 KiB |
BIN
img/certifications/mtasec.jpg
View File
| Before | After |
|---|---|
|
|
| Width: 600 | Height: 403 | Size: 14 KiB |
BIN
img/certifications/mtaw.jpg
View File
| Before | After |
|---|---|
|
|
| Width: 600 | Height: 403 | Size: 24 KiB |
BIN
img/certifications/ytca.jpg
View File
| Before | After |
|---|---|
|
|
| Width: 600 | Height: 403 | Size: 14 KiB |
BIN
img/certifications/ytcc.jpg
View File
| Before | After |
|---|---|
|
|
| Width: 600 | Height: 403 | Size: 14 KiB |
BIN
img/certifications/ytcd.jpg
View File
| Before | After |
|---|---|
|
|
| Width: 600 | Height: 403 | Size: 14 KiB |
BIN
img/flavicon/android-chrome-192x192.png
View File
| Before | After |
|---|---|
|
|
| Width: 192 | Height: 192 | Size: 2.8 KiB |
BIN
img/flavicon/android-chrome-512x512.png
View File
| Before | After |
|---|---|
|
|
| Width: 512 | Height: 512 | Size: 7.8 KiB |
BIN
img/flavicon/apple-touch-icon.png
View File
| Before | After |
|---|---|
|
|
| Width: 180 | Height: 180 | Size: 2.6 KiB |
+ 9
- 0
img/flavicon/browserconfig.xml
View File
| @ -0,0 +1,9 @@ | |||
| <?xml version="1.0" encoding="utf-8"?> | |||
| <browserconfig> | |||
| <msapplication> | |||
| <tile> | |||
| <square150x150logo src="/mstile-150x150.png"/> | |||
| <TileColor>#646464</TileColor> | |||
| </tile> | |||
| </msapplication> | |||
| </browserconfig> | |||
BIN
img/flavicon/favicon-16x16.png
View File
| Before | After |
|---|---|
|
|
| Width: 16 | Height: 16 | Size: 627 B |
BIN
img/flavicon/favicon-32x32.png
View File
| Before | After |
|---|---|
|
|
| Width: 32 | Height: 32 | Size: 926 B |
BIN
img/flavicon/favicon.ico
View File
| Before | After |
|---|---|
|
+ 18
- 0
img/flavicon/manifest.json
View File
| @ -0,0 +1,18 @@ | |||
| { | |||
| "name": "", | |||
| "icons": [ | |||
| { | |||
| "src": "/android-chrome-192x192.png", | |||
| "sizes": "192x192", | |||
| "type": "image/png" | |||
| }, | |||
| { | |||
| "src": "/android-chrome-512x512.png", | |||
| "sizes": "512x512", | |||
| "type": "image/png" | |||
| } | |||
| ], | |||
| "theme_color": "#646464", | |||
| "background_color": "#646464", | |||
| "display": "standalone" | |||
| } | |||
BIN
img/flavicon/mstile-150x150.png
View File
| Before | After |
|---|---|
|
|
| Width: 270 | Height: 270 | Size: 3.2 KiB |
+ 68
- 0
img/flavicon/safari-pinned-tab.svg
View File
| @ -0,0 +1,68 @@ | |||
| <?xml version="1.0" standalone="no"?> | |||
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" | |||
| "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> | |||
| <svg version="1.0" xmlns="http://www.w3.org/2000/svg" | |||
| width="1474.000000pt" height="1474.000000pt" viewBox="0 0 1474.000000 1474.000000" | |||
| preserveAspectRatio="xMidYMid meet"> | |||
| <metadata> | |||
| Created by potrace 1.11, written by Peter Selinger 2001-2013 | |||
| </metadata> | |||
| <g transform="translate(0.000000,1474.000000) scale(0.100000,-0.100000)" | |||
| fill="#000000" stroke="none"> | |||
| <path d="M12180 14508 c-271 -70 -595 -346 -943 -802 -113 -149 -120 -158 | |||
| -271 -386 -181 -272 -201 -305 -338 -540 -306 -526 -616 -1128 -895 -1740 -42 | |||
| -91 -87 -190 -101 -220 -14 -30 -26 -60 -28 -66 -9 -46 -126 -190 -198 -244 | |||
| -148 -111 -291 -146 -511 -126 -264 23 -688 23 -1010 1 -119 -9 -211 -16 -245 | |||
| -20 -19 -2 -66 -7 -105 -10 -38 -3 -81 -8 -95 -10 -14 -3 -50 -7 -81 -10 -31 | |||
| -3 -64 -7 -75 -9 -10 -2 -39 -7 -64 -11 -25 -4 -54 -9 -65 -11 -11 -3 -36 -7 | |||
| -55 -10 -19 -3 -42 -7 -50 -9 -8 -2 -31 -7 -50 -10 -65 -11 -235 -46 -295 -62 | |||
| -33 -8 -67 -16 -75 -18 -271 -59 -660 -177 -914 -277 -128 -51 -198 -66 -296 | |||
| -66 -169 0 -328 66 -451 188 -41 41 -97 101 -125 133 -27 33 -58 69 -69 81 | |||
| -11 12 -35 39 -54 61 -29 35 -133 151 -196 221 -11 12 -51 57 -90 99 -38 43 | |||
| -86 95 -105 115 -19 21 -89 96 -155 166 -119 128 -631 643 -755 760 -36 33 | |||
| -117 107 -180 164 -63 56 -133 119 -155 139 -79 71 -269 228 -405 334 -172 | |||
| 134 -433 310 -585 394 -467 258 -804 290 -1031 98 -100 -85 -200 -250 -240 | |||
| -395 -2 -8 -11 -40 -19 -70 -26 -91 -41 -176 -60 -330 -16 -129 -23 -567 -11 | |||
| -690 2 -19 6 -82 10 -140 4 -58 9 -121 11 -140 2 -19 7 -57 10 -85 17 -155 28 | |||
| -239 40 -320 8 -52 16 -109 21 -145 5 -37 40 -247 49 -290 3 -14 9 -50 15 -80 | |||
| 6 -30 12 -66 15 -80 3 -14 8 -38 10 -55 7 -40 53 -259 66 -315 6 -25 13 -55 | |||
| 15 -68 3 -13 18 -81 35 -150 17 -70 32 -134 34 -142 10 -48 88 -360 96 -385 5 | |||
| -16 23 -82 39 -145 17 -63 37 -137 45 -165 8 -27 36 -122 61 -210 25 -88 64 | |||
| -218 86 -290 61 -200 139 -448 145 -465 3 -8 38 -112 79 -230 152 -447 261 | |||
| -742 435 -1177 59 -150 114 -302 122 -338 18 -92 14 -209 -13 -315 -5 -19 -12 | |||
| -64 -15 -100 -4 -36 -9 -73 -11 -83 -17 -92 -24 -567 -10 -777 12 -185 16 | |||
| -233 21 -270 2 -19 7 -64 10 -100 3 -36 8 -76 10 -90 2 -14 7 -50 10 -80 3 | |||
| -30 10 -80 15 -110 5 -30 12 -77 15 -105 20 -167 116 -404 243 -600 172 -265 | |||
| 527 -610 882 -858 52 -36 100 -70 105 -74 26 -22 295 -189 420 -261 688 -394 | |||
| 1603 -782 2485 -1052 151 -46 310 -100 325 -110 6 -3 42 -19 80 -35 181 -74 | |||
| 349 -174 505 -299 238 -193 565 -314 945 -352 125 -13 415 -7 515 10 14 3 42 | |||
| 7 63 10 454 68 895 281 1182 571 86 87 101 105 155 186 119 176 249 312 450 | |||
| 473 47 37 92 73 100 79 8 7 69 48 135 91 66 44 209 142 319 220 109 78 208 | |||
| 148 220 156 112 79 613 469 672 525 6 5 33 28 60 50 41 34 264 227 300 260 | |||
| 169 154 236 218 379 360 279 279 466 491 662 750 331 440 551 915 589 1275 9 | |||
| 92 11 279 3 320 -4 19 -10 58 -13 85 -6 53 -9 70 -32 200 -15 87 -36 202 -49 | |||
| 265 -9 41 -19 88 -21 104 -10 54 -75 311 -104 411 -73 249 -137 420 -227 605 | |||
| -81 166 -100 220 -108 307 -4 37 -8 70 -8 73 0 3 3 39 7 81 4 42 9 94 11 115 | |||
| 2 22 6 71 10 109 10 109 14 154 20 240 3 44 8 100 10 125 2 25 7 95 10 155 4 | |||
| 61 8 130 11 155 2 25 6 106 10 180 3 74 7 167 9 205 34 618 24 1748 -20 2375 | |||
| -1 19 -5 85 -9 145 -4 61 -9 121 -11 135 -2 14 -6 61 -10 105 -18 202 -36 370 | |||
| -50 470 -3 17 -11 80 -20 140 -8 61 -18 126 -21 145 -38 241 -36 232 -75 425 | |||
| -65 321 -156 637 -250 867 -228 557 -539 808 -889 716z m-1505 -7529 c28 -6 | |||
| 59 -12 71 -15 124 -24 309 -116 447 -222 139 -106 163 -165 161 -387 -5 -544 | |||
| -260 -952 -664 -1064 -99 -28 -165 -35 -310 -35 -246 0 -421 40 -616 139 -162 | |||
| 83 -359 256 -409 360 -39 80 -36 143 16 292 152 436 420 737 784 880 84 33 | |||
| 167 54 244 60 36 3 67 7 69 8 7 6 162 -6 207 -16z m-5065 -745 c41 -8 84 -17 | |||
| 95 -19 37 -8 159 -52 210 -76 49 -22 195 -107 205 -118 3 -4 30 -25 60 -47 | |||
| 112 -84 258 -245 357 -394 58 -87 73 -126 73 -187 0 -47 -46 -175 -80 -223 | |||
| -11 -16 -20 -32 -20 -37 -1 -14 -102 -148 -156 -205 -144 -152 -326 -265 -544 | |||
| -336 -394 -130 -707 -66 -965 195 -166 168 -307 441 -359 692 -26 126 -11 176 | |||
| 93 315 176 234 404 386 661 439 89 19 278 19 370 1z"/> | |||
| <path d="M10188 6660 c-51 -15 -85 -43 -126 -104 -95 -143 -127 -237 -126 | |||
| -371 1 -94 3 -105 37 -176 56 -116 209 -261 312 -296 61 -20 136 0 182 49 33 | |||
| 35 91 167 112 255 22 92 21 222 -3 298 -16 53 -74 154 -116 201 -31 36 -128 | |||
| 118 -156 132 -29 16 -83 21 -116 12z"/> | |||
| <path d="M5501 5973 c-39 -8 -114 -96 -158 -185 -77 -155 -87 -296 -32 -443 | |||
| 41 -109 183 -292 245 -316 51 -19 102 -17 145 4 82 41 199 215 233 348 42 166 | |||
| -30 352 -193 500 -99 89 -150 109 -240 92z"/> | |||
| </g> | |||
| </svg> | |||
BIN
img/logo.png
View File
| Before | After |
|---|---|
|
|
| Width: 357 | Height: 113 | Size: 20 KiB |
BIN
img/person.jpg
View File
| Before | After |
|---|---|
|
|
| Width: 240 | Height: 300 | Size: 2.8 KiB |
BIN
img/portfolio/Thumbs.db
View File
BIN
img/portfolio/creator-loggedin.png
View File
| Before | After |
|---|---|
|
|
| Width: 1920 | Height: 1080 | Size: 145 KiB |
BIN
img/portfolio/creator-login.png
View File
| Before | After |
|---|---|
|
|
| Width: 1920 | Height: 1080 | Size: 813 KiB |
BIN
img/portfolio/creator.jpg
View File
| Before | After |
|---|---|
|
|
| Width: 300 | Height: 175 | Size: 20 KiB |
BIN
img/portfolio/email.jpg
View File
| Before | After |
|---|---|
|
|
| Width: 300 | Height: 175 | Size: 14 KiB |
BIN
img/portfolio/equalscope.jpg
View File
| Before | After |
|---|---|
|
|
| Width: 300 | Height: 175 | Size: 7.1 KiB |
BIN
img/portfolio/optimize-front.png
View File
| Before | After |
|---|---|
|
|
| Width: 1920 | Height: 1080 | Size: 725 KiB |
BIN
img/portfolio/optimize-youtubepage.png
View File
| Before | After |
|---|---|
|
|
| Width: 1920 | Height: 1080 | Size: 119 KiB |
BIN
img/portfolio/optimize.jpg
View File
| Before | After |
|---|---|
|
|
| Width: 300 | Height: 175 | Size: 25 KiB |
BIN
img/portfolio/optimizeblog-article.png
View File
| Before | After |
|---|---|
|
|
| Width: 1920 | Height: 1080 | Size: 142 KiB |
BIN
img/portfolio/optimizeblog-front.png
View File
| Before | After |
|---|---|
|
|
| Width: 1920 | Height: 1080 | Size: 124 KiB |
BIN
img/portfolio/optimizeblog.jpg
View File
| Before | After |
|---|---|
|
|
| Width: 300 | Height: 175 | Size: 6.4 KiB |
BIN
img/portfolio/taskify-loggedin.png
View File
| Before | After |
|---|---|
|
|
| Width: 1920 | Height: 1080 | Size: 24 KiB |
BIN
img/portfolio/taskify.jpg
View File
| Before | After |
|---|---|
|
|
| Width: 300 | Height: 175 | Size: 6.0 KiB |
BIN
img/portfolio/taskify.png
View File
| Before | After |
|---|---|
|
|
| Width: 1920 | Height: 1080 | Size: 135 KiB |
BIN
img/single/single1.jpg
View File
| Before | After |
|---|---|
|
|
| Width: 600 | Height: 900 | Size: 466 KiB |
BIN
img/single/single2.jpg
View File
| Before | After |
|---|---|
|
|
| Width: 600 | Height: 900 | Size: 327 KiB |
BIN
img/single/single3.jpg
View File
| Before | After |
|---|---|
|
|
| Width: 600 | Height: 900 | Size: 477 KiB |
BIN
img/single/single4.jpg
View File
| Before | After |
|---|---|
|
|
| Width: 600 | Height: 400 | Size: 236 KiB |
BIN
img/single/single5.jpg
View File
| Before | After |
|---|---|
|
|
| Width: 600 | Height: 400 | Size: 238 KiB |
BIN
img/slider/slide1.jpg
View File
| Before | After |
|---|---|
|
|
| Width: 1100 | Height: 450 | Size: 189 KiB |
BIN
img/slider/slide2.jpg
View File
| Before | After |
|---|---|
|
|
| Width: 1100 | Height: 450 | Size: 290 KiB |
BIN
img/slider/slide3.jpg
View File
| Before | After |
|---|---|
|
|
| Width: 1100 | Height: 450 | Size: 229 KiB |
+ 124
- 0
index.htm
View File
| @ -0,0 +1,124 @@ | |||
| <!DOCTYPE html> | |||
| <!--[if IE 8]> <html class="no-js lt-ie9" lang="en" > <![endif]--> | |||
| <!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]--> | |||
| <head> | |||
| <meta charset="utf-8"> | |||
| <meta name="viewport" content="width=device-width"> | |||
| <title>Marcel Haazen | Home</title> | |||
| <meta name="author" content="Marcel Haazen"> | |||
| <meta name="description" content="########"> | |||
| <link rel="stylesheet" href="css/foundation.css"> | |||
| <link rel="stylesheet" href="css/style.css"> | |||
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> | |||
| <!-- Favicone Icon --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/img/flavicon/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/img/flavicon/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/img/flavicon/favicon-16x16.png"> | |||
| <link rel="manifest" href="/img/flavicon/manifest.json"> | |||
| <link rel="mask-icon" href="/img/flavicon/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/img/flavicon/favicon.ico"> | |||
| <meta name="msapplication-config" content="/img/flavicon/browserconfig.xml"> | |||
| <meta name="theme-color" content="#646464"> | |||
| </head> | |||
| <body> | |||
| <bordercolor></bordercolor> | |||
| <div class="row"> | |||
| <div class="animated fadeInLeft"> | |||
| <div class="large-3 columns"> | |||
| <logo> | |||
| <img src="https://res.cloudinary.com/haazen/image/upload/logo-white.png" alt="" /> | |||
| </logo> | |||
| </div><!-- 3 columns --> | |||
| </div><!-- animation --> | |||
| <div class="large-9 columns"> | |||
| <ul id="menubar"> | |||
| <li><a href="/" id="active">Home</a></li> | |||
| <li><a href="about">About</a></li> | |||
| <li><a href="contact">Contact</a></li> | |||
| </ul> | |||
| </div><!-- 9 columns --> | |||
| </div><!-- row --> | |||
| <div class="animated fadeInUp"> | |||
| <div class="row"> | |||
| <div class="large-12 columns"> | |||
| <whatwedo> | |||
| <div class="large-4 columns"> | |||
| <box> | |||
| <i class="fa fa-2x fa-server"></i> | |||
| <h1>Server Administration</h1> | |||
| <p>whenever it's a clean server or manageing a already existing system, I make sure everything is up and running.</p> | |||
| </box> | |||
| </div> | |||
| <div class="large-4 columns"> | |||
| <box> | |||
| <i class="fa fa-2x fa-shield"></i> | |||
| <h1>Security</h1> | |||
| <p>Nowadays security is a must but you might not know how to set it up. I'll help you secure your systems.</p> | |||
| </box> | |||
| </div> | |||
| <div class="large-4 columns"> | |||
| <box> | |||
| <i class="fa fa-2x fa-code"></i> | |||
| <h1>Programming</h1> | |||
| <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> | |||
| </box> | |||
| </div> | |||
| </whatwedo> | |||
| </div><!-- 12 columns --> | |||
| </div><!-- row --> | |||
| </div><!-- animation --> | |||
| <div class="row"> | |||
| <div class="large-12 columns"> | |||
| <projects> | |||
| <h1>Last Certificates</h1> | |||
| <ul class="small-block-grid-2 large-block-grid-3"> | |||
| <li><a href="#"><img src="https://res.cloudinary.com/haazen/image/upload/Certificates/MTA_Windows_OS_fundamentals.png" alt="MTA Windows Operating System Fundamentals"></a></li> | |||
| <li><a href="#"><img src="https://res.cloudinary.com/haazen/image/upload/Certificates/MTA_Windows_Server_Admin_fundamentals.png"></a></li> | |||
| <li><a href="#"><img src="https://res.cloudinary.com/haazen/image/upload/Certificates/MTA_Networking_fundamentals.png"></a></li> | |||
| <li><a href="#"><img src="https://res.cloudinary.com/haazen/image/upload/Certificates/MTA_Security_fundamentals.png"></a></li> | |||
| <li><a href="#"><img src="https://res.cloudinary.com/haazen/image/upload/Certificates/MOS_Word.png"></a></li> | |||
| <li><a href="#"><img src="https://res.cloudinary.com/haazen/image/upload/Certificates/MOS_Excel.png"></a></li> | |||
| </ul> | |||
| </projects> | |||
| </div> | |||
| </div> | |||
| <div class="row"> | |||
| <div class="large-12 columns"> | |||
| <clients> | |||
| <h1>Clients</h1> | |||
| <ul class="small-block-grid-2 large-block-grid-5"> | |||
| <li><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="></li> | |||
| <li><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="></li> | |||
| <li><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="></li> | |||
| <li><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="></li> | |||
| <li><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="></li> | |||
| </ul> | |||
| </clients> | |||
| </div> | |||
| </div> | |||
| <footer> | |||
| <div class="row"> | |||
| <div class="large-12 columns"> | |||
| <foot> | |||
| © 2015 - <script>document.write(new Date().getFullYear())</script> <b>Marcel Haazen</b> All Rights Reserved · Logo Design by <a href="https://www.pmlogos.com"><img src="https://res.cloudinary.com/haazen/image/upload/PMLogos.png" alt="PMLogos" /></a> | |||
| </foot> | |||
| </div> | |||
| </div> | |||
| </footer> | |||
| <script src="js/main.js"></script> | |||
| <script> | |||
| $(document).foundation(); | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 4
- 0
js/email.js
View File
| @ -0,0 +1,4 @@ | |||
| function gen_mail_to_link(lhs, rhs) { | |||
| document.write(lhs + "@"); | |||
| document.write(rhs); | |||
| } | |||
+ 13
- 0
js/foundation.min.js
File diff suppressed because it is too large
View File
+ 52
- 0
js/foundation/foundation.alerts.js
View File
| @ -0,0 +1,52 @@ | |||
| /*jslint unparam: true, browser: true, indent: 2 */ | |||
| ;(function ($, window, document, undefined) { | |||
| 'use strict'; | |||
| Foundation.libs.alerts = { | |||
| name : 'alerts', | |||
| version : '4.2.2', | |||
| settings : { | |||
| speed: 300, // fade out speed | |||
| callback: function (){} | |||
| }, | |||
| init : function (scope, method, options) { | |||
| this.scope = scope || this.scope; | |||
| if (typeof method === 'object') { | |||
| $.extend(true, this.settings, method); | |||
| } | |||
| if (typeof method !== 'string') { | |||
| if (!this.settings.init) { this.events(); } | |||
| return this.settings.init; | |||
| } else { | |||
| return this[method].call(this, options); | |||
| } | |||
| }, | |||
| events : function () { | |||
| var self = this; | |||
| $(this.scope).on('click.fndtn.alerts', '[data-alert] a.close', function (e) { | |||
| e.preventDefault(); | |||
| $(this).closest("[data-alert]").fadeOut(self.speed, function () { | |||
| $(this).remove(); | |||
| self.settings.callback(); | |||
| }); | |||
| }); | |||
| this.settings.init = true; | |||
| }, | |||
| off : function () { | |||
| $(this.scope).off('.fndtn.alerts'); | |||
| }, | |||
| reflow : function () {} | |||
| }; | |||
| }(Foundation.zj, this, this.document)); | |||
+ 516
- 0
js/foundation/foundation.clearing.js
View File
| @ -0,0 +1,516 @@ | |||
| /*jslint unparam: true, browser: true, indent: 2 */ | |||
| ;(function ($, window, document, undefined) { | |||
| 'use strict'; | |||
| Foundation.libs.clearing = { | |||
| name : 'clearing', | |||
| version: '4.3.1', | |||
| settings : { | |||
| templates : { | |||
| viewing : '<a href="#" class="clearing-close">×</a>' + | |||
| '<div class="visible-img" style="display: none"><img src="//:0">' + | |||
| '<p class="clearing-caption"></p><a href="#" class="clearing-main-prev"><span></span></a>' + | |||
| '<a href="#" class="clearing-main-next"><span></span></a></div>' | |||
| }, | |||
| // comma delimited list of selectors that, on click, will close clearing, | |||
| // add 'div.clearing-blackout, div.visible-img' to close on background click | |||
| close_selectors : '.clearing-close', | |||
| // event initializers and locks | |||
| init : false, | |||
| locked : false | |||
| }, | |||
| init : function (scope, method, options) { | |||
| var self = this; | |||
| Foundation.inherit(this, 'set_data get_data remove_data throttle data_options'); | |||
| if (typeof method === 'object') { | |||
| options = $.extend(true, this.settings, method); | |||
| } | |||
| if (typeof method !== 'string') { | |||
| $(this.scope).find('ul[data-clearing]').each(function () { | |||
| var $el = $(this), | |||
| options = options || {}, | |||
| lis = $el.find('li'), | |||
| settings = self.get_data($el); | |||
| if (!settings && lis.length > 0) { | |||
| options.$parent = $el.parent(); | |||
| self.set_data($el, $.extend({}, self.settings, options, self.data_options($el))); | |||
| self.assemble($el.find('li')); | |||
| if (!self.settings.init) { | |||
| self.events().swipe_events(); | |||
| } | |||
| } | |||
| }); | |||
| return this.settings.init; | |||
| } else { | |||
| // fire method | |||
| return this[method].call(this, options); | |||
| } | |||
| }, | |||
| // event binding and initial setup | |||
| events : function () { | |||
| var self = this; | |||
| $(this.scope) | |||
| .on('click.fndtn.clearing', 'ul[data-clearing] li', | |||
| function (e, current, target) { | |||
| var current = current || $(this), | |||
| target = target || current, | |||
| next = current.next('li'), | |||
| settings = self.get_data(current.parent()), | |||
| image = $(e.target); | |||
| e.preventDefault(); | |||
| if (!settings) self.init(); | |||
| // if clearing is open and the current image is | |||
| // clicked, go to the next image in sequence | |||
| if (target.hasClass('visible') && | |||
| current[0] === target[0] && | |||
| next.length > 0 && self.is_open(current)) { | |||
| target = next; | |||
| image = target.find('img'); | |||
| } | |||
| // set current and target to the clicked li if not otherwise defined. | |||
| self.open(image, current, target); | |||
| self.update_paddles(target); | |||
| }) | |||
| .on('click.fndtn.clearing', '.clearing-main-next', | |||
| function (e) { this.nav(e, 'next') }.bind(this)) | |||
| .on('click.fndtn.clearing', '.clearing-main-prev', | |||
| function (e) { this.nav(e, 'prev') }.bind(this)) | |||
| .on('click.fndtn.clearing', this.settings.close_selectors, | |||
| function (e) { Foundation.libs.clearing.close(e, this) }) | |||
| .on('keydown.fndtn.clearing', | |||
| function (e) { this.keydown(e) }.bind(this)); | |||
| $(window).on('resize.fndtn.clearing', | |||
| function () { this.resize() }.bind(this)); | |||
| this.settings.init = true; | |||
| return this; | |||
| }, | |||
| swipe_events : function () { | |||
| var self = this; | |||
| $(this.scope) | |||
| .on('touchstart.fndtn.clearing', '.visible-img', function(e) { | |||
| if (!e.touches) { e = e.originalEvent; } | |||
| var data = { | |||
| start_page_x: e.touches[0].pageX, | |||
| start_page_y: e.touches[0].pageY, | |||
| start_time: (new Date()).getTime(), | |||
| delta_x: 0, | |||
| is_scrolling: undefined | |||
| }; | |||
| $(this).data('swipe-transition', data); | |||
| e.stopPropagation(); | |||
| }) | |||
| .on('touchmove.fndtn.clearing', '.visible-img', function(e) { | |||
| if (!e.touches) { e = e.originalEvent; } | |||
| // Ignore pinch/zoom events | |||
| if(e.touches.length > 1 || e.scale && e.scale !== 1) return; | |||
| var data = $(this).data('swipe-transition'); | |||
| if (typeof data === 'undefined') { | |||
| data = {}; | |||
| } | |||
| data.delta_x = e.touches[0].pageX - data.start_page_x; | |||
| if ( typeof data.is_scrolling === 'undefined') { | |||
| data.is_scrolling = !!( data.is_scrolling || Math.abs(data.delta_x) < Math.abs(e.touches[0].pageY - data.start_page_y) ); | |||
| } | |||
| if (!data.is_scrolling && !data.active) { | |||
| e.preventDefault(); | |||
| var direction = (data.delta_x < 0) ? 'next' : 'prev'; | |||
| data.active = true; | |||
| self.nav(e, direction); | |||
| } | |||
| }) | |||
| .on('touchend.fndtn.clearing', '.visible-img', function(e) { | |||
| $(this).data('swipe-transition', {}); | |||
| e.stopPropagation(); | |||
| }); | |||
| }, | |||
| assemble : function ($li) { | |||
| var $el = $li.parent(); | |||
| $el.after('<div id="foundationClearingHolder"></div>'); | |||
| var holder = $('#foundationClearingHolder'), | |||
| settings = this.get_data($el), | |||
| grid = $el.detach(), | |||
| data = { | |||
| grid: '<div class="carousel">' + this.outerHTML(grid[0]) + '</div>', | |||
| viewing: settings.templates.viewing | |||
| }, | |||
| wrapper = '<div class="clearing-assembled"><div>' + data.viewing + | |||
| data.grid + '</div></div>'; | |||
| return holder.after(wrapper).remove(); | |||
| }, | |||
| // event callbacks | |||
| open : function ($image, current, target) { | |||
| var root = target.closest('.clearing-assembled'), | |||
| container = root.find('div').first(), | |||
| visible_image = container.find('.visible-img'), | |||
| image = visible_image.find('img').not($image); | |||
| if (!this.locked()) { | |||
| // set the image to the selected thumbnail | |||
| image | |||
| .attr('src', this.load($image)) | |||
| .css('visibility', 'hidden'); | |||
| this.loaded(image, function () { | |||
| image.css('visibility', 'visible'); | |||
| // toggle the gallery | |||
| root.addClass('clearing-blackout'); | |||
| container.addClass('clearing-container'); | |||
| visible_image.show(); | |||
| this.fix_height(target) | |||
| .caption(visible_image.find('.clearing-caption'), $image) | |||
| .center(image) | |||
| .shift(current, target, function () { | |||
| target.siblings().removeClass('visible'); | |||
| target.addClass('visible'); | |||
| }); | |||
| }.bind(this)); | |||
| } | |||
| }, | |||
| close : function (e, el) { | |||
| e.preventDefault(); | |||
| var root = (function (target) { | |||
| if (/blackout/.test(target.selector)) { | |||
| return target; | |||
| } else { | |||
| return target.closest('.clearing-blackout'); | |||
| } | |||
| }($(el))), container, visible_image; | |||
| if (el === e.target && root) { | |||
| container = root.find('div').first(); | |||
| visible_image = container.find('.visible-img'); | |||
| this.settings.prev_index = 0; | |||
| root.find('ul[data-clearing]') | |||
| .attr('style', '').closest('.clearing-blackout') | |||
| .removeClass('clearing-blackout'); | |||
| container.removeClass('clearing-container'); | |||
| visible_image.hide(); | |||
| } | |||
| return false; | |||
| }, | |||
| is_open : function (current) { | |||
| return current.parent().attr('style').length > 0; | |||
| }, | |||
| keydown : function (e) { | |||
| var clearing = $('.clearing-blackout').find('ul[data-clearing]'); | |||
| if (e.which === 39) this.go(clearing, 'next'); | |||
| if (e.which === 37) this.go(clearing, 'prev'); | |||
| if (e.which === 27) $('a.clearing-close').trigger('click'); | |||
| }, | |||
| nav : function (e, direction) { | |||
| var clearing = $('.clearing-blackout').find('ul[data-clearing]'); | |||
| e.preventDefault(); | |||
| this.go(clearing, direction); | |||
| }, | |||
| resize : function () { | |||
| var image = $('.clearing-blackout .visible-img').find('img'); | |||
| if (image.length) { | |||
| this.center(image); | |||
| } | |||
| }, | |||
| // visual adjustments | |||
| fix_height : function (target) { | |||
| var lis = target.parent().children(), | |||
| self = this; | |||
| lis.each(function () { | |||
| var li = $(this), | |||
| image = li.find('img'); | |||
| if (li.height() > self.outerHeight(image)) { | |||
| li.addClass('fix-height'); | |||
| } | |||
| }) | |||
| .closest('ul') | |||
| .width(lis.length * 100 + '%'); | |||
| return this; | |||
| }, | |||
| update_paddles : function (target) { | |||
| var visible_image = target | |||
| .closest('.carousel') | |||
| .siblings('.visible-img'); | |||
| if (target.next().length > 0) { | |||
| visible_image | |||
| .find('.clearing-main-next') | |||
| .removeClass('disabled'); | |||
| } else { | |||
| visible_image | |||
| .find('.clearing-main-next') | |||
| .addClass('disabled'); | |||
| } | |||
| if (target.prev().length > 0) { | |||
| visible_image | |||
| .find('.clearing-main-prev') | |||
| .removeClass('disabled'); | |||
| } else { | |||
| visible_image | |||
| .find('.clearing-main-prev') | |||
| .addClass('disabled'); | |||
| } | |||
| }, | |||
| center : function (target) { | |||
| if (!this.rtl) { | |||
| target.css({ | |||
| marginLeft : -(this.outerWidth(target) / 2), | |||
| marginTop : -(this.outerHeight(target) / 2) | |||
| }); | |||
| } else { | |||
| target.css({ | |||
| marginRight : -(this.outerWidth(target) / 2), | |||
| marginTop : -(this.outerHeight(target) / 2) | |||
| }); | |||
| } | |||
| return this; | |||
| }, | |||
| // image loading and preloading | |||
| load : function ($image) { | |||
| if ($image[0].nodeName === "A") { | |||
| var href = $image.attr('href'); | |||
| } else { | |||
| var href = $image.parent().attr('href'); | |||
| } | |||
| this.preload($image); | |||
| if (href) return href; | |||
| return $image.attr('src'); | |||
| }, | |||
| preload : function ($image) { | |||
| this | |||
| .img($image.closest('li').next()) | |||
| .img($image.closest('li').prev()); | |||
| }, | |||
| loaded : function (image, callback) { | |||
| // based on jquery.imageready.js | |||
| // @weblinc, @jsantell, (c) 2012 | |||
| function loaded () { | |||
| callback(); | |||
| } | |||
| function bindLoad () { | |||
| this.one('load', loaded); | |||
| if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) { | |||
| var src = this.attr( 'src' ), | |||
| param = src.match( /\?/ ) ? '&' : '?'; | |||
| param += 'random=' + (new Date()).getTime(); | |||
| this.attr('src', src + param); | |||
| } | |||
| } | |||
| if (!image.attr('src')) { | |||
| loaded(); | |||
| return; | |||
| } | |||
| if (image[0].complete || image[0].readyState === 4) { | |||
| loaded(); | |||
| } else { | |||
| bindLoad.call(image); | |||
| } | |||
| }, | |||
| img : function (img) { | |||
| if (img.length) { | |||
| var new_img = new Image(), | |||
| new_a = img.find('a'); | |||
| if (new_a.length) { | |||
| new_img.src = new_a.attr('href'); | |||
| } else { | |||
| new_img.src = img.find('img').attr('src'); | |||
| } | |||
| } | |||
| return this; | |||
| }, | |||
| // image caption | |||
| caption : function (container, $image) { | |||
| var caption = $image.data('caption'); | |||
| if (caption) { | |||
| container | |||
| .html(caption) | |||
| .show(); | |||
| } else { | |||
| container | |||
| .text('') | |||
| .hide(); | |||
| } | |||
| return this; | |||
| }, | |||
| // directional methods | |||
| go : function ($ul, direction) { | |||
| var current = $ul.find('.visible'), | |||
| target = current[direction](); | |||
| if (target.length) { | |||
| target | |||
| .find('img') | |||
| .trigger('click', [current, target]); | |||
| } | |||
| }, | |||
| shift : function (current, target, callback) { | |||
| var clearing = target.parent(), | |||
| old_index = this.settings.prev_index || target.index(), | |||
| direction = this.direction(clearing, current, target), | |||
| left = parseInt(clearing.css('left'), 10), | |||
| width = this.outerWidth(target), | |||
| skip_shift; | |||
| // we use jQuery animate instead of CSS transitions because we | |||
| // need a callback to unlock the next animation | |||
| if (target.index() !== old_index && !/skip/.test(direction)){ | |||
| if (/left/.test(direction)) { | |||
| this.lock(); | |||
| clearing.animate({left : left + width}, 300, this.unlock()); | |||
| } else if (/right/.test(direction)) { | |||
| this.lock(); | |||
| clearing.animate({left : left - width}, 300, this.unlock()); | |||
| } | |||
| } else if (/skip/.test(direction)) { | |||
| // the target image is not adjacent to the current image, so | |||
| // do we scroll right or not | |||
| skip_shift = target.index() - this.settings.up_count; | |||
| this.lock(); | |||
| if (skip_shift > 0) { | |||
| clearing.animate({left : -(skip_shift * width)}, 300, this.unlock()); | |||
| } else { | |||
| clearing.animate({left : 0}, 300, this.unlock()); | |||
| } | |||
| } | |||
| callback(); | |||
| }, | |||
| direction : function ($el, current, target) { | |||
| var lis = $el.find('li'), | |||
| li_width = this.outerWidth(lis) + (this.outerWidth(lis) / 4), | |||
| up_count = Math.floor(this.outerWidth($('.clearing-container')) / li_width) - 1, | |||
| target_index = lis.index(target), | |||
| response; | |||
| this.settings.up_count = up_count; | |||
| if (this.adjacent(this.settings.prev_index, target_index)) { | |||
| if ((target_index > up_count) | |||
| && target_index > this.settings.prev_index) { | |||
| response = 'right'; | |||
| } else if ((target_index > up_count - 1) | |||
| && target_index <= this.settings.prev_index) { | |||
| response = 'left'; | |||
| } else { | |||
| response = false; | |||
| } | |||
| } else { | |||
| response = 'skip'; | |||
| } | |||
| this.settings.prev_index = target_index; | |||
| return response; | |||
| }, | |||
| adjacent : function (current_index, target_index) { | |||
| for (var i = target_index + 1; i >= target_index - 1; i--) { | |||
| if (i === current_index) return true; | |||
| } | |||
| return false; | |||
| }, | |||
| // lock management | |||
| lock : function () { | |||
| this.settings.locked = true; | |||
| }, | |||
| unlock : function () { | |||
| this.settings.locked = false; | |||
| }, | |||
| locked : function () { | |||
| return this.settings.locked; | |||
| }, | |||
| // plugin management/browser quirks | |||
| outerHTML : function (el) { | |||
| // support FireFox < 11 | |||
| return el.outerHTML || new XMLSerializer().serializeToString(el); | |||
| }, | |||
| off : function () { | |||
| $(this.scope).off('.fndtn.clearing'); | |||
| $(window).off('.fndtn.clearing'); | |||
| this.remove_data(); // empty settings cache | |||
| this.settings.init = false; | |||
| }, | |||
| reflow : function () { | |||
| this.init(); | |||
| } | |||
| }; | |||
| }(Foundation.zj, this, this.document)); | |||
+ 177
- 0
js/foundation/foundation.dropdown.js
View File
| @ -0,0 +1,177 @@ | |||
| /*jslint unparam: true, browser: true, indent: 2 */ | |||
| ;(function ($, window, document, undefined) { | |||
| 'use strict'; | |||
| Foundation.libs.dropdown = { | |||
| name : 'dropdown', | |||
| version : '4.3.0', | |||
| settings : { | |||
| activeClass: 'open', | |||
| is_hover: false, | |||
| opened: function(){}, | |||
| closed: function(){} | |||
| }, | |||
| init : function (scope, method, options) { | |||
| this.scope = scope || this.scope; | |||
| Foundation.inherit(this, 'throttle scrollLeft data_options'); | |||
| if (typeof method === 'object') { | |||
| $.extend(true, this.settings, method); | |||
| } | |||
| if (typeof method !== 'string') { | |||
| if (!this.settings.init) { | |||
| this.events(); | |||
| } | |||
| return this.settings.init; | |||
| } else { | |||
| return this[method].call(this, options); | |||
| } | |||
| }, | |||
| events : function () { | |||
| var self = this; | |||
| $(this.scope) | |||
| .on('click.fndtn.dropdown', '[data-dropdown]', function (e) { | |||
| var settings = $.extend({}, self.settings, self.data_options($(this))); | |||
| e.preventDefault(); | |||
| if (!settings.is_hover) self.toggle($(this)); | |||
| }) | |||
| .on('mouseenter', '[data-dropdown]', function (e) { | |||
| var settings = $.extend({}, self.settings, self.data_options($(this))); | |||
| if (settings.is_hover) self.toggle($(this)); | |||
| }) | |||
| .on('mouseleave', '[data-dropdown-content]', function (e) { | |||
| var target = $('[data-dropdown="' + $(this).attr('id') + '"]'), | |||
| settings = $.extend({}, self.settings, self.data_options(target)); | |||
| if (settings.is_hover) self.close.call(self, $(this)); | |||
| }) | |||
| .on('opened.fndtn.dropdown', '[data-dropdown-content]', this.settings.opened) | |||
| .on('closed.fndtn.dropdown', '[data-dropdown-content]', this.settings.closed); | |||
| $(document).on('click.fndtn.dropdown', function (e) { | |||
| var parent = $(e.target).closest('[data-dropdown-content]'); | |||
| if ($(e.target).data('dropdown')) { | |||
| return; | |||
| } | |||
| if (parent.length > 0 && ($(e.target).is('[data-dropdown-content]') || $.contains(parent.first()[0], e.target))) { | |||
| e.stopPropagation(); | |||
| return; | |||
| } | |||
| self.close.call(self, $('[data-dropdown-content]')); | |||
| }); | |||
| $(window).on('resize.fndtn.dropdown', self.throttle(function () { | |||
| self.resize.call(self); | |||
| }, 50)).trigger('resize'); | |||
| this.settings.init = true; | |||
| }, | |||
| close: function (dropdown) { | |||
| var self = this; | |||
| dropdown.each(function () { | |||
| if ($(this).hasClass(self.settings.activeClass)) { | |||
| $(this) | |||
| .css(Foundation.rtl ? 'right':'left', '-99999px') | |||
| .removeClass(self.settings.activeClass); | |||
| $(this).trigger('closed'); | |||
| } | |||
| }); | |||
| }, | |||
| open: function (dropdown, target) { | |||
| this | |||
| .css(dropdown | |||
| .addClass(this.settings.activeClass), target); | |||
| dropdown.trigger('opened'); | |||
| }, | |||
| toggle : function (target) { | |||
| var dropdown = $('#' + target.data('dropdown')); | |||
| this.close.call(this, $('[data-dropdown-content]').not(dropdown)); | |||
| if (dropdown.hasClass(this.settings.activeClass)) { | |||
| this.close.call(this, dropdown); | |||
| } else { | |||
| this.close.call(this, $('[data-dropdown-content]')) | |||
| this.open.call(this, dropdown, target); | |||
| } | |||
| }, | |||
| resize : function () { | |||
| var dropdown = $('[data-dropdown-content].open'), | |||
| target = $("[data-dropdown='" + dropdown.attr('id') + "']"); | |||
| if (dropdown.length && target.length) { | |||
| this.css(dropdown, target); | |||
| } | |||
| }, | |||
| css : function (dropdown, target) { | |||
| var offset_parent = dropdown.offsetParent(); | |||
| // if (offset_parent.length > 0 && /body/i.test(dropdown.offsetParent()[0].nodeName)) { | |||
| var position = target.offset(); | |||
| position.top -= offset_parent.offset().top; | |||
| position.left -= offset_parent.offset().left; | |||
| // } else { | |||
| // var position = target.position(); | |||
| // } | |||
| if (this.small()) { | |||
| dropdown.css({ | |||
| position : 'absolute', | |||
| width: '95%', | |||
| left: '2.5%', | |||
| 'max-width': 'none', | |||
| top: position.top + this.outerHeight(target) | |||
| }); | |||
| } else { | |||
| if (!Foundation.rtl && $(window).width() > this.outerWidth(dropdown) + target.offset().left) { | |||
| var left = position.left; | |||
| if (dropdown.hasClass('right')) { | |||
| dropdown.removeClass('right'); | |||
| } | |||
| } else { | |||
| if (!dropdown.hasClass('right')) { | |||
| dropdown.addClass('right'); | |||
| } | |||
| var left = position.left - (this.outerWidth(dropdown) - this.outerWidth(target)); | |||
| } | |||
| dropdown.attr('style', '').css({ | |||
| position : 'absolute', | |||
| top: position.top + this.outerHeight(target), | |||
| left: left | |||
| }); | |||
| } | |||
| return dropdown; | |||
| }, | |||
| small : function () { | |||
| return $(window).width() < 768 || $('html').hasClass('lt-ie9'); | |||
| }, | |||
| off: function () { | |||
| $(this.scope).off('.fndtn.dropdown'); | |||
| $('html, body').off('.fndtn.dropdown'); | |||
| $(window).off('.fndtn.dropdown'); | |||
| $('[data-dropdown-content]').off('.fndtn.dropdown'); | |||
| this.settings.init = false; | |||
| }, | |||
| reflow : function () {} | |||
| }; | |||
| }(Foundation.zj, this, this.document)); | |||
+ 440
- 0
js/foundation/foundation.js
View File
| @ -0,0 +1,440 @@ | |||
| /* | |||
| * Foundation Responsive Library | |||
| * http://foundation.zurb.com | |||
| * Copyright 2013, ZURB | |||
| * Free to use under the MIT license. | |||
| * http://www.opensource.org/licenses/mit-license.php | |||
| */ | |||
| /*jslint unparam: true, browser: true, indent: 2 */ | |||
| // Accommodate running jQuery or Zepto in noConflict() mode by | |||
| // using an anonymous function to redefine the $ shorthand name. | |||
| // See http://docs.jquery.com/Using_jQuery_with_Other_Libraries | |||
| // and http://zeptojs.com/ | |||
| var libFuncName = null; | |||
| if (typeof jQuery === "undefined" && | |||
| typeof Zepto === "undefined" && | |||
| typeof $ === "function") { | |||
| libFuncName = $; | |||
| } else if (typeof jQuery === "function") { | |||
| libFuncName = jQuery; | |||
| } else if (typeof Zepto === "function") { | |||
| libFuncName = Zepto; | |||
| } else { | |||
| throw new TypeError(); | |||
| } | |||
| (function ($, window, document, undefined) { | |||
| 'use strict'; | |||
| /* | |||
| matchMedia() polyfill - Test a CSS media | |||
| type/query in JS. Authors & copyright (c) 2012: | |||
| Scott Jehl, Paul Irish, Nicholas Zakas. | |||
| Dual MIT/BSD license | |||
| https://github.com/paulirish/matchMedia.js | |||
| */ | |||
| window.matchMedia = window.matchMedia || (function( doc, undefined ) { | |||
| "use strict"; | |||
| var bool, | |||
| docElem = doc.documentElement, | |||
| refNode = docElem.firstElementChild || docElem.firstChild, | |||
| // fakeBody required for <FF4 when executed in <head> | |||
| fakeBody = doc.createElement( "body" ), | |||
| div = doc.createElement( "div" ); | |||
| div.id = "mq-test-1"; | |||
| div.style.cssText = "position:absolute;top:-100em"; | |||
| fakeBody.style.background = "none"; | |||
| fakeBody.appendChild(div); | |||
| return function(q){ | |||
| div.innerHTML = "­<style media=\"" + q + "\"> #mq-test-1 { width: 42px; }</style>"; | |||
| docElem.insertBefore( fakeBody, refNode ); | |||
| bool = div.offsetWidth === 42; | |||
| docElem.removeChild( fakeBody ); | |||
| return { | |||
| matches: bool, | |||
| media: q | |||
| }; | |||
| }; | |||
| }( document )); | |||
| // add dusty browser stuff | |||
| if (!Array.prototype.filter) { | |||
| Array.prototype.filter = function(fun /*, thisp */) { | |||
| "use strict"; | |||
| if (this == null) { | |||
| throw new TypeError(); | |||
| } | |||
| var t = Object(this), | |||
| len = t.length >>> 0; | |||
| if (typeof fun !== "function") { | |||
| return; | |||
| } | |||
| var res = [], | |||
| thisp = arguments[1]; | |||
| for (var i = 0; i < len; i++) { | |||
| if (i in t) { | |||
| var val = t[i]; // in case fun mutates this | |||
| if (fun && fun.call(thisp, val, i, t)) { | |||
| res.push(val); | |||
| } | |||
| } | |||
| } | |||
| return res; | |||
| } | |||
| } | |||
| if (!Function.prototype.bind) { | |||
| Function.prototype.bind = function (oThis) { | |||
| if (typeof this !== "function") { | |||
| // closest thing possible to the ECMAScript 5 internal IsCallable function | |||
| throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable"); | |||
| } | |||
| var aArgs = Array.prototype.slice.call(arguments, 1), | |||
| fToBind = this, | |||
| fNOP = function () {}, | |||
| fBound = function () { | |||
| return fToBind.apply(this instanceof fNOP && oThis | |||
| ? this | |||
| : oThis, | |||
| aArgs.concat(Array.prototype.slice.call(arguments))); | |||
| }; | |||
| fNOP.prototype = this.prototype; | |||
| fBound.prototype = new fNOP(); | |||
| return fBound; | |||
| }; | |||
| } | |||
| if (!Array.prototype.indexOf) { | |||
| Array.prototype.indexOf = function (searchElement /*, fromIndex */ ) { | |||
| "use strict"; | |||
| if (this == null) { | |||
| throw new TypeError(); | |||
| } | |||
| var t = Object(this); | |||
| var len = t.length >>> 0; | |||
| if (len === 0) { | |||
| return -1; | |||
| } | |||
| var n = 0; | |||
| if (arguments.length > 1) { | |||
| n = Number(arguments[1]); | |||
| if (n != n) { // shortcut for verifying if it's NaN | |||
| n = 0; | |||
| } else if (n != 0 && n != Infinity && n != -Infinity) { | |||
| n = (n > 0 || -1) * Math.floor(Math.abs(n)); | |||
| } | |||
| } | |||
| if (n >= len) { | |||
| return -1; | |||
| } | |||
| var k = n >= 0 ? n : Math.max(len - Math.abs(n), 0); | |||
| for (; k < len; k++) { | |||
| if (k in t && t[k] === searchElement) { | |||
| return k; | |||
| } | |||
| } | |||
| return -1; | |||
| } | |||
| } | |||
| // fake stop() for zepto. | |||
| $.fn.stop = $.fn.stop || function() { | |||
| return this; | |||
| }; | |||
| window.Foundation = { | |||
| name : 'Foundation', | |||
| version : '4.3.1', | |||
| cache : {}, | |||
| init : function (scope, libraries, method, options, response, /* internal */ nc) { | |||
| var library_arr, | |||
| args = [scope, method, options, response], | |||
| responses = [], | |||
| nc = nc || false; | |||
| // disable library error catching, | |||
| // used for development only | |||
| if (nc) this.nc = nc; | |||
| // check RTL | |||
| this.rtl = /rtl/i.test($('html').attr('dir')); | |||
| // set foundation global scope | |||
| this.scope = scope || this.scope; | |||
| if (libraries && typeof libraries === 'string' && !/reflow/i.test(libraries)) { | |||
| if (/off/i.test(libraries)) return this.off(); | |||
| library_arr = libraries.split(' '); | |||
| if (library_arr.length > 0) { | |||
| for (var i = library_arr.length - 1; i >= 0; i--) { | |||
| responses.push(this.init_lib(library_arr[i], args)); | |||
| } | |||
| } | |||
| } else { | |||
| if (/reflow/i.test(libraries)) args[1] = 'reflow'; | |||
| for (var lib in this.libs) { | |||
| responses.push(this.init_lib(lib, args)); | |||
| } | |||
| } | |||
| // if first argument is callback, add to args | |||
| if (typeof libraries === 'function') { | |||
| args.unshift(libraries); | |||
| } | |||
| return this.response_obj(responses, args); | |||
| }, | |||
| response_obj : function (response_arr, args) { | |||
| for (var i = 0, len = args.length; i < len; i++) { | |||
| if (typeof args[i] === 'function') { | |||
| return args[i]({ | |||
| errors: response_arr.filter(function (s) { | |||
| if (typeof s === 'string') return s; | |||
| }) | |||
| }); | |||
| } | |||
| } | |||
| return response_arr; | |||
| }, | |||
| init_lib : function (lib, args) { | |||
| return this.trap(function () { | |||
| if (this.libs.hasOwnProperty(lib)) { | |||
| this.patch(this.libs[lib]); | |||
| return this.libs[lib].init.apply(this.libs[lib], args); | |||
| } else { | |||
| return function () {}; | |||
| } | |||
| }.bind(this), lib); | |||
| }, | |||
| trap : function (fun, lib) { | |||
| if (!this.nc) { | |||
| try { | |||
| return fun(); | |||
| } catch (e) { | |||
| return this.error({name: lib, message: 'could not be initialized', more: e.name + ' ' + e.message}); | |||
| } | |||
| } | |||
| return fun(); | |||
| }, | |||
| patch : function (lib) { | |||
| this.fix_outer(lib); | |||
| lib.scope = this.scope; | |||
| lib.rtl = this.rtl; | |||
| }, | |||
| inherit : function (scope, methods) { | |||
| var methods_arr = methods.split(' '); | |||
| for (var i = methods_arr.length - 1; i >= 0; i--) { | |||
| if (this.lib_methods.hasOwnProperty(methods_arr[i])) { | |||
| this.libs[scope.name][methods_arr[i]] = this.lib_methods[methods_arr[i]]; | |||
| } | |||
| } | |||
| }, | |||
| random_str : function (length) { | |||
| var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split(''); | |||
| if (!length) { | |||
| length = Math.floor(Math.random() * chars.length); | |||
| } | |||
| var str = ''; | |||
| for (var i = 0; i < length; i++) { | |||
| str += chars[Math.floor(Math.random() * chars.length)]; | |||
| } | |||
| return str; | |||
| }, | |||
| libs : {}, | |||
| // methods that can be inherited in libraries | |||
| lib_methods : { | |||
| set_data : function (node, data) { | |||
| // this.name references the name of the library calling this method | |||
| var id = [this.name,+new Date(),Foundation.random_str(5)].join('-'); | |||
| Foundation.cache[id] = data; | |||
| node.attr('data-' + this.name + '-id', id); | |||
| return data; | |||
| }, | |||
| get_data : function (node) { | |||
| return Foundation.cache[node.attr('data-' + this.name + '-id')]; | |||
| }, | |||
| remove_data : function (node) { | |||
| if (node) { | |||
| delete Foundation.cache[node.attr('data-' + this.name + '-id')]; | |||
| node.attr('data-' + this.name + '-id', ''); | |||
| } else { | |||
| $('[data-' + this.name + '-id]').each(function () { | |||
| delete Foundation.cache[$(this).attr('data-' + this.name + '-id')]; | |||
| $(this).attr('data-' + this.name + '-id', ''); | |||
| }); | |||
| } | |||
| }, | |||
| throttle : function(fun, delay) { | |||
| var timer = null; | |||
| return function () { | |||
| var context = this, args = arguments; | |||
| clearTimeout(timer); | |||
| timer = setTimeout(function () { | |||
| fun.apply(context, args); | |||
| }, delay); | |||
| }; | |||
| }, | |||
| // parses data-options attribute on nodes and turns | |||
| // them into an object | |||
| data_options : function (el) { | |||
| var opts = {}, ii, p, | |||
| opts_arr = (el.attr('data-options') || ':').split(';'), | |||
| opts_len = opts_arr.length; | |||
| function isNumber (o) { | |||
| return ! isNaN (o-0) && o !== null && o !== "" && o !== false && o !== true; | |||
| } | |||
| function trim(str) { | |||
| if (typeof str === 'string') return $.trim(str); | |||
| return str; | |||
| } | |||
| // parse options | |||
| for (ii = opts_len - 1; ii >= 0; ii--) { | |||
| p = opts_arr[ii].split(':'); | |||
| if (/true/i.test(p[1])) p[1] = true; | |||
| if (/false/i.test(p[1])) p[1] = false; | |||
| if (isNumber(p[1])) p[1] = parseInt(p[1], 10); | |||
| if (p.length === 2 && p[0].length > 0) { | |||
| opts[trim(p[0])] = trim(p[1]); | |||
| } | |||
| } | |||
| return opts; | |||
| }, | |||
| delay : function (fun, delay) { | |||
| return setTimeout(fun, delay); | |||
| }, | |||
| // animated scrolling | |||
| scrollTo : function (el, to, duration) { | |||
| if (duration < 0) return; | |||
| var difference = to - $(window).scrollTop(); | |||
| var perTick = difference / duration * 10; | |||
| this.scrollToTimerCache = setTimeout(function() { | |||
| if (!isNaN(parseInt(perTick, 10))) { | |||
| window.scrollTo(0, $(window).scrollTop() + perTick); | |||
| this.scrollTo(el, to, duration - 10); | |||
| } | |||
| }.bind(this), 10); | |||
| }, | |||
| // not supported in core Zepto | |||
| scrollLeft : function (el) { | |||
| if (!el.length) return; | |||
| return ('scrollLeft' in el[0]) ? el[0].scrollLeft : el[0].pageXOffset; | |||
| }, | |||
| // test for empty object or array | |||
| empty : function (obj) { | |||
| if (obj.length && obj.length > 0) return false; | |||
| if (obj.length && obj.length === 0) return true; | |||
| for (var key in obj) { | |||
| if (hasOwnProperty.call(obj, key)) return false; | |||
| } | |||
| return true; | |||
| } | |||
| }, | |||
| fix_outer : function (lib) { | |||
| lib.outerHeight = function (el, bool) { | |||
| if (typeof Zepto === 'function') { | |||
| return el.height(); | |||
| } | |||
| if (typeof bool !== 'undefined') { | |||
| return el.outerHeight(bool); | |||
| } | |||
| return el.outerHeight(); | |||
| }; | |||
| lib.outerWidth = function (el, bool) { | |||
| if (typeof Zepto === 'function') { | |||
| return el.width(); | |||
| } | |||
| if (typeof bool !== 'undefined') { | |||
| return el.outerWidth(bool); | |||
| } | |||
| return el.outerWidth(); | |||
| }; | |||
| }, | |||
| error : function (error) { | |||
| return error.name + ' ' + error.message + '; ' + error.more; | |||
| }, | |||
| // remove all foundation events. | |||
| off: function () { | |||
| $(this.scope).off('.fndtn'); | |||
| $(window).off('.fndtn'); | |||
| return true; | |||
| }, | |||
| zj : $ | |||
| }; | |||
| $.fn.foundation = function () { | |||
| var args = Array.prototype.slice.call(arguments, 0); | |||
| return this.each(function () { | |||
| Foundation.init.apply(Foundation, [this].concat(args)); | |||
| return this; | |||
| }); | |||
| }; | |||
| }(libFuncName, this, this.document)); | |||
+ 412
- 0
js/foundation/foundation.orbit.js
View File
| @ -0,0 +1,412 @@ | |||
| ;(function ($, window, document, undefined) { | |||
| 'use strict'; | |||
| var noop = function() {}; | |||
| var Orbit = function(el, settings) { | |||
| // Don't reinitialize plugin | |||
| if (el.hasClass(settings.slides_container_class)) { | |||
| return this; | |||
| } | |||
| var self = this, | |||
| container, | |||
| slides_container = el, | |||
| number_container, | |||
| bullets_container, | |||
| timer_container, | |||
| idx = 0, | |||
| animate, | |||
| timer, | |||
| locked = false, | |||
| adjust_height_after = false; | |||
| slides_container.children().first().addClass(settings.active_slide_class); | |||
| self.update_slide_number = function(index) { | |||
| if (settings.slide_number) { | |||
| number_container.find('span:first').text(parseInt(index)+1); | |||
| number_container.find('span:last').text(slides_container.children().length); | |||
| } | |||
| if (settings.bullets) { | |||
| bullets_container.children().removeClass(settings.bullets_active_class); | |||
| $(bullets_container.children().get(index)).addClass(settings.bullets_active_class); | |||
| } | |||
| }; | |||
| self.build_markup = function() { | |||
| slides_container.wrap('<div class="'+settings.container_class+'"></div>'); | |||
| container = slides_container.parent(); | |||
| slides_container.addClass(settings.slides_container_class); | |||
| if (settings.navigation_arrows) { | |||
| container.append($('<a>').addClass(settings.prev_class).append('<span>')); | |||
| container.append($('<a>').addClass(settings.next_class).append('<span>')); | |||
| } | |||
| if (settings.timer) { | |||
| timer_container = $('<div>').addClass(settings.timer_container_class); | |||
| timer_container.append('<span>'); | |||
| timer_container.append($('<div>').addClass(settings.timer_progress_class)); | |||
| timer_container.addClass(settings.timer_paused_class); | |||
| container.append(timer_container); | |||
| } | |||
| if (settings.slide_number) { | |||
| number_container = $('<div>').addClass(settings.slide_number_class); | |||
| number_container.append('<span></span> of <span></span>'); | |||
| container.append(number_container); | |||
| } | |||
| if (settings.bullets) { | |||
| bullets_container = $('<ol>').addClass(settings.bullets_container_class); | |||
| container.append(bullets_container); | |||
| slides_container.children().each(function(idx, el) { | |||
| var bullet = $('<li>').attr('data-orbit-slide', idx); | |||
| bullets_container.append(bullet); | |||
| }); | |||
| } | |||
| if (settings.stack_on_small) { | |||
| container.addClass(settings.stack_on_small_class); | |||
| } | |||
| self.update_slide_number(0); | |||
| }; | |||
| self._goto = function(next_idx, start_timer) { | |||
| // if (locked) {return false;} | |||
| if (next_idx === idx) {return false;} | |||
| if (typeof timer === 'object') {timer.restart();} | |||
| var slides = slides_container.children(); | |||
| var dir = 'next'; | |||
| locked = true; | |||
| if (next_idx < idx) {dir = 'prev';} | |||
| if (next_idx >= slides.length) {next_idx = 0;} | |||
| else if (next_idx < 0) {next_idx = slides.length - 1;} | |||
| var current = $(slides.get(idx)); | |||
| var next = $(slides.get(next_idx)); | |||
| current.css('zIndex', 2); | |||
| next.css('zIndex', 4).addClass('active'); | |||
| slides_container.trigger('orbit:before-slide-change'); | |||
| settings.before_slide_change(); | |||
| var callback = function() { | |||
| var unlock = function() { | |||
| idx = next_idx; | |||
| locked = false; | |||
| if (start_timer === true) {timer = self.create_timer(); timer.start();} | |||
| self.update_slide_number(idx); | |||
| slides_container.trigger('orbit:after-slide-change',[{slide_number: idx, total_slides: slides.length}]); | |||
| settings.after_slide_change(idx, slides.length); | |||
| }; | |||
| if (slides_container.height() != next.height()) { | |||
| slides_container.animate({'height': next.height()}, 250, 'linear', unlock); | |||
| } else { | |||
| unlock(); | |||
| } | |||
| }; | |||
| if (slides.length === 1) {callback(); return false;} | |||
| var start_animation = function() { | |||
| if (dir === 'next') {animate.next(current, next, callback);} | |||
| if (dir === 'prev') {animate.prev(current, next, callback);} | |||
| }; | |||
| if (next.height() > slides_container.height()) { | |||
| slides_container.animate({'height': next.height()}, 250, 'linear', start_animation); | |||
| } else { | |||
| start_animation(); | |||
| } | |||
| }; | |||
| self.next = function(e) { | |||
| e.stopImmediatePropagation(); | |||
| e.preventDefault(); | |||
| self._goto(idx + 1); | |||
| }; | |||
| self.prev = function(e) { | |||
| e.stopImmediatePropagation(); | |||
| e.preventDefault(); | |||
| self._goto(idx - 1); | |||
| }; | |||
| self.link_custom = function(e) { | |||
| e.preventDefault(); | |||
| var link = $(this).attr('data-orbit-link'); | |||
| if ((typeof link === 'string') && (link = $.trim(link)) != "") { | |||
| var slide = container.find('[data-orbit-slide='+link+']'); | |||
| if (slide.index() != -1) {self._goto(slide.index());} | |||
| } | |||
| }; | |||
| self.link_bullet = function(e) { | |||
| var index = $(this).attr('data-orbit-slide'); | |||
| if ((typeof index === 'string') && (index = $.trim(index)) != "") { | |||
| self._goto(index); | |||
| } | |||
| } | |||
| self.timer_callback = function() { | |||
| self._goto(idx + 1, true); | |||
| } | |||
| self.compute_dimensions = function() { | |||
| var current = $(slides_container.children().get(idx)); | |||
| var h = current.height(); | |||
| if (!settings.variable_height) { | |||
| slides_container.children().each(function(){ | |||
| if ($(this).height() > h) { h = $(this).height(); } | |||
| }); | |||
| } | |||
| slides_container.height(h); | |||
| }; | |||
| self.create_timer = function() { | |||
| var t = new Timer( | |||
| container.find('.'+settings.timer_container_class), | |||
| settings, | |||
| self.timer_callback | |||
| ); | |||
| return t; | |||
| }; | |||
| self.stop_timer = function() { | |||
| if (typeof timer === 'object') timer.stop(); | |||
| }; | |||
| self.toggle_timer = function() { | |||
| var t = container.find('.'+settings.timer_container_class); | |||
| if (t.hasClass(settings.timer_paused_class)) { | |||
| if (typeof timer === 'undefined') {timer = self.create_timer();} | |||
| timer.start(); | |||
| } | |||
| else { | |||
| if (typeof timer === 'object') {timer.stop();} | |||
| } | |||
| }; | |||
| self.init = function() { | |||
| self.build_markup(); | |||
| if (settings.timer) {timer = self.create_timer(); timer.start();} | |||
| animate = new FadeAnimation(slides_container); | |||
| if (settings.animation === 'slide') | |||
| animate = new SlideAnimation(slides_container); | |||
| container.on('click', '.'+settings.next_class, self.next); | |||
| container.on('click', '.'+settings.prev_class, self.prev); | |||
| container.on('click', '[data-orbit-slide]', self.link_bullet); | |||
| container.on('click', self.toggle_timer); | |||
| container.on('touchstart.fndtn.orbit', function(e) { | |||
| if (!e.touches) {e = e.originalEvent;} | |||
| var data = { | |||
| start_page_x: e.touches[0].pageX, | |||
| start_page_y: e.touches[0].pageY, | |||
| start_time: (new Date()).getTime(), | |||
| delta_x: 0, | |||
| is_scrolling: undefined | |||
| }; | |||
| container.data('swipe-transition', data); | |||
| e.stopPropagation(); | |||
| }) | |||
| .on('touchmove.fndtn.orbit', function(e) { | |||
| if (!e.touches) { e = e.originalEvent; } | |||
| // Ignore pinch/zoom events | |||
| if(e.touches.length > 1 || e.scale && e.scale !== 1) return; | |||
| var data = container.data('swipe-transition'); | |||
| if (typeof data === 'undefined') {data = {};} | |||
| data.delta_x = e.touches[0].pageX - data.start_page_x; | |||
| if ( typeof data.is_scrolling === 'undefined') { | |||
| data.is_scrolling = !!( data.is_scrolling || Math.abs(data.delta_x) < Math.abs(e.touches[0].pageY - data.start_page_y) ); | |||
| } | |||
| if (!data.is_scrolling && !data.active) { | |||
| e.preventDefault(); | |||
| var direction = (data.delta_x < 0) ? (idx+1) : (idx-1); | |||
| data.active = true; | |||
| self._goto(direction); | |||
| } | |||
| }) | |||
| .on('touchend.fndtn.orbit', function(e) { | |||
| container.data('swipe-transition', {}); | |||
| e.stopPropagation(); | |||
| }) | |||
| .on('mouseenter.fndtn.orbit', function(e) { | |||
| if (settings.timer && settings.pause_on_hover) { | |||
| self.stop_timer(); | |||
| } | |||
| }) | |||
| .on('mouseleave.fndtn.orbit', function(e) { | |||
| if (settings.timer && settings.resume_on_mouseout) { | |||
| timer.start(); | |||
| } | |||
| }); | |||
| $(document).on('click', '[data-orbit-link]', self.link_custom); | |||
| $(window).on('resize', self.compute_dimensions); | |||
| $(window).on('load', self.compute_dimensions); | |||
| slides_container.trigger('orbit:ready'); | |||
| }; | |||
| self.init(); | |||
| }; | |||
| var Timer = function(el, settings, callback) { | |||
| var self = this, | |||
| duration = settings.timer_speed, | |||
| progress = el.find('.'+settings.timer_progress_class), | |||
| start, | |||
| timeout, | |||
| left = -1; | |||
| this.update_progress = function(w) { | |||
| var new_progress = progress.clone(); | |||
| new_progress.attr('style', ''); | |||
| new_progress.css('width', w+'%'); | |||
| progress.replaceWith(new_progress); | |||
| progress = new_progress; | |||
| }; | |||
| this.restart = function() { | |||
| clearTimeout(timeout); | |||
| el.addClass(settings.timer_paused_class); | |||
| left = -1; | |||
| self.update_progress(0); | |||
| }; | |||
| this.start = function() { | |||
| if (!el.hasClass(settings.timer_paused_class)) {return true;} | |||
| left = (left === -1) ? duration : left; | |||
| el.removeClass(settings.timer_paused_class); | |||
| start = new Date().getTime(); | |||
| progress.animate({'width': '100%'}, left, 'linear'); | |||
| timeout = setTimeout(function() { | |||
| self.restart(); | |||
| callback(); | |||
| }, left); | |||
| el.trigger('orbit:timer-started') | |||
| }; | |||
| this.stop = function() { | |||
| if (el.hasClass(settings.timer_paused_class)) {return true;} | |||
| clearTimeout(timeout); | |||
| el.addClass(settings.timer_paused_class); | |||
| var end = new Date().getTime(); | |||
| left = left - (end - start); | |||
| var w = 100 - ((left / duration) * 100); | |||
| self.update_progress(w); | |||
| el.trigger('orbit:timer-stopped'); | |||
| }; | |||
| }; | |||
| var SlideAnimation = function(container) { | |||
| var duration = 400; | |||
| var is_rtl = ($('html[dir=rtl]').length === 1); | |||
| var margin = is_rtl ? 'marginRight' : 'marginLeft'; | |||
| this.next = function(current, next, callback) { | |||
| next.animate({margin: '0%'}, duration, 'linear', function() { | |||
| current.css(margin, '100%'); | |||
| callback(); | |||
| }); | |||
| }; | |||
| this.prev = function(current, prev, callback) { | |||
| prev.css(margin, '-100%'); | |||
| prev.animate({margin:'0%'}, duration, 'linear', function() { | |||
| current.css(margin, '100%'); | |||
| callback(); | |||
| }); | |||
| }; | |||
| }; | |||
| var FadeAnimation = function(container) { | |||
| var duration = 250; | |||
| this.next = function(current, next, callback) { | |||
| next.css({'marginLeft':'0%', 'opacity':'0.01'}); | |||
| next.animate({'opacity':'1'}, duration, 'linear', function() { | |||
| current.css('marginLeft', '100%'); | |||
| callback(); | |||
| }); | |||
| }; | |||
| this.prev = function(current, prev, callback) { | |||
| prev.css({'marginLeft':'0%', 'opacity':'0.01'}); | |||
| prev.animate({'opacity':'1'}, duration, 'linear', function() { | |||
| current.css('marginLeft', '100%'); | |||
| callback(); | |||
| }); | |||
| }; | |||
| }; | |||
| Foundation.libs = Foundation.libs || {}; | |||
| Foundation.libs.orbit = { | |||
| name: 'orbit', | |||
| version: '4.3.1', | |||
| settings: { | |||
| animation: 'slide', | |||
| timer_speed: 10000, | |||
| pause_on_hover: true, | |||
| resume_on_mouseout: false, | |||
| animation_speed: 500, | |||
| stack_on_small: false, | |||
| navigation_arrows: true, | |||
| slide_number: true, | |||
| container_class: 'orbit-container', | |||
| stack_on_small_class: 'orbit-stack-on-small', | |||
| next_class: 'orbit-next', | |||
| prev_class: 'orbit-prev', | |||
| timer_container_class: 'orbit-timer', | |||
| timer_paused_class: 'paused', | |||
| timer_progress_class: 'orbit-progress', | |||
| slides_container_class: 'orbit-slides-container', | |||
| bullets_container_class: 'orbit-bullets', | |||
| bullets_active_class: 'active', | |||
| slide_number_class: 'orbit-slide-number', | |||
| caption_class: 'orbit-caption', | |||
| active_slide_class: 'active', | |||
| orbit_transition_class: 'orbit-transitioning', | |||
| bullets: true, | |||
| timer: true, | |||
| variable_height: false, | |||
| before_slide_change: noop, | |||
| after_slide_change: noop | |||
| }, | |||
| init: function (scope, method, options) { | |||
| var self = this; | |||
| Foundation.inherit(self, 'data_options'); | |||
| if (typeof method === 'object') { | |||
| $.extend(true, self.settings, method); | |||
| } | |||
| if ($(scope).is('[data-orbit]')) { | |||
| var $el = $(scope); | |||
| var opts = self.data_options($el); | |||
| new Orbit($el, $.extend({},self.settings, opts)); | |||
| } | |||
| $('[data-orbit]', scope).each(function(idx, el) { | |||
| var $el = $(el); | |||
| var opts = self.data_options($el); | |||
| new Orbit($el, $.extend({},self.settings, opts)); | |||
| }); | |||
| } | |||
| }; | |||
| }(Foundation.zj, this, this.document)); | |||
+ 1
- 0
js/main.js
File diff suppressed because it is too large
View File
+ 1
- 0
js/make_dropdown.min.js
View File
| @ -0,0 +1 @@ | |||
| (function(a){function f(a){i(),g(),d=a.find("ul").css("visibility","visible")}function g(){d&&(d.css("visibility","hidden"),d=null)}function h(){c=window.setTimeout(g,b)}function i(){c&&(window.clearTimeout(c),c=null)}function j(a){d&&a.has(d[0]).length?g():f(a)}var b=100,c=0,d=null,e="ontouchstart"in window||window.DocumentTouch&&document instanceof DocumentTouch;a.fn.make_dropdown=function(c){return this.each(function(){c&&c.timeout&&(b=c.timeout),a(this).click(function(b){j(a(this)),b.stopPropagation()}),e||a(this).mouseover(function(){f(a(this))}).mouseout(h)})},a(document).click(g)})(jQuery); | |||
+ 4
- 0
js/vendor/custom.modernizr.js
File diff suppressed because it is too large
View File
+ 9789
- 0
js/vendor/jquery.js
File diff suppressed because it is too large
View File
+ 2
- 0
js/vendor/zepto.js
File diff suppressed because it is too large
View File
+ 125
- 0
optimize.htm
View File
| @ -0,0 +1,125 @@ | |||
| <!DOCTYPE html> | |||
| <!--[if IE 8]> <html class="no-js lt-ie9" lang="en" > <![endif]--> | |||
| <!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]--> | |||
| <head> | |||
| <meta charset="utf-8"> | |||
| <meta lang="en-US"> | |||
| <meta name="viewport" content="width=device-width"> | |||
| <title>Marcel Haazen - Optimize Group Website</title> | |||
| <meta name="author" content="Marcel Haazen"> | |||
| <meta name="description" content="Some information about the work I did on the Optimize Group Ltd website"> | |||
| <meta name="keywords" content="Marcel Haazen, Marcel, Haazen, Resume, Certificates, Portfolio, Freelancer, Server, Server Administration, Server Setup, Web Design, YoutTube Certified, Optimize Group" /> | |||
| <link rel="stylesheet" href="css/foundation.css"> | |||
| <link rel="stylesheet" href="css/style.css"> | |||
| <script src="js/email.js"></script> | |||
| </head> | |||
| <body> | |||
| <bordercolor></bordercolor> | |||
| <div class="row"> | |||
| <div class="animated fadeInLeft"> | |||
| <div class="large-3 columns"> | |||
| <logo> | |||
| <img src="img/logo.png" alt="Marcel Haazen" /> | |||
| </logo> | |||
| </div><!-- 3 columns --> | |||
| </div><!-- animation --> | |||
| <!-- Responsive Drop Down Menu --> | |||
| <script src="js/vendor/jquery.js" type="text/javascript"></script> | |||
| <script src="js/make_dropdown.min.js" type="text/javascript"></script> | |||
| <script type="text/javascript"> | |||
| $(document).ready(function(){ $('#menubar > li').make_dropdown(); }); | |||
| </script> | |||
| <!-- Responsive Drop Down Menu --> | |||
| <div class="large-9 columns"> | |||
| <ul id="menubar"> | |||
| <li><a href="/">Home</a></li> | |||
| <li><a href="work" id="active">My work</a></li> | |||
| <li><a href="about">About</a></li> | |||
| <li><a href="contact">Contact</a></li> | |||
| </ul> | |||
| </div><!-- 9 columns --> | |||
| </div><!-- row --> | |||
| <div class="animated fadeInUp"> | |||
| <works> | |||
| <div class="row"> | |||
| <div class="large-6 columns"> | |||
| <ul class="clearing-thumbs clearing-feature" data-clearing> | |||
| <li class="clearing-featured-img"> | |||
| <img src="/img/portfolio/optimize-front.png"> | |||
| </li> | |||
| <li class="clearing-featured-img"> | |||
| <img src="/img/portfolio/optimize-youtubepage.png"> | |||
| </li> | |||
| </ul> | |||
| </div> | |||
| <div class="animated fadeInUp"> | |||
| <div class="large-6 columns"> | |||
| <h1>Optimize Group Web Site</h1> | |||
| <small>A small HTML5 Web site for a YouTube MCN</small> | |||
| </div> | |||
| </div> | |||
| <div class="row"> | |||
| <div class="large-6 columns"> | |||
| <h4>Project Details</h4> | |||
| <p>This was a web site for a YouTube Network named Optimize Group Ltd. It had to look good and have good SEO and view time. In the months it was up I saw a good retention and people going all over the site untill they click of to a external link. I also added SMO optimization so that it also looked good when shared on social media.</p> | |||
| <ul class="small-block-grid-2 large-block-grid-2"> | |||
| <li><h5>Client</h5><p>Andrew Stagg, Optimize Group Ltd</p></li> | |||
| <li><h5>Date</h5><p>2016</p></li> | |||
| </ul> | |||
| <h5>Services</h5><p>Web Design, SEO, SMO</p> | |||
| <h5>Link</h5><p><a href="https://preview.haazen.xyz/optimize">Optimize Group Site Local Copy</a></p> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </works> | |||
| </div><!-- animation --> | |||
| <div class="row"> | |||
| <div class="large-12 columns"> | |||
| <usernext> | |||
| <a href="work" class="button radius secondary">All works</a> | |||
| </usernext> | |||
| </div> | |||
| </div> | |||
| <footer> | |||
| <div class="row"> | |||
| <div class="large-12 columns"> | |||
| <foot> | |||
| Copyright © <script>document.write(new Date().getFullYear())</script> by Marcel Haazen | |||
| </foot> | |||
| </div> | |||
| </div> | |||
| </footer> | |||
| <script> | |||
| document.write('<script src=' + | |||
| ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') + | |||
| '.js><\/script>') | |||
| </script> | |||
| <script src="js/foundation.min.js"></script> | |||
| <!-- | |||
| <script src="js/foundation/foundation.js"></script> | |||
| <script src="js/foundation/foundation.dropdown.js"></script> | |||
| <script src="js/foundation/foundation.alerts.js"></script> | |||
| <script src="js/foundation/foundation.clearing.js"></script> | |||
| <script src="js/foundation/foundation.orbit.js"></script> | |||
| --> | |||
| <script> | |||
| $(document).foundation(); | |||
| </script> | |||
| <script> | |||
| window.onload = function() { | |||
| setTimeout(function(){window.scrollTo(0, 1);}, 1); | |||
| } | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 125
- 0
optimizeblog.htm
View File
| @ -0,0 +1,125 @@ | |||
| <!DOCTYPE html> | |||
| <!--[if IE 8]> <html class="no-js lt-ie9" lang="en" > <![endif]--> | |||
| <!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]--> | |||
| <head> | |||
| <meta charset="utf-8"> | |||
| <meta lang="en-US"> | |||
| <meta name="viewport" content="width=device-width"> | |||
| <title>Marcel Haazen - Optimize Group Blog</title> | |||
| <meta name="author" content="Marcel Haazen"> | |||
| <meta name="description" content="Some information about the custom blogging system I made for the Optimize Group press releases"> | |||
| <meta name="keywords" content="Marcel Haazen, Marcel, Haazen, Resume, Certificates, Portfolio, Freelancer, Server, Server Administration, Server Setup, Web Design, YoutTube Certified, Optimize Group" /> | |||
| <link rel="stylesheet" href="css/foundation.css"> | |||
| <link rel="stylesheet" href="css/style.css"> | |||
| <script src="js/email.js"></script> | |||
| </head> | |||
| <body> | |||
| <bordercolor></bordercolor> | |||
| <div class="row"> | |||
| <div class="animated fadeInLeft"> | |||
| <div class="large-3 columns"> | |||
| <logo> | |||
| <img src="img/logo.png" alt="Marcel Haazen" /> | |||
| </logo> | |||
| </div><!-- 3 columns --> | |||
| </div><!-- animation --> | |||
| <!-- Responsive Drop Down Menu --> | |||
| <script src="js/vendor/jquery.js" type="text/javascript"></script> | |||
| <script src="js/make_dropdown.min.js" type="text/javascript"></script> | |||
| <script type="text/javascript"> | |||
| $(document).ready(function(){ $('#menubar > li').make_dropdown(); }); | |||
| </script> | |||
| <!-- Responsive Drop Down Menu --> | |||
| <div class="large-9 columns"> | |||
| <ul id="menubar"> | |||
| <li><a href="/">Home</a></li> | |||
| <li><a href="work" id="active">My work</a></li> | |||
| <li><a href="about">About</a></li> | |||
| <li><a href="contact">Contact</a></li> | |||
| </ul> | |||
| </div><!-- 9 columns --> | |||
| </div><!-- row --> | |||
| <div class="animated fadeInUp"> | |||
| <works> | |||
| <div class="row"> | |||
| <div class="large-6 columns"> | |||
| <ul class="clearing-thumbs clearing-feature" data-clearing> | |||
| <li class="clearing-featured-img"> | |||
| <img src="/img/portfolio/optimizeblog-front.png"> | |||
| </li> | |||
| <li class="clearing-featured-img"> | |||
| <img src="/img/portfolio/optimizeblog-article.png"> | |||
| </li> | |||
| </ul> | |||
| </div> | |||
| <div class="animated fadeInUp"> | |||
| <div class="large-6 columns"> | |||
| <h1>Optimize Group Press Release</h1> | |||
| <small>A custom blog system used for the press releases of Optimize Group.</small> | |||
| </div> | |||
| </div> | |||
| <div class="row"> | |||
| <div class="large-6 columns"> | |||
| <h4>Project Details</h4> | |||
| <p>The goal of this project was to make a easy to use system for the press releases of Optimize Group Ltd, This system uses a simple markdown file that gets rendered this mean there are no admin areas and the only thing needed is to put a file in the posts folder and its live.</p> | |||
| <ul class="small-block-grid-2 large-block-grid-2"> | |||
| <li><h5>Client</h5><p>Andrew Stagg, Optimize Group Ltd.</p></li> | |||
| <li><h5>Date</h5><p>2016</p></li> | |||
| </ul> | |||
| <h5>Services</h5><p>Custom Blog,SEO,SMO</p> | |||
| <h5>Link</h5><p><a href="https://preview.haazen.xyz/optimizeblog">Local Copy</a></p> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </works> | |||
| </div><!-- animation --> | |||
| <div class="row"> | |||
| <div class="large-12 columns"> | |||
| <usernext> | |||
| <a href="work" class="button radius secondary">All works</a> | |||
| </usernext> | |||
| </div> | |||
| </div> | |||
| <footer> | |||
| <div class="row"> | |||
| <div class="large-12 columns"> | |||
| <foot> | |||
| Copyright © <script>document.write(new Date().getFullYear())</script> by Marcel Haazen | |||
| </foot> | |||
| </div> | |||
| </div> | |||
| </footer> | |||
| <script> | |||
| document.write('<script src=' + | |||
| ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') + | |||
| '.js><\/script>') | |||
| </script> | |||
| <script src="js/foundation.min.js"></script> | |||
| <!-- | |||
| <script src="js/foundation/foundation.js"></script> | |||
| <script src="js/foundation/foundation.dropdown.js"></script> | |||
| <script src="js/foundation/foundation.alerts.js"></script> | |||
| <script src="js/foundation/foundation.clearing.js"></script> | |||
| <script src="js/foundation/foundation.orbit.js"></script> | |||
| --> | |||
| <script> | |||
| $(document).foundation(); | |||
| </script> | |||
| <script> | |||
| window.onload = function() { | |||
| setTimeout(function(){window.scrollTo(0, 1);}, 1); | |||
| } | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 125
- 0
page.htm
View File
| @ -0,0 +1,125 @@ | |||
| <!DOCTYPE html> | |||
| <!--[if IE 8]> <html class="no-js lt-ie9" lang="en" > <![endif]--> | |||
| <!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]--> | |||
| <head> | |||
| <meta charset="utf-8"> | |||
| <meta name="viewport" content="width=device-width"> | |||
| <title>Marcel Haazen - Coming Soon</title> | |||
| <meta name="author" content="Marcel Haazen"> | |||
| <meta name="description" content="########"> | |||
| <link rel="stylesheet" href="css/foundation.css"> | |||
| <link rel="stylesheet" href="css/style.css"> | |||
| <script src="js/email.js"></script> | |||
| </head> | |||
| <body> | |||
| <bordercolor></bordercolor> | |||
| <div class="row"> | |||
| <div class="animated fadeInLeft"> | |||
| <div class="large-3 columns"> | |||
| <logo> | |||
| <img src="img/logo.png" alt="Marcel Haazen" /> | |||
| </logo> | |||
| </div><!-- 3 columns --> | |||
| </div><!-- animation --> | |||
| <!-- Responsive Drop Down Menu --> | |||
| <script src="js/vendor/jquery.js" type="text/javascript"></script> | |||
| <script src="js/make_dropdown.min.js" type="text/javascript"></script> | |||
| <script type="text/javascript"> | |||
| $(document).ready(function(){ $('#menubar > li').make_dropdown(); }); | |||
| </script> | |||
| <!-- Responsive Drop Down Menu --> | |||
| <div class="large-9 columns"> | |||
| <ul id="menubar"> | |||
| <li><a href="#" id="active">Home</a></li> | |||
| <li><a href="work">My work</a></li> | |||
| <li><a href="about">About</a></li> | |||
| <li><a href="contact">Contact</a></li> | |||
| </ul> | |||
| </div><!-- 9 columns --> | |||
| </div><!-- row --> | |||
| <div class="animated fadeInUp"> | |||
| <works> | |||
| <div class="row"> | |||
| <div class="large-6 columns"> | |||
| <ul class="clearing-thumbs clearing-feature" data-clearing> | |||
| <li class="clearing-featured-img"> | |||
| <img src="http://placehold.it/1920x1080"> | |||
| </li> | |||
| <li class="clearing-featured-img"> | |||
| <img src="http://placehold.it/1920x1080"> | |||
| </li> | |||
| </ul> | |||
| </div> | |||
| <div class="animated fadeInUp"> | |||
| <div class="large-6 columns"> | |||
| <h1>Project Name</h1> | |||
| <small>Project short description</small> | |||
| </div> | |||
| </div> | |||
| <div class="row"> | |||
| <div class="large-6 columns"> | |||
| <h4>Project Details</h4> | |||
| <p>Coming Soon</p> | |||
| <ul class="small-block-grid-2 large-block-grid-2"> | |||
| <li><h5>Client</h5><p>Name</p></li> | |||
| <li><h5>Date</h5><p>2016</p></li> | |||
| </ul> | |||
| <h4>User Experience</h4> | |||
| <p>Coming Soon</p> | |||
| <h5>Services</h5><p>Tag</p> | |||
| <h5>Link</h5><p>Link</p> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </works> | |||
| </div><!-- animation --> | |||
| <div class="row"> | |||
| <div class="large-12 columns"> | |||
| <usernext> | |||
| <a href="work" class="button radius secondary">All works</a> | |||
| </usernext> | |||
| </div> | |||
| </div> | |||
| <footer> | |||
| <div class="row"> | |||
| <div class="large-12 columns"> | |||
| <foot> | |||
| Copyright © <script>document.write(new Date().getFullYear())</script> by Marcel Haazen | |||
| </foot> | |||
| </div> | |||
| </div> | |||
| </footer> | |||
| <script> | |||
| document.write('<script src=' + | |||
| ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') + | |||
| '.js><\/script>') | |||
| </script> | |||
| <script src="js/foundation.min.js"></script> | |||
| <!-- | |||
| <script src="js/foundation/foundation.js"></script> | |||
| <script src="js/foundation/foundation.dropdown.js"></script> | |||
| <script src="js/foundation/foundation.alerts.js"></script> | |||
| <script src="js/foundation/foundation.clearing.js"></script> | |||
| <script src="js/foundation/foundation.orbit.js"></script> | |||
| --> | |||
| <script> | |||
| $(document).foundation(); | |||
| </script> | |||
| <script> | |||
| window.onload = function() { | |||
| setTimeout(function(){window.scrollTo(0, 1);}, 1); | |||
| } | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 113
- 0
purity.htm
View File
| @ -0,0 +1,113 @@ | |||
| <!DOCTYPE html> | |||
| <!--[if IE 8]> <html class="no-js lt-ie9" lang="en" > <![endif]--> | |||
| <!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]--> | |||
| <head> | |||
| <meta charset="utf-8"> | |||
| <meta name="viewport" content="width=device-width"> | |||
| <title>Marcel Haazen - Purity Network Email Server</title> | |||
| <meta name="author" content="Marcel Haazen"> | |||
| <meta name="description" content="Some Information about the work i did on the Purity Email server"> | |||
| <meta name="keywords" content="Marcel Haazen, Marcel, Haazen, Resume, Certificates, Portfolio, Freelancer, Server, Server Administration, Server Setup, Web Design, YoutTube Certified, Purity Network" /> | |||
| <link rel="stylesheet" href="css/foundation.css"> | |||
| <link rel="stylesheet" href="css/style.css"> | |||
| <script src="js/email.js"></script> | |||
| </head> | |||
| <body> | |||
| <bordercolor></bordercolor> | |||
| <div class="row"> | |||
| <div class="animated fadeInLeft"> | |||
| <div class="large-3 columns"> | |||
| <logo> | |||
| <img src="img/logo.png" alt="" /> | |||
| </logo> | |||
| </div><!-- 3 columns --> | |||
| </div><!-- animation --> | |||
| <!-- Responsive Drop Down Menu --> | |||
| <script src="js/vendor/jquery.js" type="text/javascript"></script> | |||
| <script src="js/make_dropdown.min.js" type="text/javascript"></script> | |||
| <script type="text/javascript"> | |||
| $(document).ready(function(){ $('#menubar > li').make_dropdown(); }); | |||
| </script> | |||
| <!-- Responsive Drop Down Menu --> | |||
| <div class="large-9 columns"> | |||
| <ul id="menubar"> | |||
| <li><a href="/">Home</a></li> | |||
| <li><a href="work" id="active">My work</a></li> | |||
| <li><a href="about">About</a></li> | |||
| <li><a href="contact">Contact</a></li> | |||
| </ul> | |||
| </div><!-- 9 columns --> | |||
| </div><!-- row --> | |||
| <div class="animated fadeInUp"> | |||
| <works> | |||
| <div class="row"> | |||
| <div class="large-12 columns"> | |||
| <h1>Purtiy Network Email Server</h1> | |||
| <small>A linux based email server.</small> | |||
| </div> | |||
| </div> | |||
| <div class="row"> | |||
| <div class="large-12 columns"> | |||
| <h4>Project Details</h4> | |||
| <p>Coming Soon.</p> | |||
| <ul class="small-block-grid-2 large-block-grid-2"> | |||
| <li><h5>Client</h5><p>Nick Morgan, Purity Network</p></li> | |||
| <li><h5>Date</h5><p>2016</p></li> | |||
| </ul> | |||
| <h4>User Experience</h4> | |||
| <p>Coming Soon.</p> | |||
| <h5>Services</h5><p>Server Administration, Server Setup, Email Server Setup</p> | |||
| </div> | |||
| </div> | |||
| </works> | |||
| </div><!-- animation --> | |||
| <div class="row"> | |||
| <div class="large-12 columns"> | |||
| <usernext> | |||
| <a href="work" class="button radius secondary">All works</a> | |||
| </usernext> | |||
| </div> | |||
| </div> | |||
| <footer> | |||
| <div class="row"> | |||
| <div class="large-12 columns"> | |||
| <foot> | |||
| Copyright © <script>document.write(new Date().getFullYear())</script> by Marcel Haazen | |||
| </foot> | |||
| </div> | |||
| </div> | |||
| </footer> | |||
| <script> | |||
| document.write('<script src=' + | |||
| ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') + | |||
| '.js><\/script>') | |||
| </script> | |||
| <script src="js/foundation.min.js"></script> | |||
| <!-- | |||
| <script src="js/foundation/foundation.js"></script> | |||
| <script src="js/foundation/foundation.dropdown.js"></script> | |||
| <script src="js/foundation/foundation.alerts.js"></script> | |||
| <script src="js/foundation/foundation.clearing.js"></script> | |||
| <script src="js/foundation/foundation.orbit.js"></script> | |||
| --> | |||
| <script> | |||
| $(document).foundation(); | |||
| </script> | |||
| <script> | |||
| window.onload = function() { | |||
| setTimeout(function(){window.scrollTo(0, 1);}, 1); | |||
| } | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 4
- 0
robots.txt
View File
| @ -0,0 +1,4 @@ | |||
| # www.robotstxt.org/ | |||
| # www.google.com/support/webmasters/bin/answer.py?hl=en&answer=156449 | |||
| User-agent: * | |||
+ 128
- 0
taskify.htm
View File
| @ -0,0 +1,128 @@ | |||
| <!DOCTYPE html> | |||
| <!--[if IE 8]> <html class="no-js lt-ie9" lang="en" > <![endif]--> | |||
| <!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]--> | |||
| <head> | |||
| <meta charset="utf-8"> | |||
| <meta lang="en-US"> | |||
| <meta name="viewport" content="width=device-width"> | |||
| <title>Marcel Haazen - Taskify Server</title> | |||
| <meta name="author" content="Marcel Haazen"> | |||
| <meta name="description" content="Some information about the the pervious work I did on the Taskify server"> | |||
| <meta name="keywords" content="Marcel Haazen, Marcel, Haazen, Resume, Certificates, Portfolio, Freelancer, Server, Server Administration, Server Setup, Web Design, YoutTube Certified, Taskify" /> | |||
| <link rel="stylesheet" href="css/foundation.css"> | |||
| <link rel="stylesheet" href="css/style.css"> | |||
| <script src="js/email.js"></script> | |||
| </head> | |||
| <body> | |||
| <bordercolor></bordercolor> | |||
| <div class="row"> | |||
| <div class="animated fadeInLeft"> | |||
| <div class="large-3 columns"> | |||
| <logo> | |||
| <img src="img/logo.png" alt="Marcel Haazen" /> | |||
| </logo> | |||
| </div><!-- 3 columns --> | |||
| </div><!-- animation --> | |||
| <!-- Responsive Drop Down Menu --> | |||
| <script src="js/vendor/jquery.js" type="text/javascript"></script> | |||
| <script src="js/make_dropdown.min.js" type="text/javascript"></script> | |||
| <script type="text/javascript"> | |||
| $(document).ready(function(){ $('#menubar > li').make_dropdown(); }); | |||
| </script> | |||
| <!-- Responsive Drop Down Menu --> | |||
| <div class="large-9 columns"> | |||
| <ul id="menubar"> | |||
| <li><a href="/">Home</a></li> | |||
| <li><a href="work" id="active">My work</a></li> | |||
| <li><a href="about">About</a></li> | |||
| <li><a href="contact">Contact</a></li> | |||
| </ul> | |||
| </div><!-- 9 columns --> | |||
| </div><!-- row --> | |||
| <div class="animated fadeInUp"> | |||
| <works> | |||
| <div class="row"> | |||
| <div class="large-6 columns"> | |||
| <ul class="clearing-thumbs clearing-feature" data-clearing> | |||
| <li class="clearing-featured-img"> | |||
| <img src="img/portfolio/taskify.png" alt="Login page"> | |||
| </li> | |||
| <li class="clearing-featured-img"> | |||
| <img src="img/portfolio/taskify-loggedin.png" alt="Logged in"> | |||
| </li> | |||
| </ul> | |||
| </div> | |||
| <div class="animated fadeInUp"> | |||
| <div class="large-6 columns"> | |||
| <h1>Taskify Web Server</h1> | |||
| <small>An Apache based web server for a Task Dashboard.</small> | |||
| </div> | |||
| </div> | |||
| <div class="row"> | |||
| <div class="large-6 columns"> | |||
| <h4>Project Details</h4> | |||
| <p>Coming Soon</p> | |||
| <ul class="small-block-grid-2 large-block-grid-2"> | |||
| <li><h5>Client</h5><p>Sam Parton, OZVO</p></li> | |||
| <li><h5>Date</h5><p>2016</p></li> | |||
| </ul> | |||
| <h4>User Experience</h4> | |||
| <p>Coming Soon</p> | |||
| <h5>Services</h5><p>Server Administration, Server Setup, Web Server Setup</p> | |||
| <h5>Link</h5><p><a href="https://gettaskify.com">https://gettaskify.com</a></p> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </works> | |||
| </div> | |||
| <!-- animation --> | |||
| <div class="row"> | |||
| <div class="large-12 columns"> | |||
| <usernext> | |||
| <a href="work" class="button radius secondary">All works</a> | |||
| </usernext> | |||
| </div> | |||
| </div> | |||
| <footer> | |||
| <div class="row"> | |||
| <div class="large-12 columns"> | |||
| <foot> | |||
| Copyright © <script>document.write(new Date().getFullYear())</script> by Marcel Haazen | |||
| </foot> | |||
| </div> | |||
| </div> | |||
| </footer> | |||
| <script> | |||
| document.write('<script src=' + | |||
| ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') + | |||
| '.js><\/script>') | |||
| </script> | |||
| <script src="js/foundation.min.js"></script> | |||
| <!-- | |||
| <script src="js/foundation/foundation.js"></script> | |||
| <script src="js/foundation/foundation.dropdown.js"></script> | |||
| <script src="js/foundation/foundation.alerts.js"></script> | |||
| <script src="js/foundation/foundation.clearing.js"></script> | |||
| <script src="js/foundation/foundation.orbit.js"></script> | |||
| --> | |||
| <script> | |||
| $(document).foundation(); | |||
| </script> | |||
| <script> | |||
| window.onload = function() { | |||
| setTimeout(function(){window.scrollTo(0, 1);}, 1); | |||
| } | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 98
- 0
work.htm
View File
| @ -0,0 +1,98 @@ | |||
| <!DOCTYPE html> | |||
| <!--[if IE 8]> <html class="no-js lt-ie9" lang="en" > <![endif]--> | |||
| <!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]--> | |||
| <head> | |||
| <meta charset="utf-8"> | |||
| <meta name="viewport" content="width=device-width"> | |||
| <title>Marcel Haazen - Previous Work</title> | |||
| <meta name="author" content="Marcel Haazen"> | |||
| <meta name="description" content="On here you can see all my previous work i did for other clients"> | |||
| <meta name="keywords" content="Marcel Haazen, Marcel, Haazen, Resume, Certificates, Portfolio, Freelancer, Server, Server Administration, Server Setup, Web Design, YoutTube Certified, Work" /> | |||
| <link rel="stylesheet" href="css/foundation.css"> | |||
| <link rel="stylesheet" href="css/style.css"> | |||
| <script src="js/email.js"></script> | |||
| </head> | |||
| <body> | |||
| <bordercolor></bordercolor> | |||
| <div class="row"> | |||
| <div class="animated fadeInLeft"> | |||
| <div class="large-3 columns"> | |||
| <logo> | |||
| <img src="img/logo.png" alt="Marcel Haazen" /> | |||
| </logo> | |||
| </div><!-- 3 columns --> | |||
| </div><!-- animation --> | |||
| <!-- Responsive Drop Down Menu --> | |||
| <script src="js/vendor/jquery.js" type="text/javascript"></script> | |||
| <script src="js/make_dropdown.min.js" type="text/javascript"></script> | |||
| <script type="text/javascript"> | |||
| $(document).ready(function(){ $('#menubar > li').make_dropdown(); }); | |||
| </script> | |||
| <!-- Responsive Drop Down Menu --> | |||
| <div class="large-9 columns"> | |||
| <ul id="menubar"> | |||
| <li><a href="/">Home</a></li> | |||
| <li><a href="work" id="active">My work</a></li> | |||
| <li><a href="about">About</a></li> | |||
| <li><a href="contact">Contact</a></li> | |||
| </ul> | |||
| </div><!-- 9 columns --> | |||
| </div><!-- row --> | |||
| <div class="animated fadeInUp"> | |||
| <div class="row"> | |||
| <div class="large-12 columns"> | |||
| <works> | |||
| <h1>Previous Work</h1> | |||
| <ul class="small-block-grid-2 large-block-grid-3"> | |||
| <li><a href="purity"><img alt="Purity Email Server" src="img/portfolio/email.jpg"></a></li> | |||
| <li><a href="creator"><img alt="Creator Dashboard Server" src="img/portfolio/creator.jpg"></a></li> | |||
| <li><a href="taskify"><img alt="Taskify Web Server" src="img/portfolio/taskify.jpg"></a></li> | |||
| <li><a href="equalscope"><img alt="EqualScope Web Server" src="img/portfolio/equalscope.jpg"></a></li> | |||
| <li><a href="optimize"><img alt="Optimize Group Website" src="img/portfolio/optimize.jpg"></a></li> | |||
| <li><a href="optimizeblog"><img alt="Optimize Group Blog" src="img/portfolio/optimizeblog.jpg"></a></li> | |||
| </ul> | |||
| </works> | |||
| </div> | |||
| </div> | |||
| </div><!-- animation --> | |||
| <footer> | |||
| <div class="row"> | |||
| <div class="large-12 columns"> | |||
| <foot> | |||
| Copyright © <script>document.write(new Date().getFullYear())</script> by Marcel Haazen | |||
| </foot> | |||
| </div> | |||
| </div> | |||
| </footer> | |||
| <script> | |||
| document.write('<script src=' + | |||
| ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') + | |||
| '.js><\/script>') | |||
| </script> | |||
| <script src="js/foundation.min.js"></script> | |||
| <!-- | |||
| <script src="js/foundation/foundation.js"></script> | |||
| <script src="js/foundation/foundation.dropdown.js"></script> | |||
| <script src="js/foundation/foundation.alerts.js"></script> | |||
| <script src="js/foundation/foundation.clearing.js"></script> | |||
| <script src="js/foundation/foundation.orbit.js"></script> | |||
| --> | |||
| <script> | |||
| $(document).foundation(); | |||
| </script> | |||
| <script> | |||
| window.onload = function() { | |||
| setTimeout(function(){window.scrollTo(0, 1);}, 1); | |||
| } | |||
| </script> | |||
| </body> | |||
| </html> | |||