HTML Structure - top
For a simple two column layout, create a .row and add the appropriate number of .span* columns. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).
For a simple two column layout, create a .row and add the appropriate number of .span* columns. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).
......
Given this example, we have .span4 and .span8, making for 12 total columns and a complete row.
CSS Structure - top
I'm using one main CSS file (css/styles.css), in this template which you are free to modify depending on the customization you require. There are also other additional style sheets that I do not recommend changing. Those style sheets reside in the 'css' folder.
- bootstrap.min.css - This is a main stylesheet that required for basic template styling like form, input, div, list element and etc.
- bootstrap-responsive.min.css - This stylesheet use for responsively the theme for other devices screen size support.
- flexslider.css - The main stylesheet for header slider area.
- magnific-popup.css - The main stylesheet for lightbox.
- styles.css - The main stylesheet you are encouraged to modify.
The Styles CSS file contains all of the specific stylings for the page. The file is separated into sections using:
/* Main Css ----------------------------------- */ /* Font-Colors ----------------------------------- */ /* Scrollup Button ----------------------------------- */ /* Navbar ----------------------------------- */ /* Top-Slider ----------------------------------- */ /* Top-Download ----------------------------------- */ /* FlexSlider ----------------------------------- */ /* Highlights ----------------------------------- */ /* How it Works ----------------------------------- */ /* Screenshots ----------------------------------- */ /* Testimonial ----------------------------------- */ /* Download ----------------------------------- */ /* Newsletter ----------------------------------- */ /* Footer ----------------------------------- */ /* Magnific Popup CSS overwrite ----------------------------------- */ /* Image Fadehover ----------------------------------- */ /* Media Queries ----------------------------------- */
If you would like to edit a specific section of the site, simply find the appropriate label in the css file, and then scroll down until you find the appropriate style that needs to be edited.
Highlights - top
Easy to Customize
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Seo Optimized
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Responsive Template
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Powered by HTML5
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
To change or add a Highlight edit the following lines:
Powered by HTML5
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
To change or add an Icon edit the following lines:
Available Icons
- icon-glass
- icon-music
- icon-search
- icon-envelope
- icon-heart
- icon-star
- icon-star-empty
- icon-user
- icon-film
- icon-th-large
- icon-th
- icon-th-list
- icon-ok
- icon-remove
- icon-zoom-in
- icon-zoom-out
- icon-off
- icon-signal
- icon-cog
- icon-trash
- icon-home
- icon-file
- icon-time
- icon-road
- icon-download-alt
- icon-download
- icon-upload
- icon-inbox
- icon-play-circle
- icon-repeat
- icon-refresh
- icon-list-alt
- icon-lock
- icon-flag
- icon-headphones
- icon-volume-off
- icon-volume-down
- icon-volume-up
- icon-qrcode
- icon-barcode
- icon-tag
- icon-tags
- icon-book
- icon-bookmark
- icon-print
- icon-camera
- icon-font
- icon-bold
- icon-italic
- icon-text-height
- icon-text-width
- icon-align-left
- icon-align-center
- icon-align-right
- icon-align-justify
- icon-list
- icon-indent-left
- icon-indent-right
- icon-facetime-video
- icon-picture
- icon-pencil
- icon-map-marker
- icon-adjust
- icon-tint
- icon-edit
- icon-share
- icon-check
- icon-move
- icon-step-backward
- icon-fast-backward
- icon-backward
- icon-play
- icon-pause
- icon-stop
- icon-forward
- icon-fast-forward
- icon-step-forward
- icon-eject
- icon-chevron-left
- icon-chevron-right
- icon-plus-sign
- icon-minus-sign
- icon-remove-sign
- icon-ok-sign
- icon-question-sign
- icon-info-sign
- icon-screenshot
- icon-remove-circle
- icon-ok-circle
- icon-ban-circle
- icon-arrow-left
- icon-arrow-right
- icon-arrow-up
- icon-arrow-down
- icon-share-alt
- icon-resize-full
- icon-resize-small
- icon-plus
- icon-minus
- icon-asterisk
- icon-exclamation-sign
- icon-gift
- icon-leaf
- icon-fire
- icon-eye-open
- icon-eye-close
- icon-warning-sign
- icon-plane
- icon-calendar
- icon-random
- icon-comment
- icon-magnet
- icon-chevron-up
- icon-chevron-down
- icon-retweet
- icon-shopping-cart
- icon-folder-close
- icon-folder-open
- icon-resize-vertical
- icon-resize-horizontal
- icon-hdd
- icon-bullhorn
- icon-bell
- icon-certificate
- icon-thumbs-up
- icon-thumbs-down
- icon-hand-right
- icon-hand-left
- icon-hand-up
- icon-hand-down
- icon-circle-arrow-right
- icon-circle-arrow-left
- icon-circle-arrow-up
- icon-circle-arrow-down
- icon-globe
- icon-wrench
- icon-tasks
- icon-filter
- icon-briefcase
- icon-fullscreen
How It Works - top
How it works - Watch our product tour
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua ut labore et .
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr
- Sed diam nonumy eirmod tempor invidunt ut labore et dolore
- Magna aliquyam erat, sed diam voluptua.
- At vero eos et accusam et justo duo dolores et ea rebum
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr
To change or add a Checklist item edit the following lines:
To change the Vimeo video edit the following lines and enter your url:
Testimonials - top
„You guys did a fantastic job! Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.“
To change or add a Testimonial edit the following lines:
„Content here“
Newsletter - top
Newsletter form is based on jQuery. You don't have to know PHP. To change sample email adress, open "subscribe-newsletter.php", find and edit code below:
// put your email address here $youremail = 'email@gmail.com';
Footer - top
© Copyright 2012 by SimpleUpload. All Rights Reserved.
To change or add a Social Icon edit the following lines:
Available Icons
white_500px.png
white_about_me.png
white_add_this.png
white_amazon.png
white_aol.png
white_app_store.png
white_app_store_alt.png
white_apple.png
white_bebo.png
white_behance.png
white_bing.png
white_blip.png
white_blogger.png
white_coroflot.png
white_daytum.png
white_delicious.png
white_design_bump.png
white_designfloat.png
white_deviant_art.png
white_digg.png
white_digg_alt.png
white_dribbble.png
white_drupal.png
white_ebay.png
white_email.png
white_ember_app.png
white_etsy.png
white_facebook.png
white_feed_burner.png
white_flickr.png
white_foodspotting.png
white_forrst.png
white_foursquare.png
white_friendsfeed.png
white_friendstar.png
white_gdgt.png
white_github.png
white_google_buzz.png
white_google_talk.png
white_gowalla.png
white_gowalla_pin.png
white_grooveshark.png
white_heart.png
white_hyves.png
white_icondock.png
white_icq.png
white_identica.png
white_imessage.png
white_itune.png
white_last.fm.png
white_linkedin.png
white_meetup.png
white_metacafe.png
white_mixx.png
white_mobileme.png
white_mr_wong.png
white_msn.png
white_myspace.png
white_newsvine.png
white_paypal.png
white_photobucket.png
white_picasa.png
white_pinterest.png
white_podcast.png
white_posterous.png
white_qik.png
white_quora.png
white_reddit.png
white_retweet.png
white_rss.png
white_scribd.png
white_share_this.png
white_skype.png
white_slashdot.png
white_slideshare.png
white_smugmug.png
white_sound_cloud.png
white_spotify.png
white_squidoo.png
white_stackoverflow.png
white_star.png
white_stumbleupon.png
white_technorati.png
white_tumblr.png
white_twitter.png
white_twitter_bird.png
white_viddler.png
white_vimeo.png
white_virb.png
white_w3.png
white_wikipedia.png
white_windows.png
white_wordpress.png- white_wordpress.png
white_xing.png
white_yahoo.png
white_yahoo_buzz.png
white_yelp.png
white_youtube.png
PSD File - top
The following Photoshop file are included with the download package place in /PSD/ folder with
the name of "Simple Download Landingpage.psd".
Credits - top
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
Marcel Mädche