diff --git a/00-HTML-CSS-basics/CSS_1/css/normalize.css b/00-HTML-CSS-basics/CSS_1/css/normalize.css new file mode 100644 index 000000000..3d6624cd1 --- /dev/null +++ b/00-HTML-CSS-basics/CSS_1/css/normalize.css @@ -0,0 +1,341 @@ +/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} \ No newline at end of file diff --git a/00-HTML-CSS-basics/CSS_1/css/style.css b/00-HTML-CSS-basics/CSS_1/css/style.css new file mode 100644 index 000000000..20489a014 --- /dev/null +++ b/00-HTML-CSS-basics/CSS_1/css/style.css @@ -0,0 +1,89 @@ +html, body{ + margin: 0; + height: 100%; +} + +html { + box-sizing: border-box; +} +*, *::before, *::after { + box-sizing: inherit; +} + +*{ + font-size: 14px; + font-family: Verdana; + font-weight: bold !important; /* answer 6*/ +} +header{ + background-color: red; + text-align: center; +} +footer{ + background-color: blue; + text-align: center; +} +aside{ + background-color: yellow; +} +nav{ + background-color: green; +} +section{ + background-color: orange; +} + +.header{ + font-size: 46px; + display: block; + height: 10%; + +} +.footer{ + font-size: 10px; + display: block; + width: 100%; + min-height: 5%; +} +.content{ + font-size: 14px; + width: 50%; + min-height: 85%; + float: left; + padding: 2%; + position: relative; +} +.navigation{ + font-size: 12px; + width: 20%; + min-height: 85%; + display: inline-block; + float:left; +} +.sidebar{ + font-size: 10px; + width: 30%; + min-height: 85%; + float:right; +} +.clear{ + clear: both; +} + +[class$="r"]{ + background-color: magenta; +} + +[class*="a"]:not([class$="r"]){ + background-color: blue; +} + +@media screen and (max-width: 600px) { + .navigation, .sidebar { + width: 100%; + min-height: 5%; + } + .content{ + width: 100%; + } +} \ No newline at end of file diff --git a/00-HTML-CSS-basics/CSS_1/index.html b/00-HTML-CSS-basics/CSS_1/index.html new file mode 100644 index 000000000..ba65f3d06 --- /dev/null +++ b/00-HTML-CSS-basics/CSS_1/index.html @@ -0,0 +1,92 @@ + + + + + + + + + + + + + + + + + + + + + + +
Header
+ + + +
Section +
+ Header +
+
article
+ +
+ + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/00-HTML-CSS-basics/CSS_2/css/layout.css b/00-HTML-CSS-basics/CSS_2/css/layout.css new file mode 100644 index 000000000..231bf0283 --- /dev/null +++ b/00-HTML-CSS-basics/CSS_2/css/layout.css @@ -0,0 +1,80 @@ +*{ + box-sizing: border-box; +} + +*, *::before, *after{ + box-sizing: inherit; +} +img{ + width: 100%; + height: 100%; +} +body{ + background-color: black; + font-family: Arial, Verdana; + +} +h1{ + color: white; + font-size: 3rem; +} +#container{ + margin: 0 auto; + /* max-width: 48rem; */ + width: 80%; +} +.column{ + float:left; + text-align: center; + position: relative; +} +.column span{ + opacity: 0; + width: 100%; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; +} +.column span:hover{ + height: 100%; + background-color: none; + opacity: 1; +} +.column span:hover span{ + font-size: 1.2rem; + height: 18%; + background-color: white; + opacity: 0.8; + transition: opacity 2s, height 2s; + padding: 2%; +} +.column.full { + width: 100%; +} +.column.third{ + width: 33.33%; +} +.column.fourth{ + width: 25%; +} + +.clearfix:before, .clearfix:after{ + content: ""; + display: table; +} +.clearfix:after { + clear: both; +} +@media screen and (max-width: 700px) { + h1{font-size: 1rem;} + .column span:hover span{ + font-size: 0.1rem; + height: 25%; + background-color: white; + opacity: 0.8; + transition: opacity 2s, height 3s; + padding: 2%; +} +} \ No newline at end of file diff --git a/00-HTML-CSS-basics/CSS_2/css/normalize.css b/00-HTML-CSS-basics/CSS_2/css/normalize.css new file mode 100644 index 000000000..3d6624cd1 --- /dev/null +++ b/00-HTML-CSS-basics/CSS_2/css/normalize.css @@ -0,0 +1,341 @@ +/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} \ No newline at end of file diff --git a/00-HTML-CSS-basics/CSS_2/img/captain.png b/00-HTML-CSS-basics/CSS_2/img/captain.png new file mode 100644 index 000000000..82b44298a Binary files /dev/null and b/00-HTML-CSS-basics/CSS_2/img/captain.png differ diff --git a/00-HTML-CSS-basics/CSS_2/img/elasticgirl.png b/00-HTML-CSS-basics/CSS_2/img/elasticgirl.png new file mode 100644 index 000000000..a1906ab0b Binary files /dev/null and b/00-HTML-CSS-basics/CSS_2/img/elasticgirl.png differ diff --git a/00-HTML-CSS-basics/CSS_2/img/flash.png b/00-HTML-CSS-basics/CSS_2/img/flash.png new file mode 100644 index 000000000..8bd70ebc6 Binary files /dev/null and b/00-HTML-CSS-basics/CSS_2/img/flash.png differ diff --git a/00-HTML-CSS-basics/CSS_2/img/robin.png b/00-HTML-CSS-basics/CSS_2/img/robin.png new file mode 100644 index 000000000..5d0815abb Binary files /dev/null and b/00-HTML-CSS-basics/CSS_2/img/robin.png differ diff --git a/00-HTML-CSS-basics/CSS_2/img/spiderman.png b/00-HTML-CSS-basics/CSS_2/img/spiderman.png new file mode 100644 index 000000000..2883b263c Binary files /dev/null and b/00-HTML-CSS-basics/CSS_2/img/spiderman.png differ diff --git a/00-HTML-CSS-basics/CSS_2/img/superman.png b/00-HTML-CSS-basics/CSS_2/img/superman.png new file mode 100644 index 000000000..a1e43139e Binary files /dev/null and b/00-HTML-CSS-basics/CSS_2/img/superman.png differ diff --git a/00-HTML-CSS-basics/CSS_2/img/wonderwoman.png b/00-HTML-CSS-basics/CSS_2/img/wonderwoman.png new file mode 100644 index 000000000..ecaad3f19 Binary files /dev/null and b/00-HTML-CSS-basics/CSS_2/img/wonderwoman.png differ diff --git a/00-HTML-CSS-basics/CSS_2/index.html b/00-HTML-CSS-basics/CSS_2/index.html new file mode 100644 index 000000000..333b51bef --- /dev/null +++ b/00-HTML-CSS-basics/CSS_2/index.html @@ -0,0 +1,75 @@ + + + + + + + + CSS Basics Layout + + + + + + + +
+
+

