Styling per Design

README.md

@@ -37,4 +37,7 @@ Stretch goals are not required. Complete the project objectives before working o
 
 - [ ] Change all the image tags into background images instead
 
-- [ ] Research CSS animations and see how you could implement some ideas when hovering over buttons or navigation items
+- [ ] Research CSS animations and see how you could implement some ideas when hovering over buttons or navigation items
+
+Adding my name to the readme:
+Ian Bryant

great-idea-website/css/index.css

@@ -1,66 +1,267 @@
-/* http://meyerweb.com/eric/tools/css/reset/ 
+    /* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126
    License: none (public domain)
 */
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed, 
-figure, figcaption, footer, header, hgroup, 
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	font-size: 100%;
-	font: inherit;
-	vertical-align: baseline;
-}
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure, 
-footer, header, hgroup, menu, nav, section {
-	display: block;
-}
-body {
-	line-height: 1;
-}
-ol, ul {
-	list-style: none;
-}
-blockquote, q {
-	quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-	content: '';
-	content: none;
-}
-table {
-	border-collapse: collapse;
-	border-spacing: 0;
-}
-
-/* Set every element's box-sizing to border-box */
-* {
-    box-sizing: border-box;
-}
-
-html, body {
-    height: 100%;
-    font-family: 'Titillium Web', sans-serif;
-}
-
-h1, h2, h3, h4, h5 {
-    font-family: 'Bangers', cursive;
-    letter-spacing: 1px;
-    margin-bottom: 15px;
-}
-
-/* Your code starts here! */
+
+    html,
+    body,
+    div,
+    span,
+    applet,
+    object,
+    iframe,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p,
+    blockquote,
+    pre,
+    a,
+    abbr,
+    acronym,
+    address,
+    big,
+    cite,
+    code,
+    del,
+    dfn,
+    em,
+    img,
+    ins,
+    kbd,
+    q,
+    s,
+    samp,
+    small,
+    strike,
+    strong,
+    sub,
+    sup,
+    tt,
+    var,
+    b,
+    u,
+    i,
+    center,
+    dl,
+    dt,
+    dd,
+    ol,
+    ul,
+    li,
+    fieldset,
+    form,
+    label,
+    legend,
+    table,
+    caption,
+    tbody,
+    tfoot,
+    thead,
+    tr,
+    th,
+    td,
+    article,
+    aside,
+    canvas,
+    details,
+    embed,
+    figure,
+    figcaption,
+    footer,
+    header,
+    hgroup,
+    menu,
+    nav,
+    output,
+    ruby,
+    section,
+    summary,
+    time,
+    mark,
+    audio,
+    video {
+        margin: 0;
+        padding: 0;
+        border: 0;
+        font-size: 100%;
+        font: inherit;
+        vertical-align: baseline;
+    }
+    /* HTML5 display-role reset for older browsers */
+
+    article,
+    aside,
+    details,
+    figcaption,
+    figure,
+    footer,
+    header,
+    hgroup,
+    menu,
+    nav,
+    section {
+        display: block;
+    }
+
+    body {
+        line-height: 1;
+    }
+
+    ol,
+    ul {
+        list-style: none;
+    }
+
+    blockquote,
+    q {
+        quotes: none;
+    }
+
+    blockquote:before,
+    blockquote:after,
+    q:before,
+    q:after {
+        content: '';
+        content: none;
+    }
+
+    table {
+        border-collapse: collapse;
+        border-spacing: 0;
+    }
+    /* Set every element's box-sizing to border-box */
+
+    * {
+        box-sizing: border-box;
+    }
+
+    html,
+    body {
+        height: 100%;
+        font-family: 'Titillium Web', sans-serif;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5 {
+        font-family: 'Bangers', cursive;
+        letter-spacing: 1px;
+        margin-bottom: 15px;
+    }
+    /* Your code starts here! */
+
+    .center-content {
+        border-bottom: 1px solid grey;
+        border-top: 1px solid grey;
+        width: 875px;
+        margin: 10px;
+    }
+
+    .center-content-top h2 {
+        margin-top: 10px;
+    }
+
+    .center-content-bottom p {
+        margin-bottom: 10px;
+    }
+
+    .center-content img {
+        margin: 10px;
+    }
+
+    .center-content-top section {
+        display: inline-block;
+        box-sizing: border-box;
+        vertical-align: top;
+        width: 425px;
+        box-align: left;
+        margin: 5px;
+    }
+
+    .center-content-bottom section {
+        display: inline-block;
+        box-sizing: border-box;
+        vertical-align: top;
+        width: 275px;
+        box-align: left;
+        margin: 5px;
+    }
+
+    address {
+        display: inline-block;
+        vertical-align: top;
+        width: 200px;
+    }
+
+    ul {
+        list-style-type: none;
+        margin: 10px;
+        padding: 10px;
+        overflow: hidden;
+    }
+
+    li {
+        float: left;
+        margin: 10px;
+        padding: 10px;
+    }
+
+    li a {
+        display: inline-block;
+        text-align: center;
+        color: grey;
+        text-decoration: none;
+    }
+
+    header img {
+        display: inline-block;
+        margin-left: 75px;
+    }
+
+    #heading {
+        display: inline-block;
+        width: 450px;
+        text-align: center;
+        vertical-align: top;
+    }
+
+    footer div {
+        display: block;
+        margin-top: 50px;
+        margin-left: 350px;
+    }
+
+    h1 {
+        font-size: 86pt;
+        margin-left: 20px;
+    }
+
+    button {
+        background-color: white;
+        border: 1.5px solid grey;
+        padding: 5px 40px;
+        color: grey;
+    }
+
+    .logo {
+        vertical-align: top;
+        margin-left: 150px;
+    }
+
+    footer address {
+        margin-left: 15px;
+    }
+
+    footer h2 {
+        margin-left: 15px;
+    }
+
+    nav {
+        margin-bottom: 15px;
+    }