Hello, thank you for using Magz! This template was made with by Kodinger Team. This template is released under the MIT License, free for personal and commercial use without any attribution. Just share this template with your friends.

You can start your website project with this awesome template and you don't have to start from scratch. We created this template for someone who wanted to start a website project but didn't have time to create HTML components from scratch. We know there are millions of free tempaltes out there but when you want to use them, you should let the template credit in the template footer. That's good, but we just want to help you start your website project faster and make your client happy without any attribution.


  • Fully Responsive
  • Latest Bootstrap 3
  • Built in HTML5 & CSS3
  • Ion Icons (Font Icons)
  • Google Fonts
  • 20+ Social Media Buttons
  • Available 14 Pages
    • Home
    • Detail Article
    • Category
    • Search
    • Pages
    • Contact
    • Login
    • Register
    • Forgot Password
    • Reset Password
    • 403 Error Page
    • 404 Error Page
    • 500 Error Page
    • 503 Error Page
  • Working Contact Form With PHPMailer
  • Unlimited Color Skins
  • Cross-browser Compatibillity
  • Documented
  • jQuery
  • Owl Carousel
  • EaseScroll.JS
  • iCheck.JS
  • Magnific Popup
  • Sweet Alert
  • More ...



We encourage you to read this documentation first before you begin development. Because you need to know some rules for better development and to make this template easy to update.

Folder Structure

Magz has a simple folder structure as in general, namely:

  • css

    This folder contains the CSS file used by Magz, if you want to make changes to the default CSS style then you have to create your own CSS file such as custom.css. We advise you to DON'T TOUCH ANY DEFAULT CSS FILE.

  • documentation

    This folder contains documentation files.

  • fonts

    This folder contains font files used by Magz, don't delete any files in this folder. But, you can replace with CDN in Google Fonts with the same font name.

  • images

    This folder contains image files, you can put your own image file in this folder.

  • js

    This folder contains JavaSciprt files. Like a CSS file, we advise you to DON'T TOUCH ANY DEFAULT JS FILE. But if you want, you can create your own JS file such as a custom.js.

  • scripts

    This folder contains the external libraries used by Magz, if you want to add some libraries then you can put them in this folder.

  • server

    This folder contains server-side programming such as PHP.

  • src

    This folder contains CSS source files written with SASS/SCSS.


By default Magz offers several ready-to-use pages. Such as Home, Login, Category, etc. But you can create your own page by starting with the following markup.

<!DOCTYPE html>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="description" content="Magz is a HTML5 & CSS3 magazine template is based on Bootstrap 3.">
		<meta name="author" content="Kodinger">
		<meta name="keyword" content="magz, html5, css3, template, magazine template">
		<!-- Shareable -->
		<meta property="og:title" content="HTML5 & CSS3 magazine template is based on Bootstrap 3" />
		<meta property="og:type" content="article" />
		<meta property="og:url" content="http://github.com/nauvalazhar/Magz" />
		<meta property="og:image" content="https://raw.githubusercontent.com/nauvalazhar/Magz/master/images/preview.png" />
		<title>Magz — Responsive HTML5 & CSS3 Magazine Template</title>
		<!-- Bootstrap -->
		<link rel="stylesheet" href="scripts/bootstrap/bootstrap.min.css">
		<!-- IonIcons -->
		<link rel="stylesheet" href="scripts/ionicons/css/ionicons.min.css">
		<!-- Toast -->
		<link rel="stylesheet" href="scripts/toast/jquery.toast.min.css">
		<!-- OwlCarousel -->
		<link rel="stylesheet" href="scripts/owlcarousel/dist/assets/owl.carousel.min.css">
		<link rel="stylesheet" href="scripts/owlcarousel/dist/assets/owl.theme.default.min.css">
		<!-- Magnific Popup -->
		<link rel="stylesheet" href="scripts/magnific-popup/dist/magnific-popup.css">
		<link rel="stylesheet" href="scripts/sweetalert/dist/sweetalert.css">
		<!-- Custom style -->
		<link rel="stylesheet" href="css/style.css">
		<link rel="stylesheet" href="css/skins/all.css">

		<p>Your content here</p>

		<!-- JS -->
		<script src="js/jquery.js"></script>
		<script src="js/jquery.migrate.js"></script>
		<script src="scripts/bootstrap/bootstrap.min.js"></script>
		<script>var $target_end=$(".best-of-the-week");</script>
		<script src="scripts/jquery-number/jquery.number.min.js"></script>
		<script src="scripts/owlcarousel/dist/owl.carousel.min.js"></script>
		<script src="scripts/magnific-popup/dist/jquery.magnific-popup.min.js"></script>
		<script src="scripts/easescroll/jquery.easeScroll.js"></script>
		<script src="scripts/sweetalert/dist/sweetalert.min.js"></script>
		<script src="scripts/toast/jquery.toast.min.js"></script>
		<script src="js/e-magz.js"></script>


Magz has some skins by default, such as Default, Blue, Orange and Purple. To use the skin you should place CSS skin file you want under the style.css file before the </head> tag. Let's say we'll use blue skin.

<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/skins/blue.css"></head>
Then you should add skin-blue class to the <body> tag.

Create Your Own Skin

You can create your own skin.

  • Copy the blue.scss file inside the src/skins folder. Then rename the file to the one you want.
  • In this file you can do anything, for example changing primary and secondary key with your own color.
  • Compile with SASS, run this command in the root directory of the template.
    sass -w src/skins:css/skins --style expanded


Fonts Used
  • Lato
  • Raleway
  • Merriweather
Font Icon Used
Ionicons By Ionic Framework


Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6



  • Primary

  • Secondary

  • Success

  • Warning

  • Info

  • Danger



Default Input
Rounded Input
Placeholder Input
Floating Input (Stacked)
Floating Label (Focus)

Featured Author Card



	text: 'Hello There!',
	position: 'top-right',
	heading: 'Toast', 
	bgColor: '#3498db'
Read full documentation here.


	checkboxClass: 'icheckbox_square-red',
	radioClass: 'iradio_square-red',
	cursor: true
Read full documentation here.

Sweet Alert

	'Something went wrong!',

Magnific Popup


Found some bugs? Please create an issue or if you want make this template better, then let's start contributing. We think you need a CMS for this awesome template if so, you can contact us here or on our Facebook Page. So if you have any problems, questions or feature requests about this template you can email us. Lastly don't forget to buy us a hamburgers for support and that will keep us still alive.


Here is some Frequently Ask Questions.

Is Magz free?

Magz is free for personal and commercial use without any attribution. Just share this template with your friends and don't say anything.

What license does Magz use?

MIT License

Can i create WordPress theme based on Magz and sell it on the marketplace?

Yes, you can. You're free to create WordPress theme based on this template without any attribution. In addition, you can make PHP as a back-end and Magz as a front-end.

Magz is free, so how can you earn money?

As everyone know, Magz is free and you can get it with $0. So, how can we earn money? We will not get anything 'till you donate or give us some project.


Some components in magz are created by us, but most of them are made by some authors of these plugins, images and fonts. So thank them too. For making something amazing.