- Tags
-
- Tags
- None
MLanding - A Fully customizable user-friendly and rensponsive Landing page for your Business Website, made with HTML/CSS/Javascript(Jquery)
Screenshots:
Configuration:
config.json
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
index.html (not full code shown)
List of Variables
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.
Screenshots:
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": "© 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"
]
}
}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
Purchase Goal:
- 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.
