Deebo | Personal Portfolio Template

HTML Structure

The template includes 3 html file. This template is a flexible layout with max 4 column. All of the information within the main content area is nested within a div with a class of "deebo_fn_main". You have to open index page in order to change it.

If you would like to edit the color, font, or style of any elements in this template, you could do by using "Inspect Element" on Chrome, Safari, Mozilla and Opera(press right click on browser ).  It is really powerful tool to work with html and css codes

 

CSS Files and Structure

I'm using 3 CSS files in this template. The first file (style.css) contains all of the specific stylings for the page. The file is separated into sections.

 

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

Other CSS files:

  • base.css
  • animated-headlines.css

 

JavaScripts

All call actions are run in init.js

Attention : If you romove any of javascripts, please don't forget to remove js code call action that belongs to removed js from init.js . Otherwise your site works inproperly

Other JavaScript files:

  • ie8.js - used for Disable Webpage content for ie browser's old versions.
  • init.js - includes call actions
  • jquery.js - javascript library
  • modernizr.custom.js - used for IE in order to support HTML5 elements
  • animated-headlines.js - used for hero header typing effect.
  • waypoints.js - used for Progres animation (Skills).

 

Sources and Credits

I've used the following images, icons or other files as listed.

  • Icons - These Icons by fontello.com. Free for Commercial Use.
  • Images - pexels.com images.
  • Font - Free Google Font "Rubik"

 

How To Use

  • Unzip purchased files via winrar
  • Copy and paste Deebo all files into your folder
  • To edit content of template open and edit index.html via Adobe Dreamweaver (or notepad++, notepad and etc.)
  • To customize CSS just edit style.css in css folder
  • To customize JavaScript just edit init.js in js folder
  • To change images replace all images inside img folder with yours

 

Structure of the page (index.html)

index.html contains right hidden sidebar, cv modal, 6 sections and footer:

  • Right Sidebar
  • CV Modal
  • Home
  • About
  • Portfolio
  • Services
  • News & Tips
  • Contact
  • Footer


How change sidebar menu links?
<div class="traffic">
	<h4>Menu</h4>
	<ul>
		<li><a href="#hero-header">Home</a></li>
		<li><a href="#about">About</a></li>
		<li><a href="#scills">Portfolio</a></li>
		<li><a href="#services">Services</a></li>
		<li><a href="#tips">News &amp; Tips</a></li>
		<li><a href="#contact">Contact</a></li>
	</ul>
</div>

 

Contact Form

How change contact form email?
In data-email value, code below:

<form class="contact_form" action="/" method="post" autocomplete="off" data-email="frenifyteam@gmail.com">