diff --git a/css/hexagons.min.css b/css/hexagons.min.css new file mode 100644 index 0000000..32ea05c --- /dev/null +++ b/css/hexagons.min.css @@ -0,0 +1,12 @@ +/* ---------------------------------------------------------------------- +* Product Name: CSS3 Hexagon Buttons +* Product URI: http://ollopage.com/html/hex-btn/ +* Author: ollopage +* Author URI: http://ollopage.com/ +* Description: CSS3 Hexagon Buttons created with pure css3 by olloPage +* Version: 1.0.1 +* License: GNU General Public License v2 or later +* License URI: http://www.gnu.org/licenses/gpl-2.0.html +* Tags: CSS3 Hexagon Buttons, social buttons, buttons, ollopage +* ---------------------------------------------------------------------- */ +.hb{display:inline-block;position:relative;text-align:center;z-index:0}.hb:after,.hb:before{position:absolute;content:"";left:-1px;top:0;z-index:-1}.hb:before{-webkit-transform:rotate(60deg);-moz-transform:rotate(60deg);-ms-transform:rotate(60deg);-o-transform:rotate(60deg);transform:rotate(60deg)}.hb:after{-webkit-transform:rotate(-60deg);-moz-transform:rotate(-60deg);-ms-transform:rotate(-60deg);-o-transform:rotate(-60deg);transform:rotate(-60deg)}.hb i{z-index:9;transition:all .25s ease}.hb,.hb i,.hb:after,.hb:before{-webkit-transition:all .25s ease;-moz-transition:all .25s ease;-ms-transition:all .25s ease;-o-transition:all .25s ease}.hb,.hb:after,.hb:before{box-sizing:border-box;transition:all .25s ease;background-color:#fff;border-left:1px solid #fff;border-right:1px solid #fff;color:#003871}.hb-lg{line-height:150px;font-size:150px;margin:74px 0}.hb-lg,.hb-lg:after,.hb-lg:before{height:148px;width:256px}.hb-md{line-height:74px;font-size:74px;margin:37px 0}.hb-md,.hb-md:after,.hb-md:before{height:74px;width:128px}.hb-sm{line-height:37px;font-size:37px;margin:18.5px 0}.hb-sm,.hb-sm:after,.hb-sm:before{height:37px;width:64px}.hb-xs{line-height:18.5px;font-size:18.5px;margin:9.5px 0}.hb-xs,.hb-xs:after,.hb-xs:before{height:18.5px;width:32px}.hb-lg-margin,.hb-md-margin,.hb-sm-margin,.hb-xs-margin{margin:15px;display:inline-block;overflow:hidden}.hb-lg-margin{height:296px;width:256px}.hb-md-margin{height:148px;width:128px}.hb-sm-margin{height:74px;width:64px}.hb-xs-margin{height:38px;width:32px}.spin,.spin-icon i{-webkit-transition:-webkid-transform .25s ease;-moz-transition:-moz-transform .25s ease;-ms-transition:-ms-transform .25s ease;-o-transition:-o-transform .25s ease;transition:transform .25s ease}.spin-icon:hover i,.spin:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}.hb:hover,.hb:hover:after,.hb:hover:before{background:0 0;border-left:1px solid #003871;border-right:1px solid #003871;color:#003871}.hb-custom,.hb-custom:after,.hb-custom:before{background:#f39c12!important;color:#fff!important;border-left:1px solid #f39c12!important;border-right:1px solid #f39c12!important}.hb-custom:hover,.hb-custom:hover:after,.hb-custom:hover:before{background:#f1c40f!important;border-left:1px solid #f1c40f!important;border-right:1px solid #f1c40f!important;color:#000!important}.hb-facebook,.hb-facebook:after,.hb-facebook:before{background:#3B5998;border-color:#3B5998;color:#fff}.hb-facebook-inv,.hb-facebook-inv:after,.hb-facebook-inv:before,.hb-facebook:hover,.hb-facebook:hover:after,.hb-facebook:hover:before{border-color:#3B5998;color:#3B5998;background:0 0}.hb-facebook-inv:hover,.hb-facebook-inv:hover:after,.hb-facebook-inv:hover:before{background:#3B5998;border-color:#3B5998;color:#fff}.hb-twitter,.hb-twitter:after,.hb-twitter:before{background:#55ACEE;border-color:#55ACEE;color:#fff}.hb-twitter-inv,.hb-twitter-inv:after,.hb-twitter-inv:before,.hb-twitter:hover,.hb-twitter:hover:after,.hb-twitter:hover:before{background:0 0;border-color:#55ACEE;color:#55ACEE}.hb-twitter-inv:hover,.hb-twitter-inv:hover:after,.hb-twitter-inv:hover:before{background:#55ACEE;border-color:#55ACEE;color:#fff}.hb-google-plus,.hb-google-plus:after,.hb-google-plus:before{background:#db514f;border-color:#db514f;color:#fff}.hb-google-plus-inv,.hb-google-plus-inv:after,.hb-google-plus-inv:before,.hb-google-plus:hover,.hb-google-plus:hover:after,.hb-google-plus:hover:before{background:0 0;border-color:#db514f;color:#db514f}.hb-google-plus-inv:hover,.hb-google-plus-inv:hover:after,.hb-google-plus-inv:hover:before{background:#db514f;border-color:#db514f;color:#fff}.hb-youtube,.hb-youtube:after,.hb-youtube:before{background:#cc181e;border-color:#cc181e;color:#fff}.hb-youtube-inv,.hb-youtube-inv:after,.hb-youtube-inv:before,.hb-youtube:hover,.hb-youtube:hover:after,.hb-youtube:hover:before{background:0 0;border-color:#cc181e;color:#cc181e}.hb-youtube-inv:hover,.hb-youtube-inv:hover:after,.hb-youtube-inv:hover:before{background:#cc181e;border-color:#cc181e;color:#fff}.hb-linkedin,.hb-linkedin:after,.hb-linkedin:before{background:#0077b5;border-color:#0077b5;color:#fff}.hb-linkedin-inv,.hb-linkedin-inv:after,.hb-linkedin-inv:before,.hb-linkedin:hover,.hb-linkedin:hover:after,.hb-linkedin:hover:before{background:0 0;border-color:#0077b5;color:#0077b5}.hb-linkedin-inv:hover,.hb-linkedin-inv:hover:after,.hb-linkedin-inv:hover:before{background:#0077b5;border-color:#0077b5;color:#fff}.hb-tumblr,.hb-tumblr:after,.hb-tumblr:before{background:#2c4762;border-color:#2c4762;color:#fff}.hb-tumblr-inv,.hb-tumblr-inv:after,.hb-tumblr-inv:before,.hb-tumblr:hover,.hb-tumblr:hover:after,.hb-tumblr:hover:before{background:0 0;border-color:#2c4762;color:#2c4762}.hb-tumblr-inv:hover,.hb-tumblr-inv:hover:after,.hb-tumblr-inv:hover:before{background:#2c4762;border-color:#2c4762;color:#fff}.hb-rss,.hb-rss:after,.hb-rss:before{background:#da5700;border-color:#da5700;color:#fff}.hb-rss-inv,.hb-rss-inv:after,.hb-rss-inv:before,.hb-rss:hover,.hb-rss:hover:after,.hb-rss:hover:before{background:0 0;border-color:#da5700;color:#da5700}.hb-rss-inv:hover,.hb-rss-inv:hover:after,.hb-rss-inv:hover:before{background:#da5700;border-color:#da5700;color:#fff}.hb-pinterest,.hb-pinterest:after,.hb-pinterest:before{background:#da232a;border-color:#da232a;color:#fff}.hb-pinterest-inv,.hb-pinterest-inv:after,.hb-pinterest-inv:before,.hb-pinterest:hover,.hb-pinterest:hover:after,.hb-pinterest:hover:before{background:0 0;border-color:#da232a;color:#da232a}.hb-pinterest-inv:hover,.hb-pinterest-inv:hover:after,.hb-pinterest-inv:hover:before{background:#da232a;border-color:#da232a;color:#fff}.hb-vimeo,.hb-vimeo:after,.hb-vimeo:before{background:#20b9eb;border-color:#20b9eb;color:#fff}.hb-vimeo-inv,.hb-vimeo-inv:after,.hb-vimeo-inv:before,.hb-vimeo:hover,.hb-vimeo:hover:after,.hb-vimeo:hover:before{background:0 0;border-color:#20b9eb;color:#20b9eb}.hb-vimeo-inv:hover,.hb-vimeo-inv:hover:after,.hb-vimeo-inv:hover:before{background:#20b9eb;border-color:#20b9eb;color:#fff}.hb-github,.hb-github:after,.hb-github:before{background:#373a3c;border-color:#373a3c;color:#fff}.hb-github-inv,.hb-github-inv:after,.hb-github-inv:before,.hb-github:hover,.hb-github:hover:after,.hb-github:hover:before{background:0 0;border-color:#373a3c;color:#373a3c}.hb-github-inv:hover,.hb-github-inv:hover:after,.hb-github-inv:hover:before{background:#373a3c;border-color:#373a3c;color:#fff}.hb-flickr,.hb-flickr:after,.hb-flickr:before{background:#ff1981;border-color:#ff1981;color:#fff}.hb-flickr-inv,.hb-flickr-inv:after,.hb-flickr-inv:before,.hb-flickr:hover,.hb-flickr:hover:after,.hb-flickr:hover:before{background:0 0;border-color:#ff1981;color:#ff1981}.hb-flickr-inv:hover,.hb-flickr-inv:hover:after,.hb-flickr-inv:hover:before{background:#ff1981;border-color:#ff1981;color:#fff}.hb-dropbox,.hb-dropbox:after,.hb-dropbox:before{background:#007ee5;border-color:#007ee5;color:#fff}.hb-dropbox-inv,.hb-dropbox-inv:after,.hb-dropbox-inv:before,.hb-dropbox:hover,.hb-dropbox:hover:after,.hb-dropbox:hover:before{background:0 0;border-color:#007ee5;color:#007ee5}.hb-dropbox-inv:hover,.hb-dropbox-inv:hover:after,.hb-dropbox-inv:hover:before{background:#007ee5;border-color:#007ee5;color:#fff}.hb-xing,.hb-xing:after,.hb-xing:before{background:#006467;border-color:#006467;color:#fff}.hb-xing-inv,.hb-xing-inv:after,.hb-xing-inv:before,.hb-xing:hover,.hb-xing:hover:after,.hb-xing:hover:before{background:0 0;border-color:#006467;color:#006467}.hb-xing-inv:hover,.hb-xing-inv:hover:after,.hb-xing-inv:hover:before{background:#006467;border-color:#006467;color:#fff}.hb-skype,.hb-skype:after,.hb-skype:before{background:#00aceb;border-color:#00aceb;color:#fff}.hb-skype-inv,.hb-skype-inv:after,.hb-skype-inv:before,.hb-skype:hover,.hb-skype:hover:after,.hb-skype:hover:before{background:0 0;border-color:#00aceb;color:#00aceb}.hb-skype-inv:hover,.hb-skype-inv:hover:after,.hb-skype-inv:hover:before{background:#00aceb;border-color:#00aceb;color:#fff}.hb-dribbble,.hb-dribbble:after,.hb-dribbble:before{background:#ea4c89;border-color:#ea4c89;color:#fff}.hb-dribbble-inv,.hb-dribbble-inv:after,.hb-dribbble-inv:before,.hb-dribbble:hover,.hb-dribbble:hover:after,.hb-dribbble:hover:before{background:0 0;border-color:#ea4c89;color:#ea4c89}.hb-dribbble-inv:hover,.hb-dribbble-inv:hover:after,.hb-dribbble-inv:hover:before{background:#ea4c89;border-color:#ea4c89;color:#fff}.hb-tencent-weibo,.hb-tencent-weibo:after,.hb-tencent-weibo:before{background:#20B8E5;border-color:#20B8E5;color:#fff}.hb-tencent-weibo-inv,.hb-tencent-weibo-inv:after,.hb-tencent-weibo-inv:before,.hb-tencent-weibo:hover,.hb-tencent-weibo:hover:after,.hb-tencent-weibo:hover:before{background:0 0;border-color:#20B8E5;color:#20B8E5}.hb-tencent-weibo-inv:hover,.hb-tencent-weibo-inv:hover:after,.hb-tencent-weibo-inv:hover:before{background:#20B8E5;border-color:#20B8E5;color:#fff}.hb-instragram,.hb-instragram:after,.hb-instragram:before{background:#125688;border-color:#125688;color:#fff}.hb-instragram-inv,.hb-instragram-inv:after,.hb-instragram-inv:before,.hb-instragram:hover,.hb-instragram:hover:after,.hb-instragram:hover:before{background:0 0;border-color:#125688;color:#125688}.hb-instragram-inv:hover,.hb-instragram-inv:hover:after,.hb-instragram-inv:hover:before{background:#125688;border-color:#125688;color:#fff} diff --git a/css/style.css b/css/style.css index a8dda37..92357b5 100644 --- a/css/style.css +++ b/css/style.css @@ -181,9 +181,9 @@ h1, h2, h3, h4, h5, h6 { # Header --------------------------------------------------------------*/ #header { - background: #111; - padding: 20px 0; - height: 90px; + background: black; + padding: 5px 0; + height: 60px; } #header #logo { @@ -224,7 +224,7 @@ h1, h2, h3, h4, h5, h6 { } .is-sticky #header { - background: rgba(0, 0, 0, 0.85); + background: black; } /*-------------------------------------------------------------- @@ -457,7 +457,7 @@ body.mobile-nav-active #mobile-nav-toggle { --------------------------------*/ .section-title { font-size: 32px; - color: #111; + color: white; text-transform: uppercase; text-align: center; font-weight: 700; @@ -479,7 +479,7 @@ body.mobile-nav-active #mobile-nav-toggle { /* Get Started Section --------------------------------*/ #about { - background: #fff; + background-color: #111; padding: 80px 0; } @@ -505,12 +505,12 @@ body.mobile-nav-active #mobile-nav-toggle { margin-bottom: 0; } -/* Services Section +/* Network Section --------------------------------*/ #network { - background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url("../img/circuit.jpg") fixed center center; + background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../img/circuit.jpg") fixed center center; background-size: cover; - padding: 80px 0 60px 0; + padding: 60px 0 40px 0; } #network .service-item { @@ -785,72 +785,9 @@ body.mobile-nav-active #mobile-nav-toggle { /* Contact Section --------------------------------*/ #contact { - background: #f7f7f7; - padding: 80px 0; -} - -#contact .info { - color: #333333; -} - -#contact .info i { - font-size: 32px; - color: #03C4EB; - float: left; -} - -#contact .info p { - padding: 0 0 10px 50px; - line-height: 24px; -} - -#contact .form #sendmessage { - color: #03C4EB; - border: 1px solid #03C4EB; - display: none; + background: #111; + padding: 20px 0; text-align: center; - padding: 15px; - font-weight: 600; - margin-bottom: 15px; -} - -#contact .form #errormessage { - color: red; - display: none; - border: 1px solid red; - text-align: center; - padding: 15px; - font-weight: 600; - margin-bottom: 15px; -} - -#contact .form #sendmessage.show, #contact .form #errormessage.show, #contact .form .show { - display: block; -} - -#contact .form .validation { - color: red; - display: none; - margin: 0 0 20px; - font-weight: 400; - font-size: 13px; -} - -#contact .form input, #contact .form textarea { - border-radius: 0; - box-shadow: none; -} - -#contact .form button[type="submit"] { - background: #03C4EB; - border: 0; - padding: 10px 24px; - color: #fff; - transition: 0.4s; -} - -#contact .form button[type="submit"]:hover { - background: #25d8fc; } /*-------------------------------------------------------------- diff --git a/index.html b/index.html index 8742658..55b8ae8 100644 --- a/index.html +++ b/index.html @@ -37,18 +37,20 @@ + - - - - - - - - - + + + + + + + + + + @@ -130,6 +132,34 @@ +
+
+
+
+

Contact Me

+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
+
+
+
diff --git a/js/hexagons.min.js b/js/hexagons.min.js new file mode 100644 index 0000000..7dcf211 --- /dev/null +++ b/js/hexagons.min.js @@ -0,0 +1 @@ +jQuery(function(){jQuery(".hb-lg").parent().addClass("hb-lg-margin"),jQuery(".hb-md").parent().addClass("hb-md-margin"),jQuery(".hb-sm").parent().addClass("hb-sm-margin"),jQuery(".hb-xs").parent().addClass("hb-xs-margin")}),jQuery(function(){jQuery(".hb .fa-facebook,.hb .fa-facebook-square").parent().addClass("hb-facebook"),jQuery(".hb.inv .fa-facebook,.hb.inv .fa-facebook-square").parent().addClass("hb-facebook-inv").removeClass("hb-facebook"),jQuery(".hb .fa-twitter,.hb .fa-twitter-square").parent().addClass("hb-twitter"),jQuery(".hb.inv .fa-twitter,.hb.inv .fa-twitter-square").parent().addClass("hb-twitter-inv").removeClass("hb-twitter"),jQuery(".hb .fa-google-plus,.hb .fa-google-plus-square").parent().addClass("hb-google-plus"),jQuery(".hb.inv .fa-google-plus,.hb.inv .fa-google-plus-square").parent().addClass("hb-google-plus-inv").removeClass("hb-google-plus"),jQuery(".hb .fa-youtube,.hb .fa-youtube-square, .hb .fa-youtube-play").parent().addClass("hb-youtube"),jQuery(".hb.inv .fa-youtube,.hb.inv .fa-youtube-square, .hb.inv .fa-youtube-play").parent().addClass("hb-youtube-inv").removeClass("hb-youtube"),jQuery(".hb .fa-linkedin,.hb .fa-linkedin-square").parent().addClass("hb-linkedin"),jQuery(".hb.inv .fa-linkedin,.hb.inv .fa-linkedin-square").parent().addClass("hb-linkedin-inv").removeClass("hb-linkedin"),jQuery(".hb .fa-tumblr,.hb .fa-tumblr-square").parent().addClass("hb-tumblr"),jQuery(".hb.inv .fa-tumblr,.hb.inv .fa-tumblr-square").parent().addClass("hb-tumblr-inv").removeClass("hb-tumblr"),jQuery(".hb .fa-rss,.hb .fa-rss-square").parent().addClass("hb-rss"),jQuery(".hb.inv .fa-rss,.hb.inv .fa-rss-square").parent().addClass("hb-rss-inv").removeClass("hb-rss"),jQuery(".hb .fa-pinterest,.hb .fa-pinterest-square").parent().addClass("hb-pinterest"),jQuery(".hb.inv .fa-pinterest,.hb.inv .fa-pinterest-square").parent().addClass("hb-pinterest-inv").removeClass("hb-pinterest"),jQuery(".hb .fa-vimeo-square").parent().addClass("hb-vimeo"),jQuery(".hb.inv .fa-vimeo-square").parent().addClass("hb-vimeo-inv").removeClass("hb-vimeo"),jQuery(".hb .fa-github,.hb .fa-github-square, .hb .fa-github-alt").parent().addClass("hb-github"),jQuery(".hb.inv .fa-github,.hb.inv .fa-github-square, .hb.inv .fa-github-alt").parent().addClass("hb-github-inv").removeClass("hb-github"),jQuery(".hb .fa-flickr").parent().addClass("hb-flickr"),jQuery(".hb.inv .fa-flickr").parent().addClass("hb-flickr-inv").removeClass("hb-flickr"),jQuery(".hb .fa-dropbox").parent().addClass("hb-dropbox"),jQuery(".hb.inv .fa-dropbox").parent().addClass("hb-dropbox-inv").removeClass("hb-dropbox"),jQuery(".hb .fa-xing, .hb .fa-xing-square").parent().addClass("hb-xing"),jQuery(".hb.inv .fa-xing, .hb.inv .fa-xing-square").parent().addClass("hb-xing-inv").removeClass("hb-xing"),jQuery(".hb .fa-skype").parent().addClass("hb-skype"),jQuery(".hb.inv .fa-skype").parent().addClass("hb-skype-inv").removeClass("hb-skype"),jQuery(".hb .fa-dribbble").parent().addClass("hb-dribbble"),jQuery(".hb.inv .fa-dribbble").parent().addClass("hb-dribbble-inv").removeClass("hb-dribbble"),jQuery(".hb .fa-tencent-weibo").parent().addClass("hb-tencent-weibo"),jQuery(".hb.inv .fa-tencent-weibo").parent().addClass("hb-tencent-weibo-inv").removeClass("hb-tencent-weibo"),jQuery(".hb .fa-instragram").parent().addClass("hb-instragram"),jQuery(".hb.inv .fa-instragram").parent().addClass("hb-instragram-inv").removeClass("hb-instragram")}); \ No newline at end of file