[HTML/CSS/Jquery/Config.json] MLanding - A Fully customizable rensponsive Landing page Build 2

A Fully customizable Landing page for your Business Website.
Tags
Tags
None
MLanding - A Fully customizable user-friendly and rensponsive Landing page for your Business Website, made with HTML/CSS/Javascript(Jquery)

Screenshots:

03e1a7ea0cc982b312490aed5b4f7e18.gif


963441d91850af36005e5d9df4072f9e.gif


41d724cf723c4c55e17d208c5f23cf76.gif


9c5575f2eca8e4dd807921d1ea3ba9c5.gif


94f3b7f361867bf564d540833c085e10.gif


eedd8852946fcfb04e23e8b9d1b842ea.gif


e8773cac18770ee53afcfa3512ec4d45.gif


Configuration:
config.json
Code:
{
    "ServerName": "Example",
    "ServerIP": "play.blazevortex.com",
    "Description": "enter your Description here.",
    "ContactEmail": "[email protected]",
    "Color": "purple",

    "HeaderContent": {
        "Title": "Enter your Title",
        "Description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
        "ButtonName": "Get Started",
        "ButtonURL": "#"
    },
    "FooterContent": {
        "Title": "Enter your Title",
        "Description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
        "ButtonName": "Get Started",
        "ButtonURL": "#"
    },

    "Feature": [
        {
            "title": "Test Feature 1",
            "paragraph": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\ntempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\nquis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.",
            "image": "src/img/example/feature.png"
        },
        {
            "title": "Test Feature 2",
            "paragraph": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\ntempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\nquis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.",
            "image": "src/img/example/bv.png"
        },
        {
            "title": "Test Feature 3",
            "paragraph": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\ntempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\nquis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.",
            "image": "src/img/example/h.png"
        },
        {
            "title": "Test Feature 4",
            "paragraph": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\ntempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\nquis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.",
            "image": "src/img/example/hive.png"
        }
    ],
    "Navigation": [
        {
            "name": "Home",
            "url":"#home",
            "selected": true
        },
        {
            "name": "About Us",
            "url":"#aboutus",
            "selected": false
        },
        {
            "name": "Servers",
            "url":"#servers",
            "selected": false
        },
        {
            "name": "Ranks",
            "url":"#ranks",
            "selected": false
        },
        {
            "name": "Staff",
            "url":"#staff",
            "selected": false
        },
        {
            "name": "Gallery",
            "url":"#gallery",
            "selected": false
        }
    ],
    "Footer": {
        "firstParagraph": "&copy; Copyright <span style='color: {{color}}'>{{name}}</span> {{year}}",
        "secondParagraph": "We are not affiliated with Mojang AB in any way. Minecraft is a copyright of Mojang AB."
    },
    "SocialMedia": {
        "show": true,
        "facebook": "arsen.abajyan9",
        "twitter": "arsen_abajyan",
        "youtube": "https://www.youtube.com/channel/UC5s1lD3r5ofBnypQUonjcRg",
        "instagram": ""
    },
    "Servers" : [
        {
            "name": "BlazeVortex",
            "description": "Enter your server description.",
            "ip": "play.blazevortex.com",
            "image": "src/img/example/bv.png",
            "showCopyIP": true,
            "showPlayers": true,
            "color": "purple"
        },
        {
            "name": "Hypixel",
            "description": "Enter your server description.",
            "ip": "play.hypixel.net",
            "image": "src/img/example/h.png",
            "showCopyIP": true,
            "showPlayers": true,
            "color": "purple"
        },
        {
            "name": "HiveMC",
            "description": "Enter your server description.",
            "ip": "play.hivemc.com",
            "image": "src/img/example/hive.png",
            "showCopyIP": true,
            "showPlayers": true,
            "color": "purple"
        }

    ],
    "Ranks": [
        {
            "name": "VIP",
            "color": "purple",
            "currency": "$",
            "cost": "5",
            "cent": ".00",
            "per": "lifetime",
            "features": [
                "[Vip] Prefix",
                "Set 2 Homes"
            ],
            "link": "#",
            "buttonName": "Buy Now"
        },
        {
            "name": "MVP",
            "color": "purple",
            "currency": "$",
            "cost": "10",
            "cent": ".00",
            "per": "lifetime",
            "features": [
                "[Mvp] Prefix",
                "Set 3 Homes (/sethome)",
                "/pv 1 {your own private chest vaults}"
            ],
            "link": "#",
            "buttonName": "Buy Now"
        },
        {
            "name": "Premium",
            "color": "purple",
            "currency": "$",
            "cost": "15",
            "cent": ".99",
            "per": "lifetime",
            "features": [
                "Test Feature Number 1",
                "Test Feature Number 2",
                "Test Feature Number 3",
                "Test Feature Number 4"
            ],
            "link": "#",
            "buttonName": "Buy Now"
        }
    ],
    "Team": [
        {
            "username": "blijgozertje",
            "role": "Owner",
            "color": "purple",
            "description": "Enter your Description."
        },
        {
            "username": "Petscop",
            "role": "Paul",
            "color": "purple",
            "description": "Enter your Description."
        },
        {
            "username": "Pringe",
            "role": "Manager",
            "color": "purple",
            "description": "Enter your Description."
        },
        {
            "username": "Aceyx",
            "role": "Youtuber",
            "color": "purple",
            "description": "Enter your Description."
        },
        {
            "username": "blijgozertje",
            "role": "Owner",
            "color": "purple",
            "description": "Enter your Description."
        }
    ],
    "Gallery": {
        "color": "#80008080",
        "images": [
            "src/img/example/gallery/1.jpg",
            "src/img/example/gallery/2.jpg",
            "src/img/example/gallery/3.jpg",
            "src/img/example/gallery/4.jpg",
            "src/img/example/gallery/5.jpg"
        ]
    }
}
Note: to go to the next line, use \n
If this json file is confusing you. You can take a look at this guide https://www.impressivewebs.com/what-is-json-introduction-guide-for-beginners/ this shows the basics of json.

