Introducing Responsive Pro with Theme Customizer

Responsive Pro

With Responsive Pro and the Theme Customizer you can now easily launch a beautiful custom responsive website faster and easier than ever before.

Upgrade to Responsive Pro for just $24

rpropicker

It is the same Responsive you’ve come to love, simply enhanced to help you build amazing responsive websites live.

For a limited time only Responsive Pro is on sale for just $24, and can be purchased exclusively in the CyberChimps WordPress Themes Store.

Responsive Pro adds exciting new customization features to WordPress including the Theme Customizer which lets you visually change the appearance of the theme live with 12 colorful skins to select from, typography options with Google Fonts, and other powerful customization tools. We also simplified the theme options panel, as well as built-in support for popular plugins including bbPress and WooCommerce. Pro customers also get access to our priority support community.

“We worked with the community to make sure we focused on adding premium features to Responsive Pro that add significant value,” said Trent Lapinski, Chief Executive Officer of CyberChimps Inc. “Every new feature in Responsive Pro is designed to make you fall in love with Responsive all over again.”

Three Reasons to Upgrade

  1. Amazing new customization features.
  2. Better 3rd party plugin support.
  3. Access to our Pro support community.

What are you waiting for?

Learn more about Responsive Pro

 

Posted in New Releases, Themes

Responsive Theme Now on WordPress.com

WordPress.com today announced that Responsive is now available for free on WordPress.com.

Designed by Emil Uzelac, Responsive is clean, feature-rich, and you guessed it… completely responsive! With a Home page template that allows you to concentrate on specific content in a more traditional website layout, all while looking great across any device, this theme is well-suited to anyone hoping to start their website on WordPress.com.

Customizable to your heart’s content with seven widget areas, four custom menu areas, and seven page templates, make Responsive respond to just the level of functionality and desired layout you need. Read more about Responsive on the Theme Showcase or start customizing your own blog in Appearance → Themes.

Use Responsive on WordPress.com.

Tagged with: , , , , ,
Posted in Themes

CyberChimps Inc Acquires ThemeID and The ‘Responsive’ WordPress Theme As It Celebrates 500,000 Downloads

chimpthemeid

SAN FRANCISCO-February 26, 2013- CyberChimps Inc today reached an agreement with ThemeID, to acquire ThemeID.com, and their WordPress Theme named ‘Responsive’ which today received over 500,000 downloads on WordPress.org.

 “When I first created ‘Responsive’ I never imagined it would receive half a million downloads in just under a year,” said Emil Uzelac, founder of ThemeID. “It has been an amazing experience, but it has grown so quickly that it has become difficult to maintain alone. I wanted to make sure that ‘Responsive’ and its users continue to be supported, I am very excited to see what the team at CyberChimps will be able to do with what I’ve created.”

Responsive will continue to be available for free on WordPress.org, and CyberChimps will simply be taking over development, as well as customer support.

“At CyberChimps we pride ourselves on building open source responsive WordPress themes that just work,” said Trent Lapinski, CEO of CyberChimps Inc. “ThemeID’s theme elegantly named ‘Responsive’ fits perfectly into our philosophy of what a responsive WordPress theme should be, and we are excited to welcome ‘Responsive’ and ThemeID into the CyberChimps family.”

As a special welcome to the CyberChimps family, we are offering a $5 off coupon code for any of CyberChimps Responsive WordPress Themes, simply enter coupon code: themeid5 upon check out in the CyberChimps Store (offer is good through the end of April, 2013).

We will be transitioning ThemeID over to CyberChimps so please bear with us as we move servers over the next few days.

