├── .gitattributes ├── .gitignore ├── LICENCE ├── Makefile ├── README.md ├── _static ├── .nojekyll ├── favicon.ico └── index.html ├── presentation ├── index.html ├── pictures │ └── webstandards │ │ ├── html.jpg │ │ ├── htmltobestyled.png │ │ ├── mm.jpg │ │ ├── plaincss.png │ │ ├── plainhtml.png │ │ └── progressive-enhancement.png ├── scripts │ └── script.js └── themes │ ├── gim │ ├── fonts │ │ ├── PTMono.svg │ │ ├── PTMono.ttf │ │ ├── PTMono.woff │ │ ├── PTSans.Bold.Italic.svg │ │ ├── PTSans.Bold.Italic.ttf │ │ ├── PTSans.Bold.Italic.woff │ │ ├── PTSans.Bold.svg │ │ ├── PTSans.Bold.ttf │ │ ├── PTSans.Bold.woff │ │ ├── PTSans.Italic.svg │ │ ├── PTSans.Italic.ttf │ │ ├── PTSans.Italic.woff │ │ ├── PTSans.Narrow.Bold.svg │ │ ├── PTSans.Narrow.Bold.ttf │ │ ├── PTSans.Narrow.Bold.woff │ │ ├── PTSans.Narrow.svg │ │ ├── PTSans.Narrow.ttf │ │ ├── PTSans.Narrow.woff │ │ ├── PTSans.svg │ │ ├── PTSans.ttf │ │ ├── PTSans.woff │ │ ├── TargetBlank.otf │ │ └── TargetBlank.svg │ ├── images │ │ ├── grid.png │ │ ├── linen.png │ │ └── ribbon.svg │ └── styles │ │ ├── fonts.css │ │ ├── print.css │ │ ├── reset.css │ │ └── style.css │ └── ribbon │ ├── fonts │ ├── PTMono.svg │ ├── PTMono.ttf │ ├── PTMono.woff │ ├── PTSans.Bold.Italic.svg │ ├── PTSans.Bold.Italic.ttf │ ├── PTSans.Bold.Italic.woff │ ├── PTSans.Bold.svg │ ├── PTSans.Bold.ttf │ ├── PTSans.Bold.woff │ ├── PTSans.Italic.svg │ ├── PTSans.Italic.ttf │ ├── PTSans.Italic.woff │ ├── PTSans.Narrow.Bold.svg │ ├── PTSans.Narrow.Bold.ttf │ ├── PTSans.Narrow.Bold.woff │ ├── PTSans.Narrow.svg │ ├── PTSans.Narrow.ttf │ ├── PTSans.Narrow.woff │ ├── PTSans.svg │ ├── PTSans.ttf │ ├── PTSans.woff │ ├── TargetBlank.otf │ └── TargetBlank.svg │ ├── images │ ├── grid.png │ ├── linen.png │ └── ribbon.svg │ └── styles │ ├── fonts.css │ ├── print.css │ ├── reset.css │ └── style.css ├── requirements.txt ├── source ├── _static │ └── custom.css ├── _templates │ └── layout.html ├── conf.py ├── core │ ├── README.md │ ├── definitions.rst │ ├── images │ │ └── css-box-model.gif │ ├── portfolio-2.rst │ ├── portfolio.rst │ ├── resources.rst │ ├── structure.rst │ └── style.rst ├── extras │ ├── CSS3.rst │ ├── HTML5.rst │ ├── README.md │ ├── compatibility.rst │ ├── developertools.rst │ ├── frameworks.rst │ ├── images │ │ ├── .gitignore │ │ └── webconsole.png │ ├── responsive.rst │ └── sass-less.rst └── index.rst └── tasks.py /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | *.sln merge=union 7 | *.csproj merge=union 8 | *.vbproj merge=union 9 | *.fsproj merge=union 10 | *.dbproj merge=union 11 | 12 | # Standard to msysgit 13 | *.doc diff=astextplain 14 | *.DOC diff=astextplain 15 | *.docx diff=astextplain 16 | *.DOCX diff=astextplain 17 | *.dot diff=astextplain 18 | *.DOT diff=astextplain 19 | *.pdf diff=astextplain 20 | *.PDF diff=astextplain 21 | *.rtf diff=astextplain 22 | *.RTF diff=astextplain 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | build 2 | *.py[cdo] 3 | *.swp 4 | *~ 5 | -------------------------------------------------------------------------------- /LICENCE: -------------------------------------------------------------------------------- 1 | This material is licensed under Creative Commons CC BY-SA 3.0. For more 2 | information, follow this link http://creativecommons.org/licenses/by-sa/3.0/ 3 | -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | # Makefile for Sphinx documentation 2 | # 3 | 4 | # You can set these variables from the command line. 5 | SPHINXOPTS = 6 | SPHINXBUILD = sphinx-build 7 | PAPER = 8 | BUILDDIR = build 9 | 10 | # User-friendly check for sphinx-build 11 | ifeq ($(shell which $(SPHINXBUILD) >/dev/null 2>&1; echo $$?), 1) 12 | $(error The '$(SPHINXBUILD)' command was not found. Make sure you have Sphinx installed, then set the SPHINXBUILD environment variable to point to the full path of the '$(SPHINXBUILD)' executable. Alternatively you can add the directory with the executable to your PATH. If you don't have Sphinx installed, grab it from http://sphinx-doc.org/) 13 | endif 14 | 15 | # Internal variables. 16 | PAPEROPT_a4 = -D latex_paper_size=a4 17 | PAPEROPT_letter = -D latex_paper_size=letter 18 | ALLSPHINXOPTS = -d $(BUILDDIR)/doctrees $(PAPEROPT_$(PAPER)) $(SPHINXOPTS) source 19 | # the i18n builder cannot share the environment and doctrees with the others 20 | I18NSPHINXOPTS = $(PAPEROPT_$(PAPER)) $(SPHINXOPTS) source 21 | 22 | .PHONY: help clean html dirhtml singlehtml pickle json htmlhelp qthelp devhelp epub latex latexpdf text man changes linkcheck doctest gettext 23 | 24 | help: 25 | @echo "Please use \`make ' where is one of" 26 | @echo " html to make standalone HTML files" 27 | @echo " dirhtml to make HTML files named index.html in directories" 28 | @echo " singlehtml to make a single large HTML file" 29 | @echo " pickle to make pickle files" 30 | @echo " json to make JSON files" 31 | @echo " htmlhelp to make HTML files and a HTML help project" 32 | @echo " qthelp to make HTML files and a qthelp project" 33 | @echo " devhelp to make HTML files and a Devhelp project" 34 | @echo " epub to make an epub" 35 | @echo " latex to make LaTeX files, you can set PAPER=a4 or PAPER=letter" 36 | @echo " latexpdf to make LaTeX files and run them through pdflatex" 37 | @echo " latexpdfja to make LaTeX files and run them through platex/dvipdfmx" 38 | @echo " text to make text files" 39 | @echo " man to make manual pages" 40 | @echo " texinfo to make Texinfo files" 41 | @echo " info to make Texinfo files and run them through makeinfo" 42 | @echo " gettext to make PO message catalogs" 43 | @echo " changes to make an overview of all changed/added/deprecated items" 44 | @echo " xml to make Docutils-native XML files" 45 | @echo " pseudoxml to make pseudoxml-XML files for display purposes" 46 | @echo " linkcheck to check all external links for integrity" 47 | @echo " doctest to run all doctests embedded in the documentation (if enabled)" 48 | 49 | clean: 50 | rm -rf $(BUILDDIR)/* 51 | 52 | html: 53 | $(SPHINXBUILD) -b html $(ALLSPHINXOPTS) $(BUILDDIR)/html 54 | @echo 55 | @echo "Build finished. The HTML pages are in $(BUILDDIR)/html." 56 | 57 | dirhtml: 58 | $(SPHINXBUILD) -b dirhtml $(ALLSPHINXOPTS) $(BUILDDIR)/dirhtml 59 | @echo 60 | @echo "Build finished. The HTML pages are in $(BUILDDIR)/dirhtml." 61 | 62 | singlehtml: 63 | $(SPHINXBUILD) -b singlehtml $(ALLSPHINXOPTS) $(BUILDDIR)/singlehtml 64 | @echo 65 | @echo "Build finished. The HTML page is in $(BUILDDIR)/singlehtml." 66 | 67 | pickle: 68 | $(SPHINXBUILD) -b pickle $(ALLSPHINXOPTS) $(BUILDDIR)/pickle 69 | @echo 70 | @echo "Build finished; now you can process the pickle files." 71 | 72 | json: 73 | $(SPHINXBUILD) -b json $(ALLSPHINXOPTS) $(BUILDDIR)/json 74 | @echo 75 | @echo "Build finished; now you can process the JSON files." 76 | 77 | htmlhelp: 78 | $(SPHINXBUILD) -b htmlhelp $(ALLSPHINXOPTS) $(BUILDDIR)/htmlhelp 79 | @echo 80 | @echo "Build finished; now you can run HTML Help Workshop with the" \ 81 | ".hhp project file in $(BUILDDIR)/htmlhelp." 82 | 83 | qthelp: 84 | $(SPHINXBUILD) -b qthelp $(ALLSPHINXOPTS) $(BUILDDIR)/qthelp 85 | @echo 86 | @echo "Build finished; now you can run "qcollectiongenerator" with the" \ 87 | ".qhcp project file in $(BUILDDIR)/qthelp, like this:" 88 | @echo "# qcollectiongenerator $(BUILDDIR)/qthelp/BasicWebSiteConstruction.qhcp" 89 | @echo "To view the help file:" 90 | @echo "# assistant -collectionFile $(BUILDDIR)/qthelp/BasicWebSiteConstruction.qhc" 91 | 92 | devhelp: 93 | $(SPHINXBUILD) -b devhelp $(ALLSPHINXOPTS) $(BUILDDIR)/devhelp 94 | @echo 95 | @echo "Build finished." 96 | @echo "To view the help file:" 97 | @echo "# mkdir -p $$HOME/.local/share/devhelp/BasicWebSiteConstruction" 98 | @echo "# ln -s $(BUILDDIR)/devhelp $$HOME/.local/share/devhelp/BasicWebSiteConstruction" 99 | @echo "# devhelp" 100 | 101 | epub: 102 | $(SPHINXBUILD) -b epub $(ALLSPHINXOPTS) $(BUILDDIR)/epub 103 | @echo 104 | @echo "Build finished. The epub file is in $(BUILDDIR)/epub." 105 | 106 | latex: 107 | $(SPHINXBUILD) -b latex $(ALLSPHINXOPTS) $(BUILDDIR)/latex 108 | @echo 109 | @echo "Build finished; the LaTeX files are in $(BUILDDIR)/latex." 110 | @echo "Run \`make' in that directory to run these through (pdf)latex" \ 111 | "(use \`make latexpdf' here to do that automatically)." 112 | 113 | latexpdf: 114 | $(SPHINXBUILD) -b latex $(ALLSPHINXOPTS) $(BUILDDIR)/latex 115 | @echo "Running LaTeX files through pdflatex..." 116 | $(MAKE) -C $(BUILDDIR)/latex all-pdf 117 | @echo "pdflatex finished; the PDF files are in $(BUILDDIR)/latex." 118 | 119 | latexpdfja: 120 | $(SPHINXBUILD) -b latex $(ALLSPHINXOPTS) $(BUILDDIR)/latex 121 | @echo "Running LaTeX files through platex and dvipdfmx..." 122 | $(MAKE) -C $(BUILDDIR)/latex all-pdf-ja 123 | @echo "pdflatex finished; the PDF files are in $(BUILDDIR)/latex." 124 | 125 | text: 126 | $(SPHINXBUILD) -b text $(ALLSPHINXOPTS) $(BUILDDIR)/text 127 | @echo 128 | @echo "Build finished. The text files are in $(BUILDDIR)/text." 129 | 130 | man: 131 | $(SPHINXBUILD) -b man $(ALLSPHINXOPTS) $(BUILDDIR)/man 132 | @echo 133 | @echo "Build finished. The manual pages are in $(BUILDDIR)/man." 134 | 135 | texinfo: 136 | $(SPHINXBUILD) -b texinfo $(ALLSPHINXOPTS) $(BUILDDIR)/texinfo 137 | @echo 138 | @echo "Build finished. The Texinfo files are in $(BUILDDIR)/texinfo." 139 | @echo "Run \`make' in that directory to run these through makeinfo" \ 140 | "(use \`make info' here to do that automatically)." 141 | 142 | info: 143 | $(SPHINXBUILD) -b texinfo $(ALLSPHINXOPTS) $(BUILDDIR)/texinfo 144 | @echo "Running Texinfo files through makeinfo..." 145 | make -C $(BUILDDIR)/texinfo info 146 | @echo "makeinfo finished; the Info files are in $(BUILDDIR)/texinfo." 147 | 148 | gettext: 149 | $(SPHINXBUILD) -b gettext $(I18NSPHINXOPTS) $(BUILDDIR)/locale 150 | @echo 151 | @echo "Build finished. The message catalogs are in $(BUILDDIR)/locale." 152 | 153 | changes: 154 | $(SPHINXBUILD) -b changes $(ALLSPHINXOPTS) $(BUILDDIR)/changes 155 | @echo 156 | @echo "The overview file is in $(BUILDDIR)/changes." 157 | 158 | linkcheck: 159 | $(SPHINXBUILD) -b linkcheck $(ALLSPHINXOPTS) $(BUILDDIR)/linkcheck 160 | @echo 161 | @echo "Link check complete; look for any errors in the above output " \ 162 | "or in $(BUILDDIR)/linkcheck/output.txt." 163 | 164 | doctest: 165 | $(SPHINXBUILD) -b doctest $(ALLSPHINXOPTS) $(BUILDDIR)/doctest 166 | @echo "Testing of doctests in the sources finished, look at the " \ 167 | "results in $(BUILDDIR)/doctest/output.txt." 168 | 169 | xml: 170 | $(SPHINXBUILD) -b xml $(ALLSPHINXOPTS) $(BUILDDIR)/xml 171 | @echo 172 | @echo "Build finished. The XML files are in $(BUILDDIR)/xml." 173 | 174 | pseudoxml: 175 | $(SPHINXBUILD) -b pseudoxml $(ALLSPHINXOPTS) $(BUILDDIR)/pseudoxml 176 | @echo 177 | @echo "Build finished. The pseudo-XML files are in $(BUILDDIR)/pseudoxml." 178 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # OpenTechSchool HTML & CSS Introduction 2 | 3 | This is a friendly how-to for contributors to the HTML and CSS workshop 4 | at OpenTechSchool. 5 | About the course: 6 | 7 | A HTML and CSS basic workshop for beginners that have never written HTML/CSS 8 | before and want to know how to start. 9 | 10 | ## Class format 11 | 12 | At OpenTechSchool we tend to go *practical* and *at your own pace*. 13 | 14 | At your own pace means that we provide access to the complete course notes at 15 | the beginning of the session. Then students can progress individually. Some 16 | students will get through very quickly, others will take some time, and others 17 | will finish the core work with time to spare. The core work should be 18 | completable by everyone. To keep things interesting we supply various 19 | additional topics which are entirely optional. 20 | 21 | A class schedule looks like this: 22 | 23 | 1100 - Students still arriving, writing name tags, setting up laptops. 24 | 1230 - Introductions, wifi instructions and location of coursework. 25 | 1235 - Students learn stuff. 26 | 1800 - Thankyous, maybe demonstrations. 27 | 28 | 29 | ## Author Guide 30 | 31 | This material is built with the help of [Sphinx][sphinx], [Invoke][invoke], 32 | and translated with [Transifex][transifex]. 33 | 34 | To get started, you should have the python packages needed. To do this, use 35 | [pip][pip] like so (probably in a virtualenv you've made to work on this): 36 | 37 | pip install -r requirements.txt 38 | 39 | You can then use the invoke task runner to run things. E.g, build the project 40 | from the source files you've edited: 41 | 42 | invoke build -l en 43 | 44 | (builds them in English). To serve the built sphinx project on your own computer, 45 | you can run: 46 | 47 | invoke serve 48 | 49 | And visit the url that your console prints to view the result. 50 | 51 | The `setup` invoke task should git checkout the `gh-pages` branch correctly, should 52 | you wish to push to that branch to publish a new version of the workshop. 53 | 54 | Translation should be coming soon. 55 | 56 | [sphinx]: https://pypi.python.org/pypi/Sphinx/ 57 | [invoke]: https://pypi.python.org/pypi/invoke/ 58 | [transifex]: http://transifex.com/ 59 | [pip]: https://pip.pypa.io/en/latest/ 60 | -------------------------------------------------------------------------------- /_static/.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenTechSchool/html-css-beginners/ad76c30559599fd10e56bcdba8777a58ade4adbe/_static/.nojekyll -------------------------------------------------------------------------------- /_static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenTechSchool/html-css-beginners/ad76c30559599fd10e56bcdba8777a58ade4adbe/_static/favicon.ico -------------------------------------------------------------------------------- /_static/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Building out Webpages with OpenTechSchool 6 | 37 | 38 | 39 | 40 |
41 |

