Digital portfolio – website template
Today we will create a single page template for our portfolio. As you know, your own portfolio has always been an important attribute for almost everyone. As a rule, they emphasize the character and originality. It describes the strengths (and sometimes weaknesses) features. It is quite important to show originality. Sometimes such sites known as business-card websites. Typically, such site consists of one (sometimes more) page. Today we consider creation of a page that consists of the following sections: header (logo with menu), promo section with slider, main content section with popup feature, about us section, contact us section with popup form, address section with google maps and footer.
As a framework that will help us in the layout, I decided to take Bootstrap (v3). Also because it has native support of responsiveness. As you know, in accordance with the recommendations of Google, the sites need to be responsive.
Live Demo
So here we go, first of all, create few folders – ‘css’, ‘fonts’, ‘images’ and ‘js’. Here we will keep the appropriate files: css stylesheets, font files, images and javascript files. After, you can download last version of Bootstrap, and extract its files into our appropriate directories. Also, you can download a ready archive of the demo using the form at the end of this article.
Header
This menu is created using the following code
!-- top navigation --
header id="headernav"
a href="#mslider" class="logo" data-scrollspan class="icon-logo"/span Logo/a
nav class="nav-collapse"
ul
li class="menu-item"a href="#mslider" data-scrollspan class="fa fa-user"/spanHome/a/li
li class="menu-item"a href="#services" data-scrollspan class="fa fa-cog"/spanServices/a/li
li class="menu-item"a href="#portfolio" data-scrollspan class="fa fa-eye open"/spanPortfolio/a/li
li class="menu-item"a href="#about" data-scrollspan class="fa fa-info sign"/spanAbout/a/li
li class="menu-item"a href="#contact" data-scrollspan class="fa fa-paper-plane"/spanContact/a/li
li class="menu-item"a href="#" class="lang"EN/a/li
li class="menu-item"a href="#/de" class="lang"DE/a/li
li class="menu-item"a href="#/ru" class="lang"RU/a/li
/ul
/nav
/header
!-- /top navigation --
Promo section
The monitor on this picture displays slideshow. Here is markup of this promo section:
!-- intro slider --
section id="mslider"
div id="wrap" class="wrap"
div class="mockup"
img class="mockup__img" src="images/bg.jpg" alt="alt text" /
div class="screen"
ul id="slideshow" class="slideshow"
li class="slideshow__item"img src="images/slideshow/1.jpg" alt=""//li
li class="slideshow__item"img src="images/slideshow/2.jpg" alt=""//li
li class="slideshow__item"img src="images/slideshow/3.jpg" alt=""//li
li class="slideshow__item"img src="images/slideshow/4.jpg" alt=""//li
/ul
/div
header class="main-header"
h1 class="animated fadeInRight delay-1s"Here can be some intro information about the company/h1
div class="learn-more-wrap"
a href="#services" class="animated fadeInUp delay-2s learn-more" data-scrollspanLearn More/span/a
/div
/header
/div
/div
/section
!-- /intro slider --
Main content section
This section consists of two parts: ‘Our services’ and ‘Our portfolio’.
The following HTML code is for the ‘Services’ section:
!-- services --
section class="text-center section-padding" id="services"
div class="container"
div class="row"
h1Our Services/h1
div class="services-wrapper"
div class="col-md-4 wp2"
div class="light-box box-hover"
div class="icon"
img src="images/bulb.svg" alt=""
/div
h2Lorem Ipsum 1/h2
pAliquam lobortis, lectus eget eleifend porttitor, odio ex sodales urna, eget scelerisque nunc turpis at justo. Aenean vel posuere./p
/div
/div
div class="col-md-4 wp2 delay-05s"
div class="light-box box-hover"
div class="icon"
img src="images/printer.svg" alt=""
/div
h2Lorem Ipsum 2/h2
pAliquam lobortis, lectus eget eleifend porttitor, odio ex sodales urna, eget scelerisque nunc turpis at justo. Aenean vel posuere./p
/div
/div
div class="col-md-4 wp2 delay-1s"
div class="light-box box-hover"
div class="icon"
img src="images/browser.svg" alt=""
/div
h2Lorem Ipsum 3/h2
pAliquam lobortis, lectus eget eleifend porttitor, odio ex sodales urna, eget scelerisque nunc turpis at justo. Aenean vel posuere./p
/div
/div
/div
/div
/div
/section
!-- /services --
And here is HTML code for the ‘Portfolio’ section:
!-- portfolio --
section class="clearfix" id="portfolio"
div class="text-center portfolioheader"
h1Our portfolio/h1
pBrowse our portfolio/p
/div
div class="grid"
!-- project 0 --
div id="project0" class="zoom-anim-dialog mfp-hide projects"
h1Project 1/h1
h2Curabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc./h2
a href="#" target="_blank" class="projectlink"Visit Website/a
img src="images/project.jpg" alt=""
img src="images/project.jpg" alt=""
img src="images/project.jpg" alt=""
/div
a class="popup-with-zoom-anim" href="#project0"
figure class="effect-portfolio wp4 delay-01s"
img src="images/project-thumb.jpg" alt=""/
figcaption
h2Project 1/h2
pCurabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc./p
span class="icon-project0_icon"/span
/figcaption
/figure
/a
!-- /project 0 --
!-- project 1 --
div id="project1" class="zoom-anim-dialog mfp-hide projects"
h1Project 2/h1
h2Curabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc./h2
a href="#" target="_blank" class="projectlink"Visit Website/a
img src="images/project.jpg" alt=""
img src="images/project.jpg" alt=""
img src="images/project.jpg" alt=""
/div
a class="popup-with-zoom-anim" href="#project1"
figure class="effect-portfolio wp4 delay-01s"
img src="images/project-thumb2.jpg" alt=""/
figcaption
h2Project 2/h2
pCurabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc./p
span class="icon-project1-icon"/span
/figcaption
/figure
/a
!-- /project 1 --
!-- project 2 --
div id="project2" class="zoom-anim-dialog mfp-hide projects"
h1Project 3/h1
h2Curabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc./h2
a href="#" target="_blank" class="projectlink"Visit Website/a
img src="images/project.jpg" alt=""
img src="images/project.jpg" alt=""
img src="images/project.jpg" alt=""
img src="images/project.jpg" alt=""
/div
a class="popup-with-zoom-anim" href="#project2"
figure class="effect-portfolio wp4 delay-05s"
img src="images/project-thumb2.jpg" alt=""/
figcaption
h2Project 3/h2
pCurabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc./p
span class="icon-project2-icon"/span
/figcaption
/figure
/a
!-- /project 2 --
!-- project 3 --
div id="project3" class="zoom-anim-dialog mfp-hide projects"
h1Project 4/h1
h2Curabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc./h2
a href="#" target="_blank" class="projectlink"Visit Website/a
img src="images/project.jpg" alt=""
img src="images/project.jpg" alt=""
/div
a class="popup-with-zoom-anim" href="#project3"
figure class="effect-portfolio wp4 delay-05s"
img src="images/project-thumb.jpg" alt=""/
figcaption
h2Project 4/h2
pCurabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc./p
span class="icon-project3-icon"/span
/figcaption
/figure
/a
!-- /project 3 --
!-- project 4 --
div id="project4" class="zoom-anim-dialog mfp-hide projects"
h1Project 5/h1
h2Curabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc./h2
a href="#" target="_blank" class="projectlink"Visit Website/a
img src="images/project.jpg" alt=""
img src="images/project.jpg" alt=""
img src="images/project.jpg" alt=""
/div
a class="popup-with-zoom-anim" href="#project4"
figure class="effect-portfolio wp4 delay-05s"
img src="images/project-thumb.jpg" alt=""/
figcaption
h2Project 5/h2
pCurabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc./p
span class="icon-project4-icon"/span
/figcaption
/figure
/a
!-- /project 4 --
!-- Project 5 --
div id="project5" class="zoom-anim-dialog mfp-hide projects"
h1Project 6/h1
h2Curabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc./h2
a href="#" target="_blank" class="projectlink"Visit Website/a
img src="images/project.jpg" alt=""
img src="images/project.jpg" alt=""
img src="images/project.jpg" alt=""
/div
a class="popup-with-zoom-anim" href="#project5"
figure class="effect-portfolio wp4 delay-05s"
img src="images/project-thumb2.jpg" alt=""/
figcaption
h2Project 6/h2
pCurabitur volutpat massa ac tincidunt molestie. Vestibulum massa nunc./p
span class="icon-project5-icon"/span
/figcaption
/figure
/a
!-- /project 5 --
/div
!-- /Grid --
/section
!-- /portfolio --
When you move the cursor over any of the projects – it displays additional information. And when you click – a popup with more information about the project will appear, here you can put whatever you want (any html code) – text, images, video.
‘About us’ section
This simple section consists of two columns: image is on the left and information about us is on the right
!-- about --
section class="light-bg text-center" id="about"
div class="container-fluid nopadding"
div class="wrapper"
div class="aboutimgwrap"
div class="wp3 aboutimg"/div
/div
/div
div class="container about"
div class="row"
div class="col-md-5 col-md-offset-7"
h1About Us/h1
pVivamus rhoncus justo viverra iaculis posuere. Nulla commodo porttitor neque nec varius. Nullam ac odio ac libero tincidunt sodales. Aenean sed tincidunt odio. Donec ut varius sed./p
pVivamus rhoncus justo viverra iaculis posuere. Nulla commodo porttitor neque nec varius. Nullam ac odio ac libero tincidunt sodales. Aenean sed tincidunt odio. Donec ut varius sed./p
pVivamus rhoncus justo viverra iaculis posuere. Nulla commodo porttitor neque nec varius. Nullam ac odio ac libero tincidunt sodales. Aenean sed tincidunt odio. Donec ut varius sed./p
pVivamus rhoncus justo viverra iaculis posuere. Nulla commodo porttitor neque nec varius. Nullam ac odio ac libero tincidunt sodales. Aenean sed tincidunt odio. Donec ut varius sed./p
/div
/div
/div
/div
/section
!-- /about --
‘Contact us’ section
This is quite complex element that consits of this small section with ‘send message’ button and hidden popup form with bootstrap validation. Below is HTML code:
!-- contact --
section class="dark-bg text-center section-padding contact-wrap" id="contact"
div class="container"
div class="row"
div class="col-md-12"
h1Contact Us/h1
h2Want to discuss? Get in touch!/h2
a id="trigger-overlay" class="animated fadeInDown delay-2s send-message" href="#contact" data-scrollspanSend us a message/span/a
/div
/div
/div
/section
!-- /contact --
!-- contact form --
div id="pro"
div class="overlay overlay-contentpush"
button type="button" class="overlay-close"Close/button
div class="container"
div class="projectplanner"
h1Want to discuss?/h1
h2We'd love to hear from you./h2
div class="container"
div class="col-sm-offset-3 col-sm-6"
form name="sentMessage" class="contactForm" id="contactForm" novalidate
div class="control-group"
div class="controls"
label for="name"Name/label
input type="text" class="form-control input-lg" placeholder="Name *" id="name" required data-validation-required-message="Please enter your name" /
p class="help-block"/p
/div
/div
div class="control-group"
div class="controls"
label for="email"Email/label
input type="email" class="form-control input-lg" placeholder="Email address *" id="email" required data-validation-required-message="Please enter your email" /
p class="help-block"/p
/div
/div
div class="control-group"
div class="controls"
label for="website"Website/label
input type="text" class="form-control input-lg" placeholder="Website" id="website" /
p class="help-block"/p
/div
/div
div class="control-group"
div class="controls"
label for="message"Message/label
textarea rows="10" cols="100" class="form-control input-lg" placeholder="How can we help? *" id="message" required
data-validation-required-message="Please enter your message" minlength="5"
data-validation-minlength-message="Min 5 characters" maxlength="999" style="resize:none"/textarea
p class="help-block"/p
/div
/div
div id="success" /div
button type="submit" class="submit-btn center-block"Send Message/buttonbr /
span class="required"* required fields/span
/form
/div
/div
/div
/div
/div
/div
!-- /contact form --
Map and Footer
Finally – two small sections of the map where you can specify your location and footer.
!-- Google map --
div id="cd-google-map"
div id="google-container"/div
div id="cd-zoom-in"/div
div id="cd-zoom-out"/div
addressOur address/address
/div
!-- /Google map --
!-- footer --
footer
div class="container"
div class="row"
div class="col-md-6 copyright"
h1span class="icon-logo"/spanLogo/h1
pEtiam at sapien eu lectus tempor nullam./p
pcopy; 2015 Company/p
/div
div class="col-md-6 footerlinks"
ul
lia class="up-btn2" href="#mslider"Back to Top/a/li
/ul
/div
/div
/div
/footer
!-- /footer --
Javascript
For our digital portfolio we use a bunch of javascripts:
script src="js/jquery.min.js"/script script src="js/modernizr.custom.min.js"/script script src="js/bootstrap.min.js"/script script src="js/fastclick.js"/script script src="js/libraries.min.js"/script script src="js/overlay.js"/script script src="js/jqBootstrapValidation.js"/script script src="https://maps.googleapis.com/maps/api/js"/script script src="js/scripts.js"/script
They are loaded in the end of our ‘index.html’ file. Nearly all of them are various service libraries. In the last one (scripts.js) we added code for navigation (for smooth scrolling between waypoints), for magnific popup (that is used in Projects), bootstrap validation for ‘Contact us’ form. Also, here you will find the initialization of our slide show.
js/scripts.js
$(document).ready(function() {
// waypoints
$('.wp1').waypoint(function() {
$('.wp1').addClass('animated fadeInLeft');
}, {
offset: '75%'
});
$('.wp2').waypoint(function() {
$('.wp2').addClass('animated fadeInUp');
}, {
offset: '75%'
});
$('.wp3').waypoint(function() {
$('.wp3').addClass('animated fadeInDown');
}, {
offset: '55%'
});
$('.wp4').waypoint(function() {
$('.wp4').addClass('animated fadeInDown');
}, {
offset: '75%'
});
$('.wp5').waypoint(function() {
$('.wp5').addClass('animated fadeInUp');
}, {
offset: '75%'
});
$('.wp6').waypoint(function() {
$('.wp6').addClass('animated fadeInDown');
}, {
offset: '75%'
});
// Magnific Popup
$('.popup-with-zoom-anim').magnificPopup({
type: 'inline',
fixedContentPos: false,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in'
});
$('.popup-with-move-anim').magnificPopup({
type: 'inline',
fixedContentPos: false,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-slide-bottom'
});
// contact form validation
$("input,textarea").jqBootstrapValidation({
preventSubmit: true,
submitError: function($form, event, errors) {
// something to have when submit produces an error ?
// Not decided if I need it yet
},
submitSuccess: function($form, event) {
event.preventDefault(); // prevent default submit behaviour
// get values from FORM
var name = $("input#name").val();
var email = $("input#email").val();
var website = $("input#website").val();
var message = $("textarea#message").val();
var firstName = name; // For Success/Failure Message
// Check for white space in name for Success/Fail message
if (firstName.indexOf(' ') = 0) {
firstName = name.split(' ').slice(0, -1).join(' ');
}
$.ajax({
url: "",
type: "POST",
data: {
name: name,
email: email,
website: website,
message: message
},
cache: false,
success: function() {
// Success
$('#success').html("div class='alert alert-success'");
$('#success .alert-success').html("button type='button' class='close' data-dismiss='alert' aria-hidden='true'times;").append("/button");
$('#success .alert-success').append("strongYour message has been sent. /strong");
$('#success .alert-success').append('/div');
//clear all fields
$('#contactForm').trigger("reset");
},
error: function() {
// Fail
$('#success').html("div class='alert alert-danger'");
$('#success .alert-danger').html("button type='button' class='close' data-dismiss='alert' aria-hidden='true'times;").append("/button");
$('#success .alert-danger').append("strongSorry " + firstName + ", it seems that our mail server is not responding.../strong Please email us directly at ...");
$('#success .alert-danger').append('/div');
//clear all fields
$('#contactForm').trigger("reset");
},
})
},
filter: function() {
return $(this).is(":visible");
},
});
$("a[data-toggle="tab"]").click(function(e) {
e.preventDefault();
$(this).tab("show");
});
});
// hide success/fail boxes on click
$('#name').focus(function() {
$('#success').html('');
});
// slideshow
(function() {
new Slideshow(document.getElementById('slideshow'));
var body = docElem = window.document.documentElement,
wrap = document.getElementById('wrap'),
mockup = wrap.querySelector('.mockup'),
mockupWidth = mockup.offsetWidth;
scaleMockup();
function scaleMockup() {
var wrapWidth = wrap.offsetWidth,
val = wrapWidth / mockupWidth;
mockup.style.transform = 'scale3d(' + val + ', ' + val + ', 1)';
mockup.style.WebkitTransform = 'scale3d(' + val + ', ' + val + ', 1)';
}
window.addEventListener('resize', resizeHandler);
function resizeHandler() {
function delayed() {
resize();
resizeTimeout = null;
}
if (typeof resizeTimeout != 'undefined') {
clearTimeout(resizeTimeout);
}
resizeTimeout = setTimeout(delayed, 50);
}
function resize() {
scaleMockup();
}
})();
Live Demo
[sociallocker]
download in package
[/sociallocker]
