├── css_4e ├── 10 │ ├── ne.png │ ├── banner.html │ └── styles.css ├── 11 │ ├── table │ │ ├── images │ │ │ ├── star.png │ │ │ └── underline.png │ │ └── css │ │ │ └── main.css │ └── form │ │ ├── global.css │ │ └── form.html ├── 13 │ ├── sidebar2.txt │ ├── sidebar1.txt │ ├── index.html │ ├── main.txt │ └── styles.css ├── 14 │ ├── images │ │ ├── hat.png │ │ ├── file0001117960982.jpg │ │ ├── file0001425538258.jpg │ │ ├── file0001728857809.jpg │ │ ├── file0001757413591.jpg │ │ ├── file00030009680.jpg │ │ ├── file000308999292.jpg │ │ ├── file000330568599.jpg │ │ ├── file000550955311.jpg │ │ ├── file000705145690.jpg │ │ ├── file00079963469.jpg │ │ └── file8341308807137.jpg │ └── fonts │ │ ├── TitilliumText22L001-webfont.eot │ │ ├── TitilliumText22L001-webfont.ttf │ │ ├── TitilliumText22L001-webfont.woff │ │ ├── TitilliumText22L002-webfont.eot │ │ ├── TitilliumText22L002-webfont.ttf │ │ ├── TitilliumText22L002-webfont.woff │ │ ├── TitilliumText22L003-webfont.eot │ │ ├── TitilliumText22L003-webfont.ttf │ │ ├── TitilliumText22L003-webfont.woff │ │ ├── TitilliumText22L004-webfont.eot │ │ ├── TitilliumText22L004-webfont.ttf │ │ ├── TitilliumText22L004-webfont.woff │ │ ├── TitilliumText22L005-webfont.eot │ │ ├── TitilliumText22L005-webfont.ttf │ │ ├── TitilliumText22L005-webfont.woff │ │ ├── TitilliumText22L006-webfont.eot │ │ ├── TitilliumText22L006-webfont.ttf │ │ ├── TitilliumText22L006-webfont.woff │ │ └── stylesheet.css ├── 15 │ ├── imgs │ │ ├── mule.jpg │ │ ├── clouds.jpg │ │ ├── gator.jpg │ │ └── jellyfish.jpg │ ├── desktop_first.css │ └── mobile_first.css ├── 16 │ ├── imgs │ │ └── header.jpg │ ├── 01-nav.html │ ├── 02-action.html │ ├── index.html │ ├── 04-footer.html │ ├── css │ │ └── custom.css │ └── 03-info.html ├── 17 │ ├── flexbox-layout │ │ ├── css │ │ │ └── custom.css │ │ ├── imgs │ │ │ └── header.jpg │ │ └── index.html │ └── nav-bar │ │ ├── nav-bar.html │ │ └── imgs │ │ └── home.svg ├── 18 │ └── reset.css ├── 10_finished │ ├── ne.png │ └── banner.html ├── 02 │ ├── images │ │ ├── bg_page.png │ │ ├── tractor.png │ │ └── head-icon.png │ ├── another_page.html │ └── index.html ├── 03 │ └── images │ │ ├── banner.png │ │ └── bg_page.png ├── 05 │ ├── images │ │ ├── bg_body.png │ │ └── bullet_flower.png │ ├── reset.css │ └── styles.css ├── 06 │ ├── images │ │ ├── bg_body.png │ │ └── bg_banner.jpg │ ├── css │ │ ├── fonts │ │ │ ├── PTSansBold.woff │ │ │ ├── PTSansBold.woff2 │ │ │ ├── PTSansItalic.woff │ │ │ ├── PTSansItalic.woff2 │ │ │ ├── PTSansRegular.woff │ │ │ ├── PTSansRegular.woff2 │ │ │ ├── PTSansBoldItalic.woff │ │ │ └── PTSansBoldItalic.woff2 │ │ ├── at-font-face.css │ │ └── styles.css │ └── text.html ├── 07 │ ├── images │ │ ├── banner.png │ │ └── bg_page.png │ ├── main.css │ └── index.html ├── 08 │ ├── images │ │ ├── carpet.jpg │ │ ├── grass.jpg │ │ ├── leaves.jpg │ │ ├── pattern.jpg │ │ ├── trowel.jpg │ │ ├── bluegrass.jpg │ │ └── dandelion.jpg │ ├── 03_bg_ex │ │ ├── images │ │ │ ├── bg_main.jpg │ │ │ ├── bg_page.png │ │ │ ├── bullet.png │ │ │ ├── scroll_top.jpg │ │ │ ├── underline.png │ │ │ ├── scroll_bottom.jpg │ │ │ └── scroll_middle.jpg │ │ ├── styles.css │ │ └── bg_images.html │ ├── 01_image_ex │ │ ├── styles.css │ │ └── image.html │ └── 02_gallery_ex │ │ ├── gallery.html │ │ └── styles.css ├── 09 │ ├── links │ │ ├── images │ │ │ ├── zip.png │ │ │ ├── check.gif │ │ │ ├── email.gif │ │ │ ├── globe.png │ │ │ ├── word.png │ │ │ ├── acrobat.png │ │ │ ├── bg_body.png │ │ │ └── bg_banner.jpg │ │ ├── test.html │ │ ├── test2.html │ │ ├── test3.html │ │ ├── links.html │ │ └── main.css │ └── nav_bar │ │ ├── images │ │ ├── home.png │ │ └── nav.png │ │ └── nav_bar.html ├── 14_finished │ ├── images │ │ ├── hat.png │ │ ├── file00030009680.jpg │ │ ├── file00079963469.jpg │ │ ├── file0001117960982.jpg │ │ ├── file0001425538258.jpg │ │ ├── file0001728857809.jpg │ │ ├── file0001757413591.jpg │ │ ├── file000308999292.jpg │ │ ├── file000330568599.jpg │ │ ├── file000550955311.jpg │ │ ├── file000705145690.jpg │ │ └── file8341308807137.jpg │ └── fonts │ │ ├── TitilliumText22L001-webfont.eot │ │ ├── TitilliumText22L001-webfont.ttf │ │ ├── TitilliumText22L001-webfont.woff │ │ ├── TitilliumText22L002-webfont.eot │ │ ├── TitilliumText22L002-webfont.ttf │ │ ├── TitilliumText22L002-webfont.woff │ │ ├── TitilliumText22L003-webfont.eot │ │ ├── TitilliumText22L003-webfont.ttf │ │ ├── TitilliumText22L003-webfont.woff │ │ ├── TitilliumText22L004-webfont.eot │ │ ├── TitilliumText22L004-webfont.ttf │ │ ├── TitilliumText22L004-webfont.woff │ │ ├── TitilliumText22L005-webfont.eot │ │ ├── TitilliumText22L005-webfont.ttf │ │ ├── TitilliumText22L005-webfont.woff │ │ ├── TitilliumText22L006-webfont.eot │ │ ├── TitilliumText22L006-webfont.ttf │ │ ├── TitilliumText22L006-webfont.woff │ │ └── stylesheet.css ├── 15_finished │ └── imgs │ │ ├── gator.jpg │ │ ├── mule.jpg │ │ ├── clouds.jpg │ │ └── jellyfish.jpg ├── 08_finished │ ├── images │ │ ├── grass.jpg │ │ ├── carpet.jpg │ │ ├── leaves.jpg │ │ ├── pattern.jpg │ │ ├── trowel.jpg │ │ ├── bluegrass.jpg │ │ └── dandelion.jpg │ ├── 03_bg_ex │ │ ├── images │ │ │ ├── bullet.png │ │ │ ├── bg_main.jpg │ │ │ ├── bg_page.png │ │ │ ├── underline.png │ │ │ ├── scroll_top.jpg │ │ │ ├── scroll_bottom.jpg │ │ │ └── scroll_middle.jpg │ │ └── bg_images.html │ ├── 02_gallery_ex │ │ ├── gallery.html │ │ └── styles.css │ └── 01_image_ex │ │ ├── image.html │ │ └── styles.css ├── 16_finished │ ├── imgs │ │ └── header.jpg │ └── css │ │ └── custom.css ├── 02_finished │ ├── images │ │ ├── bg_page.png │ │ ├── tractor.png │ │ └── head-icon.png │ ├── styles.css │ └── another_page.html ├── 03_finished │ └── images │ │ ├── banner.png │ │ └── bg_page.png ├── 05_finished │ ├── images │ │ ├── bg_body.png │ │ └── bullet_flower.png │ ├── reset.css │ └── styles.css ├── 06_finished │ ├── images │ │ ├── bg_body.png │ │ └── bg_banner.jpg │ ├── css │ │ ├── fonts │ │ │ ├── PTSansBold.woff │ │ │ ├── PTSansBold.woff2 │ │ │ ├── PTSansItalic.woff │ │ │ ├── PTSansItalic.woff2 │ │ │ ├── PTSansRegular.woff │ │ │ ├── PTSansRegular.woff2 │ │ │ ├── PTSansBoldItalic.woff │ │ │ └── PTSansBoldItalic.woff2 │ │ └── at-font-face.css │ └── text.html ├── 07_finished │ ├── images │ │ ├── banner.png │ │ └── bg_page.png │ ├── main.css │ └── index.html ├── 09_finished │ ├── links │ │ ├── images │ │ │ ├── word.png │ │ │ ├── zip.png │ │ │ ├── acrobat.png │ │ │ ├── bg_body.png │ │ │ ├── check.gif │ │ │ ├── email.gif │ │ │ ├── globe.png │ │ │ └── bg_banner.jpg │ │ ├── test.html │ │ ├── test2.html │ │ ├── test3.html │ │ └── main.css │ └── nav_bar │ │ ├── images │ │ ├── home.png │ │ └── nav.png │ │ ├── nav_bar.html │ │ ├── nav_bar_vertical.html │ │ └── nav_bar_horizontal.html ├── 11_finished │ ├── table │ │ ├── images │ │ │ ├── star.png │ │ │ └── underline.png │ │ └── css │ │ │ └── main.css │ └── form │ │ ├── form.html │ │ └── global.css ├── 16_fancier_design │ ├── imgs │ │ └── header.jpg │ └── css │ │ └── custom.css ├── 17_finished │ ├── flexbox-layout │ │ ├── imgs │ │ │ └── header.jpg │ │ └── css │ │ │ └── custom.css │ ├── gallery │ │ ├── imgs │ │ │ ├── photo-1422189668989-08f214d6e419.jpg │ │ │ ├── photo-1427806208781-b36531cb09ef.jpg │ │ │ ├── photo-1428342109953-409d2876cdab.jpg │ │ │ ├── photo-1428342319217-5fdaf6d7898e.jpg │ │ │ ├── photo-1428836962997-9533e673a68f.jpg │ │ │ ├── photo-1428908684367-2fe456a630bb.jpg │ │ │ ├── photo-1428908728789-d2de25dbd4e2.jpg │ │ │ └── photo-1429043794791-eb8f26f44081.jpg │ │ ├── styles.css │ │ └── index.html │ ├── nav-bar-responsive │ │ ├── nav-bar.html │ │ ├── imgs │ │ │ └── home.svg │ │ └── nav-styles.css │ ├── nav-bar │ │ ├── nav-bar.html │ │ └── imgs │ │ │ └── home.svg │ ├── flexbox-centering │ │ └── index.html │ └── demo │ │ ├── basic.html │ │ ├── flex-basis.html │ │ ├── flex-math.html │ │ ├── flex-order.html │ │ ├── flex-property.html │ │ ├── flex-wrap-order-test.html │ │ ├── flex-wrap-test.html │ │ ├── css │ │ └── styles.css │ │ ├── flex-basis-demos.html │ │ ├── align-self.html │ │ └── basic-wrap.html ├── 13_finished │ └── main.txt ├── 04 │ └── inheritance.html └── 04_finished │ └── inheritance.html ├── README.md ├── .gitattributes └── .gitignore /css_4e/17/flexbox-layout/css/custom.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ##Большая книга CSS, 4-е издание 2 | Файлы примеров к книге. -------------------------------------------------------------------------------- /css_4e/10/ne.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/10/ne.png -------------------------------------------------------------------------------- /css_4e/13/sidebar2.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/13/sidebar2.txt -------------------------------------------------------------------------------- /css_4e/15/imgs/mule.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/15/imgs/mule.jpg -------------------------------------------------------------------------------- /css_4e/10_finished/ne.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/10_finished/ne.png -------------------------------------------------------------------------------- /css_4e/14/images/hat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14/images/hat.png -------------------------------------------------------------------------------- /css_4e/15/imgs/clouds.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/15/imgs/clouds.jpg -------------------------------------------------------------------------------- /css_4e/15/imgs/gator.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/15/imgs/gator.jpg -------------------------------------------------------------------------------- /css_4e/16/imgs/header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/16/imgs/header.jpg -------------------------------------------------------------------------------- /css_4e/02/images/bg_page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/02/images/bg_page.png -------------------------------------------------------------------------------- /css_4e/02/images/tractor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/02/images/tractor.png -------------------------------------------------------------------------------- /css_4e/03/images/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/03/images/banner.png -------------------------------------------------------------------------------- /css_4e/03/images/bg_page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/03/images/bg_page.png -------------------------------------------------------------------------------- /css_4e/05/images/bg_body.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/05/images/bg_body.png -------------------------------------------------------------------------------- /css_4e/06/images/bg_body.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/06/images/bg_body.png -------------------------------------------------------------------------------- /css_4e/07/images/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/07/images/banner.png -------------------------------------------------------------------------------- /css_4e/07/images/bg_page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/07/images/bg_page.png -------------------------------------------------------------------------------- /css_4e/08/images/carpet.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/08/images/carpet.jpg -------------------------------------------------------------------------------- /css_4e/08/images/grass.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/08/images/grass.jpg -------------------------------------------------------------------------------- /css_4e/08/images/leaves.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/08/images/leaves.jpg -------------------------------------------------------------------------------- /css_4e/08/images/pattern.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/08/images/pattern.jpg -------------------------------------------------------------------------------- /css_4e/08/images/trowel.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/08/images/trowel.jpg -------------------------------------------------------------------------------- /css_4e/15/imgs/jellyfish.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/15/imgs/jellyfish.jpg -------------------------------------------------------------------------------- /css_4e/02/images/head-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/02/images/head-icon.png -------------------------------------------------------------------------------- /css_4e/06/images/bg_banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/06/images/bg_banner.jpg -------------------------------------------------------------------------------- /css_4e/08/images/bluegrass.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/08/images/bluegrass.jpg -------------------------------------------------------------------------------- /css_4e/08/images/dandelion.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/08/images/dandelion.jpg -------------------------------------------------------------------------------- /css_4e/09/links/images/zip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/09/links/images/zip.png -------------------------------------------------------------------------------- /css_4e/09/links/images/check.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/09/links/images/check.gif -------------------------------------------------------------------------------- /css_4e/09/links/images/email.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/09/links/images/email.gif -------------------------------------------------------------------------------- /css_4e/09/links/images/globe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/09/links/images/globe.png -------------------------------------------------------------------------------- /css_4e/09/links/images/word.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/09/links/images/word.png -------------------------------------------------------------------------------- /css_4e/09/nav_bar/images/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/09/nav_bar/images/home.png -------------------------------------------------------------------------------- /css_4e/09/nav_bar/images/nav.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/09/nav_bar/images/nav.png -------------------------------------------------------------------------------- /css_4e/11/table/images/star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/11/table/images/star.png -------------------------------------------------------------------------------- /css_4e/14_finished/images/hat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14_finished/images/hat.png -------------------------------------------------------------------------------- /css_4e/15_finished/imgs/gator.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/15_finished/imgs/gator.jpg -------------------------------------------------------------------------------- /css_4e/15_finished/imgs/mule.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/15_finished/imgs/mule.jpg -------------------------------------------------------------------------------- /css_4e/05/images/bullet_flower.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/05/images/bullet_flower.png -------------------------------------------------------------------------------- /css_4e/06/css/fonts/PTSansBold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/06/css/fonts/PTSansBold.woff -------------------------------------------------------------------------------- /css_4e/08_finished/images/grass.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/08_finished/images/grass.jpg -------------------------------------------------------------------------------- /css_4e/09/links/images/acrobat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/09/links/images/acrobat.png -------------------------------------------------------------------------------- /css_4e/09/links/images/bg_body.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/09/links/images/bg_body.png -------------------------------------------------------------------------------- /css_4e/15_finished/imgs/clouds.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/15_finished/imgs/clouds.jpg -------------------------------------------------------------------------------- /css_4e/16_finished/imgs/header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/16_finished/imgs/header.jpg -------------------------------------------------------------------------------- /css_4e/02_finished/images/bg_page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/02_finished/images/bg_page.png -------------------------------------------------------------------------------- /css_4e/02_finished/images/tractor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/02_finished/images/tractor.png -------------------------------------------------------------------------------- /css_4e/03_finished/images/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/03_finished/images/banner.png -------------------------------------------------------------------------------- /css_4e/03_finished/images/bg_page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/03_finished/images/bg_page.png -------------------------------------------------------------------------------- /css_4e/05_finished/images/bg_body.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/05_finished/images/bg_body.png -------------------------------------------------------------------------------- /css_4e/06/css/fonts/PTSansBold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/06/css/fonts/PTSansBold.woff2 -------------------------------------------------------------------------------- /css_4e/06/css/fonts/PTSansItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/06/css/fonts/PTSansItalic.woff -------------------------------------------------------------------------------- /css_4e/06/css/fonts/PTSansItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/06/css/fonts/PTSansItalic.woff2 -------------------------------------------------------------------------------- /css_4e/06/css/fonts/PTSansRegular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/06/css/fonts/PTSansRegular.woff -------------------------------------------------------------------------------- /css_4e/06_finished/images/bg_body.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/06_finished/images/bg_body.png -------------------------------------------------------------------------------- /css_4e/07_finished/images/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/07_finished/images/banner.png -------------------------------------------------------------------------------- /css_4e/07_finished/images/bg_page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/07_finished/images/bg_page.png -------------------------------------------------------------------------------- /css_4e/08/03_bg_ex/images/bg_main.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/08/03_bg_ex/images/bg_main.jpg -------------------------------------------------------------------------------- /css_4e/08/03_bg_ex/images/bg_page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/08/03_bg_ex/images/bg_page.png -------------------------------------------------------------------------------- /css_4e/08/03_bg_ex/images/bullet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/08/03_bg_ex/images/bullet.png -------------------------------------------------------------------------------- /css_4e/08_finished/images/carpet.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/08_finished/images/carpet.jpg -------------------------------------------------------------------------------- /css_4e/08_finished/images/leaves.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/08_finished/images/leaves.jpg -------------------------------------------------------------------------------- /css_4e/08_finished/images/pattern.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/08_finished/images/pattern.jpg -------------------------------------------------------------------------------- /css_4e/08_finished/images/trowel.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/08_finished/images/trowel.jpg -------------------------------------------------------------------------------- /css_4e/09/links/images/bg_banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/09/links/images/bg_banner.jpg -------------------------------------------------------------------------------- /css_4e/11/table/images/underline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/11/table/images/underline.png -------------------------------------------------------------------------------- /css_4e/14/images/file0001117960982.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14/images/file0001117960982.jpg -------------------------------------------------------------------------------- /css_4e/14/images/file0001425538258.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14/images/file0001425538258.jpg -------------------------------------------------------------------------------- /css_4e/14/images/file0001728857809.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14/images/file0001728857809.jpg -------------------------------------------------------------------------------- /css_4e/14/images/file0001757413591.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14/images/file0001757413591.jpg -------------------------------------------------------------------------------- /css_4e/14/images/file00030009680.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14/images/file00030009680.jpg -------------------------------------------------------------------------------- /css_4e/14/images/file000308999292.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14/images/file000308999292.jpg -------------------------------------------------------------------------------- /css_4e/14/images/file000330568599.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14/images/file000330568599.jpg -------------------------------------------------------------------------------- /css_4e/14/images/file000550955311.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14/images/file000550955311.jpg -------------------------------------------------------------------------------- /css_4e/14/images/file000705145690.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14/images/file000705145690.jpg -------------------------------------------------------------------------------- /css_4e/14/images/file00079963469.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14/images/file00079963469.jpg -------------------------------------------------------------------------------- /css_4e/14/images/file8341308807137.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14/images/file8341308807137.jpg -------------------------------------------------------------------------------- /css_4e/15_finished/imgs/jellyfish.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/15_finished/imgs/jellyfish.jpg -------------------------------------------------------------------------------- /css_4e/16/01-nav.html: -------------------------------------------------------------------------------- 1 | Главная 2 | Клиенты 3 | О нас 4 | Вакансии -------------------------------------------------------------------------------- /css_4e/02_finished/images/head-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/02_finished/images/head-icon.png -------------------------------------------------------------------------------- /css_4e/06/css/fonts/PTSansRegular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/06/css/fonts/PTSansRegular.woff2 -------------------------------------------------------------------------------- /css_4e/06_finished/images/bg_banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/06_finished/images/bg_banner.jpg -------------------------------------------------------------------------------- /css_4e/08/03_bg_ex/images/scroll_top.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/08/03_bg_ex/images/scroll_top.jpg -------------------------------------------------------------------------------- /css_4e/08/03_bg_ex/images/underline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/08/03_bg_ex/images/underline.png -------------------------------------------------------------------------------- /css_4e/08_finished/images/bluegrass.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/08_finished/images/bluegrass.jpg -------------------------------------------------------------------------------- /css_4e/08_finished/images/dandelion.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/08_finished/images/dandelion.jpg -------------------------------------------------------------------------------- /css_4e/09_finished/links/images/word.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/09_finished/links/images/word.png -------------------------------------------------------------------------------- /css_4e/09_finished/links/images/zip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/09_finished/links/images/zip.png -------------------------------------------------------------------------------- /css_4e/11_finished/table/images/star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/11_finished/table/images/star.png -------------------------------------------------------------------------------- /css_4e/16_fancier_design/imgs/header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/16_fancier_design/imgs/header.jpg -------------------------------------------------------------------------------- /css_4e/17/flexbox-layout/imgs/header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/17/flexbox-layout/imgs/header.jpg -------------------------------------------------------------------------------- /css_4e/05_finished/images/bullet_flower.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/05_finished/images/bullet_flower.png -------------------------------------------------------------------------------- /css_4e/06/css/fonts/PTSansBoldItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/06/css/fonts/PTSansBoldItalic.woff -------------------------------------------------------------------------------- /css_4e/06/css/fonts/PTSansBoldItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/06/css/fonts/PTSansBoldItalic.woff2 -------------------------------------------------------------------------------- /css_4e/08/03_bg_ex/images/scroll_bottom.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/08/03_bg_ex/images/scroll_bottom.jpg -------------------------------------------------------------------------------- /css_4e/08/03_bg_ex/images/scroll_middle.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/08/03_bg_ex/images/scroll_middle.jpg -------------------------------------------------------------------------------- /css_4e/09_finished/links/images/acrobat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/09_finished/links/images/acrobat.png -------------------------------------------------------------------------------- /css_4e/09_finished/links/images/bg_body.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/09_finished/links/images/bg_body.png -------------------------------------------------------------------------------- /css_4e/09_finished/links/images/check.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/09_finished/links/images/check.gif -------------------------------------------------------------------------------- /css_4e/09_finished/links/images/email.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/09_finished/links/images/email.gif -------------------------------------------------------------------------------- /css_4e/09_finished/links/images/globe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/09_finished/links/images/globe.png -------------------------------------------------------------------------------- /css_4e/09_finished/nav_bar/images/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/09_finished/nav_bar/images/home.png -------------------------------------------------------------------------------- /css_4e/09_finished/nav_bar/images/nav.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/09_finished/nav_bar/images/nav.png -------------------------------------------------------------------------------- /css_4e/06_finished/css/fonts/PTSansBold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/06_finished/css/fonts/PTSansBold.woff -------------------------------------------------------------------------------- /css_4e/06_finished/css/fonts/PTSansBold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/06_finished/css/fonts/PTSansBold.woff2 -------------------------------------------------------------------------------- /css_4e/08_finished/03_bg_ex/images/bullet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/08_finished/03_bg_ex/images/bullet.png -------------------------------------------------------------------------------- /css_4e/09_finished/links/images/bg_banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/09_finished/links/images/bg_banner.jpg -------------------------------------------------------------------------------- /css_4e/11_finished/table/images/underline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/11_finished/table/images/underline.png -------------------------------------------------------------------------------- /css_4e/14_finished/images/file00030009680.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14_finished/images/file00030009680.jpg -------------------------------------------------------------------------------- /css_4e/14_finished/images/file00079963469.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14_finished/images/file00079963469.jpg -------------------------------------------------------------------------------- /css_4e/06_finished/css/fonts/PTSansItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/06_finished/css/fonts/PTSansItalic.woff -------------------------------------------------------------------------------- /css_4e/06_finished/css/fonts/PTSansItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/06_finished/css/fonts/PTSansItalic.woff2 -------------------------------------------------------------------------------- /css_4e/06_finished/css/fonts/PTSansRegular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/06_finished/css/fonts/PTSansRegular.woff -------------------------------------------------------------------------------- /css_4e/06_finished/css/fonts/PTSansRegular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/06_finished/css/fonts/PTSansRegular.woff2 -------------------------------------------------------------------------------- /css_4e/08_finished/03_bg_ex/images/bg_main.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/08_finished/03_bg_ex/images/bg_main.jpg -------------------------------------------------------------------------------- /css_4e/08_finished/03_bg_ex/images/bg_page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/08_finished/03_bg_ex/images/bg_page.png -------------------------------------------------------------------------------- /css_4e/08_finished/03_bg_ex/images/underline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/08_finished/03_bg_ex/images/underline.png -------------------------------------------------------------------------------- /css_4e/14/fonts/TitilliumText22L001-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14/fonts/TitilliumText22L001-webfont.eot -------------------------------------------------------------------------------- /css_4e/14/fonts/TitilliumText22L001-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14/fonts/TitilliumText22L001-webfont.ttf -------------------------------------------------------------------------------- /css_4e/14/fonts/TitilliumText22L001-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14/fonts/TitilliumText22L001-webfont.woff -------------------------------------------------------------------------------- /css_4e/14/fonts/TitilliumText22L002-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14/fonts/TitilliumText22L002-webfont.eot -------------------------------------------------------------------------------- /css_4e/14/fonts/TitilliumText22L002-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14/fonts/TitilliumText22L002-webfont.ttf -------------------------------------------------------------------------------- /css_4e/14/fonts/TitilliumText22L002-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14/fonts/TitilliumText22L002-webfont.woff -------------------------------------------------------------------------------- /css_4e/14/fonts/TitilliumText22L003-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14/fonts/TitilliumText22L003-webfont.eot -------------------------------------------------------------------------------- /css_4e/14/fonts/TitilliumText22L003-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14/fonts/TitilliumText22L003-webfont.ttf -------------------------------------------------------------------------------- /css_4e/14/fonts/TitilliumText22L003-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14/fonts/TitilliumText22L003-webfont.woff -------------------------------------------------------------------------------- /css_4e/14/fonts/TitilliumText22L004-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14/fonts/TitilliumText22L004-webfont.eot -------------------------------------------------------------------------------- /css_4e/14/fonts/TitilliumText22L004-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14/fonts/TitilliumText22L004-webfont.ttf -------------------------------------------------------------------------------- /css_4e/14/fonts/TitilliumText22L004-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14/fonts/TitilliumText22L004-webfont.woff -------------------------------------------------------------------------------- /css_4e/14/fonts/TitilliumText22L005-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14/fonts/TitilliumText22L005-webfont.eot -------------------------------------------------------------------------------- /css_4e/14/fonts/TitilliumText22L005-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14/fonts/TitilliumText22L005-webfont.ttf -------------------------------------------------------------------------------- /css_4e/14/fonts/TitilliumText22L005-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14/fonts/TitilliumText22L005-webfont.woff -------------------------------------------------------------------------------- /css_4e/14/fonts/TitilliumText22L006-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14/fonts/TitilliumText22L006-webfont.eot -------------------------------------------------------------------------------- /css_4e/14/fonts/TitilliumText22L006-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14/fonts/TitilliumText22L006-webfont.ttf -------------------------------------------------------------------------------- /css_4e/14/fonts/TitilliumText22L006-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14/fonts/TitilliumText22L006-webfont.woff -------------------------------------------------------------------------------- /css_4e/14_finished/images/file0001117960982.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14_finished/images/file0001117960982.jpg -------------------------------------------------------------------------------- /css_4e/14_finished/images/file0001425538258.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14_finished/images/file0001425538258.jpg -------------------------------------------------------------------------------- /css_4e/14_finished/images/file0001728857809.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14_finished/images/file0001728857809.jpg -------------------------------------------------------------------------------- /css_4e/14_finished/images/file0001757413591.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14_finished/images/file0001757413591.jpg -------------------------------------------------------------------------------- /css_4e/14_finished/images/file000308999292.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14_finished/images/file000308999292.jpg -------------------------------------------------------------------------------- /css_4e/14_finished/images/file000330568599.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14_finished/images/file000330568599.jpg -------------------------------------------------------------------------------- /css_4e/14_finished/images/file000550955311.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14_finished/images/file000550955311.jpg -------------------------------------------------------------------------------- /css_4e/14_finished/images/file000705145690.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14_finished/images/file000705145690.jpg -------------------------------------------------------------------------------- /css_4e/14_finished/images/file8341308807137.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14_finished/images/file8341308807137.jpg -------------------------------------------------------------------------------- /css_4e/06_finished/css/fonts/PTSansBoldItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/06_finished/css/fonts/PTSansBoldItalic.woff -------------------------------------------------------------------------------- /css_4e/08_finished/03_bg_ex/images/scroll_top.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/08_finished/03_bg_ex/images/scroll_top.jpg -------------------------------------------------------------------------------- /css_4e/17_finished/flexbox-layout/imgs/header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/17_finished/flexbox-layout/imgs/header.jpg -------------------------------------------------------------------------------- /css_4e/06_finished/css/fonts/PTSansBoldItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/06_finished/css/fonts/PTSansBoldItalic.woff2 -------------------------------------------------------------------------------- /css_4e/08_finished/03_bg_ex/images/scroll_bottom.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/08_finished/03_bg_ex/images/scroll_bottom.jpg -------------------------------------------------------------------------------- /css_4e/08_finished/03_bg_ex/images/scroll_middle.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/08_finished/03_bg_ex/images/scroll_middle.jpg -------------------------------------------------------------------------------- /css_4e/16/02-action.html: -------------------------------------------------------------------------------- 1 |