Benefits of the deal

  • CyberChimps will continue innovating and developing the Responsive on WordPress.org.
  • Responsive will remain free and open source (released under the GPL).
  • Responsive is now available on Github (https://github.com/cyberchimps/responsive).
  • Responsive 1.9 (http://themeid.com/whats-new-in-responsive/) is actively being developed (https://github.com/cyberchimps/responsive/tree/1.9), and will be released soon.
  • CyberChimps will be developing and releasing a Pro version of ‘Responsive’ in March to paying customers powered by Twitter Bootstrap and CyberChimps’ responsive theme options panel.
  • We will be moving support over to CyberChimps Support Forums, and bringing on ThemeID staff to help assist in the transition.
  • Pre-existing ThemeID members will continue to get access to support for free.

About CyberChimps

CyberChimps Inc is a WordPress Theme Shop that develops responsive touch friendly drag and drop WordPress themes you can trust, and is based out of San Francisco, California. The company was founded in 2010 by Trent Lapinski, and is quickly becoming one of the fastest growing WordPress Theme developers on the Internet.

For news and updates please follow CyberChimps on Twitter, and Like us on Facebook.

http://cyberchimps.com

About ThemeID

ThemeID was founded by Emil Uzelac, and has been dedicated to servicing the WordPress community and creating powerful yet easy to use WordPress themes since 2010.

http://themeid.com

Tagged with: , , , , , , , , , , , , , ,
Posted in News

Complete Breakdown of Responsive Videos

There had been a few posts on the forum asking about adding responsive videos. At the time I was unable to give a good answer. Now I have taken time to do a bit of research and I able to give a number of responsive video solutions. The solutions are in the order of difficulty, starting with the easiest solution. These are the players that I am going to be covering today.

Note – This post is written for the Responsive theme for WordPress but it does not mean it cannot be used for any other themes or site types. FitVids.js is integrated in Responsive so you will not need to add it when using Responsive. For all the rest of you please see the part on FitVids.js.

YouTube

  • Very easy to set up
  • Needs FitVids.js so that it is responsive
  • The video is hosted on YouTube
  • Works easily on multiple devices and browsers

The easiest solution is to use YouTube. It works on multiple devices. In some countries YouTube plays an advertisement before the video. If  you upload your own video this should not be the case. At the end of the video you get a grid with other videos. If you don’t want those then when embedding YouTube make sure you uncheck the “Show suggested videos when the video finishes”.

YouTube share settings

Youtube Demo

The rest of the solutions are for those who do not want to use the YouTube player and wish to host their own video.

Sublime Video

  • Easy to set up with the code generator
  • Need to add JavaScript code
  • No need for FitVids.js
  • Basic HTML5 code with flash fallback for IE8
  • Works with self hosted videos and YouTube videos

Sublime offers a solution for your own hosted videos and also YouTube videos. Chose your option and then add the link to your media or for the YouTube videos add the video id.

Sublime Video Source

In the video setting the “Fit” option is very important.

Video Settings

At the end you can click on the “Get the Code” button at the bottom. You will then get a code like this.

<video id="video1" class="sublime" poster="http://media.sublimevideo.net/vpa/ms_800.jpg" width="640" height="360" data-autoresize="fit" data-uid="a55c1534" data-name="Midnight Sun" preload="none">
	<source src="http://media.sublimevideo.net/vpa/ms_360p.mp4" />
	<source src="http://media.sublimevideo.net/vpa/ms_720p.mp4" data-quality="hd" />
	<source src="http://media.sublimevideo.net/vpa/ms_360p.webm" />
	<source src="http://media.sublimevideo.net/vpa/ms_720p.webm" data-quality="hd" />
</video>

The next step is to add the JavaScript. Every site has its own file.

<script type="text/javascript" src="//cdn.sublimevideo.net/js/emx0sm0y-beta.js"></script>

Sublime Demo (YouTube video) Sublime Demo (hosted video)

Wistia

  • Very Simple – only one file to upload
  • the code is an iframe
  • Hosted on the Wistia servers
  • built in Video analytic
  • Free version (3 videos / 5 GB bandwidth / branded player)
  • Paid version begins at $25/mo
  • has additional featured e.g. social sharing, call to action, require email to play and a few more which you can find here.

Solution 1

<iframe src="http://fast.wistia.net/embed/iframe/3bfl0abrog?controlsVisibleOnLoad=true&version=v1&videoHeight=360&videoWidth=640&volumeControl=true" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" width="640" height="360"></iframe>

Wistia Demo

Solution 2

There is a solution where Wistia supports  responsive videos with their own code. So FitVids.js is not needed. To be able to achive this you need to chose the API option.

Select API Option

Then you need to add videoFoam: true to the same place where the videoWidth is.

Example code

<div id="wistia_3bfl0abrog" class="wistia_embed" style="width:640px;height:360px;" data-video-width="640" data-video-height="360">&nbsp;</div>
<script charset="ISO-8859-1" src="https://fast.wistia.com/static/concat/E-v1%2CpostRoll-v1.js"></script>
<script>
wistiaEmbed = Wistia.embed("3bfl0abrog", {
  version: "v1",
  videoWidth: 640,
  videoHeight: 360,
  volumeControl: true,
  controlsVisibleOnLoad: true,
  videoFoam: true,
  plugin: {
    "postRoll-v1": {
      text: "Thank you for watching",
      link: "#",
      style: {
        backgroundColor: "#616161",
        color: "#ffffff",
        fontSize: "36px",
        fontFamily: "Gill Sans, Helvetica, Arial, sans-serif"
      }
    }
  }
});
</script>

Wistia own Demo Wistia my Demo

Simple HTML5 Video

  • Need to create markup
  • simple set up
  • videos hosted on own site
  • different players on every browser
  • IE 8 and lower are not supported

The video tag is a new standard to display videos. I have added more information then you might need. To understand it best I have split this section into two parts.

HTML5 Markup

Here is a simple code example

<video src="http://testing.grappler.tk/files/2013/01/trailer_1080p.webm" width="320" height="240" controls="controls" preload="none"></video>

So that the videos will work on multiple browser we will need multiple formats.

Here is a simple code example. I have also added a possibility to load a lower resolution video for smaller devices.

<video width="320" height="240" controls preload="metadata">
	<source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.mp4"  type="video/mp4"/>
	<source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.webm" type="video/webm"/>
	<source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.ogv"  type="video/ogg"/>
</video>

The video Tag has the following attributes. Some of them are easy to understand.

  • global attributes – standard atributes like class and id
  • autoplay
  • preload - none, metadata, auto
  • controls
  • loop
  • poster – poster=”/image.jpg”
  • height
  • width
  • mediagroup – control two media elements(videos) through the first element(video)
  • muted
  • src – video link

W3 Video Tag Reference

Here are the source attributes.

  • global attributes
  • src
  • type
  • media

W3 Source Tag Reference

So to have a responsive HTML5 video you need to have this CSS.

video {
	width: 100%;
	max-width: 100%;
	height: auto;
}

You can use a service provided by video.js to create HTML5 video markup.

Video Files

There are three main video files.

Format Video Encoding MIME-type
MP4 H264 video/mp4
WebM VP8 video/webm
Ogg Theora video/ogg

Not every browser supports all formats that is why we include all of them in the html. The easist way to get your video in the different formats is to use Miro converter

Heads up! I had some problems playing the webm format in Firefox that was converted by Miro.
Miro Support said: 

To get around this  download an updated version of ffmpeg from here: http://ffmpeg.zeranoe.com/builds/

Take the ffmpeg.exe file from the updated build – and dropped it into C:Program FilesParticipatory Culture FoundationMiro Video Converterffmpeg -  replacing the existing ffmpeg.exe file and then convert without issue using MVC.

We will have to make a new release to update ffmpeg – but in the meantime you can use the workaround and you should be all set.

  • Mozilla Firefox – WebM, Ogg
  • Google Chrome – MP4, WebM, Ogg
  • Opera – WebM, Ogg
  • Safari – MP4
  • Internet Explorer 9+ – MP4
  • Internet Explorer 6-8 – No HTML5, Flash Only!

To test it your self Video Format Test

WordPress does not support webm at the moment and for that reason you will need to add the following code to your themes functions.php. If you are running a multisite you will need to check the list of allowed files.

add_filter( 'upload_mimes', 'custom_mimes' );
	function custom_mimes( $mimes ){
		$mimes['webm'] = 'video/webm';
	return $mimes;
}

If you want any further reading then read this

HTML5 multiple format Demo

Simple HTML5 Video with flash fallback

  • The same points as for HTML video except with IE8 and lower support

This is how the code would look like with FlowPlayer being used as the backup.

<!-- "Video For Everybody" http://camendesign.com/code/video_for_everybody -->
<video controls="controls" poster="http://testing.grappler.tk/files/2013/01/trailer_1080p.jpg" width="960" height="540">
	<source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.mp4" type="video/mp4" />
	<source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.webm" type="video/webm" />
	<source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.ogv" type="video/ogg" />
	<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="960" height="540">
		<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
		<param name="allowFullScreen" value="true" />
		<param name="wmode" value="transparent" />
		<param name="flashVars" value="config={'playlist':['http%3A%2F%2Ftesting.grappler.tk%2Ffiles%2F2013%2F01%2Ftrailer_1080p.jpg',{'url':'http%3A%2F%2Ftesting.grappler.tk%2Ffiles%2F2013%2F01%2Ftrailer_1080p.mp4','autoPlay':false}]}" />
		<img alt="Big Buck Bunny" src="http://testing.grappler.tk/files/2013/01/trailer_1080p.jpg" width="960" height="540" title="No video playback capabilities, please download the video below" />
	</object>
</video>

To save time you could use the Video for Everybody generator by Jonathan Neal to generate the code snippet according to your options. (FlashFox player seems to only resize if the browser is refreshed but does not change size dynamically,)

A complete explanation can be found at Kroc Camen’s site, the originator of this technique.

HTML5 with flash fallback Demo

MediaElement.js

  • Standard Player
  • out of the box responsive
  • Supports HTML5 Video
  • Automatically supports IE8 and lower
  • Working WordPress plugin
  • Does not need FitVids.js

How to get it running on your site.

  1. First you need to download the files.
  2. Open the zip file and then extract the build folder
  3. Move that build folder to your child theme. You can rename the folder if you want
  4. Load mediaelement-and-player.min.js and mediaelementplayer.min.css
  5. Load this javascript to activate the MediaElements player
    // activate mediaelementplayer
    jQuery('video,audio').mediaelementplayer(/* Options */);
  6. Then you can include the HTML video code.
    <video width="320" height="240" controls preload="metadata">
    	<source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.mp4"  type="video/mp4"/>
    	<source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.webm" type="video/webm"/>
    	<source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.ogv"  type="video/ogg"/>
    </video>

MediaElement Demo

MediaElement.js WordPress plugin

This is very simple. Install the plugin and then add this shortcode to the post or page. Just change the links to your video.

MediaElement WordPress Plugin Demo

Flowplayer

  • No need of FitVids.js
  • Easy to use
  • Customisable players

Simply add this HTML to page or post.

<script src="http://releases.flowplayer.org/5.3.2/flowplayer.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://releases.flowplayer.org/5.3.2/skin/minimalist.css" />
<div class="flowplayer play-button" data-ratio="0.5625">
	<video controls="controls" preload="metadata" data-embed="false">
		<source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.mp4" type="video/mp4"/>
		<source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.webm" type="video/webm"/>
		<source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.ogv" type="video/ogg"/>
	</video>
</div>

Flowplayer Demo

Design your own playerVideo attributesAdditional options

Note! The FlowPlayer WordPress plugin is not working perfectly yet. I have contacted the support.

Video.js

  • Flash Fallback
  • WordPress Plugin
  • Needs FitVids.js
  1. Load the JavaScript and Stylesheet
  2. Add the markup e.g.
    <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
    <script src="http://vjs.zencdn.net/c/video.js"></script>
    <div class="video-js-wrapper">
    	<video id="video-js-1" class="video-js vjs-default-skin" controls width="960" height="540" poster="http://testing.grappler.tk/files/2013/01/trailer_1080p.jpg" preload="auto" data-setup="{}">
    		<source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.mp4" type="video/mp4"/>
    		<source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.webm" type="video/webm"/>
    		<source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.ogv" type="video/ogg"/>
    	</video>
    </div>
  3. Add extra css
    .fluid-width-video-wrapper .video-js {
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 100%!important;
    	height: 100%!important;
    }
  4. Activate FitVids.js for Video.js
    // FitVids
    jQuery(document).ready(function(){
    // Target your #container, #wrapper etc.
    	jQuery("#wrapper").fitVids({ customSelector: "div[class^='video-js-wrapper']"});
    });

Video.js Demo

Options Documentation

Video.js WordPress plugin

The plugin does make it a bit easier to host the files. So install the plugin then add this code. Just change the video links and size.

<div class="video-js-wrapper" width="960" height="540">

</div>

Videos.js WordPress Plugin Demo

JWPlayer

  • Popular
  • Not responsive out of the box
  • Extra work for every video

Standard embed with responsive CSS Solution

I have found another way of making JWPlayer responsive. This should be a bit easier.

  1. Add this code to the page or post
    <script type="text/javascript" src="http://player.longtailvideo.com/jwplayer.js"></script>
    <div id='player_1'></div>
    <script type='text/javascript'>
      jwplayer('player_1').setup({
        file: "https://grapplerulrich.s3.amazonaws.com/html5video/trailer_1080p.mp4",
        width: "100%",
        height: "100%",
        stretching: "fill",
        flashplayer:"http://player.longtailvideo.com/player.swf"
      });
    </script>
  2. Change the div id so that is different for every video. Make sure it matches the code in the JavaScript.
  3. Add this css
    #player_1_wrapper {
    	width: 100%;
    	position: relative;
    	padding: 0;
    	padding-bottom: 56.25%;
    }
    
    #player_1_wrapper object {
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
    }

    You will need to add this css for every video.

  4. So that the video keeps its proportion you will need to change the padding-bottom percentage. This is calculated video height/width*100. E.g. 540/960*100 =56.25%.

