├── LICENSE ├── Module 1 ├── Chapter03 │ └── tfirdaus-rwd-blog-6dfd61209ba6 │ │ ├── .gitignore │ │ ├── README.md │ │ ├── css │ │ ├── formalize.css │ │ ├── main.css │ │ ├── normalize.css │ │ ├── responsive.css │ │ ├── responsive.gs.12col.css │ │ ├── style.css │ │ └── style.min.css │ │ ├── image │ │ ├── favicon.png │ │ ├── icon.png │ │ ├── street.jpg │ │ └── village.jpg │ │ ├── index.html │ │ └── scripts │ │ ├── boxsizing.htc │ │ ├── html5shiv.js │ │ ├── placeholder.js │ │ ├── polyfills.js │ │ ├── polyfills.min.js │ │ └── respond.js ├── Chapter04 │ └── The code for chapter 4 is combined with the code in chapter 3.txt ├── Chapter05 │ ├── IMP.md │ ├── assets │ │ ├── css │ │ │ ├── frameworks.css │ │ │ ├── frameworks.css.map │ │ │ ├── style.css │ │ │ └── style.css.map │ │ ├── fonts │ │ │ ├── ionicons.eot │ │ │ ├── ionicons.svg │ │ │ ├── ionicons.ttf │ │ │ └── ionicons.woff │ │ ├── img │ │ │ ├── 6layers.jpg │ │ │ ├── apple-icon.png │ │ │ ├── blur.jpg │ │ │ ├── brain.jpg │ │ │ ├── color.jpg │ │ │ ├── compass.jpg │ │ │ ├── contour.jpg │ │ │ ├── favicon.png │ │ │ ├── flame.jpg │ │ │ ├── hotcold.jpg │ │ │ ├── infinity.jpg │ │ │ ├── lifeguard.jpg │ │ │ ├── meteor.jpg │ │ │ └── thewave.jpg │ │ ├── js │ │ │ ├── bootstrap.js │ │ │ ├── bootstrap.min.js │ │ │ ├── html5shiv.js │ │ │ └── html5shiv.min.js │ │ └── less │ │ │ ├── frameworks.less │ │ │ ├── style.less │ │ │ ├── var-bootstrap.less │ │ │ └── var-jasny.less │ ├── bower.json │ └── index.html ├── Chapter06 │ └── IMP.txt ├── Chapter07 │ ├── IMP.md │ ├── assets │ │ ├── css │ │ │ ├── foundation.css │ │ │ ├── styles.css │ │ │ └── styles.css.map │ │ ├── fonts │ │ │ ├── social_foundicons.eot │ │ │ ├── social_foundicons.svg │ │ │ ├── social_foundicons.ttf │ │ │ └── social_foundicons.woff │ │ ├── img │ │ │ ├── analytics.png │ │ │ ├── apple-icon.png │ │ │ ├── banner.jpg │ │ │ ├── bubbles.png │ │ │ ├── clock.png │ │ │ ├── favicon.png │ │ │ ├── logo.svg │ │ │ ├── mystery.png │ │ │ └── target.png │ │ ├── js │ │ │ ├── fastclick.js │ │ │ ├── fastclick.min.js │ │ │ ├── foundation.js │ │ │ ├── foundation.min.js │ │ │ ├── jquery.js │ │ │ ├── jquery.min.js │ │ │ ├── modernizr.js │ │ │ └── modernizr.min.js │ │ └── scss │ │ │ ├── _config.scss │ │ │ ├── _main.scss │ │ │ ├── _responsive.scss │ │ │ ├── foundation.scss │ │ │ └── styles.scss │ ├── bower.json │ └── index.html └── Chapter08 │ └── IMP.txt ├── Module 2 ├── Chapter01 │ ├── css │ │ └── styles.css │ ├── img │ │ ├── SOC-Logo.png │ │ └── scones.jpg │ └── index.html ├── Chapter02 │ ├── example_02-01 │ │ ├── index.html │ │ └── main.css │ ├── example_02-02 │ │ ├── index.html │ │ └── main.css │ └── example_02-03 │ │ ├── index.html │ │ ├── w1200.css │ │ ├── w300.css │ │ ├── w600.css │ │ └── w900.css ├── Chapter03 │ ├── example_03-01 │ │ └── index.html │ ├── example_03-02 │ │ ├── index.html │ │ ├── main.js │ │ └── styles.css │ ├── example_03-03 │ │ ├── index.html │ │ └── styles.css │ ├── example_03-04 │ │ ├── index.html │ │ └── styles.css │ ├── example_03-05 │ │ ├── index.html │ │ └── styles.css │ ├── example_03-06 │ │ ├── index.html │ │ └── styles.css │ ├── example_03-07 │ │ ├── index.html │ │ └── styles.css │ ├── example_03-08 │ │ ├── index.html │ │ └── styles.css │ ├── example_03-09 │ │ ├── index.html │ │ └── styles.css │ └── img │ │ ├── layout.png │ │ └── layout.sketch ├── Chapter04 │ ├── example1.html │ ├── example2.html │ ├── example3.html │ ├── example4.html │ ├── myVideo.mp4 │ └── myVideoPoster.png ├── Chapter05 │ ├── example_05-01 │ │ ├── index.html │ │ └── styles.css │ ├── example_05-02 │ │ ├── f1.jpg │ │ ├── f10.jpg │ │ ├── f2.jpg │ │ ├── f3.jpg │ │ ├── f4.jpg │ │ ├── f5.jpg │ │ ├── f6.jpg │ │ ├── f7.jpg │ │ ├── f8.jpg │ │ ├── f9.jpg │ │ ├── index.html │ │ └── styles.css │ ├── example_05-03 │ │ ├── index.html │ │ └── styles.css │ ├── example_05-04 │ │ ├── index.html │ │ └── styles.css │ ├── example_05-05 │ │ ├── index.html │ │ └── styles.css │ ├── example_05-06 │ │ ├── index.html │ │ └── styles.css │ ├── example_05-07 │ │ ├── index.html │ │ └── styles.css │ ├── example_05-08 │ │ ├── index.html │ │ └── styles.css │ ├── example_05-09 │ │ ├── f1.jpg │ │ ├── f10.jpg │ │ ├── f2.jpg │ │ ├── f3.jpg │ │ ├── f4.jpg │ │ ├── f5.jpg │ │ ├── f6.jpg │ │ ├── f7.jpg │ │ ├── f8.jpg │ │ ├── f9.jpg │ │ ├── index.html │ │ └── styles.css │ └── example_05-10 │ │ ├── f1.jpg │ │ ├── f10.jpg │ │ ├── f2.jpg │ │ ├── f3.jpg │ │ ├── f4.jpg │ │ ├── f5.jpg │ │ ├── f6.jpg │ │ ├── f7.jpg │ │ ├── f8.jpg │ │ ├── f9.jpg │ │ ├── fonts │ │ ├── Roboto-Regular-webfont.eot │ │ ├── Roboto-Regular-webfont.svg │ │ ├── Roboto-Regular-webfont.ttf │ │ └── Roboto-Regular-webfont.woff │ │ ├── index.html │ │ └── styles.css ├── Chapter06 │ ├── example_06-01 │ │ ├── index.html │ │ └── styles.css │ ├── example_06-02 │ │ ├── index.html │ │ └── styles.css │ ├── example_06-03 │ │ ├── index.html │ │ └── styles.css │ ├── example_06-04 │ │ ├── index.html │ │ └── styles.css │ ├── example_06-05 │ │ ├── index.html │ │ └── styles.css │ ├── example_06-06 │ │ ├── index.html │ │ ├── moon.png │ │ ├── rosetta.png │ │ ├── stars.jpg │ │ └── styles.css │ ├── example_06-07 │ │ ├── index.html │ │ └── styles.css │ └── example_06-08 │ │ ├── el-cap@1x.jpg │ │ ├── el-cap@2x.jpg │ │ ├── index.html │ │ └── styles.css ├── Chapter07 │ ├── example_07-01 │ │ └── Star.svg │ ├── example_07-02 │ │ └── IcoMoon - 5 Icons │ │ │ ├── PNG │ │ │ ├── drag-left-right.png │ │ │ ├── drag-left.png │ │ │ ├── drag-right.png │ │ │ ├── multitouch.png │ │ │ └── touch.png │ │ │ ├── Read Me.txt │ │ │ ├── SVG │ │ │ ├── drag-left-right.svg │ │ │ ├── drag-left.svg │ │ │ ├── drag-right.svg │ │ │ ├── multitouch.svg │ │ │ └── touch.svg │ │ │ ├── demo-files │ │ │ └── demo.css │ │ │ ├── demo.html │ │ │ ├── style.css │ │ │ └── svgdefs.svg │ ├── example_07-03 │ │ ├── Star.svg │ │ ├── index.html │ │ ├── main.js │ │ └── styles.css │ ├── example_07-04 │ │ ├── Star.svg │ │ ├── index.html │ │ └── styles.css │ ├── example_07-05 │ │ ├── filter.svg │ │ ├── index.html │ │ ├── queen@2x-1024x747.png │ │ └── styles.css │ ├── example_07-06 │ │ ├── index.html │ │ └── queen@2x-1024x747.png │ ├── example_07-07 │ │ └── index.html │ ├── example_07-08 │ │ ├── greensock │ │ │ └── TweenMax.min.js │ │ ├── index.html │ │ ├── main.js │ │ └── styles.css │ ├── example_07-09 │ │ ├── index.html │ │ └── styles.css │ └── example_07-10 │ │ ├── defs.svg │ │ ├── index.html │ │ └── styles.css ├── Chapter08 │ ├── example_08-01 │ │ ├── index.html │ │ └── styles.css │ ├── example_08-02 │ │ ├── index.html │ │ └── styles.css │ ├── example_08-03 │ │ ├── index.html │ │ └── styles.css │ ├── example_08-04 │ │ ├── index.html │ │ └── styles.css │ ├── example_08-05 │ │ ├── index.html │ │ └── styles.css │ ├── example_08-06 │ │ ├── index.html │ │ └── styles.css │ ├── example_08-07 │ │ ├── index.html │ │ ├── main.js │ │ ├── modernizr.custom.js │ │ └── styles.css │ └── example_08-08 │ │ ├── index.html │ │ └── styles.css ├── Chapter09 │ ├── example_09-01 │ │ └── index.html │ └── example_09-02 │ │ ├── index.html │ │ ├── js-webshim │ │ ├── dev │ │ │ ├── polyfiller.js │ │ │ └── shims │ │ │ │ ├── FlashCanvas │ │ │ │ ├── canvas2png.js │ │ │ │ ├── flashcanvas.js │ │ │ │ ├── flashcanvas.swf │ │ │ │ ├── proxy.php │ │ │ │ └── save.php │ │ │ │ ├── FlashCanvasPro │ │ │ │ ├── canvas2png.js │ │ │ │ ├── flash10canvas.swf │ │ │ │ ├── flash9canvas.swf │ │ │ │ ├── flashcanvas.js │ │ │ │ ├── proxy.php │ │ │ │ └── save.php │ │ │ │ ├── canvas-blob.js │ │ │ │ ├── color-picker.js │ │ │ │ ├── combos │ │ │ │ ├── 1.js │ │ │ │ ├── 10.js │ │ │ │ ├── 11.js │ │ │ │ ├── 12.js │ │ │ │ ├── 13.js │ │ │ │ ├── 14.js │ │ │ │ ├── 15.js │ │ │ │ ├── 16.js │ │ │ │ ├── 17.js │ │ │ │ ├── 18.js │ │ │ │ ├── 2.js │ │ │ │ ├── 21.js │ │ │ │ ├── 22.js │ │ │ │ ├── 23.js │ │ │ │ ├── 25.js │ │ │ │ ├── 27.js │ │ │ │ ├── 28.js │ │ │ │ ├── 29.js │ │ │ │ ├── 3.js │ │ │ │ ├── 30.js │ │ │ │ ├── 31.js │ │ │ │ ├── 33.js │ │ │ │ ├── 34.js │ │ │ │ ├── 4.js │ │ │ │ ├── 5.js │ │ │ │ ├── 6.js │ │ │ │ ├── 7.js │ │ │ │ ├── 8.js │ │ │ │ ├── 9.js │ │ │ │ ├── 97.js │ │ │ │ ├── 98.js │ │ │ │ ├── 99.js │ │ │ │ └── comboinfo.json │ │ │ │ ├── details.js │ │ │ │ ├── dom-extend.js │ │ │ │ ├── es5.js │ │ │ │ ├── es6.js │ │ │ │ ├── excanvas.js │ │ │ │ ├── filereader-xhr.js │ │ │ │ ├── form-combat.js │ │ │ │ ├── form-core.js │ │ │ │ ├── form-datalist-lazy.js │ │ │ │ ├── form-datalist.js │ │ │ │ ├── form-fixrangechange.js │ │ │ │ ├── form-inputmode.js │ │ │ │ ├── form-message.js │ │ │ │ ├── form-native-extend.js │ │ │ │ ├── form-number-date-api.js │ │ │ │ ├── form-number-date-ui.js │ │ │ │ ├── form-shim-extend.js │ │ │ │ ├── form-shim-extend2.js │ │ │ │ ├── form-validation.js │ │ │ │ ├── form-validators.js │ │ │ │ ├── forms-picker.js │ │ │ │ ├── geolocation.js │ │ │ │ ├── i18n │ │ │ │ ├── formcfg-ar.js │ │ │ │ ├── formcfg-ca.js │ │ │ │ ├── formcfg-ch-CN.js │ │ │ │ ├── formcfg-cs.js │ │ │ │ ├── formcfg-de.js │ │ │ │ ├── formcfg-el.js │ │ │ │ ├── formcfg-en.js │ │ │ │ ├── formcfg-es.js │ │ │ │ ├── formcfg-fa.js │ │ │ │ ├── formcfg-fr.js │ │ │ │ ├── formcfg-he.js │ │ │ │ ├── formcfg-hi.js │ │ │ │ ├── formcfg-hu.js │ │ │ │ ├── formcfg-it.js │ │ │ │ ├── formcfg-ja.js │ │ │ │ ├── formcfg-lt.js │ │ │ │ ├── formcfg-nl.js │ │ │ │ ├── formcfg-no.js │ │ │ │ ├── formcfg-pl.js │ │ │ │ ├── formcfg-pt-BR.js │ │ │ │ ├── formcfg-pt-PT.js │ │ │ │ ├── formcfg-pt.js │ │ │ │ ├── formcfg-ru.js │ │ │ │ ├── formcfg-sv.js │ │ │ │ ├── formcfg-zh-CN.js │ │ │ │ └── formcfg-zh-TW.js │ │ │ │ ├── jme │ │ │ │ ├── _icons.scss │ │ │ │ ├── alternate-media.js │ │ │ │ ├── base.js │ │ │ │ ├── controls.css │ │ │ │ ├── controls.scss │ │ │ │ ├── jme.eot │ │ │ │ ├── jme.svg │ │ │ │ ├── jme.ttf │ │ │ │ ├── jme.woff │ │ │ │ ├── mediacontrols-lazy.js │ │ │ │ ├── mediacontrols.js │ │ │ │ └── playlist.js │ │ │ │ ├── jpicker │ │ │ │ ├── ChangeLog.txt │ │ │ │ ├── ReadMe.txt │ │ │ │ ├── images │ │ │ │ │ ├── AlphaBar.png │ │ │ │ │ ├── Bars.png │ │ │ │ │ ├── Maps.png │ │ │ │ │ ├── NoColor.png │ │ │ │ │ ├── bar-opacity.png │ │ │ │ │ ├── map-opacity.png │ │ │ │ │ ├── mappoint.gif │ │ │ │ │ ├── picker.gif │ │ │ │ │ ├── preview-opacity.png │ │ │ │ │ └── rangearrows.gif │ │ │ │ └── jpicker.css │ │ │ │ ├── matchMedia.js │ │ │ │ ├── mediacapture-picker.js │ │ │ │ ├── mediacapture.js │ │ │ │ ├── mediaelement-core.js │ │ │ │ ├── mediaelement-debug.js │ │ │ │ ├── mediaelement-jaris.js │ │ │ │ ├── mediaelement-native-fix.js │ │ │ │ ├── mediaelement-yt.js │ │ │ │ ├── moxie │ │ │ │ ├── flash │ │ │ │ │ ├── Moxie.cdn.swf │ │ │ │ │ └── Moxie.min.swf │ │ │ │ └── js │ │ │ │ │ ├── moxie-html4.js │ │ │ │ │ └── moxie-swf.js │ │ │ │ ├── picture.js │ │ │ │ ├── plugins │ │ │ │ └── jquery.ui.position.js │ │ │ │ ├── range-ui.js │ │ │ │ ├── sizzle.js │ │ │ │ ├── sticky.js │ │ │ │ ├── styles │ │ │ │ ├── color-picker.png │ │ │ │ ├── forms-ext.css │ │ │ │ ├── forms-picker.css │ │ │ │ ├── progress.gif │ │ │ │ ├── progress.png │ │ │ │ ├── scss │ │ │ │ │ ├── _api-forms-ext.scss │ │ │ │ │ ├── _api-shim.scss │ │ │ │ │ ├── _extends.scss │ │ │ │ │ ├── forms-ext.scss │ │ │ │ │ ├── forms-picker.scss │ │ │ │ │ ├── shim-ext.scss │ │ │ │ │ └── shim.scss │ │ │ │ ├── shim-ext.css │ │ │ │ ├── shim.css │ │ │ │ ├── transparent.png │ │ │ │ ├── widget-font.zip │ │ │ │ ├── widget.eot │ │ │ │ ├── widget.svg │ │ │ │ ├── widget.ttf │ │ │ │ └── widget.woff │ │ │ │ ├── swf │ │ │ │ └── JarisFLVPlayer.swf │ │ │ │ ├── swfmini-embed.js │ │ │ │ ├── swfmini.js │ │ │ │ ├── track-ui.js │ │ │ │ ├── track.js │ │ │ │ ├── url.js │ │ │ │ ├── usermedia-core.js │ │ │ │ └── usermedia-shim.js │ │ └── minified │ │ │ ├── polyfiller.js │ │ │ └── shims │ │ │ ├── FlashCanvas │ │ │ ├── canvas2png.js │ │ │ ├── flashcanvas.js │ │ │ └── flashcanvas.swf │ │ │ ├── FlashCanvasPro │ │ │ ├── canvas2png.js │ │ │ ├── flash10canvas.swf │ │ │ ├── flash9canvas.swf │ │ │ └── flashcanvas.js │ │ │ ├── canvas-blob.js │ │ │ ├── color-picker.js │ │ │ ├── combos │ │ │ ├── 1.js │ │ │ ├── 10.js │ │ │ ├── 11.js │ │ │ ├── 12.js │ │ │ ├── 13.js │ │ │ ├── 14.js │ │ │ ├── 15.js │ │ │ ├── 16.js │ │ │ ├── 17.js │ │ │ ├── 18.js │ │ │ ├── 2.js │ │ │ ├── 21.js │ │ │ ├── 22.js │ │ │ ├── 23.js │ │ │ ├── 25.js │ │ │ ├── 27.js │ │ │ ├── 28.js │ │ │ ├── 29.js │ │ │ ├── 3.js │ │ │ ├── 30.js │ │ │ ├── 31.js │ │ │ ├── 33.js │ │ │ ├── 34.js │ │ │ ├── 4.js │ │ │ ├── 5.js │ │ │ ├── 6.js │ │ │ ├── 7.js │ │ │ ├── 8.js │ │ │ ├── 9.js │ │ │ ├── 97.js │ │ │ ├── 98.js │ │ │ └── 99.js │ │ │ ├── details.js │ │ │ ├── dom-extend.js │ │ │ ├── es5.js │ │ │ ├── es6.js │ │ │ ├── excanvas.js │ │ │ ├── filereader-xhr.js │ │ │ ├── form-combat.js │ │ │ ├── form-core.js │ │ │ ├── form-datalist-lazy.js │ │ │ ├── form-datalist.js │ │ │ ├── form-fixrangechange.js │ │ │ ├── form-inputmode.js │ │ │ ├── form-message.js │ │ │ ├── form-native-extend.js │ │ │ ├── form-number-date-api.js │ │ │ ├── form-number-date-ui.js │ │ │ ├── form-shim-extend.js │ │ │ ├── form-shim-extend2.js │ │ │ ├── form-validation.js │ │ │ ├── form-validators.js │ │ │ ├── forms-picker.js │ │ │ ├── geolocation.js │ │ │ ├── i18n │ │ │ ├── formcfg-ar.js │ │ │ ├── formcfg-ca.js │ │ │ ├── formcfg-ch-CN.js │ │ │ ├── formcfg-cs.js │ │ │ ├── formcfg-de.js │ │ │ ├── formcfg-el.js │ │ │ ├── formcfg-en.js │ │ │ ├── formcfg-es.js │ │ │ ├── formcfg-fa.js │ │ │ ├── formcfg-fr.js │ │ │ ├── formcfg-he.js │ │ │ ├── formcfg-hi.js │ │ │ ├── formcfg-hu.js │ │ │ ├── formcfg-it.js │ │ │ ├── formcfg-ja.js │ │ │ ├── formcfg-lt.js │ │ │ ├── formcfg-nl.js │ │ │ ├── formcfg-no.js │ │ │ ├── formcfg-pl.js │ │ │ ├── formcfg-pt-BR.js │ │ │ ├── formcfg-pt-PT.js │ │ │ ├── formcfg-pt.js │ │ │ ├── formcfg-ru.js │ │ │ ├── formcfg-sv.js │ │ │ ├── formcfg-zh-CN.js │ │ │ └── formcfg-zh-TW.js │ │ │ ├── jme │ │ │ ├── alternate-media.js │ │ │ ├── base.js │ │ │ ├── controls.css │ │ │ ├── jme.eot │ │ │ ├── jme.svg │ │ │ ├── jme.ttf │ │ │ ├── jme.woff │ │ │ ├── mediacontrols-lazy.js │ │ │ ├── mediacontrols.js │ │ │ └── playlist.js │ │ │ ├── jpicker │ │ │ ├── images │ │ │ │ ├── AlphaBar.png │ │ │ │ ├── Bars.png │ │ │ │ ├── Maps.png │ │ │ │ ├── NoColor.png │ │ │ │ ├── bar-opacity.png │ │ │ │ ├── map-opacity.png │ │ │ │ ├── mappoint.gif │ │ │ │ ├── picker.gif │ │ │ │ ├── preview-opacity.png │ │ │ │ └── rangearrows.gif │ │ │ └── jpicker.css │ │ │ ├── matchMedia.js │ │ │ ├── mediacapture-picker.js │ │ │ ├── mediacapture.js │ │ │ ├── mediaelement-core.js │ │ │ ├── mediaelement-debug.js │ │ │ ├── mediaelement-jaris.js │ │ │ ├── mediaelement-native-fix.js │ │ │ ├── mediaelement-yt.js │ │ │ ├── moxie │ │ │ ├── flash │ │ │ │ ├── Moxie.cdn.swf │ │ │ │ └── Moxie.min.swf │ │ │ └── js │ │ │ │ ├── moxie-html4.js │ │ │ │ └── moxie-swf.js │ │ │ ├── picture.js │ │ │ ├── plugins │ │ │ └── jquery.ui.position.js │ │ │ ├── range-ui.js │ │ │ ├── sizzle.js │ │ │ ├── sticky.js │ │ │ ├── styles │ │ │ ├── color-picker.png │ │ │ ├── forms-ext.css │ │ │ ├── forms-picker.css │ │ │ ├── progress.gif │ │ │ ├── progress.png │ │ │ ├── shim-ext.css │ │ │ ├── shim.css │ │ │ ├── transparent.png │ │ │ ├── widget.eot │ │ │ ├── widget.svg │ │ │ ├── widget.ttf │ │ │ └── widget.woff │ │ │ ├── swf │ │ │ └── JarisFLVPlayer.swf │ │ │ ├── swfmini-embed.js │ │ │ ├── swfmini.js │ │ │ ├── track-ui.js │ │ │ ├── track.js │ │ │ ├── url.js │ │ │ ├── usermedia-core.js │ │ │ └── usermedia-shim.js │ │ ├── js │ │ └── jquery-2.1.3.min.js │ │ ├── styles-unprefixed.css │ │ └── styles.css └── Chapter10 │ ├── example_10-01 │ ├── index.html │ ├── main.js │ └── styles.css │ └── example_10-02 │ ├── index.html │ └── styles.css ├── Module 3 ├── Chapter01 │ ├── 5442OT_01_01.html │ ├── 5442OT_01_02.html │ ├── 5442OT_01_03.html │ ├── 5442OT_01_04.html │ ├── 5442OT_01_05.html │ ├── 5442OT_01_06.html │ ├── 5442OT_01_07.html │ ├── images │ │ ├── index.php │ │ ├── robot-low.png │ │ ├── robot-med.png │ │ └── robot.png │ ├── robot-low.png │ ├── robot-med.png │ └── robot.png ├── Chapter02 │ ├── 5442OT_02_01.html │ ├── 5442OT_02_02.html │ ├── 5442OT_02_03.html │ ├── 5442OT_02_04.html │ ├── 5442OT_02_05.html │ ├── 5442OT_02_06.html │ ├── 5442OT_02_07.html │ ├── 5442OT_02_08.html │ ├── 5442OT_02_09.html │ ├── 5442OT_02_10.html │ ├── 5442OT_02_11.html │ ├── 5442OT_02_12.html │ └── images │ │ └── mask2.png ├── Chapter03 │ ├── 5442OT_03_01_responsive-layout-min-max-width.html │ ├── 5442OT_03_02_relative-padding.html │ ├── 5442OT_03_03_add-media-query.html │ ├── 5442OT_03_04_resp-width-layout-media-query.html │ ├── 5442OT_03_05_change-imagesize-mediaquery.html │ ├── 5442OT_03_06_hide-element-mediaquery.html │ ├── 5442OT_03_07_make-smoothly-transitioning-resp-layout.html │ ├── 5442OT_03_index.txt │ └── images │ │ ├── robot-low.png │ │ ├── robot-med.png │ │ ├── robot-wide.jpg │ │ ├── robot-wide.png │ │ └── robot.png ├── Chapter04 │ ├── 5442OT_04_01 │ │ ├── 5442OT_04_fluid-960.html │ │ └── css │ │ │ ├── 960.css │ │ │ ├── grid.css │ │ │ ├── ie.css │ │ │ ├── ie6.css │ │ │ ├── layout.css │ │ │ ├── nav.css │ │ │ ├── reset.css │ │ │ ├── responsive.css │ │ │ └── text.css │ ├── 5442OT_04_02 │ │ ├── 5442OT_04_blueprint.html │ │ ├── css │ │ │ ├── blueprint │ │ │ │ ├── .DS_Store │ │ │ │ ├── ie.css │ │ │ │ ├── plugins │ │ │ │ │ ├── buttons │ │ │ │ │ │ ├── icons │ │ │ │ │ │ │ ├── cross.png │ │ │ │ │ │ │ ├── key.png │ │ │ │ │ │ │ └── tick.png │ │ │ │ │ │ ├── readme.txt │ │ │ │ │ │ └── screen.css │ │ │ │ │ ├── fancy-type │ │ │ │ │ │ ├── readme.txt │ │ │ │ │ │ └── screen.css │ │ │ │ │ ├── link-icons │ │ │ │ │ │ ├── icons │ │ │ │ │ │ │ ├── doc.png │ │ │ │ │ │ │ ├── email.png │ │ │ │ │ │ │ ├── external.png │ │ │ │ │ │ │ ├── feed.png │ │ │ │ │ │ │ ├── im.png │ │ │ │ │ │ │ ├── lock.png │ │ │ │ │ │ │ ├── pdf.png │ │ │ │ │ │ │ ├── visited.png │ │ │ │ │ │ │ └── xls.png │ │ │ │ │ │ ├── readme.txt │ │ │ │ │ │ └── screen.css │ │ │ │ │ └── rtl │ │ │ │ │ │ ├── readme.txt │ │ │ │ │ │ └── screen.css │ │ │ │ ├── print.css │ │ │ │ ├── screen.css │ │ │ │ └── src │ │ │ │ │ ├── forms.css │ │ │ │ │ ├── grid.css │ │ │ │ │ ├── grid.png │ │ │ │ │ ├── ie.css │ │ │ │ │ ├── print.css │ │ │ │ │ ├── reset.css │ │ │ │ │ └── typography.css │ │ │ └── responsive.css │ │ └── robot-low.png │ ├── 5442OT_04_03 │ │ ├── 5442OT_04_golden_grid.html │ │ ├── CSS │ │ │ ├── .DS_Store │ │ │ ├── golden-base │ │ │ │ ├── golden-min.css │ │ │ │ └── golden.css │ │ │ ├── golden-extend │ │ │ │ ├── golden-min.css │ │ │ │ ├── golden.css │ │ │ │ ├── reset-min.css │ │ │ │ ├── reset.css │ │ │ │ ├── typography-min.css │ │ │ │ └── typography.css │ │ │ ├── ie8.css │ │ │ └── responsive.css │ │ └── images │ │ │ ├── 150.jpg │ │ │ ├── 150X112.gif │ │ │ ├── 150X84.gif │ │ │ ├── 151.jpg │ │ │ ├── 152.jpg │ │ │ ├── 310X174.gif │ │ │ ├── 310X232.gif │ │ │ ├── 350.jpg │ │ │ ├── 470.jpg │ │ │ ├── 470X352.gif │ │ │ ├── 470x264.gif │ │ │ ├── 800.jpg │ │ │ ├── ISS1.jpg │ │ │ ├── Paul_CC▌ºzanne_169.jpg │ │ │ ├── bg.gif │ │ │ ├── callcenter.jpg │ │ │ ├── motogp.jpg │ │ │ ├── obama.jpg │ │ │ ├── parket.jpg │ │ │ ├── pattern.gif │ │ │ └── robot-wide.png │ ├── 5442OT_04_04 │ │ ├── 5442OT_04_gumby.html │ │ ├── css │ │ │ ├── .DS_Store │ │ │ ├── gumby.12col.css │ │ │ ├── gumby.16col.css │ │ │ ├── gumby.hybrid.css │ │ │ ├── import12.css │ │ │ ├── import16.css │ │ │ ├── imports.css │ │ │ ├── style.css │ │ │ ├── text.css │ │ │ └── ui.css │ │ ├── img │ │ │ ├── icon_drawertoggle.png │ │ │ ├── icon_nav_toggle.gif │ │ │ ├── icon_sample.png │ │ │ ├── img1.jpg │ │ │ ├── img2.jpg │ │ │ ├── img_logo.png │ │ │ └── sprite_checkradio.gif │ │ └── js │ │ │ ├── libs │ │ │ ├── gumby.js │ │ │ ├── gumby.min.js │ │ │ ├── jquery-1.7.2.min.js │ │ │ └── modernizr-2.0.6.min.js │ │ │ ├── main.js │ │ │ └── plugins.js │ └── 5442OT_04_05 │ │ ├── 5442OT_04_bootstrap.html │ │ ├── 5442OT_04_index.html │ │ ├── css │ │ ├── .DS_Store │ │ ├── bootstrap-responsive.css │ │ ├── bootstrap-responsive.min.css │ │ ├── bootstrap.css │ │ └── bootstrap.min.css │ │ ├── img │ │ ├── .DS_Store │ │ ├── glyphicons-halflings-white.png │ │ └── glyphicons-halflings.png │ │ └── js │ │ ├── .DS_Store │ │ ├── bootstrap.js │ │ └── bootstrap.min.js └── Chapter05 │ ├── adding-a-mobile-native-looking-button-with-jquery-mobile.html │ ├── adding-a-second-page-in-jquery-mobile.html │ ├── addint-tags-for-jquery-mobile.html │ ├── making-a-list-element-in-jquery-mobile.html │ ├── mobile-only-css.html │ └── mobile.css └── README.md /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 Packt 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Module 1/Chapter03/tfirdaus-rwd-blog-6dfd61209ba6/.gitignore: -------------------------------------------------------------------------------- 1 | # osx noise 2 | .DS_Store 3 | profile 4 | Thumbs.db 5 | 6 | # xcode noise 7 | build/* 8 | *.mode1 9 | *.mode1v3 10 | *.mode2v3 11 | *.perspective 12 | *.perspectivev3 13 | *.pbxuser 14 | *.xcworkspace 15 | xcuserdata 16 | 17 | # svn & cvs 18 | .svn 19 | CVS 20 | -------------------------------------------------------------------------------- /Module 1/Chapter03/tfirdaus-rwd-blog-6dfd61209ba6/README.md: -------------------------------------------------------------------------------- 1 | #Responsive Blog 2 | 3 | Source files of a Responsive Blog built using [Responsive.gs](http://responsive.gs/). Steps are covered in detail in Responsive Web Design by Example, Second Edition. 4 | 5 | -------------------------------------------------------------------------------- /Module 1/Chapter03/tfirdaus-rwd-blog-6dfd61209ba6/css/responsive.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: 640px) { 2 | .blog-name { 3 | text-align: left; 4 | margin-bottom: 0; 5 | } 6 | .blog-menu li, 7 | .post-meta li, 8 | .social-media li { 9 | display: inline; 10 | } 11 | .post-title { 12 | font-size: 48px; 13 | } 14 | .blog-pagination li, 15 | .blog-pagination a { 16 | display: inline; 17 | } 18 | .blog-pagination .pageof { 19 | position: relative; 20 | top: 0; 21 | padding: 0 20px; 22 | } 23 | .social-media { 24 | text-align: left; 25 | } 26 | .copyright { 27 | text-align: right; 28 | } 29 | } -------------------------------------------------------------------------------- /Module 1/Chapter03/tfirdaus-rwd-blog-6dfd61209ba6/css/style.css: -------------------------------------------------------------------------------- 1 | @import url("normalize.css"); 2 | @import url("formalize.css"); 3 | @import url("responsive.gs.12col.css"); 4 | @import url("main.css"); 5 | @import url("responsive.css"); -------------------------------------------------------------------------------- /Module 1/Chapter03/tfirdaus-rwd-blog-6dfd61209ba6/image/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 1/Chapter03/tfirdaus-rwd-blog-6dfd61209ba6/image/favicon.png -------------------------------------------------------------------------------- /Module 1/Chapter03/tfirdaus-rwd-blog-6dfd61209ba6/image/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 1/Chapter03/tfirdaus-rwd-blog-6dfd61209ba6/image/icon.png -------------------------------------------------------------------------------- /Module 1/Chapter03/tfirdaus-rwd-blog-6dfd61209ba6/image/street.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 1/Chapter03/tfirdaus-rwd-blog-6dfd61209ba6/image/street.jpg -------------------------------------------------------------------------------- /Module 1/Chapter03/tfirdaus-rwd-blog-6dfd61209ba6/image/village.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 1/Chapter03/tfirdaus-rwd-blog-6dfd61209ba6/image/village.jpg -------------------------------------------------------------------------------- /Module 1/Chapter03/tfirdaus-rwd-blog-6dfd61209ba6/scripts/polyfills.js: -------------------------------------------------------------------------------- 1 | // @koala-prepend "html5shiv.js" 2 | // @koala-prepend "respond.js" 3 | // @koala-prepend "placeholder.js" -------------------------------------------------------------------------------- /Module 1/Chapter04/The code for chapter 4 is combined with the code in chapter 3.txt: -------------------------------------------------------------------------------- 1 | The code for chapter 4 is combined with the code in chapter 3 -------------------------------------------------------------------------------- /Module 1/Chapter05/IMP.md: -------------------------------------------------------------------------------- 1 | #Responsive Portfolio 2 | 3 | A demo and source file of responsive portfolio website of Responsive Web Design by Examples, Second Edition. 4 | -------------------------------------------------------------------------------- /Module 1/Chapter05/assets/css/style.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"style.css","sources":["style.less","../../bower_components/bootstrap/less/mixins/vendor-prefixes.less"],"names":[],"mappings":"AASA,SAgCA,kBAIC,IA0BD,kBAGC,IAhEA,aAAA,CACA,wBAAA,CACA,cAAA,CACA,mBAID,iBACC,gBACC,aAAA,CACA,UAAA,CACA,iBAIF,iBACA,mBACA,mBACA,kBACC,kBAGD,gBACC,iBACC,yBAFF,gBAIC,OACC,WAIF,mBACC,wBAAA,CACA,gBAAA,CACA,oBAHD,kBAOC,iBACC,mBARF,kBAWC,kBACC,YAAA,CACA,qBAAA,CACA,iBAAA,CACA,eAAA,CACA,iBAAA,CACA,gBAAA,CCiIA,gCAAA,CACK,2BAAA,CACG,yBDjIR,kBARD,iBAQE,OCQD,0CAAA,CACQ,mCD5BV,kBAuBC,oBACC,eAAA,CACA,eAAA,CACA,WAIF,mBACC,gBAAA,CACA,oBAFD,kBAMC,OACC,UAAA,CACA,eAAA,CACA,iBAAA,CACA,iBAVF,kBAMC,MAKC,OAXF,kBAMC,MAMC,UAZF,kBAMC,MAOC,QACC,eAAA,CACA,kBAfH,kBAMC,MAWC,MACC,aAAA,CACA,UAAA,CCiGD,yCAAA,CACK,oCAAA,CACG,kCD7FV,kBACC,gBAAA,CACA,oBAFD,iBAGC,SACC,mBAJF,iBAGC,QAEC,IACC,eANH,iBAGC,QAKC,IACC,eAAA,CACA,oBAAA,CACA,cAXH,iBAGC,QAUC,GACC,eAAA,CACA,UAAA,CACA,oBAAA,CC2ED,8BAAA,CACK,yBAAA,CACG,uBD3EP,iBAfF,QAUC,EAKE,QACA,aAAA,CACA,cAAA,CACA,kBArBJ,iBAGC,QAqBC,SAAS,EAAC,OACT,cAzBH,iBAGC,QAwBC,UAAU,EAAC,OACV,cA5BH,iBA+BC,YACC","sourceRoot":"../less"} -------------------------------------------------------------------------------- /Module 1/Chapter05/assets/fonts/ionicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 1/Chapter05/assets/fonts/ionicons.eot -------------------------------------------------------------------------------- /Module 1/Chapter05/assets/fonts/ionicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 1/Chapter05/assets/fonts/ionicons.ttf -------------------------------------------------------------------------------- /Module 1/Chapter05/assets/fonts/ionicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 1/Chapter05/assets/fonts/ionicons.woff -------------------------------------------------------------------------------- /Module 1/Chapter05/assets/img/6layers.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 1/Chapter05/assets/img/6layers.jpg -------------------------------------------------------------------------------- /Module 1/Chapter05/assets/img/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 1/Chapter05/assets/img/apple-icon.png -------------------------------------------------------------------------------- /Module 1/Chapter05/assets/img/blur.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 1/Chapter05/assets/img/blur.jpg -------------------------------------------------------------------------------- /Module 1/Chapter05/assets/img/brain.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 1/Chapter05/assets/img/brain.jpg -------------------------------------------------------------------------------- /Module 1/Chapter05/assets/img/color.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 1/Chapter05/assets/img/color.jpg -------------------------------------------------------------------------------- /Module 1/Chapter05/assets/img/compass.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 1/Chapter05/assets/img/compass.jpg -------------------------------------------------------------------------------- /Module 1/Chapter05/assets/img/contour.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 1/Chapter05/assets/img/contour.jpg -------------------------------------------------------------------------------- /Module 1/Chapter05/assets/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 1/Chapter05/assets/img/favicon.png -------------------------------------------------------------------------------- /Module 1/Chapter05/assets/img/flame.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 1/Chapter05/assets/img/flame.jpg -------------------------------------------------------------------------------- /Module 1/Chapter05/assets/img/hotcold.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 1/Chapter05/assets/img/hotcold.jpg -------------------------------------------------------------------------------- /Module 1/Chapter05/assets/img/infinity.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 1/Chapter05/assets/img/infinity.jpg -------------------------------------------------------------------------------- /Module 1/Chapter05/assets/img/lifeguard.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 1/Chapter05/assets/img/lifeguard.jpg -------------------------------------------------------------------------------- /Module 1/Chapter05/assets/img/meteor.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 1/Chapter05/assets/img/meteor.jpg -------------------------------------------------------------------------------- /Module 1/Chapter05/assets/img/thewave.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 1/Chapter05/assets/img/thewave.jpg -------------------------------------------------------------------------------- /Module 1/Chapter05/assets/js/bootstrap.js: -------------------------------------------------------------------------------- 1 | // @koala-prepend "../../bower_components/jquery/dist/jquery.js" 2 | // @koala-prepend "../../bower_components/bootstrap/js/transition.js" 3 | // @koala-prepend "../../bower_components/jasny-bootstrap/js/offcanvas.js" -------------------------------------------------------------------------------- /Module 1/Chapter05/assets/js/html5shiv.js: -------------------------------------------------------------------------------- 1 | // @koala-prepend "../../bower_components/html5shiv/dist/html5shiv.js" -------------------------------------------------------------------------------- /Module 1/Chapter05/bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "responsive-portfolio", 3 | "version": "1.0.0", 4 | "homepage": "https://github.com/tfirdaus/rwd-portfolio", 5 | "authors": [ 6 | "Thoriq Firdaus " 7 | ], 8 | "description": "a responsive portfolio website built with Bootstrap", 9 | "main": "index.html", 10 | "moduleType": [ 11 | "globals" 12 | ], 13 | "keywords": [ 14 | "portfolio", 15 | "responsive", 16 | "bootstrap" 17 | ], 18 | "license": "MIT", 19 | "private": true, 20 | "ignore": [ 21 | "**/.*", 22 | "node_modules", 23 | "bower_components", 24 | "test", 25 | "tests" 26 | ], 27 | "dependencies": { 28 | "bootstrap": "3.2.0", 29 | "ionicons-less": "~1.4.1", 30 | "html5shiv": "~3.7.2", 31 | "jasny-bootstrap": "~3.1.3" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /Module 1/Chapter06/IMP.txt: -------------------------------------------------------------------------------- 1 | The code for chapter 6 is combined with the code in chapter 5 -------------------------------------------------------------------------------- /Module 1/Chapter07/IMP.md: -------------------------------------------------------------------------------- 1 | ##Responsive Website for Startup 2 | 3 | A demo and source code of responsive website from Responsive Web Design by Examples, Second Edition, **Chapter 7 and 8**. 4 | 5 | ###Dependencies 6 | 7 | * [Foundation](http://foundation.zurb.com/) by Zurb 8 | * [Foundation Icons](https://github.com/zurb/foundation-icons) by Zurb 9 | * [Bourbon](http://bourbon.io/), a Sass Mixins library 10 | 11 | ####Installing dependencies 12 | Install the dependencies all at once through Bower using this following command: 13 | `bower install` 14 | 15 | -------------------------------------------------------------------------------- /Module 1/Chapter07/assets/fonts/social_foundicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 1/Chapter07/assets/fonts/social_foundicons.eot -------------------------------------------------------------------------------- /Module 1/Chapter07/assets/fonts/social_foundicons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Module 1/Chapter07/assets/fonts/social_foundicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 1/Chapter07/assets/fonts/social_foundicons.ttf -------------------------------------------------------------------------------- /Module 1/Chapter07/assets/fonts/social_foundicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 1/Chapter07/assets/fonts/social_foundicons.woff -------------------------------------------------------------------------------- /Module 1/Chapter07/assets/img/analytics.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 1/Chapter07/assets/img/analytics.png -------------------------------------------------------------------------------- /Module 1/Chapter07/assets/img/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 1/Chapter07/assets/img/apple-icon.png -------------------------------------------------------------------------------- /Module 1/Chapter07/assets/img/banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 1/Chapter07/assets/img/banner.jpg -------------------------------------------------------------------------------- /Module 1/Chapter07/assets/img/bubbles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 1/Chapter07/assets/img/bubbles.png -------------------------------------------------------------------------------- /Module 1/Chapter07/assets/img/clock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 1/Chapter07/assets/img/clock.png -------------------------------------------------------------------------------- /Module 1/Chapter07/assets/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 1/Chapter07/assets/img/favicon.png -------------------------------------------------------------------------------- /Module 1/Chapter07/assets/img/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Module 1/Chapter07/assets/img/mystery.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 1/Chapter07/assets/img/mystery.png -------------------------------------------------------------------------------- /Module 1/Chapter07/assets/img/target.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 1/Chapter07/assets/img/target.png -------------------------------------------------------------------------------- /Module 1/Chapter07/assets/js/fastclick.js: -------------------------------------------------------------------------------- 1 | // @koala-prepend "../../components/fastclick/lib/fastclick.js" -------------------------------------------------------------------------------- /Module 1/Chapter07/assets/js/foundation.js: -------------------------------------------------------------------------------- 1 | // @koala-prepend "../../components/foundation/js/vendor/jquery.js" 2 | // @koala-prepend "../../components/foundation/js/foundation/foundation.js" 3 | // @koala-prepend "../../components/foundation/js/foundation/foundation.topbar.js" 4 | // @koala-prepend "../../components/foundation/js/foundation/foundation.orbit.js" 5 | -------------------------------------------------------------------------------- /Module 1/Chapter07/assets/js/jquery.js: -------------------------------------------------------------------------------- 1 | // @koala-prepend "../../components/jquery/dist/jquery.js" -------------------------------------------------------------------------------- /Module 1/Chapter07/assets/js/modernizr.js: -------------------------------------------------------------------------------- 1 | // @koala-prepend "../../components/modernizr/modernizr.js" -------------------------------------------------------------------------------- /Module 1/Chapter07/assets/scss/_responsive.scss: -------------------------------------------------------------------------------- 1 | @media #{$small-up} { 2 | .startup-name a { 3 | position: relative; 4 | left: rem-calc(15); 5 | } 6 | } 7 | @media #{$small-only} { 8 | .startup-header { 9 | .startup-name a { 10 | background-size: auto 80%; 11 | } 12 | .startup-top-bar { 13 | padding-top: rem-calc(15); 14 | .top-bar-section { 15 | text-align: center; 16 | } 17 | .sign-up { 18 | padding-top: 0; 19 | } 20 | } 21 | .startup-hero { 22 | text-align: center; 23 | } 24 | } 25 | .startup-footer { 26 | .secondary-nav { 27 | li, a { 28 | display: block; 29 | } 30 | a { 31 | padding: rem-calc(10); 32 | } 33 | } 34 | } 35 | } 36 | @media #{$medium-up} { 37 | .startup-top-bar { 38 | .log-in { 39 | padding-right: 3px; 40 | } 41 | .sign-up { 42 | padding-left: 3px; 43 | } 44 | } 45 | } 46 | @media #{$large-only} { 47 | .startup-name a { 48 | position: relative; 49 | left: rem-calc(0); 50 | } 51 | } -------------------------------------------------------------------------------- /Module 1/Chapter07/assets/scss/styles.scss: -------------------------------------------------------------------------------- 1 | @import "../../components/bourbon/dist/bourbon"; 2 | @import "config"; 3 | @import "main"; 4 | @import "responsive"; -------------------------------------------------------------------------------- /Module 1/Chapter07/bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "startup", 3 | "version": "1.0.0", 4 | "homepage": "https://github.com/tfirdaus/rwd-startup", 5 | "authors": [ 6 | "Thoriq Firdaus " 7 | ], 8 | "description": "An example of corporate website built using Foundation", 9 | "main": "index.html", 10 | "moduleType": [ 11 | "globals" 12 | ], 13 | "keywords": [ 14 | "startup", 15 | "responsive", 16 | "foundation" 17 | ], 18 | "license": "MIT", 19 | "private": true, 20 | "ignore": [ 21 | "**/.*", 22 | "node_modules", 23 | "bower_components", 24 | "components", 25 | "test", 26 | "tests" 27 | ], 28 | "dependencies": { 29 | "foundation": "~5.4.3", 30 | "foundation-icons": "*", 31 | "bourbon": "~4.0.2" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /Module 1/Chapter08/IMP.txt: -------------------------------------------------------------------------------- 1 | The code for chapter 8 is combined with the code in chapter 7 -------------------------------------------------------------------------------- /Module 2/Chapter01/img/SOC-Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter01/img/SOC-Logo.png -------------------------------------------------------------------------------- /Module 2/Chapter01/img/scones.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter01/img/scones.jpg -------------------------------------------------------------------------------- /Module 2/Chapter02/example_02-01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Media Query Test 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /Module 2/Chapter02/example_02-01/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: grey; 3 | } 4 | @media screen and (min-width: 320px) { 5 | body { 6 | background-color: green; 7 | } 8 | } 9 | @media screen and (min-width: 550px) { 10 | body { 11 | background-color: yellow; 12 | } 13 | } 14 | @media screen and (min-width: 768px) { 15 | body { 16 | background-color: orange; 17 | } 18 | } 19 | @media screen and (min-width: 960px) { 20 | body { 21 | background-color: red; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Module 2/Chapter02/example_02-02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Media Query example 6 | 7 | 8 | 9 | 10 | Hearts 11 | Clubs 12 | Spades 13 | Diamonds 14 | 15 | 16 | -------------------------------------------------------------------------------- /Module 2/Chapter02/example_02-02/main.css: -------------------------------------------------------------------------------- 1 | .CardLink { 2 | display: block; 3 | color: #666; 4 | text-shadow: 0 2px 0 #efefef; 5 | text-decoration: none; 6 | height: 2.75rem; 7 | line-height: 2.75rem; 8 | border-bottom: 1px solid #bbb; 9 | position: relative; 10 | } 11 | 12 | @media (min-width: 300px) { 13 | .CardLink { 14 | padding-left: 1.8rem; 15 | font-size: 1.6rem; 16 | } 17 | } 18 | 19 | .CardLink:before { 20 | display: none; 21 | position: absolute; 22 | top: 50%; 23 | transform: translateY(-50%); 24 | left: 0; 25 | } 26 | 27 | .CardLink_Hearts:before { 28 | content: "❤"; 29 | } 30 | 31 | .CardLink_Clubs:before { 32 | content: "♣"; 33 | } 34 | 35 | .CardLink_Spades:before { 36 | content: "♠"; 37 | } 38 | 39 | .CardLink_Diamonds:before { 40 | content: "♦"; 41 | } 42 | 43 | @media (min-width: 300px) { 44 | .CardLink:before { 45 | display: block; 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /Module 2/Chapter02/example_02-03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Media Query test - which browser downloads which asset? 6 | 7 | 8 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
width 300px file downloaded
25 |
width 600px file downloaded
26 |
width 900px file downloaded
27 |
width 1200px file downloaded
28 | 29 | -------------------------------------------------------------------------------- /Module 2/Chapter02/example_02-03/w1200.css: -------------------------------------------------------------------------------- 1 | .w1200 { 2 | display: block; 3 | } -------------------------------------------------------------------------------- /Module 2/Chapter02/example_02-03/w300.css: -------------------------------------------------------------------------------- 1 | .w300 { 2 | display: block; 3 | } -------------------------------------------------------------------------------- /Module 2/Chapter02/example_02-03/w600.css: -------------------------------------------------------------------------------- 1 | .w600 { 2 | display: block; 3 | } -------------------------------------------------------------------------------- /Module 2/Chapter02/example_02-03/w900.css: -------------------------------------------------------------------------------- 1 | .w900 { 2 | display: block; 3 | } -------------------------------------------------------------------------------- /Module 2/Chapter03/example_03-01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Layout example 6 | 7 | 8 | 58 | 59 | 60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 | 70 | -------------------------------------------------------------------------------- /Module 2/Chapter03/example_03-02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Layout example 6 | 7 | 8 | 9 | 10 |
11 |
Header
12 |
13 |
Left
14 |
Middle
15 |
Right
16 |
17 |
Footer
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /Module 2/Chapter03/example_03-02/main.js: -------------------------------------------------------------------------------- 1 | // First wait for the DOM to be ready 2 | document.addEventListener('DOMContentLoaded', function(){ 3 | // This function merely toggles the class 4 | function a() { 5 | document.querySelector('body').classList.toggle('OffCanvas-Active'); 6 | } 7 | // When the header is clicked we fire the function to toggle the class 8 | document.querySelector('.Header').addEventListener('click', a ); 9 | 10 | // This debounce function (via: https://remysharp.com/2010/07/21/throttling-function-calls) merely stops functioned firing too often on repetitive events (such as resize/scroll) 11 | function debounce(fn, delay) { 12 | var timer = null; 13 | return function () { 14 | var context = this, args = arguments; 15 | clearTimeout(timer); 16 | timer = setTimeout(function () { 17 | fn.apply(context, args); 18 | }, delay); 19 | }; 20 | } 21 | 22 | // removing the class from the body inside a debounce 23 | var debouncedA = debounce(function() { 24 | document.querySelector('body').classList.remove('OffCanvas-Active'); 25 | }, 250); 26 | 27 | // When the window is resized, we want to fire the debouncedA function 28 | window.onresize = debouncedA; 29 | }); -------------------------------------------------------------------------------- /Module 2/Chapter03/example_03-02/styles.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | body { 8 | overflow-x: hidden; 9 | overflow-y: scroll; 10 | } 11 | 12 | .Wrap { 13 | max-width: 1400px; 14 | margin: 0 auto; 15 | } 16 | 17 | .Header { 18 | width: 100%; 19 | height: 130px; 20 | background-color: #038C5A; 21 | } 22 | 23 | .WrapMiddle { 24 | width: 100%; 25 | font-size: 0; 26 | position: relative; 27 | } 28 | 29 | .OffCanvas-Active .Left, 30 | .OffCanvas-Active .Middle { 31 | transform: translate3d(200px, 0, 0); 32 | transition: transform .3s; 33 | } 34 | 35 | .Left { 36 | height: 625px; 37 | background-color: #03A66A; 38 | display: inline-block; 39 | position: absolute; 40 | left: -200px; 41 | width: 200px; 42 | font-size: .9rem; 43 | transition: transform .3s; 44 | } 45 | 46 | @media (min-width: 40rem) { 47 | .Left { 48 | width: 20.8333333%; 49 | left: 0; 50 | position: relative; 51 | } 52 | } 53 | 54 | .Middle { 55 | height: 625px; 56 | background-color: #bbbf90; 57 | transition: transform .3s; 58 | font-size: .9rem; 59 | } 60 | 61 | @media (min-width: 40rem) { 62 | .Middle { 63 | display: inline-block; 64 | width: 68.75%; 65 | } 66 | } 67 | 68 | .Right { 69 | height: 625px; 70 | width: 100%; 71 | background-color: #03A66A; 72 | font-size: .9rem; 73 | } 74 | 75 | @media (min-width: 40rem) { 76 | .Right { 77 | width: 10.4166667%; 78 | display: inline-block; 79 | } 80 | } 81 | 82 | .Footer { 83 | height: 200px; 84 | width: 100%; 85 | background-color: #025059; 86 | } -------------------------------------------------------------------------------- /Module 2/Chapter03/example_03-03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Layout example 7 | 8 | 9 | 10 | 11 |
12 | Hello, I'm centered with Flexbox! 13 |
14 | 15 | -------------------------------------------------------------------------------- /Module 2/Chapter03/example_03-03/styles.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | .CenterMe { 8 | background-color: indigo; 9 | color: #ebebeb; 10 | font-family: 'Oswald', sans-serif; 11 | font-size: 2rem; 12 | text-transform: uppercase; 13 | height: 200px; 14 | display: flex; 15 | align-items: center; 16 | justify-content: center; 17 | } -------------------------------------------------------------------------------- /Module 2/Chapter03/example_03-04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Layout example 7 | 8 | 9 | 10 | 11 |
12 | Home 13 | About Us 14 | Products 15 | Policy 16 | Contact Us 17 |
18 | 19 | -------------------------------------------------------------------------------- /Module 2/Chapter03/example_03-04/styles.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | .MenuWrap { 8 | background-color: indigo; 9 | font-family: 'Oswald', sans-serif; 10 | font-size: 1rem; 11 | min-height: 2.75rem; 12 | display: flex; 13 | align-items: center; 14 | padding: 0 1rem; 15 | } 16 | 17 | .ListItem, 18 | .LastItem { 19 | color: #ebebeb; 20 | text-decoration: none; 21 | } 22 | 23 | .ListItem { 24 | margin-right: 1rem; 25 | } 26 | 27 | .LastItem { 28 | margin-left: auto; 29 | } -------------------------------------------------------------------------------- /Module 2/Chapter03/example_03-05/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Layout example 7 | 8 | 9 | 10 | 11 |
12 | Home 13 | About Us 14 | Products 15 | Policy 16 | Contact Us 17 |
18 | 19 | -------------------------------------------------------------------------------- /Module 2/Chapter03/example_03-05/styles.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | .MenuWrap { 8 | background-color: indigo; 9 | font-family: 'Oswald', sans-serif; 10 | font-size: 1rem; 11 | min-height: 2.75rem; 12 | display: flex; 13 | flex-direction: column; 14 | align-items: center; 15 | padding: 0 1rem; 16 | } 17 | 18 | @media (min-width: 31.25em) { 19 | .MenuWrap { 20 | flex-direction: row; 21 | } 22 | } 23 | 24 | .ListItem, 25 | .LastItem { 26 | color: #ebebeb; 27 | text-decoration: none; 28 | } 29 | 30 | @media (min-width: 31.25em) { 31 | .ListItem { 32 | margin-right: 1rem; 33 | } 34 | .LastItem { 35 | margin-left: auto; 36 | } 37 | } -------------------------------------------------------------------------------- /Module 2/Chapter03/example_03-06/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Layout example 7 | 8 | 9 | 10 | 11 |

Here is a sentence with a inline-flex link.

12 | 13 | -------------------------------------------------------------------------------- /Module 2/Chapter03/example_03-06/styles.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 1rem; 5 | font-family: 'Oswald', sans-serif; 6 | } 7 | 8 | p { 9 | color: #555; 10 | } 11 | 12 | .InlineFlex { 13 | display: inline-flex; 14 | align-items: center; 15 | height: 120px; 16 | padding: 0 4px; 17 | background-color: indigo; 18 | text-decoration: none; 19 | border-radius: 3px; 20 | color: #ddd; 21 | } -------------------------------------------------------------------------------- /Module 2/Chapter03/example_03-07/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Layout example 7 | 8 | 9 | 10 | 11 |
12 |
I am content in the inner Flexbox 1.
13 |
I am content in the inner Flexbox 2.
14 |
I am content in the inner Flexbox 3.
15 |
16 | 17 | -------------------------------------------------------------------------------- /Module 2/Chapter03/example_03-07/styles.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | font-family: 'Oswald', sans-serif; 6 | color: #ebebeb; 7 | } 8 | 9 | .FlexWrapper { 10 | background-color: indigo; 11 | display: flex; 12 | justify-content: space-around; 13 | height: 200px; 14 | width: 100%; 15 | } 16 | 17 | .FlexItems { 18 | border: 1px solid #ebebeb; 19 | background-color: #34005B; 20 | display: flex; 21 | height: 100px; 22 | } 23 | 24 | .FlexOne { 25 | flex: 1.5; 26 | } 27 | 28 | .FlexTwo, 29 | .FlexThree { 30 | flex: 1; 31 | } -------------------------------------------------------------------------------- /Module 2/Chapter03/example_03-08/styles.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | html { 8 | height: 100%; 9 | } 10 | 11 | body { 12 | font-family: 'Oswald', sans-serif; 13 | color: #ebebeb; 14 | display: flex; 15 | flex-direction: column; 16 | min-height: 100%; 17 | } 18 | 19 | .MainContent { 20 | flex: 1; 21 | color: #333; 22 | padding: .5rem; 23 | } 24 | 25 | .Footer { 26 | background-color: violet; 27 | padding: .5rem; 28 | } -------------------------------------------------------------------------------- /Module 2/Chapter03/example_03-09/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Layout example 7 | 8 | 9 | 10 | 11 |
12 |
I am content in the Content.
13 |
I am content in the SideOne.
14 |
I am content in the SideTwo.
15 |
I am content in the Header.
16 |
I am content in the Footer.
17 |
18 | 19 | -------------------------------------------------------------------------------- /Module 2/Chapter03/example_03-09/styles.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | font-family: 'Oswald', sans-serif; 6 | color: #ebebeb; 7 | } 8 | 9 | .FlexWrapper { 10 | background-color: indigo; 11 | display: flex; 12 | flex-direction: column; 13 | } 14 | 15 | .FlexItems { 16 | display: flex; 17 | align-items: center; 18 | min-height: 6.25rem; 19 | padding: 1rem; 20 | } 21 | 22 | .FlexHeader { 23 | background-color: #105B63; 24 | order: 1; 25 | } 26 | 27 | .FlexContent { 28 | background-color: #FFFAD5; 29 | order: 2; 30 | } 31 | 32 | .FlexSideOne { 33 | background-color: #FFD34E; 34 | order: 3; 35 | } 36 | 37 | .FlexSideTwo { 38 | background-color: #DB9E36; 39 | order: 4; 40 | } 41 | 42 | .FlexFooter { 43 | background-color: #BD4932; 44 | order: 5; 45 | } 46 | 47 | @media (min-width: 30rem) { 48 | .FlexWrapper { 49 | flex-flow: row wrap; 50 | } 51 | .FlexHeader { 52 | width: 100%; 53 | } 54 | .FlexContent { 55 | flex: 1; 56 | order: 3; 57 | } 58 | .FlexSideOne { 59 | width: 150px; 60 | order: 2; 61 | } 62 | .FlexSideTwo { 63 | width: 150px; 64 | order: 4; 65 | } 66 | .FlexFooter { 67 | width: 100%; 68 | } 69 | } -------------------------------------------------------------------------------- /Module 2/Chapter03/img/layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter03/img/layout.png -------------------------------------------------------------------------------- /Module 2/Chapter03/img/layout.sketch: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter03/img/layout.sketch -------------------------------------------------------------------------------- /Module 2/Chapter04/example2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Our first responsive web page with HTML5 and CSS3 (amended with HTML5 elements) 6 | 7 | 8 | 9 | 10 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /Module 2/Chapter04/example3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Details and summary example 6 | 7 | 8 | 13 | 14 | 15 |
16 | I ate 15 scones in one day 17 |

Of course I didn't. It would probably kill me if I did. What a way to go. Mmmmmm, scones!

18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /Module 2/Chapter04/example4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Details and summary example 6 | 7 | 8 | 9 | 10 |

Ben's site

11 |
12 |

Ben's blog

13 |

All about what I do

14 |
15 |
16 |
17 |

A post about something

18 |

Trust me this is a great read

19 |

No, not really

20 |

See. Told you.

21 |
22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /Module 2/Chapter04/myVideo.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter04/myVideo.mp4 -------------------------------------------------------------------------------- /Module 2/Chapter04/myVideoPoster.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter04/myVideoPoster.png -------------------------------------------------------------------------------- /Module 2/Chapter05/example_05-01/styles.css: -------------------------------------------------------------------------------- 1 | main { 2 | -webkit-column-gap: 2em; 3 | -moz-column-gap: 2em; 4 | column-gap: 2em; 5 | -webkit-column-rule: thin dotted #999; 6 | -moz-column-rule: thin dotted #999; 7 | column-rule: thin dotted #999; 8 | -webkit-column-width: 12em; 9 | -moz-column-width: 12em; 10 | column-width: 12em; 11 | } 12 | 13 | p { 14 | margin: 0; 15 | } -------------------------------------------------------------------------------- /Module 2/Chapter05/example_05-02/f1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter05/example_05-02/f1.jpg -------------------------------------------------------------------------------- /Module 2/Chapter05/example_05-02/f10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter05/example_05-02/f10.jpg -------------------------------------------------------------------------------- /Module 2/Chapter05/example_05-02/f2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter05/example_05-02/f2.jpg -------------------------------------------------------------------------------- /Module 2/Chapter05/example_05-02/f3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter05/example_05-02/f3.jpg -------------------------------------------------------------------------------- /Module 2/Chapter05/example_05-02/f4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter05/example_05-02/f4.jpg -------------------------------------------------------------------------------- /Module 2/Chapter05/example_05-02/f5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter05/example_05-02/f5.jpg -------------------------------------------------------------------------------- /Module 2/Chapter05/example_05-02/f6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter05/example_05-02/f6.jpg -------------------------------------------------------------------------------- /Module 2/Chapter05/example_05-02/f7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter05/example_05-02/f7.jpg -------------------------------------------------------------------------------- /Module 2/Chapter05/example_05-02/f8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter05/example_05-02/f8.jpg -------------------------------------------------------------------------------- /Module 2/Chapter05/example_05-02/f9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter05/example_05-02/f9.jpg -------------------------------------------------------------------------------- /Module 2/Chapter05/example_05-03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |

OK, listen up, I've figured out the key eternal happiness. All you need to do is eat lots of scones.

13 | 14 | -------------------------------------------------------------------------------- /Module 2/Chapter05/example_05-03/styles.css: -------------------------------------------------------------------------------- 1 | .truncate { 2 | width: 520px; 3 | overflow: hidden; 4 | text-overflow: ellipsis; 5 | white-space: nowrap; 6 | } -------------------------------------------------------------------------------- /Module 2/Chapter05/example_05-04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | http://dowebsitesneedtolookexactlythesameineverybrowser.com/ 15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /Module 2/Chapter05/example_05-04/styles.css: -------------------------------------------------------------------------------- 1 | main { 2 | width: 15rem; 3 | background-color: #aaa; 4 | padding: 3rem .5rem; 5 | word-wrap: break-word; 6 | } 7 | 8 | -------------------------------------------------------------------------------- /Module 2/Chapter05/example_05-05/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /Module 2/Chapter05/example_05-05/styles.css: -------------------------------------------------------------------------------- 1 | span { 2 | display: inline-block; 3 | height: 2rem; 4 | width: 2rem; 5 | background-color: blue; 6 | } 7 | 8 | /* span:nth-child(2n+3) { 9 | background-color: #f90; 10 | border-radius: 50%; 11 | } */ 12 | 13 | /* span:nth-child(-2n+3) { 14 | background-color: #f90; 15 | border-radius: 50%; 16 | } */ 17 | 18 | span:nth-last-child(-n+3) { 19 | background-color: #f90; 20 | border-radius: 50%; 21 | } -------------------------------------------------------------------------------- /Module 2/Chapter05/example_05-06/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 |
20 |
21 |
22 | 23 | -------------------------------------------------------------------------------- /Module 2/Chapter05/example_05-06/styles.css: -------------------------------------------------------------------------------- 1 | span, 2 | div { 3 | display: inline-block; 4 | height: 2rem; 5 | width: 2rem; 6 | background-color: blue; 7 | } 8 | 9 | .span-class:nth-of-type(-2n+3) { 10 | background-color: #f90; 11 | border-radius: 50%; 12 | } -------------------------------------------------------------------------------- /Module 2/Chapter05/example_05-07/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 |
17 | 18 | -------------------------------------------------------------------------------- /Module 2/Chapter05/example_05-07/styles.css: -------------------------------------------------------------------------------- 1 | div { 2 | display: inline-block; 3 | height: 2rem; 4 | width: 2rem; 5 | background-color: blue; 6 | } 7 | 8 | .a-div:not(.not-me) { 9 | background-color: #f90; 10 | border-radius: 50%; 11 | } -------------------------------------------------------------------------------- /Module 2/Chapter05/example_05-08/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | An example from http://rwd.education 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | -------------------------------------------------------------------------------- /Module 2/Chapter05/example_05-08/styles.css: -------------------------------------------------------------------------------- 1 | .thing { 2 | padding: 1rem; 3 | background-color: violet; 4 | } 5 | 6 | /** 7 | * Hide the element if it is empty:; 8 | */ 9 | 10 | /*.thing:empty { 11 | display: none; 12 | }*/ -------------------------------------------------------------------------------- /Module 2/Chapter05/example_05-09/f1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter05/example_05-09/f1.jpg -------------------------------------------------------------------------------- /Module 2/Chapter05/example_05-09/f10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter05/example_05-09/f10.jpg -------------------------------------------------------------------------------- /Module 2/Chapter05/example_05-09/f2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter05/example_05-09/f2.jpg -------------------------------------------------------------------------------- /Module 2/Chapter05/example_05-09/f3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter05/example_05-09/f3.jpg -------------------------------------------------------------------------------- /Module 2/Chapter05/example_05-09/f4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter05/example_05-09/f4.jpg -------------------------------------------------------------------------------- /Module 2/Chapter05/example_05-09/f5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter05/example_05-09/f5.jpg -------------------------------------------------------------------------------- /Module 2/Chapter05/example_05-09/f6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter05/example_05-09/f6.jpg -------------------------------------------------------------------------------- /Module 2/Chapter05/example_05-09/f7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter05/example_05-09/f7.jpg -------------------------------------------------------------------------------- /Module 2/Chapter05/example_05-09/f8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter05/example_05-09/f8.jpg -------------------------------------------------------------------------------- /Module 2/Chapter05/example_05-09/f9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter05/example_05-09/f9.jpg -------------------------------------------------------------------------------- /Module 2/Chapter05/example_05-10/f1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter05/example_05-10/f1.jpg -------------------------------------------------------------------------------- /Module 2/Chapter05/example_05-10/f10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter05/example_05-10/f10.jpg -------------------------------------------------------------------------------- /Module 2/Chapter05/example_05-10/f2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter05/example_05-10/f2.jpg -------------------------------------------------------------------------------- /Module 2/Chapter05/example_05-10/f3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter05/example_05-10/f3.jpg -------------------------------------------------------------------------------- /Module 2/Chapter05/example_05-10/f4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter05/example_05-10/f4.jpg -------------------------------------------------------------------------------- /Module 2/Chapter05/example_05-10/f5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter05/example_05-10/f5.jpg -------------------------------------------------------------------------------- /Module 2/Chapter05/example_05-10/f6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter05/example_05-10/f6.jpg -------------------------------------------------------------------------------- /Module 2/Chapter05/example_05-10/f7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter05/example_05-10/f7.jpg -------------------------------------------------------------------------------- /Module 2/Chapter05/example_05-10/f8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter05/example_05-10/f8.jpg -------------------------------------------------------------------------------- /Module 2/Chapter05/example_05-10/f9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter05/example_05-10/f9.jpg -------------------------------------------------------------------------------- /Module 2/Chapter05/example_05-10/fonts/Roboto-Regular-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter05/example_05-10/fonts/Roboto-Regular-webfont.eot -------------------------------------------------------------------------------- /Module 2/Chapter05/example_05-10/fonts/Roboto-Regular-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter05/example_05-10/fonts/Roboto-Regular-webfont.ttf -------------------------------------------------------------------------------- /Module 2/Chapter05/example_05-10/fonts/Roboto-Regular-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter05/example_05-10/fonts/Roboto-Regular-webfont.woff -------------------------------------------------------------------------------- /Module 2/Chapter06/example_06-01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | An example from http://rwd.education 6 | 7 | 8 | 9 | 10 | 11 | 12 |
Outer box-shadow
13 |
Inner box-shadow
14 | 15 | -------------------------------------------------------------------------------- /Module 2/Chapter06/example_06-01/styles.css: -------------------------------------------------------------------------------- 1 | .box-shadow, 2 | .inner-box-shadow { 3 | height: 20vmin; 4 | width: 20vmin; 5 | border: 1px solid #111; 6 | margin: 1em; 7 | display: inline-flex; 8 | font-family: sans-serif; 9 | align-items: center; 10 | justify-content: center; 11 | } 12 | 13 | .box-shadow { 14 | box-shadow: 0 0 15px blue; 15 | } 16 | 17 | .inner-box-shadow { 18 | box-shadow: inset 0 0 15px violet; 19 | } 20 | -------------------------------------------------------------------------------- /Module 2/Chapter06/example_06-02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | An example from http://rwd.education 6 | 7 | 8 | 9 | 10 | 11 | 12 |
no spread
13 |
with spread
14 | 15 | -------------------------------------------------------------------------------- /Module 2/Chapter06/example_06-02/styles.css: -------------------------------------------------------------------------------- 1 | .no-spread, 2 | .spread { 3 | height: 20vmin; 4 | width: 20vmin; 5 | border: 1px solid #111; 6 | margin: 1em; 7 | display: inline-flex; 8 | font-family: sans-serif; 9 | align-items: center; 10 | justify-content: center; 11 | } 12 | 13 | .no-spread { 14 | box-shadow: 0 10px 10px; 15 | } 16 | 17 | .spread { 18 | box-shadow: 0 10px 10px -10px; 19 | } 20 | -------------------------------------------------------------------------------- /Module 2/Chapter06/example_06-03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | An example from http://rwd.education 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | -------------------------------------------------------------------------------- /Module 2/Chapter06/example_06-03/styles.css: -------------------------------------------------------------------------------- 1 | .linear-gradient { 2 | margin: 1rem; 3 | width: 400px; 4 | height: 200px; 5 | background: linear-gradient(#f90 0, #f90 2%, #555 2%, #eee 50%, #555 98%, #f90 98%, #f90 100%); 6 | } -------------------------------------------------------------------------------- /Module 2/Chapter06/example_06-04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | An example from http://rwd.education 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | -------------------------------------------------------------------------------- /Module 2/Chapter06/example_06-04/styles.css: -------------------------------------------------------------------------------- 1 | .radial-gradient { 2 | margin: 1rem; 3 | width: 400px; 4 | height: 200px; 5 | background: radial-gradient(12rem circle at bottom, yellow, orange, red); 6 | } -------------------------------------------------------------------------------- /Module 2/Chapter06/example_06-05/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | An example from http://rwd.education 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | -------------------------------------------------------------------------------- /Module 2/Chapter06/example_06-05/styles.css: -------------------------------------------------------------------------------- 1 | .carbon-fibre { 2 | margin: 1rem; 3 | width: 400px; 4 | height: 200px; 5 | background: 6 | radial-gradient(black 15%, transparent 16%) 0 0, 7 | radial-gradient(black 15%, transparent 16%) 8px 8px, 8 | radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px, 9 | radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px; 10 | background-color:#282828; 11 | background-size:16px 16px; 12 | /* background-repeat:no-repeat; */ 13 | } 14 | 15 | @media (min-width: 45rem) { 16 | .carbon-fibre { 17 | background: #333; 18 | } 19 | } -------------------------------------------------------------------------------- /Module 2/Chapter06/example_06-06/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | An example from http://rwd.education 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | -------------------------------------------------------------------------------- /Module 2/Chapter06/example_06-06/moon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter06/example_06-06/moon.png -------------------------------------------------------------------------------- /Module 2/Chapter06/example_06-06/rosetta.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter06/example_06-06/rosetta.png -------------------------------------------------------------------------------- /Module 2/Chapter06/example_06-06/stars.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter06/example_06-06/stars.jpg -------------------------------------------------------------------------------- /Module 2/Chapter06/example_06-06/styles.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | .bg-multi { 8 | height: 100vh; 9 | width: 100vw; 10 | background: 11 | url('rosetta.png'), 12 | url('moon.png'), 13 | url('stars.jpg'); 14 | background-size: 75vmax, 50vw, cover; 15 | background-position: top 50px right 80px, 40px 40px, top center; 16 | background-repeat: no-repeat; 17 | } -------------------------------------------------------------------------------- /Module 2/Chapter06/example_06-07/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | An example from http://rwd.education 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | -------------------------------------------------------------------------------- /Module 2/Chapter06/example_06-07/styles.css: -------------------------------------------------------------------------------- 1 | .bg { 2 | background-image: url('bg.jpg'); 3 | } 4 | @media (min-resolution: 1.5dppx) { 5 | .bg { 6 | background-image: url('bg@1_5x.jpg'); 7 | } 8 | } -------------------------------------------------------------------------------- /Module 2/Chapter06/example_06-08/el-cap@1x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter06/example_06-08/el-cap@1x.jpg -------------------------------------------------------------------------------- /Module 2/Chapter06/example_06-08/el-cap@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter06/example_06-08/el-cap@2x.jpg -------------------------------------------------------------------------------- /Module 2/Chapter06/example_06-08/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | An example from http://rwd.education 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
blur(2px)
14 |
brightness(2)
15 |
contrast(2)
16 |
grayscale(.8)
17 |
hue-rotate(25deg)
18 |
invert(75%)
19 |
opacity(50%)
20 |
saturate(15%)
21 |
sepia(.75)
22 | 23 | -------------------------------------------------------------------------------- /Module 2/Chapter07/example_07-01/Star.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Star 1 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /Module 2/Chapter07/example_07-02/IcoMoon - 5 Icons/PNG/drag-left-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter07/example_07-02/IcoMoon - 5 Icons/PNG/drag-left-right.png -------------------------------------------------------------------------------- /Module 2/Chapter07/example_07-02/IcoMoon - 5 Icons/PNG/drag-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter07/example_07-02/IcoMoon - 5 Icons/PNG/drag-left.png -------------------------------------------------------------------------------- /Module 2/Chapter07/example_07-02/IcoMoon - 5 Icons/PNG/drag-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter07/example_07-02/IcoMoon - 5 Icons/PNG/drag-right.png -------------------------------------------------------------------------------- /Module 2/Chapter07/example_07-02/IcoMoon - 5 Icons/PNG/multitouch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter07/example_07-02/IcoMoon - 5 Icons/PNG/multitouch.png -------------------------------------------------------------------------------- /Module 2/Chapter07/example_07-02/IcoMoon - 5 Icons/PNG/touch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter07/example_07-02/IcoMoon - 5 Icons/PNG/touch.png -------------------------------------------------------------------------------- /Module 2/Chapter07/example_07-02/IcoMoon - 5 Icons/Read Me.txt: -------------------------------------------------------------------------------- 1 | The *SVG* folder contains the icons you selected as separate SVG files. 2 | 3 | The *demo.html* lists the icons that you selected. To learn how to insert your icons as inline SVGs (with the element), refer to the source of this HTML file. If you prefer to reference an external SVG instead of embedding it in the HTML, you will need to use javascript to fetch the SVG in order to make sure your SVGs will work fine in IE. IcoMoon's Quick Usage mode can take care of that and host your SVGs too. 4 | 5 | You can ignore the *svgdefs.svg* file. It contains the same SVG definitions as the ones you can find in the demo.html file. 6 | 7 | If you prefer using PNGs or CSS sprites, refer to the Preferences panel of the IcoMoon app before downloading your zip pack. 8 | -------------------------------------------------------------------------------- /Module 2/Chapter07/example_07-02/IcoMoon - 5 Icons/SVG/drag-left-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Module 2/Chapter07/example_07-02/IcoMoon - 5 Icons/SVG/drag-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Module 2/Chapter07/example_07-02/IcoMoon - 5 Icons/SVG/drag-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Module 2/Chapter07/example_07-02/IcoMoon - 5 Icons/SVG/multitouch.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Module 2/Chapter07/example_07-02/IcoMoon - 5 Icons/SVG/touch.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Module 2/Chapter07/example_07-02/IcoMoon - 5 Icons/style.css: -------------------------------------------------------------------------------- 1 | .icon { 2 | display: inline-block; 3 | color: #444444; 4 | fill: currentColor; 5 | } 6 | .icon-drag-left-right { 7 | width: 42px; 8 | height: 32px; 9 | } 10 | #icon-drag-left-right .path1 { 11 | fill: currentcolor; 12 | } 13 | #icon-drag-left-right .path2 { 14 | fill: currentcolor; 15 | } 16 | #icon-drag-left-right .path3 { 17 | fill: currentcolor; 18 | } 19 | .icon-drag-left { 20 | width: 42px; 21 | height: 32px; 22 | } 23 | #icon-drag-left .path1 { 24 | fill: currentcolor; 25 | } 26 | #icon-drag-left .path2 { 27 | fill: currentcolor; 28 | } 29 | #icon-drag-left .path3 { 30 | fill: currentcolor; 31 | } 32 | .icon-drag-right { 33 | width: 42px; 34 | height: 32px; 35 | } 36 | #icon-drag-right .path1 { 37 | fill: currentcolor; 38 | } 39 | #icon-drag-right .path2 { 40 | fill: currentcolor; 41 | } 42 | #icon-drag-right .path3 { 43 | fill: currentcolor; 44 | } 45 | .icon-touch { 46 | width: 32px; 47 | height: 32px; 48 | } 49 | #icon-touch .path1 { 50 | fill: currentcolor; 51 | } 52 | #icon-touch .path2 { 53 | fill: currentcolor; 54 | } 55 | .icon-multitouch { 56 | width: 32px; 57 | height: 32px; 58 | } 59 | #icon-multitouch .path1 { 60 | fill: currentcolor; 61 | } 62 | #icon-multitouch .path2 { 63 | fill: currentcolor; 64 | } 65 | #icon-multitouch .path3 { 66 | fill: currentcolor; 67 | } 68 | -------------------------------------------------------------------------------- /Module 2/Chapter07/example_07-03/Star.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Star 1 4 | 5 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /Module 2/Chapter07/example_07-03/main.js: -------------------------------------------------------------------------------- 1 | ;(function ready(fn) { 2 | if (document.readyState != 'loading'){ 3 | fn(); 4 | } else { 5 | document.addEventListener('DOMContentLoaded', fn); 6 | } 7 | })(); 8 | function fn() { 9 | var imgStarPath = document.querySelector('#svgImg .star_Wrapper'); 10 | console.log("Is SVG in an img tag accessibe? " + imgStarPath); 11 | 12 | var inlineStarPath = document.querySelector('#svgInline'); 13 | console.log("Is inlineSVG accessible? " + inlineStarPath); 14 | 15 | var objectWrapper = document.querySelector('#svgObject'); 16 | var svgInObject = objectWrapper.contentDocument; 17 | console.log("Is SVG in object accessible? " + svgInObject); 18 | 19 | var bgStarPath = document.querySelector('.has-StarBg .star_Wrapper'); 20 | console.log("Is SVG in BG image accessible? " + bgStarPath); 21 | } -------------------------------------------------------------------------------- /Module 2/Chapter07/example_07-03/styles.css: -------------------------------------------------------------------------------- 1 | .star_Wrapper path { 2 | stroke-width: 6px; 3 | } 4 | 5 | .has-StarBg { 6 | background-image: url('Star.svg'); 7 | background-size: cover; 8 | width: 198px; 9 | height: 188px; 10 | } -------------------------------------------------------------------------------- /Module 2/Chapter07/example_07-04/Star.svg: -------------------------------------------------------------------------------- 1 | 2 | Star 1 3 | 4 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /Module 2/Chapter07/example_07-04/styles.css: -------------------------------------------------------------------------------- 1 | .t-SVG { 2 | border: 0; 3 | width: 100%; 4 | border-collapse: collapse; 5 | border-spacing: 0; 6 | } 7 | 8 | .t-Item { 9 | border: 1px solid #000; 10 | box-shadow: inset 0 1px 0 #544F4F; 11 | width: 20%; 12 | font-size: 1.2rem; 13 | font-family: sans-serif; 14 | background-color: #eee; 15 | text-align: center; 16 | vertical-align: middle; 17 | height: 44px; 18 | position: relative; 19 | } 20 | 21 | .t-Amber { 22 | background-color: rgb(201, 179, 31); 23 | } 24 | 25 | .t-Red { 26 | background-color: rgb(229, 37, 37); 27 | } 28 | 29 | .t-Green { 30 | background-color: rgb(29, 177, 29); 31 | } 32 | 33 | sup { 34 | font-size: .8rem; 35 | position: relative; 36 | top: -3px; 37 | left: 3px; 38 | } -------------------------------------------------------------------------------- /Module 2/Chapter07/example_07-05/filter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Module 2/Chapter07/example_07-05/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | An example from http://rwd.education 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Module 2/Chapter07/example_07-05/queen@2x-1024x747.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter07/example_07-05/queen@2x-1024x747.png -------------------------------------------------------------------------------- /Module 2/Chapter07/example_07-05/styles.css: -------------------------------------------------------------------------------- 1 | .HRH { 2 | -webkit-filter: url('filter.svg#myfilter'); 3 | filter: url('filter.svg#myfilter'); 4 | } -------------------------------------------------------------------------------- /Module 2/Chapter07/example_07-06/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | An example from http://rwd.education 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /Module 2/Chapter07/example_07-06/queen@2x-1024x747.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter07/example_07-06/queen@2x-1024x747.png -------------------------------------------------------------------------------- /Module 2/Chapter07/example_07-08/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | background: #000; 7 | display: flex; 8 | align-items: center; 9 | } 10 | 11 | .anim_Wrapper { 12 | display: flex; 13 | flex-direction: column; 14 | max-width: 500px; 15 | } 16 | 17 | 18 | svg { 19 | padding: 20px; 20 | } 21 | 22 | svg path { 23 | stroke: #14803f; 24 | stroke-width: 10px; 25 | // stroke-linecap: round; 26 | } 27 | 28 | svg text { 29 | stroke: none; 30 | fill: #fff; 31 | } 32 | 33 | .controls { 34 | padding: 2rem; 35 | background-color: #444; 36 | border-radius: 4px; 37 | font-size: .8rem; 38 | font-family: sans-serif; 39 | display: flex; 40 | flex-direction: column; 41 | } 42 | 43 | label { 44 | color: #fff; 45 | display: flex; 46 | align-items: center; 47 | align-content: center; 48 | } 49 | 50 | input { 51 | font-size: 1.2rem; 52 | line-height: 1.2; 53 | border-radius: 4px; 54 | margin: .2rem 0 0 auto; 55 | } 56 | 57 | .animate { 58 | -webkit-appearance: none; 59 | -moz-appearance: none; 60 | border-radius: 4px; 61 | background-color: #c7c7c7; 62 | min-height: 1.5rem; 63 | display: flex; 64 | flex: 1 1 100%; 65 | width: 100%; 66 | justify-content: center; 67 | margin-top: 1rem; 68 | } -------------------------------------------------------------------------------- /Module 2/Chapter07/example_07-09/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | } 4 | body > * { 5 | display: inline-flex; 6 | align-self: center; 7 | } 8 | 9 | * + * { 10 | margin-left: 2rem; 11 | } 12 | 13 | .icon-drag-left-right { 14 | width: 2.5rem; 15 | height: 2.5rem; 16 | fill: #f90; 17 | color: #ccc; 18 | } 19 | 20 | .different-context .icon-drag-left-right { 21 | fill: #14805e; 22 | color: #223344; 23 | width: 4rem; 24 | height: 4rem; 25 | } 26 | 27 | .alternate2.icon-drag-left-right { 28 | fill: rgba(33, 21, 220, 0.6); 29 | color: rgba(65, 30, 234, 0.88); 30 | width: 3.5rem; 31 | height: 3.5rem; 32 | } 33 | -------------------------------------------------------------------------------- /Module 2/Chapter07/example_07-10/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | An example from http://rwd.education 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /Module 2/Chapter07/example_07-10/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | } 4 | body > * { 5 | display: inline-flex; 6 | align-self: center; 7 | } 8 | 9 | * + * { 10 | margin-left: 2rem; 11 | } 12 | 13 | .icon-drag-left-right { 14 | width: 2.5rem; 15 | height: 2.5rem; 16 | fill: #f90; 17 | color: #ccc; 18 | } 19 | 20 | .different-context .icon-drag-left-right { 21 | fill: #14805e; 22 | color: #223344; 23 | width: 4rem; 24 | height: 4rem; 25 | } 26 | 27 | .alternate2.icon-drag-left-right { 28 | fill: rgba(33, 21, 220, 0.6); 29 | color: rgba(65, 30, 234, 0.88); 30 | width: 3.5rem; 31 | height: 3.5rem; 32 | } 33 | -------------------------------------------------------------------------------- /Module 2/Chapter08/example_08-01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | An example from http://rwd.education 6 | 7 | 8 | 9 | 10 | 11 | 12 | 19 | 20 | -------------------------------------------------------------------------------- /Module 2/Chapter08/example_08-01/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | nav { 7 | display: flex; 8 | min-height: 44px; 9 | } 10 | 11 | a { 12 | font-family: sans-serif; 13 | color: #fff; 14 | text-indent: 1rem; 15 | background-color: #ccc; 16 | display: inline-flex; 17 | flex: 1 1 20%; 18 | align-self: stretch; 19 | align-items: center; 20 | transition: box-shadow 1s; 21 | text-decoration: none; 22 | } 23 | 24 | a + a { 25 | border-left: 1px solid #aaa; 26 | } 27 | 28 | a:hover { 29 | box-shadow: inset 0 -3px 0 #CC3232; 30 | } -------------------------------------------------------------------------------- /Module 2/Chapter08/example_08-02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | An example from http://rwd.education 6 | 7 | 8 | 9 | 10 | 11 | 12 |

Demonstration of CSS transforms

13 | 20 | 21 | -------------------------------------------------------------------------------- /Module 2/Chapter08/example_08-02/styles.css: -------------------------------------------------------------------------------- 1 | 2 | body { 3 | padding: 0; 4 | margin: 0; 5 | } 6 | 7 | nav { 8 | padding: 30px; 9 | } 10 | 11 | a { 12 | display: inline-flex; 13 | background-color: #CC3232; 14 | flex: 1 0 auto; 15 | min-height: 88px; 16 | text-decoration: none; 17 | font-size: 22px; 18 | border: 1px solid #333; 19 | padding: 0 10px; 20 | color: #ccc; 21 | font-family: sans-serif; 22 | align-items: center; 23 | transition: transform 1s; 24 | } 25 | 26 | .scale:hover { 27 | transform: scale(1.4); 28 | } 29 | 30 | .translate:hover { 31 | transform: translate(-20px, -20px); 32 | } 33 | 34 | .rotate:hover { 35 | transform: rotate(30deg); 36 | } 37 | 38 | .skew:hover { 39 | transform: skew(40deg, 12deg); 40 | } 41 | 42 | .matrix:hover { 43 | transform: matrix(1.178, -0.256, 1.122, 1.333, -41.533, -1.989); 44 | } -------------------------------------------------------------------------------- /Module 2/Chapter08/example_08-03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | An example from http://rwd.education 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
14 |
15 | 16 | -------------------------------------------------------------------------------- /Module 2/Chapter08/example_08-03/styles.css: -------------------------------------------------------------------------------- 1 | .outer { 2 | position: relative; 3 | height: 400px; 4 | background-color: #f90; 5 | } 6 | 7 | .inner { 8 | position: absolute; 9 | width: 200px; 10 | background-color: #999; 11 | top: 50%; 12 | left: 50%; 13 | transform: translate(-50%, -50%); 14 | } -------------------------------------------------------------------------------- /Module 2/Chapter08/example_08-04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | An example from http://rwd.education 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | The Front 15 | The Back 16 | 17 |
18 | 19 |
20 | 21 | The Front 22 | The Back 23 | 24 |
25 | 26 | -------------------------------------------------------------------------------- /Module 2/Chapter08/example_08-04/styles.css: -------------------------------------------------------------------------------- 1 | .flipper { 2 | perspective: 400px; 3 | position: relative; 4 | width: 300px; 5 | height: 44px; 6 | } 7 | 8 | .flipper + .flipper { 9 | margin-top: 1em; 10 | } 11 | 12 | .flipper-object { 13 | position: absolute; 14 | width: 100%; 15 | height: 100%; 16 | transition: transform 1s; 17 | transform-style: preserve-3d; 18 | } 19 | 20 | .panel { 21 | display: flex; 22 | min-height: 44px; 23 | align-items: center; 24 | justify-content: center; 25 | top: 0; 26 | width: 100%; 27 | height: 100%; 28 | position: absolute; 29 | backface-visibility: hidden; 30 | } 31 | 32 | .flipper-vertical .back { 33 | transform: rotateX(180deg); 34 | } 35 | 36 | .flipper-horizontal .back { 37 | transform: rotateY(180deg); 38 | } 39 | 40 | .back { 41 | background-color: #CC3232; 42 | } 43 | 44 | .front { 45 | background-color: #739328; 46 | } 47 | 48 | .flipper:hover .flipper-vertical { 49 | transform: rotateX(180deg); 50 | } 51 | 52 | .flipper:hover .flipper-horizontal { 53 | transform: rotateY(180deg); 54 | } -------------------------------------------------------------------------------- /Module 2/Chapter08/example_08-05/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | An example from http://rwd.education 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | The Front 15 | The Back 16 | 17 |
18 | 19 |
20 | 21 | The Front 22 | The Back 23 | 24 |
25 | 26 | -------------------------------------------------------------------------------- /Module 2/Chapter08/example_08-05/styles.css: -------------------------------------------------------------------------------- 1 | .flipper { 2 | perspective: 400px; 3 | position: relative; 4 | width: 300px; 5 | height: 44px; 6 | } 7 | 8 | .flipper + .flipper { 9 | margin-top: 1em; 10 | } 11 | 12 | .flipper-object { 13 | position: absolute; 14 | width: 100%; 15 | height: 100%; 16 | transition: transform 1s; 17 | transform-style: preserve-3d; 18 | } 19 | 20 | .panel { 21 | display: flex; 22 | min-height: 44px; 23 | align-items: center; 24 | justify-content: center; 25 | top: 0; 26 | width: 100%; 27 | height: 100%; 28 | position: absolute; 29 | backface-visibility: hidden; 30 | } 31 | 32 | .flipper-vertical .back { 33 | transform: rotateX(180deg); 34 | } 35 | 36 | .flipper-horizontal .back { 37 | transform: rotateY(180deg); 38 | } 39 | 40 | .back { 41 | background-color: #CC3232; 42 | } 43 | 44 | .front { 45 | background-color: #739328; 46 | } 47 | 48 | .flipper:hover .flipper-vertical { 49 | transform: rotateX(180deg); 50 | animation: pulse 2s 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 5 alternate both; 51 | } 52 | 53 | .flipper:hover .flipper-horizontal { 54 | transform: rotateY(180deg); 55 | animation: pulse 1s 1s infinite alternate both; 56 | } 57 | 58 | /*The animation keyframe*/ 59 | 60 | @keyframes pulse { 61 | 100% { 62 | text-shadow: 0 0 5px #bbb; 63 | box-shadow: 0 0 3px 4px #bbb; 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /Module 2/Chapter08/example_08-06/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | An example from http://rwd.education 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | The Front 15 | The Back 16 | 17 |
18 | 19 |
20 | 21 | The Front 22 | The Back 23 | 24 |
25 | 26 | -------------------------------------------------------------------------------- /Module 2/Chapter08/example_08-06/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 5em; 3 | } 4 | 5 | .flipper { 6 | perspective: 400px; 7 | position: relative; 8 | width: 300px; 9 | height: 44px; 10 | } 11 | 12 | .flipper + .flipper { 13 | margin-top: 1em; 14 | } 15 | 16 | .flipper-object { 17 | position: absolute; 18 | width: 100%; 19 | height: 100%; 20 | transition: transform 1s; 21 | transform-style: preserve-3d; 22 | } 23 | 24 | .panel { 25 | display: flex; 26 | min-height: 44px; 27 | align-items: center; 28 | justify-content: center; 29 | top: 0; 30 | width: 100%; 31 | height: 100%; 32 | position: absolute; 33 | backface-visibility: hidden; 34 | } 35 | 36 | .flipper-vertical .back { 37 | transform: rotateX(180deg); 38 | } 39 | 40 | .flipper-horizontal .back { 41 | transform: rotateY(180deg); 42 | } 43 | 44 | .back { 45 | background-color: #CC3232; 46 | } 47 | 48 | .front { 49 | background-color: #739328; 50 | } 51 | 52 | .flipper:hover .flipper-vertical { 53 | transform: rotateX(180deg) translate3d(0, 0, -120px); 54 | animation: pulse 1s 1s infinite alternate both; 55 | } 56 | 57 | .flipper:hover .flipper-horizontal { 58 | transform: rotateY(180deg) translate3d(0, 0, 120px); 59 | animation: pulse 1s 1s infinite alternate both; 60 | } 61 | 62 | /*The animation keyframe*/ 63 | 64 | @keyframes pulse { 65 | 100% { 66 | text-shadow: 0 0 5px #bbb; 67 | box-shadow: 0 0 3px 4px #bbb; 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /Module 2/Chapter08/example_08-07/main.js: -------------------------------------------------------------------------------- 1 | // First wait for the DOM to be ready 2 | document.addEventListener('DOMContentLoaded', function(){ 3 | // This function merely toggles the class 4 | function a(event) { 5 | event.stopPropagation(); 6 | document.querySelector('body').classList.toggle('OffCanvas-Active'); 7 | } 8 | function b() { 9 | document.querySelector('body').classList.remove('OffCanvas-Active'); 10 | } 11 | // When the header is clicked we fire the function to toggle the class 12 | document.querySelector('.off-canvas-launcher').addEventListener('click', a ); 13 | document.querySelector('.main-content').addEventListener('click', b ); 14 | 15 | 16 | // This debounce function (via: https://remysharp.com/2010/07/21/throttling-function-calls) merely stops functioned firing too often on repetitive events (such as resize/scroll) 17 | function debounce(fn, delay) { 18 | var timer = null; 19 | return function () { 20 | var context = this, args = arguments; 21 | clearTimeout(timer); 22 | timer = setTimeout(function () { 23 | fn.apply(context, args); 24 | }, delay); 25 | }; 26 | } 27 | 28 | // removing the class from the body inside a debounce 29 | var debouncedA = debounce(function() { 30 | document.querySelector('body').classList.remove('OffCanvas-Active'); 31 | }, 250); 32 | 33 | // When the window is resized, we want to fire the debouncedA function 34 | window.onresize = debouncedA; 35 | }); -------------------------------------------------------------------------------- /Module 2/Chapter08/example_08-08/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | An example from http://rwd.education 6 | 7 | 8 | 9 | 10 | 11 | 12 |

Without animation-fill-mode

13 |
14 |

With animation-fill-mode forwards

15 |
16 | 17 | -------------------------------------------------------------------------------- /Module 2/Chapter08/example_08-08/styles.css: -------------------------------------------------------------------------------- 1 | .background-change { 2 | animation: fillBg 3s; 3 | height: 200px; 4 | width: 400px; 5 | border: 1px solid #ccc; 6 | } 7 | 8 | @keyframes fillBg { 9 | 0% { 10 | background-color: yellow; 11 | } 12 | 100% { 13 | background-color: red; 14 | } 15 | } 16 | 17 | .fill-mode-forwards { 18 | animation-fill-mode: forwards; 19 | } -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/dev/shims/FlashCanvas/canvas2png.js: -------------------------------------------------------------------------------- 1 | /* 2 | * canvas2png.js 3 | * 4 | * Copyright (c) 2010-2013 Shinya Muramatsu 5 | * Released under the MIT License 6 | * http://flashcanvas.net/ 7 | */ 8 | 9 | (function(doc) { 10 | 11 | var scripts = doc.getElementsByTagName("script"); 12 | var script = scripts[scripts.length - 1]; 13 | var url = script.getAttribute("src").replace(/[^\/]+$/, "save.php"); 14 | 15 | window.canvas2png = function(canvas, filename) { 16 | var tagName = canvas.tagName.toLowerCase(); 17 | if (tagName !== "canvas") { 18 | return; 19 | } 20 | 21 | if (typeof FlashCanvas !== "undefined") { 22 | FlashCanvas.saveImage(canvas, filename); 23 | } else { 24 | var action = url; 25 | if (filename) { 26 | action += "?filename=" + filename; 27 | } 28 | 29 | var form = doc.createElement("form"); 30 | var input = doc.createElement("input"); 31 | 32 | form.setAttribute("action", action); 33 | form.setAttribute("method", "post"); 34 | 35 | input.setAttribute("type", "hidden"); 36 | input.setAttribute("name", "dataurl"); 37 | input.setAttribute("value", canvas.toDataURL()); 38 | 39 | doc.body.appendChild(form); 40 | form.appendChild(input); 41 | form.submit(); 42 | form.removeChild(input); 43 | doc.body.removeChild(form); 44 | } 45 | } 46 | 47 | })(document); 48 | -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/dev/shims/FlashCanvas/flashcanvas.swf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter09/example_09-02/js-webshim/dev/shims/FlashCanvas/flashcanvas.swf -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/dev/shims/FlashCanvasPro/canvas2png.js: -------------------------------------------------------------------------------- 1 | /* 2 | * canvas2png.js 3 | * 4 | * Copyright (c) 2010-2013 Shinya Muramatsu 5 | * Released under the MIT License 6 | * http://flashcanvas.net/ 7 | */ 8 | 9 | (function(doc) { 10 | 11 | var scripts = doc.getElementsByTagName("script"); 12 | var script = scripts[scripts.length - 1]; 13 | var url = script.getAttribute("src").replace(/[^\/]+$/, "save.php"); 14 | 15 | window.canvas2png = function(canvas, filename) { 16 | var tagName = canvas.tagName.toLowerCase(); 17 | if (tagName !== "canvas") { 18 | return; 19 | } 20 | 21 | if (typeof FlashCanvas !== "undefined") { 22 | FlashCanvas.saveImage(canvas, filename); 23 | } else { 24 | var action = url; 25 | if (filename) { 26 | action += "?filename=" + filename; 27 | } 28 | 29 | var form = doc.createElement("form"); 30 | var input = doc.createElement("input"); 31 | 32 | form.setAttribute("action", action); 33 | form.setAttribute("method", "post"); 34 | 35 | input.setAttribute("type", "hidden"); 36 | input.setAttribute("name", "dataurl"); 37 | input.setAttribute("value", canvas.toDataURL()); 38 | 39 | doc.body.appendChild(form); 40 | form.appendChild(input); 41 | form.submit(); 42 | form.removeChild(input); 43 | doc.body.removeChild(form); 44 | } 45 | } 46 | 47 | })(document); 48 | -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/dev/shims/FlashCanvasPro/flash10canvas.swf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter09/example_09-02/js-webshim/dev/shims/FlashCanvasPro/flash10canvas.swf -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/dev/shims/FlashCanvasPro/flash9canvas.swf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter09/example_09-02/js-webshim/dev/shims/FlashCanvasPro/flash9canvas.swf -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/dev/shims/jme/jme.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter09/example_09-02/js-webshim/dev/shims/jme/jme.eot -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/dev/shims/jme/jme.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter09/example_09-02/js-webshim/dev/shims/jme/jme.ttf -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/dev/shims/jme/jme.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter09/example_09-02/js-webshim/dev/shims/jme/jme.woff -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/dev/shims/jpicker/images/AlphaBar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter09/example_09-02/js-webshim/dev/shims/jpicker/images/AlphaBar.png -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/dev/shims/jpicker/images/Bars.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter09/example_09-02/js-webshim/dev/shims/jpicker/images/Bars.png -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/dev/shims/jpicker/images/Maps.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter09/example_09-02/js-webshim/dev/shims/jpicker/images/Maps.png -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/dev/shims/jpicker/images/NoColor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter09/example_09-02/js-webshim/dev/shims/jpicker/images/NoColor.png -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/dev/shims/jpicker/images/bar-opacity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter09/example_09-02/js-webshim/dev/shims/jpicker/images/bar-opacity.png -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/dev/shims/jpicker/images/map-opacity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter09/example_09-02/js-webshim/dev/shims/jpicker/images/map-opacity.png -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/dev/shims/jpicker/images/mappoint.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter09/example_09-02/js-webshim/dev/shims/jpicker/images/mappoint.gif -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/dev/shims/jpicker/images/picker.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter09/example_09-02/js-webshim/dev/shims/jpicker/images/picker.gif -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/dev/shims/jpicker/images/preview-opacity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter09/example_09-02/js-webshim/dev/shims/jpicker/images/preview-opacity.png -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/dev/shims/jpicker/images/rangearrows.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter09/example_09-02/js-webshim/dev/shims/jpicker/images/rangearrows.gif -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/dev/shims/mediacapture-picker.js: -------------------------------------------------------------------------------- 1 | webshim.register('mediacapture-picker', function($, webshim, window, document, undefined, featureOptions){ 2 | "use strict"; 3 | 4 | function PhotoShooter($dom){ 5 | this.$dom = $dom; 6 | this._createDom(); 7 | this.requestMedia(); 8 | } 9 | 10 | PhotoShooter.prototype = { 11 | _createDom: function(){ 12 | this.$dom.html('
' + 13 | '' + 14 | '
' + 15 | '
' + 16 | '
' + 17 | '
') 18 | ; 19 | }, 20 | requestMedia: function(){ 21 | var that = this; 22 | 23 | 24 | navigator.getUserMedia( 25 | {video: {minWidth: 200, audio: false}}, 26 | function(stream){ 27 | that.stream = stream; 28 | $('video', that.$dom).prop('src', URL.createObjectURL(stream)); 29 | }, 30 | function(){ 31 | 32 | } 33 | ); 34 | $('video', that.$dom).removeClass('ws-usermedia'); 35 | 36 | } 37 | }; 38 | 39 | webshim.mediacapture.showContent = function($fileinput, $button, popover){ 40 | var stream = new PhotoShooter(popover.contentElement); 41 | }; 42 | }); 43 | -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/dev/shims/moxie/flash/Moxie.cdn.swf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter09/example_09-02/js-webshim/dev/shims/moxie/flash/Moxie.cdn.swf -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/dev/shims/moxie/flash/Moxie.min.swf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter09/example_09-02/js-webshim/dev/shims/moxie/flash/Moxie.min.swf -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/dev/shims/styles/color-picker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter09/example_09-02/js-webshim/dev/shims/styles/color-picker.png -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/dev/shims/styles/progress.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter09/example_09-02/js-webshim/dev/shims/styles/progress.gif -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/dev/shims/styles/progress.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter09/example_09-02/js-webshim/dev/shims/styles/progress.png -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/dev/shims/styles/scss/_extends.scss: -------------------------------------------------------------------------------- 1 | %clearfix { 2 | zoom: 1; 3 | 4 | &:before, 5 | &:after { 6 | display: table; 7 | clear: both; 8 | content: ' '; 9 | } 10 | } 11 | 12 | $browser-context: 13; // Default 13 | 14 | @function em($pixels, $context: $browser-context) { 15 | @return #{$pixels/$context}em 16 | } 17 | 18 | -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/dev/shims/styles/scss/shim-ext.scss: -------------------------------------------------------------------------------- 1 | @import "shim.scss"; 2 | @import "forms-ext.scss"; 3 | -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/dev/shims/styles/transparent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter09/example_09-02/js-webshim/dev/shims/styles/transparent.png -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/dev/shims/styles/widget-font.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter09/example_09-02/js-webshim/dev/shims/styles/widget-font.zip -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/dev/shims/styles/widget.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter09/example_09-02/js-webshim/dev/shims/styles/widget.eot -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/dev/shims/styles/widget.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter09/example_09-02/js-webshim/dev/shims/styles/widget.ttf -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/dev/shims/styles/widget.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter09/example_09-02/js-webshim/dev/shims/styles/widget.woff -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/dev/shims/swf/JarisFLVPlayer.swf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter09/example_09-02/js-webshim/dev/shims/swf/JarisFLVPlayer.swf -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/minified/shims/FlashCanvas/canvas2png.js: -------------------------------------------------------------------------------- 1 | !function(a){var b=a.getElementsByTagName("script"),c=b[b.length-1],d=c.getAttribute("src").replace(/[^\/]+$/,"save.php");window.canvas2png=function(b,c){var e=b.tagName.toLowerCase();if("canvas"===e)if("undefined"!=typeof FlashCanvas)FlashCanvas.saveImage(b,c);else{var f=d;c&&(f+="?filename="+c);var g=a.createElement("form"),h=a.createElement("input");g.setAttribute("action",f),g.setAttribute("method","post"),h.setAttribute("type","hidden"),h.setAttribute("name","dataurl"),h.setAttribute("value",b.toDataURL()),a.body.appendChild(g),g.appendChild(h),g.submit(),g.removeChild(h),a.body.removeChild(g)}}}(document); -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/minified/shims/FlashCanvas/flashcanvas.swf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter09/example_09-02/js-webshim/minified/shims/FlashCanvas/flashcanvas.swf -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/minified/shims/FlashCanvasPro/canvas2png.js: -------------------------------------------------------------------------------- 1 | !function(a){var b=a.getElementsByTagName("script"),c=b[b.length-1],d=c.getAttribute("src").replace(/[^\/]+$/,"save.php");window.canvas2png=function(b,c){var e=b.tagName.toLowerCase();if("canvas"===e)if("undefined"!=typeof FlashCanvas)FlashCanvas.saveImage(b,c);else{var f=d;c&&(f+="?filename="+c);var g=a.createElement("form"),h=a.createElement("input");g.setAttribute("action",f),g.setAttribute("method","post"),h.setAttribute("type","hidden"),h.setAttribute("name","dataurl"),h.setAttribute("value",b.toDataURL()),a.body.appendChild(g),g.appendChild(h),g.submit(),g.removeChild(h),a.body.removeChild(g)}}}(document); -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/minified/shims/FlashCanvasPro/flash10canvas.swf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter09/example_09-02/js-webshim/minified/shims/FlashCanvasPro/flash10canvas.swf -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/minified/shims/FlashCanvasPro/flash9canvas.swf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter09/example_09-02/js-webshim/minified/shims/FlashCanvasPro/flash9canvas.swf -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/minified/shims/canvas-blob.js: -------------------------------------------------------------------------------- 1 | !function(a){"use strict";var b=a.HTMLCanvasElement&&a.HTMLCanvasElement.prototype,c=a.Blob&&function(){try{return Boolean(new Blob)}catch(a){return!1}}(),d=c&&a.Uint8Array&&function(){try{return 100===new Blob([new Uint8Array(100)]).size}catch(a){return!1}}(),e=a.BlobBuilder||a.WebKitBlobBuilder||a.MozBlobBuilder||a.MSBlobBuilder,f=(c||e)&&a.atob&&a.ArrayBuffer&&a.Uint8Array&&function(a){var b,f,g,h,i,j;for(b=a.split(",")[0].indexOf("base64")>=0?atob(a.split(",")[1]):decodeURIComponent(a.split(",")[1]),f=new ArrayBuffer(b.length),g=new Uint8Array(f),h=0;hb;b++){var d=e[b].mql,f=e[b].listeners||[],g=a(d.media).matches;if(g!==d.matches){d.matches=g;for(var h=0,i=f.length;i>h;h++)f[h].call(window,d)}}},30)};window.matchMedia=function(d){var g=a(d),h=[],i=0;return g.addListener=function(a){b&&(c||(c=!0,window.addEventListener("resize",f,!0)),0===i&&(i=e.push({mql:g,listeners:h})),h.push(a))},g.removeListener=function(a){for(var b=0,c=h.length;c>b;b++)h[b]===a&&h.splice(b,1)},g}}(),webshim.isReady("matchMedia",!0); -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/minified/shims/mediacapture-picker.js: -------------------------------------------------------------------------------- 1 | webshim.register("mediacapture-picker",function(a,b){"use strict";function c(a){this.$dom=a,this._createDom(),this.requestMedia()}c.prototype={_createDom:function(){this.$dom.html('
')},requestMedia:function(){var b=this;navigator.getUserMedia({video:{minWidth:200,audio:!1}},function(c){b.stream=c,a("video",b.$dom).prop("src",URL.createObjectURL(c))},function(){}),a("video",b.$dom).removeClass("ws-usermedia")}},b.mediacapture.showContent=function(a,b,d){new c(d.contentElement)}}); -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/minified/shims/moxie/flash/Moxie.cdn.swf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter09/example_09-02/js-webshim/minified/shims/moxie/flash/Moxie.cdn.swf -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/minified/shims/moxie/flash/Moxie.min.swf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter09/example_09-02/js-webshim/minified/shims/moxie/flash/Moxie.min.swf -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/minified/shims/styles/color-picker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter09/example_09-02/js-webshim/minified/shims/styles/color-picker.png -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/minified/shims/styles/progress.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter09/example_09-02/js-webshim/minified/shims/styles/progress.gif -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/minified/shims/styles/progress.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter09/example_09-02/js-webshim/minified/shims/styles/progress.png -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/minified/shims/styles/transparent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter09/example_09-02/js-webshim/minified/shims/styles/transparent.png -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/minified/shims/styles/widget.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter09/example_09-02/js-webshim/minified/shims/styles/widget.eot -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/minified/shims/styles/widget.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter09/example_09-02/js-webshim/minified/shims/styles/widget.ttf -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/minified/shims/styles/widget.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter09/example_09-02/js-webshim/minified/shims/styles/widget.woff -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/minified/shims/swf/JarisFLVPlayer.swf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 2/Chapter09/example_09-02/js-webshim/minified/shims/swf/JarisFLVPlayer.swf -------------------------------------------------------------------------------- /Module 2/Chapter09/example_09-02/js-webshim/minified/shims/usermedia-core.js: -------------------------------------------------------------------------------- 1 | webshim.register("usermedia-core",function(a,b,c,d){"use strict";var e=b.prefixed("srcObject",d.createElement("video")),f=function(){navigator.getUserMedia=navigator[b.prefixed("getUserMedia",navigator)]};if("srcObject"!=e){var g=!(!c.URL||!URL.createObjectURL);b.defineNodeNamesProperty(["audio","video"],"srcObject",{prop:{get:function(){return this[e]||null},set:function(b){e?a.prop(this,e,b):a.prop(this,"src",g?URL.createObjectURL(b):b)}}})}!function(){var a={},b=URL.createObjectURL,c=URL.revokeObjectURL;URL.createObjectURL=function(c){var d=c;return b&&!c._wsStreamId?d=b.apply(this,arguments):c._wsStreamId&&(d=c._wsStreamId,a[d]=c),d},URL.revokeObjectURL=function(b){if(a[b])delete a[b];else if(c)return c.apply(this,arguments)}}(),b.ready(b.modules["usermedia-shim"].loaded?"usermedia-api":"usermedia-shim",f)}); -------------------------------------------------------------------------------- /Module 2/Chapter10/example_10-01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | An example from http://rwd.education 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Module 2/Chapter10/example_10-01/main.js: -------------------------------------------------------------------------------- 1 | var size = window.getComputedStyle(document.body,':after').getPropertyValue('content'); 2 | 3 | ;(function alertSize() { 4 | if (size.indexOf("Splus") !=-1) { 5 | alert('I will run functions for small screens'); 6 | } 7 | if (size.indexOf("Mplus") !=-1) { 8 | alert('At medium sizes, a different function could run'); 9 | } 10 | if (size.indexOf("Lplus") !=-1) { 11 | alert('Large screen here, different functions if needed'); 12 | } 13 | })(); -------------------------------------------------------------------------------- /Module 2/Chapter10/example_10-01/styles.css: -------------------------------------------------------------------------------- 1 | @media (min-width: 20rem) { 2 | body::after { 3 | content: "Splus"; 4 | font-size: 0; 5 | } 6 | } 7 | @media (min-width: 47.5rem) { 8 | body::after { 9 | content: "Mplus"; 10 | font-size: 0; 11 | } 12 | } 13 | @media (min-width: 62.5rem) { 14 | body::after { 15 | content: "Lplus"; 16 | font-size: 0; 17 | } 18 | } -------------------------------------------------------------------------------- /Module 2/Chapter10/example_10-02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | An example from http://rwd.education 6 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | 16 | ☰ menu 17 | 18 | 19 | -------------------------------------------------------------------------------- /Module 2/Chapter10/example_10-02/styles.css: -------------------------------------------------------------------------------- 1 | .menu-toggle { 2 | appearance: none; 3 | display: inline-flex; 4 | padding: 0 10px; 5 | font-size: 17px; 6 | align-items: center; 7 | justify-content: center; 8 | border-radius: 8px; 9 | border: 1px solid #ebebeb; 10 | min-height: 44px; 11 | text-decoration: none; 12 | color: #777; 13 | } 14 | 15 | [aria-label="site navigation"] { 16 | margin-right: 1ch; 17 | font-size: 24px; 18 | } -------------------------------------------------------------------------------- /Module 3/Chapter01/5442OT_01_01.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter01/5442OT_01_01.html -------------------------------------------------------------------------------- /Module 3/Chapter01/5442OT_01_02.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Responsive Images Test 5 | 6 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Module 3/Chapter01/5442OT_01_03.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 9 | 10 | 11 |
12 |
13 | 14 |
15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /Module 3/Chapter01/5442OT_01_04.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter01/5442OT_01_04.html -------------------------------------------------------------------------------- /Module 3/Chapter01/5442OT_01_05.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter01/5442OT_01_05.html -------------------------------------------------------------------------------- /Module 3/Chapter01/5442OT_01_06.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter01/5442OT_01_06.html -------------------------------------------------------------------------------- /Module 3/Chapter01/images/index.php: -------------------------------------------------------------------------------- 1 | 0) { 18 | 19 | $fileext = pathinfo($file, PATHINFO_EXTENSION); 20 | 21 | // Low resolution image 22 | if ($device_width <= 800) { 23 | $output_file = substr_replace($file, '-low', -strlen($fileext)-1, 0); 24 | } 25 | 26 | // Medium resolution image 27 | else if ($device_width <= 1024) { 28 | $output_file = substr_replace($file, '-med', -strlen($fileext)-1, 0); 29 | } 30 | 31 | // check the file exists 32 | if (isset($output_file) && file_exists($output_file)) { 33 | $file = $output_file; 34 | } 35 | } 36 | 37 | // return the file; 38 | readfile($file); 39 | } 40 | 41 | ?> -------------------------------------------------------------------------------- /Module 3/Chapter01/images/robot-low.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter01/images/robot-low.png -------------------------------------------------------------------------------- /Module 3/Chapter01/images/robot-med.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter01/images/robot-med.png -------------------------------------------------------------------------------- /Module 3/Chapter01/images/robot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter01/images/robot.png -------------------------------------------------------------------------------- /Module 3/Chapter01/robot-low.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter01/robot-low.png -------------------------------------------------------------------------------- /Module 3/Chapter01/robot-med.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter01/robot-med.png -------------------------------------------------------------------------------- /Module 3/Chapter01/robot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter01/robot.png -------------------------------------------------------------------------------- /Module 3/Chapter02/5442OT_02_01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 10 | 11 | 12 |

13 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum turpis diam, dignissim ac luctus ac, luctus nec lacus. Aenean non dolor velit, ac euismod turpis. Integer ac leo vel libero varius fermentum vel at odio. Nunc tincidunt sem eget justo eleifend a tempus nibh tempor. Nunc faucibus fringilla nunc, eu vestibulum arcu porta ut. Donec id quam velit, vel fermentum lacus. Vivamus volutpat, elit quis ultrices auctor, turpis purus rutrum velit, sed mollis diam nunc vitae justo. Proin nisi magna, eleifend vitae vulputate et, suscipit vel magna. 14 |

15 |

16 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum turpis diam, dignissim ac luctus ac, luctus nec lacus. Aenean non dolor velit, ac euismod turpis. Integer ac leo vel libero varius fermentum vel at odio. Nunc tincidunt sem eget justo eleifend a tempus nibh tempor. Nunc faucibus fringilla nunc, eu vestibulum arcu porta ut. Donec id quam velit, vel fermentum lacus. Vivamus volutpat, elit quis ultrices auctor, turpis purus rutrum velit, sed mollis diam nunc vitae justo. Proin nisi magna, eleifend vitae vulputate et, suscipit vel magna. 17 |

18 | 19 | 20 | -------------------------------------------------------------------------------- /Module 3/Chapter02/5442OT_02_02.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /Module 3/Chapter02/5442OT_02_03.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /Module 3/Chapter02/5442OT_02_04.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /Module 3/Chapter02/5442OT_02_05.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 24 | 25 | 26 | 27 |

text foo bar

28 | 29 | -------------------------------------------------------------------------------- /Module 3/Chapter02/5442OT_02_07.html: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | 24 | 25 | 26 | 27 |

foo

28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /Module 3/Chapter02/5442OT_02_08.html: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 15 | 16 |
    17 |
  • 18 | foo 19 |
    • 20 |
  • 21 | foo 22 |
    • 23 |
  • 24 | foo 25 |
    • 26 |
  • 27 | foo 28 |
    • 29 |
  • 30 | foo 31 |
    • 32 |
33 | 34 | 35 | -------------------------------------------------------------------------------- /Module 3/Chapter02/5442OT_02_09.html: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | 10 | 24 | 25 | 26 |

Hello World

27 | 28 | 29 | -------------------------------------------------------------------------------- /Module 3/Chapter02/5442OT_02_10.html: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 27 | 28 |
29 |

Nam quis mi ut turpis adipiscing cursus. Pellentesque consectetur accumsan nibh, et faucibus augue molestie quis. Aenean viverra urna purus, vel volutpat sapien. Nam odio turpis, pretium volutpat facilisis sed, dapibus sit amet massa. 30 |

31 | 32 |
33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /Module 3/Chapter02/5442OT_02_12.html: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 36 | 37 |  43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /Module 3/Chapter02/images/mask2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter02/images/mask2.png -------------------------------------------------------------------------------- /Module 3/Chapter03/5442OT_03_index.txt: -------------------------------------------------------------------------------- 1 | Chapters and corresponding HTML files 2 | 3 | Responsive layout with min and max width - responsive-layout-min-max-width.html 4 | Control your layout with relative padding - relative-padding.html 5 | Add a media query to your css - add-media-query.html 6 | Creating responsive a width layout with your media query - resp-width-layout-media-query.html 7 | Changing image sizes with media query - change-imagesize-mediaquery.html 8 | Hiding an element with media query - hide-element-mediaquery.html 9 | Make a smoothly trasitioning responsive layout - make-smoothly-transitioning-resp-layout.html -------------------------------------------------------------------------------- /Module 3/Chapter03/images/robot-low.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter03/images/robot-low.png -------------------------------------------------------------------------------- /Module 3/Chapter03/images/robot-med.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter03/images/robot-med.png -------------------------------------------------------------------------------- /Module 3/Chapter03/images/robot-wide.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter03/images/robot-wide.jpg -------------------------------------------------------------------------------- /Module 3/Chapter03/images/robot-wide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter03/images/robot-wide.png -------------------------------------------------------------------------------- /Module 3/Chapter03/images/robot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter03/images/robot.png -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_01/5442OT_04_fluid-960.html: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | Fluid 960 Grid System | 16-column Grid 10 | 11 | 12 | 13 | 14 | 17 | 18 | 19 |
20 |

Fluid Grid

21 |
22 |
Lorem ipsum dolor sit amet...
23 |
Curabitur sapien ante, pretium...
24 |
tiam non quam tortor, nec sagittis ...
25 |
Donec mollis consequat arcu vel...
26 |
Nullam sit amet magna dui. In dictum...
27 |
Etiam suscipit varius pharetra....
28 |
29 | 30 | 31 | -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_01/css/ie.css: -------------------------------------------------------------------------------- 1 | /* 2 | Fluid 960 Grid System - IE Fixes (IE7 and greater) 3 | Learn more ~ http://www.designinfluences.com/ 4 | 5 | Licensed under GPL and MIT. 6 | */ 7 | 8 | /* =Grid >> Global 9 | --------------------------------------------------------------------------------*/ 10 | 11 | .grid_1, 12 | .grid_2, 13 | .grid_3, 14 | .grid_4, 15 | .grid_5, 16 | .grid_6, 17 | .grid_7, 18 | .grid_8, 19 | .grid_9, 20 | .grid_10, 21 | .grid_11, 22 | .grid_12, 23 | .grid_13, 24 | .grid_14, 25 | .grid_15, 26 | .grid_16 27 | { 28 | margin-left: .92%; 29 | margin-right: .92%; 30 | } 31 | 32 | -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_01/css/ie6.css: -------------------------------------------------------------------------------- 1 | /* 2 | Fluid 960 Grid System - IE6 Fixes 3 | Learn more ~ http://www.designinfluences.com/ 4 | 5 | Licensed under GPL and MIT. 6 | */ 7 | 8 | /* =Grid >> Global 9 | --------------------------------------------------------------------------------*/ 10 | 11 | .grid_1, 12 | .grid_2, 13 | .grid_3, 14 | .grid_4, 15 | .grid_5, 16 | .grid_6, 17 | .grid_7, 18 | .grid_8, 19 | .grid_9, 20 | .grid_10, 21 | .grid_11, 22 | .grid_12, 23 | .grid_13, 24 | .grid_14, 25 | .grid_15, 26 | .grid_16 27 | { 28 | margin-left: .8%; 29 | margin-right: .8%; 30 | } 31 | 32 | -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_01/css/reset.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ */ 2 | /* v1.0 | 20080212 */ 3 | 4 | html, body, div, span, applet, object, iframe, 5 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 6 | a, abbr, acronym, address, big, cite, code, 7 | del, dfn, em, font, img, ins, kbd, q, s, samp, 8 | small, strike, strong, sub, sup, tt, var, 9 | b, u, i, center, 10 | dl, dt, dd, ol, ul, li, 11 | fieldset, form, label, legend, 12 | table, caption, tbody, tfoot, thead, tr, th, td { 13 | margin: 0; 14 | padding: 0; 15 | border: 0; 16 | outline: 0; 17 | font-size: 100%; 18 | vertical-align: baseline; 19 | background: transparent; 20 | } 21 | body { 22 | line-height: 1; 23 | } 24 | ol, ul { 25 | list-style: none; 26 | } 27 | blockquote, q { 28 | quotes: none; 29 | } 30 | blockquote:before, blockquote:after, 31 | q:before, q:after { 32 | content: ''; 33 | content: none; 34 | } 35 | 36 | /* remember to define focus styles! */ 37 | :focus { 38 | outline: 0; 39 | } 40 | 41 | /* remember to highlight inserts somehow! */ 42 | ins { 43 | text-decoration: none; 44 | } 45 | del { 46 | text-decoration: line-through; 47 | } 48 | 49 | /* tables still need 'cellspacing="0"' in the markup */ 50 | table { 51 | border-collapse: collapse; 52 | border-spacing: 0; 53 | } -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_01/css/responsive.css: -------------------------------------------------------------------------------- 1 | /* 2 | Document : responsive 3 | Created on : Dec 26, 2012, 11:24:27 PM 4 | Author : benjaminlagrone 5 | Description: 6 | Purpose of the stylesheet follows. 7 | */ 8 | 9 | 10 | @media screen and (max-width:420px){ 11 | .break-column{min-width:360px;} 12 | } 13 | @media screen and (max-width:600px) and (min-width:421px){ 14 | .grid_2.break-column,.grid_3.break-column,.grid_5.break-column{width:48%;} 15 | } 16 | @media screen and (max-width:1024px) and (min-width:601px){ 17 | .break-column{width:30% !important} 18 | } 19 | 20 | 21 | -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_01/css/text.css: -------------------------------------------------------------------------------- 1 | /* 2 | 960 Grid System ~ Text CSS. 3 | Learn more ~ http://960.gs/ 4 | 5 | Licensed under GPL and MIT. 6 | */ 7 | 8 | /* =Basic HTML 9 | --------------------------------------------------------------------------------*/ 10 | 11 | body 12 | { 13 | font: 13px/1.5 Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; 14 | } 15 | 16 | a:focus 17 | { 18 | outline: 1px dotted invert; 19 | } 20 | 21 | hr 22 | { 23 | border-color: #ccc; 24 | border-style: solid; 25 | border-width: 1px 0 0; 26 | clear: both; 27 | height: 0; 28 | } 29 | 30 | /* =Headings 31 | --------------------------------------------------------------------------------*/ 32 | 33 | h1 34 | { 35 | font-size: 25px; 36 | } 37 | 38 | h2 39 | { 40 | font-size: 23px; 41 | } 42 | 43 | h3 44 | { 45 | font-size: 21px; 46 | } 47 | 48 | h4 49 | { 50 | font-size: 19px; 51 | } 52 | 53 | h5 54 | { 55 | font-size: 17px; 56 | } 57 | 58 | h6 59 | { 60 | font-size: 15px; 61 | } 62 | 63 | /* =Spacing 64 | --------------------------------------------------------------------------------*/ 65 | 66 | ol 67 | { 68 | list-style: decimal; 69 | } 70 | 71 | ul 72 | { 73 | list-style: square; 74 | } 75 | 76 | li 77 | { 78 | margin-left: 30px; 79 | } 80 | 81 | p, 82 | dl, 83 | hr, 84 | h1, 85 | h2, 86 | h3, 87 | h4, 88 | h5, 89 | h6, 90 | ol, 91 | ul, 92 | pre, 93 | table, 94 | address, 95 | fieldset 96 | { 97 | margin-bottom: 20px; 98 | } -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_02/css/blueprint/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_02/css/blueprint/.DS_Store -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_02/css/blueprint/plugins/buttons/icons/cross.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_02/css/blueprint/plugins/buttons/icons/cross.png -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_02/css/blueprint/plugins/buttons/icons/key.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_02/css/blueprint/plugins/buttons/icons/key.png -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_02/css/blueprint/plugins/buttons/icons/tick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_02/css/blueprint/plugins/buttons/icons/tick.png -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_02/css/blueprint/plugins/buttons/readme.txt: -------------------------------------------------------------------------------- 1 | Buttons 2 | 3 | * Gives you great looking CSS buttons, for both and 25 | 26 | 27 | Change Password 28 | 29 | 30 | 31 | Cancel 32 | 33 | -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_02/css/blueprint/plugins/fancy-type/readme.txt: -------------------------------------------------------------------------------- 1 | Fancy Type 2 | 3 | * Gives you classes to use if you'd like some 4 | extra fancy typography. 5 | 6 | Credits and instructions are specified above each class 7 | in the fancy-type.css file in this directory. 8 | 9 | 10 | Usage 11 | ---------------------------------------------------------------- 12 | 13 | 1) Add this plugin to lib/settings.yml. 14 | See compress.rb for instructions. 15 | -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_02/css/blueprint/plugins/link-icons/icons/doc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_02/css/blueprint/plugins/link-icons/icons/doc.png -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_02/css/blueprint/plugins/link-icons/icons/email.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_02/css/blueprint/plugins/link-icons/icons/email.png -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_02/css/blueprint/plugins/link-icons/icons/external.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_02/css/blueprint/plugins/link-icons/icons/external.png -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_02/css/blueprint/plugins/link-icons/icons/feed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_02/css/blueprint/plugins/link-icons/icons/feed.png -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_02/css/blueprint/plugins/link-icons/icons/im.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_02/css/blueprint/plugins/link-icons/icons/im.png -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_02/css/blueprint/plugins/link-icons/icons/lock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_02/css/blueprint/plugins/link-icons/icons/lock.png -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_02/css/blueprint/plugins/link-icons/icons/pdf.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_02/css/blueprint/plugins/link-icons/icons/pdf.png -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_02/css/blueprint/plugins/link-icons/icons/visited.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_02/css/blueprint/plugins/link-icons/icons/visited.png -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_02/css/blueprint/plugins/link-icons/icons/xls.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_02/css/blueprint/plugins/link-icons/icons/xls.png -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_02/css/blueprint/plugins/link-icons/readme.txt: -------------------------------------------------------------------------------- 1 | Link Icons 2 | * Icons for links based on protocol or file type. 3 | 4 | This is not supported in IE versions < 7. 5 | 6 | 7 | Credits 8 | ---------------------------------------------------------------- 9 | 10 | * Marc Morgan 11 | * Olav Bjorkoy [bjorkoy.com] 12 | 13 | 14 | Usage 15 | ---------------------------------------------------------------- 16 | 17 | 1) Add this line to your HTML: 18 | 19 | -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_02/css/blueprint/plugins/rtl/readme.txt: -------------------------------------------------------------------------------- 1 | RTL 2 | * Mirrors Blueprint, so it can be used with Right-to-Left languages. 3 | 4 | By Ran Yaniv Hartstein, ranh.co.il 5 | 6 | Usage 7 | ---------------------------------------------------------------- 8 | 9 | 1) Add this line to your HTML: 10 | 11 | -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_02/css/blueprint/print.css: -------------------------------------------------------------------------------- 1 | /* ----------------------------------------------------------------------- 2 | 3 | 4 | Blueprint CSS Framework 1.0.1 5 | http://blueprintcss.org 6 | 7 | * Copyright (c) 2007-Present. See LICENSE for more info. 8 | * See README for instructions on how to use Blueprint. 9 | * For credits and origins, see AUTHORS. 10 | * This is a compressed file. See the sources in the 'src' directory. 11 | 12 | ----------------------------------------------------------------------- */ 13 | 14 | /* print.css */ 15 | body {line-height:1.5;font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;color:#000;background:none;font-size:10pt;} 16 | .container {background:none;} 17 | hr {background:#ccc;color:#ccc;width:100%;height:2px;margin:2em 0;padding:0;border:none;} 18 | hr.space {background:#fff;color:#fff;visibility:hidden;} 19 | h1, h2, h3, h4, h5, h6 {font-family:"Helvetica Neue", Arial, "Lucida Grande", sans-serif;} 20 | code {font:.9em "Courier New", Monaco, Courier, monospace;} 21 | a img {border:none;} 22 | p img.top {margin-top:0;} 23 | blockquote {margin:1.5em;padding:1em;font-style:italic;font-size:.9em;} 24 | .small {font-size:.9em;} 25 | .large {font-size:1.1em;} 26 | .quiet {color:#999;} 27 | .hide {display:none;} 28 | a:link, a:visited {background:transparent;font-weight:700;text-decoration:underline;} 29 | a:link:after, a:visited:after {content:" (" attr(href) ")";font-size:90%;} -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_02/css/blueprint/src/grid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_02/css/blueprint/src/grid.png -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_02/css/responsive.css: -------------------------------------------------------------------------------- 1 | /* 2 | Document : responsive.css 3 | Created on : Dec 29, 2012, 10:38:27 PM 4 | Author : benjaminlagrone 5 | Description: 6 | Purpose of the stylesheet follows. 7 | */ 8 | .container{width:960px} 9 | @media screen and (max-width:600px){ 10 | div[class*='span-']{width:90%;} 11 | .container{width:100%} 12 | } 13 | @media screen and (min-width:601px) and (max-width:1024px){ 14 | div[class*='span-']{width:42%;} 15 | div[class*='span-'].wide{width:90%;} 16 | .container{width:100%} 17 | } 18 | div[class*='span-']{display:block; 19 | } -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_02/robot-low.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_02/robot-low.png -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_03/CSS/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_03/CSS/.DS_Store -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_03/CSS/golden-base/golden-min.css: -------------------------------------------------------------------------------- 1 | html,body,div{border:0;margin:0;padding:0;} 2 | .main{width:970px;padding-top:10px;margin:0 auto;} 3 | .g160,.g320,.g480,.g640,.g800,.g960,.g80,.g240,.g400,.g560,.g720,.g880,.g960{float:left;display:inline;margin-left:10px;} 4 | .g160{width:150px;} 5 | .g320{width:310px;} 6 | .g480{width:470px;} 7 | .g640{width:630px;} 8 | .g800{width:790px;} 9 | .g960{width:950px;} 10 | .g80{width:70px;} 11 | .g240{width:230px;} 12 | .g400{width:390px;} 13 | .g560{width:550px;} 14 | .g720{width:710px;} 15 | .g880{width:870px;} 16 | .ml80{margin-left:90px;} 17 | .ml160{margin-left:170px;} 18 | .ml240{margin-left:250px;} 19 | .ml320{margin-left:330px;} 20 | .ml400{margin-left:410px;} 21 | .ml480{margin-left:490px;} 22 | .ml560{margin-left:560px;} 23 | .ml640{margin-left:650px;} 24 | .ml720{margin-left:730px;} 25 | .ml800{margin-left:810px;} 26 | .ml880{margin-left:890px;} 27 | .ml960{margin-left:970px;} 28 | .inside{margin-left:0;} 29 | p.grid{padding-left:10px;} 30 | .clear{clear:both;} 31 | .clearfix:after,.main:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;} 32 | .clearfix,.main{display:block;} 33 | -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_03/CSS/golden-extend/golden-min.css: -------------------------------------------------------------------------------- 1 | .main{width:970px;padding-top:10px;margin:0 auto;} 2 | .g160,.g320,.g480,.g640,.g800,.g960,.g80,.g240,.g400,.g560,.g720,.g880,.g960{float:left;display:inline;margin-left:10px;} 3 | .g160{width:150px;} 4 | .g320{width:310px;} 5 | .g480{width:470px;} 6 | .g640{width:630px;} 7 | .g800{width:790px;} 8 | .g960{width:950px;} 9 | .g80{width:70px;} 10 | .g240{width:230px;} 11 | .g400{width:390px;} 12 | .g560{width:550px;} 13 | .g720{width:710px;} 14 | .g880{width:870px;} 15 | .ml80{margin-left:90px;} 16 | .ml160{margin-left:170px;} 17 | .ml240{margin-left:250px;} 18 | .ml320{margin-left:330px;} 19 | .ml400{margin-left:410px;} 20 | .ml480{margin-left:490px;} 21 | .ml560{margin-left:560px;} 22 | .ml640{margin-left:650px;} 23 | .ml720{margin-left:730px;} 24 | .ml800{margin-left:810px;} 25 | .ml880{margin-left:890px;} 26 | .ml960{margin-left:970px;} 27 | .inside{margin-left:0;} 28 | p.grid{padding-left:10px;} 29 | .clear{clear:both;} 30 | .clearfix,.main{display:block;} 31 | .clearfix:after,.main:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;} -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_03/CSS/golden-extend/golden.css: -------------------------------------------------------------------------------- 1 | /* 2 | Golden Grid - CSS Library 3 | Author:Vladimir Carrer 4 | */ 5 | 6 | /* CSS Grid */ 7 | 8 | 9 | .main { margin:0 auto; max-width:970px; padding-top:10px; } 10 | 11 | 12 | .g160,.g320,.g480,.g640,.g800,.g960,.g80,.g240,.g400,.g560,.g720,.g880,.g960 {float:left; display: inline; margin-left:10px; } 13 | 14 | /* 6 columns */ 15 | .g160 {width:150px; } 16 | .g320 {width:310px;} 17 | .g480 {width:470px;} 18 | .g640 {width:630px;} 19 | .g800 {width:790px;} 20 | .g960 {width:950px;} 21 | 22 | /* 12 columns */ 23 | .g80 {width:70px;} 24 | .g240 {width:230px;} 25 | .g400 {width:390px;} 26 | .g560 {width:550px;} 27 | .g720 {width:710px;} 28 | .g880 {width:870px;} 29 | 30 | /* margin */ 31 | .ml80{margin-left:90px;} 32 | .ml160{margin-left:170px;} 33 | .ml240{margin-left:250px;} 34 | .ml320{margin-left:330px;} 35 | .ml400{margin-left:410px;} 36 | .ml480{margin-left:490px;} 37 | .ml560{margin-left:560px;} 38 | .ml640{margin-left:650px;} 39 | .ml720{margin-left:730px;} 40 | .ml800{margin-left:810px;} 41 | .ml880{margin-left:890px;} 42 | .ml960{margin-left:970px;} 43 | 44 | .inside{margin-left:0;} 45 | 46 | p.grid{ padding-left:10px;} 47 | 48 | .clear {clear:both;} 49 | .clearfix, .main{ display:block;} 50 | 51 | .clearfix:after, .main:after { 52 | visibility: hidden; 53 | display: block; 54 | font-size: 0; 55 | content: " "; 56 | clear: both; 57 | height: 0; 58 | } 59 | -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_03/CSS/golden-extend/reset-min.css: -------------------------------------------------------------------------------- 1 | html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,code,del,dfn,em,img,q,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;margin:0;padding:0;}table{border-collapse:separate;border-spacing:0;}caption,th,td{text-align:left;font-weight:400;}table,td,th{vertical-align:middle;}blockquote:before,blockquote:after,q:before,q:after{content:"";}blockquote,q{quotes:"" "";}a img{border:none;} -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_03/CSS/golden-extend/reset.css: -------------------------------------------------------------------------------- 1 | html, body, div, span, object, iframe, 2 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 3 | a, abbr, acronym, address, code, 4 | del, dfn, em, img, q, dl, dt, dd, ol, ul, li, 5 | fieldset, form, label, legend, 6 | table, caption, tbody, tfoot, thead, tr, th, td { 7 | margin: 0; 8 | padding: 0; 9 | border: 0; 10 | font-weight: inherit; 11 | font-style: inherit; 12 | font-size: 100%; 13 | font-family: inherit; 14 | vertical-align: baseline; 15 | } 16 | 17 | 18 | /* Tables still need 'cellspacing="0"' in the markup. */ 19 | table { border-collapse: separate; border-spacing: 0; } 20 | caption, th, td { text-align: left; font-weight: normal; } 21 | table, td, th { vertical-align: middle; } 22 | 23 | /* Remove possible quote marks (") from ,
. */ 24 | blockquote:before, blockquote:after, q:before, q:after { content: ""; } 25 | blockquote, q { quotes: "" ""; } 26 | 27 | /* Remove annoying border on linked images. */ 28 | a img { border: none; } 29 | 30 | -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_03/CSS/ie8.css: -------------------------------------------------------------------------------- 1 | div.last~div[class*='g']{position:absolute;right:0;top:0;width:14%;max-width:226px;} 2 | div.last~div[class*='g']>div[class*='g']{display:block;float:none;width:100%;} 3 | div.last~div[class*='g']>div[class*='ml']{margin-left:0;} -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_03/CSS/responsive.css: -------------------------------------------------------------------------------- 1 | /* 2 | Document : responsive 3 | Created on : Jan 3, 2013, 12:03:52 AM 4 | Author : benjaminlagrone 5 | Description: 6 | Purpose of the stylesheet follows. 7 | */ 8 | 9 | img.resp{width:100%; height:auto;} 10 | 11 | 12 | @media screen and (max-width:600px){ 13 | div[class*='g']{width:96%;} 14 | div[class*='ml']{margin-left:0;} 15 | } 16 | @media screen and (min-width:601px) and (max-width:1024px){ 17 | div.last~div[class*='g']{width:100%;} 18 | div[class*='g']{width:48%;} 19 | div[class*='g'].wide{width:90%;} 20 | div[class*='ml']{margin-left:0;} 21 | } 22 | @media screen and (min-width:1280px){ 23 | div.last~div[class*='g']{position:absolute;right:0;top:0;width:14%;max-width:226px;} 24 | div.last~div[class*='g']>div[class*='g']{display:block;float:none;width:100%;} 25 | div.last~div[class*='g']>div[class*='ml']{margin-left:0;} 26 | } 27 | div[class*='g']{ 28 | transition: width 0.1s; 29 | -moz-transition: width 0.1s; /* Firefox 4 */ 30 | -webkit-transition: width 0.1s; /* Safari and Chrome */ 31 | -o-transition: width 0.1s; /* Opera */ 32 | } -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_03/images/150.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_03/images/150.jpg -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_03/images/150X112.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_03/images/150X112.gif -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_03/images/150X84.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_03/images/150X84.gif -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_03/images/151.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_03/images/151.jpg -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_03/images/152.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_03/images/152.jpg -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_03/images/310X174.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_03/images/310X174.gif -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_03/images/310X232.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_03/images/310X232.gif -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_03/images/350.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_03/images/350.jpg -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_03/images/470.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_03/images/470.jpg -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_03/images/470X352.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_03/images/470X352.gif -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_03/images/470x264.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_03/images/470x264.gif -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_03/images/800.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_03/images/800.jpg -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_03/images/ISS1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_03/images/ISS1.jpg -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_03/images/Paul_CC▌ºzanne_169.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_03/images/Paul_CC▌ºzanne_169.jpg -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_03/images/bg.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_03/images/bg.gif -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_03/images/callcenter.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_03/images/callcenter.jpg -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_03/images/motogp.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_03/images/motogp.jpg -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_03/images/obama.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_03/images/obama.jpg -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_03/images/parket.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_03/images/parket.jpg -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_03/images/pattern.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_03/images/pattern.gif -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_03/images/robot-wide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_03/images/robot-wide.png -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_04/css/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_04/css/.DS_Store -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_04/css/import12.css: -------------------------------------------------------------------------------- 1 | @import url('gumby.12col.css'); 2 | @import url('ui.css'); 3 | @import url('style.css'); 4 | @import url('text.css'); -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_04/css/import16.css: -------------------------------------------------------------------------------- 1 | @import url('gumby.16col.css'); 2 | @import url('ui.css'); 3 | @import url('style.css'); 4 | @import url('text.css'); -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_04/css/imports.css: -------------------------------------------------------------------------------- 1 | @import url('gumby.hybrid.css'); 2 | @import url('ui.css'); 3 | @import url('style.css'); 4 | @import url('text.css'); -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_04/css/style.css: -------------------------------------------------------------------------------- 1 | /*======================================================================= 2 | 3 | ❤❤❤ Gumby by Digital Surgeons. ❤❤❤ 4 | 5 | *** This is where you should keep all of your design specific styles *** 6 | 7 | ========================================================================*/ 8 | 9 | 10 | -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_04/css/text.css: -------------------------------------------------------------------------------- 1 | /*======================================================================= 2 | 3 | ❤❤❤ Gumby by Digital Surgeons. ❤❤❤ 4 | 5 | *** This is where you should keep all of your TEXT styles *** 6 | 7 | ========================================================================*/ 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | /* ==|== media queries ====================================================== 37 | PLACEHOLDER Media Queries for Responsive Design. 38 | These override the primary ('mobile first') styles 39 | Modify as content requires. 40 | ========================================================================== */ 41 | 42 | @media only screen and (min-width: 480px) { 43 | /* Style adjustments for viewports 480px and over go here */ 44 | 45 | } 46 | 47 | @media only screen and (min-width: 768px) { 48 | /* Style adjustments for viewports 768px and over go here */ 49 | 50 | } -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_04/img/icon_drawertoggle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_04/img/icon_drawertoggle.png -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_04/img/icon_nav_toggle.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_04/img/icon_nav_toggle.gif -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_04/img/icon_sample.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_04/img/icon_sample.png -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_04/img/img1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_04/img/img1.jpg -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_04/img/img2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_04/img/img2.jpg -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_04/img/img_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_04/img/img_logo.png -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_04/img/sprite_checkradio.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_04/img/sprite_checkradio.gif -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_04/js/main.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | 3 | }); -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_04/js/plugins.js: -------------------------------------------------------------------------------- 1 | window.log=function(){log.history=log.history||[];log.history.push(arguments);if(this.console){arguments.callee=arguments.callee.caller;var a=[].slice.call(arguments);(typeof console.log==="object"?log.apply.call(console.log,console,a):console.log.apply(console,a))}}; 2 | (function(b){function c(){}for(var d="assert,count,debug,dir,dirxml,error,exception,group,groupCollapsed,groupEnd,info,log,timeStamp,profile,profileEnd,time,timeEnd,trace,warn".split(","),a;a=d.pop();){b[a]=b[a]||c}})((function(){try 3 | {console.log();return window.console;}catch(err){return window.console={};}})()); 4 | 5 | // place any jQuery/helper plugins in here, instead of separate, slower script files. 6 | -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_05/5442OT_04_index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Bootstrap 101 Template 5 | 6 | 7 | 8 | 9 | 10 |

Hello, world!

11 |
12 |
13 |
1
14 |
1
15 |
1
16 |
1
17 |
1
18 |
1
19 |
1
20 |
1
21 |
1
22 |
23 |
24 |
2
25 |
3
26 |
4
27 |
28 |
29 |
4
30 |
5
31 |
32 |
33 |
9
34 |
35 |
36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_05/css/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_05/css/.DS_Store -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_05/img/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_05/img/.DS_Store -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_05/img/glyphicons-halflings-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_05/img/glyphicons-halflings-white.png -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_05/img/glyphicons-halflings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_05/img/glyphicons-halflings.png -------------------------------------------------------------------------------- /Module 3/Chapter04/5442OT_04_05/js/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/HTML5-and-CSS3-Building-Responsive-Websites/875cde05ba75926e2d63daff87e1b9b228deb8c1/Module 3/Chapter04/5442OT_04_05/js/.DS_Store -------------------------------------------------------------------------------- /Module 3/Chapter05/addint-tags-for-jquery-mobile.html: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | Adding Tags for jquery mobile 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 |
19 |

Adding Tags for jQuery Mobile

20 |
21 | 22 |
23 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc egestas, elit ac pulvinar molestie, metus ligula bibendum augue, vulputate interdum risus nulla in quam. In consequat mi at risus faucibus vel iaculis mi tincidunt. Nullam diam odio, fermentum non blandit et, pretium at mi. Nam volutpat risus sem, eget hendrerit eros. Morbi eget eros in eros egestas mollis et sit amet diam. Quisque dui erat, convallis ac tempus eget, scelerisque vitae nunc. Donec mattis nisi urna, non interdum diam. 24 | 25 |

26 |
27 | 28 |
29 |

The Footer

30 |
31 |
32 | 33 | 34 | -------------------------------------------------------------------------------- /Module 3/Chapter05/mobile-only-css.html: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | Adding a mobile stylesheet for mobile browsers only using the Media Query 9 | 10 | 11 | 14 | 15 | 16 | 17 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

18 |

Nulla ante tortor, rutrum eu sollicitudin eget, vehicula quis sem. Nullam cursus placerat luctus.

19 | 20 | 21 | -------------------------------------------------------------------------------- /Module 3/Chapter05/mobile.css: -------------------------------------------------------------------------------- 1 | /* 2 | Document : mobile 3 | Created on : Jan 31, 2013, 12:42:31 AM 4 | Author : benjaminlagrone 5 | Description: 6 | Purpose of the stylesheet follows. 7 | */ 8 | 9 | 10 | p.b{font-size:2rem} 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | # HTML5 and CSS3 Building Responsive Websites 5 | This is the code repository for HTML5 and CSS3: Building Responsive Websites, published by Packt. It contains all the necessary code files. 6 | 7 | ##What You Will Learn 8 | 9 | * Build a semantic website structure with HTML5 elements 10 | * Use Bower to organize website dependencies 11 | * Make responsive media that is optimized for the specific device on which it’s displayed, allowing images, videos, and other elements be fully appreciated 12 | * Make typography that’s fluidly responsive, so it’s easy to read on all devices—no more hard-to-see text on a tiny mobile screen 13 | * Get to know techniques for server-side and client-side media deployment, providing platforms that are scaled for any device that requests them 14 | 15 | 16 | ###Note 17 | Modules 1, 2, and 3 have code arranged by chapter (for the chapters that have code). [Click here](https://docs.google.com/forms/d/e/1FAIpQLSe5qwunkGf6PUvzPirPDtuy1Du5Rlzew23UBp2S-P3wB-GcwQ/viewform) if you have any feedback or suggestions.. 18 | ### Download a free PDF 19 | 20 | If you have already purchased a print or Kindle version of this book, you can get a DRM-free PDF version at no cost.
Simply click on the link to claim your free PDF. 21 |

https://packt.link/free-ebook/9781787124813

--------------------------------------------------------------------------------