Edrea - Tailwind CSS Personal Portfolio Template

Template Features

  • Tailwind CSS

  • Fully Responsive HTML5

  • Page Transitions

  • Background Canvas

  • 2500+ Fontello Icons

  • CSS3 Animations

  • SEO optimized

  • Mobile Navigations

  • Fully Responsive to all devices

  • Developer Friendly Coding

  • Sticky Navigation

  • Free Updates

HTML Structure

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

CSS Files and Structures

I'm using 3 CSS files in this template. 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.

JavaScript Structures

All call actions are run in init.js

Attention: If you remove 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.

Sources and Credits

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

  • Icons - These Icons by fontello.com

  • Images - pexels.com

  • Fonts - Free Google Fonts: "Poppins", "Open Sans"

Contact Form

Contact form works only in hosting environment. If you want to use it, open "edrea/modal/contact.php" file and change main email address (line-4) to yours.

Important! Some hosting providers don't support PHP Mail Function automatically. So if you don't receive any message after changing mail address to yours, then contact with your hosting provider and they'll enable PHP Mail function. And everything would be great.

How to edit template

In order to edit the file, you need to have Code Writer program installed on your system. Just open files in code writer and edit them. Recommended program is Visual Studio Code

Tutorial for using special blocks

  • Enable and Disable Magic Cursor

    If you want enable or disable Magic Cursor feature just change data-magic-cursor value. Values are show and hide

  • Change Page Transition Effects

    If you want to change Page Transtion Effects change data-enter and data-exit values to any animate class from https://animate.style

  • Change animate text effect

    If you want change animate text effect just change extra class. Values are zoom, rotate-1, letters type, letters rotate-2, loading-bar, slide, clip, letters rotate-3, letters scale, push

  • Support Item

    Refund Policy

    Read this Article before asking for a refund.

    The refund request will not be accepted in the following cases by the article:

    Customization Service

    Customization services starts from 50$. You can contact via Mail