JW Player wo/ iframe Demo

iframe Solution

The solution that I have for JW Player is a hack that Ethan from Longtailvideo sent me. Here is how to do it.

  1. Download the files
  2. Copy jwplayer folder to your child theme using a ftp client
  3. Create a html file in the child theme
  4. Paste this code in
    <!DOCTYPE HTML>
    <html>
    	<head>
    		<title>
    			JWPlayer Reponsive Video
    		</title>
    		<script type="text/javascript" src="http://player.longtailvideo.com/jwplayer.js">
    		</script>
    		<style type="text/css">
    			html, body {
    				height: 100%;
    				width: 100%;
    				padding: 0;
    				margin: 0;
    			}
    			#player {
    				height: 100%;
    				width: 100%; 
    				padding: 0;
    			}
    		</style>
    	</head>
    	<body>
    	<div id="player">
    	</div>
    		<script type="text/javascript">
    			jwplayer("player").setup({
    				file: "http://testing.grappler.tk/files/2013/01/trailer_1080p.mp4",
    				image: "http://testing.grappler.tk/files/2013/01/trailer_1080p.jpg",
    				height: "100%",
    				width: "100%",
    				stretching: "exactfit",
    				flashplayer:"http://player.longtailvideo.com/player.swf"
    			});
    		</script>
    	</body>
    </html>
  5. Change four links – Change the location of jwplayer.js, jwplayer.flash.swf, the video link and either update the image link or remove it.
  6. Then add an iframe with the link pointing to the newly created html file.
    <iframe width="940px" height="540px" src="http://grappler.tk/wp-content/themes/responsive-testing/jwplayer-iframe.html" frameborder="0" allowfullscreen=""></iframe>
  7. Then we have to make sure that FitVids.js will work with this iframe. More on this here.

