Sophie | HTML5 & CSS3 With iPhone WebApp

Sophie | HTML5 & CSS3 With iPhone WebApp

3 Color Schemes Included! Extremely easy to change! Just rename one CSS file and voiala! Colors have changed!

HTML CSS3 Features

  • iPhone Web App with iPhone Homescreen icon and startup screen!
  • Pure CSS3, 64 buttons that enlarge to suit your text and never break.
  • Pure CSS3, Table with animation.
  • Cufon Font Replacement for slick quality.

jQuery Features

  • Dropdown Animated Menu.
  • Homepage Image and Content Slider.
  • Homepage Text Rotator.
  • Homepage Animated Thumbs.
  • About Page Captioned Slider.
  • 5 jQuery Galleries with animated thumbnails and ColorBox Gallery.
  • jQuery Filtrable Gallery.
  • jQuery Animated Category Changer.
  • Working Contact Form With Field Validation.
  • Google Maps Support!
  • A lot of animated hover icons!
  • jQuery Animated Accordion.
  • jQuery Animated Tabs.
  • jQuery Image Zoom Integration.
  • Share Items From Portfolio To Facebook
  • Share Items From Portfolio To Twitter
  • Portfolio With Filtrable, Numbers and Category Elements. Video Too!

Graphic Features

  • 10 Variations of Thumbnail Hover EFfects
  • 18 WebPages
  • 100 CSS3 Buttons and Icons
  • 5 Content decoration separators
  • PSD Files of the template included

Mobile VersionYes! The template comes with an iPhone web app. Bookmark this site to your iPhone homepage, and there you have it! It becomes a instant WebApp with a iPhone friendly icon, a application like splash start-up screen and no more Safari Navigation bar so you can enjoy the page in full screen mode! The WebApp was developed ESPECIALLY for the iPhone, The mobile template will work with most smart phones that have a 320×480 screen. I’ve tested it and it works wonderfully on the Samsung Galaxy S using Android.

How does the mobile version work?

The mobile version has a CSS resolution detector. There are 3 things the CSS looks for. The best part of it is that the mobile version having a resolution detector has 2 stages for the iPhone and iPhone like devices. There is a landscape and a portrait version! :)

1. Between 0 pixels and 320 pixels This includes most devices on the market that are non-smartphone. It will generate a version of the mobile page with all it’s features but in a more compact way so they fit the screen. You can still use the CSS3 buttons and the mobile version has a slider as well

2. Between 420 pixels and 1000 pixels This includes most of the smartphones on the market including the Samsung Galaxy S2 and the iPhone 4 witch have a generous display. All features stay the same, the slider will become bigger, also, gallery images become bigger! Of course, you can still use all features of the page

3. Over 1000 pixels Even a small netbook has more 1000 pixels width, so that makes the mobile version generate the ” This page cannot be rendered for your device” error message.

Thank you aedorde and aedaddy for the video items! :)

A big thanks to Keo for the awesome images!

Share this

Previous
Next Post »