diff --git a/00-HTML-CSS-basics/Media.html b/00-HTML-CSS-basics/Media.html new file mode 100644 index 000000000..6a9fff704 --- /dev/null +++ b/00-HTML-CSS-basics/Media.html @@ -0,0 +1,16 @@ + + + + Media examples + + +

Video

+ +

Image

+Messi +

Sound

+ + + \ No newline at end of file diff --git a/00-HTML-CSS-basics/MyTodoList.html b/00-HTML-CSS-basics/MyTodoList.html new file mode 100644 index 000000000..90d13c786 --- /dev/null +++ b/00-HTML-CSS-basics/MyTodoList.html @@ -0,0 +1,13 @@ + + + + + +
My todo list
+ + + \ No newline at end of file diff --git a/00-HTML-CSS-basics/SingUp.html b/00-HTML-CSS-basics/SingUp.html new file mode 100644 index 000000000..37a8df2c9 --- /dev/null +++ b/00-HTML-CSS-basics/SingUp.html @@ -0,0 +1,120 @@ + + + + + + + + + + + +

Login Form

+ +
+ +
+ + + + + + + + + + + + + + + + +

+ + + + Remember me +
+ +
+ + + Forgot password? +
+
+ + + diff --git a/00-HTML-CSS-basics/expenses.html b/00-HTML-CSS-basics/expenses.html new file mode 100644 index 000000000..603e7d8f5 --- /dev/null +++ b/00-HTML-CSS-basics/expenses.html @@ -0,0 +1,25 @@ + + + Expenses Mar2017 + + + + + + + + + + + + + + + + + + + +
DescriptionAmount
University$4213
Medical Care$4526
Gym$456
+ + \ No newline at end of file diff --git a/00-HTML-CSS-basics/index.html b/00-HTML-CSS-basics/index.html new file mode 100644 index 000000000..dabc793cd --- /dev/null +++ b/00-HTML-CSS-basics/index.html @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + +
+ + +
+
SECTION +
+
HEADER
+
+
+
ARTICLE
+
+
+
FOOTER
+
+
+
+
+
+ +
+
+ + + diff --git a/00-HTML-CSS-basics/media/AudioClip.mp3 b/00-HTML-CSS-basics/media/AudioClip.mp3 new file mode 100644 index 000000000..5dd081d8f Binary files /dev/null and b/00-HTML-CSS-basics/media/AudioClip.mp3 differ diff --git a/00-HTML-CSS-basics/media/Lionel.jpg b/00-HTML-CSS-basics/media/Lionel.jpg new file mode 100644 index 000000000..3b9644853 Binary files /dev/null and b/00-HTML-CSS-basics/media/Lionel.jpg differ diff --git a/00-HTML-CSS-basics/media/mueble1.jpg b/00-HTML-CSS-basics/media/mueble1.jpg new file mode 100644 index 000000000..584308d52 Binary files /dev/null and b/00-HTML-CSS-basics/media/mueble1.jpg differ diff --git a/00-HTML-CSS-basics/media/mueble2.jpg b/00-HTML-CSS-basics/media/mueble2.jpg new file mode 100644 index 000000000..0b8a293e6 Binary files /dev/null and b/00-HTML-CSS-basics/media/mueble2.jpg differ diff --git a/00-HTML-CSS-basics/media/mueble3.jpg b/00-HTML-CSS-basics/media/mueble3.jpg new file mode 100644 index 000000000..ae18a090f Binary files /dev/null and b/00-HTML-CSS-basics/media/mueble3.jpg differ diff --git a/00-HTML-CSS-basics/media/mueble4.jpg b/00-HTML-CSS-basics/media/mueble4.jpg new file mode 100644 index 000000000..338a47fe6 Binary files /dev/null and b/00-HTML-CSS-basics/media/mueble4.jpg differ diff --git a/00-HTML-CSS-basics/media/mueble5.jpg b/00-HTML-CSS-basics/media/mueble5.jpg new file mode 100644 index 000000000..eb25e0c1b Binary files /dev/null and b/00-HTML-CSS-basics/media/mueble5.jpg differ diff --git a/00-HTML-CSS-basics/media/mueble6.jpg b/00-HTML-CSS-basics/media/mueble6.jpg new file mode 100644 index 000000000..2436f9d18 Binary files /dev/null and b/00-HTML-CSS-basics/media/mueble6.jpg differ diff --git a/00-HTML-CSS-basics/prototype.css b/00-HTML-CSS-basics/prototype.css new file mode 100644 index 000000000..02b25b3bb --- /dev/null +++ b/00-HTML-CSS-basics/prototype.css @@ -0,0 +1,97 @@ +*, *:before, *:after { + padding: 0; + margin: 0; + box-sizing: border-box; +} +.gallery-grid { + clear: both; + background: grey; + display: block; + float: left; + width: 100%; + padding: 8px; +} +.gallery-grid.columns { + margin-right: 0; +} +.one-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; +} +.two-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; +} +.one-third:last-of-type { + margin-right: 0; +} +.gallery-grid img { + width: 100%; + height: auto; + position: relative; + float: left; +} +.gallery-grid a { + display: block; +} +.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; +} +.cta { + clear: both; + font-weight: bold; + font-family: arial,helvetica, sans-serif; + display: block; + font-size: 2em; +} \ No newline at end of file diff --git a/00-HTML-CSS-basics/prototype.html b/00-HTML-CSS-basics/prototype.html new file mode 100644 index 000000000..b282841c5 --- /dev/null +++ b/00-HTML-CSS-basics/prototype.html @@ -0,0 +1,88 @@ + + + + Prototype + + + +