JWPlayer iframe Demo

JWPlayer Documentation

Note! The JWPlayer WordPress plugin has been recently updated to use JWPlayer 6 and so I will be inlcuding that too soon.

FitVids.js

Here are a couple of important things to know about FitVids.js.

The current version of FitVids.js conflicts with Video.js and MediaElement.js. That is why I would recommend using my version. It can be found on GitHub.

So that the video doesn’t distort script calculates the aspect ration. This is calculated by dividing the height by the width in the html code. That is why it is important the width and height is correct.

When adding iframes from other sources then it is necessary to add selectors. So that I can add an iframe from this site I would use this JavaScript. It is also important to check if www is used or not.

jQuery(document).ready(function(){
// Target your #container, #wrapper etc.
	jQuery("#wrapper").fitVids({ customSelector: "iframe[src^='http://grappler.tk']"});
	jQuery("#wrapper").fitVids({ customSelector: "iframe[src^='http://www.grappler.tk']"});
	jQuery("#wrapper").fitVids({ customSelector: "iframe[src^='http://fast.wistia.net']"});
});

 

Troubleshooting

Here are two links to help with troubleshooting the video setup

Multimedia Troubleshootinglongtailvideo.com

Note! Please let me know if you would like me add another player. It might take some time. Please let me know if I should include any points that are important(Pro, Cons, Info) to the different players.
Posted in How to

Enhance your Responsive Theme with Google Fonts

One to the best thing about working with Responsive is that it comes with loads of options, yet is very simple to enhance. The fact that Emil has chosen to keep to arial as the base fonts makes the CSS super easy to enhance.

When modifying your Responsive theme, you will of course start by making a child theme! Emil, being the support guru that he is, provided a link in his style.css with details on how to get started and a child theme example!

If you’re interested in creating your child theme, go ahead download the child theme example and open it up with your favourite text editor.

In the style.css of the child theme, you’ll see some comments at the top which you can edit if you wish, but I wouldn’t bother (the information in there is very useful). On line 37, you’ll find another comment stating “Start from here”. This is where you can start adding your own style.

One of the easiest way to enhance your site is by changing fonts. And now that Google offers a large series of web fonts to choose from, we can achieve lots of different looks. Let’s say that we wanted to change our headings.

In the Responsive theme (the parent), you’ll find this following css on line 1113:

h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
font-weight: 700;
line-height: 1.0em;
word-wrap: break-word;
}

Thus in your child theme, all we need to do is add a new font-family. Let’s head over to Google’s list of fonts and let’s choose one. Say we fancy Libre Baskerville, to use this font, you first need to add the font to your collection and click the Word Use in the bottom right hand corner.

Once selected, you’ll see that the blue screen at the bottom doesn’t move, and now you can scroll through the steps in the white part of the page. The first steps requires us to select the weight of our font. Let’s select the Bold and normal options.

The second is the character set. I usually leave my settings to default.

Third, is the method we will use to embed our fonts. Since we are making a child theme and we only want to make slight changes to our heading, we’ll click the @import tab and then copy the info and paste it in our child theme like so:

