diff --git a/public/basics of css/2.html b/public/basics of css/2.html new file mode 100644 index 0000000..aa9e429 --- /dev/null +++ b/public/basics of css/2.html @@ -0,0 +1,59 @@ + + + + + + + + + + + + + + + + + + +
+
+

Header

+
+ +
+

Section

+
+

Header

+
+
+

Article

+
+
+

Footer

+
+
+ + +
+ + + + + + + + + + + + \ No newline at end of file diff --git a/public/basics of css/252.html b/public/basics of css/252.html new file mode 100644 index 0000000..26823fe --- /dev/null +++ b/public/basics of css/252.html @@ -0,0 +1,131 @@ + + + + + + + + + + + + + + + + + +

Some nice albums...

+
+
+
+ +

+ Goo +

+ + +
+
+ +
+ +

+ Metallica +

+ + +
+ +
+ +

+ The Undeserving +

+ + +
+
+ +
+
+
+ +

+ Youth Attack! +

+ + +
+
+ +
+ +

+ Pure Holocaust +

+ + +
+ +
+ +

+ K7 +

+ + +
+
+ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/basics of css/css/normalize.css b/public/basics of css/css/normalize.css new file mode 100644 index 0000000..af94440 --- /dev/null +++ b/public/basics of css/css/normalize.css @@ -0,0 +1,48 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} \ No newline at end of file diff --git a/public/basics of css/css/style.css b/public/basics of css/css/style.css new file mode 100644 index 0000000..a2c5448 --- /dev/null +++ b/public/basics of css/css/style.css @@ -0,0 +1,113 @@ +header, nav, aside, section, footer, article { + background-color: #505050; + border-radius: 10px; + text-align: center; +} + +html { + font-family: Sans-serif; +} + +body { + color: white; + background-color: #202020; + font-weight: 750; +} + +/*SECTION*/ +.content{ + width: 660px; + background-color: #505050; + padding-top: 20px; + padding-bottom: 10px; + margin-bottom: 10px; + float: left; +} + +.content .header{ + height: 40px; + padding-top: 12px; + margin-top: 20px; + margin-left: 10px; + margin-right: 10px; + padding-bottom: 20px; + color: white; +} +.content .article{ + text-align: center; + height: 80px; + margin-left: 10px; + margin-right: 10px; + padding-top: 70px; + padding-bottom: 47px; + background-color: blue; +} +.content .footer{ + margin-top: 10px; + height: 45px; + padding-top: 15px; + margin-right: 10px; + margin-left: 10px; + color: white; +} +/*END SECTION*/ + +.header { + color: black; + margin: 1%; + padding: 2%; +} + +.footer { + height: 50px; + font-size: 10px; + margin-top: 10px; + clear: left; + color: black; + margin-left: 1%; + margin-right: 1%; + padding-top: 2%; + padding-bottom: 2%; +} + +.navigation { + margin-left: 1%; + margin-right: 1%; + font-size: 12px; + text-align: center; + width: 275px; + height: 375px; + padding: 25px; + float: left; + background: blue; + color: black; +} + +.sidebar { + font-size: 10px; + text-align: center; + width: 275px; + height: 375px; + padding: 25px; + margin-bottom: 10px; + margin-left: 1%; + float: left; + color: black; +} + +/* I apply this only to mozilla due to some odd render */ +@-moz-document url-prefix() { + .sidebar { padding-right: 1%; } +} + +[class$="r"]:not([class='container']){ + background: magenta; +} + +[class*='a']:not([class$='r']):not([class$='e']){ + background: blue; +} + +h3 { + background: green !important; +} \ No newline at end of file diff --git a/public/basics of css/css/style252.css b/public/basics of css/css/style252.css new file mode 100644 index 0000000..cc2bfe6 --- /dev/null +++ b/public/basics of css/css/style252.css @@ -0,0 +1,121 @@ +html { + font-family: Sans-serif; +} + +h1 { + margin: 1%; +} + +.container { + clear: both; + background: white; + display: block; + float: left; + width: 100%; + padding: 8px; +} + +.third { + box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.3); + width: -ms-calc(33.3333% - 16px); + width: -moz-calc(33.3333% - 16px); + width: -webkit-calc(33.3333% - 16px); + width: calc(33.3333% - 16px); + margin: 8px; + height: auto; + position: relative; + float: left; +} + +.gallery-grid img { + width: 100%; + height: auto; + position: relative; + float: left; +} + +.screen { + background-color: rgba(0,0,0,0.5); + left: 0; + top: 0; + border-radius: 0; + height: 100%; + width: 100%; + position: absolute; + opacity: 0; + z-index: 1000; + -webkit-transition: all 0.3s ease-in-out; + -moz-transition: all 0.3s ease-in-out; + -o-transition: all 0.3s ease-in-out; + -ms-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; +} + +.screen:hover { + opacity: 1 +} + +.title { + color: #fff; + font-family: arial, helvetica, sans-serif; + font-weight: bold; + -webkit-transition: all 0.3s ease-in-out; + -moz-transition: all 0.3s ease-in-out; + -o-transition: all 0.3s ease-in-out; + -ms-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + margin-left: -30px; +} + +.screen:hover .title { + margin-left: 0; +} + +p { + font-size: 2em; + padding: 5%; +} + +.screen.fade-in .title { + margin-left: 0; +} + +.screen.fade-in:hover { +} + +img { + width: 100%; +} + +.row:before, +.row:after { + display: table; + clear: both; +} + +/* MEDIA QUERIES */ + +@media screen and (max-width: 950px) and (min-width: 600px) { + + .third { + width: -ms-calc(50% - 16px); + width: -moz-calc(50% - 16px); + width: -webkit-calc(50% - 16px); + width: calc(50% - 16px); + } +} + +@media screen and (max-width: 600px) { + + .third { + width: -ms-calc(100% - 16px); + width: -moz-calc(100% - 16px); + width: -webkit-calc(100% - 16px); + width: calc(100% - 16px); + } + + p { + font-size: 30px; + } +} + diff --git a/public/basics of html/css/style.css b/public/basics of html/css/style.css new file mode 100644 index 0000000..676ecfc --- /dev/null +++ b/public/basics of html/css/style.css @@ -0,0 +1,83 @@ +body { + background: linear-gradient(to right, #00ffbf, lightgray); + font-family: Monospace; +} + +ul { + list-style-type: none; +} + +li { + font-size: 20px; +} + +h1 { + font-size: 40px; +} + +h1, ul { + text-align: center; +} + +ul { + padding: 0px; +} + +td, th { + padding: 10px 10px 10px 10px; +} + +.expenses { + width: 100%; + padding: 0px 150px 0px 150px; +} + +.expenses td { + border: 1px solid white; +} + +.expenses tr { + background-color: #f2f2f2; +} + +.expenses tr:hover { + background-color: white; + color: #0099ff; +} + +.expenses th { + text-align: left; + background: black; + color: white; +} + +video { + width: 600px; + padding-bottom: 20px; +} + +.sound { + padding-top: 20px; + height: 40px; +} + +input, select, textarea { + display: block; + margin-bottom: 15px; + margin-top: 4px; +} + +.formu { + text-align: left; + margin: auto; + width: 30%; +} + +input, select, textarea { + width: 100%; +} + +.center { + margin: auto; + width: 45%; +} \ No newline at end of file diff --git a/public/basics of html/expenses.html b/public/basics of html/expenses.html new file mode 100644 index 0000000..8b5ff0c --- /dev/null +++ b/public/basics of html/expenses.html @@ -0,0 +1,52 @@ + + + + + + + Lisandro Cooper + + + + + + + + +
+
+

My expenses

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Itemvalue
Local gig ticket$50
1kg of tomatoes$30
Potato chips$20
T-shirt$250
Keyboard$300
House$1500000
+
+ + \ No newline at end of file diff --git a/public/basics of html/form.html b/public/basics of html/form.html new file mode 100644 index 0000000..cff6760 --- /dev/null +++ b/public/basics of html/form.html @@ -0,0 +1,46 @@ + + + + + + + Lisandro Cooper + + + + + + + + +
+
+
+

Form

+
+
+ + + + + + + + + + + + + + +
+
+
+ + \ No newline at end of file diff --git a/public/basics of html/img/zoidberg.png b/public/basics of html/img/zoidberg.png new file mode 100644 index 0000000..c8f45dd Binary files /dev/null and b/public/basics of html/img/zoidberg.png differ diff --git a/public/basics of html/imgsnsounds.html b/public/basics of html/imgsnsounds.html new file mode 100644 index 0000000..6a56e81 --- /dev/null +++ b/public/basics of html/imgsnsounds.html @@ -0,0 +1,37 @@ + + + + + + + Lisandro Cooper + + + + + + + + + +
+
+

Images and sounds

+
+
+ Zoidberg, character from the TV show, Futurama +
+ +
+ +
+
+ + \ No newline at end of file diff --git a/public/basics of html/mytodolist.html b/public/basics of html/mytodolist.html new file mode 100644 index 0000000..aaf8ad4 --- /dev/null +++ b/public/basics of html/mytodolist.html @@ -0,0 +1,33 @@ + + + + + + + Lisandro Cooper + + + + + + + + +
+
+

My todo list

+
+ +
+ + \ No newline at end of file diff --git a/public/basics of html/video/drums.mp4 b/public/basics of html/video/drums.mp4 new file mode 100644 index 0000000..df13903 Binary files /dev/null and b/public/basics of html/video/drums.mp4 differ