Metromega - Responsive HTML5 Metro Template
Update
Metromega gets a Vertical Version and Bootstrap gets updated to version 3.
The Metromega Concept
Metromega is a vertically responsive HTML5 & CSS3 Template with horizontal scrolling. It is inspired by the Windows 8 Metro UI, offering an exclusive new user experience. Metromega has a custom made responsive framework, therefore it works and looks perfectly in every browser and every device.
Revolutionary
When we created Metromega, our target was to make something revolutionary. For that reason, we created the Metromega Responsive Framework, a vertically responsive framework, created for the ultimate user experience.
Users can simply jump in, without any coding experience. The framework provides everything you need, with perfectly semantic code blocks. Creating an amazing website has never been easier.
Responsive
Desktop, Laptop, Tablet and Phone. The best thing about the new concept of Vertically Responsive Websites is that your content will look amazing on any device, the tiles only get repositioned.
Retina Display Ready
We did say your content will look amazing on any device, didn’t we? We optimized the Template for Retina Displays so you’ll love staying on it from your Retina Display phone or tablet.
Exclusive Plugins
We wanted Metromega to be Complete. That’s why we created an exclusive slideshow plugin and an exclusive lightbox plugin.
The slideshow plugin is called Tileshow, which can also handle background images and has an extremely simple markup.
We called the Lightbox plugin mLightbox, because we simply love the name Metromega. Our lightbox can handle images, videos and our custom blog posts.
Made to be simple
Made for everyone, Metromega has extremely simple and intuitive markup. With a very complete documentation, it offers you the possibility to exploit all of Metromega’s features in no time.
Bootstrap Integration
Because we know you like using the things you’re used to, we’ve integrated Bootstrap as part of our HTML tiles and blog posts. You won’t have to worry about your design not being responsive.
Working Contact Form
Luckily for you, Metromega comes with a perfectly working Contact form and has a complete documentation.
Multipurpose
You can use Metromega for an unlimited number of situations: online portfolios, corporate websites, blogs, application user interfaces, even admin systems.
Tons of features
- Simple & Intuitive
- Complete Documentation
- Powered by Metafizzy Isotope (25$)
- Exclusive Custom Lightbox Plugin
- Exclusive Custom Slideshow Plugin
- Semantic HTML5 Markup
- CSS3 Transitions and Animations
- Bootstrap Integration
- Custom Metromega Responsive Framework
- Vertically Responsive
- Horizontal Scrolling
- Unlimited Possibilities
And could you make this theme fully responsive, because blog pages aren’t responsive at all
ReplyDeleteI will look into it and provide an update for the theme. Thank you!
ReplyDeleteMaybe some update?
ReplyDeleteCan I have animation in different tiles? Can I animate all tiles, in order one after another?
ReplyDeleteHi arkgroup, you can have a different animation for each tile. You can code them to animate on load using a third party plugin which isn’t included by default.
ReplyDeleteHi,
ReplyDeletei like your demo. Great job.
Is it compatible with wordpress websites (i would like to use this only for a homepage).
Thanks,
Cri
Hi criparis,
ReplyDeleteThis is a simple HTML Template, not a WordPress theme. I’m glad to hear you like it.
If you’re experienced with HTML, PHP and WordPress you can implement the homepage yourself.
Olá Pixevil consegui fazer uma versão Wordpress para este template?
ReplyDeleteGreat theme. Any chance for adding a searchbox would be wonderful.
ReplyDeleteThank you fkj. We’re working on a remake of this theme. Thank you for your interest.
ReplyDeleteHI Grozav, Tiles are arranging in horizontal line instead of wrapping. below is my css and html structure let me know what I am doing wrong ? layout/
ReplyDeletehtml {
height: 100%;
}
body {
height: auto;
min-height: 100%;
position: relative;
}
.app-content {
box-shadow: none;
margin-top: 70px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
height: 100%;
}
content {
height: 80%;
width: 6000px;
float:left;
}
section {
display: block;
}
.section{
float:left;
margin-left:36px;
padding-top:24px;
height:584px;
width:auto;
overflow:hidden;
}
<section id=”content”>
<section class=”clearfix section” id=”start”>
Tiles…
</section>
<section class=”clearfix section” id=”start”>
Tiles…
</section>
Hi Prestine,
ReplyDeleteCan you please send me a live demo of the issue? Alternatively, please email the files to me.
I’ll do my best to help you solve it.
Thank you!
How to make tile tittle center aligned
ReplyDeleteHi Prestine,
ReplyDeleteYou could just place it inside an
<i />
tag. That should center the tile text properly, just like it does with icons.
<div class="tile orange w2 h1 icon-featurecw title-fadeout isotope-item">
<a data-scroll="scrollto" href="#about" class="link">
<i>Hello world</i>
<p class="title">About</p>
</a>
</div>
how to change ICON on each tile?
ReplyDeleteI try to open index.html (this template) offline. It not works. why?
ReplyDeleteCan I get the HTML code when buying this demo ?
ReplyDeleteCan I amend it?