@import url(http://fonts.googleapis.com/css?family=Libre+Baskerville:400,700);

Now back to our Google page, you’ll see that in step 4, the css needed is given to us. We’ll apply this to our style.css like so:

h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
font-family: 'Libre Baskerville', serif;
}

And that’s it. You’re done. The most difficult part of this will probably be choosing the font. There are so many to choose from. Here’s a beautiful example showcasing some of the best Google fonts. Hopefully this will inspire you.

Posted in Themes

Parent Cat

Parent Cat

Posted in Uncategorized

Selina Kyle is Catwoman!

Curabitur lorem velit, pellentesque in dignissim eu, interdum sed arcu. Pellentesque erat erat, molestie et elementum sed, dapibus ut libero. Suspendisse sit amet neque tellus, eu mollis nibh. Nullam sit amet sapien nunc. Phasellus nec lorem in massa pharetra ultrices. Proin in rhoncus orci. In ultricies dolor in enim faucibus cursus commodo justo semper. Maecenas nec velit quis nulla hendrerit tincidunt ut nec ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus turpis diam, vulputate vitae posuere non, tincidunt aliquam sapien.

Sed ultricies, nisl vitae condimentum adipiscing, nisl sapien dapibus quam, id convallis tellus magna ac justo. Donec faucibus mi volutpat diam pretium imperdiet. Cras lacus nisl, vehicula ac accumsan vitae, dignissim vel sem. Cras rutrum neque eget arcu aliquet non suscipit eros fringilla. Donec sagittis sem vitae neque dapibus vitae interdum justo tincidunt. Quisque cursus varius ligula a eleifend. Fusce sed libero at dolor eleifend varius. Cras egestas gravida eros et fringilla. Nunc est orci, auctor luctus sollicitudin non, porttitor ac nulla. Curabitur quis eros mauris. Ut ut varius felis. Vestibulum cursus feugiat ligula eu eleifend. Proin nec odio sed lectus mollis ultricies in eu urna. Aenean a aliquet turpis. Curabitur elit neque, faucibus sed posuere egestas, ornare nec orci. Suspendisse accumsan euismod lorem, id vehicula orci rhoncus vel.

Fusce magna turpis, sodales nec laoreet sit amet, elementum eu turpis. Duis et nunc erat. Fusce fringilla bibendum risus vitae varius. Proin diam nulla, pulvinar at commodo commodo, consequat non metus. Aenean at nibh tellus. Donec ullamcorper mollis fringilla. Fusce sodales mauris sed odio accumsan faucibus.

Duis purus ligula, gravida at interdum id, laoreet eu sapien. In pellentesque, quam vel adipiscing ullamcorper, diam augue hendrerit nibh, vel dapibus purus sapien et odio. Suspendisse potenti. Etiam lobortis tempus nunc, eget sollicitudin metus interdum non. Nulla accumsan pellentesque libero, vel porta enim lobortis in. Aliquam erat volutpat. Quisque cursus aliquet hendrerit. In eu enim non lacus consectetur tincidunt in pharetra tortor. Sed gravida diam eget augue blandit scelerisque. Pellentesque eget ullamcorper mi. Aenean dapibus hendrerit sapien, nec vehicula lectus posuere nec. Suspendisse et leo magna. Cras lobortis, tortor sit amet eleifend aliquet, tortor tellus cursus lectus, id cursus est massa porttitor sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Suspendisse lectus massa, ornare quis ornare in, placerat sit amet ante. Duis pharetra, sem sed pretium lobortis, justo risus interdum est, ac interdum diam nunc pretium tellus. Vivamus euismod nisl sem. Vivamus aliquam rhoncus sem ac mattis. Suspendisse id tincidunt magna. Vestibulum tortor augue, placerat quis venenatis vehicula, tincidunt ut nisi. Morbi ornare magna nec sapien fermentum placerat vehicula sapien bibendum.

Posted in News

Clark Kent is Superman!

Curabitur lorem velit, pellentesque in dignissim eu, interdum sed arcu. Pellentesque erat erat, molestie et elementum sed, dapibus ut libero. Suspendisse sit amet neque tellus, eu mollis nibh. Nullam sit amet sapien nunc. Phasellus nec lorem in massa pharetra ultrices. Proin in rhoncus orci. In ultricies dolor in enim faucibus cursus commodo justo semper. Maecenas nec velit quis nulla hendrerit tincidunt ut nec ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus turpis diam, vulputate vitae posuere non, tincidunt aliquam sapien.

