"services"
Bootstrap 3.0.0 Snippet by vivekbisht109

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/bpainter/pen/azNZdK?depth=everything&order=popularity&page=36&q=services&show_forks=false" /> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'> </head> <body> <nav role="navigation"> <a href="#" id="logo">Logo</a> <ul> <li> <a href="#">Home</a> </li> <li> <a href="#">Services</a> </li> <li> <a href="#">Approach</a> </li> <li> <a href="#">Contact</a> </li> </ul> </nav> <section id="masthead" role="banner"> <h1> In-House Support With <br /><strong id="typing-text"></strong> </h1> <canvas id="nodes"></canvas> </section> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script>// jQuery extension for dynamic font sizes // Source: github.com/NathanRutzky/jQuery.fontFlex // Version: 1.0 (function($) { $.fn.fontFlex = function(min, max, mid) { var $this = this; $(window).resize(function() { var size = window.innerWidth / mid; if (size < min) size = min; if (size > max) size = max; $this.css('font-size', size + 'px'); }).trigger('resize'); }; })(jQuery);</script> <script>// The MIT License (MIT) // Typed.js | Copyright (c) 2014 Matt Boldt | www.mattboldt.com // Permission is hereby granted, free of charge, to any person obtaining a copy // of this software and associated documentation files (the "Software"), to deal // in the Software without restriction, including without limitation the rights // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell // copies of the Software, and to permit persons to whom the Software is // furnished to do so, subject to the following conditions: // The above copyright notice and this permission notice shall be included in // all copies or substantial portions of the Software. // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN // THE SOFTWARE. ! function($) { "use strict"; var Typed = function(el, options) { // chosen element to manipulate text this.el = $(el); // options this.options = $.extend({}, $.fn.typed.defaults, options); // attribute to type into this.isInput = this.el.is('input'); this.attr = this.options.attr; // show cursor this.showCursor = this.isInput ? false : this.options.showCursor; // text content of element this.elContent = this.attr ? this.el.attr(this.attr) : this.el.text() // html or plain text this.contentType = this.options.contentType; // typing speed this.typeSpeed = this.options.typeSpeed; // add a delay before typing starts this.startDelay = this.options.startDelay; // backspacing speed this.backSpeed = this.options.backSpeed; // amount of time to wait before backspacing this.backDelay = this.options.backDelay; // input strings of text this.strings = this.options.strings; // character number position of current string this.strPos = 0; // current array position this.arrayPos = 0; // number to stop backspacing on. // default 0, can change depending on how many chars // you want to remove at the time this.stopNum = 0; // Looping logic this.loop = this.options.loop; this.loopCount = this.options.loopCount; this.curLoop = 0; // for stopping this.stop = false; // custom cursor this.cursorChar = this.options.cursorChar; // All systems go! this.build(); }; Typed.prototype = { constructor: Typed , init: function() { // begin the loop w/ first current string (global self.string) // current string will be passed as an argument each time after this var self = this; self.timeout = setTimeout(function() { // Start typing self.typewrite(self.strings[self.arrayPos], self.strPos); }, self.startDelay); } , build: function() { // Insert cursor if (this.showCursor === true) { this.cursor = $("<span class=\"typed-cursor\">" + this.cursorChar + "</span>"); this.el.after(this.cursor); } this.init(); } // pass current string state to each function, types 1 char per call , typewrite: function(curString, curStrPos) { // exit when stopped if (this.stop === true) { return; } // varying values for setTimeout during typing // can't be global since number changes each time loop is executed var humanize = Math.round(Math.random() * (100 - 30)) + this.typeSpeed; var self = this; // ------------- optional ------------- // // backpaces a certain string faster // ------------------------------------ // // if (self.arrayPos == 1){ // self.backDelay = 50; // } // else{ self.backDelay = 500; } // contain typing function in a timeout humanize'd delay self.timeout = setTimeout(function() { // check for an escape character before a pause value // format: \^\d+ .. eg: ^1000 .. should be able to print the ^ too using ^^ // single ^ are removed from string var charPause = 0; var substr = curString.substr(curStrPos); if (substr.charAt(0) === '^') { var skip = 1; // skip atleast 1 if (/^\^\d+/.test(substr)) { substr = /\d+/.exec(substr)[0]; skip += substr.length; charPause = parseInt(substr); } // strip out the escape character and pause value so they're not printed curString = curString.substring(0, curStrPos) + curString.substring(curStrPos + skip); } if (self.contentType === 'html') { // skip over html tags while typing if (curString.substr(curStrPos).charAt(0) === '<') { var tag = ''; while (curString.substr(curStrPos).charAt(0) !== '>') { tag += curString.substr(curStrPos).charAt(0); curStrPos++; } curStrPos++; tag += '>'; } } // timeout for any pause after a character self.timeout = setTimeout(function() { if (curStrPos === curString.length) { // fires callback function self.options.onStringTyped(self.arrayPos); // is this the final string if (self.arrayPos === self.strings.length - 1) { // animation that occurs on the last typed string self.options.callback(); self.curLoop++; // quit if we wont loop back if (self.loop === false || self.curLoop === self.loopCount) return; } self.timeout = setTimeout(function() { self.backspace(curString, curStrPos); }, self.backDelay); } else { /* call before functions if applicable */ if (curStrPos === 0) self.options.preStringTyped(self.arrayPos); // start typing each new char into existing string // curString: arg, self.el.html: original text inside element var nextString = self.elContent + curString.substr(0, curStrPos + 1); if (self.attr) { self.el.attr(self.attr, nextString); } else { if (self.contentType === 'html') { self.el.html(nextString); } else { self.el.text(nextString); } } // add characters one by one curStrPos++; // loop the function self.typewrite(curString, curStrPos); } // end of character pause }, charPause); // humanized value for typing }, humanize); } , backspace: function(curString, curStrPos) { // exit when stopped if (this.stop === true) { return; } // varying values for setTimeout during typing // can't be global since number changes each time loop is executed var humanize = Math.round(Math.random() * (100 - 30)) + this.backSpeed; var self = this; self.timeout = setTimeout(function() { // ----- this part is optional ----- // // check string array position // on the first string, only delete one word // the stopNum actually represents the amount of chars to // keep in the current string. In my case it's 14. // if (self.arrayPos == 1){ // self.stopNum = 14; // } //every other time, delete the whole typed string // else{ // self.stopNum = 0; // } if (self.contentType === 'html') { // skip over html tags while backspacing if (curString.substr(curStrPos).charAt(0) === '>') { var tag = ''; while (curString.substr(curStrPos).charAt(0) !== '<') { tag -= curString.substr(curStrPos).charAt(0); curStrPos--; } curStrPos--; tag += '<'; } } // ----- continue important stuff ----- // // replace text with base text + typed characters var nextString = self.elContent + curString.substr(0, curStrPos); if (self.attr) { self.el.attr(self.attr, nextString); } else { if (self.contentType === 'html') { self.el.html(nextString); } else { self.el.text(nextString); } } // if the number (id of character in current string) is // less than the stop number, keep going if (curStrPos > self.stopNum) { // subtract characters one by one curStrPos--; // loop the function self.backspace(curString, curStrPos); } // if the stop number has been reached, increase // array position to next string else if (curStrPos <= self.stopNum) { self.arrayPos++; if (self.arrayPos === self.strings.length) { self.arrayPos = 0; self.init(); } else self.typewrite(self.strings[self.arrayPos], curStrPos); } // humanized value for typing }, humanize); } // Start & Stop currently not working // , stop: function() { // var self = this; // self.stop = true; // clearInterval(self.timeout); // } // , start: function() { // var self = this; // if(self.stop === false) // return; // this.stop = false; // this.init(); // } // Reset and rebuild the element , reset: function() { var self = this; clearInterval(self.timeout); var id = this.el.attr('id'); this.el.after('<span id="' + id + '"/>') this.el.remove(); this.cursor.remove(); // Send the callback self.options.resetCallback(); } }; $.fn.typed = function(option) { return this.each(function() { var $this = $(this), data = $this.data('typed'), options = typeof option == 'object' && option; if (!data) $this.data('typed', (data = new Typed(this, options))); if (typeof option == 'string') data[option](); }); }; $.fn.typed.defaults = { strings: ["These are the default values...", "You know what you should do?", "Use your own!", "Have a great day!"], // typing speed typeSpeed: 0, // time before typing starts startDelay: 0, // backspacing speed backSpeed: 0, // time before backspacing backDelay: 500, // loop loop: false, // false = infinite loopCount: false, // show cursor showCursor: true, // character for cursor cursorChar: "|", // attribute to type (null == text) attr: null, // either html or text contentType: 'html', // call when done callback function callback: function() {}, // starting callback function before each string preStringTyped: function() {}, //callback for every typed string onStringTyped: function() {}, // callback for reset resetCallback: function() {} }; }(window.jQuery);</script> <script >$(function() { // H1 only // $('h1').fontFlex(36, 48, 120); $("#typing-text").typed({ strings: [ "Project Services.", "Information Security.", "Systems Development.", "Consulting Services.", "Network & Infrastructure.", "Support & Operations.", "Architecture & IT Strategy.", "User Experience Design." ], typeSpeed: 100, backDelay: 2000, // loop loop: true, }); }); var canvas = document.getElementById('nodes') , context = canvas.getContext('2d') , pool = [] , maxPoolSize = 500 , distanceThreshold = 90 , lastTimestamp = 0 , nodeConnections = [] ; canvas.width = window.innerWidth; canvas.height = 500; maxPoolSize = ( canvas.width * canvas.height ) / 6000 function Boid(x,y) { this.id = Boid.lastId++; this.position = [x, y]; this.size = 10; this.color = "red"; this.velocity = [25-Math.random()*30, 25-Math.random()*80]; }; Boid.lastId = 0; Boid.prototype = { update: function(dt) { for (var i = 0; i < maxPoolSize; i++) { var boid = pool[i] , distance = this.distanceTo(boid) ; if(distance < distanceThreshold) { cohesion = [] } }; this.position[0] += this.velocity[0] * dt; this.position[1] += this.velocity[1] * dt; if(this.position[0] > canvas.width) { this.position[0] = 0; // this.velocity[0] *= -1; } if(this.position[1] > canvas.height) { this.position[1] = 0; // this.velocity[1] *= -1; } if(this.position[0] < 0) { this.position[0] = canvas.width; // this.velocity[0] *= -1; } if(this.position[1] < 0) { this.position[1] = canvas.height; // this.velocity[1] *= -1; }; }, distanceTo: function(boid) { var diff = vDiff(this.position, boid.position); return Math.abs(vLength(diff)); }, isConnectedTo: function(boid) { return nodeConnections[boid.id] == this.id || nodeConnections[this.id] == boid.id; }, connectTo: function(boid) { nodeConnections[this.id] = boid.id; nodeConnections[boid.id] = this.id; }, draw: function() { var pos = [round(this.position[0]), round(this.position[1])] , connections = 0; context.globalAlpha = 0.1; for (var i = 0; i < maxPoolSize; i++) { var boid = pool[i] , distance = this.distanceTo(boid) , opacity = 1-( distance/distanceThreshold ) ; if(distance <= distanceThreshold) { connections++; if(!this.isConnectedTo( boid )){ this.connectTo(boid); context.beginPath(); context.moveTo( pos[0], pos[1]); context.lineTo(round( boid.position[0] ), round( boid.position[1] )); context.stroke(); } } }; context.globalAlpha = 0.5; context.beginPath(); context.arc( pos[0], pos[1], this.size*( connections/5 ), 0, Math.PI*2 ); context.fill(); } }; function vDiff(a, b) { return [ a[0] - b[0], a[1] - b[1] ]; } function vLength(a) { return Math.sqrt( ( a[0]*a[0] ) + (a[1]*a[1]) ); } function round(i) { return 0.5 + i | 0 } function draw(timestamp) { var dt = ( timestamp - (lastTimestamp || timestamp) ) / 1000; lastTimestamp = timestamp; context.clearRect(0,0,canvas.width, canvas.height); for (var i = 0; i < maxPoolSize; i++) { var boid = pool[i]; boid.update(dt); boid.draw(); } window.requestAnimFrame(draw); } window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(/* function */ callback, /* DOMElement */ element){ window.setTimeout(callback, 1000 / 60); }; })(); for (var i = 0; i < maxPoolSize; i++) { pool.push( new Boid(Math.random()*canvas.width, Math.random()*canvas.height) ); } document.body.appendChild(canvas); window.requestAnimFrame(draw); //# sourceURL=pen.js </script> </body></html>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700); @-webkit-keyframes gradientAnimation { 0% { background-position: 50% 0%; } 50% { background-position: 50% 100%; } 100% { background-position: 50% 0%; } } @-moz-keyframes AnimationName { 0% { background-position: 50% 0%; } 50% { background-position: 50% 100%; } 100% { background-position: 50% 0%; } } @keyframes AnimationName { 0% { background-position: 50% 0%; } 50% { background-position: 50% 100%; } 100% { background-position: 50% 0%; } } html { font: 100% Open Sans; } .typed-cursor { opacity: 1; -webkit-animation: blink 0.7s infinite; -moz-animation: blink 0.7s infinite; animation: blink 0.7s infinite; } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } nav { padding: 24px 24px; position: absolute; top: 0; left: 0; right: 0; z-index: 10; } nav a { border: 2px solid transparent; color: #fff; padding: 12px 24px; text-decoration: none; text-transform: uppercase; } nav a:hover { border-color: #fff; } nav ul { float: right; } nav li { display: inline-block; margin-left: 6px; } #logo { display: block; float: left; padding: 12px 24px; } #masthead { background-color: #4F8CC1; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzNiNzM4YiIvPjxzdG9wIG9mZnNldD0iMTYuNjY2NjclIiBzdG9wLWNvbG9yPSIjNTc5ZmM1Ii8+PHN0b3Agb2Zmc2V0PSIzMy4zMzMzMyUiIHN0b3AtY29sb3I9IiNjMDRhMzQiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2UxNzA1YiIvPjxzdG9wIG9mZnNldD0iNjYuNjY2NjclIiBzdG9wLWNvbG9yPSIjMjA0ZTQwIi8+PHN0b3Agb2Zmc2V0PSI4My4zMzMzMyUiIHN0b3AtY29sb3I9IiM1NzljODciLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzYjczOGEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #3b738b), color-stop(16.66667%, #579fc5), color-stop(33.33333%, #c04a34), color-stop(50%, #e1705b), color-stop(66.66667%, #204e40), color-stop(83.33333%, #579c87), color-stop(100%, #3b738a)); background: -moz-linear-gradient(#3b738b, #579fc5, #c04a34, #e1705b, #204e40, #579c87, #3b738a); background: -webkit-linear-gradient(#3b738b, #579fc5, #c04a34, #e1705b, #204e40, #579c87, #3b738a); background: linear-gradient(#3b738b, #579fc5, #c04a34, #e1705b, #204e40, #579c87, #3b738a); background-size: 1400% 1400%; -moz-animation: gradientAnimation 240s ease infinite; -webkit-animation: gradientAnimation 240s ease infinite; animation: gradientAnimation 240s ease infinite; min-height: 500px; position: relative; overflow: hidden; } #masthead h1 { color: #fff; line-height: 1; margin: 0 auto; padding: 0; font-size: 50px; font-weight: 100; position: relative; top: 180px; max-width: 90%; z-index: 100; word-spacing: 0.3em; text-transform: uppercase; text-align: center; } #masthead strong, #masthead span { font-size: 72px; } #nodes { opacity: .4; position: absolute; overflow: hidden; top: 0; left: 0; right: 0; bottom: 0; width: 100%; }

Related: See More


Questions / Comments: