diff --git a/index.css b/index.css
new file mode 100644
index 0000000..8ff7afd
--- /dev/null
+++ b/index.css
@@ -0,0 +1,42 @@
+body {
+ font-family: 'Nunito', sans-serif;
+ color: #333;
+ background: #EC6F66; /* fallback for old browsers */
+ background: -webkit-linear-gradient(to left, #EC6F66 , #F3A183); /* Chrome 10-25, Safari 5.1-6 */
+ background: linear-gradient(to left, #EC6F66 , #F3A183); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+ height: 100vh;
+ padding: 50px;
+ font-size: 18px;
+ font-weight: 300;
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+}
+
+h1 {
+ font-weight: 800;
+ text-transform: uppercase;
+ margin-bottom: 30px;
+}
+
+p {
+ margin-bottom: 0;
+}
+
+#container {
+ width: 500px;
+}
+
+.card {
+ margin-bottom: 40px;
+}
+
+
+.card p:nth-child(3) {
+ font-size: 14px;
+ margin-top: 6px;
+}
+
+.type {
+ display: none;
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..83283f9
--- /dev/null
+++ b/index.html
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+
+
+
+ js basic list
+
+
+ List of books
+
+
+
+
+
+
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..7c50cf4
--- /dev/null
+++ b/index.js
@@ -0,0 +1,62 @@
+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 container = document.getElementById('container');
+
+
+for(i = 0; i < books.length; i++) {
+ var card = document.createElement('div');
+ card.classList.add('card');
+ container.appendChild(card);
+
+
+ for(var prop in books[i]) {
+
+ var p = document.createElement('p');
+ card.appendChild(p);
+ p.textContent = books[i][prop];
+
+ if (prop === 'author') {
+ p.innerHTML = 'By ' + books[i].author;
+ }
+
+ if (prop === 'link') {
+ p.innerHTML = 'Link';
+ }
+
+ if (prop === 'type') {
+ p.setAttribute('style', 'display: none');
+ }
+
+ }
+ }