Sed ultricies, nisl vitae condimentum adipiscing, nisl sapien dapibus quam, id convallis tellus magna ac justo. Donec faucibus mi volutpat diam pretium imperdiet. Cras lacus nisl, vehicula ac accumsan vitae, dignissim vel sem. Cras rutrum neque eget arcu aliquet non suscipit eros fringilla. Donec sagittis sem vitae neque dapibus vitae interdum justo tincidunt. Quisque cursus varius ligula a eleifend. Fusce sed libero at dolor eleifend varius. Cras egestas gravida eros et fringilla. Nunc est orci, auctor luctus sollicitudin non, porttitor ac nulla. Curabitur quis eros mauris. Ut ut varius felis. Vestibulum cursus feugiat ligula eu eleifend. Proin nec odio sed lectus mollis ultricies in eu urna. Aenean a aliquet turpis. Curabitur elit neque, faucibus sed posuere egestas, ornare nec orci. Suspendisse accumsan euismod lorem, id vehicula orci rhoncus vel.

Fusce magna turpis, sodales nec laoreet sit amet, elementum eu turpis. Duis et nunc erat. Fusce fringilla bibendum risus vitae varius. Proin diam nulla, pulvinar at commodo commodo, consequat non metus. Aenean at nibh tellus. Donec ullamcorper mollis fringilla. Fusce sodales mauris sed odio accumsan faucibus.

Duis purus ligula, gravida at interdum id, laoreet eu sapien. In pellentesque, quam vel adipiscing ullamcorper, diam augue hendrerit nibh, vel dapibus purus sapien et odio. Suspendisse potenti. Etiam lobortis tempus nunc, eget sollicitudin metus interdum non. Nulla accumsan pellentesque libero, vel porta enim lobortis in. Aliquam erat volutpat. Quisque cursus aliquet hendrerit. In eu enim non lacus consectetur tincidunt in pharetra tortor. Sed gravida diam eget augue blandit scelerisque. Pellentesque eget ullamcorper mi. Aenean dapibus hendrerit sapien, nec vehicula lectus posuere nec. Suspendisse et leo magna. Cras lobortis, tortor sit amet eleifend aliquet, tortor tellus cursus lectus, id cursus est massa porttitor sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Suspendisse lectus massa, ornare quis ornare in, placerat sit amet ante. Duis pharetra, sem sed pretium lobortis, justo risus interdum est, ac interdum diam nunc pretium tellus. Vivamus euismod nisl sem. Vivamus aliquam rhoncus sem ac mattis. Suspendisse id tincidunt magna. Vestibulum tortor augue, placerat quis venenatis vehicula, tincidunt ut nisi. Morbi ornare magna nec sapien fermentum placerat vehicula sapien bibendum.

Posted in News

How to become Catwoman

Curabitur lorem velit, pellentesque in dignissim eu, interdum sed arcu. Pellentesque erat erat, molestie et elementum sed, dapibus ut libero. Suspendisse sit amet neque tellus, eu mollis nibh. Nullam sit amet sapien nunc. Phasellus nec lorem in massa pharetra ultrices. Proin in rhoncus orci. In ultricies dolor in enim faucibus cursus commodo justo semper. Maecenas nec velit quis nulla hendrerit tincidunt ut nec ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus turpis diam, vulputate vitae posuere non, tincidunt aliquam sapien.

Sed ultricies, nisl vitae condimentum adipiscing, nisl sapien dapibus quam, id convallis tellus magna ac justo. Donec faucibus mi volutpat diam pretium imperdiet. Cras lacus nisl, vehicula ac accumsan vitae, dignissim vel sem. Cras rutrum neque eget arcu aliquet non suscipit eros fringilla. Donec sagittis sem vitae neque dapibus vitae interdum justo tincidunt. Quisque cursus varius ligula a eleifend. Fusce sed libero at dolor eleifend varius. Cras egestas gravida eros et fringilla. Nunc est orci, auctor luctus sollicitudin non, porttitor ac nulla. Curabitur quis eros mauris. Ut ut varius felis. Vestibulum cursus feugiat ligula eu eleifend. Proin nec odio sed lectus mollis ultricies in eu urna. Aenean a aliquet turpis. Curabitur elit neque, faucibus sed posuere egestas, ornare nec orci. Suspendisse accumsan euismod lorem, id vehicula orci rhoncus vel.

Fusce magna turpis, sodales nec laoreet sit amet, elementum eu turpis. Duis et nunc erat. Fusce fringilla bibendum risus vitae varius. Proin diam nulla, pulvinar at commodo commodo, consequat non metus. Aenean at nibh tellus. Donec ullamcorper mollis fringilla. Fusce sodales mauris sed odio accumsan faucibus.

