Top Slide
-Get ready to make magic!
-Remember that this is a BETA version. This is my first framework so if you see any issue please let me know it.
-Don't forget to follow me!
- + + + +diff --git a/README.md b/README.md index a407ef5..4f14db8 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,21 @@ -///// Cool Kitten - Parrallax Scrolling responsive frame work - 1.0 ///// -Author: Jalxob +# [Cool Kitten](http://jalxob.com/cool-kitten) + +Parrallax scrolling responsive framework - 1.0 + +Author: [Jalxob](http://www.jalxob.com) Release Date: February 2013. -///// Resources ///// -- Normalize.css -- jQuery Easing Plugin -- Stellar.js +## Resources + +* [normalize.css](http://necolas.github.com/normalize.css) +* [jQuery](http://jquery.com) +* [Stellar.js](http://markdalgleish.com/projects/stellar.js) +* [Bootstrap Scrollspy](http://twitter.github.com/bootstrap/javascript.html#scrollspy) -///// Questions & Contact ///// -This is my first framework so if you see any issue please let me know it. +## Questions & Contact + +This is my first framework so if you see any issue please [let me know it](mailto:jalxob@gmail.com). Website: www.jalxob.com/cool-kitten Author's website: www.jalxob.com -Twitter: @Jalxob - +Twitter: @Jalxob \ No newline at end of file diff --git a/css/normalize.css b/css/normalize.css index 92c2c47..2ad2e0e 100644 --- a/css/normalize.css +++ b/css/normalize.css @@ -1,11 +1,11 @@ -/*! normalize.css 2012-03-11T12:53 UTC - http://github.com/necolas/normalize.css */ +/*! normalize.css v1.1.0 | MIT License | git.io/normalize */ -/* ============================================================================= +/* ========================================================================== HTML5 display definitions ========================================================================== */ -/* - * Corrects block display not defined in IE6/7/8/9 & FF3 +/** + * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3. */ article, @@ -16,14 +16,15 @@ figure, footer, header, hgroup, +main, nav, section, summary { display: block; } -/* - * Corrects inline-block display not defined in IE6/7/8/9 & FF3 +/** + * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. */ audio, @@ -34,9 +35,9 @@ video { *zoom: 1; } -/* - * Prevents modern browsers from displaying 'audio' without controls - * Remove excess height in iOS5 devices +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. */ audio:not([controls]) { @@ -44,25 +45,24 @@ audio:not([controls]) { height: 0; } -/* - * Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4 - * Known issue: no IE6 support +/** + * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4. + * Known issue: no IE 6 support. */ [hidden] { display: none; } - -/* ============================================================================= +/* ========================================================================== Base ========================================================================== */ -/* - * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units - * http://clagnut.com/blog/348/#c790 - * 2. Prevents iOS text size adjust after orientation change, without disabling user zoom - * www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ +/** + * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using + * `em` units. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. */ html { @@ -71,8 +71,9 @@ html { -ms-text-size-adjust: 100%; /* 2 */ } -/* - * Addresses font-family inconsistency between 'textarea' and other form elements. +/** + * Address `font-family` inconsistency between `textarea` and other form + * elements. */ html, @@ -83,82 +84,86 @@ textarea { font-family: sans-serif; } -/* - * Addresses margins handled incorrectly in IE6/7 +/** + * Address margins handled incorrectly in IE 6/7. */ body { margin: 0; } - -/* ============================================================================= +/* ========================================================================== Links ========================================================================== */ -/* - * Addresses outline displayed oddly in Chrome +/** + * Address `outline` inconsistency between Chrome and other browsers. */ a:focus { outline: thin dotted; } -/* - * Improves readability when focused and also mouse hovered in all browsers - * people.opera.com/patrickl/experiments/keyboard/test +/** + * Improve readability when focused and also mouse hovered in all browsers. */ -a:hover, -a:active { +a:active, +a:hover { outline: 0; } - -/* ============================================================================= +/* ========================================================================== Typography ========================================================================== */ -/* - * Addresses font sizes and margins set differently in IE6/7 - * Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5 +/** + * Address font sizes and margins set differently in IE 6/7. + * Address font sizes within `section` and `article` in Firefox 4+, Safari 5, + * and Chrome. */ h1 { - margin: 1em 0; + font-size: 2em; + margin: 0.67em 0; } h2 { - margin: 0; + font-size: 1.5em; + margin: 0.83em 0; } h3 { - margin: 1em 0 0 0; + font-size: 1.17em; + margin: 1em 0; } h4 { + font-size: 1em; margin: 1.33em 0; } h5 { + font-size: 0.83em; margin: 1.67em 0; } h6 { + font-size: 0.67em; margin: 2.33em 0; } -/* - * Addresses styling not present in IE7/8/9, S5, Chrome +/** + * Address styling not present in IE 7/8/9, Safari 5, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } -/* - * Addresses style set to 'bolder' in FF3+, S4/5, Chrome -*/ +/** + * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. + */ b, strong { @@ -169,16 +174,27 @@ blockquote { margin: 1em 40px; } -/* - * Addresses styling not present in S5, Chrome +/** + * Address styling not present in Safari 5 and Chrome. */ dfn { font-style: italic; } -/* - * Addresses styling not present in IE6/7/8/9 +/** + * Address differences between Firefox and other browsers. + * Known issue: no IE 6/7 normalization. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +/** + * Address styling not present in IE 6/7/8/9. */ mark { @@ -186,8 +202,8 @@ mark { color: #000; } -/* - * Addresses margins set differently in IE6/7 +/** + * Address margins set differently in IE 6/7. */ p, @@ -195,22 +211,21 @@ pre { margin: 1em 0; } -/* - * Corrects font family set oddly in IE6, S4/5, Chrome - * en.wikipedia.org/wiki/User:Davidgothberg/Test59 +/** + * Correct font family set oddly in IE 6, Safari 4/5, and Chrome. */ -pre, code, kbd, +pre, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; } -/* - * Improves readability of pre-formatted text in all browsers +/** + * Improve readability of pre-formatted text in all browsers. */ pre { @@ -219,18 +234,17 @@ pre { word-wrap: break-word; } -/* - * 1. Addresses CSS quotes not supported in IE6/7 - * 2. Addresses quote property not supported in S4 +/** + * Address CSS quotes not supported in IE 6/7. */ -/* 1 */ - q { quotes: none; } -/* 2 */ +/** + * Address `quotes` property not supported in Safari 4. + */ q:before, q:after { @@ -238,13 +252,16 @@ q:after { content: none; } +/** + * Address inconsistent and variable font size in all browsers. + */ + small { - font-size: 75%; + font-size: 80%; } -/* - * Prevents sub and sup affecting line-height in all browsers - * gist.github.com/413930 +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, @@ -263,13 +280,12 @@ sub { bottom: -0.25em; } - -/* ============================================================================= +/* ========================================================================== Lists ========================================================================== */ -/* - * Addresses margins set differently in IE6/7 +/** + * Address margins set differently in IE 6/7. */ dl, @@ -283,8 +299,8 @@ dd { margin: 0 0 0 40px; } -/* - * Addresses paddings set differently in IE6/7 +/** + * Address paddings set differently in IE 6/7. */ menu, @@ -293,8 +309,8 @@ ul { padding: 0 0 0 40px; } -/* - * Corrects list images handled incorrectly in IE7 +/** + * Correct list images handled incorrectly in IE 7. */ nav ul, @@ -303,15 +319,13 @@ nav ol { list-style-image: none; } - -/* ============================================================================= +/* ========================================================================== Embedded content ========================================================================== */ -/* - * 1. Removes border when inside 'a' element in IE6/7/8/9, FF3 - * 2. Improves image quality when scaled in IE7 - * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ +/** + * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3. + * 2. Improve image quality when scaled in IE 7. */ img { @@ -319,42 +333,40 @@ img { -ms-interpolation-mode: bicubic; /* 2 */ } -/* - * Corrects overflow displayed oddly in IE9 +/** + * Correct overflow displayed oddly in IE 9. */ svg:not(:root) { overflow: hidden; } - -/* ============================================================================= +/* ========================================================================== Figures ========================================================================== */ -/* - * Addresses margin not present in IE6/7/8/9, S5, O11 +/** + * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11. */ figure { margin: 0; } - -/* ============================================================================= +/* ========================================================================== Forms ========================================================================== */ -/* - * Corrects margin displayed oddly in IE6/7 +/** + * Correct margin displayed oddly in IE 6/7. */ form { margin: 0; } -/* - * Define consistent border, margin, and padding +/** + * Define consistent border, margin, and padding. */ fieldset { @@ -363,10 +375,10 @@ fieldset { padding: 0.35em 0.625em 0.75em; } -/* - * 1. Corrects color not being inherited in IE6/7/8/9 - * 2. Corrects text not wrapping in FF3 - * 3. Corrects alignment displayed oddly in IE6/7 +/** + * 1. Correct color not being inherited in IE 6/7/8/9. + * 2. Correct text not wrapping in Firefox 3. + * 3. Correct alignment displayed oddly in IE 6/7. */ legend { @@ -376,10 +388,11 @@ legend { *margin-left: -7px; /* 3 */ } -/* - * 1. Corrects font size not being inherited in all browsers - * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome - * 3. Improves appearance and consistency in all browsers +/** + * 1. Correct font size not being inherited in all browsers. + * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5, + * and Chrome. + * 3. Improve appearance and consistency in all browsers. */ button, @@ -392,45 +405,61 @@ textarea { *vertical-align: middle; /* 3 */ } -/* - * Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet +/** + * Address Firefox 3+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. */ button, input { - line-height: normal; /* 1 */ + line-height: normal; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+. + * Correct `select` style inheritance in Firefox 4+ and Opera. + */ + +button, +select { + text-transform: none; } -/* - * 1. Improves usability and consistency of cursor style between image-type 'input' and others - * 2. Corrects inability to style clickable 'input' types in iOS - * 3. Removes inner spacing in IE7 without affecting normal text inputs - * Known issue: inner spacing remains in IE6 +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + * 4. Remove inner spacing in IE 7 without affecting normal text inputs. + * Known issue: inner spacing remains in IE 6. */ button, -input[type="button"], +html input[type="button"], /* 1 */ input[type="reset"], input[type="submit"] { - cursor: pointer; /* 1 */ -webkit-appearance: button; /* 2 */ - *overflow: visible; /* 3 */ + cursor: pointer; /* 3 */ + *overflow: visible; /* 4 */ } -/* - * Re-set default cursor for disabled elements +/** + * Re-set default cursor for disabled elements. */ button[disabled], -input[disabled] { +html input[disabled] { cursor: default; } -/* - * 1. Addresses box sizing set to content-box in IE8/9 - * 2. Removes excess padding in IE8/9 - * 3. Removes excess padding in IE7 - Known issue: excess padding remains in IE6 +/** + * 1. Address box sizing set to content-box in IE 8/9. + * 2. Remove excess padding in IE 8/9. + * 3. Remove excess padding in IE 7. + * Known issue: excess padding remains in IE 6. */ input[type="checkbox"], @@ -441,9 +470,10 @@ input[type="radio"] { *width: 13px; /* 3 */ } -/* - * 1. Addresses appearance set to searchfield in S5, Chrome - * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof) +/** + * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome + * (include `-moz` to future-proof). */ input[type="search"] { @@ -453,18 +483,18 @@ input[type="search"] { box-sizing: content-box; } -/* - * Removes inner padding and search cancel button in S5, Chrome on OS X +/** + * Remove inner padding and search cancel button in Safari 5 and Chrome + * on OS X. */ -input[type="search"]::-webkit-search-decoration, -input[type="search"]::-webkit-search-cancel-button { +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } -/* - * Removes inner padding and border in FF3+ - * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ +/** + * Remove inner padding and border in Firefox 3+. */ button::-moz-focus-inner, @@ -473,9 +503,9 @@ input::-moz-focus-inner { padding: 0; } -/* - * 1. Removes default vertical scrollbar in IE6/7/8/9 - * 2. Improves readability and alignment in all browsers +/** + * 1. Remove default vertical scrollbar in IE 6/7/8/9. + * 2. Improve readability and alignment in all browsers. */ textarea { @@ -483,13 +513,12 @@ textarea { vertical-align: top; /* 2 */ } - -/* ============================================================================= +/* ========================================================================== Tables ========================================================================== */ -/* - * Remove most spacing between table cells +/** + * Remove most spacing between table cells. */ table { diff --git a/css/style.css b/css/style.css index 76d56c7..264b622 100755 --- a/css/style.css +++ b/css/style.css @@ -1,325 +1,373 @@ /* Global */ body { - font-family: 'Open Sans', sans-serif; - font-weight: 400; - font-size: 1em; + background-color: #FFF; color: #8a8683; - background-color:#ffffff; + font-family: sans-serif; + font-size: 1em; + font-weight: 400; } + img { max-width: 100%; } + a:link { color: #f68f67; text-decoration: none; } + a:hover { color: #bde2df; text-decoration: none; } + a:visited { color: #f68f67; text-decoration: none; } +p { + padding-bottom: 20px; +} + +.button { + margin:20px 0; + padding: 15px 30px; + color: #ffffff; + font-family: 'Open Sans', sans-serif; + background-color: #f68f67; + border-radius: 25px; + -webkit-border-radius: 25px; + -moz-border-radius: 25px; +} +.button:link { + color: #ffffff; +} +.button:hover { + background-color: #df6c3f; + color: #ffffff; +} +.button:active { + background-color: #bde2df; + color: #ffffff; +} + +.button:visited { + color: #ffffff; +} /* Navigation */ -.menu { - position:fixed; - top:0px; - width:100%; - height:auto; - background-color:#ffffff; - z-index:100; +[role="banner"] { + background-color: #FFF; + height: auto; + position: fixed; + top: 0; + width: 100%; + z-index: 100; } + #logo { - text-align: center; margin: 10px 0; + text-align: center; } + #nav { + margin-top: 30px; text-align: right; - margin: 30px 0 0 0; } -.navigation{ + +.navigation { float: right; list-style: none; margin: 0; } -.navigation li{ + +.navigation li { float: left; - padding:0 0 0 50px; + padding: 0 0 0 50px; } -.navigation li:hover{ - cursor:pointer; + +.navigation a { + color: #8a8683; +} + +.navigation a:hover { color: #a9d3d0; + cursor: pointer; } -.navigation .active{ - cursor:pointer; +.navigation .active a { color: #f68f67; - font-weight:bold; + cursor: pointer; + font-weight: bold; } +/* General Slides */ - - -/* General Slides */ - -.slide{ +.slide { background-attachment: fixed; - width:100%; - height:auto; + height: auto; + padding: 140px 0; position: relative; - padding:140px 0; + width: 100%; } +/* Home */ - -/* Slide 1 */ - -#slide1{ - background-color:#ffffff; +#home { + background-color: #FFF; } -#slide1 h1 { + +#home h1 { + color: #8a8683; font-size: 3.8em; - letter-spacing: -3px; - line-height: 0px; - color:#8a8683; font-weight: 700; + letter-spacing: -3px; + line-height: 0; } -#slide1 h2 { - font-size: 2em; + +#home h2 { color: #8a8683; - line-height: 0px; - padding-bottom:20px; + font-size: 2em; font-weight: 400; + line-height: 0; + padding-bottom: 20px; } +/* What is it? */ - - -/* Slide 2 */ - -#slide2{ - background-image:url('../images/footprints.png'); - background-color:#f68f67; - color:#ffffff; +#what-is-it { + background-color: #f68f67; + background-image: url('../images/footprints.png'); + color: #FFF; } -#slide2 h1 { + +#what-is-it h1 { + color: #FFF; font-size: 3.8em; - letter-spacing: -3px; - line-height: 0px; - color:#ffffff; font-weight: 700; + letter-spacing: -3px; + line-height: 0; } -#slide2 h2 { + +#what-is-it h2 { + color: #FFF; font-size: 2em; - color: #ffffff; - line-height: 0px; - padding-bottom:20px; font-weight: 400; + line-height: 0; + padding-bottom: 20px; } +#what { + text-align: center; +} +#what span { + font-size: 1.5em; +} +/* Demo */ -/* Slide 3 */ - -#slide3{ - background-color:#ffffff; +#demo { + background-color: #FFF; } -#slide3 h1 { + +#demo h1 { + color: #8a8683; font-size: 3.8em; - letter-spacing: -3px; - line-height: 0px; - color:#8a8683; font-weight: 700; + letter-spacing: -3px; + line-height: 0; } -#slide3 h2 { - font-size: 2em; + +#demo h2 { color: #8a8683; - line-height: 0px; - padding-bottom:20px; + font-size: 2em; font-weight: 400; + line-height: 0; + padding-bottom: 20px; } -#test{ - background-color:#bde2df; - color:#ffffff; - text-align:center; + +.test { + background-color: #bde2df; + color: #FFF; font-size: 2em; font-weight: 400; + text-align: center; } +/* Credits */ - - -/* Slide 4 */ - -#slide4{ - background-image:url('../images/sunglasses.png'); - background-color:#8a8683; - color:#ffffff; +#credits { + background-color: #8a8683; + background-image: url('../images/sunglasses.png'); + color: #FFF; } -#slide4 h1 { + +#credits h1 { + color: #FFF; font-size: 3.8em; - letter-spacing: -3px; - line-height: 0px; - color:#ffffff; font-weight: 700; + letter-spacing: -3px; + line-height: 0; } -#slide4 h2 { +#credits h2 { + color: #FFF; font-size: 2em; - color: #ffffff; - line-height: 0px; - padding-bottom:20px; font-weight: 400; + line-height: 0; + padding-bottom: 20px; } - - - - /* Tablet */ -@media screen and (max-width: 1024px) { - -#logo { - width: 100%; - text-align: center; -} - -#nav { - width:100%; - text-align:center; - margin:10px 0; -} - -.navigation{ - width: 100%; - float: center; - list-style: none; - margin: 0; - padding:0; -} - -.navigation li{ - float: left; - width:25%; - padding:0; -} -.slide{ - background-attachment: fixed; - width:100%; - position: relative; - padding:150px 0; -} - -#decorative { - display:none; -} +@media screen and (max-width: 1024px) { -#content { - text-align:center; - width:100%; -} + #logo { + text-align: center; + width: 100%; + } + + #nav { + margin-bottom: 10px; + margin-top: 10px; + text-align: center; + width: 100%; + } + + .navigation { + float: center; + list-style: none; + margin: 0; + padding: 0; + width: 100%; + } + + .navigation li { + float: left; + padding: 0; + width: 25%; + } + + .slide { + background-attachment: fixed; + position: relative; + padding: 150px 0; + width: 100%; + } + + #decorative { + display: none; + } + + .content { + text-align: center; + width: 100%; + } + + #home h1 { + line-height: 1em; + } + + #home h2 { + line-height: 1em; + } + + #what-is-it h1 { + line-height: 1em; + } + + #what-is-it h2 { + line-height: 1em; + } + + #demo h1 { + line-height: 1em; + } + + #demo h2 { + line-height: 1em; + } + + #credits h1 { + line-height: 1em; + } + + #credits h2 { + line-height: 1em; + } -#slide1 h1 { - line-height: 1em; -} -#slide1 h2 { - line-height: 1em; -} -#slide2 h1 { - line-height: 1em; -} -#slide2 h2 { - line-height: 1em; } -#slide3 h1 { - line-height: 1em; -} -#slide3 h2 { - line-height: 1em; -} -#slide4 h1 { - line-height: 1em; -} -#slide4 h2 { - line-height: 1em; -} - -} - - - /* Mobile */ -@media screen and (max-width: 480px) { - -#logo { - width: 100%; - text-align: center; -} - -#nav { - width:100%; - margin:5px 0; -} - -.navigation{ - width: 100%; - float: left; - list-style: none; - margin: 0; - padding:0; -} - -.navigation li{ - float: left; - width:25%; -} - -.slide{ - background-attachment: fixed; - width:100%; - position: relative; - padding:150px 0; -} - - -#slide1 h1 { - line-height: 1em; -} -#slide1 h2 { - line-height: 1em; -} -#slide2 h1 { - line-height: 1em; -} -#slide2 h2 { - line-height: 1em; -} -#slide3 h1 { - line-height: 1em; -} -#slide3 h2 { - line-height: 1em; -} -#slide4 h1 { - line-height: 1em; -} -#slide4 h2 { - line-height: 1em; -} - - -} - - +@media screen and (max-width: 480px) { + #logo { + text-align: center; + } + + #nav { + margin-bottom: 5px; + margin-top: 5px; + } + + .navigation{ + float: left; + list-style: none; + margin: 0; + padding: 0; + width: 100%; + } + + .navigation li { + float: left; + width: 25%; + } + + .slide { + background-attachment: fixed; + position: relative; + padding: 150px 0; + width: 100%; + } + + + #home h1 { + line-height: 1em; + } + + #home h2 { + line-height: 1em; + } + + #what-is-it h1 { + line-height: 1em; + } + + #what-is-it h2 { + line-height: 1em; + } + + #demo h1 { + line-height: 1em; + } + + #demo h2 { + line-height: 1em; + } + + #credits h1 { + line-height: 1em; + } + + #credits h2 { + line-height: 1em; + } + +} \ No newline at end of file diff --git a/images/framework.png b/images/framework.png new file mode 100644 index 0000000..5bf0c15 Binary files /dev/null and b/images/framework.png differ diff --git a/images/parallax.png b/images/parallax.png new file mode 100644 index 0000000..47dadf3 Binary files /dev/null and b/images/parallax.png differ diff --git a/images/responsive.png b/images/responsive.png new file mode 100644 index 0000000..ddbeeab Binary files /dev/null and b/images/responsive.png differ diff --git a/index.html b/index.html index 32424fd..153f77f 100755 --- a/index.html +++ b/index.html @@ -1,113 +1,112 @@ - + -
- - -