enpaul
/
enpaul.net
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Updated page styling and layout, done save for content and final tweaks

This commit is contained in:
Ethan N. Paul 2018-02-03 03:27:26 -05:00
parent bad02dcad7
commit 7121239bee
3 changed files with 106 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
css/style.css
View File

@ -8,7 +8,7 @@
# General
--------------------------------------------------------------*/
body {
background: #fff;
background: #000;
color: #999;
font-family: "Open Sans", sans-serif;
}
@ -45,7 +45,7 @@ h1, h2, h3, h4, h5, h6 {
width: 100%;
height: 100%;
overflow: visible;
background: #fff url("../img/preloader.svg") no-repeat center center;
background: #000 url("../img/preloader.svg") no-repeat center center;
}
/* Back to top button */
@ -98,7 +98,7 @@ h1, h2, h3, h4, h5, h6 {
max-width: 100%;
}
#top .hero-container {
#top .top-container {
background: rgba(0, 0, 0, 0.3);
display: table-cell;
margin: 0;
@ -182,8 +182,8 @@ h1, h2, h3, h4, h5, h6 {
--------------------------------------------------------------*/
#header {
background: black;
padding: 5px 0;
height: 60px;
padding: 15px 0;
height: 80px;
}
#header #logo {
@ -497,6 +497,12 @@ body.mobile-nav-active #mobile-nav-toggle {
margin-bottom: 0;
}
#about .about-portrait {
display: block;
margin: auto;
max-height: 30rem;
}
/* Network Section
--------------------------------*/
#network {
@ -511,15 +517,15 @@ body.mobile-nav-active #mobile-nav-toggle {
#network .service-icon {
float: left;
background: transparent;
background-color: #fff;
padding: 16px;
border-radius: 50%;
transition: 0.5s;
border: 1px solid white;
border: 1px solid black;
}
#network .service-icon i {
color: #fff;
color: #000;
font-size: 24px;
}
@ -821,3 +827,60 @@ body.mobile-nav-active #mobile-nav-toggle {
color: white;
background-color: #1a82d8;
}
/*--------------------------------------------------------------
# Custom hexagon buttons
--------------------------------------------------------------*/
.hb-instagram, .hb-instagram:after, .hb-instagram:before {
background:#8a3ab9;
border-color:#8a3ab9;
color:#fff
}
.hb-instagram-inv, .hb-instagram-inv:after, .hb-instagram-inv:before, .hb-instagram:hover, .hb-instagram:hover:after, .hb-instagram:hover:before {
background:0 0;
border-color:#8a3ab9;
color:#8a3ab9
}
.hb-instagram-inv:hover, .hb-instagram-inv:hover:after, .hb-instagram-inv:hover:before {
background:#8a3ab9;
border-color:#8a3ab9;
color:#fff;
}
.hb-email, .hb-email:after, .hb-email:before {
background:#0c514e;
border-color:#0c514e;
color:#fff;
}
.hb-email-inv, .hb-email-inv:after, .hb-email-inv:before, .hb-email:hover, .hb-email:hover:after, .hb-email:hover:before {
background:0 0;
border-color:#0c514e;
color:#0c514e;
}
.hb-email-inv:hover, .hb-email-inv:hover:after, .hb-email-inv:hover:before {
background:#0c514e;
border-color:#0c514e;
color:#fff
}
.hb-resume, .hb-resume:after, .hb-resume:before {
background:#500b25;
border-color:#500b25;
color:#fff;
}
.hb-resume-inv, .hb-resume-inv:after, .hb-resume-inv:before, .hb-resume:hover, .hb-resume:hover:after, .hb-resume:hover:before {
background:0 0;
border-color:#500b25;
color:#500b25;
}
.hb-resume-inv:hover, .hb-resume-inv:hover:after, .hb-resume-inv:hover:before {
background:#500b25;
border-color:#500b25;
color:#fff;
}

47
index.html
View File