Meet the SuperHeroes!

+
+
+
+ an image of superheroe +
+ This is the Captain! +
+
+ +
+ an image of superheroe +
+ The beautiful elasticgirl +
+
+ +
+ an image of superheroe +
+ Flash, like lightning +
+
+
+ +
+
+ an image of superheroe +
+ Robin, the kid +
+
+ +
+ an image of superheroe +
+ The amazing Spider-Man +
+
+ +
+ an image of superheroe +
+ Superman from Krypton +
+
+
+ an image of superheroe +
+ WonderWoman son of Zeus +
+
+
+ +
+ + + \ No newline at end of file diff --git a/00-HTML-CSS-basics/CSS_2/notas.css b/00-HTML-CSS-basics/CSS_2/notas.css new file mode 100644 index 000000000..417ac5d4f --- /dev/null +++ b/00-HTML-CSS-basics/CSS_2/notas.css @@ -0,0 +1,201 @@ +/* +Notas recordatorias grid +*/ + +/* Min-width Media Queries */ +/* Small screens (default) */ +html { font-size: 100%; } + +/* Medium screens (640px) */ +@media (min-width: 40rem) { + html { font-size: 112%; } +} + +/* Large screens (1024px) */ +@media (min-width: 64rem) { + html { font-size: 120%; } +} + + + +/* +Not All Browsers are Created Equal +Browsers will render your CSS differently. +To avoid this, it’s a good idea to use a modern alternative to a reset like Normalize.css, + which will render elements more consistently cross-browser. + Remember to include it as-is before your stylesheet. + + +*/ + +/* +Add the Viewport Meta Tag +Place in the of your HTML. +This enables use of media queries for cross-device layouts. + +*/ + +/*CSS Box Model +It’s important to understand the basics, like how elements are generated and behave in the browser, before diving into responsive web design. +The CSS Box Model consists of four distinct parts. + +content +Content +The content of the box, where text and images appear. + +padding +Padding +Clears an area around the content. + +border +Border +A border that goes around the padding. + +margin +Margin +Clears an area around the border. +*/ + +/* +Use box-sizing: border-box +Place at the top of your CSS file. The * will target all elements on the page. + +*, *:before, *:after { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +Your Choice +What was once a bug is now a widely used CSS property. It basically means you can choose whether or not to include borders and padding in the width of your content. + +Without Box Model +Without box-sizing: border-box +Margin, borders and padding are drawn outside the set width of your content. + +With Box Model +With box-sizing: border-box +Borders and padding are drawn inside the set width of your content. The margin is drawn outside. +*/ + +/* +Create a Container +A container holds all elements and controls the page’s maximum width. Using a container will make designing for responsive easier! + +.container { + margin: 0 auto; + max-width: 48rem; + width: 90%; +} +
+ +
+ +*/ + +/* +Create a Column +With mobile first, columns are block level (takes up the full width available) by default. No additional styles needed! + +
+
+ +
+
+*/ + + + +/* + +Create Column Sizes +On larger screens, columns gain float: left in order to stack content horizontally. +Columns now use padding for gutters, so you no longer need to worry about removing margins. + +.column .half +.column .half +
+
+
+ +
+
+ +
+
+
+@media (min-width: 40rem) { + .column { + float: left; + padding-left: 1rem; + padding-right: 1rem; + } + + .column.full { width: 100%; } + .column.two-thirds { width: 66.7%; } + .column.half { width: 50%; } + .column.third { width: 33.3%; } + .column.fourth { width: 25%; } + .column.flow-opposite { float: right; } +} + +*/ + +/* +Create Rows +Columns are wrapped in rows to prevent other elements from stacking next to them, otherwise known as clearing issues. Rows are cleared using the popular clearfix, which was created by Nicolas Gallagher. + +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+.clearfix:before, +.clearfix:after { + content: " "; + display: table; +} + +.clearfix:after { + clear: both; +} + +.clearfix { + *zoom: 1; +} +.column .half +.column .half +.column .half +.column .half +Flow Opposite +Add the class .flow-opposite to columns where you want content to display first on mobile but appear on the right on larger screens. + +
+
+
+ +
+
+ +
+
+
+@media (min-width: 40rem) { + .column.flow-opposite { float: right; } +} + +*/ \ No newline at end of file diff --git a/00-HTML-CSS-basics/HTML/example-image.png b/00-HTML-CSS-basics/HTML/example-image.png new file mode 100644 index 000000000..add070a0b Binary files /dev/null and b/00-HTML-CSS-basics/HTML/example-image.png differ diff --git a/00-HTML-CSS-basics/HTML/example-sound.mp3 b/00-HTML-CSS-basics/HTML/example-sound.mp3 new file mode 100644 index 000000000..a9a911ca3 Binary files /dev/null and b/00-HTML-CSS-basics/HTML/example-sound.mp3 differ diff --git a/00-HTML-CSS-basics/HTML/example-sound.ogg b/00-HTML-CSS-basics/HTML/example-sound.ogg new file mode 100644 index 000000000..9e2b02990 Binary files /dev/null and b/00-HTML-CSS-basics/HTML/example-sound.ogg differ diff --git a/00-HTML-CSS-basics/HTML/example-video.mp4 b/00-HTML-CSS-basics/HTML/example-video.mp4 new file mode 100644 index 000000000..abef63bfc Binary files /dev/null and b/00-HTML-CSS-basics/HTML/example-video.mp4 differ diff --git a/00-HTML-CSS-basics/HTML/example-video.ogv b/00-HTML-CSS-basics/HTML/example-video.ogv new file mode 100644 index 000000000..a886229b9 Binary files /dev/null and b/00-HTML-CSS-basics/HTML/example-video.ogv differ diff --git a/00-HTML-CSS-basics/HTML/expenses.html b/00-HTML-CSS-basics/HTML/expenses.html new file mode 100644 index 000000000..ac7faa371 --- /dev/null +++ b/00-HTML-CSS-basics/HTML/expenses.html @@ -0,0 +1,31 @@ + + + + + Expenses + + + + + + + + + + + + + + + + + + + + + + + +
ExpenseCost
Supermarket$800
Bus$300
Other$400
+ + \ No newline at end of file diff --git a/00-HTML-CSS-basics/HTML/image_video_sound.html b/00-HTML-CSS-basics/HTML/image_video_sound.html new file mode 100644 index 000000000..695fb156c --- /dev/null +++ b/00-HTML-CSS-basics/HTML/image_video_sound.html @@ -0,0 +1,29 @@ + + + + + + Image, Video & Sound + + +

Image, Video & Sound Tags

+ +

Image

+ an example Spider-Man image + +

Video

+ + +

Sound

+ + + \ No newline at end of file diff --git a/00-HTML-CSS-basics/HTML/my_todo_list.html b/00-HTML-CSS-basics/HTML/my_todo_list.html new file mode 100644 index 000000000..4e7a4d8a2 --- /dev/null +++ b/00-HTML-CSS-basics/HTML/my_todo_list.html @@ -0,0 +1,16 @@ + + + + + + My todo list + + +

My todo list

+ + + \ No newline at end of file diff --git a/00-HTML-CSS-basics/HTML/singUp.html b/00-HTML-CSS-basics/HTML/singUp.html new file mode 100644 index 000000000..78fbf33b4 --- /dev/null +++ b/00-HTML-CSS-basics/HTML/singUp.html @@ -0,0 +1,37 @@ + + + + + + SingUp! + + + +
+ +
+ +
+ +
+ +
+ + +
+ +
+
+ + + + +
+ + + \ No newline at end of file