Мы творим великие дела

2 |

Donec pulvinar ullamcorper metus

3 | Подробнее -------------------------------------------------------------------------------- /css_4e/14_finished/fonts/TitilliumText22L001-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14_finished/fonts/TitilliumText22L001-webfont.eot -------------------------------------------------------------------------------- /css_4e/14_finished/fonts/TitilliumText22L001-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14_finished/fonts/TitilliumText22L001-webfont.ttf -------------------------------------------------------------------------------- /css_4e/14_finished/fonts/TitilliumText22L001-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14_finished/fonts/TitilliumText22L001-webfont.woff -------------------------------------------------------------------------------- /css_4e/14_finished/fonts/TitilliumText22L002-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14_finished/fonts/TitilliumText22L002-webfont.eot -------------------------------------------------------------------------------- /css_4e/14_finished/fonts/TitilliumText22L002-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14_finished/fonts/TitilliumText22L002-webfont.ttf -------------------------------------------------------------------------------- /css_4e/14_finished/fonts/TitilliumText22L002-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14_finished/fonts/TitilliumText22L002-webfont.woff -------------------------------------------------------------------------------- /css_4e/14_finished/fonts/TitilliumText22L003-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14_finished/fonts/TitilliumText22L003-webfont.eot -------------------------------------------------------------------------------- /css_4e/14_finished/fonts/TitilliumText22L003-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14_finished/fonts/TitilliumText22L003-webfont.ttf -------------------------------------------------------------------------------- /css_4e/14_finished/fonts/TitilliumText22L003-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14_finished/fonts/TitilliumText22L003-webfont.woff -------------------------------------------------------------------------------- /css_4e/14_finished/fonts/TitilliumText22L004-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14_finished/fonts/TitilliumText22L004-webfont.eot -------------------------------------------------------------------------------- /css_4e/14_finished/fonts/TitilliumText22L004-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14_finished/fonts/TitilliumText22L004-webfont.ttf -------------------------------------------------------------------------------- /css_4e/14_finished/fonts/TitilliumText22L004-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14_finished/fonts/TitilliumText22L004-webfont.woff -------------------------------------------------------------------------------- /css_4e/14_finished/fonts/TitilliumText22L005-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14_finished/fonts/TitilliumText22L005-webfont.eot -------------------------------------------------------------------------------- /css_4e/14_finished/fonts/TitilliumText22L005-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14_finished/fonts/TitilliumText22L005-webfont.ttf -------------------------------------------------------------------------------- /css_4e/14_finished/fonts/TitilliumText22L005-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14_finished/fonts/TitilliumText22L005-webfont.woff -------------------------------------------------------------------------------- /css_4e/14_finished/fonts/TitilliumText22L006-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14_finished/fonts/TitilliumText22L006-webfont.eot -------------------------------------------------------------------------------- /css_4e/14_finished/fonts/TitilliumText22L006-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14_finished/fonts/TitilliumText22L006-webfont.ttf -------------------------------------------------------------------------------- /css_4e/14_finished/fonts/TitilliumText22L006-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/14_finished/fonts/TitilliumText22L006-webfont.woff -------------------------------------------------------------------------------- /css_4e/17_finished/gallery/imgs/photo-1422189668989-08f214d6e419.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/17_finished/gallery/imgs/photo-1422189668989-08f214d6e419.jpg -------------------------------------------------------------------------------- /css_4e/17_finished/gallery/imgs/photo-1427806208781-b36531cb09ef.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/17_finished/gallery/imgs/photo-1427806208781-b36531cb09ef.jpg -------------------------------------------------------------------------------- /css_4e/17_finished/gallery/imgs/photo-1428342109953-409d2876cdab.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/17_finished/gallery/imgs/photo-1428342109953-409d2876cdab.jpg -------------------------------------------------------------------------------- /css_4e/17_finished/gallery/imgs/photo-1428342319217-5fdaf6d7898e.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/17_finished/gallery/imgs/photo-1428342319217-5fdaf6d7898e.jpg -------------------------------------------------------------------------------- /css_4e/17_finished/gallery/imgs/photo-1428836962997-9533e673a68f.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/17_finished/gallery/imgs/photo-1428836962997-9533e673a68f.jpg -------------------------------------------------------------------------------- /css_4e/17_finished/gallery/imgs/photo-1428908684367-2fe456a630bb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/17_finished/gallery/imgs/photo-1428908684367-2fe456a630bb.jpg -------------------------------------------------------------------------------- /css_4e/17_finished/gallery/imgs/photo-1428908728789-d2de25dbd4e2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/17_finished/gallery/imgs/photo-1428908728789-d2de25dbd4e2.jpg -------------------------------------------------------------------------------- /css_4e/17_finished/gallery/imgs/photo-1429043794791-eb8f26f44081.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrightman/css_4e/HEAD/css_4e/17_finished/gallery/imgs/photo-1429043794791-eb8f26f44081.jpg -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | 7 | # Standard to msysgit 8 | *.doc diff=astextplain 9 | *.DOC diff=astextplain 10 | *.docx diff=astextplain 11 | *.DOCX diff=astextplain 12 | *.dot diff=astextplain 13 | *.DOT diff=astextplain 14 | *.pdf diff=astextplain 15 | *.PDF diff=astextplain 16 | *.rtf diff=astextplain 17 | *.RTF diff=astextplain 18 | -------------------------------------------------------------------------------- /css_4e/16/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Большая книга CSS 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /css_4e/16/04-footer.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