@ -28,7 +28,7 @@
<!-- Page title and favicon definition -->
<title>E.N. Paul</title>
<link rel="shortcut icon" href="img\e-b.png">
<link rel="shortcut icon" href="img/e-b.png">
<!-- Google Fonts loader -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i|Raleway:300,400,500,700,800" rel="stylesheet">
@ -49,7 +49,7 @@
<script type="text/javascript" src="js/wow.min.js"></script>
<script type="text/javascript" src="js/sticky.js"></script>
<script type="text/javascript" src="js/easing.min.js"></script>
<script type="text/javascript" src="js/hexagons.min.js"></script>
<!--<script type="text/javascript" src="js/hexagons.min.js"></script>-->
<script type="text/javascript" src="js/custom.js"></script>
</head>
@ -58,14 +58,14 @@
<div id="preloader"></div>
<section id="top">
<div class="hero-container">
<div class="top-container">
<div class="wow fadeIn">
<div class="hero-logo">
<img class="" src="img/e-w.png" alt="E. N. Paul">
</div>
<h1>Ethan N. Paul</h1>
<h2>I am an engineering <span class="rotating">student, tinkerer, programmer, designer</span></h2>
<h2>Engineer, programmer, and <span class="rotating">tinkerer, student, designer, mechanic, handyman, hiker, traveler, kayaker, swimmer</span></h2>
<div class="actions">
<a href="#about" class="btn-services">About</a>
<a href="#contact" class="btn-services">Contact</a>
@ -101,33 +101,20 @@
</header>
<section id="about">
<div class="container wow fadeInUp">
<div class="container">
<div class="row">
<div class="col-md-12">
<h3 class="section-title">About Me</h3>
<div class="section-title-divider"></div>
<p class="section-description">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam</p>
</div>
</div>
</div>
<div class="container about-container wow fadeInUp">
<div class="container about-container">
<div class="row">
<div class="col-md-6">
<h2 class="about-title">adfasdfWe provide great services and ideass</h2>
<p class="about-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate
</p>
<p class="about-text">
Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
id est laborum
</p>
<p class="about-text">
Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
id est laborum
</p>
<img class="about-portrait" src="img/e-w.png" alt="Ethan N. Paul"/>
</div>
<div class="col-md-6 col-md-push-6">
<div class="col-md-6">
<h2 class="about-title">We provide great services and ideass</h2>
<p class="about-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
@ -147,19 +134,19 @@
</section>
<section id="contact">
<div class="container wow fadeInUp">
<div class="container">
<div class="row">
<div class="col-md-12">
<h3 class="section-title">Contact Me</h3>
<div class="section-title-divider"></div>
<p class="section-description">Send me an email at <a href="mailto:enpaul@enpaul.net">enpaul@enpaul.net</a> or feel free to <a href="https://download.enpaul.net/enpaul-resume.pdf" target="_blank">download my résumé</a>.</p>
<ul class="list-inline">
<!--<li><a href="mailto:enpaul@enpaul.net"><span class="hb hb-sm"><i class="fa fa-envelope-o"></i></span></a></li>-->
<li><a target="_blank" href="https://twitter.com/theenpaul"><span class="hb hb-sm"><i class="fa fa-twitter"></i></span></a></li>
<li><a target="_blank" href="https://plus.google.com/+EthanPaul42"><span class="hb hb-sm"><i class="fa fa-google-plus"></i></span></a></li>
<li><a target="_blank" href="https://www.linkedin.com/in/enpaul"><span class="hb hb-sm"><i class="fa fa-linkedin"></i></span></a></li>
<!--<li><a target="_blank" href="https://www.facebook.com/theenpaul"><span class="hb hb-sm"><i class="fa fa-facebook"></i></span></a></li>-->
<li><a target="_blank" href="https://www.instagram.com/theenpaul"><span class="hb hb-sm"><i class="fa fa-instagram"></i></span></a></li>
<li><a href="mailto:enpaul@enpaul.net"><span class="hb hb-sm hb-email" title="EMail enpaul@enpaul.net"><i class="fa fa-envelope"></i></span></a></li>
<li><a target="_blank" href="https://download.enpaul.net/enpaul-resume.pdf"><span class="hb hb-sm hb-resume" title="Download Resume"><i class="fa fa-file-text"></i></span></a></li>
<li><a target="_blank" href="https://www.linkedin.com/in/enpaul"><span class="hb hb-sm hb-linkedin" title="LinkedIn ENPaul"><i class="fa fa-linkedin"></i></span></a></li>
<li><a target="_blank" href="https://plus.google.com/+EthanPaul42"><span class="hb hb-sm hb-google-plus" title="Google+ EthanPaul42"><i class="fa fa-google-plus"></i></span></a></li>
<li><a target="_blank" href="https://www.instagram.com/theenpaul"><span class="hb hb-sm hb-instagram" title="Instagram @theENPaul"><i class="fa fa-instagram"></i></span></a></li>
<li><a target="_blank" href="https://twitter.com/theenpaul"><span class="hb hb-sm hb-twitter" title="Twitter @theENPaul"><i class="fa fa-twitter"></i></span></a></li>
</ul>
</div>
</div>
@ -167,7 +154,7 @@
</section>
<section id="network">
<div class="container wow fadeInUp">
<div class="container">
<div class="row">
<div class="col-md-12">
<h3 class="section-title">Network Services</h3>
@ -235,7 +222,7 @@
</section>
<section id="status">
<div class="container wow fadeInUp">
<div class="container">
<div class="row">
<div class="col-md-8">
<h3 class="status-title">Service Status</h3>

