diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..8b6531c --- /dev/null +++ b/css/main.css @@ -0,0 +1,107 @@ +html { + box-sizing: border-box; + + font-family: "Open Sans", sans-serif; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +.btn { + padding: .5em; + text-align: left; + font-size: 0.875rem; + text-decoration: none; + border-radius: 8px; + background-color: #333; + border: 3px solid #333; + margin-right: 0; +} + +.btn-small { + text-decoration: none; + color: white; + text-align: left; +} + +.btn:hover { + background-color: #000; + border-color: #000; + border-width: 3px; +} + +body { + background-color: #f2f2f2; + padding: .5em; + margin: 0; +} + +h3 { + font-style: italic; + font-size: .875rem; + font-weight: 400; + margin-bottom: 0; + margin-top: .5em; +} + +h2 { + font-size: 1rem; + font-weight: 700; + margin-bottom: 0; + margin-top: 0; +} + +.card { + float: left; + width: 25%; + border-left: 1px solid #333; + font-size: 0.875rem; + padding: 1em 1em 1em 1em; + min-height: 30em; +} + +.card1 { + background-color: #e2e2e2; +} + +.card2 { + background-color: #ccc; +} + +.card3 { + background-color: #aaa; +} + +.card4 { + background-color: #999; + border-right: 1px solid #333; +} + +img { + width: 115px; + margin: auto; + text-align: center; + display: block; + padding-bottom: 2em; +} + +.images { + text-align: center; + padding-left: 1em; +} + +h1 { + font-size: 2rem; + text-align: center; +} + +p { + margin-top: 0; + margin-bottom: 1em; + font-size: 1rem; +} + +a { + max-width: 10%; +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..c94f7aa --- /dev/null +++ b/index.html @@ -0,0 +1,69 @@ + + +
+ +A fun & engaging kids book that harkens back to classic fantasy quest stories.
+Aliens land on Earth in the distant past and ride dinosaurs. It’s about as awesome as it gets.
+A action-packed middle-grade interactive story adventure with a plucky hero.
+Military sci-fi that’s top notch. Missiles. Explosions. Lasers. Fleets. Planets. Light Speed.
+