+ 13 Pages Included.
Let's see what we have. Go!
e.Oliver – is creative, beautiful and minimalistic HTML5 template for photographers, which perfectly suits your portfolio, personal blog and personal page (resume).
The main advantages that you will get.
Clean and minimal design will make your site awesome.
Beautiful effects and smooth animation will make your site even better.
Modern coding technologies: SASS, BEM – will make your project flexible.
Only vector and font icons for better display on the retina screen.
Free updates that include new pages and various improvements.
Customize and manage the template as you wish.
The template fully supports RTL. Integration guide provided in documentation.
A simple and functional lightbox gallery will allow you to comfortably view photos.
Ajax contact & subscriptions form with MailChimp.
Some template settings that will easily help you customize it.
To edit or add a new photo, simply add the following code to the container with photos of grid-gallery, where:
<!-- My Works -->
...
<figure class="item-portfolio item-portfolio__column-three category-name-1">
<a class="link-photo" href="img/01_image.jpg"
data-width="900"
data-height="900"
data-caption="
<div class='options__photo'>
<span>MAKE</span>NIKON D700
</div>
<div class='options__photo'>
<span>SHUTTER SPEED</span>1/2500s
</div>
<div class='options__photo'>
<span>APERTURE</span>f/1.2
</div>
<div class='options__photo'>
<span>FOCAL LENGTH</span>25mm
</div>
<div class='options__photo'>
<span>ISO</span>200
</div>">
<img class="image-portfolio" src="img/your_link_image.jpg" alt="Photo">
</a>
</figure>
...
<!-- /My Works -->
Contact form may not work if your server is not configured.
To customize a contact form, you need to open the file form-contact.php from the folder php, find and replace line 27 on your emeil example@example.com
Optionally, you can edit the text email template.
$EmailTo = "example@example.com";
<!-- Item -->
<div class="swiper-slide client-carousel-item reveal">
<div class="item__block-number">
<span>01.</span>
</div>
<div class="item__block-author">
<div class="item__block-image">
<img src="img/photo_client.jpg" alt="Name">
</div>
<div class="item__block-name">
<h3 class="client__name">First name <strong>Last name</strong></h3>
<h4 class="cleint__organization">Position / Organization</h4>
</div>
</div>
<div class="item__block-description">
<p>Several lines of feedback.</p>
</div>
</div>
<!-- /Item -->
The template uses the popular MailChimp mailing service.
Open the file common.js and find line 538 and replace the link to your:
url: "http://example.us13.list-manage.com/subscribe/post?u=b3954a95f1a55ffe65dd25050&id=50b6fd13c3", // Your url MailChimp
1. To activate RTL in the template, open the style/rtl folder. Copy the bootstrap.min file and paste it into the style folder with a replacement.
2. Open all html pages in the editor (Sublime Text 3, Notepad ++ b etc.). After the line:
<link rel="stylesheet" type="text/css" href="style/style.css"/>
Paste:
<link rel="stylesheet" type="text/css" href="style/style-rtl.css"/>
Let's see what we have. Go!
Libraries and plugins that were used for the template.
| Plugin | Description |
|---|---|
| jQuery | jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. |
| Bootstrap | Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. |
| Validator | The Validator plugin offers automatic form validation configurable via mostly HTML5 standard attributes. It also provides an unobtrusive user experience, because nobody likes a naggy form. |
| Autosize | A small, stand-alone script to automatically adjust textarea height. |
| Swiper | Is most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. |
| Skrollr | Parallax scrolling for the masses. |
| Masonry | Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. |
| imagesLoaded | Detect when images have been loaded. |
| PhotoSwipe | JavaScript image gallery for mobile and desktop, modular, framework independent. |
| Countimator | Animated counter. |
| Waypoints | Waypoints is the easiest way to trigger a function when you scroll to an element. |
| Mailchimp Ajax | Use ajax for your mailchimp form. |
| SmoothScroll | Smooth scrolling experience for websites. |
| FStyles/Fonts/Images | Description |
|---|---|
| animate.css | Just-add-water CSS animations. |
| Google Fonts | Making the web more beautiful, fast, and open through great typography. |
| Font Awesome | Font Awesome gives you scalable vector icons that can instantly be customized. |
| Unsplash | Free high-resolution photos. |
All changes and updates you can learn from the Changelog.
/* Update from May 18th, 2019 */ - Added filtering and loading content for the gallery.
/* Update from Jan 22th, 2019 */ - Various fixes and improvements. - Added light version. - Removed version of the template Bootstrap 3
/* Update from Sep 23th, 2017 */ - Added template on bootstrap 4 - Minor fixes for both versions of the template.
/* Version 1.1.3 - Sep 10th, 2017 */ - Added control of the mouse wheel for the photo carousel.
/* Version 1.1 - Aug 01th, 2017 */ - Add new pages: "Home page v2" and "Coming Soon" - Enjoy
/* Version 1.0 - Jul 22th, 2017 */ - Initialization release
