From 75956efb696cdfb476605e3c884f1d1e42c8d422 Mon Sep 17 00:00:00 2001 From: nitramnoe Date: Wed, 18 Jan 2017 12:24:13 +0100 Subject: [PATCH 1/3] 'add basic files' --- index.html | 11 +++++++++++ main.js | 0 master.css | 0 3 files changed, 11 insertions(+) create mode 100644 index.html create mode 100644 main.js create mode 100644 master.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..ee95fae --- /dev/null +++ b/index.html @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/main.js b/main.js new file mode 100644 index 0000000..e69de29 diff --git a/master.css b/master.css new file mode 100644 index 0000000..e69de29 From 18f8885d8d6a6386265eac220e44b771e1a06c77 Mon Sep 17 00:00:00 2001 From: nitramnoe Date: Wed, 18 Jan 2017 14:26:57 +0100 Subject: [PATCH 2/3] add css js --- index.html | 4 ++++ main.js | 42 ++++++++++++++++++++++++++++++++++++++++++ master.css | 46 ++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 92 insertions(+) diff --git a/index.html b/index.html index ee95fae..07aa5a6 100644 --- a/index.html +++ b/index.html @@ -4,8 +4,12 @@ + +
+ + diff --git a/main.js b/main.js index e69de29..0b18bd6 100644 --- a/main.js +++ b/main.js @@ -0,0 +1,42 @@ +var books = [ +{ + title: 'CSS: The Definitive Guide', + author: 'Eric Meyer', + link: 'http://shop.oreilly.com/product/0636920012726.do', + type: 'css', +}, +{ + title: 'CSS Development with CSS3', + author: 'Zachary Kingston', + link: 'http://shop.oreilly.com/product/0636920057970.do', + type: 'css', +}, +{ + title: 'You Don\'t Know JS: Up & Going', + author: 'Kyle Simpson', + link: 'http://shop.oreilly.com/product/0636920039303.do', + type: 'js', +}, +{ + title: 'Programming JavaScript Applications', + author: 'Eric Elliott', + link: 'http://shop.oreilly.com/product/0636920033141.do', + type: 'js', +}, +{ + title: 'Modern JavaScript', + author: 'unknown', + link: 'http://www.oreilly.com/web-platform/free/modern-javascript.csp', + type: 'js', +} +]; +var n = 0; +$.each(books, function(){ + $(".container").append("
"); + $(".book"+ n).append("

"+books[n].title+"

"); + $(".book"+ n).append('
') + $(".info"+ n).append("

"+books[n].author + "

"); + $(".info"+ n).append("

"+books[n].type + "

"); + $(".info"+ n).append("More"); + n = n + 1; +}) diff --git a/master.css b/master.css index e69de29..7ce0e10 100644 --- a/master.css +++ b/master.css @@ -0,0 +1,46 @@ +*{ + margin: 0; + padding: 0; + font-family: futura; + font-weight: 200; + color: white; + text-shadow: 0 0 5px rgba(167, 167, 167, 0.5) +} +body{ + display: flex; + align-items: center; + justify-content: space-around; + background-color: rgb(142, 231, 164) +} +.container{ + margin: 60px 0; + width: 80vw; + border-top: 2px solid white; + display: flex; + flex-direction: column; + justify-content: space-around; +} +.books h1{ + text-align: center; +} +.books{ + border-bottom: 2px solid white; + padding: 20px; +} +.books .infos{ + display: none; + transition:opacity 2s ease; + align-items: center; + justify-content: center; + flex-direction: column; +} +.books:hover .infos{ + display: flex; +} +a{ + text-decoration: none; + background-color: rgb(233, 138, 138); + color: white; + padding: 5px 15px; + box-shadow: 0px 0px 5px rgba(111, 111, 111, 0.6) ; +} From 18123947af74ec77f4dff03c3d6b41cd477ffb78 Mon Sep 17 00:00:00 2001 From: nitramnoe Date: Mon, 23 Jan 2017 10:06:43 +0100 Subject: [PATCH 3/3] exercie Martin --- index.html | 1 + main.js | 2 +- master.css | 12 ++++++++---- 3 files changed, 10 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 07aa5a6..48a07d2 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,7 @@ +
diff --git a/main.js b/main.js index 0b18bd6..b7412ac 100644 --- a/main.js +++ b/main.js @@ -39,4 +39,4 @@ $.each(books, function(){ $(".info"+ n).append("

"+books[n].type + "

"); $(".info"+ n).append("More"); n = n + 1; -}) +}); diff --git a/master.css b/master.css index 7ce0e10..d4967f9 100644 --- a/master.css +++ b/master.css @@ -4,7 +4,7 @@ font-family: futura; font-weight: 200; color: white; - text-shadow: 0 0 5px rgba(167, 167, 167, 0.5) + text-shadow: 0 0 5px rgba(167, 167, 167, 0.5); } body{ display: flex; @@ -22,20 +22,24 @@ body{ } .books h1{ text-align: center; + letter-spacing: 1px; } .books{ border-bottom: 2px solid white; padding: 20px; } .books .infos{ - display: none; - transition:opacity 2s ease; + height: 0; + opacity: 0; + display: flex; + transition: opacity 1s ease, height 1s ease; align-items: center; justify-content: center; flex-direction: column; } .books:hover .infos{ - display: flex; + height: 100px; + opacity: 1; } a{ text-decoration: none;