© Моя компания, 2015. Моя компания - это вымышленное название. Любое сходство с реальными компаниями случайно.

5 |
6 |
7 |
8 | 9 | 10 | 11 |
12 |
13 |
14 |
-------------------------------------------------------------------------------- /css_4e/13/sidebar1.txt: -------------------------------------------------------------------------------- 1 |

Боковая панель 1

2 |

Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor.

3 |

Второстепенный заголовок

4 |

Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum.

5 |

Второстепенный заголовок

6 |

Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum.

-------------------------------------------------------------------------------- /css_4e/10/banner.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Трансформации, переходы и анимация CSS 6 | 7 | 8 | 9 |
10 |
11 | 12 |

Трансформации, переходы и анимация CSS

13 | 21 |
22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /css_4e/10_finished/banner.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Трансформации, переходы и анимация CSS 6 | 7 | 8 | 9 |
10 |
11 | 12 |

Трансформации, переходы и анимация CSS

13 | 21 |
22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /css_4e/09/links/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Типографика CSS 6 | 17 | 18 | 19 | 20 | 21 |
22 |

Большая книга CSS

23 |

Это просто тест (щелкните здесь, чтобы вернуться)

24 |

 

25 |

Собственность 2015 Комментарии на адрес css@cosmofarmer.com

26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /css_4e/09/links/test2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Типографика CSS 6 | 17 | 18 | 19 | 20 | 21 |
22 |

Большая книга CSS

23 |

Это просто тест (щелкните здесь, чтобы вернуться)

24 |

 

25 |

Собственность 2015 Комментарии на адрес css@cosmofarmer.com

26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /css_4e/09/links/test3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Типографика CSS 6 | 17 | 18 | 19 | 20 | 21 |
22 |

Большая книга CSS

23 |

Это просто тест (щелкните здесь, чтобы вернуться)

24 |

 

25 |

Собственность 2015 Комментарии на адрес css@cosmofarmer.com

26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /css_4e/17_finished/nav-bar-responsive/nav-bar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Flexbox 7 | 8 | 9 | 10 | 13 | 14 | 15 | 21 | 22 | -------------------------------------------------------------------------------- /css_4e/09_finished/links/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Типографика CSS 6 | 17 | 18 | 19 | 20 | 21 |
22 |

Большая книга CSS

23 |

Это просто тест (щелкните здесь, чтобы вернуться)

24 |

 

25 |

Собственность 2015 Комментарии на адрес css@cosmofarmer.com

26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /css_4e/09_finished/links/test2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Типографика CSS 6 | 17 | 18 | 19 | 20 | 21 |
22 |

Большая книга CSS

23 |

Это просто тест (щелкните здесь, чтобы вернуться)

24 |

 

25 |

Собственность 2015 Комментарии на адрес css@cosmofarmer.com

26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /css_4e/09_finished/links/test3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Типографика CSS 6 | 17 | 18 | 19 | 20 | 21 |
22 |

Большая книга CSS

23 |

Это просто тест (щелкните здесь, чтобы вернуться)

24 |

 

25 |

Собственность 2015 Комментарии на адрес css@cosmofarmer.com

26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /css_4e/17/nav-bar/nav-bar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Flexbox 7 | 8 | 9 | 12 | 15 | 16 | 17 |
18 | 24 |
25 | 26 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Windows image file caches 2 | Thumbs.db 3 | ehthumbs.db 4 | 5 | # Folder config file 6 | Desktop.ini 7 | 8 | # Recycle Bin used on file shares 9 | $RECYCLE.BIN/ 10 | 11 | # Windows Installer files 12 | *.cab 13 | *.msi 14 | *.msm 15 | *.msp 16 | 17 | # Windows shortcuts 18 | *.lnk 19 | 20 | # ========================= 21 | # Operating System Files 22 | # ========================= 23 | 24 | # OSX 25 | # ========================= 26 | 27 | .DS_Store 28 | .AppleDouble 29 | .LSOverride 30 | 31 | # Thumbnails 32 | ._* 33 | 34 | # Files that might appear on external disk 35 | .Spotlight-V100 36 | .Trashes 37 | 38 | # Directories potentially created on remote AFP share 39 | .AppleDB 40 | .AppleDesktop 41 | Network Trash Folder 42 | Temporary Items 43 | .apdisk 44 | -------------------------------------------------------------------------------- /css_4e/16/css/custom.css: -------------------------------------------------------------------------------- 1 | /* запросы mobile first */ 2 | /* стили для любой ширины */ 3 | 4 | 5 | /* стили для ширины крупнее мобильных */ 6 | /* стили для ширины 400 пикселов и выше */ 7 | @media (min-width: 400px) { 8 | 9 | } 10 | 11 | /* стили для ширины крупнее фаблетов */ 12 | /* стили для ширины 550 пикселов и выше */ 13 | @media (min-width: 550px) { 14 | 15 | } 16 | 17 | /* стили для ширины крупнее планшетов */ 18 | 19 | /* стили для ширины 750 пикселов и выше */ 20 | @media (min-width: 750px) { 21 | 22 | } 23 | 24 | /* стили для ширины крупнее компьютерных мониторов */ 25 | /* стили для ширины 1000 пикселов и выше */ 26 | @media (min-width: 1000px) { 27 | 28 | } 29 | 30 | /* стили для ширины крупнее компьютерных HD-мониторов */ 31 | /* стили для ширины 1200 пикселов и выше */ 32 | @media (min-width: 1200px) { 33 | 34 | } -------------------------------------------------------------------------------- /css_4e/17_finished/nav-bar/nav-bar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Flexbox 7 | 8 | 9 | 18 | 21 | 22 | 23 |
24 | 30 |
31 | 32 | -------------------------------------------------------------------------------- /css_4e/17_finished/flexbox-centering/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Центрирование Flexbox 6 | 21 | 22 | 23 |
24 |

Этот объект центрирован.

25 |

Tkjklj dsflkj sdkljf klsjd fklj sdafklj sdklfj lskdjf lksjd fkljs dflkj sdkflj skldjf klsjad fkljs. Tkjklj dsflkj sdkljf klsjd fklj sdafklj sdklfj lskdjf lksjd fkljs dflkj sdkflj skldjf klsjad fkljs. Tkjklj dsflkj sdkljf klsjd fklj sdafklj sdklfj lskdjf lksjd fkljs dflkj sdkflj skldjf klsjad fkljs

26 |
27 | 28 | -------------------------------------------------------------------------------- /css_4e/06/css/at-font-face.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'PTSans'; 3 | src: url('fonts/PTSansRegular.woff2') format('woff2'), 4 | url('fonts/PTSansRegular.woff') format('woff'); 5 | font-weight: normal; 6 | font-style: normal; 7 | } 8 | @font-face { 9 | font-family: 'PTSans'; 10 | src: url('fonts/PTSansItalic.woff2') format('woff2'), 11 | url('fonts/PTSansItalic.woff') format('woff'); 12 | font-weight: normal; 13 | font-style: italic; 14 | } 15 | @font-face { 16 | font-family: 'PTSans'; 17 | src: url('fonts/PTSansBold.woff2') format('woff2'), 18 | url('fonts/PTSansBold.woff') format('woff'); 19 | font-weight: bold; 20 | font-style: normal; 21 | } 22 | @font-face { 23 | font-family: 'PTSans'; 24 | src: url('fonts/PTSansBoldItalic.woff2') format('woff2'), 25 | url('fonts/PTSansBoldItalic.woff') format('woff'); 26 | font-weight: bold; 27 | font-style: italic; 28 | } -------------------------------------------------------------------------------- /css_4e/06_finished/css/at-font-face.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'PTSans'; 3 | src: url('fonts/PTSansRegular.woff2') format('woff2'), 4 | url('fonts/PTSansRegular.woff') format('woff'); 5 | font-weight: normal; 6 | font-style: normal; 7 | } 8 | @font-face { 9 | font-family: 'PTSans'; 10 | src: url('fonts/PTSansItalic.woff2') format('woff2'), 11 | url('fonts/PTSansItalic.woff') format('woff'); 12 | font-weight: normal; 13 | font-style: italic; 14 | } 15 | @font-face { 16 | font-family: 'PTSans'; 17 | src: url('fonts/PTSansBold.woff2') format('woff2'), 18 | url('fonts/PTSansBold.woff') format('woff'); 19 | font-weight: bold; 20 | font-style: normal; 21 | } 22 | @font-face { 23 | font-family: 'PTSans'; 24 | src: url('fonts/PTSansBoldItalic.woff2') format('woff2'), 25 | url('fonts/PTSansBoldItalic.woff') format('woff'); 26 | font-weight: bold; 27 | font-style: italic; 28 | } -------------------------------------------------------------------------------- /css_4e/17_finished/flexbox-layout/css/custom.css: -------------------------------------------------------------------------------- 1 | .nav, .boxes, .footer, .footer form{ 2 | display: flex; 3 | flex-flow: row wrap; 4 | } 5 | .nav { 6 | justify-content: space-between; 7 | } 8 | .nav a { 9 | width: 23%; 10 | } 11 | .boxes div { 12 | flex: 1 1 250px; 13 | margin: 10px; 14 | border-radius: 5px; 15 | padding: 10px 10px 0 10px; 16 | background-color: rgba(0,0,0,.1); 17 | display: flex; 18 | flex-flow: column; 19 | } 20 | .boxes .more { 21 | margin-top: auto; 22 | } 23 | .footer .copyright { 24 | flex: 2 1 500px; 25 | margin-right: 30px; 26 | } 27 | .footer .signup { 28 | flex: 1 1 250px; 29 | } 30 | .signup label { 31 | width: 100%; 32 | } 33 | .signup input[type="email"] { 34 | border-radius: 4px 0 0 4px; 35 | flex: 1; 36 | } 37 | .signup input[type="submit"] { 38 | border-radius: 0 4px 4px 0; 39 | padding: 0 10px; 40 | } 41 | @media (max-width: 500px) { 42 | .nav { 43 | flex-flow: column; 44 | } 45 | .nav a { 46 | width: 100%; 47 | margin-bottom: 2px; 48 | } 49 | } -------------------------------------------------------------------------------- /css_4e/05/reset.css: -------------------------------------------------------------------------------- 1 | /* сброс стилей браузера */ 2 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 3 | table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 4 | figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 5 | time, mark, audio, video { 6 | margin: 0; 7 | padding: 0; 8 | border: 0; 9 | font-size: 100%; 10 | vertical-align: baseline; 11 | } 12 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 13 | display: block; 14 | } 15 | body { 16 | line-height: 1.2; 17 | } 18 | ol { 19 | padding-left: 1.4em; 20 | list-style: decimal; 21 | } 22 | ul { 23 | padding-left: 1.4em; 24 | list-style: square; 25 | } 26 | table { 27 | border-collapse: collapse; 28 | border-spacing: 0; 29 | } 30 | /* конец кода сброса стилей браузера */ -------------------------------------------------------------------------------- /css_4e/05_finished/reset.css: -------------------------------------------------------------------------------- 1 | /* сброс стилей браузера */ 2 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 3 | table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 4 | figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 5 | time, mark, audio, video { 6 | margin: 0; 7 | padding: 0; 8 | border: 0; 9 | font-size: 100%; 10 | vertical-align: baseline; 11 | } 12 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 13 | display: block; 14 | } 15 | body { 16 | line-height: 1.2; 17 | } 18 | ol { 19 | padding-left: 1.4em; 20 | list-style: decimal; 21 | } 22 | ul { 23 | padding-left: 1.4em; 24 | list-style: square; 25 | } 26 | table { 27 | border-collapse: collapse; 28 | border-spacing: 0; 29 | } 30 | /* конец кода сброса стилей браузера */ -------------------------------------------------------------------------------- /css_4e/06/css/styles.css: -------------------------------------------------------------------------------- 1 | /* сброс стилей браузера */ 2 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 3 | table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 4 | figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 5 | time, mark, audio, video { 6 | margin: 0; 7 | padding: 0; 8 | border: 0; 9 | font-size: 100%; 10 | vertical-align: baseline; 11 | } 12 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 13 | display: block; 14 | } 15 | body { 16 | line-height: 1.2; 17 | } 18 | ol { 19 | padding-left: 1.4em; 20 | list-style: decimal; 21 | } 22 | ul { 23 | padding-left: 1.4em; 24 | list-style: square; 25 | } 26 | table { 27 | border-collapse: collapse; 28 | border-spacing: 0; 29 | } 30 | /* конец кода сброса стилей браузера */ -------------------------------------------------------------------------------- /css_4e/07/main.css: -------------------------------------------------------------------------------- 1 | /* сброс стилей браузера */ 2 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 3 | table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 4 | figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 5 | time, mark, audio, video { 6 | margin: 0; 7 | padding: 0; 8 | border: 0; 9 | font-size: 100%; 10 | vertical-align: baseline; 11 | } 12 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 13 | display: block; 14 | } 15 | body { 16 | line-height: 1.2; 17 | } 18 | ol { 19 | padding-left: 1.4em; 20 | list-style: decimal; 21 | } 22 | ul { 23 | padding-left: 1.4em; 24 | list-style: square; 25 | } 26 | table { 27 | border-collapse: collapse; 28 | border-spacing: 0; 29 | } 30 | /* конец кода сброса стилей браузера */ 31 | -------------------------------------------------------------------------------- /css_4e/13/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Большая книга CSS 6 | 7 | 8 | 9 | 10 |
11 | 20 |

Большая книга CSS

