Welcome

CopyGen - AI Writer & Copywriting Landing Page HTML Template

CopyGen - is a responsive website template. It is fully flexible user-friendly and responsive template that looks great on Desktops, Tablets, and Mobile Devices. This template built with Boostrap 5, HTML5, CSS3, Vanilla Js, SASS, and Gulp. It includes 3 Homepage, and 6+ pre-built inner pages. Also the template well organized folder structure, clean & commented code.

If you like our template. please don't forgot to rate it. Thank you so much!

Quick Start - with Gulp Workflow

If you want pre-build dist package then you can simply use /html folder as dist copy and you can directly work on that. But if you want change scss or js source file then you need to install node and use gulp command line.
Installing Node.js
  • 1. Download the latest theme source from themeforest.
  • 2. Download and install Node.js from nodejs.org (if you dont have it installed)
  • 3. Start command prompt window or terminal and change directory to [ CopyGen-template ] folder. 
  • cd [ CopyGen-template-folder-name ]
  • 4. Run following command to install all the "dependencies and devDependencies". It could take few minutes to complete installation.
  • npm install
  • 5. Run the following command to compile all the assets(sass, js, media) and copy HTML templates to a new folder called [dist] in same directory. 
  • gulp build
  • 6. After you finished with above steps, run the following command to compile scss into css. it will keep running watch command to compile you edit.
  • gulp develop

File and Folder Structure

    
    |--docs/
    |--copygen-html/
    |--|--html/
    |--|--|--index.html
    |--|--|--index-s2.html
    |--|--|--[other-pages].html
    |--|--|--assets/
    |--|--|--|--css/
    |--|--|--|--|--style.css
    |--|--|--|--|--style-s2.css
    |--|--|--|--|--theme.css
    |--|--|--|--fonts/
    |--|--|--|--images/
    |--|--|--|--js/
    |--|--|--|--|--bundle.js
    |--|--|--|--|--scripts.js
    |--|--|--images/
    |--|--|--|--avatar/
    |--|--|--|--logo.png
    |--|--|--form/
    |--|--|--|--message-form.php

    |--|--src/
    |--|--|--assets/
    |--|--|--|--fonts/
    |--|--|--|--images/
    |--|--|--|--js/
    |--|--|--|--|--vendors/
    |--|--|--|--|--script.js
    |--|--|--|--|--bundle.js
    |--|--|--|--scss/
    |--|--|--|--|--|--core/
    |--|--|--|--|--|--extend/
    |--|--|--|--|--|--bootstrap/
    |--|--|--|--|--|--vendors/
    |--|--|--|--|--_variables.scss
    |--|--|--|--|--_variables-[other-variables].scss
    |--|--|--|--|--style.scss
    |--|--|--|--|--style-[other-styles].scss
    |--|--|--|--|--theme.scss
    |--|--gulpfile.js
    |--|--package.json

HTML structure

This is a basic HTML Structure.

    
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="author" content="Softnio">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="/images/favicon.png">
        <title>CopyGen || Website Tagline</title>
        <link rel="stylesheet" href="/assets/css/style.css?v1.0.0">
    </head>
    <body class="nk-body" data-navbar-collapse="xl">
        <div class="nk-app-root">
            <header class="nk-header">

            </header><!-- .nk-header -->
            <main class="nk-pages">
                <section class="section">
                    <div class="container">

                    </div><!-- .container -->
                </section><!-- .section -->
            </main>
            <footer class="nk-footer">

            </footer><!-- .nk-footer -->
        </div>
        <script src="/assets/js/bundle.js?v1.0.0"></script>
        <script src="/assets/js/scripts.js?v1.0.0"></script>
    </body>
</html>

SCSS

We have created all the scss files in the src/scss folder.

File Structure
    
    |--src/
    |--|--scss/
    |--|--|--core/
    |--|--|--|--_style.scss
    |--|--|--extend/
    |--|--|--|--bootstrap/
    |--|--|--vendors/
    |--|--|--_variables.scss
    |--|--|--_variables-[other-variables].scss
    |--|--|--style.scss
    |--|--|--style-[other-styles].scss

Editing style css is not recommended if you are not that expert at css , just create another new file and include that in your html file

Javascript

We have added all js files inside the src/js/bundle.js file. and our custom javascript code inside the src/js/script.js file.

File structure
    
    |--src/
    |--|--js/
    |--|--|--bundle.js
    |--|--|--scripts.js

If you are not familiar with javascript, then it is hightly recommended do not make any changes to core JS files. because it may get error if you make any changes inside the core js files.

It is recommended to write your JS code, then create a new js file in js folder. and write your own javascript code.

Dark Mode

To activate dark mode by default you need to add .is-dark class with body and then add .dark-active class with .dark-mode-toggle buttons.

This is just an HTML template so our darkmode toggle is not fully functional, it changes back to default mode after page reload.

RTL Mode

For static site

if you want use rtl of template, then copy html files from rtl-html folder and then paste (replace) into html folder.

For functional application

To active RTL mode you need to add dir="rtl" with body tag and then add .rtl before css file extension for example style.css should be style.rtl.css .

How to Set Edit PHP Files for Working Form

First open the php file located into form folder. Files are 'message-form.php'. On the file you will find bellow code. Just update your sitename, your email and name. If you want to add multiple email then just duplicate the line '$emailTO[] = array...' and add another email.


  ### Enter Your Sitename 
  $sitename = 'Your Sitename';

  ### Enter your email addresses: @required
  $emailTO[] = array( 'email' => 'email@yoursite.com', 'name' => 'Name' );

If you want to add CC email address then just enable below line and update same way as email too.

    
  //$emailCC[] = array( 'email' => 'email@yoursite.com', 'name' => 'Your Name' );

If you want to use SMTP, please enable bellow line of code and upate with your smtp information.

    
  // $mail->isSMTP();
  // $mail->SMTPDebug = 0;
  // $mail->Host = 'smtp_host';
  // $mail->Port = 587;
  // $mail->SMTPAuth = true;
  // $mail->Username = 'smtp_username';
  // $mail->Password = 'smtp_password';