Building out Webpages with OpenTechSchool

42 | 46 |
47 | 48 | 49 | -------------------------------------------------------------------------------- /presentation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | HTML and CSS for beginners 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |

Welcome to Open Tech School

15 |
16 |
17 | 18 |
19 | 20 |
21 |

HTML and CSS for beginners

22 |
23 | 24 |
25 |
26 |
27 |

A short history of the Internet

28 |
29 |
    30 |
  • Developed at CERN
    • 31 |
  • Tim Berners-Lee
    • 32 |
  • Starting in 1989
    • 33 |
  • Computer service system for communication
    • 34 |
  • Not only make information available, but link it
    • 35 |
  • Thus creating a web of informations
    • 36 |
37 |
38 |
39 | 40 |
41 |
42 |
43 |

History of HTML I

44 |
45 |
    46 |
  • Developed at CERN (again)
    • 47 |
  • Tim Berners-Lee
    • 48 |
  • In 1980 first hypertext System "Enquire" for personal use
    • 49 |
  • Late 1980s Hypercards for Macintosh
    • 50 |
  • In 1990 Berners-Lee developed browser and server
    • 51 |
  • Never officially adopted by CERN
    • 52 |
53 |
54 |
55 | 56 |
57 |
58 |
59 |

History of HTML II

60 |
61 |
    62 |
  • 1991: Open discussions about HTML in the Internet
    • 63 |
  • 1992: Two copies of a free web browser beeing downloaded
    • 64 |
  • 1993: Companies thought the Internet was for academics
    • 65 |
  • 1994: First WWW-Conference in Geneva, Netscape is formed, W3C
    • 66 |
  • 1995: MS Internet Explorer
    • 67 |
68 |
69 |
70 | 71 |
72 |
73 | 74 |
75 | Foto: Sjoerd van Oosten 76 |
77 | 78 |
79 |
80 |
81 |

A simple HTML-Document

82 |
83 | 84 | 
 85 | 					<!doctype html>
 86 | 					<html>
 87 | 					  <head>
 88 | 					    <title>Das ist der Titel der Seite</title>
 89 | 					  </head>
 90 | 					  <body>
 91 | 					    <h1>Das ist die Überschrift</h1>
 92 | 					    <p>Das ist etwas Fließtext.</p>
 93 | 					  </body>
 94 | 					</html>					
 95 |
96 | 97 |
98 |
99 | 100 |
101 |
102 |
103 |
104 | 105 |
106 |
107 | 108 |
109 |
110 |

Fear not. For there is CSS!

111 |
112 |
113 | 114 |
115 | Foto: Billy Abbott 116 |
117 | 118 |
119 |
120 |
121 |

Separation of structure and presentation

122 |
123 |
124 |
Structure – HTML
125 |
– logical structure of content
126 |
Presentation – CSS
127 |
– visual presentation
128 |
129 |
130 |
131 | 132 |
133 |
134 |
135 |
136 | 137 |
138 |
139 | 140 |
141 |
142 | 
143 | 						body {
144 | 							font-family : sans-serif;
145 | 						}
146 | 						h1 {
147 | 							color : green;
148 | 						}
149 | 						p {
150 | 							padding : 20px;
151 | 							background-color : black;
152 | 							color : white; 
153 | 						}
154 |
155 |
156 |
157 | 158 |
159 |
160 |
161 |
162 | 163 |
164 |
165 | 166 |
167 |
168 |
169 |

Progressive Enhancement

170 |
171 | 172 |
173 |
174 | 175 |
176 |
177 |
178 |

Graceful Degradation

179 |
180 |
181 |

182 | An Escalator can never break.
183 | It can only become stairs. 184 |

185 |
186 |

– A HTML-Document works without CSS!

187 |
188 |
189 | 190 |
191 |
192 |
193 |

Examples

194 |
195 | Themostamazingwebsiteontheinternet
196 | Nyan Cat
197 | Hasthelargehydroncolliderdestroyedtheworldyet 198 |
199 |
200 | 201 |
202 |
203 |
204 |

Any questions?

205 |
206 |

Feel free to ask us!
207 |