structure.js
Code:
    var template = {
        navigationTemplate: `
        <div class="navigation">
            <div class="container">
                <ul class="inline-li no-margin">
                    {{links}}
                    <li class="mobile-menu"><a href="javascript:void(0)"><span><i class="icon ion-android-menu"></i></span></a></li>
                </ul> 
            </div>
        </div>
        <div class="mobile-nav hidden">
            <div class="dark"></div>
            <div class="mobile shadow-static">
                    <ul class="inline-li">
                        {{links}}
                    </ul>
            </div>
        </div>
        `,
        serverTemplate: `<div class="col-4">
                <div class="server-status shadow" style="border-color:{{color}};" ip="{{ip}}">
                    <div class="row">
                        <div class="col-4 no-media">
                            <img src="{{image}}" class="server-icon margin-center" alt="{{name}}">
                        </div>
                        <div class="col-8 no-media">
                            <ul class="inline-li">
                                <li><h3 class="status-title">{{name}}</h3><div class="status online"></div></li>
                                <li><p class="server-description">{{description}}</p></li>
                            </ul>
                            <ul class="inline-li">
                                <li><p class="player-count"><i class="icon ion-android-people" style="color:{{color}};"></i> <span class="playerCount">0</span> out of <span class="maxPlayerCount">0</span></p></li>
                                <li><a href="javascript:void(0)" data-clipboard-text="{{ip}}" class="no-hover"><i class="icon ion-ios-copy-outline" style="color:{{color}};"></i> <span class="server-name">{{ip}}</span></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>`,
        rankTemplate: `<div class="col-4">
                <div class="rankBody shadow" style="border-color:{{color}}">
                    <div class="rankTitle" style="background-color:{{color}}">
                        <div class="semiTitle"><h3>{{name}}</h3></div>
                        <h4><span class="currency">$</span>{{cost}}<span class="cents">{{cent}}</span><span class="per">/{{per}}</span></h4>
                    </div>
                    <div class="rank">
                        <ul class="rankFeatures inline-li">{{features}}</ul>
                        <a class="margin-center btn" style="color:{{color}}" href="{{link}}">Buy Now<div class="lableNoHover"></div><div class="label" style="background-color:{{color}}"></div></a>
                    </div>
                </div>
            </div>`,
        staffTeamTemplate: `
            <div class="col-3 showInOrder">
                <div class="staff shadow" style="border-color:{{color}}">
                    <ul class="inline-li staffList">
                        <li><img class="margin-center" src="https://visage.surgeplay.com/bust/128/{{name}}"></li>
                        <li><p class="staffName" style="color:{{color}}">{{name}}</p></li>
                        <li><p class="staffRole">{{role}}</p></li>
                        <li><p class="staffQuote margin-center">{{quote}}</p></li>
                    </ul>
                </div>
            </div>
            `,
        galleryTemplate: `<div class="col-4"><img class="gallery" color="{{color}}" src="{{img}}"></div>`,
        footerTemplate: `
        <div class="footer">
            <div class="container">
                <div class="row">
                    <div class="col-6">
                        <p class="paragraph">{{secondparagraph}}</p>
                    </div>
                    <div class="col-6">
                        <ul class="inline-li socialMedia">
                            {{social}}
                        </ul>
                        <p class="paragraph">{{paragraph}}</p>
                    </div>
                </div>
            </div>
        </div>
        `,
        featureTemplate: `
                <div class="col-4">
                    <div class="feature shadow">
                        <div class="feature-body">
                            <img src="{{image}}">
                            <h2>{{title}}</h2>
                            <p>{{paragraph}}</p>             
                        </div>
                    </div>
                </div>
        `,
        reloadBtnTemplate: `<a href="javascript:void(0)" id="reloadServer" class="lnkbtn colorHover"><i class="icon ion-refresh"></i> Reload The Servers <div class="lableNoHover"></div><div class="label"></div></a>`,
        headerContentTemplate: `
        <div class="headerContent shadow-static">
            <div class="container centerGird">
                    <h3>{{title}}</h3>
                    <p>{{description}}</p>
                    <a class="bigBtn white shadow margin-1em" href="{{url}}">{{btnname}}</a>
            </div>
        </div>
        `,
        footerContentTemplate: `
        <div class="footerContent">
            <div class="container">
                <div class="row">
                    <div class="col-6">
                        <h3>{{title}}</h3>
                        <p>{{description}}</p>
                    </div>         
                    <div class="col-6 relative">
                        <a class="bigBtn white shadow fullCenter" href="{{url}}">{{btnname}}</a>
                    </div>
                </div>
            </div>
        </div>
        `,
        styleTemplate: `
        <style>
            .colorHover:hover,h2
            {
                color: {{color}}!important;
                border-color: {{color}}!important;
            }
            .whiteNavigation
            {
                background-color: #fff!important;
            }
            .whiteNavigation a
            {
                color: {{color}}!important;
            }
            .feature
            {
                border-color: {{color}}!important;
            }
            .navigation:not(.mobile),.bigBtn,.footerContent,.headerContent,.whiteNavigation a::before
            {
                background-color: {{color}};
            }
        </style>
        `
    };