34
js/custom.js
View File

@ -1,26 +1,28 @@
jQuery(document).ready(function( $ ) {
//alert("You're the 1000th visitor!!!!");
// Preloader
$(window).on('load', function() {
$('#preloader').delay(100).fadeOut('slow',function(){$(this).remove();});
});
// Hero rotating texts
$("#hero .rotating").Morphext({
$("#top .rotating").Morphext({
animation: "flipInX",
separator: ",",
speed: 3000
});
// Initiate the wowjs
new WOW().init();
// Initiate superfish on nav menu
$('.nav-menu').superfish({
animation: {opacity:'show'},
speed: 400
});
// Mobile Navigation
if( $('#nav-menu-container').length ) {
var $mobile_nav = $('#nav-menu-container').clone().prop({ id: 'mobile-nav'});
@ -29,19 +31,19 @@ jQuery(document).ready(function( $ ) {
$('body').prepend( '<button type="button" id="mobile-nav-toggle"><i class="fa fa-bars"></i></button>' );
$('body').append( '<div id="mobile-body-overly"></div>' );
$('#mobile-nav').find('.menu-has-children').prepend('<i class="fa fa-chevron-down"></i>');
$(document).on('click', '.menu-has-children i', function(e){
$(this).next().toggleClass('menu-item-active');
$(this).nextAll('ul').eq(0).slideToggle();
$(this).toggleClass("fa-chevron-up fa-chevron-down");
});
$(document).on('click', '#mobile-nav-toggle', function(e){
$('body').toggleClass('mobile-nav-active');
$('#mobile-nav-toggle i').toggleClass('fa-times fa-bars');
$('#mobile-body-overly').toggle();
});
$(document).click(function (e) {
var container = $("#mobile-nav, #mobile-nav-toggle");
if (!container.is(e.target) && container.has(e.target).length === 0) {
@ -55,7 +57,7 @@ jQuery(document).ready(function( $ ) {
} else if ( $("#mobile-nav, #mobile-nav-toggle").length ) {
$("#mobile-nav, #mobile-nav-toggle").hide();
}
// Stick the header at top on scroll
$("#header").sticky({topSpacing:0, zIndex: '50'});
@ -64,13 +66,13 @@ jQuery(document).ready(function( $ ) {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
if (target.length) {
var top_space = 0;
if( $('#header').length ) {
top_space = $('#header').outerHeight();
}
$('html, body').animate({
scrollTop: target.offset().top - top_space
}, 1500, 'easeInOutExpo');
@ -85,12 +87,12 @@ jQuery(document).ready(function( $ ) {
$('#mobile-nav-toggle i').toggleClass('fa-times fa-bars');
$('#mobile-body-overly').fadeOut();
}
return false;
}
}
});
// Back to top button
$(window).scroll(function() {
@ -99,12 +101,12 @@ jQuery(document).ready(function( $ ) {
} else {
$('.back-to-top').fadeOut('slow');
}
});
$('.back-to-top').click(function(){
$('html, body').animate({scrollTop : 0},1500, 'easeInOutExpo');
return false;
});
});
});