208 |
209 | 210 |
211 | 215 |
216 | 217 | 218 | 219 | 220 | 221 | -------------------------------------------------------------------------------- /presentation/pictures/webstandards/html.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenTechSchool/html-css-beginners/ad76c30559599fd10e56bcdba8777a58ade4adbe/presentation/pictures/webstandards/html.jpg -------------------------------------------------------------------------------- /presentation/pictures/webstandards/htmltobestyled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenTechSchool/html-css-beginners/ad76c30559599fd10e56bcdba8777a58ade4adbe/presentation/pictures/webstandards/htmltobestyled.png -------------------------------------------------------------------------------- /presentation/pictures/webstandards/mm.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenTechSchool/html-css-beginners/ad76c30559599fd10e56bcdba8777a58ade4adbe/presentation/pictures/webstandards/mm.jpg -------------------------------------------------------------------------------- /presentation/pictures/webstandards/plaincss.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenTechSchool/html-css-beginners/ad76c30559599fd10e56bcdba8777a58ade4adbe/presentation/pictures/webstandards/plaincss.png -------------------------------------------------------------------------------- /presentation/pictures/webstandards/plainhtml.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenTechSchool/html-css-beginners/ad76c30559599fd10e56bcdba8777a58ade4adbe/presentation/pictures/webstandards/plainhtml.png -------------------------------------------------------------------------------- /presentation/pictures/webstandards/progressive-enhancement.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenTechSchool/html-css-beginners/ad76c30559599fd10e56bcdba8777a58ade4adbe/presentation/pictures/webstandards/progressive-enhancement.png -------------------------------------------------------------------------------- /presentation/scripts/script.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | var url = window.location, 3 | body = document.body, 4 | slides = document.querySelectorAll('div.slide'), 5 | progress = document.querySelector('div.progress div'), 6 | slideList = [], 7 | l = slides.length, i; 8 | 9 | for (i = 0; i < l; i++) { 10 | slideList.push({ 11 | id: slides[i].id, 12 | hasInnerNavigation: null !== slides[i].querySelector('.inner') 13 | }); 14 | } 15 | 16 | function getTransform() { 17 | var denominator = Math.max( 18 | body.clientWidth / window.innerWidth, 19 | body.clientHeight / window.innerHeight 20 | ); 21 | 22 | return 'scale(' + (1 / denominator) + ')'; 23 | } 24 | 25 | function applyTransform(transform) { 26 | body.style.WebkitTransform = transform; 27 | body.style.MozTransform = transform; 28 | body.style.msTransform = transform; 29 | body.style.OTransform = transform; 30 | body.style.transform = transform; 31 | } 32 | 33 | function enterSlideMode() { 34 | body.className = 'full'; 35 | applyTransform(getTransform()); 36 | } 37 | 38 | function enterListMode() { 39 | body.className = 'list'; 40 | applyTransform('none'); 41 | } 42 | 43 | function getCurrentSlideNumber() { 44 | var i, l = slideList.length, 45 | currentSlideId = url.hash.substr(1); 46 | 47 | for (i = 0; i < l; ++i) { 48 | if (currentSlideId === slideList[i].id) { 49 | return i; 50 | } 51 | } 52 | 53 | return -1; 54 | } 55 | 56 | function scrollToSlide(slideNumber) { 57 | if (-1 === slideNumber ) { return; } 58 | 59 | var currentSlide = document.getElementById(slideList[slideNumber].id); 60 | 61 | if (null != currentSlide) { 62 | window.scrollTo(0, currentSlide.offsetTop); 63 | } 64 | } 65 | 66 | function isListMode() { 67 | return 'full' !== url.search.substr(1); 68 | } 69 | 70 | function normalizeSlideNumber(slideNumber) { 71 | if (0 > slideNumber) { 72 | return slideList.length - 1; 73 | } else if (slideList.length <= slideNumber) { 74 | return 0; 75 | } else { 76 | return slideNumber; 77 | } 78 | } 79 | 80 | function updateProgress(slideNumber) { 81 | if (null === progress) { return; } 82 | progress.style.width = (100 / (slideList.length - 1) * normalizeSlideNumber(slideNumber)).toFixed(2) + '%'; 83 | } 84 | 85 | function getSlideHash(slideNumber) { 86 | return '#' + slideList[normalizeSlideNumber(slideNumber)].id; 87 | } 88 | 89 | function goToSlide(slideNumber) { 90 | url.hash = getSlideHash(slideNumber); 91 | 92 | if (!isListMode()) { 93 | updateProgress(slideNumber); 94 | } 95 | } 96 | 97 | function getContainingSlideId(el) { 98 | var node = el; 99 | while ('BODY' !== node.nodeName && 'HTML' !== node.nodeName) { 100 | if (node.classList.contains('slide')) { 101 | return node.id; 102 | } else { 103 | node = node.parentNode; 104 | } 105 | } 106 | 107 | return ''; 108 | } 109 | 110 | function dispatchSingleSlideMode(e) { 111 | var slideId = getContainingSlideId(e.target); 112 | 113 | if ('' !== slideId && isListMode()) { 114 | e.preventDefault(); 115 | 116 | // NOTE: we should update hash to get things work properly 117 | url.hash = '#' + slideId; 118 | history.replaceState(null, null, url.pathname + '?full#' + slideId); 119 | enterSlideMode(); 120 | 121 | updateProgress(getCurrentSlideNumber()); 122 | } 123 | } 124 | 125 | // Increases inner navigation by adding 'active' class to next inactive inner navigation item 126 | function increaseInnerNavigation(slideNumber) { 127 | // Shortcut for slides without inner navigation 128 | if (true !== slideList[slideNumber].hasInnerNavigation) { return -1; } 129 | 130 | var activeNodes = document.querySelectorAll(getSlideHash(slideNumber) + ' .active'), 131 | // NOTE: we assume there is no other elements in inner navigation 132 | node = activeNodes[activeNodes.length - 1].nextElementSibling; 133 | 134 | if (null !== node) { 135 | node.classList.add('active'); 136 | return activeNodes.length + 1; 137 | } else { 138 | return -1; 139 | } 140 | } 141 | 142 | // Event handlers 143 | 144 | window.addEventListener('DOMContentLoaded', function () { 145 | if (!isListMode()) { 146 | // "?full" is present without slide hash, so we should display first slide 147 | if (-1 === getCurrentSlideNumber()) { 148 | history.replaceState(null, null, url.pathname + '?full' + getSlideHash(0)); 149 | } 150 | 151 | enterSlideMode(); 152 | updateProgress(getCurrentSlideNumber()); 153 | } 154 | }, false); 155 | 156 | window.addEventListener('popstate', function (e) { 157 | if (isListMode()) { 158 | enterListMode(); 159 | scrollToSlide(getCurrentSlideNumber()); 160 | } else { 161 | enterSlideMode(); 162 | } 163 | }, false); 164 | 165 | window.addEventListener('resize', function (e) { 166 | if (!isListMode()) { 167 | applyTransform(getTransform()); 168 | } 169 | }, false); 170 | 171 | document.addEventListener('keydown', function (e) { 172 | // Shortcut for alt, shift and meta keys 173 | if (e.altKey || e.ctrlKey || e.metaKey) { return; } 174 | 175 | var currentSlideNumber = getCurrentSlideNumber(); 176 | 177 | switch (e.which) { 178 | case 116: // F5 179 | case 13: // Enter 180 | if (isListMode() && -1 !== currentSlideNumber) { 181 | e.preventDefault(); 182 | 183 | history.pushState(null, null, url.pathname + '?full' + getSlideHash(currentSlideNumber)); 184 | enterSlideMode(); 185 | 186 | updateProgress(currentSlideNumber); 187 | } 188 | break; 189 | 190 | case 27: // Esc 191 | if (!isListMode()) { 192 | e.preventDefault(); 193 | 194 | history.pushState(null, null, url.pathname + getSlideHash(currentSlideNumber)); 195 | enterListMode(); 196 | scrollToSlide(currentSlideNumber); 197 | } 198 | break; 199 | 200 | case 33: // PgUp 201 | case 38: // Up 202 | case 37: // Left 203 | case 72: // h 204 | case 75: // k 205 | e.preventDefault(); 206 | 207 | currentSlideNumber--; 208 | goToSlide(currentSlideNumber); 209 | break; 210 | 211 | case 34: // PgDown 212 | case 40: // Down 213 | case 39: // Right 214 | case 76: // l 215 | case 74: // j 216 | e.preventDefault(); 217 | 218 | // Only go to next slide if current slide have no inner 219 | // navigation or inner navigation is fully shown 220 | // NOTE: But first of all check if there is no current slide 221 | if ( 222 | -1 === currentSlideNumber || 223 | !slideList[currentSlideNumber].hasInnerNavigation || 224 | -1 === increaseInnerNavigation(currentSlideNumber) 225 | ) { 226 | currentSlideNumber++; 227 | goToSlide(currentSlideNumber); 228 | } 229 | break; 230 | 231 | case 36: // Home 232 | e.preventDefault(); 233 | 234 | currentSlideNumber = 0; 235 | goToSlide(currentSlideNumber); 236 | break; 237 | 238 | case 35: // End 239 | e.preventDefault(); 240 | 241 | currentSlideNumber = slideList.length - 1; 242 | goToSlide(currentSlideNumber); 243 | break; 244 | 245 | case 9: // Tab = +1; Shift + Tab = -1 246 | case 32: // Space = +1; Shift + Space = -1 247 | e.preventDefault(); 248 | 249 | currentSlideNumber += e.shiftKey ? -1 : 1; 250 | goToSlide(currentSlideNumber); 251 | break; 252 | 253 | default: 254 | // Behave as usual 255 | } 256 | }, false); 257 | 258 | document.addEventListener('click', dispatchSingleSlideMode, false); 259 | document.addEventListener('touchend', dispatchSingleSlideMode, false); 260 | 261 | document.addEventListener('touchstart', function (e) { 262 | if (!isListMode()) { 263 | var currentSlideNumber = getCurrentSlideNumber(), 264 | x = e.touches[0].pageX; 265 | if (x > window.innerWidth / 2) { 266 | currentSlideNumber++; 267 | } else { 268 | currentSlideNumber--; 269 | } 270 | 271 | goToSlide(currentSlideNumber); 272 | } 273 | }, false); 274 | 275 | document.addEventListener('touchmove', function (e) { 276 | if (!isListMode()) { 277 | e.preventDefault(); 278 | } 279 | }, false); 280 | 281 | }()); 282 | -------------------------------------------------------------------------------- /presentation/themes/gim/fonts/PTMono.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenTechSchool/html-css-beginners/ad76c30559599fd10e56bcdba8777a58ade4adbe/presentation/themes/gim/fonts/PTMono.ttf -------------------------------------------------------------------------------- /presentation/themes/gim/fonts/PTMono.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenTechSchool/html-css-beginners/ad76c30559599fd10e56bcdba8777a58ade4adbe/presentation/themes/gim/fonts/PTMono.woff -------------------------------------------------------------------------------- /presentation/themes/gim/fonts/PTSans.Bold.Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenTechSchool/html-css-beginners/ad76c30559599fd10e56bcdba8777a58ade4adbe/presentation/themes/gim/fonts/PTSans.Bold.Italic.ttf -------------------------------------------------------------------------------- /presentation/themes/gim/fonts/PTSans.Bold.Italic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenTechSchool/html-css-beginners/ad76c30559599fd10e56bcdba8777a58ade4adbe/presentation/themes/gim/fonts/PTSans.Bold.Italic.woff -------------------------------------------------------------------------------- /presentation/themes/gim/fonts/PTSans.Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenTechSchool/html-css-beginners/ad76c30559599fd10e56bcdba8777a58ade4adbe/presentation/themes/gim/fonts/PTSans.Bold.ttf -------------------------------------------------------------------------------- /presentation/themes/gim/fonts/PTSans.Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenTechSchool/html-css-beginners/ad76c30559599fd10e56bcdba8777a58ade4adbe/presentation/themes/gim/fonts/PTSans.Bold.woff -------------------------------------------------------------------------------- /presentation/themes/gim/fonts/PTSans.Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenTechSchool/html-css-beginners/ad76c30559599fd10e56bcdba8777a58ade4adbe/presentation/themes/gim/fonts/PTSans.Italic.ttf -------------------------------------------------------------------------------- /presentation/themes/gim/fonts/PTSans.Italic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenTechSchool/html-css-beginners/ad76c30559599fd10e56bcdba8777a58ade4adbe/presentation/themes/gim/fonts/PTSans.Italic.woff -------------------------------------------------------------------------------- /presentation/themes/gim/fonts/PTSans.Narrow.Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenTechSchool/html-css-beginners/ad76c30559599fd10e56bcdba8777a58ade4adbe/presentation/themes/gim/fonts/PTSans.Narrow.Bold.ttf -------------------------------------------------------------------------------- /presentation/themes/gim/fonts/PTSans.Narrow.Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenTechSchool/html-css-beginners/ad76c30559599fd10e56bcdba8777a58ade4adbe/presentation/themes/gim/fonts/PTSans.Narrow.Bold.woff -------------------------------------------------------------------------------- /presentation/themes/gim/fonts/PTSans.Narrow.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenTechSchool/html-css-beginners/ad76c30559599fd10e56bcdba8777a58ade4adbe/presentation/themes/gim/fonts/PTSans.Narrow.ttf -------------------------------------------------------------------------------- /presentation/themes/gim/fonts/PTSans.Narrow.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenTechSchool/html-css-beginners/ad76c30559599fd10e56bcdba8777a58ade4adbe/presentation/themes/gim/fonts/PTSans.Narrow.woff -------------------------------------------------------------------------------- /presentation/themes/gim/fonts/PTSans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenTechSchool/html-css-beginners/ad76c30559599fd10e56bcdba8777a58ade4adbe/presentation/themes/gim/fonts/PTSans.ttf -------------------------------------------------------------------------------- /presentation/themes/gim/fonts/PTSans.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenTechSchool/html-css-beginners/ad76c30559599fd10e56bcdba8777a58ade4adbe/presentation/themes/gim/fonts/PTSans.woff -------------------------------------------------------------------------------- /presentation/themes/gim/fonts/TargetBlank.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenTechSchool/html-css-beginners/ad76c30559599fd10e56bcdba8777a58ade4adbe/presentation/themes/gim/fonts/TargetBlank.otf -------------------------------------------------------------------------------- /presentation/themes/gim/fonts/TargetBlank.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Designer: Vadim Makeev 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /presentation/themes/gim/images/grid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenTechSchool/html-css-beginners/ad76c30559599fd10e56bcdba8777a58ade4adbe/presentation/themes/gim/images/grid.png -------------------------------------------------------------------------------- /presentation/themes/gim/images/linen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenTechSchool/html-css-beginners/ad76c30559599fd10e56bcdba8777a58ade4adbe/presentation/themes/gim/images/linen.png -------------------------------------------------------------------------------- /presentation/themes/gim/images/ribbon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /presentation/themes/gim/styles/fonts.css: -------------------------------------------------------------------------------- 1 | /* PTSans */ 2 | @font-face { 3 | font-family:'PT Sans'; 4 | src:local('PT Sans'), local('PTSansRegular'), 5 | url(../fonts/PTSans.woff) format('woff'), 6 | url(../fonts/PTSans.ttf) format('truetype'), 7 | url(../fonts/PTSans.svg#PTSans-Regular) format('svg'); 8 | } 9 | @font-face { 10 | font-weight:bold; 11 | font-family:'PT Sans'; 12 | src:local('PT Sans Bold'), local('PTSansBold'), 13 | url(../fonts/PTSans.Bold.woff) format('woff'), 14 | url(../fonts/PTSans.Bold.ttf) format('truetype'), 15 | url(../fonts/PTSans.Bold.svg#PTSans-Bold) format('svg'); 16 | } 17 | @font-face { 18 | font-style:italic; 19 | font-family:'PT Sans'; 20 | src:local('PT Sans Italic'), local('PTSansItalic'), 21 | url(../fonts/PTSans.Italic.woff) format('woff'), 22 | url(../fonts/PTSans.Italic.ttf) format('truetype'), 23 | url(../fonts/PTSans.Italic.svg#PTSans-Italic) format('svg'); 24 | } 25 | @font-face { 26 | font-style:italic; 27 | font-weight:bold; 28 | font-family:'PT Sans'; 29 | src:local('PT Sans Bold Italic'), local('PTSansBoldItalic'), 30 | url(../fonts/PTSans.Bold.Italic.woff) format('woff'), 31 | url(../fonts/PTSans.Bold.Italic.ttf) format('truetype'), 32 | url(../fonts/PTSans.Bold.Italic.svg#PTSans-BoldItalic) format('svg'); 33 | } 34 | @font-face { 35 | font-family:'PT Sans Narrow'; 36 | src:local('PT Sans Narrow'), local('PTSansNarrow'), 37 | url(../fonts/PTSans.Narrow.woff) format('woff'), 38 | url(../fonts/PTSans.Narrow.ttf) format('truetype'), 39 | url(../fonts/PTSans.Narrow.svg#PTSans-Narrow) format('svg'); 40 | } 41 | @font-face { 42 | font-family:'PT Sans Narrow'; 43 | font-weight:bold; 44 | src:local('PT Sans Narrow Bold'), local('PTSansNarrowBold'), 45 | url(../fonts/PTSans.Narrow.Bold.woff) format('woff'), 46 | url(../fonts/PTSans.Narrow.Bold.ttf) format('truetype'), 47 | url(../fonts/PTSans.Narrow.Bold.svg#PTSans-NarrowBold) format('svg'); 48 | } 49 | 50 | /* PT Mono */ 51 | @font-face { 52 | font-family:'PT Mono'; 53 | src:local('PT Mono'), local('PTMonoRegular'), 54 | url(../fonts/PTMono.woff) format('woff'), 55 | url(../fonts/PTMono.ttf) format('truetype'), 56 | url(../fonts/PTMono.svg#PTMono) format('svg'); 57 | } 58 | 59 | /* Linker */ 60 | @font-face { 61 | font-family:'Target Blank'; 62 | src:url(../fonts/TargetBlank.otf) format('opentype'), 63 | url(../fonts/TargetBlank.svg#TargetBlank) format('svg'); 64 | } -------------------------------------------------------------------------------- /presentation/themes/gim/styles/print.css: -------------------------------------------------------------------------------- 1 | /* 2 | Ribbon theme for Shower presentation template: http://github.com/pepelsbey/shower 3 | Copyright © 2010–2011 Vadim Makeev, http://pepelsbey.net/ 4 | Licensed under MIT license: https://github.com/pepelsbey/shower/wiki/License 5 | */ 6 | 7 | @page { 8 | margin:0; 9 | size:1024px 640px; 10 | } 11 | 12 | /* List 13 | ---------------------------------------- */ 14 | .list { 15 | float:none; 16 | padding:0; 17 | background:#888; 18 | } 19 | 20 | /* Caption */ 21 | .list .caption { 22 | display:none; 23 | } 24 | 25 | /* Slide */ 26 | .list .slide { 27 | float:none; 28 | margin:0; 29 | padding:0; 30 | } 31 | .list .slide > DIV { 32 | width:1024px; 33 | height:640px; 34 | background:none; 35 | } 36 | .list .slide > div, 37 | .list .slide > div:hover { 38 | -webkit-box-shadow:none; 39 | -moz-box-shadow:none; 40 | box-shadow:none; 41 | } 42 | .list .slide section { 43 | -webkit-transform:none; 44 | -moz-transform:none; 45 | -ms-transform:none; 46 | -o-transform:none; 47 | transform:none; 48 | } 49 | .list .slide:after { 50 | position:absolute; 51 | bottom:85px; 52 | left:120px; 53 | color:#BBB; 54 | line-height:1; 55 | text-shadow:none; 56 | } -------------------------------------------------------------------------------- /presentation/themes/gim/styles/reset.css: -------------------------------------------------------------------------------- 1 | html, body, div, span, applet, object, iframe, 2 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 3 | a, abbr, acronym, address, big, cite, code, 4 | del, dfn, em, img, ins, kbd, q, s, samp, 5 | small, strike, strong, sub, sup, tt, var, 6 | b, u, i, center, 7 | dl, dt, dd, ol, ul, li, 8 | fieldset, form, label, legend, 9 | table, caption, tbody, tfoot, thead, tr, th, td, 10 | article, aside, canvas, details, embed, 11 | figure, figcaption, footer, header, hgroup, 12 | menu, nav, output, ruby, section, summary, 13 | time, mark, audio, video { 14 | margin:0; 15 | padding:0; 16 | border:0; 17 | font-size:100%; 18 | font:inherit; 19 | vertical-align:baseline; 20 | } 21 | article, aside, details, figcaption, figure, 22 | footer, header, hgroup, menu, nav, section { 23 | display:block; 24 | } 25 | body { 26 | line-height:1; 27 | } 28 | ol, ul { 29 | list-style:none; 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 | table { 40 | border-collapse:collapse; 41 | border-spacing:0; 42 | } -------------------------------------------------------------------------------- /presentation/themes/gim/styles/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | - GIM theme for Shower presentation template: http://github.com/pepelsbey/shower 3 | - Created by Simon Jockers: http://github.com/sjockers 4 | - MIT licensed. 5 | */ 6 | 7 | @import url(reset.css); 8 | @import url(fonts.css); 9 | 10 | body { 11 | font: 24px/1.8 'PT Sans', sans-serif; 12 | counter-reset: paging; 13 | background: #dadada; 14 | } 15 | 16 | a, 17 | a:link, 18 | a:visited { 19 | color: #3192c5; 20 | text-decoration: none; 21 | } 22 | 23 | a:hover, 24 | a:active, 25 | a:focus { 26 | color: #267198; 27 | text-decoration: underline; 28 | } 29 | 30 | h1, h2, h3 { 31 | font-family: 'PT Sans Narrow', sans-serif; 32 | font-weight: bold; 33 | } 34 | 35 | 36 | /* Meta navigation 37 | ---------------------------------------- */ 38 | 39 | .meta { 40 | line-height: 1.2em; 41 | height: 1.2em; 42 | padding: 8px 0 4px 0; 43 | background: #192d38; 44 | color: #FFF; 45 | } 46 | 47 | .meta hgroup { 48 | max-width: 1020px; 49 | margin: 0 auto; 50 | } 51 | 52 | .meta h1 { 53 | color: #FFF; 54 | font-size: .75em; 55 | font-weight: normal; 56 | } 57 | 58 | .meta h1 span { 59 | color: #84b3cd; 60 | } 61 | 62 | 63 | /* Slide 64 | ---------------------------------------- */ 65 | .slide:after { 66 | counter-increment: paging; 67 | content: counter(paging, decimal-leading-zero); 68 | } 69 | 70 | .slide section { 71 | padding: 60px 120px 0; 72 | width: 784px; 73 | height: 560px; 74 | background: #FFF; 75 | color: #222; 76 | } 77 | 78 | .slide section:before { 79 | position: absolute; 80 | top: 0; 81 | right: 120px; 82 | width: 40px; 83 | height: 120px; 84 | content: ''; 85 | } 86 | 87 | /* Header */ 88 | .slide header { 89 | margin: 0 0 40px; 90 | color: #085987; 91 | font-size: 1.5em; 92 | line-height: 1.13; 93 | text-rendering: optimizeLegibility; 94 | } 95 | 96 | .slide header blockquote { 97 | margin-top: 3em; 98 | margin-left: 2em; 99 | } 100 | 101 | /* Elements */ 102 | .slide p { 103 | margin: 0 0 1em 0; 104 | } 105 | 106 | .slide p.note { 107 | color: #888; 108 | } 109 | 110 | .slide b, 111 | .slide strong { 112 | font-weight: bold; 113 | } 114 | 115 | .slide i, 116 | .slide em { 117 | font-style: italic; 118 | } 119 | .slide kbd, 120 | .slide code { 121 | padding: 3px 8px; 122 | -webkit-border-radius: 8px; 123 | -moz-border-radius: 8px; 124 | border-radius: 8px; 125 | background: #FAFAA2; 126 | color: #000; 127 | -webkit-tab-size: 4; 128 | -moz-tab-size: 4; 129 | -o-tab-size: 4; 130 | tab-size: 4; 131 | font-family: monospace; 132 | } 133 | 134 | /* Quote */ 135 | .slide blockquote { 136 | font-style: italic; 137 | font-size: 1.5em; 138 | line-height: 1.4em; 139 | padding-bottom: 1em; 140 | } 141 | 142 | .slide blockquote:before { 143 | position: absolute; 144 | margin: -15px 0 0 -80px; 145 | color: #CCC; 146 | font-size: 150px; 147 | line-height: 1em; 148 | content: '\201C'; /* ldquo */ 149 | } 150 | 151 | /* Lists */ 152 | .slide ol, 153 | .slide ul { 154 | margin: 0 0 1em; 155 | counter-reset: list; 156 | } 157 | 158 | .slide ul ul, 159 | .slide ol ul, 160 | .slide ol ol, 161 | .slide ul ol { 162 | margin: 0 0 0 38px; 163 | } 164 | 165 | .slide ol > li:before, 166 | .slide ul > li:before { 167 | position: absolute; 168 | margin-left: -120px; 169 | width: 100px; 170 | color: #BBB; 171 | text-align: right; 172 | } 173 | 174 | .slide ul > li:before { 175 | content: '\2022'; /* bull */ 176 | line-height:1.1; 177 | font-size: 40px; 178 | } 179 | 180 | .slide ol > li:before { 181 | counter-increment: list; 182 | content: counter(list)'.'; 183 | } 184 | 185 | .slide dl { 186 | margin:0 0 45px; 187 | } 188 | 189 | .slide dt { 190 | margin: 0 0 20px; 191 | } 192 | 193 | /* Tables */ 194 | 195 | .slide table 196 | { 197 | border-collapse: collapse; /* 'cellspacing' equivalent */ 198 | } 199 | 200 | .slide table td, 201 | .slide table th 202 | { 203 | padding: 0 10px; /* 'cellpadding' equivalent */ 204 | } 205 | 206 | /* Code */ 207 | .slide pre { 208 | margin: 0 0 20px; 209 | counter-reset: code; 210 | white-space: normal; 211 | } 212 | 213 | .slide pre code { 214 | display: block; 215 | padding: 0; 216 | background: none; 217 | white-space: pre; 218 | } 219 | 220 | .slide pre code:before { 221 | position: absolute; 222 | margin: 0 0 0 -120px; 223 | width: 110px; 224 | color: #BBB; 225 | text-align: right; 226 | counter-increment: code; 227 | content: counter(code, decimal-leading-zero)'.'; 228 | } 229 | 230 | .slide pre mark { 231 | padding: 3px 8px; 232 | -webkit-border-radius: 8px; 233 | -moz-border-radius: 8px; 234 | border-radius: 8px; 235 | background: #FAFAA2; 236 | color: #000; 237 | font-style: normal; 238 | } 239 | 240 | .slide pre .important { 241 | background: #E04C3E; 242 | color: #FFF; 243 | font-weight: normal; 244 | } 245 | 246 | .slide pre .comment { 247 | padding: 0; 248 | background: none; 249 | color: #888; 250 | } 251 | 252 | /* Cover */ 253 | /* Cover */ 254 | .slide.cover p, 255 | .slide.cover em, 256 | .slide.cover strong, 257 | .slide.cover pre code { 258 | color: #fff; 259 | } 260 | 261 | .slide.cover section { 262 | background: #000; 263 | overflow: hidden; 264 | } 265 | 266 | .slide.cover section:before { 267 | display: none; 268 | } 269 | 270 | .slide.cover img, 271 | .slide.cover svg, 272 | .slide.cover video, 273 | .slide.cover object { 274 | position: absolute; 275 | top: 0; 276 | left: 50%; 277 | z-index: -1; 278 | height: 100%; 279 | -webkit-transform: translateX(-50%); 280 | -moz-transform: translateX(-50%); 281 | -ms-transform: translateX(-50%); 282 | -o-transform: translateX(-50%); 283 | transform: translateX(-50%); 284 | } 285 | 286 | .slide.cover.w img, 287 | .slide.cover.w svg, 288 | .slide.cover.w video, 289 | .slide.cover.w object { 290 | top: 50%; 291 | left: 0; 292 | width: 100%; 293 | height: auto; 294 | -webkit-transform: translateY(-50%); 295 | -moz-transform: translateY(-50%); 296 | -ms-transform: translateY(-50%); 297 | -o-transform: translateY(-50%); 298 | transform: translateY(-50%); 299 | } 300 | 301 | .slide.cover.dark header { 302 | color: #fff; 303 | } 304 | 305 | .slide a.source { 306 | position: absolute; 307 | z-index: 1000; 308 | bottom: 0; 309 | right: 15px; 310 | color: white; 311 | border: none; 312 | } 313 | 314 | .slide a.source.dark { 315 | color: black; 316 | } 317 | 318 | /* HRs */ 319 | .slide hr { 320 | margin: 30px 0; 321 | border: 1px solid #dadada; 322 | } 323 | 324 | /* Shout */ 325 | 326 | .slide.shout header, 327 | .slide.shout-louder header { 328 | color: #fff; 329 | position: absolute; 330 | top: 40%; 331 | left: 0; 332 | width: 100%; 333 | text-align: center; 334 | -webkit-transform: translateY(-50%); 335 | -moz-transform: translateY(-50%); 336 | -ms-transform: translateY(-50%); 337 | -o-transform: translateY(-50%); 338 | transform: translateY(-50%); 339 | } 340 | 341 | .slide.shout .tagline, 342 | .slide.shout-louder .tagline { 343 | margin-top: 1.5em; 344 | } 345 | 346 | .slide.shout h2, 347 | .slide.shout-louder h2 { 348 | line-height: 1; 349 | font-size: 2em; 350 | } 351 | 352 | .slide.shout section:before, 353 | .slide.shout-louder section:before { 354 | display: none; 355 | } 356 | 357 | .slide.shout section { 358 | background: #286d99; 359 | } 360 | 361 | .slide.shout-louder section { 362 | background: #E04C3E; 363 | } 364 | 365 | /* Middle */ 366 | .middle { 367 | position: absolute; 368 | top: 50%; 369 | left: 50%; 370 | -webkit-transform: translate(-50%, -50%); 371 | -moz-transform: translate(-50%, -50%); 372 | -ms-transform: translate(-50%, -50%); 373 | -o-transform: translate(-50%, -50%); 374 | transform: translate(-50%, -50%); 375 | } 376 | 377 | /* List 378 | ---------------------------------------- */ 379 | 380 | .list .slides { 381 | width: 1060px; 382 | margin: 0 auto; 383 | padding-bottom: 5em; 384 | overflow: hidden; 385 | } 386 | 387 | /* Caption */ 388 | .list .caption { 389 | text-align: center; 390 | color: #085987; 391 | line-height: 1.13; 392 | } 393 | 394 | .list .caption h1 { 395 | font-size: 2em; 396 | line-height: 1em; 397 | margin: 1.5em 0 .2em 0; 398 | font-weight: bold; 399 | } 400 | 401 | /* Slide */ 402 | .list .slide { 403 | position: relative; 404 | float: left; 405 | margin: 0 25px; 406 | padding: 80px 0 0; 407 | } 408 | 409 | .list .slide:after { 410 | position: absolute; 411 | bottom: -45px; 412 | left: 0; 413 | color: #3C3D40; 414 | line-height: 1; 415 | font-weight: bold; 416 | font-size: 25px; 417 | } 418 | 419 | .list .slide > div { 420 | position: relative; 421 | overflow: hidden; 422 | width: 480px; 423 | height: 300px; 424 | box-shadow: 0 0 15px #717379; 425 | border-radius: 1px; 426 | background: rgba(0, 0, 0, 0.3); 427 | } 428 | 429 | .list .slide > div:hover { 430 | cursor: pointer; 431 | box-shadow: 0 0 40px #4C4E53; 432 | } 433 | 434 | .list .slide:target > div { 435 | box-shadow: 436 | 0 0 0 10px 437 | rgba(60, 61, 64, 0.6), 0 0 50px #3C3D40; 438 | } 439 | 440 | .list .slide section { 441 | -webkit-transform-origin: 0 0; 442 | -webkit-transform: scale(0.46875); 443 | -moz-transform-origin: 0 0; 444 | -moz-transform: scale(0.46875); 445 | -ms-transform-origin: 0 0; 446 | -ms-transform: scale(0.46875); 447 | -o-transform-origin: 0 0; 448 | -o-transform: scale(0.46875); 449 | transform-origin: 0 0; 450 | transform: scale(0.46875); 451 | } 452 | 453 | .list .slide section:after { 454 | position: absolute; 455 | top: 0; 456 | right: 0; 457 | bottom: 0; 458 | left: 0; 459 | content: ''; 460 | } 461 | 462 | /* Medium sized viewports */ 463 | @media all and (max-width:1060px) { 464 | 465 | .meta { 466 | padding-left: 20px; 467 | } 468 | 469 | .list .slides { 470 | width: 920px; 471 | } 472 | 473 | .list .slide > div { 474 | width: 256px; 475 | height: 160px; 476 | } 477 | 478 | .list .slide section { 479 | -webkit-transform: scale(0.25); 480 | -moz-transform: scale(0.25); 481 | -ms-transform: scale(0.25); 482 | -o-transform: scale(0.25); 483 | transform: scale(0.25); 484 | } 485 | 486 | } 487 | 488 | /* Small viewports */ 489 | @media all and (max-width: 920px) { 490 | 491 | .list .caption { 492 | font-size: .9em; 493 | } 494 | 495 | .list .slides { 496 | width: 625px; 497 | } 498 | 499 | } 500 | 501 | 502 | /* Even smaller viewports */ 503 | @media all and (max-width: 625px) { 504 | 505 | .list .caption { 506 | font-size: .8em; 507 | } 508 | 509 | .list .slides { 510 | width: 310px; 511 | } 512 | 513 | } 514 | 515 | 516 | /* Full 517 | ---------------------------------------- */ 518 | .full { 519 | position: absolute; 520 | top: 50%; 521 | left: 50%; 522 | overflow: hidden; 523 | margin: -320px 0 0 -512px; 524 | width: 1024px; 525 | height: 640px; 526 | background: #000; 527 | } 528 | 529 | .full .meta, 530 | .full .caption { 531 | display: none; 532 | } 533 | 534 | .full .slide { 535 | position: absolute; 536 | visibility: hidden; 537 | } 538 | 539 | .full .slide:target { 540 | visibility: visible; 541 | } 542 | 543 | .full .slide:after { 544 | position: absolute; 545 | bottom: 85px; 546 | left: 120px; 547 | color: #BBB; 548 | line-height: 1; 549 | } 550 | 551 | .full .slide section { 552 | -webkit-transform: scale(1); 553 | -moz-transform: scale(1); 554 | -ms-transform: scale(1); 555 | -o-transform: scale(1); 556 | transform: scale(1); 557 | } 558 | 559 | .full .slide.cover { 560 | z-index: 1; 561 | } 562 | 563 | .full .slide.cover:after, 564 | .full .slide.shout:after { 565 | content: ''; 566 | } 567 | 568 | /* Progress bar */ 569 | 570 | .full .progress { 571 | position: absolute; 572 | right: 118px; 573 | bottom: 49px; 574 | left: 118px; 575 | border-radius: 7px; 576 | border: 2px solid rgba(255, 255, 255, 0.2); 577 | } 578 | 579 | .full .progress div { 580 | width: 0; 581 | height: 10px; 582 | border-radius: 5px; 583 | background: rgba(177, 177, 177, 0.4); 584 | -webkit-transition: width 0.2s linear; 585 | -moz-transition: width 0.2s linear; 586 | -ms-transition: width 0.2s linear; 587 | -o-transition: width 0.2s linear; 588 | transition: width 0.2s linear; 589 | } 590 | 591 | .full .progress-off { 592 | z-index: 1; 593 | } 594 | -------------------------------------------------------------------------------- /presentation/themes/ribbon/fonts/PTMono.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenTechSchool/html-css-beginners/ad76c30559599fd10e56bcdba8777a58ade4adbe/presentation/themes/ribbon/fonts/PTMono.ttf -------------------------------------------------------------------------------- /presentation/themes/ribbon/fonts/PTMono.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenTechSchool/html-css-beginners/ad76c30559599fd10e56bcdba8777a58ade4adbe/presentation/themes/ribbon/fonts/PTMono.woff -------------------------------------------------------------------------------- /presentation/themes/ribbon/fonts/PTSans.Bold.Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenTechSchool/html-css-beginners/ad76c30559599fd10e56bcdba8777a58ade4adbe/presentation/themes/ribbon/fonts/PTSans.Bold.Italic.ttf -------------------------------------------------------------------------------- /presentation/themes/ribbon/fonts/PTSans.Bold.Italic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenTechSchool/html-css-beginners/ad76c30559599fd10e56bcdba8777a58ade4adbe/presentation/themes/ribbon/fonts/PTSans.Bold.Italic.woff -------------------------------------------------------------------------------- /presentation/themes/ribbon/fonts/PTSans.Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenTechSchool/html-css-beginners/ad76c30559599fd10e56bcdba8777a58ade4adbe/presentation/themes/ribbon/fonts/PTSans.Bold.ttf -------------------------------------------------------------------------------- /presentation/themes/ribbon/fonts/PTSans.Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenTechSchool/html-css-beginners/ad76c30559599fd10e56bcdba8777a58ade4adbe/presentation/themes/ribbon/fonts/PTSans.Bold.woff -------------------------------------------------------------------------------- /presentation/themes/ribbon/fonts/PTSans.Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenTechSchool/html-css-beginners/ad76c30559599fd10e56bcdba8777a58ade4adbe/presentation/themes/ribbon/fonts/PTSans.Italic.ttf -------------------------------------------------------------------------------- /presentation/themes/ribbon/fonts/PTSans.Italic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenTechSchool/html-css-beginners/ad76c30559599fd10e56bcdba8777a58ade4adbe/presentation/themes/ribbon/fonts/PTSans.Italic.woff -------------------------------------------------------------------------------- /presentation/themes/ribbon/fonts/PTSans.Narrow.Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenTechSchool/html-css-beginners/ad76c30559599fd10e56bcdba8777a58ade4adbe/presentation/themes/ribbon/fonts/PTSans.Narrow.Bold.ttf -------------------------------------------------------------------------------- /presentation/themes/ribbon/fonts/PTSans.Narrow.Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenTechSchool/html-css-beginners/ad76c30559599fd10e56bcdba8777a58ade4adbe/presentation/themes/ribbon/fonts/PTSans.Narrow.Bold.woff -------------------------------------------------------------------------------- /presentation/themes/ribbon/fonts/PTSans.Narrow.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenTechSchool/html-css-beginners/ad76c30559599fd10e56bcdba8777a58ade4adbe/presentation/themes/ribbon/fonts/PTSans.Narrow.ttf -------------------------------------------------------------------------------- /presentation/themes/ribbon/fonts/PTSans.Narrow.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenTechSchool/html-css-beginners/ad76c30559599fd10e56bcdba8777a58ade4adbe/presentation/themes/ribbon/fonts/PTSans.Narrow.woff -------------------------------------------------------------------------------- /presentation/themes/ribbon/fonts/PTSans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenTechSchool/html-css-beginners/ad76c30559599fd10e56bcdba8777a58ade4adbe/presentation/themes/ribbon/fonts/PTSans.ttf -------------------------------------------------------------------------------- /presentation/themes/ribbon/fonts/PTSans.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenTechSchool/html-css-beginners/ad76c30559599fd10e56bcdba8777a58ade4adbe/presentation/themes/ribbon/fonts/PTSans.woff -------------------------------------------------------------------------------- /presentation/themes/ribbon/fonts/TargetBlank.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenTechSchool/html-css-beginners/ad76c30559599fd10e56bcdba8777a58ade4adbe/presentation/themes/ribbon/fonts/TargetBlank.otf -------------------------------------------------------------------------------- /presentation/themes/ribbon/fonts/TargetBlank.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Designer: Vadim Makeev 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /presentation/themes/ribbon/images/grid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenTechSchool/html-css-beginners/ad76c30559599fd10e56bcdba8777a58ade4adbe/presentation/themes/ribbon/images/grid.png -------------------------------------------------------------------------------- /presentation/themes/ribbon/images/linen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenTechSchool/html-css-beginners/ad76c30559599fd10e56bcdba8777a58ade4adbe/presentation/themes/ribbon/images/linen.png -------------------------------------------------------------------------------- /presentation/themes/ribbon/images/ribbon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /presentation/themes/ribbon/styles/fonts.css: -------------------------------------------------------------------------------- 1 | /* PTSans */ 2 | @font-face { 3 | font-family:'PT Sans'; 4 | src:local('PT Sans'), local('PTSansRegular'), 5 | url(../fonts/PTSans.woff) format('woff'), 6 | url(../fonts/PTSans.ttf) format('truetype'), 7 | url(../fonts/PTSans.svg#PTSans-Regular) format('svg'); 8 | } 9 | @font-face { 10 | font-weight:bold; 11 | font-family:'PT Sans'; 12 | src:local('PT Sans Bold'), local('PTSansBold'), 13 | url(../fonts/PTSans.Bold.woff) format('woff'), 14 | url(../fonts/PTSans.Bold.ttf) format('truetype'), 15 | url(../fonts/PTSans.Bold.svg#PTSans-Bold) format('svg'); 16 | } 17 | @font-face { 18 | font-style:italic; 19 | font-family:'PT Sans'; 20 | src:local('PT Sans Italic'), local('PTSansItalic'), 21 | url(../fonts/PTSans.Italic.woff) format('woff'), 22 | url(../fonts/PTSans.Italic.ttf) format('truetype'), 23 | url(../fonts/PTSans.Italic.svg#PTSans-Italic) format('svg'); 24 | } 25 | @font-face { 26 | font-style:italic; 27 | font-weight:bold; 28 | font-family:'PT Sans'; 29 | src:local('PT Sans Bold Italic'), local('PTSansBoldItalic'), 30 | url(../fonts/PTSans.Bold.Italic.woff) format('woff'), 31 | url(../fonts/PTSans.Bold.Italic.ttf) format('truetype'), 32 | url(../fonts/PTSans.Bold.Italic.svg#PTSans-BoldItalic) format('svg'); 33 | } 34 | @font-face { 35 | font-family:'PT Sans Narrow'; 36 | src:local('PT Sans Narrow'), local('PTSansNarrow'), 37 | url(../fonts/PTSans.Narrow.woff) format('woff'), 38 | url(../fonts/PTSans.Narrow.ttf) format('truetype'), 39 | url(../fonts/PTSans.Narrow.svg#PTSans-Narrow) format('svg'); 40 | } 41 | @font-face { 42 | font-family:'PT Sans Narrow'; 43 | font-weight:bold; 44 | src:local('PT Sans Narrow Bold'), local('PTSansNarrowBold'), 45 | url(../fonts/PTSans.Narrow.Bold.woff) format('woff'), 46 | url(../fonts/PTSans.Narrow.Bold.ttf) format('truetype'), 47 | url(../fonts/PTSans.Narrow.Bold.svg#PTSans-NarrowBold) format('svg'); 48 | } 49 | 50 | /* PT Mono */ 51 | @font-face { 52 | font-family:'PT Mono'; 53 | src:local('PT Mono'), local('PTMonoRegular'), 54 | url(../fonts/PTMono.woff) format('woff'), 55 | url(../fonts/PTMono.ttf) format('truetype'), 56 | url(../fonts/PTMono.svg#PTMono) format('svg'); 57 | } 58 | 59 | /* Linker */ 60 | @font-face { 61 | font-family:'Target Blank'; 62 | src:url(../fonts/TargetBlank.otf) format('opentype'), 63 | url(../fonts/TargetBlank.svg#TargetBlank) format('svg'); 64 | } -------------------------------------------------------------------------------- /presentation/themes/ribbon/styles/print.css: -------------------------------------------------------------------------------- 1 | /* 2 | Ribbon theme for Shower presentation template: http://github.com/pepelsbey/shower 3 | Copyright © 2010–2011 Vadim Makeev, http://pepelsbey.net/ 4 | Licensed under MIT license: https://github.com/pepelsbey/shower/wiki/License 5 | */ 6 | 7 | @page { 8 | margin:0; 9 | size:1024px 640px; 10 | } 11 | 12 | /* List 13 | ---------------------------------------- */ 14 | .list { 15 | float:none; 16 | padding:0; 17 | background:#888; 18 | } 19 | 20 | /* Caption */ 21 | .list .caption { 22 | display:none; 23 | } 24 | 25 | /* Slide */ 26 | .list .slide { 27 | float:none; 28 | margin:0; 29 | padding:0; 30 | } 31 | .list .slide > DIV { 32 | width:1024px; 33 | height:640px; 34 | background:none; 35 | } 36 | .list .slide > div, 37 | .list .slide > div:hover { 38 | -webkit-box-shadow:none; 39 | -moz-box-shadow:none; 40 | box-shadow:none; 41 | } 42 | .list .slide section { 43 | -webkit-transform:none; 44 | -moz-transform:none; 45 | -ms-transform:none; 46 | -o-transform:none; 47 | transform:none; 48 | } 49 | .list .slide:after { 50 | position:absolute; 51 | bottom:85px; 52 | left:120px; 53 | color:#BBB; 54 | line-height:1; 55 | text-shadow:none; 56 | } -------------------------------------------------------------------------------- /presentation/themes/ribbon/styles/reset.css: -------------------------------------------------------------------------------- 1 | html, body, div, span, applet, object, iframe, 2 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 3 | a, abbr, acronym, address, big, cite, code, 4 | del, dfn, em, img, ins, kbd, q, s, samp, 5 | small, strike, strong, sub, sup, tt, var, 6 | b, u, i, center, 7 | dl, dt, dd, ol, ul, li, 8 | fieldset, form, label, legend, 9 | table, caption, tbody, tfoot, thead, tr, th, td, 10 | article, aside, canvas, details, embed, 11 | figure, figcaption, footer, header, hgroup, 12 | menu, nav, output, ruby, section, summary, 13 | time, mark, audio, video { 14 | margin:0; 15 | padding:0; 16 | border:0; 17 | font-size:100%; 18 | font:inherit; 19 | vertical-align:baseline; 20 | } 21 | article, aside, details, figcaption, figure, 22 | footer, header, hgroup, menu, nav, section { 23 | display:block; 24 | } 25 | body { 26 | line-height:1; 27 | } 28 | ol, ul { 29 | list-style:none; 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 | table { 40 | border-collapse:collapse; 41 | border-spacing:0; 42 | } -------------------------------------------------------------------------------- /presentation/themes/ribbon/styles/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | Ribbon theme for Shower presentation template: http://github.com/pepelsbey/shower 3 | Copyright © 2010–2011 Vadim Makeev, http://pepelsbey.net/ 4 | Licensed under MIT license: https://github.com/pepelsbey/shower/wiki/License 5 | */ 6 | 7 | @import url(fonts.css); 8 | @import url(reset.css); 9 | 10 | BODY { 11 | font:25px/1.8 'PT Sans', sans-serif; 12 | counter-reset:paging; 13 | } 14 | 15 | /* Slide 16 | ---------------------------------------- */ 17 | .slide:after { 18 | counter-increment:paging; 19 | content:counter(paging, decimal-leading-zero); 20 | } 21 | .slide section { 22 | padding:80px 120px 0; 23 | width:784px; 24 | height:560px; 25 | background:#FFF; 26 | color:#000; 27 | } 28 | .slide section:before { 29 | position:absolute; 30 | top:0; 31 | right:120px; 32 | width:40px; 33 | height:120px; 34 | background:url(../images/ribbon.svg) no-repeat; 35 | content:''; 36 | } 37 | 38 | /* Header */ 39 | .slide header { 40 | margin:0 0 58px; 41 | color:#666; 42 | font:bold 40px/1.13 'PT Sans Narrow', sans-serif; 43 | } 44 | 45 | /* Elements */ 46 | .slide p { 47 | margin:0 0 45px; 48 | } 49 | .slide p.note { 50 | color:#888; 51 | } 52 | .slide a { 53 | border-bottom:0.1em solid; 54 | color:#0174A7; 55 | text-decoration:none; 56 | } 57 | .slide a[target=_blank] { 58 | margin-right:22px; 59 | } 60 | .slide a[target=_blank]:after { 61 | position:absolute; 62 | margin-left:7px; 63 | font-family:'Target Blank'; 64 | content:'\005E'; 65 | } 66 | .slide b, 67 | .slide strong { 68 | font-weight:bold; 69 | } 70 | .slide i, 71 | .slide em { 72 | font-style:italic; 73 | } 74 | .slide kbd, 75 | .slide code { 76 | padding:3px 8px; 77 | -webkit-border-radius:8px; 78 | -moz-border-radius:8px; 79 | border-radius:8px; 80 | background:#FAFAA2; 81 | color:#000; 82 | -webkit-tab-size:4; 83 | -moz-tab-size:4; 84 | -o-tab-size:4; 85 | tab-size:4; 86 | font-family:'PT Mono', monospace; 87 | } 88 | 89 | /* Quote */ 90 | .slide blockquote { 91 | font-style:italic; 92 | } 93 | .slide blockquote:before { 94 | position:absolute; 95 | margin:-15px 0 0 -80px; 96 | color:#CCC; 97 | font:200px/1 'PT Sans', sans-serif; 98 | content:'\201C'; /* ldquo */ 99 | } 100 | 101 | /* Lists */ 102 | .slide ol, 103 | .slide ul { 104 | margin:0 0 45px; 105 | counter-reset:list; 106 | } 107 | .slide ul ul, 108 | .slide ol ul, 109 | .slide ol ol, 110 | .slide ul ol { 111 | margin:0 0 0 38px; 112 | } 113 | .slide ol > li:before, 114 | .slide ul > li:before { 115 | position:absolute; 116 | margin-left:-120px; 117 | width:100px; 118 | color:#BBB; 119 | text-align:right; 120 | } 121 | .slide ul > li:before { 122 | content:'\2022'; /* bull */ 123 | line-height:1.1; 124 | font-size:40px; 125 | } 126 | .slide ol > li:before { 127 | counter-increment:list; 128 | content:counter(list)'.'; 129 | } 130 | 131 | /* Code */ 132 | .slide pre { 133 | margin:0 0 45px; 134 | counter-reset:code; 135 | white-space:normal; 136 | } 137 | .slide pre code { 138 | display:block; 139 | padding:0; 140 | background:none; 141 | white-space:pre; 142 | } 143 | .slide pre code:before { 144 | position:absolute; 145 | margin:0 0 0 -120px; 146 | width:110px; 147 | color:#BBB; 148 | text-align:right; 149 | counter-increment:code; 150 | content:counter(code, decimal-leading-zero)'.'; 151 | } 152 | .slide pre mark { 153 | padding:3px 8px; 154 | -webkit-border-radius:8px; 155 | -moz-border-radius:8px; 156 | border-radius:8px; 157 | background:#FAFAA2; 158 | color:#000; 159 | font-style:normal; 160 | } 161 | .slide pre .important { 162 | background:#C00; 163 | color:#FFF; 164 | font-weight:normal; 165 | } 166 | .slide pre .comment { 167 | padding:0; 168 | background:none; 169 | color:#888; 170 | } 171 | 172 | /* Cover */ 173 | .slide.cover section { 174 | background:#000; 175 | overflow:hidden; 176 | } 177 | .slide.cover section:before { 178 | display:none; 179 | } 180 | .slide.cover img, 181 | .slide.cover svg, 182 | .slide.cover video, 183 | .slide.cover object { 184 | position:absolute; 185 | top:0; 186 | left:50%; 187 | z-index:-1; 188 | height:100%; 189 | -webkit-transform:translateX(-50%); 190 | -moz-transform:translateX(-50%); 191 | -ms-transform:translateX(-50%); 192 | -o-transform:translateX(-50%); 193 | transform:translateX(-50%); 194 | } 195 | .slide.cover.w img, 196 | .slide.cover.w svg, 197 | .slide.cover.w video, 198 | .slide.cover.w object { 199 | top:50%; 200 | left:0; 201 | width:100%; 202 | height:auto; 203 | -webkit-transform:translateY(-50%); 204 | -moz-transform:translateY(-50%); 205 | -ms-transform:translateY(-50%); 206 | -o-transform:translateY(-50%); 207 | transform:translateY(-50%); 208 | } 209 | 210 | /* Shout */ 211 | .slide.shout section:before { 212 | display:none; 213 | } 214 | .slide.shout h2 { 215 | position:absolute; 216 | top:50%; 217 | left:0; 218 | width:100%; 219 | text-align:center; 220 | line-height:1; 221 | font-size:150px; 222 | -webkit-transform:translateY(-50%); 223 | -moz-transform:translateY(-50%); 224 | -ms-transform:translateY(-50%); 225 | -o-transform:translateY(-50%); 226 | transform:translateY(-50%); 227 | } 228 | .slide.shout h2 a[target=_blank] { 229 | margin:0; 230 | } 231 | .slide.shout h2 a[target=_blank]:after { 232 | content:''; 233 | } 234 | 235 | /* Middle */ 236 | .middle { 237 | position:absolute; 238 | top:50%; 239 | left:50%; 240 | -webkit-transform:translate(-50%, -50%); 241 | -moz-transform:translate(-50%, -50%); 242 | -ms-transform:translate(-50%, -50%); 243 | -o-transform:translate(-50%, -50%); 244 | transform:translate(-50%, -50%); 245 | } 246 | 247 | /* List 248 | ---------------------------------------- */ 249 | .list { 250 | float:left; 251 | padding:80px 0 80px 100px; 252 | background:#585A5E url(../images/linen.png); 253 | } 254 | 255 | /* Caption */ 256 | .list .caption { 257 | color:#3C3D40; 258 | text-shadow:0 1px 1px #8D8E90; 259 | } 260 | .list .caption h1 { 261 | font:bold 50px/1 'PT Sans Narrow', sans-serif; 262 | } 263 | .list .caption a { 264 | color:#4B86C2; 265 | text-shadow:0 -1px 1px #1F3F60; 266 | text-decoration:none; 267 | } 268 | .list .caption a:hover { 269 | color:#5ca4ed; 270 | } 271 | 272 | /* Slide */ 273 | .list .slide { 274 | position:relative; 275 | float:left; 276 | margin:0 50px 0 0; 277 | padding:80px 0 0; 278 | } 279 | .list .slide:after { 280 | position:absolute; 281 | bottom:-45px; 282 | left:60px; 283 | color:#3C3D40; 284 | text-shadow:0 1px 1px #8D8E90; 285 | line-height:1; 286 | font-weight:bold; 287 | font-size:25px; 288 | } 289 | .list .slide:target:after { 290 | text-shadow:0 -1px 1px #1F3F60; 291 | color:#4B86C2; 292 | } 293 | .list .slide > div { 294 | position:relative; 295 | overflow:hidden; 296 | width:512px; 297 | height:320px; 298 | box-shadow:0 0 50px #3C3D40; 299 | border-radius:1px; 300 | background:rgba(0, 0, 0, 0.3); 301 | } 302 | .list .slide > div:hover { 303 | box-shadow: 304 | 0 0 0 10px rgba(60, 61, 64, 0.6), 305 | 0 0 50px #3C3D40; 306 | } 307 | .list .slide:target > div { 308 | box-shadow: 309 | 0 0 0 1px #305F8D, 310 | 0 0 0 10px #3C7CBD, 311 | 0 0 50px #3C3D40; 312 | } 313 | .list .slide section { 314 | -webkit-transform-origin:0 0; 315 | -webkit-transform:scale(0.5); 316 | -moz-transform-origin:0 0; 317 | -moz-transform:scale(0.5); 318 | -ms-transform-origin:0 0; 319 | -ms-transform:scale(0.5); 320 | -o-transform-origin:0 0; 321 | -o-transform:scale(0.5); 322 | transform-origin:0 0; 323 | transform:scale(0.5); 324 | } 325 | .list .slide section:after { 326 | position:absolute; 327 | top:0; 328 | right:0; 329 | bottom:0; 330 | left:0; 331 | content:''; 332 | } 333 | 334 | /* Small */ 335 | @media all and (max-width:1274px) { 336 | .list .slide:after { 337 | left:30px; 338 | } 339 | .list .slide > div { 340 | width:256px; 341 | height:160px; 342 | } 343 | .list .slide section { 344 | -webkit-transform:scale(0.25); 345 | -moz-transform:scale(0.25); 346 | -ms-transform:scale(0.25); 347 | -o-transform:scale(0.25); 348 | transform:scale(0.25); 349 | } 350 | } 351 | 352 | /* Full 353 | ---------------------------------------- */ 354 | .full { 355 | position:absolute; 356 | top:50%; 357 | left:50%; 358 | overflow:hidden; 359 | margin:-320px 0 0 -512px; 360 | width:1024px; 361 | height:640px; 362 | background:#000; 363 | } 364 | .full .caption { 365 | display:none; 366 | } 367 | .full .slide { 368 | position:absolute; 369 | visibility:hidden; 370 | } 371 | .full .slide:target { 372 | visibility:visible; 373 | } 374 | .full .slide:after { 375 | position:absolute; 376 | bottom:85px; 377 | left:120px; 378 | color:#BBB; 379 | line-height:1; 380 | } 381 | .full .slide section { 382 | -webkit-transform:scale(1); 383 | -moz-transform:scale(1); 384 | -ms-transform:scale(1); 385 | -o-transform:scale(1); 386 | transform:scale(1); 387 | } 388 | .full .slide.cover { 389 | z-index:1; 390 | } 391 | .full .slide.cover:after, 392 | .full .slide.shout:after { 393 | content:''; 394 | } 395 | 396 | /* Progress */ 397 | .full .progress { 398 | position:absolute; 399 | right:118px; 400 | bottom:49px; 401 | left:118px; 402 | border-radius:7px; 403 | border:2px solid rgba(255, 255, 255, 0.2); 404 | } 405 | .full .progress DIV { 406 | width:0; 407 | height:10px; 408 | border-radius:5px; 409 | background:rgba(177, 177, 177, 0.4); 410 | -webkit-transition:width 0.2s linear; 411 | -moz-transition:width 0.2s linear; 412 | -ms-transition:width 0.2s linear; 413 | -o-transition:width 0.2s linear; 414 | transition:width 0.2s linear; 415 | } 416 | .full .progress-off { 417 | z-index:1; 418 | } -------------------------------------------------------------------------------- /requirements.txt: -------------------------------------------------------------------------------- 1 | Sphinx 2 | invoke 3 | sphinx-bootstrap-theme 4 | -------------------------------------------------------------------------------- /source/_static/custom.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; 3 | } 4 | 5 | h1, h2, h3 { 6 | font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; 7 | font-weight: bold; 8 | } 9 | 10 | div.highlight pre { 11 | font-family: 'Source Code Pro', Consolas, 'Courier New', monospace; 12 | } 13 | 14 | a.headerlink { 15 | padding: 10px; 16 | } 17 | 18 | .container dd { 19 | padding-left: 20px; 20 | } 21 | -------------------------------------------------------------------------------- /source/_templates/layout.html: -------------------------------------------------------------------------------- 1 | {# Import the theme's layout. #} 2 | {% extends "!layout.html" %} 3 | 4 | {# Custom CSS overrides #} 5 | {% set bootswatch_css_custom = [ 6 | 'http://fonts.googleapis.com/css?family=Source+Code+Pro|Montserrat:700|Open+Sans:400italic,400,700', 7 | '_static/custom.css' 8 | ] %} 9 | -------------------------------------------------------------------------------- /source/conf.py: -------------------------------------------------------------------------------- 1 | # -*- coding: utf-8 -*- 2 | # 3 | # Basic Web Site Construction documentation build configuration file, created by 4 | # sphinx-quickstart on Wed Jan 29 18:29:50 2014. 5 | # 6 | # This file is execfile()d with the current directory set to its 7 | # containing dir. 8 | # 9 | # Note that not all possible configuration values are present in this 10 | # autogenerated file. 11 | # 12 | # All configuration values have a default; values that are commented out 13 | # serve to show the default. 14 | 15 | import sys 16 | import os 17 | 18 | # If extensions (or modules to document with autodoc) are in another directory, 19 | # add these directories to sys.path here. If the directory is relative to the 20 | # documentation root, use os.path.abspath to make it absolute, like shown here. 21 | #sys.path.insert(0, os.path.abspath('.')) 22 | 23 | # -- General configuration ------------------------------------------------ 24 | 25 | # If your documentation needs a minimal Sphinx version, state it here. 26 | #needs_sphinx = '1.0' 27 | 28 | # Add any Sphinx extension module names here, as strings. They can be 29 | # extensions coming with Sphinx (named 'sphinx.ext.*') or your custom 30 | # ones. 31 | extensions = [ 32 | 'sphinx.ext.pngmath', 33 | ] 34 | 35 | # Add any paths that contain templates here, relative to this directory. 36 | templates_path = ['_templates'] 37 | 38 | # The suffix of source filenames. 39 | source_suffix = '.rst' 40 | 41 | # The encoding of source files. 42 | #source_encoding = 'utf-8-sig' 43 | 44 | # The master toctree document. 45 | master_doc = 'index' 46 | 47 | # General information about the project. 48 | project = u'Basic Web Site Construction' 49 | copyright = u'2014, OpenTechSchool' 50 | 51 | # The version info for the project you're documenting, acts as replacement for 52 | # |version| and |release|, also used in various other places throughout the 53 | # built documents. 54 | # 55 | # The short X.Y version. 56 | version = '1.0' 57 | # The full version, including alpha/beta/rc tags. 58 | release = '1.0' 59 | 60 | # The language for content autogenerated by Sphinx. Refer to documentation 61 | # for a list of supported languages. 62 | #language = None 63 | 64 | # There are two options for replacing |today|: either, you set today to some 65 | # non-false value, then it is used: 66 | #today = '' 67 | # Else, today_fmt is used as the format for a strftime call. 68 | #today_fmt = '%B %d, %Y' 69 | 70 | # List of patterns, relative to source directory, that match files and 71 | # directories to ignore when looking for source files. 72 | exclude_patterns = [] 73 | 74 | # The reST default role (used for this markup: `text`) to use for all 75 | # documents. 76 | #default_role = None 77 | 78 | # If true, '()' will be appended to :func: etc. cross-reference text. 79 | #add_function_parentheses = True 80 | 81 | # If true, the current module name will be prepended to all description 82 | # unit titles (such as .. function::). 83 | #add_module_names = True 84 | 85 | # If true, sectionauthor and moduleauthor directives will be shown in the 86 | # output. They are ignored by default. 87 | #show_authors = False 88 | 89 | # The name of the Pygments (syntax highlighting) style to use. 90 | pygments_style = 'sphinx' 91 | highlight_language = 'css' 92 | 93 | # A list of ignored prefixes for module index sorting. 94 | #modindex_common_prefix = [] 95 | 96 | # If true, keep warnings as "system message" paragraphs in the built documents. 97 | #keep_warnings = False 98 | 99 | 100 | # -- Options for HTML output ---------------------------------------------- 101 | 102 | # The theme to use for HTML and HTML Help pages. See the documentation for 103 | # a list of builtin themes. 104 | try: 105 | import sphinx_bootstrap_theme 106 | html_theme = 'bootstrap' 107 | html_theme_path = sphinx_bootstrap_theme.get_html_theme_path() 108 | except ImportError: 109 | html_theme = 'default' 110 | 111 | # Theme options are theme-specific and customize the look and feel of a theme 112 | # further. For a list of options available for each theme, see the 113 | # documentation. 114 | #html_theme_options = {} 115 | 116 | # Add any paths that contain custom themes here, relative to this directory. 117 | #html_theme_path = [] 118 | 119 | # The name for this set of Sphinx documents. If None, it defaults to 120 | # " v documentation". 121 | #html_title = None 122 | 123 | # A shorter title for the navigation bar. Default is the same as html_title. 124 | #html_short_title = None 125 | 126 | # The name of an image file (relative to this directory) to place at the top 127 | # of the sidebar. 128 | #html_logo = None 129 | 130 | # The name of an image file (within the static path) to use as favicon of the 131 | # docs. This file should be a Windows icon file (.ico) being 16x16 or 32x32 132 | # pixels large. 133 | #html_favicon = None 134 | 135 | # Add any paths that contain custom static files (such as style sheets) here, 136 | # relative to this directory. They are copied after the builtin static files, 137 | # so a file named "default.css" will overwrite the builtin "default.css". 138 | html_static_path = ['_static'] 139 | 140 | # Add any extra paths that contain custom files (such as robots.txt or 141 | # .htaccess) here, relative to this directory. These files are copied 142 | # directly to the root of the documentation. 143 | #html_extra_path = [] 144 | 145 | # If not '', a 'Last updated on:' timestamp is inserted at every page bottom, 146 | # using the given strftime format. 147 | #html_last_updated_fmt = '%b %d, %Y' 148 | 149 | # If true, SmartyPants will be used to convert quotes and dashes to 150 | # typographically correct entities. 151 | #html_use_smartypants = True 152 | 153 | # Custom sidebar templates, maps document names to template names. 154 | #html_sidebars = {} 155 | 156 | # Additional templates that should be rendered to pages, maps page names to 157 | # template names. 158 | #html_additional_pages = {} 159 | 160 | # If false, no module index is generated. 161 | #html_domain_indices = True 162 | 163 | # If false, no index is generated. 164 | #html_use_index = True 165 | 166 | # If true, the index is split into individual pages for each letter. 167 | #html_split_index = False 168 | 169 | # If true, links to the reST sources are added to the pages. 170 | #html_show_sourcelink = True 171 | 172 | # If true, "Created using Sphinx" is shown in the HTML footer. Default is True. 173 | #html_show_sphinx = True 174 | 175 | # If true, "(C) Copyright ..." is shown in the HTML footer. Default is True. 176 | #html_show_copyright = True 177 | 178 | # If true, an OpenSearch description file will be output, and all pages will 179 | # contain a tag referring to it. The value of this option must be the 180 | # base URL from which the finished HTML is served. 181 | #html_use_opensearch = '' 182 | 183 | # This is the file name suffix for HTML files (e.g. ".xhtml"). 184 | #html_file_suffix = None 185 | 186 | # Output file base name for HTML help builder. 187 | htmlhelp_basename = 'BasicWebSiteConstructiondoc' 188 | 189 | 190 | # -- Options for LaTeX output --------------------------------------------- 191 | 192 | latex_elements = { 193 | # The paper size ('letterpaper' or 'a4paper'). 194 | #'papersize': 'letterpaper', 195 | 196 | # The font size ('10pt', '11pt' or '12pt'). 197 | #'pointsize': '10pt', 198 | 199 | # Additional stuff for the LaTeX preamble. 200 | #'preamble': '', 201 | } 202 | 203 | # Grouping the document tree into LaTeX files. List of tuples 204 | # (source start file, target name, title, 205 | # author, documentclass [howto, manual, or own class]). 206 | latex_documents = [ 207 | ('index', 'BasicWebSiteConstruction.tex', u'Basic Web Site Construction Documentation', 208 | u'OpenTechSchool', 'manual'), 209 | ] 210 | 211 | # The name of an image file (relative to this directory) to place at the top of 212 | # the title page. 213 | #latex_logo = None 214 | 215 | # For "manual" documents, if this is true, then toplevel headings are parts, 216 | # not chapters. 217 | #latex_use_parts = False 218 | 219 | # If true, show page references after internal links. 220 | #latex_show_pagerefs = False 221 | 222 | # If true, show URL addresses after external links. 223 | #latex_show_urls = False 224 | 225 | # Documents to append as an appendix to all manuals. 226 | #latex_appendices = [] 227 | 228 | # If false, no module index is generated. 229 | #latex_domain_indices = True 230 | 231 | 232 | # -- Options for manual page output --------------------------------------- 233 | 234 | # One entry per manual page. List of tuples 235 | # (source start file, name, description, authors, manual section). 236 | man_pages = [ 237 | ('index', 'basicwebsiteconstruction', u'Basic Web Site Construction Documentation', 238 | [u'OpenTechSchool'], 1) 239 | ] 240 | 241 | # If true, show URL addresses after external links. 242 | #man_show_urls = False 243 | 244 | 245 | # -- Options for Texinfo output ------------------------------------------- 246 | 247 | # Grouping the document tree into Texinfo files. List of tuples 248 | # (source start file, target name, title, author, 249 | # dir menu entry, description, category) 250 | texinfo_documents = [ 251 | ('index', 'BasicWebSiteConstruction', u'Basic Web Site Construction Documentation', 252 | u'OpenTechSchool', 'BasicWebSiteConstruction', 'One line description of project.', 253 | 'Miscellaneous'), 254 | ] 255 | 256 | # Documents to append as an appendix to all manuals. 257 | #texinfo_appendices = [] 258 | 259 | # If false, no module index is generated. 260 | #texinfo_domain_indices = True 261 | 262 | # How to display URL addresses: 'footnote', 'no', or 'inline'. 263 | #texinfo_show_urls = 'footnote' 264 | 265 | # If true, do not generate a @detailmenu in the "Top" node's menu. 266 | #texinfo_no_detailmenu = False 267 | -------------------------------------------------------------------------------- /source/core/README.md: -------------------------------------------------------------------------------- 1 | This directory is for core course content. 2 | From basic HTML structure through different CSS selectors and properties so that learners create a personal portfolio. 3 | -------------------------------------------------------------------------------- /source/core/definitions.rst: -------------------------------------------------------------------------------- 1 | Definitions 2 | =========== 3 | 4 | Here are some terms to get familiar with, before we dive into making a website. 5 | 6 | HTML - HyperText Markup Language 7 | -------------------------------- 8 | 9 | HTML is the main markup language for creating web pages and other 10 | information that can be displayed in a web browser. You can write your 11 | web application in any programming languages, but in the end it will 12 | always be transformed into HTML because that’s the language of the 13 | browser. It is a hierarchical language. 14 | 15 | A short bit of history 16 | ---------------------- 17 | 18 | HTML was developed at the CERN in Switzerland. Its inventor is Tim 19 | Berners-Lee. In 1980 he wrote his first hypertext system for personal 20 | use - the predecessor of HTML. With the first browser and server 21 | software the very young internet and HTML made their way to conquer 22 | the world. In 1992 two copies of a free web browser were downloaded 23 | from a computer at CERN to a computer in the USA. In 1995 the first 24 | Internet Explorer was published. 25 | 26 | How about HTML5? What’s that? 27 | ----------------------------- 28 | 29 | This is just the latest version of HTML. There is a lot of interest 30 | about it, because it improves and adds many HTML elements, making it 31 | easier to write and to use. 32 | 33 | CSS - Cascading Style Sheets 34 | ---------------------------- 35 | 36 | CSS is a language used for describing the look and formatting of a 37 | document written in a markup language. It is closely connected with 38 | HTML, since it gives style to HTML elements. In contrast to HTML, CSS 39 | has no hierarchy and can be written in the order that we choose. 40 | 41 | **CSS3** is the last released version of CSS, and it also improves CSS a 42 | lot. For example, it gives the possibility to animate an element. 43 | 44 | -------------------------------------------------------------------------------- /source/core/images/css-box-model.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenTechSchool/html-css-beginners/ad76c30559599fd10e56bcdba8777a58ade4adbe/source/core/images/css-box-model.gif -------------------------------------------------------------------------------- /source/core/portfolio-2.rst: -------------------------------------------------------------------------------- 1 | Position, anchors and form elements 2 | =================================== 3 | 4 | So far we built the core of our website. Now we need a home page and a 5 | contact page. Here we explain some basic concepts but after that you 6 | have the freedom to experiment. 7 | 8 | Home page and positioning 9 | ------------------------- 10 | 11 | Let's start from the home page. 12 | 13 | **Goal** 14 | 15 | The home page is made by: 16 | 17 | - navigation menu 18 | - big centered and resizable image 19 | - two sentence intro text (on the top of the image) 20 | 21 | So let's open a new file and set the basic structure. To make the nav 22 | menu we can just copy what we have done in the first part. Then, take an 23 | image that you like. It should be big enough and with good resolution. 24 | 25 | Just after the nav tag, include your image and give it a class name. Now 26 | you need to set the width of just this image as full-width, which is 27 | 100%. 28 | 29 | :: 30 | 31 | .home-imag { 32 | width: 100% 33 | } 34 | 35 | In this way your image will follow the size of the browser window. It is 36 | possible that when the window is very small or very big, you can see a 37 | white space at the bottom of the image. You can change it setting the 38 | height: 100%. But now you need to be sure that you image isn't 39 | stretched. 40 | 41 | :: 42 | 43 | .home-imag { 44 | height: 100% 45 | } 46 | 47 | After the image, write another header tag within h1 and h2, add a class 48 | name to your header so you can style it and not be confused with the 49 | other one. (I will use header-home as the class name) In the CSS we are 50 | goint to write this: 51 | 52 | :: 53 | 54 | .header-home { 55 | position: relative; 56 | top: -300px; 57 | } 58 | 59 | Here we are changing the position of this element by bringing it outside 60 | of the normal flow. Its position is now relative to its parent element 61 | (in our case the ``div#wrap-centered``). Now you can move your element where 62 | you prefer in the page using the properties top, right, bottom and left. 63 | 64 | So, what is positioning? When a box is taken out of the normal flow, all 65 | the content that is still within normal flow will ignore it completely 66 | and not make space for it. Elements can be positioned using the top, 67 | bottom, left, and right properties. These properties will not work, 68 | however, unless the position property is set first. They also work 69 | differently depending on the positioning method. 70 | 71 | There are four different positioning methods. 72 | 73 | Static positioning 74 | A statically positioned box is one that is in 75 | normal flow, from top to bottom. 76 | 77 | Fixed Positioning 78 | An element with fixed position is positioned 79 | relative to the browser window. What makes it possible is: position: 80 | fixed. After setting this, you can play with changing the position, 81 | adding a different pixel value to top, bottom, left or right 82 | positioning. 83 | 84 | Relative Positioning 85 | A relatively positioned element is positioned 86 | relative to its normal position. Elements that come after a 87 | relatively-positioned element behave as if the relatively-positioned 88 | element was still in its ‘normal flow’ position - leaving a gap for it. 89 | What makes it possible is: position: relative. After setting this, you 90 | can play with changing the position, adding a different pixel value to 91 | top, bottom, left or right positioning. 92 | 93 | Absolute Positioning 94 | An absolutely positioned box is moved out of the normal flow entirely. 95 | What makes it possible is: position: absolute. After setting this, you 96 | can play with changing the position, adding a different pixel value to 97 | top, bottom, left or right positioning. 98 | 99 | Overlapping Elements: z-index property 100 | When elements are positioned outside of the normal flow, they can 101 | overlap other elements. The z-index property specifies the stack order 102 | of an element (which element should be placed in front of, or behind, 103 | the others). What make it possible is: z-index: n°pixel. 104 | 105 | Knowing all that, create your own home page! 106 | 107 | If you want to learn more about positioning, 108 | `check this demo out `_ 109 | 110 | Contact page 111 | ------------ 112 | 113 | Time to create the contact page! 114 | 115 | **Goal** 116 | 117 | Create a page with: 118 | 119 | - a small paragraph about yourself 120 | - some nice links to contact you 121 | 122 | The contact page will have the same structure as the page you created 123 | before. So just copy the file and rename it to ``contact.html`` or 124 | something like that. 125 | 126 | Then you remove everything inside the ``#wrap-centered`` div container 127 | because that's where you want to display the contact page now. 128 | 129 | Next let's add a paragraph to tell the user who you are. You can do that 130 | using the ``

`` tag. 131 | 132 | Inside that tag you can write some text that will be displayed to the 133 | user. 134 | 135 | For example: ``

Hi I am Mr. Smith. Feel free to contact me.

`` 136 | 137 | You also can add a linebreak after the first sentence with a ``
`` 138 | tag and maybe you want to highlight your name by making it italic: 139 | ``Mr. Smith``. 140 | 141 | If you want to add more styling to the paragraph you should do that in 142 | the CSS file. Just add a class to the paragraph 143 | ``

`` and over in the CSS file add some styling 144 | to the text: 145 | 146 | :: 147 | 148 | .contact-intro { 149 | font-size: 20px; 150 | font-family: Arial; 151 | margin: 10px; 152 | } 153 | 154 | That's it for the short introduction. Now let's get to the links where 155 | visitors of your site can actually contact you. 156 | 157 | Just create a list for the different contact options using the 158 | ``

`` tag (ul for unordered list) and also add a class to the 159 | list so you can style it later on: ``