Duis purus ligula, gravida at interdum id, laoreet eu sapien. In pellentesque, quam vel adipiscing ullamcorper, diam augue hendrerit nibh, vel dapibus purus sapien et odio. Suspendisse potenti. Etiam lobortis tempus nunc, eget sollicitudin metus interdum non. Nulla accumsan pellentesque libero, vel porta enim lobortis in. Aliquam erat volutpat. Quisque cursus aliquet hendrerit. In eu enim non lacus consectetur tincidunt in pharetra tortor. Sed gravida diam eget augue blandit scelerisque. Pellentesque eget ullamcorper mi. Aenean dapibus hendrerit sapien, nec vehicula lectus posuere nec. Suspendisse et leo magna. Cras lobortis, tortor sit amet eleifend aliquet, tortor tellus cursus lectus, id cursus est massa porttitor sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Suspendisse lectus massa, ornare quis ornare in, placerat sit amet ante. Duis pharetra, sem sed pretium lobortis, justo risus interdum est, ac interdum diam nunc pretium tellus. Vivamus euismod nisl sem. Vivamus aliquam rhoncus sem ac mattis. Suspendisse id tincidunt magna. Vestibulum tortor augue, placerat quis venenatis vehicula, tincidunt ut nisi. Morbi ornare magna nec sapien fermentum placerat vehicula sapien bibendum.

Posted in How to

How to become Superman

Curabitur lorem velit, pellentesque in dignissim eu, interdum sed arcu. Pellentesque erat erat, molestie et elementum sed, dapibus ut libero. Suspendisse sit amet neque tellus, eu mollis nibh. Nullam sit amet sapien nunc. Phasellus nec lorem in massa pharetra ultrices. Proin in rhoncus orci. In ultricies dolor in enim faucibus cursus commodo justo semper. Maecenas nec velit quis nulla hendrerit tincidunt ut nec ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus turpis diam, vulputate vitae posuere non, tincidunt aliquam sapien.

Sed ultricies, nisl vitae condimentum adipiscing, nisl sapien dapibus quam, id convallis tellus magna ac justo. Donec faucibus mi volutpat diam pretium imperdiet. Cras lacus nisl, vehicula ac accumsan vitae, dignissim vel sem. Cras rutrum neque eget arcu aliquet non suscipit eros fringilla. Donec sagittis sem vitae neque dapibus vitae interdum justo tincidunt. Quisque cursus varius ligula a eleifend. Fusce sed libero at dolor eleifend varius. Cras egestas gravida eros et fringilla. Nunc est orci, auctor luctus sollicitudin non, porttitor ac nulla. Curabitur quis eros mauris. Ut ut varius felis. Vestibulum cursus feugiat ligula eu eleifend. Proin nec odio sed lectus mollis ultricies in eu urna. Aenean a aliquet turpis. Curabitur elit neque, faucibus sed posuere egestas, ornare nec orci. Suspendisse accumsan euismod lorem, id vehicula orci rhoncus vel.

Fusce magna turpis, sodales nec laoreet sit amet, elementum eu turpis. Duis et nunc erat. Fusce fringilla bibendum risus vitae varius. Proin diam nulla, pulvinar at commodo commodo, consequat non metus. Aenean at nibh tellus. Donec ullamcorper mollis fringilla. Fusce sodales mauris sed odio accumsan faucibus.

Duis purus ligula, gravida at interdum id, laoreet eu sapien. In pellentesque, quam vel adipiscing ullamcorper, diam augue hendrerit nibh, vel dapibus purus sapien et odio. Suspendisse potenti. Etiam lobortis tempus nunc, eget sollicitudin metus interdum non. Nulla accumsan pellentesque libero, vel porta enim lobortis in. Aliquam erat volutpat. Quisque cursus aliquet hendrerit. In eu enim non lacus consectetur tincidunt in pharetra tortor. Sed gravida diam eget augue blandit scelerisque. Pellentesque eget ullamcorper mi. Aenean dapibus hendrerit sapien, nec vehicula lectus posuere nec. Suspendisse et leo magna. Cras lobortis, tortor sit amet eleifend aliquet, tortor tellus cursus lectus, id cursus est massa porttitor sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Suspendisse lectus massa, ornare quis ornare in, placerat sit amet ante. Duis pharetra, sem sed pretium lobortis, justo risus interdum est, ac interdum diam nunc pretium tellus. Vivamus euismod nisl sem. Vivamus aliquam rhoncus sem ac mattis. Suspendisse id tincidunt magna. Vestibulum tortor augue, placerat quis venenatis vehicula, tincidunt ut nisi. Morbi ornare magna nec sapien fermentum placerat vehicula sapien bibendum.

Posted in How to