Home | Support | Delia HTML

Delia HTML

Getting Started

Delia | Freelance Portfolio | Documentation

Introduction

Maya Delia is a beautiful, minimalistic template for freelancers. Show your portfolio in a stylish and modern design. The template has a clean, professional code, the site is fully adaptive and unique. This is a template for those who appreciate minimalism and convenience. Embed videos, images, and a slider.

I drew this template for myself, but I want to share it with you. Thank you for your attention and viewing, I hope you like the template very much, I will be grateful for the review. Thanks!

Note: The images and videos used on the demo site are for demonstration purposes only and are not included in the download file.

Note: This is a HTML Template. Not a WordPress Theme. We will release it’s WordPress version soon.

Main Features

List Files:

Home Light
Projects Light
Case Light
About Light
404 Light

Home Dark
Projects Dark
Case Dark
Blog Dark
About Dark
404 Dark

Menu Burger
Video Autoplay
Image and Video Slider
Cool Animation
Night and Day mode
HTML5 and CSS 3
Clean, Creative, Modern & Beautiful Design
LESS
Fully Responsive, Compatible with all screen sizes
Well Organized Files
Well Commented Code
Easy Customization
Major Browsers compatibility
Well Documented
Google Fonts Used
W3C Valid Markup
Integrated Custom Image Slider
24/7 Friendly & Quick Support
And Much More

Required Software

Text Editor

To modify this product you will require a text editor. There are a wide range of softwares out there that will do the trick but we would recommend Sumblime Text or Brackets.

Installation

Follow the steps below to setup your site template:

1. Unzip the downloaded package and open the /HTML folder to find all the template files. You will need to upload these files to your hosting web server using FTP in order to use it on your website.

FTP Client

To publish your website you will need an FTP client which is a software that will allow you to connect to and upload the HTML files to your server. We would recommend using something like FileZilla.

Connect Using FTP

In order to connect to your server using an FTP client you’ll need the following information:

Host URL
Username
Password

Most hosts create an FTP account for you and commonly send out the above details in the welcome email when you sign up for a hosting plan. Others, require you to create an FTP account through your cPanel. If you have never set up an FTP account before, your host should be able to do this for you and answer any questions you may have.

Connecting using FTP

Below is an example of the FileZilla interface:

2. Below is the folder structure and needs to be uploaded to your website root directory:

HTML/css. – Stylesheet files
HTML/img. – Image files
HTML/js. – Javacript files

3. You should upload all or specific HTML files as per your need.
4. You’re now good to go..! Start adding your content/images and generate your beautiful brand new website for your awesome users.

Edit Pages

Logo

The logo should be in two versions (for a day theme and for a night theme).

We recommend using the swg format

<a href="/" class="logo">
    <img src="img/logo.svg" alt="" class="for-day-mode">
    <img src="img/logo-white.svg" alt="" class="for-night-mode">
</a>

    <div class="menu-wrap with-mode" id="js-menu">
            <div class="scroll">
                <div class="mode-link"><a href="#" class="link link-effect" id="js-change-version" data-day-text="Night mode" data-night-text="Day mode"><span>Night mode</span></a></div>
                <ul class="mob-ul">
                    <li><a href="/" class="link link-effect"><span>Home</span></a></li>
                    <li><a href="projects.html" class="link link-effect"><span>Projects</span></a></li>
                    <li><a href="about.html" class="link link-effect"><span>About</span></a></li>
                    <li><a href="404.html" class="link link-effect"><span>404</span></a></li>
                </ul>
                <div class="menu-center" id="js-menu-center">
                    <p class="get-in-touch">get in touch</p>
                    <ul>
                        <li><a href="#" class="link link-effect"><span>Mail</span></a></li>
                        <li><a href="#" class="link link-effect"><span>Telegram</span></a></li>
                        <li><a href="#" class="link link-effect"><span>Behance</span></a></li>
                        <li><a href="#" class="link link-effect"><span>Instagram</span></a></li>
                        <li><a href="#" class="link link-effect"><span>Dribbble</span></a></li>
                    </ul>
                    <a href="" class="lang-link">ru</a>
                </div>
                <div class="menu-close" id="js-menu-close"></div>
            </div>
        </div>

Day/Night versions

You can switch the theme in the menu:

If you want to use only the day theme you need to remove the “with-mode” class from the “js-menu” block

and also remove div.mode-link

If you want to use only the dark version, then you need to do the same steps, but also add the “dark” class to the “body”.

Main Title

The picture should have a hover-img class and be inside the .main-title.

<div class="main-title">
    <h1 class="title-with-img">
        <span>Hi! I’m <a href="about.html" class="selected js-title-with-img">Maya Delia</a>
        9+ years <br>of xp — Graphic & Web <br>Designer</span>
    </h1>
    <img src="img/author.jpg" alt="" class="title-img hover-img" data-top="" data-left=""
    style="width: 312px">
</div>

Video section

The path to the video is specified in the div#video-preload via the “data-video” attribute.

<div class="video" id="video-preload" data-video="video/short.mp4"></div>

Full-screen video is at the bottom of the page and has the structure:

<div class="full-video" style="display: none;">
        <video controls class="fullscreen-video" id="full-video">
            <source src="video/long.mp4" type="video/mp4">
        </video>
    </div>

Quote section

The Quote section has the structure:

<div class="quotes-section" id="quotes-section">
                <div class="wrap">
                    <div class="wrap_float">
                        <div class="quote-row quote-row-1">My project – <i>My project</i> - </div>
                        <div class="quote-row quote-row-2">My project – <i>My project</i> - </div>
                    </div>
                </div>
            </div>

To change the text in the creeping line, you need to edit the div.quote-row block. It is necessary to prescribe the text that will be repeated

Projects page

Each case element has a structure:

<a href="case.html" class="case-item">
    <h3 class="case-item-title link link-effect"><span>Coronto</span></h3>
    <div class="case-item-image">
        <div class="image-container case-img" style="background-image: url(img/bg-1.jpg);">
        </div>
    </div>
    <div class="case-item-info content__item-title">
        <div class="case-item-info-left">Web design, animation</div>
        <div class="case-item-info-right">2019</div>
    </div>
</a>

Case page

The title should be short.

You can use a video vimeo, but without sound.

<div class="video-iframe js-video" data-video="https://vimeo.com/VIDEO-ID"></div>

To create the effect of a smooth appearance of the element, use the js-effect class

<div class="quotes-section single-quote animation js-effect">
                <div class="wrap">
                    <div class="wrap_float">
                        <div class="quote-row quote-row-1">Animation – <i>Animation –</i> </div>
                    </div>
                </div>
            </div>

About page

The block with the quote must be issued through the span. If necessary, you can change the font size (style.css):

<div class="author-quote js-effect">
    <div class="wrap">
        <div class="wrap_float">
            <span>The result of our work</span> <span>— a qualitatively new</span> <span>and conscious level</span> <span>of your project or brand.</span>
        </div>
    </div>
</div>