From 2c5fb265b51a85e0d01b3f6456df89b0ce0a7231 Mon Sep 17 00:00:00 2001 From: Shaun Pelling Date: Thu, 10 Aug 2017 15:40:51 +0100 Subject: [PATCH] lesson 1 code --- index.html | 48 +++++++++++++++++++ styles.css | 138 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 186 insertions(+) create mode 100644 index.html create mode 100644 styles.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..cbc1f11 --- /dev/null +++ b/index.html @@ -0,0 +1,48 @@ + + + + + + JavaScript DOM Tutorials + + +
+
+
+

Bookorama

+

Books for Ninjas

+
+ +
+
+
+
+

Books to Read

+
    +
  • + Name of the Wind + delete +
    • +
  • + The Wise Man's Fear + delete +
    • +
  • + Kafka on the Shore + delete +
    • +
  • + The Master and the Margarita + delete +
    • +
+
+
+ + +
+ +
+ + + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..361284d --- /dev/null +++ b/styles.css @@ -0,0 +1,138 @@ +body{ + font-family: Tahoma; + color: #444; + letter-spacing: 1px; +} + +h1, h2{ + font-weight: normal; +} + +#wrapper{ + width: 90%; + max-width: 960px; + margin: 20px auto; + border-radius: 6px; + box-shadow: 0px 1px 6px rgba(0,0,0,0.2); + box-sizing: border-box; + padding: 0 0 20px; + overflow: hidden; + border: 1px solid lightgray; +} + +#page-banner{ + background: #eee ; + padding: 10px 0; + +} + +#page-banner h1, #page-banner p{ + width: 100%; + text-align: center; + margin: 10px 0; +} + +#page-banner input{ + width: 90%; + max-width: 300px; + margin: 20px auto; + display: block; + padding: 8px; + border: 1px solid #ddd; + border-radius: 4px; + font-size: 16px; + color: #444; +} + +#book-list, #add-book, #tabbed-content{ + margin: 30px; +} + +#book-list ul, #tabbed-content ul{ + list-style-type: none; + padding: 0; +} + +#book-list li{ + padding: 20px; + border-left: 5px solid #ddd; + margin: 20px 10px; +} + +#book-list li:hover{ + border-color: #9361bf; +} + +.delete{ + float: right; + background: #9361bf; + padding: 6px; + border-radius: 4px; + cursor: pointer; + color: white; +} + +.delete:hover{ + background: #333; +} + +#add-book{ + width: 400px; + margin: 0 auto; +} + +#add-book input{ + display: block; + margin: 20px 0; + padding: 10px; + border: 1px solid #ccc; + font-size: 16px; + border-radius: 4px 0 0 4px; + box-sizing: border-box; + width: 300px; + float: left; +} + +#add-book button{ + border: 1px solid #9361bf; + background: #9361bf; + padding: 10px 20px; + font-size: 16px; + display: inline-block; + margin: 0; + border-radius: 0 4px 4px 0; + cursor: pointer; + width: 100px; + float: left; + margin: 20px 0; + border-left: 0; + color: white; +} + +#add-book:after{ + content: ''; + display: block; + clear: both; +} + +/* +#tabbed-content li{ + display: inline-block; + padding: 10px 14px; + background: #ddd; + border-radius: 4px; + cursor: pointer; + margin-right: 10px; +} + +#tabbed-content .tab{ + display: none; + border: 1px solid #ddd; + padding: 0 10px; + border-radius: 4px; +} + +#tabbed-content .tab.active{ + display: block; +} +*/