21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /css_4e/02_finished/styles.css: -------------------------------------------------------------------------------- 1 | html { 2 | padding-top: 25px; 3 | background-image: url(images/bg_page.png); 4 | } 5 | body { 6 | width: 80%; 7 | padding: 20px; 8 | margin: 0 auto; 9 | border-radius: 10px; 10 | box-shadow: 10px 10px 10px rgba(0,0,0,.5); 11 | background-color: #E1EDEB; 12 | } 13 | h1 { 14 | font-family: 'Kurale', 'Arial Black', serif; 15 | font-weight: normal; 16 | color: #6A94CC; 17 | font-size: 3em; 18 | margin: 0; 19 | } 20 | p, address { 21 | font-family: "Palatino Linotype", Baskerville, serif; 22 | font-size: 1.25em; 23 | color: #616161; 24 | line-height: 150%; 25 | margin-top: 20px; 26 | margin-left: 60px; 27 | } 28 | h2 { 29 | color: #B1967C; 30 | font-family: 'Kurale', 'Arial Black', serif; 31 | font-weight: normal; 32 | font-size: 2.2em; 33 | border-bottom: 2px white solid; 34 | background: url(images/head-icon.png) no-repeat 10px 10px; 35 | padding: 0 0 2px 60px; 36 | margin: 0; 37 | } 38 | .intro { 39 | color: #666666; 40 | font-family: 'Kurale', Helvetica, sans-serif; 41 | font-size: 1.2em; 42 | margin-left: 0; 43 | margin-bottom: 25px; 44 | } 45 | -------------------------------------------------------------------------------- /css_4e/17_finished/gallery/styles.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 62.5%; 3 | } 4 | body { 5 | font-size: 1.5rem; /* currently ems cause chrome bug misinterpreting rems on body element */ 6 | line-height: 1.6; 7 | font-weight: 400; 8 | font-family: "Roboto", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; 9 | color: #222; 10 | } 11 | 12 | h1 { 13 | border-bottom: 1px solid #CCC; 14 | } 15 | 16 | img { 17 | max-width: 100%; 18 | } 19 | 20 | .container { 21 | max-width: 1200px; 22 | margin: 0 auto; 23 | } 24 | 25 | .gallery { 26 | display: flex; 27 | flex-flow: row wrap; 28 | align-items: stretch; 29 | } 30 | 31 | .image { 32 | border-radius: 10px; 33 | background-color: #333; 34 | padding: 10px; 35 | margin: 5px; 36 | flex: 1 1 300px; 37 | display: flex; 38 | flex-flow: column wrap; 39 | justify-content: flex-end; 40 | } 41 | 42 | .image.wide { 43 | flex: 2 2 400px; 44 | } 45 | 46 | .image img { 47 | border-radius: 5px; 48 | } 49 | 50 | .image figcaption { 51 | font-weight: 600; 52 | color: white; 53 | margin-top: 10px; 54 | border-top: 1px solid rgba(255,255,255,.5); 55 | padding-top: 3px; 56 | } 57 | 58 | 59 | -------------------------------------------------------------------------------- /css_4e/18/reset.css: -------------------------------------------------------------------------------- 1 | /* сброс стилей браузера */ 2 | * { box-sizing: border-box; } 3 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 4 | table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 5 | figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 6 | time, mark, audio, video { 7 | margin: 0; 8 | padding: 0; 9 | border: 0; 10 | font-size: 100%; 11 | vertical-align: baseline; 12 | } 13 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 14 | display: block; 15 | } 16 | body { 17 | line-height: 1.2; 18 | } 19 | table { 20 | border-collapse: collapse; 21 | border-spacing: 0; 22 | } 23 | ol { 24 | padding-left: 1.4em; 25 | list-style: decimal; 26 | } 27 | ul { 28 | padding-left: 1.4em; 29 | list-style: square; 30 | } 31 | blockquote, q { 32 | quotes: none; 33 | } 34 | blockquote:before, blockquote:after, 35 | q:before, q:after { 36 | content: ''; 37 | content: none; 38 | } 39 | /* конец кода сброса стилей браузера */ 40 | -------------------------------------------------------------------------------- /css_4e/17_finished/demo/basic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Основы Flexbox 7 | 8 | 39 | 40 | 41 |
42 |
Элемент
43 |
Второй элемент klja sdfklj skdajf klsadj kljsa dffklj sadfklj aslkdjf lkasjd flkjas dflkj asdlfkj aslkdfjf lkasdjf lkjsad flkj
44 |
Третий элемент
45 |
46 | 47 | -------------------------------------------------------------------------------- /css_4e/17_finished/demo/flex-basis.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Основы Flex 7 | 8 | 44 | 45 | 46 |
47 |
Элемент
48 |
Второй элемент
49 |
Третий элемент
50 |
51 | 52 | -------------------------------------------------------------------------------- /css_4e/05/styles.css: -------------------------------------------------------------------------------- 1 | /* сброс стилей браузера */ 2 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 3 | table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 4 | figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 5 | time, mark, audio, video { 6 | margin: 0; 7 | padding: 0; 8 | border: 0; 9 | font-size: 100%; 10 | font: inherit; 11 | vertical-align: baseline; 12 | } 13 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 14 | display: block; 15 | } 16 | body { 17 | line-height: 1.2; 18 | } 19 | ol { 20 | padding-left: 1.4em; 21 | list-style: decimal; 22 | } 23 | ul { 24 | padding-left: 1.4em; 25 | list-style: square; 26 | } 27 | table { 28 | border-collapse: collapse; 29 | border-spacing: 0; 30 | } 31 | /* конец кода сброса стилей браузера */ 32 | 33 | /* простой двухколончный макет */ 34 | .main { 35 | float: left; 36 | width: 70%; 37 | } 38 | .sidebar { 39 | margin-left: 75%; 40 | padding: 15px; 41 | background: #E9F5FE; 42 | } 43 | 44 | -------------------------------------------------------------------------------- /css_4e/11/table/css/main.css: -------------------------------------------------------------------------------- 1 | /* сброс стилей браузера */ 2 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 3 | table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 4 | figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 5 | time, mark, audio, video { 6 | margin: 0; 7 | padding: 0; 8 | font-size: 100%; 9 | vertical-align: baseline; 10 | } 11 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 12 | display: block; 13 | } 14 | body { 15 | line-height: 1.2; 16 | } 17 | ol { 18 | padding-left: 1.4em; 19 | list-style: decimal; 20 | } 21 | ul { 22 | padding-left: 1.4em; 23 | list-style: square; 24 | } 25 | 26 | /* конец кода сброса стилей браузера */ 27 | 28 | body { 29 | width: 760px; 30 | margin: 0 auto; 31 | background-color: #FDFCD2; 32 | } 33 | 34 | h1 { 35 | font: italic normal 3em Baskerville, "Palatino Linotype", "Times New Roman", serif; 36 | color: #46874D; 37 | background: url(../images/underline.png) no-repeat 0px 88%; 38 | padding-left: 2px; 39 | } 40 | 41 | /* пользовательские стили */ 42 | -------------------------------------------------------------------------------- /css_4e/11/form/global.css: -------------------------------------------------------------------------------- 1 | /* сброс стилей браузера */ 2 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 3 | table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 4 | figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 5 | time, mark, audio, video { 6 | margin: 0; 7 | padding: 0; 8 | font-size: 100%; 9 | vertical-align: baseline; 10 | } 11 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 12 | display: block; 13 | } 14 | body { 15 | line-height: 1.2; 16 | } 17 | ol { 18 | padding-left: 1.4em; 19 | list-style: decimal; 20 | } 21 | ul { 22 | padding-left: 1.4em; 23 | list-style: square; 24 | } 25 | 26 | /* конец кода сброса стилей браузера */ 27 | 28 | body { 29 | width: 760px; 30 | margin: 0 auto; 31 | background-color: rgb(0,51,102); 32 | color: rgb(255,255,255); 33 | } 34 | 35 | h1 { 36 | font-size: 2em; 37 | font-family: Tahoma, Geneva, sans-serif; 38 | font-weight: normal; 39 | border-bottom: dotted 2px rgba(255,255,255,.5); 40 | padding-bottom: 4px; 41 | margin: 25px 0; 42 | } 43 | 44 | p { 45 | margin-bottom: 25px; 46 | } -------------------------------------------------------------------------------- /css_4e/17_finished/demo/flex-math.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Основы Flex 7 | 8 | 44 | 45 | 46 |
47 | 
flex: 1 1 300px;
48 | 
flex: 3 1 200px;
49 | 
flex: 4 1 100px;
50 |
51 | 52 | -------------------------------------------------------------------------------- /css_4e/17_finished/gallery/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Галерея Flexbox 6 | 7 | 8 | 9 | 10 | 11 |
12 |

Фотогалерея Flexbox

13 |
14 |
15 | 16 |
Степан Ринглов
17 |
18 |
19 | 20 |
Роберт Баранкин
21 |
22 |
23 | 24 |
Роберт Баранкин
25 |
26 |
27 | 28 |
Дмитрий Шредер
29 |
30 |
31 | 32 |
Дмитрий Шредер
33 |
34 |
35 | 36 |
Алиса Митькина
37 |
38 |
39 |
40 | 41 | -------------------------------------------------------------------------------- /css_4e/16/03-info.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Graeco feugiat intellegam at vix

4 |
5 |
6 |
7 |

Mei te possit instructior, idque delenit qui et, dicit ludus commune vix ad. Ea modo dicam cetero mel, case disputationi at est. Ad nam adipisci dignissim posidonium, eius reque temporibus ne mea. Vero antiopam ea vim. Ei timeam electram vix. Eam at tollit erroribus, ea eum idque legere epicuri. Sed quot legere minimum cu, ex mei fastidii mandamus intellegam, error consul ut per.

8 |

Дополнительно

9 |
10 |
11 |

Mei te possit instructior, idque delenit qui et, dicit ludus commune vix ad. Ea modo dicam cetero mel, case disputationi at est. Ad nam adipisci dignissim posidonium, eius reque temporibus ne mea. Vero antiopam ea vim. Ei timeam electram vix. Eam at tollit erroribus, ea eum idque legere epicuri. Sed quot legere minimum cu, ex mei fastidii mandamus intellegam, error consul ut per.

12 |

Дополнительно

13 |
14 |
15 |

Mei te possit instructior, idque delenit qui et, dicit ludus commune vix ad. Ea modo dicam cetero mel, case disputationi at est. Ad nam adipisci dignissim posidonium, eius reque temporibus ne mea. Vero antiopam ea vim. Ei timeam electram vix. Eam at tollit erroribus, ea eum idque legere epicuri. Sed quot legere minimum cu, ex mei fastidii mandamus intellegam, error consul ut per.

16 |

Дополнительно

17 |
18 |
19 |
20 | -------------------------------------------------------------------------------- /css_4e/11/form/form.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Подписка на рассылку сайта CosmoFarmer.com 6 | 7 | 10 | 11 | 12 |

Регистрация подписчика

13 |
14 |

15 | 16 | 17 |

18 |

19 | 20 | 21 |

22 |

Навыки квартирного ремонта 23 | 26 | 29 | 32 |

33 |

34 | 35 | 42 |

43 |

44 | 45 | 46 |

47 |

48 | 49 |

50 |
51 | 52 | -------------------------------------------------------------------------------- /css_4e/15/desktop_first.css: -------------------------------------------------------------------------------- 1 | /* сброс стилей браузера */ 2 | * { box-sizing: border-box; } 3 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 4 | table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 5 | figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 6 | time, mark, audio, video { 7 | margin: 0; 8 | padding: 0; 9 | border: 0; 10 | font-size: 100%; 11 | vertical-align: baseline; 12 | } 13 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 14 | display: block; 15 | } 16 | body { 17 | line-height: 1.2; 18 | } 19 | ol { 20 | padding-left: 1.4em; 21 | list-style: decimal; 22 | } 23 | ul { 24 | padding-left: 1.4em; 25 | list-style: square; 26 | } 27 | table { 28 | border-collapse: collapse; 29 | border-spacing: 0; 30 | } 31 | /* конец кода сброса стилей браузера */ 32 | 33 | /* стили для компьютеров и базовые стили для всех устройств */ 34 | body { 35 | /* свойства тела страницы */ 36 | } 37 | 38 | /* только для устройств со средним размером экрана */ 39 | @media (min-width: 481px) and (max-width:768px) { 40 | body { 41 | /* только для планшетов */ 42 | } 43 | 44 | } 45 | /* только для устройств с малым размером экрана */ 46 | @media (max-width:480px) { 47 | body { 48 | /* только для смартфонов */ 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /css_4e/15/mobile_first.css: -------------------------------------------------------------------------------- 1 | /* сброс стилей браузера */ 2 | * { box-sizing: border-box; } 3 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 4 | table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 5 | figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 6 | time, mark, audio, video { 7 | margin: 0; 8 | padding: 0; 9 | border: 0; 10 | font-size: 100%; 11 | vertical-align: baseline; 12 | } 13 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 14 | display: block; 15 | } 16 | body { 17 | line-height: 1.2; 18 | } 19 | ol { 20 | padding-left: 1.4em; 21 | list-style: decimal; 22 | } 23 | ul { 24 | padding-left: 1.4em; 25 | list-style: square; 26 | } 27 | table { 28 | border-collapse: collapse; 29 | border-spacing: 0; 30 | } 31 | /* конец кода сброса стилей браузера */ 32 | 33 | /* стили для мобильных устройств и базовые стили для всех устройств */ 34 | body { 35 | /* свойства тела страницы */ 36 | } 37 | 38 | /* только для устройств со средним размером экрана */ 39 | @media (min-width: 481px) and (max-width:768px) { 40 | body { 41 | /* только для планшетов */ 42 | } 43 | 44 | } 45 | 46 | /* только для устройств с крупным размером экрана */ 47 | @media (min-width:769px) { 48 | body { 49 | /* только для компьютеров */ 50 | } 51 | 52 | } 53 | 54 | -------------------------------------------------------------------------------- /css_4e/11_finished/form/form.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Подписка на рассылку сайта CosmoFarmer.com 6 | 7 | 10 | 11 | 12 |

Регистрация подписчика

13 |
14 |

15 | 16 | 17 |

18 |

19 | 20 | 21 |

22 |

Навыки квартирного ремонта 23 | 26 | 29 | 32 |

33 |

34 | 35 | 42 |

43 |

44 | 45 | 46 |

47 |

48 | 49 |

50 |
51 | 52 | -------------------------------------------------------------------------------- /css_4e/17_finished/demo/flex-order.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Основы Flexbox -- order 7 | 8 | 51 | 52 | 53 |
54 |
55 |

1

56 |
57 |

2

58 |
59 |

3

60 |
61 |

4

62 |
63 |
64 |
65 |
66 |

1

67 |

order: 4

68 |
69 |

2

70 |

order: 3

71 |
72 |

3

73 |

order: 1

74 |
75 |

4

76 |

order: 2

77 |
78 |
79 | 80 | -------------------------------------------------------------------------------- /css_4e/09/nav_bar/nav_bar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CosmoFarmer 6 | 47 | 48 | 49 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /css_4e/17_finished/demo/flex-property.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | The flex property 7 | 8 | 50 | 51 | 52 |
53 |
54 |

Элемент

55 | flex: 1; 56 |
57 |
58 |

Второй элемент

59 | flex: 1; 60 |
61 |
62 |

Третий элемент

63 | flex: 2; 64 |
65 |
66 |
67 |
68 |

Элемент

69 | flex: 1; 70 |
71 |
72 |

Второй элемент

73 | flex: 1; 74 |
75 |
76 | 77 | -------------------------------------------------------------------------------- /css_4e/17_finished/demo/flex-wrap-order-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Основы Flex 7 | 8 | 53 | 54 | 55 | 
flex-flow: row wrap
56 |
57 |
58 |

Главный контент

59 | 
Главный контент
60 |
61 |

Боковая панель 1

62 | 
Боковая панель 1
63 |
64 |

Боковая панель 2

65 | 
Боковая панель 2
66 |
67 | 68 | -------------------------------------------------------------------------------- /css_4e/08/01_image_ex/styles.css: -------------------------------------------------------------------------------- 1 | /* сброс стилей браузера */ 2 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 3 | table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 4 | figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 5 | time, mark, audio, video { 6 | margin: 0; 7 | padding: 0; 8 | border: 0; 9 | font-size: 100%; 10 | vertical-align: baseline; 11 | } 12 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 13 | display: block; 14 | } 15 | body { 16 | line-height: 1.2; 17 | } 18 | ol { 19 | padding-left: 1.4em; 20 | list-style: decimal; 21 | } 22 | ul { 23 | padding-left: 1.4em; 24 | list-style: square; 25 | } 26 | table { 27 | border-collapse: collapse; 28 | border-spacing: 0; 29 | } 30 | /* конец кода сброса стилей браузера */ 31 | 32 | body { 33 | font-size: 62.5%; 34 | } 35 | 36 | .content { 37 | margin: 15px; 38 | border: 1px dashed #999; 39 | border-bottom: none; 40 | } 41 | h1 { 42 | font: normal 2.4em Verdana, Arial, Helvetica, sans-serif; 43 | border-bottom: 1px dashed #999; 44 | padding: 5px 0 5px 8px; 45 | color: #14556b; 46 | } 47 | p { 48 | font: 1.6em/160% Georgia, "Times New Roman", Times, serif; 49 | margin: 10px 8px; 50 | } 51 | .copyright { 52 | font-family: Verdana, Arial, Helvetica, sans-serif; 53 | font-size: 1em; 54 | text-transform: uppercase; 55 | color: #666666; 56 | margin: 0px; 57 | padding-left: 8px; 58 | border-top: 1px dashed #999; 59 | clear: both; 60 | } 61 | /* пользовательские стили */ 62 | 63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /css_4e/06/text.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Типографика CSS 6 | 7 | 8 | 9 | 10 |
11 |

Большая книга CSS

12 |

Обзор возможностей типографики

13 |

31 октября Роман Дибров

14 | 22 |

Esse quam nulla

23 |

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

24 |

Quis autem vel eum

25 |

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /css_4e/08/01_image_ex/image.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Изображение 6 | 7 | 8 | 9 | 10 |
11 |

Руководство CosmoFarmer

12 | Искусственная трава 13 |

14 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tatio. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.

15 |

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

16 |

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.

17 |

Собственность 2015, CosmoFarmer.com

18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /css_4e/17/nav-bar/imgs/home.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 14 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /css_4e/17_finished/nav-bar/imgs/home.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 14 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /css_4e/17_finished/nav-bar-responsive/imgs/home.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 14 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /css_4e/17_finished/demo/flex-wrap-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Основы Flex 7 | 8 | 59 | 60 | 61 | 
flex-flow: row wrap
62 |
63 | 
flex: 1 1 ;
64 | 
flex: 1 1 ;
65 | 
flex: 1 1 ;
66 |
67 | 68 | -------------------------------------------------------------------------------- /css_4e/08/02_gallery_ex/gallery.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Галерея CosmoFarmer 6 | 7 | 8 | 9 |
10 |

CosmoFarmer.com - фотогалерея покрытий

11 |

Выбор покрытий для помещений: протестировано ресурсом CosmoFarmer.com в компании “Apartment Laboratory”.

12 |
13 |
14 | Ковровое покрытие 15 |
Рисунок 1: Даже обычный ковер иногда требует стрижки.
16 |
17 |
18 | Натуральная трава 19 |
Рисунок 2: Натуральная трава требует неимоверного ухода за собой.
20 |
21 |
22 | Голубой Кентукки 23 |
Рисунок 3: Голубой Кентукки - отличный выбор для гостинных.
24 |
25 |
26 | Тина африканская 27 |
Рисунок 4: Тина африканская - только для помещений с влажным климатом.
28 |
29 |
30 | Олдскульный ковер 31 |
Рисунок 5: Олдскульные ковры ушли в прошлое вместе с СССР.
32 |
33 |
34 | Фотопокрытие 35 |
Рисунок 6: Фотопокрытия изображают природные склоны.
36 |
37 |
38 |

Собственность 2015, CosmoFarmer.com

39 |
40 | 41 | 42 | -------------------------------------------------------------------------------- /css_4e/08_finished/02_gallery_ex/gallery.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Галерея CosmoFarmer 6 | 7 | 8 | 9 |
10 |

CosmoFarmer.com - фотогалерея покрытий

11 |

Выбор покрытий для помещений: протестировано ресурсом CosmoFarmer.com в компании “Apartment Laboratory”.

12 |
13 |
14 | Ковровое покрытие 15 |
Рисунок 1: Даже обычный ковер иногда требует стрижки.
16 |
17 |
18 | Натуральная трава 19 |
Рисунок 2: Натуральная трава потрясающе тактильна, но требует неимоверного ухода за собой.
20 |
21 |
22 | Голубой Кентукки 23 |
Рисунок 3: Голубой Кентукки - отличный выбор для гостинных.
24 |
25 |
26 | Тина африканская 27 |
Рисунок 4: Тина африканская - только для помещений с влажным климатом.
28 |
29 |
30 | Олдскульный ковер 31 |
Рисунок 5: Олдскульные ковры ушли в прошлое вместе с СССР.
32 |
33 |
34 | Фотопокрытие 35 |
Рисунок 6: Фотопокрытия изображают природные склоны.
36 |
37 |
38 |

Собственность 2015, CosmoFarmer.com

39 |
40 | 41 | 42 | -------------------------------------------------------------------------------- /css_4e/08_finished/01_image_ex/image.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Изображение 6 | 7 | 8 | 9 | 10 |
11 |

Руководство CosmoFarmer

12 |
13 | Трава 14 |
Рисунок 1: Полевица побегообразующая лучше всего растет в открытом грунте.
15 |
16 |

17 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tatio. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.

18 |

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

19 |

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.

20 |

Собственность 2015, CosmoFarmer.com

21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /css_4e/06_finished/text.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Типографика CSS 6 | 7 | 8 | 9 | 10 |
11 |

Большая книга CSS

12 |

Обзор возможностей типографики

13 |

31 октября Роман Дибров

14 | 22 |

Esse quam nulla

23 |

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

24 |

Quis autem vel eum

25 |

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

26 |
27 | 28 | -------------------------------------------------------------------------------- /css_4e/08/02_gallery_ex/styles.css: -------------------------------------------------------------------------------- 1 | /* сброс стилей браузера */ 2 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 3 | table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 4 | figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 5 | time, mark, audio, video { 6 | margin: 0; 7 | padding: 0; 8 | border: 0; 9 | font-size: 100%; 10 | vertical-align: baseline; 11 | } 12 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 13 | display: block; 14 | } 15 | body { 16 | line-height: 1.2; 17 | } 18 | ol { 19 | padding-left: 1.4em; 20 | list-style: decimal; 21 | } 22 | ul { 23 | padding-left: 1.4em; 24 | list-style: square; 25 | } 26 | table { 27 | border-collapse: collapse; 28 | border-spacing: 0; 29 | } 30 | /* конец кода сброса стилей браузера */ 31 | 32 | body { 33 | font-size: 62.5%; 34 | } 35 | .content { 36 | margin-left: 15px; 37 | margin-top: 15px; 38 | border: 1px dashed #999; 39 | border-right: none; 40 | border-bottom: none; 41 | } 42 | p.caption { 43 | font-size: 1.3em; 44 | line-height: normal; 45 | margin-bottom: 15px; 46 | } 47 | .gallery .figure p { 48 | font-family: Arial, Helvetica, sans-serif; 49 | font-size: 1.1em; 50 | text-align: center; 51 | line-height: normal; 52 | } 53 | 54 | 55 | h1 { 56 | font: normal 2.4em Verdana, Arial, Helvetica, sans-serif; 57 | margin: 0; 58 | border-bottom: 1px dashed #999; 59 | padding: 5px 0 5px 8px; 60 | color: #14556b; 61 | } 62 | p { 63 | font: 1.6em/160% Georgia, "Times New Roman", Times, serif; 64 | margin: 10px 8px; 65 | } 66 | .copyright { 67 | font-family: Verdana, Arial, Helvetica, sans-serif; 68 | font-size: 1em; 69 | text-transform: uppercase; 70 | color: #666666; 71 | margin-left: 0px; 72 | padding-left: 8px; 73 | border-top: 1px dashed #999; 74 | clear: both; 75 | } 76 | -------------------------------------------------------------------------------- /css_4e/17_finished/nav-bar-responsive/nav-styles.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 62.5%; 3 | } 4 | body { 5 | font-size: 1.1em; /* currently ems cause chrome bug misinterpreting rems on body element */ 6 | line-height: 1.6; 7 | font-weight: 400; 8 | font-family: "Roboto", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; 9 | color: #222; 10 | } 11 | 12 | nav { 13 | display: -webkit-flex; 14 | display: -ms-flexbox; 15 | display: flex; 16 | -webkit-flex-flow: column wrap; 17 | -ms-flex-flow: column wrap; 18 | flex-flow: column wrap; 19 | -webkit-align-items: flex-start; 20 | -ms-flex-align: start; 21 | align-items: flex-start; 22 | max-width: 960px; 23 | margin: 0 auto; 24 | } 25 | nav a { 26 | -webkit-flex: 1 0 auto; 27 | -ms-flex: 1 0 auto; 28 | flex: 1 0 auto; 29 | width: 100%; 30 | padding: 8px 2%; 31 | color: #555; 32 | text-align: center; 33 | font-weight: 600; 34 | letter-spacing: .1rem; 35 | text-transform: uppercase; 36 | text-decoration: none; 37 | white-space: nowrap; 38 | border-bottom: 1px solid #bbb; 39 | cursor: pointer; 40 | box-sizing: border-box; 41 | } 42 | 43 | @media (min-width: 500px) { 44 | nav { 45 | -webkit-flex-flow: row wrap; 46 | -ms-flex-flow: row wrap; 47 | flex-flow: row wrap; 48 | } 49 | nav a { 50 | -webkit-flex: 1; 51 | -ms-flex: 1; 52 | flex: 1; 53 | margin: 2px; 54 | border-radius: 4px; 55 | border: 1px solid #bbb; 56 | } 57 | } 58 | @media (min-width: 760px) { 59 | body { 60 | padding-top: 10px; 61 | } 62 | nav { 63 | -webkit-justify-content: center; 64 | -ms-flex-pack: center; 65 | justify-content: center; 66 | } 67 | nav a { 68 | -webkit-flex: 0 0 130px; 69 | -ms-flex: 0 0 130px; 70 | flex: 0 0 130px; 71 | } 72 | nav .home { 73 | background-image: url(imgs/home.svg); 74 | background-size: contain; 75 | background-repeat: no-repeat; 76 | text-indent: -9999px; 77 | border: none; 78 | margin-right: auto; 79 | } 80 | } -------------------------------------------------------------------------------- /css_4e/16_finished/css/custom.css: -------------------------------------------------------------------------------- 1 | /* запросы mobile first */ 2 | /* стили для любой ширины */ 3 | .header { 4 | padding: 30px 0 20px 0; 5 | margin-bottom: 25px; 6 | background-image: url(../imgs/header.jpg); 7 | background-size: cover; 8 | } 9 | .logo { 10 | font-weight: 600; 11 | color: rgb(255, 209, 143); 12 | background-color: black; 13 | position: fixed; 14 | top: 0; 15 | left: 0; 16 | right: 0; 17 | padding-left: 10px; 18 | z-index: 100; 19 | } 20 | .nav { 21 | text-align: right; 22 | } 23 | .nav .button { 24 | width: 48%; 25 | margin: 2px 0; 26 | } 27 | .button { 28 | background-color: rgba(255,255,255,.5); 29 | } 30 | .button:hover { 31 | background-color: rgba(255,255,255,.3); 32 | } 33 | .action { 34 | text-align: center; 35 | padding-top: 37px; 36 | } 37 | .action h1 { 38 | margin: 0; 39 | } 40 | .action h2 { 41 | margin: 0 0 20px 0; 42 | } 43 | h1 { 44 | font-size: 3rem; 45 | } 46 | h2 { 47 | font-size: 2.5rem; 48 | } 49 | 50 | 51 | /* стили для ширины крупнее мобильных */ 52 | /* стили для ширины 400 пикселов и выше */ 53 | @media (min-width: 400px) { 54 | 55 | } 56 | 57 | /* стили для ширины крупнее фаблетов */ 58 | /* стили для ширины 550 пикселов и выше */ 59 | @media (min-width: 550px) { 60 | .header { 61 | padding: 40px 0 50px 0; 62 | } 63 | .logo { 64 | position: static; 65 | background-color: transparent; 66 | font-size: 2rem; 67 | line-height: 1; 68 | } 69 | .nav .button { 70 | width: auto; 71 | } 72 | h1 { 73 | font-size: 5rem; 74 | } 75 | h2 { 76 | font-size: 4.2rem; 77 | } 78 | } 79 | 80 | /* стили для ширины крупнее планшетов */ 81 | /* стили для ширины 750 пикселов и выше */ 82 | @media (min-width: 750px) { 83 | .logo { 84 | font-size: 3rem; 85 | position: relative; 86 | top: 5px; 87 | } 88 | } 89 | 90 | /* стили для ширины крупнее компьютерных мониторов */ 91 | /* стили для ширины 1000 пикселов и выше */ 92 | @media (min-width: 1000px) { 93 | 94 | } 95 | 96 | /* стили для ширины крупнее компьютерных HD-мониторов */ 97 | /* стили для ширины 1200 пикселов и выше */ 98 | @media (min-width: 1200px) { 99 | 100 | } -------------------------------------------------------------------------------- /css_4e/10/styles.css: -------------------------------------------------------------------------------- 1 | /* сброс стилей браузера */ 2 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 3 | table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 4 | figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 5 | time, mark, audio, video { 6 | margin: 0; 7 | padding: 0; 8 | border: 0; 9 | font-size: 100%; 10 | vertical-align: baseline; 11 | } 12 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 13 | display: block; 14 | } 15 | body { 16 | line-height: 1.2; 17 | } 18 | ol { 19 | padding-left: 1.4em; 20 | list-style: decimal; 21 | } 22 | ul { 23 | padding-left: 1.4em; 24 | list-style: square; 25 | } 26 | table { 27 | border-collapse: collapse; 28 | border-spacing: 0; 29 | } 30 | /* конец кода сброса стилей браузера */ 31 | 32 | body { 33 | font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 34 | } 35 | 36 | header { 37 | background: rgb(255,214,94); 38 | background: linear-gradient(to bottom, rgb(100,100,100),rgb(0,0,0)); 39 | padding-top: 20px; 40 | } 41 | .container { 42 | width: 960px; 43 | margin-right: auto; 44 | margin-left: auto; 45 | padding: 10px 0 30px 0; 46 | text-align: right; 47 | position: relative; 48 | } 49 | 50 | .logo { 51 | position: absolute; 52 | z-index: 100; 53 | left: 0; 54 | } 55 | header h1 { 56 | font-size: 2.2em; 57 | margin: 0 0 10px 0; 58 | color: rgb(255,255,255); 59 | } 60 | 61 | nav { 62 | margin-left: 200px; 63 | } 64 | 65 | nav li { 66 | display: inline; 67 | } 68 | 69 | nav a { 70 | display: inline-block; 71 | text-decoration: none; 72 | font-size: 1.2em; 73 | color: #ffffff; 74 | padding: 10px 20px; 75 | background: #ff932d; 76 | border-radius: 5px; 77 | border: 1px solid #c95e00; 78 | box-shadow: inset 0px 1px 0px rgba(255,255,255,0.7); 79 | text-shadow: 80 | 0px -1px 1px rgba(000,000,000,0.2), 81 | 0px 1px 0px rgba(255,255,255,0.3); 82 | } 83 | 84 | /* пользовательские стили */ 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | -------------------------------------------------------------------------------- /css_4e/11_finished/table/css/main.css: -------------------------------------------------------------------------------- 1 | /* сброс стилей браузера */ 2 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 3 | table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 4 | figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 5 | time, mark, audio, video { 6 | margin: 0; 7 | padding: 0; 8 | font-size: 100%; 9 | vertical-align: baseline; 10 | } 11 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 12 | display: block; 13 | } 14 | body { 15 | line-height: 1.2; 16 | } 17 | ol { 18 | padding-left: 1.4em; 19 | list-style: decimal; 20 | } 21 | ul { 22 | padding-left: 1.4em; 23 | list-style: square; 24 | } 25 | 26 | /* конец кода сброса стилей браузера */ 27 | 28 | body { 29 | width: 760px; 30 | margin: 0 auto; 31 | background-color: #FDFCD2; 32 | } 33 | 34 | h1 { 35 | font: italic normal 3em Baskerville, "Palatino Linotype", "Times New Roman", serif; 36 | color: #46874D; 37 | background: url(../images/underline.png) no-repeat 0px 88%; 38 | padding-left: 2px; 39 | } 40 | 41 | /* пользовательские стили */ 42 | #price, #rating { 43 | width: 15%; 44 | } 45 | .inventory { 46 | font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 47 | width: 100%; 48 | margin-top: 25px; 49 | border-collapse: collapse; 50 | } 51 | .inventory caption { 52 | text-align: right; 53 | font-size: .85em; 54 | margin-bottom: 10px; 55 | } 56 | .inventory td, .inventory th { 57 | font-size: 1.1em; 58 | border: 1px solid #DDB575; 59 | padding: 3px 7px 2px 7px; 60 | } 61 | .inventory th { 62 | text-transform:uppercase; 63 | text-align: left; 64 | padding-top: 5px; 65 | padding-bottom: 4px; 66 | background: rgb(229,76,16); 67 | background: linear-gradient(to bottom, rgb(229,76,16), rgb(173,54,8)); 68 | color: white; 69 | } 70 | .inventory tr:nth-of-type(even){ 71 | background-color: rgba(255,255,255,.1); 72 | } 73 | .inventory tr:nth-of-type(odd){ 74 | background-color: rgba(229,76,16,.1); 75 | } 76 | 77 | 78 | -------------------------------------------------------------------------------- /css_4e/05_finished/styles.css: -------------------------------------------------------------------------------- 1 | /* сброс стилей браузера */ 2 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 3 | table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 4 | figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 5 | time, mark, audio, video { 6 | margin: 0; 7 | padding: 0; 8 | border: 0; 9 | font-size: 100%; 10 | font: inherit; 11 | vertical-align: baseline; 12 | } 13 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 14 | display: block; 15 | } 16 | body { 17 | line-height: 1.2; 18 | } 19 | ol { 20 | padding-left: 1.4em; 21 | list-style: decimal; 22 | } 23 | ul { 24 | padding-left: 1.4em; 25 | list-style: square; 26 | } 27 | table { 28 | border-collapse: collapse; 29 | border-spacing: 0; 30 | } 31 | /* конец кода сброса стилей браузера */ 32 | 33 | /* простой двухколончный макет */ 34 | .main { 35 | float: left; 36 | width: 70%; 37 | } 38 | .sidebar { 39 | margin-left: 75%; 40 | padding: 15px; 41 | background: #E9F5FE; 42 | } 43 | body { 44 | color: #B1967C; 45 | font-family: "Palatino Linotype", Baskerville, serif; 46 | padding-top: 115px; 47 | background: #CDE6FF url(images/bg_body.png) repeat-x; 48 | max-width: 800px; 49 | margin: 0 auto; 50 | } 51 | h1 { 52 | font-size: 3em; 53 | font-family: "Arial Black", Arial, sans-serif; 54 | margin-bottom: 15px; 55 | } 56 | h2 { 57 | font-size: 2.2em; 58 | color: #AFC3D6; 59 | margin-bottom: 5px; 60 | } 61 | .main h2 { 62 | color: #E8A064; 63 | border-bottom: 2px white solid; 64 | background: url(images/bullet_flower.png) no-repeat; 65 | padding: 0 0 2px 80px; 66 | } 67 | .main p { 68 | color: #616161; 69 | font-family: "Palatino Linotype", Baskerville, serif; 70 | font-size: 1.1em; 71 | line-height: 150%; 72 | margin-bottom: 10px; 73 | margin-left: 80px; 74 | } 75 | p.intro { 76 | color: #6A94CC; 77 | font-family: Arial, Helvetica, sans-serif; 78 | font-size: 1.2em; 79 | margin-left: 0; 80 | margin-bottom: 15px; 81 | } 82 | 83 | 84 | -------------------------------------------------------------------------------- /css_4e/09/links/links.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Типографика CSS 6 | 7 | 11 | 12 | 13 | 14 |
15 |

Большая книга CSS

16 |

Обзор возможностей типографики

17 |

31 октября Роман Дибров

18 |
19 |

Ресурсы

20 | 27 |
28 |

Esse quam nulla

29 |

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

30 |

Quis autem vel eum

31 |

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illu qui dolorem eum fugiat quo voluptas nulla pariatur? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

32 |

Собственность 2015 Комментарии на адрес css@cosmofarmer.com

33 |
34 | 35 | 36 | -------------------------------------------------------------------------------- /css_4e/08_finished/01_image_ex/styles.css: -------------------------------------------------------------------------------- 1 | /* сброс стилей браузера */ 2 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 3 | table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 4 | figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 5 | time, mark, audio, video { 6 | margin: 0; 7 | padding: 0; 8 | border: 0; 9 | font-size: 100%; 10 | vertical-align: baseline; 11 | } 12 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 13 | display: block; 14 | } 15 | body { 16 | line-height: 1.2; 17 | } 18 | ol { 19 | padding-left: 1.4em; 20 | list-style: decimal; 21 | } 22 | ul { 23 | padding-left: 1.4em; 24 | list-style: square; 25 | } 26 | table { 27 | border-collapse: collapse; 28 | border-spacing: 0; 29 | } 30 | /* конец кода сброса стилей браузера */ 31 | 32 | body { 33 | font-size: 62.5%; 34 | } 35 | 36 | .content { 37 | margin: 15px; 38 | border: 1px dashed #999; 39 | border-bottom: none; 40 | } 41 | h1 { 42 | font: normal 2.4em Verdana, Arial, Helvetica, sans-serif; 43 | border-bottom: 1px dashed #999; 44 | padding: 5px 0 5px 8px; 45 | color: #14556b; 46 | } 47 | p { 48 | font: 1.6em/160% Georgia, "Times New Roman", Times, serif; 49 | margin: 10px 8px; 50 | } 51 | .copyright { 52 | font-family: Verdana, Arial, Helvetica, sans-serif; 53 | font-size: 1em; 54 | text-transform: uppercase; 55 | color: #666666; 56 | margin-left: 0px; 57 | padding-left: 8px; 58 | border-top: 1px dashed #999; 59 | clear: both; 60 | } 61 | /* пользовательские стили */ 62 | 63 | figure { 64 | float: right; 65 | width: 222px; 66 | margin: 15px 10px 5px 10px; 67 | } 68 | figure img { 69 | border: 1px solid #666; 70 | background-color: #CCC; 71 | padding: 10px; 72 | } 73 | figcaption { 74 | font: bold 1em/normal Verdana, Arial, Helvetica, sans-serif; 75 | color: #333; 76 | text-align: center; 77 | background-image: linear-gradient(to bottom, #e6f3ff, white); 78 | border: 1px dashed #666; 79 | padding: 5px; 80 | } 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /css_4e/13/main.txt: -------------------------------------------------------------------------------- 1 |

Название

2 |

Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum.

3 |

Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor.

4 |

Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum.

5 |

Подзаголовок

6 |

Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum.

7 |

Подзаголовок

8 |

Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tor

-------------------------------------------------------------------------------- /css_4e/13_finished/main.txt: -------------------------------------------------------------------------------- 1 |

Название

2 |

Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum.

3 |

Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor.

4 |

Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum.

5 |

Подзаголовок

6 |

Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum.

7 |

Подзаголовок

8 |

Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tor

-------------------------------------------------------------------------------- /css_4e/07_finished/main.css: -------------------------------------------------------------------------------- 1 | /* сброс стилей браузера */ 2 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 3 | table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 4 | figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 5 | time, mark, audio, video { 6 | margin: 0; 7 | padding: 0; 8 | border: 0; 9 | font-size: 100%; 10 | vertical-align: baseline; 11 | } 12 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 13 | display: block; 14 | } 15 | body { 16 | line-height: 1.2; 17 | } 18 | ol { 19 | padding-left: 1.4em; 20 | list-style: decimal; 21 | } 22 | ul { 23 | padding-left: 1.4em; 24 | list-style: square; 25 | } 26 | table { 27 | border-collapse: collapse; 28 | border-spacing: 0; 29 | } 30 | /* конец кода сброса стилей браузера */ 31 | html { 32 | background-color: rgb(253,248,171); 33 | } 34 | body { 35 | background-color: rgb(255,255,255); 36 | border: 3px solid rgb(75,75,75); 37 | box-shadow: 0 0 15px 5px rgba(44,82,100,.75); 38 | max-width: 760px; 39 | margin-top: 20px; 40 | margin-left: auto; 41 | margin-right: auto; 42 | padding: 15px; 43 | } 44 | h1 { 45 | font-size: 2.75em; 46 | font-family: Georgia, "Times New Roman", Times, serif; 47 | font-weight: normal; 48 | text-align:center; 49 | letter-spacing: 1px; 50 | color: rgb(133,161,16); 51 | text-transform: uppercase; 52 | background-color: rgb(226,235,180); 53 | padding: 5px 15px 2px 15px; 54 | margin: 0 -15px 20px -15px; 55 | } 56 | h2 { 57 | font-size: 1.5em; 58 | font-family: "Arial Narrow", Arial, Helvetica, sans-serif; 59 | color: rgb(249,107,24); 60 | border-top: 2px dotted rgb(141,165,22); 61 | border-bottom: 2px dotted rgb(141,165,22); 62 | padding-top: 5px; 63 | padding-bottom: 5px; 64 | margin: 15px 0 5px 0; 65 | overflow: hidden; 66 | } 67 | .sidebar { 68 | width: 30%; 69 | float: right; 70 | margin: 10px; 71 | background-color: rgb(250,235,199); 72 | padding: 10px 20px; 73 | border: 1px dotted rgb(252,101,18); 74 | border-top: 20px solid rgb(252,101,18); 75 | border-radius: 10px; 76 | box-shadow: 5px 5px 10px rgba(0,0,0,.5); 77 | } 78 | .sidebar h2 { 79 | border: none; 80 | margin-top: 0; 81 | padding: 0; 82 | } -------------------------------------------------------------------------------- /css_4e/17_finished/demo/css/styles.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 62.5%; 3 | } 4 | body { 5 | font-size: 1.5rem; /* currently ems cause chrome bug misinterpreting rems on body element */ 6 | line-height: 1.6; 7 | font-weight: 400; 8 | font-family: "Roboto", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; 9 | color: #222; 10 | background-color: black; 11 | } 12 | h2 { 13 | font-size: 3rem; 14 | margin: 0; 15 | } 16 | 17 | pre { 18 | background-color: rgb(255, 221, 227); 19 | border-radius: 5px; 20 | padding: 10px; 21 | } 22 | 23 | code { 24 | font-size: 2rem; 25 | line-height: 1; 26 | } 27 | 28 | .container-code { 29 | padding: 20px 50px 1px; 30 | background-color: black; 31 | } 32 | 33 | .flex-container { 34 | display: flex; 35 | margin: 0 auto; 36 | background-color: black; 37 | padding: 0 40px; 38 | } 39 | 40 | .flex-item { 41 | border-radius: 10px; 42 | padding: 20px; 43 | background-color: white; 44 | box-sizing: border-box; 45 | margin: 10px; 46 | } 47 | 48 | .start .flex-container { 49 | display: block; 50 | } 51 | 52 | .flex-item h2 { 53 | margin-bottom: auto; 54 | } 55 | 56 | .example1 .flex1 { 57 | flex: 1; 58 | } 59 | .example1 .flex2 { 60 | flex: 1; 61 | } 62 | .example1 .flex3 { 63 | flex: 1; 64 | } 65 | 66 | .example2 .flex1 { 67 | flex: 2; 68 | } 69 | .example2 .flex2 { 70 | flex: 1; 71 | } 72 | .example2 .flex2 p { 73 | margin-top: auto; 74 | } 75 | .example2 .flex3 { 76 | flex: 1; 77 | } 78 | 79 | .example3 .flex-container { 80 | align-items: flex-start; 81 | } 82 | 83 | .example3 .flex1 { 84 | flex: 2; 85 | } 86 | .example3 .flex2 { 87 | flex: 1; 88 | } 89 | .example3 .flex3 { 90 | flex: 1; 91 | } 92 | 93 | .example4 .flex-container { 94 | align-items: center; 95 | } 96 | .example4 .flex1 { 97 | flex: 2; 98 | } 99 | .example4 .flex2 { 100 | flex: 1; 101 | } 102 | .example4 .flex3 { 103 | flex: 1; 104 | } 105 | 106 | .example5 .flex-container { 107 | flex-flow: row wrap; 108 | } 109 | .example5 .flex1 { 110 | flex: 1 1 300px; 111 | } 112 | .example5 .flex2 { 113 | flex: 1 1 300px; 114 | } 115 | .example5 .flex3 { 116 | flex: 2 2 600px; 117 | } 118 | 119 | .example6 .flex-container { 120 | flex-flow: row wrap-reverse; 121 | } 122 | .example6 .flex1 { 123 | flex: 1 1 300px; 124 | } 125 | .example6 .flex2 { 126 | flex: 1 1 300px; 127 | } 128 | .example6 .flex3 { 129 | flex: 2 2 600px; 130 | } 131 | -------------------------------------------------------------------------------- /css_4e/08_finished/02_gallery_ex/styles.css: -------------------------------------------------------------------------------- 1 | /* сброс стилей браузера */ 2 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 3 | table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 4 | figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 5 | time, mark, audio, video { 6 | margin: 0; 7 | padding: 0; 8 | border: 0; 9 | font-size: 100%; 10 | vertical-align: baseline; 11 | } 12 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 13 | display: block; 14 | } 15 | body { 16 | line-height: 1.2; 17 | } 18 | ol { 19 | padding-left: 1.4em; 20 | list-style: decimal; 21 | } 22 | ul { 23 | padding-left: 1.4em; 24 | list-style: square; 25 | } 26 | table { 27 | border-collapse: collapse; 28 | border-spacing: 0; 29 | } 30 | /* конец кода сброса стилей браузера */ 31 | 32 | body { 33 | font-size: 62.5%; 34 | } 35 | .content { 36 | margin-left: 15px; 37 | margin-top: 15px; 38 | border: 1px dashed #999; 39 | border-right: none; 40 | border-bottom: none; 41 | } 42 | p.caption { 43 | font-size: 1.3em; 44 | line-height: normal; 45 | margin-bottom: 15px; 46 | } 47 | .gallery .figure p { 48 | font-family: Arial, Helvetica, sans-serif; 49 | font-size: 1.1em; 50 | text-align: center; 51 | line-height: normal; 52 | } 53 | 54 | 55 | h1 { 56 | font: normal 2.4em Verdana, Arial, Helvetica, sans-serif; 57 | margin: 0; 58 | border-bottom: 1px dashed #999; 59 | padding: 5px 0 5px 8px; 60 | color: #14556b; 61 | } 62 | p { 63 | font: 1.6em/160% Georgia, "Times New Roman", Times, serif; 64 | margin: 10px 8px; 65 | } 66 | .copyright { 67 | font-family: Verdana, Arial, Helvetica, sans-serif; 68 | font-size: 1em; 69 | text-transform: uppercase; 70 | color: #666666; 71 | margin-left: 0px; 72 | padding-left: 8px; 73 | border-top: 1px dashed #999; 74 | clear: both; 75 | } 76 | 77 | figure img { 78 | border: 1px solid #666; 79 | background-color: #FFF; 80 | padding: 4px; 81 | box-shadow: 2px 2px 4px rgba(0,0,0,.5); 82 | } 83 | 84 | figcaption { 85 | font: 1.1em Arial, Helvetica, sans-serif; 86 | text-align: center; 87 | margin: 10px 0 0 0; 88 | } 89 | 90 | figure { 91 | display: inline-block; 92 | vertical-align: top; 93 | width: 210px; 94 | margin: 0 10px 10px 10px; 95 | } 96 | 97 | 98 | -------------------------------------------------------------------------------- /css_4e/16_fancier_design/css/custom.css: -------------------------------------------------------------------------------- 1 | /* запросы mobile first */ 2 | 3 | body { 4 | background-color: black; 5 | } 6 | 7 | .button { 8 | background-color: rgba(255,255,255,.5); 9 | } 10 | 11 | .button:hover { 12 | background-color: rgba(255,255,255,.3); 13 | } 14 | 15 | .header { 16 | background-image: url(../imgs/header.jpg); 17 | background-size: cover; 18 | padding-top: 30px; 19 | } 20 | 21 | .header .button { 22 | border: none; 23 | } 24 | .nav .button { 25 | width: 48%; 26 | margin: 2px 0; 27 | padding-left: 0; 28 | padding-right: 0; 29 | } 30 | 31 | .logo { 32 | font-weight: 600; 33 | color: rgb(255, 209, 143); 34 | background-color: black; 35 | position: fixed; 36 | top: 0; 37 | left: 0; 38 | right: 0; 39 | padding-left: 10px; 40 | z-index: 100; 41 | } 42 | 43 | .nav { 44 | text-align: right; 45 | margin-bottom: 10px; 46 | } 47 | 48 | .action { 49 | text-align: center; 50 | } 51 | 52 | .action h1 { 53 | margin-bottom: 0; 54 | } 55 | 56 | .info { 57 | background-color: white; 58 | } 59 | .info h2 { 60 | text-align: center; 61 | } 62 | 63 | .info .button { 64 | background-color: rgb(215, 143, 97); 65 | border: none; 66 | color: white; 67 | } 68 | 69 | .info .button:hover { 70 | background-color: rgb(255, 207, 130); 71 | border: none; 72 | } 73 | 74 | .footer { 75 | color: rgba(255,255,255,.8); 76 | padding-top: 25px; 77 | } 78 | 79 | .social-media-list li { 80 | list-style: none; 81 | margin: 0; 82 | } 83 | .social-media-list a { 84 | text-decoration: none; 85 | } 86 | .icon > svg { 87 | margin-right: 5px; 88 | width: 24px; 89 | height: 24px; 90 | display: inline-block; 91 | position: relative; 92 | top: 5px; 93 | } 94 | 95 | /* стили для ширины крупнее мобильных */ 96 | @media (min-width: 400px) { 97 | 98 | } 99 | 100 | /* стили для ширины крупнее фаблетов */ 101 | @media (min-width: 550px) { 102 | .info { 103 | padding-top: 20px; 104 | } 105 | .nav { 106 | 107 | } 108 | .nav .button { 109 | width: auto; 110 | padding: 0 30px; 111 | } 112 | } 113 | 114 | /* стили для ширины крупнее планшетов */ 115 | @media (min-width: 750px) { 116 | .action { 117 | padding: 75px 0 25px; 118 | } 119 | } 120 | 121 | /* стили для ширины крупнее компьютерных мониторов */ 122 | @media (min-width: 1000px) { 123 | .header { 124 | padding: 50px 0; 125 | } 126 | .logo { 127 | font-size: 3rem; 128 | } 129 | } 130 | 131 | 132 | -------------------------------------------------------------------------------- /css_4e/11_finished/form/global.css: -------------------------------------------------------------------------------- 1 | /* сброс стилей браузера */ 2 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 3 | table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 4 | figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 5 | time, mark, audio, video { 6 | margin: 0; 7 | padding: 0; 8 | font-size: 100%; 9 | vertical-align: baseline; 10 | } 11 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 12 | display: block; 13 | } 14 | body { 15 | line-height: 1.2; 16 | } 17 | ol { 18 | padding-left: 1.4em; 19 | list-style: decimal; 20 | } 21 | ul { 22 | padding-left: 1.4em; 23 | list-style: square; 24 | } 25 | 26 | /* конец кода сброса стилей браузера */ 27 | 28 | body { 29 | width: 760px; 30 | margin: 0 auto; 31 | background-color: rgb(0,51,102); 32 | color: rgb(255,255,255); 33 | } 34 | 35 | h1 { 36 | font-size: 2em; 37 | font-family: Tahoma, Geneva, sans-serif; 38 | font-weight: normal; 39 | border-bottom: dotted 2px rgba(255,255,255,.5); 40 | padding-bottom: 4px; 41 | margin: 25px 0; 42 | } 43 | 44 | p { 45 | margin-bottom: 25px; 46 | } 47 | 48 | /* add form styles here */ 49 | .subform { 50 | font-size: 1.2em; 51 | color: white; 52 | font-family:Tahoma, Geneva, sans-serif; 53 | } 54 | .subform .label { 55 | display: inline-block; 56 | width: 200px; 57 | vertical-align: top; 58 | text-align: right; 59 | margin-right: 10px; 60 | font-weight: bold; 61 | color: rgba(255,255,255,.5); 62 | } 63 | .subform input[type="submit"] { 64 | margin-left: 220px; 65 | padding: 10px 25px; 66 | font-size: 1em; 67 | color: white; 68 | background: rgb(0,102,153); 69 | background: linear-gradient(to bottom, rgba(255,255,255,.1) 40%, rgba(255,255,255,.5)); 70 | border-radius: 5px; 71 | box-shadow: 0 0 4px white; 72 | } 73 | .subform select { 74 | font-size: 1.2em; 75 | } 76 | .subform input[type="text"], .subform textarea { 77 | border-radius: 5px; 78 | border: none; 79 | background-color: rgba(255,255,255,.5); 80 | color: rgba(255,255,255,1); 81 | font-size: 1.2em; 82 | box-shadow: inset 0 0 10px rgba(255,255,255,.75); 83 | width: 500px; 84 | padding: 5px; 85 | } 86 | .subform input[type="text"]:focus, .subform textarea:focus { 87 | background-color: white; 88 | color: black; 89 | } 90 | 91 | 92 | 93 | 94 | -------------------------------------------------------------------------------- /css_4e/02/another_page.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Другая страница 6 | 7 | 8 |

Что мы имеем?

9 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

10 |

Другая страница...

11 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

12 |

Ссылка на таблицу стилей...

13 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

14 |
15 | Собственность 2015, Макфарланд|Райтман 16 |
17 | 18 | 19 | -------------------------------------------------------------------------------- /css_4e/08/03_bg_ex/styles.css: -------------------------------------------------------------------------------- 1 | /* сброс стилей браузера */ 2 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 3 | table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 4 | figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 5 | time, mark, audio, video { 6 | margin: 0; 7 | padding: 0; 8 | border: 0; 9 | font-size: 100%; 10 | vertical-align: baseline; 11 | } 12 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 13 | display: block; 14 | } 15 | body { 16 | line-height: 1.2; 17 | } 18 | ol { 19 | padding-left: 1.4em; 20 | list-style: decimal; 21 | } 22 | ul { 23 | padding-left: 1.4em; 24 | list-style: square; 25 | } 26 | table { 27 | border-collapse: collapse; 28 | border-spacing: 0; 29 | } 30 | /* конец кода сброса стилей браузера */ 31 | 32 | .wrapper { 33 | width: 960px; 34 | margin-right: auto; 35 | margin-left: auto; 36 | overflow: hidden; /* выравнивание */ 37 | } 38 | 39 | .main { 40 | float: right; 41 | width: 565px; 42 | margin-right: 15px; 43 | padding-top: 25px; 44 | } 45 | 46 | .announcement { 47 | margin-right: 600px; 48 | margin-left: 20px; 49 | 50 | } 51 | 52 | .copyright { 53 | clear: both; 54 | font: bold 12px Tahoma, Geneva, sans-serif; 55 | color: #65747E; 56 | padding: 5px; 57 | margin: 0 15px; 58 | border: 1px dotted #98AFBE; 59 | border-left: none; 60 | border-right: none; 61 | } 62 | 63 | 64 | .banner h1 { 65 | font: normal 48px Georgia, "Times New Roman", Times, serif; 66 | text-align: right; 67 | color: #272D32; 68 | } 69 | 70 | .main h2 { 71 | font: 24px Tahoma, Geneva, sans-serif; 72 | margin-bottom: 15px; 73 | font-family: Tahoma, Geneva, sans-serif; 74 | } 75 | .main p { 76 | font: 14px Tahoma, Geneva, sans-serif; 77 | color: #323A3F; 78 | margin-bottom: 20px; 79 | font-family: Tahoma, Geneva, sans-serif; 80 | } 81 | 82 | .announcement h2 { 83 | font: italic bold normal 20px Georgia, "Times New Roman", Times, serif; 84 | text-align: center; 85 | color: #323A3F; 86 | text-transform: uppercase; 87 | letter-spacing: 1px; 88 | margin-bottom: 18px; 89 | } 90 | .announcement ul { 91 | font: 14px Tahoma, Geneva, sans-serif; 92 | } 93 | 94 | /* пользовательские стили */ 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | -------------------------------------------------------------------------------- /css_4e/08_finished/03_bg_ex/bg_images.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Фоновые изображения 6 | 7 | 8 | 9 |
10 | 13 |
14 |

Lorem Ipsum Dolor Sat

15 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

16 |

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

17 |

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

18 |

Nisi Ut Aliquid

19 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

20 |

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

21 |
22 |
23 |

Уведомления

24 | 33 |
34 |
35 |

Собственность 2015, Lorem Ipsum Corporation

36 |
37 |
38 | 39 | 40 | -------------------------------------------------------------------------------- /css_4e/08/03_bg_ex/bg_images.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Фоновые изображения 6 | 7 | 10 | 11 | 12 |
13 | 16 |
17 |

Lorem Ipsum Dolor Sat

18 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

19 |

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

20 |

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

21 |

Nisi Ut Aliquid

22 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

23 |

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

24 |
25 |
26 |

Уведомления

27 | 36 |
37 |
38 |

Собственность 2015, Lorem Ipsum Corporation

39 |
40 |
41 | 42 | 43 | -------------------------------------------------------------------------------- /css_4e/02_finished/another_page.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Другая страница 6 | 7 | 8 | 9 | 10 |

Что мы имеем?

11 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

12 |

Другая страница...

13 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

14 |

Ссылка на таблицу стилей...

15 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

16 |
17 | Собственность 2015, Макфарланд|Райтман 18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /css_4e/09_finished/nav_bar/nav_bar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CosmoFarmer 6 | 85 | 86 | 87 | 95 | 96 | 97 | -------------------------------------------------------------------------------- /css_4e/09_finished/nav_bar/nav_bar_vertical.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CosmoFarmer 6 | 85 | 86 | 87 | 95 | 96 | 97 | -------------------------------------------------------------------------------- /css_4e/17_finished/demo/flex-basis-demos.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Основы Flex 7 | 8 | 83 | 84 | 85 |
86 | 
flex: 0 1 250px;
87 | 
flex: 0 1 250px;
88 | 
flex: 0 1 250px;
89 |
90 |
91 | 
flex: 1 1 250px;
92 | 
flex: 2 1 250px;
93 | 
flex: 4 1 250px;
94 |
95 |
96 | 
flex: 0 1;
97 | 
flex: 0 1;
98 | 
flex: 1 1;
99 |
100 | 101 | -------------------------------------------------------------------------------- /css_4e/07/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Поля, отступы, границы и фон 6 | 7 | 8 | 9 | 10 | 12 | 13 |

Потрясающий мир CSS

14 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

15 |

ВНИМАНИЕ

16 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est.

17 |

Кто знаком с мощью CSS?

18 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores.

19 |

Не я!

20 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

21 |

Никто!

22 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.

23 |

Собственность 2015, The Lorem Ipsum Corporation

24 | 25 | 26 | -------------------------------------------------------------------------------- /css_4e/04/inheritance.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Наследование в действии 6 | 11 | 12 | 13 |
14 |

Потрясающий мир CSS

15 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia eos qui ratione voluptatem sequi nesciunt. Подробнее about CSS at the W3C CSS Home Page.

16 | 21 |

Кто знаком с мощью CSS?

22 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia eos qui ratione voluptatem sequi nesciunt. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

23 |

Не я!

24 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia eos qui ratione voluptatem sequi nesciunt. odi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

25 |

Никто!

26 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia eos qui ratione voluptatem sequi nesciunt.

27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /css_4e/07_finished/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Поля, отступы, границы и фон 6 | 7 | 8 | 9 | 10 | 12 | 13 |

Потрясающий мир CSS

14 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

15 | 16 |
17 |

ВНИМАНИЕ

18 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est.

19 |
20 |

Кто знаком с мощью CSS?

21 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores.

22 |

Не я!

23 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

24 |

Никто!

25 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.

26 |

Собственность 2015, The Lorem Ipsum Corporation

27 | 28 | 29 | -------------------------------------------------------------------------------- /css_4e/09_finished/nav_bar/nav_bar_horizontal.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CosmoFarmer 6 | 88 | 89 | 90 | 98 | 99 | 100 | -------------------------------------------------------------------------------- /css_4e/09/links/main.css: -------------------------------------------------------------------------------- 1 | /* сброс стилей браузера */ 2 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 3 | table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 4 | figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 5 | time, mark, audio, video { 6 | margin: 0; 7 | padding: 0; 8 | border: 0; 9 | font-size: 100%; 10 | vertical-align: baseline; 11 | } 12 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 13 | display: block; 14 | } 15 | body { 16 | line-height: 1.2; 17 | } 18 | ol { 19 | padding-left: 1.4em; 20 | list-style: decimal; 21 | } 22 | ul { 23 | padding-left: 1.4em; 24 | list-style: square; 25 | } 26 | table { 27 | border-collapse: collapse; 28 | border-spacing: 0; 29 | } 30 | /* конец кода сброса стилей браузера */ 31 | 32 | body { 33 | font-size: 62.5%; 34 | font-family: Arial, Helvetica, sans-serif; 35 | color: #002D4B; 36 | background: #E1EEFD url(images/bg_body.png) repeat-x; 37 | } 38 | 39 | .main { 40 | width: 740px; 41 | margin: 0 auto; 42 | padding: 0 10px; 43 | border: 4px solid white; 44 | background: transparent url(images/bg_banner.jpg) no-repeat; 45 | } 46 | 47 | .main h1 { 48 | color: #FF6600; 49 | font-family: "Arial Black", Arial, Helvetica, sans-serif; 50 | font-size: 4em; 51 | } 52 | 53 | .main h1 strong { 54 | font-size: 150px; 55 | color: white; 56 | line-height: 1em; 57 | margin-right: -1.25em; 58 | } 59 | 60 | 61 | .main h2 { 62 | font: bold 3.5em "Hoefler Text", Garamond, Times, serif; 63 | border-bottom: 1px solid #002D4B; 64 | margin-top: 25px; 65 | } 66 | 67 | .main h3 { 68 | color: #F60; 69 | font-size: 1.9em; 70 | font-weight: bold; 71 | text-transform: uppercase; 72 | margin-top: 25px; 73 | margin-bottom: 10px; 74 | } 75 | 76 | .main p { 77 | font-size: 1.5em; 78 | line-height: 150%; 79 | margin-bottom: 10px; 80 | margin-left: 150px; 81 | margin-right: 50px; 82 | } 83 | 84 | .main p:first-line { 85 | font-weight: bold; 86 | color: #999; 87 | } 88 | 89 | 90 | .resources { 91 | margin: 0 0 25px 50px; 92 | width: 225px; 93 | float: right; 94 | padding: 20px; 95 | background: #F5EFFB; 96 | } 97 | 98 | .resources h3 { 99 | margin-top: 0; 100 | color: #002D4B; 101 | } 102 | 103 | .resources li { 104 | font-size: 1.5em; 105 | margin-bottom: 7px; 106 | color: #207EBF; 107 | } 108 | 109 | .main .byline { 110 | color: #999999; 111 | font-size: 1.6em; 112 | margin: 5px 0 25px 40px; 113 | } 114 | 115 | .main .byline strong { 116 | color: #207EBF; 117 | text-transform: uppercase; 118 | margin-left: 11px; 119 | } 120 | .main .legal{ 121 | margin-top: 15px; 122 | padding-top: 5px; 123 | border-top: 1px solid #FFF; 124 | margin-left: 0px; 125 | padding-left: 150px; 126 | } 127 | -------------------------------------------------------------------------------- /css_4e/09_finished/links/main.css: -------------------------------------------------------------------------------- 1 | /* сброс стилей браузера */ 2 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 3 | table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 4 | figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 5 | time, mark, audio, video { 6 | margin: 0; 7 | padding: 0; 8 | border: 0; 9 | font-size: 100%; 10 | vertical-align: baseline; 11 | } 12 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 13 | display: block; 14 | } 15 | body { 16 | line-height: 1.2; 17 | } 18 | ol { 19 | padding-left: 1.4em; 20 | list-style: decimal; 21 | } 22 | ul { 23 | padding-left: 1.4em; 24 | list-style: square; 25 | } 26 | table { 27 | border-collapse: collapse; 28 | border-spacing: 0; 29 | } 30 | /* конец кода сброса стилей браузера */ 31 | 32 | body { 33 | font-size: 62.5%; 34 | font-family: Arial, Helvetica, sans-serif; 35 | color: #002D4B; 36 | background: #E1EEFD url(images/bg_body.png) repeat-x; 37 | } 38 | 39 | .main { 40 | width: 740px; 41 | margin: 0 auto; 42 | padding: 0 10px; 43 | border: 4px solid white; 44 | background: transparent url(images/bg_banner.jpg) no-repeat; 45 | } 46 | 47 | .main h1 { 48 | color: #FF6600; 49 | font-family: "Arial Black", Arial, Helvetica, sans-serif; 50 | font-size: 4em; 51 | } 52 | 53 | .main h1 strong { 54 | font-size: 150px; 55 | color: white; 56 | line-height: 1em; 57 | margin-right: -1.25em; 58 | } 59 | 60 | 61 | .main h2 { 62 | font: bold 3.5em "Hoefler Text", Garamond, Times, serif; 63 | border-bottom: 1px solid #002D4B; 64 | margin-top: 25px; 65 | } 66 | 67 | .main h3 { 68 | color: #F60; 69 | font-size: 1.9em; 70 | font-weight: bold; 71 | text-transform: uppercase; 72 | margin-top: 25px; 73 | margin-bottom: 10px; 74 | } 75 | 76 | .main p { 77 | font-size: 1.5em; 78 | line-height: 150%; 79 | margin-bottom: 10px; 80 | margin-left: 150px; 81 | margin-right: 50px; 82 | } 83 | 84 | .main p:first-line { 85 | font-weight: bold; 86 | color: #999; 87 | } 88 | 89 | 90 | .resources { 91 | margin: 0 0 25px 50px; 92 | width: 225px; 93 | float: right; 94 | padding: 20px; 95 | background: #F5EFFB; 96 | } 97 | 98 | .resources h3 { 99 | margin-top: 0; 100 | color: #002D4B; 101 | } 102 | 103 | .resources li { 104 | font-size: 1.5em; 105 | margin-bottom: 7px; 106 | color: #207EBF; 107 | } 108 | 109 | .main .byline { 110 | color: #999999; 111 | font-size: 1.6em; 112 | margin: 5px 0 25px 40px; 113 | } 114 | 115 | .main .byline strong { 116 | color: #207EBF; 117 | text-transform: uppercase; 118 | margin-left: 11px; 119 | } 120 | .main .legal{ 121 | margin-top: 15px; 122 | padding-top: 5px; 123 | border-top: 1px solid #FFF; 124 | margin-left: 0px; 125 | padding-left: 150px; 126 | } 127 | -------------------------------------------------------------------------------- /css_4e/13/styles.css: -------------------------------------------------------------------------------- 1 | /* сброс стилей браузера */ 2 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 3 | table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 4 | figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 5 | time, mark, audio, video { 6 | margin: 0; 7 | padding: 0; 8 | border: 0; 9 | font-size: 100%; 10 | vertical-align: baseline; 11 | } 12 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 13 | display: block; 14 | } 15 | body { 16 | line-height: 1.2; 17 | } 18 | ol { 19 | padding-left: 1.4em; 20 | list-style: decimal; 21 | } 22 | ul { 23 | padding-left: 1.4em; 24 | list-style: square; 25 | } 26 | table { 27 | border-collapse: collapse; 28 | border-spacing: 0; 29 | } 30 | /* конец кода сброса стилей браузера */ 31 | 32 | .clear:after { 33 | content: " "; 34 | display: table; 35 | clear: both; 36 | } 37 | 38 | .clear { 39 | zoom: 1; 40 | } 41 | 42 | body { 43 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 44 | } 45 | 46 | 47 | header { 48 | background-color:rgb(93,43,78); 49 | background-image: -webkit-linear-gradient(right, rgb(93,43,78), rgb(8,2,50)); 50 | padding-bottom: 30px; 51 | } 52 | 53 | header h1 { 54 | font-size: 3em; 55 | color: white; 56 | font-weight: bold; 57 | padding-top: 30px; 58 | clear: both; 59 | padding-left: 10px; 60 | } 61 | 62 | nav { 63 | background-color: rgb(25,25,25); 64 | border: 1px solid rgba(255,255,255,.5); 65 | border-left: none; 66 | border-right: none; 67 | } 68 | nav ul { 69 | padding: 0; 70 | margin: 0; 71 | } 72 | nav li { 73 | float: left; 74 | padding: 0; 75 | margin: 0; 76 | list-style: none; 77 | } 78 | nav a { 79 | float: left; 80 | font-size: .8em; 81 | color: white; 82 | font-weight: normal; 83 | text-decoration: none; 84 | padding: 10px; 85 | border-right: 1px dashed rgba(255,255,255,.75); 86 | -webkit-transition: all .5s; 87 | -moz-transition: all .5s; 88 | -o-transition: all .5s; 89 | transition: all .5s; 90 | } 91 | nav li:last-of-type a { 92 | border-right: none; 93 | } 94 | nav a:hover { 95 | background-color: rgb(93,43,78); 96 | } 97 | aside h2 { 98 | font-size: 1.3em; 99 | margin-top: 10px; 100 | } 101 | aside h3 { 102 | font-size: 1.1em; 103 | margin-top: 15px; 104 | } 105 | aside p, aside li { 106 | font-size: .75em; 107 | margin-top: 10px; 108 | } 109 | .main h2 { 110 | font-size: 2em; 111 | margin-top: 10px; 112 | } 113 | .main h3 { 114 | font-size: 1.5em; 115 | margin-top: 20px; 116 | } 117 | .main p { 118 | margin-bottom: 15px; 119 | } 120 | footer { 121 | margin-top: 15px; 122 | font-size: .8em; 123 | padding: 10px 10px 30px 10px; 124 | background-color: black; 125 | color: rgb(204,204,204); 126 | } 127 | footer a { 128 | color: white; 129 | } 130 | /* стили из практикума главы 13 */ 131 | -------------------------------------------------------------------------------- /css_4e/17_finished/demo/align-self.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Основы Flexbox -- align-self 7 | 8 | 61 | 62 | 63 |
64 |
65 |

flex-start

66 |

Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus

67 |
68 |

flex-end

69 |

Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis.

70 |

center

71 |

Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel.In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel.

72 |

baseline

73 |

Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel.

74 |

baseline

75 |

Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel.

76 |

stretch

77 |

Curabitur tortor.

78 |
79 | 80 | 81 | -------------------------------------------------------------------------------- /css_4e/14/fonts/stylesheet.css: -------------------------------------------------------------------------------- 1 | /* Generated by Font Squirrel (http://www.fontsquirrel.com) on October 6, 2012 04:26:54 PM America/New_York */ 2 | 3 | 4 | 5 | @font-face { 6 | font-family: 'TitilliumText22LThin'; 7 | src: url('TitilliumText22L001-webfont.eot'); 8 | src: url('TitilliumText22L001-webfont.eot?#iefix') format('embedded-opentype'), 9 | url('TitilliumText22L001-webfont.woff') format('woff'), 10 | url('TitilliumText22L001-webfont.ttf') format('truetype'), 11 | url('TitilliumText22L001-webfont.svg#TitilliumText22LThin') format('svg'); 12 | font-weight: normal; 13 | font-style: normal; 14 | 15 | } 16 | 17 | @font-face { 18 | font-family: 'TitilliumText22LLight'; 19 | src: url('TitilliumText22L002-webfont.eot'); 20 | src: url('TitilliumText22L002-webfont.eot?#iefix') format('embedded-opentype'), 21 | url('TitilliumText22L002-webfont.woff') format('woff'), 22 | url('TitilliumText22L002-webfont.ttf') format('truetype'), 23 | url('TitilliumText22L002-webfont.svg#TitilliumText22LLight') format('svg'); 24 | font-weight: normal; 25 | font-style: normal; 26 | 27 | } 28 | 29 | @font-face { 30 | font-family: 'TitilliumText22LRegular'; 31 | src: url('TitilliumText22L003-webfont.eot'); 32 | src: url('TitilliumText22L003-webfont.eot?#iefix') format('embedded-opentype'), 33 | url('TitilliumText22L003-webfont.woff') format('woff'), 34 | url('TitilliumText22L003-webfont.ttf') format('truetype'), 35 | url('TitilliumText22L003-webfont.svg#TitilliumText22LRegular') format('svg'); 36 | font-weight: normal; 37 | font-style: normal; 38 | 39 | } 40 | 41 | @font-face { 42 | font-family: 'TitilliumText22LMedium'; 43 | src: url('TitilliumText22L004-webfont.eot'); 44 | src: url('TitilliumText22L004-webfont.eot?#iefix') format('embedded-opentype'), 45 | url('TitilliumText22L004-webfont.woff') format('woff'), 46 | url('TitilliumText22L004-webfont.ttf') format('truetype'), 47 | url('TitilliumText22L004-webfont.svg#TitilliumText22LMedium') format('svg'); 48 | font-weight: normal; 49 | font-style: normal; 50 | 51 | } 52 | 53 | @font-face { 54 | font-family: 'TitilliumText22LBold'; 55 | src: url('TitilliumText22L005-webfont.eot'); 56 | src: url('TitilliumText22L005-webfont.eot?#iefix') format('embedded-opentype'), 57 | url('TitilliumText22L005-webfont.woff') format('woff'), 58 | url('TitilliumText22L005-webfont.ttf') format('truetype'), 59 | url('TitilliumText22L005-webfont.svg#TitilliumText22LBold') format('svg'); 60 | font-weight: normal; 61 | font-style: normal; 62 | 63 | } 64 | 65 | @font-face { 66 | font-family: 'TitilliumText22LXBold'; 67 | src: url('TitilliumText22L006-webfont.eot'); 68 | src: url('TitilliumText22L006-webfont.eot?#iefix') format('embedded-opentype'), 69 | url('TitilliumText22L006-webfont.woff') format('woff'), 70 | url('TitilliumText22L006-webfont.ttf') format('truetype'), 71 | url('TitilliumText22L006-webfont.svg#TitilliumText22LXBold') format('svg'); 72 | font-weight: normal; 73 | font-style: normal; 74 | 75 | } 76 | 77 | -------------------------------------------------------------------------------- /css_4e/14_finished/fonts/stylesheet.css: -------------------------------------------------------------------------------- 1 | /* Generated by Font Squirrel (http://www.fontsquirrel.com) on October 6, 2012 04:26:54 PM America/New_York */ 2 | 3 | 4 | 5 | @font-face { 6 | font-family: 'TitilliumText22LThin'; 7 | src: url('TitilliumText22L001-webfont.eot'); 8 | src: url('TitilliumText22L001-webfont.eot?#iefix') format('embedded-opentype'), 9 | url('TitilliumText22L001-webfont.woff') format('woff'), 10 | url('TitilliumText22L001-webfont.ttf') format('truetype'), 11 | url('TitilliumText22L001-webfont.svg#TitilliumText22LThin') format('svg'); 12 | font-weight: normal; 13 | font-style: normal; 14 | 15 | } 16 | 17 | @font-face { 18 | font-family: 'TitilliumText22LLight'; 19 | src: url('TitilliumText22L002-webfont.eot'); 20 | src: url('TitilliumText22L002-webfont.eot?#iefix') format('embedded-opentype'), 21 | url('TitilliumText22L002-webfont.woff') format('woff'), 22 | url('TitilliumText22L002-webfont.ttf') format('truetype'), 23 | url('TitilliumText22L002-webfont.svg#TitilliumText22LLight') format('svg'); 24 | font-weight: normal; 25 | font-style: normal; 26 | 27 | } 28 | 29 | @font-face { 30 | font-family: 'TitilliumText22LRegular'; 31 | src: url('TitilliumText22L003-webfont.eot'); 32 | src: url('TitilliumText22L003-webfont.eot?#iefix') format('embedded-opentype'), 33 | url('TitilliumText22L003-webfont.woff') format('woff'), 34 | url('TitilliumText22L003-webfont.ttf') format('truetype'), 35 | url('TitilliumText22L003-webfont.svg#TitilliumText22LRegular') format('svg'); 36 | font-weight: normal; 37 | font-style: normal; 38 | 39 | } 40 | 41 | @font-face { 42 | font-family: 'TitilliumText22LMedium'; 43 | src: url('TitilliumText22L004-webfont.eot'); 44 | src: url('TitilliumText22L004-webfont.eot?#iefix') format('embedded-opentype'), 45 | url('TitilliumText22L004-webfont.woff') format('woff'), 46 | url('TitilliumText22L004-webfont.ttf') format('truetype'), 47 | url('TitilliumText22L004-webfont.svg#TitilliumText22LMedium') format('svg'); 48 | font-weight: normal; 49 | font-style: normal; 50 | 51 | } 52 | 53 | @font-face { 54 | font-family: 'TitilliumText22LBold'; 55 | src: url('TitilliumText22L005-webfont.eot'); 56 | src: url('TitilliumText22L005-webfont.eot?#iefix') format('embedded-opentype'), 57 | url('TitilliumText22L005-webfont.woff') format('woff'), 58 | url('TitilliumText22L005-webfont.ttf') format('truetype'), 59 | url('TitilliumText22L005-webfont.svg#TitilliumText22LBold') format('svg'); 60 | font-weight: normal; 61 | font-style: normal; 62 | 63 | } 64 | 65 | @font-face { 66 | font-family: 'TitilliumText22LXBold'; 67 | src: url('TitilliumText22L006-webfont.eot'); 68 | src: url('TitilliumText22L006-webfont.eot?#iefix') format('embedded-opentype'), 69 | url('TitilliumText22L006-webfont.woff') format('woff'), 70 | url('TitilliumText22L006-webfont.ttf') format('truetype'), 71 | url('TitilliumText22L006-webfont.svg#TitilliumText22LXBold') format('svg'); 72 | font-weight: normal; 73 | font-style: normal; 74 | 75 | } 76 | 77 | -------------------------------------------------------------------------------- /css_4e/17_finished/demo/basic-wrap.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Основы Flexbox 7 | 8 | 59 | 60 | 61 |
62 |
63 |

Боковая панель 1

64 | 
flex: 1 1 200px;
65 |

Viverra ut torquent id elementum, risus erat vitae dui vestibulum. Turpis tempus netus non, elit sociis ac praesent tellus, nunc vivamus, vitae convallis erat, nec quisque at. Natoque hac accumsan faucibus, proin felis elit arcu torquent eu, convallis commodo aliquet vestibulum cursus ut ut.

66 |
67 |
68 |

Главный контент

69 | 
flex: 2 1 400px;
70 |

Not a lot to see here

71 |
72 |
73 |

Боковая панель 2

74 | 
flex: 1 1 200px;
75 |

Viverra ut torquent id elementum, risus erat vitae dui vestibulum. Turpis tempus netus non, elit sociis ac praesent tellus, nunc vivamus, vitae convallis erat, nec quisque at. Natoque hac accumsan faucibus

76 |
77 |
78 |
79 |
80 |

Боковая панель 1

81 | 
flex: 1 1 200px;
82 |

Viverra ut torquent id elementum, risus erat vitae dui vestibulum. Turpis tempus netus non, elit sociis ac praesent tellus, nunc vivamus, vitae convallis erat, nec quisque at. Natoque hac accumsan faucibus, proin felis elit arcu torquent eu, convallis commodo aliquet vestibulum cursus ut ut.

83 |
84 |
85 |

Главный контент

86 | 
flex: 2 1 200px;
87 |

Not a lot to see here

88 |
89 |
90 |

Боковая панель 2

91 | 
flex: 1 1 200px;
92 |

Viverra ut torquent id elementum, risus erat vitae dui vestibulum. Turpis tempus netus non, elit sociis ac praesent tellus, nunc vivamus, vitae convallis erat, nec quisque at. Natoque hac accumsan faucibus

93 |
94 |
95 | 96 | -------------------------------------------------------------------------------- /css_4e/04_finished/inheritance.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Наследование в действии 6 | 23 | 24 | 25 |

Потрясающий мир CSS

26 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia eos qui ratione voluptatem sequi nesciunt. Подробнее about CSS at the W3C CSS Home Page.

27 | 32 |

Кто знаком с мощью CSS?

33 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia eos qui ratione voluptatem sequi nesciunt. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

34 |

Не я!

35 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia eos qui ratione voluptatem sequi nesciunt. odi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

36 |

Никто!

37 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia eos qui ratione voluptatem sequi nesciunt.

38 | 39 | 40 | -------------------------------------------------------------------------------- /css_4e/02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Большая книга CSS -- Глава 2 6 | 7 | 8 |

Большая книга CSS

9 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

10 |

Lorem Ipsum Dolor Sat

11 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

12 |

Nisi Ut Aliquid

13 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

14 |

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

15 |
16 | Собственность 2015, Макфарланд|Райтман 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /css_4e/17/flexbox-layout/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Большая книга CSS 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 | Главная 17 | Клиенты 18 | О нас 19 | Вакансии 20 |
21 |
22 |

Мы творим великие дела

23 |

Donec pulvinar ullamcorper metus

24 | Подробнее 25 |
26 |
27 |
28 | 29 |
30 |
31 |

Graeco feugiat intellegam at vix

32 |
33 |
34 |
35 |

Mei te possit instructior, idque delenit qui et, dicit ludus commune vix ad. Ea modo dicam cetero mel, case disputationi at est. Ad nam adipisci dignissim posidonium, eius reque temporibus ne mea. Vero antiopam ea vim. Ei timeam electram vix. Eam at tollit erroribus, ea eum idque legere epicuri. Sed quot legere minimum cu, ex mei fastidii mandamus intellegam, error consul ut per.

36 |

Дополнительно

37 |
38 |
39 |

Mei te possit instructior, idque delenit qui et, dicit ludus commune vix ad. Ea modo dicam cetero mel, case disputationi at est. Ad nam adipisci dignissim posidonium, eius reque temporibus ne mea. Vero antiopam ea vim. Ei timeam electram vix. Eam at tollit erroribus, ea eum idque legere epicuri.

40 |

Дополнительно

41 |
42 |
43 |

Mei te possit instructior, idque delenit qui et, dicit ludus commune vix ad. Ea modo dicam cetero mel, case disputationi at est. Ad nam adipisci dignissim posidonium, eius reque temporibus ne mea. Vero antiopam ea vim. Ei timeam electram vix. Eam at tollit erroribus, ea eum idque legere epicuri. Sed quot legere minimum cu, ex mei fastidii mandamus intellegam, error consul ut per. Sed quot legere minimum cu, ex mei fastidii mandamus intellegam, error consul ut per.

44 |

Дополнительно

45 |
46 |
47 |
48 | 49 |
50 |
51 |

© Моя компания, 2015. Моя компания - это вымышленное название. Любое сходство с реальными компаниями случайно.

52 |
53 |
54 |
55 | 56 | 57 | 58 |
59 |
60 |
61 | 62 | 63 | --------------------------------------------------------------------------------