index.html (not full code shown)
Code:
<div id="home" class="hide-preload">
        {{navigation}}
        {{headerContent}}
        <h2 id="aboutus">About us</h2>
        <p class="titleDesciription">Enter your description.</p>
        <div class="container">
            {{feature}}
        </div>

        <h2 id="servers">All Servers Status</h2>
        <p class="titleDesciription">Enter your description.</p>
        <div class="container">
            {{reloadBtn}}
            {{servers}}
        </div>

        <h2 id="ranks">Dontation Perks</h2>
        <p class="titleDesciription">Enter your description.</p>
        <div class="container">
            <div class="ranks">
                {{ranks}}
            </div>
        </div>

        <h2 id="staff">Meet our staff team</h2>
        <p class="titleDesciription">Enter your description.</p>
        <div class="container">
            {{staff}}
        </div>

        <h2 id="gallery">Showcase</h2>
        <p class="titleDesciription">Enter your description.</p>
        <div class="container">
            <div class="galleryList" id="photos">
                {{gallery}}
            </div>
        </div>
        {{footerContent}}
        {{footer}}
        {{style}}
</div>

List of Variables
  • {{ip}} prints your ip
  • {{copyright}} prints a copyright symbol
  • {{name}} prints your Company Name
  • {{year}} prints current year
More variables will be added soon.

Purchase Goal:
- 1 Purchase Severingcastle8
- 5 Purchases
- 15 Purchases
- 50 Purchases

List of Companies are using this Resource:
- PM me to include your website.

Dm me here if you got any questions/issues.

Latest updates

  1. Build 2

    In this build you will have a website with config(editing website using config.json) and without...

Latest reviews

I used this for a shop base and now is really good.
Petscop
Petscop
Hello zManuel, thank you for your Review!
It works perfectly and looks great. 10/10 very nice creator.
Petscop
Petscop
Thank you for your Review!

Author

Petscop

Owner
Author
Petscop
Downloads
8
Type
Digital product
License duration
Unlimited
Price
9.99 USD
Views
1,371
First release
Last update
Rating
5.00 star(s) 2 ratings
Top
You need to upgrade!
Our dark style is reserved for our Premium members. Upgrade here.