Bootstrap Snippet Portfolio Webpage using HTML CSS Bootstrap jQuery

/* Palette: "Corporate and Sleek" */ html, body { overflow-x: hidden; /* Prevent scroll on narrow devices */ padding-top: 70px; background-color: #E8E8E8; /* "CLEAN" */ } footer { padding: 30px 0; } .navbar-brand { font-size: 24px; } .navbar-container { padding: 20px 0 20px 0; font-size: 14px; } .navbar.navbar-fixed-top.fixed-theme { background-color: #333A56; /* "VERMILLION" */ border-color: #080808; box-shadow: 0 0 5px rgba(0, 0, 0, .8); } .navbar-brand.fixed-theme { font-size: 18px; } .fixed-theme a { color: #F7F5E6 !important; /* FRESH */ } .fixed-theme .navbar-nav a:hover { background: #52658F !important; /* "SUNSHINE" */ } .fixed-theme .navbar-nav a:visited:hover { background: #52658F !important; /* "SUNSHINE" */ } .fixed-theme .navbar-nav a:visited { background: #333A56 !important; /* "VERMILLION" */ } .navbar-container.fixed-theme { padding: 0; font-size: 14px; } .navbar-brand.fixed-theme, .navbar-container.fixed-theme, .navbar.navbar-fixed-top.fixed-theme, .navbar-brand, .navbar-container { transition: 0.8s; -webkit-transition: 0.8s; } .img-responsive { padding-bottom: 5px; border-radius: 10px 10px 13px 13px; } .jumbotron { background-color: #F7F5E6; /* "FRESH" */ } .justified { text-align: justify; } .list-group a { background: #52658F; /* "SUNSHINE" */ color: #F7F5E6; /* "FRESH" */ border-radius: 6px !important; } .list-group a:visited { background: #52658F; /* "SUNSHINE" */ color: #F7F5E6; /* "FRESH" */ border-radius: 6px !important; } .list-group a:hover { background: #333A56; /* "VERMILLION" */ color: #F7F5E6; /* "FRESH" */ font-weight: bold; } #brand { color: #52658F; /* "SUNSHINE" */ font-weight: bold; } #nav-links a { color: #52658F; /* "SUNSHINE" */ font-weight: bold; } #nav-links a:hover { background: #F7F5E6; /* "FRESH" */ border-radius: 6px; } #nav-links a:visited { color: #52658F; /* "SUNSHINE" */ font-weight: bold; background: #E8E8E8; /* "CLEAN" */ } #nav-links a:visited:hover { background: #F7F5E6; /* "FRESH" */ border-radius: 6px; } span.text-content { background: rgba(0, 0, 0, 0.7); color: #F7F5E6 !important; /* FRESH */ cursor: pointer; display: table; height: 150px; border-radius: 10px; left: 0; position: absolute; top: 0; width: 80%; margin-left: 10%; margin-top: 26%; opacity: 0; -webkit-transition: opacity 500ms; -moz-transition: opacity 500ms; -o-transition: opacity 500ms; transition: opacity 500ms; } span.text-content span { display: table-cell; text-align: center; vertical-align: middle; padding: 10px; } .wrapper a:hover span.text-content { opacity: 1; } .view-details { background: #F7F5E6; /* "FRESH" */ } .view-details:hover { background: #F7F5E6; /* "FRESH" */ color: #52658F; /* "SUNSHINE" */ } .intro-text { text-decoration: none; color: #333A56; /* "VERMILLION" */ } .intro-text:hover { text-decoration: none; color: #52658F; /* "SUNSHINE" */ } .intro-text:visited { color: #333A56; /* "VERMILLION" */ text-decoration: none; } .intro-text:visited:hover { text-decoration: none; color: #52658F; /* "SUNSHINE" */ } .section-head { font-size: 40px; } .btn-primary { background: #52658F; /* "SUNSHINE" */ } #projects-head { padding-top: 20px; font-size: 40px; background: -webkit-linear-gradient(#eee, #333A56); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } hr { border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); } .project-name { font-family: 'Ubuntu', sans-serif; font-size: 2.2vw; } #about {} #portfolio {} #contact {} /* THINGS TO DO - Add social media icons - Add a footer area, fill it, and style it - Fix collapsed nav visibility - Add alternate layout and styling aspects for mobile */

$(document).ready(function() { var myNavBar = { flagAdd: true, elements: [], init: function (elements) { this.elements = elements; }, add : function() { if(this.flagAdd) { for(var i=0; i < this.elements.length; i++) { document.getElementById(this.elements[i]).className += " fixed-theme"; } this.flagAdd = false; } }, remove: function() { for(var i=0; i < this.elements.length; i++) { document.getElementById(this.elements[i]).className = document.getElementById(this.elements[i]).className.replace( /(?:^|\s)fixed-theme(?!\S)/g , '' ); } this.flagAdd = true; } }; myNavBar.init( [ "header", "header-container", "brand" ]); function offSetManager(){ var yOffset = 0; var currYOffSet = window.pageYOffset; if(yOffset < currYOffSet) { myNavBar.add(); } else if(currYOffSet == yOffset){ myNavBar.remove(); } } window.onscroll = function(e) { offSetManager(); } offSetManager(); $("a").prop("target", "_blank"); $('.nav-anchor[target="_blank"]').removeAttr('target'); // $("img").removeClass("img-responsive img-rounded"); // $("img").addClass("img-responsive img-rounded"); var clientWidth = $(window).width(); $(".project-name").css('width', clientWidth); /* Validation used with PHP etc. $(function () { $('#contact-form').validator(); $('#contact-form').on('submit', function (e) { if (!e.isDefaultPrevented()) { var url = "contact.php"; $.ajax({ type: "POST", url: url, data: $(this).serialize(), success: function (data) { var messageAlert = 'alert-' + data.type; var messageText = data.message; var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' + messageText + '</div>'; if (messageAlert && messageText) { $('#contact-form').find('.messages').html(alertBox); $('#contact-form')[0].reset(); } } }); return false; } }) }); */ }); // END OF JAVASCRIPT /* SOME PHP <?php // configure $from = 'Demo contact form <demo@domain.com>'; $sendTo = 'Demo contact form <demo@domain.com>'; $subject = 'New message from contact form'; $fields = array('name' => 'Name', 'surname' => 'Surname', 'phone' => 'Phone', 'email' => 'Email', 'message' => 'Message'); // array variable name => Text to appear in email $okMessage = 'Contact form successfully submitted. Thank you, I will get back to you soon!'; $errorMessage = 'There was an error while submitting the form. Please try again later'; // let's do the sending try { $emailText = "You have new message from contact form\n=============================\n"; foreach ($_POST as $key => $value) { if (isset($fields[$key])) { $emailText .= "$fields[$key]: $value\n"; } } mail($sendTo, $subject, $emailText, "From: " . $from); $responseArray = array('type' => 'success', 'message' => $okMessage); } catch (\Exception $e) { $responseArray = array('type' => 'danger', 'message' => $errorMessage); } if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { $encoded = json_encode($responseArray); header('Content-Type: application/json'); echo $encoded; } else { echo $responseArray['message']; } */