From 74109ec34e04189eae8c002bf7df96495743a77d Mon Sep 17 00:00:00 2001 From: Hallie Date: Thu, 19 Sep 2019 16:20:19 -0700 Subject: [PATCH 1/3] Oops! I didn't think we were turning this in, so haven't been committing. Mostly complete--just have some tweaking to do. --- index.html | 33 ++-- styles/normalize.css | 349 +++++++++++++++++++++++++++++++++++++++++++ styles/style.css | 147 ++++++++++++++++++ test-index.html | 42 ++++++ 4 files changed, 554 insertions(+), 17 deletions(-) create mode 100644 styles/normalize.css create mode 100644 styles/style.css create mode 100644 test-index.html diff --git a/index.html b/index.html index 69f30be..db5c863 100644 --- a/index.html +++ b/index.html @@ -3,17 +3,17 @@ Startrly + +
- - - -
+

Startrly

A catchy tagline for a great solution Some Call to Action
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -40,7 +39,7 @@

Startrly

-
+

Why?

  • @@ -68,7 +67,7 @@

    Why?

-
+
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
@@ -78,30 +77,30 @@

Why?

-
+

Meet the team

-
    -
  • +
      +
    • profile for kari kiwi Kari Kiwi CFO
      • -
    • +
    • profile for dan dragon Dan Dragon CMO
      • -
    • +
    • profile for chris caribou Chris Caribou CIO
      • -
    • +
    • profile for charles cheetah Charles Cheetah Board Member, CTO
      • -
    • +
    • profile for dee dugong Dee Dugong Startup Enthusiast @@ -110,7 +109,7 @@

      Meet the team

-
+

Sponsors

  • @@ -132,7 +131,7 @@

    Sponsors

-
+

Support

    diff --git a/styles/normalize.css b/styles/normalize.css new file mode 100644 index 0000000..c469989 --- /dev/null +++ b/styles/normalize.css @@ -0,0 +1,349 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + + html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ + +main { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} diff --git a/styles/style.css b/styles/style.css new file mode 100644 index 0000000..1803031 --- /dev/null +++ b/styles/style.css @@ -0,0 +1,147 @@ + +body { + font-family: Helvetica, sans-serif; + background-color: lightgrey; + margin-right: 5%; + margin-left: 5%; +} + +ul { + list-style: none; +} + +nav ul { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr; + grid-template-rows: 10%; + font-weight: bold; + font-size: 1em; + text-align: center; + padding: 10px; +} + +#try { + grid-column: 4; +} + +h1 { + font-size: 3.5em; + margin: 30px; +} + +sub { + font-size: 2em; + font-weight: bold; + margin: 30px; +} + +.title { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + text-transform: capitalize; + margin: 30px; +} + +.title a { + border: 1px solid black; + font-size: 1.75em; + text-decoration: none; + padding: 20px; + margin: 60px; + border-radius: 10px; +} + +.quote { + display: grid; + font-size: 2em; + font-style: italic; + justify-content: center; + border-top: 1px solid gray; + border-bottom: 1px solid gray; + font-family: serif; +} + +blockquote::before, blockquote::after { + content: '"'; +} + +blockquote { + grid-column: 2; + line-height: 150%; +} + +.quote p { + grid-column: 2; + text-align: right; +} + +.quote p::before { + content: "--" +} + +h2 { + text-align: center; + grid-column: 2; +} + +.why ul { + display: flex; + flex-direction: row; + margin: 10%; +} + +.why img { + text-align: middle; +} + +.meet-container { + display: grid; + grid-template-columns: 1fr 3fr 1fr; +} + +.meet-the-team { + grid-column: 2; + width: 3fr; + display: flex; + flex-wrap: wrap; + flex-direction: row; + justify-content: space-evenly; + align-items: center; +} + +.meet-the-team li { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; +} + +.meet-container img { + border-radius: 50%; + padding: 5px; + border: 1px solid gray; + margin: 30px; +} + +.sponsors ul { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + justify-content: space-around; + width: 90%; +} + +.bottom { + display: flex; + flex-direction: row; + text-align: left; + margin: 5% +} + +.bottom div { + margin: 30px; + display: inline-block; +} diff --git a/test-index.html b/test-index.html new file mode 100644 index 0000000..776ef17 --- /dev/null +++ b/test-index.html @@ -0,0 +1,42 @@ + + + + + Startrly + + + + +
    + + +
    +

    Startrly

    + A catchy tagline for a great solution + Some Call to Action +
    + +
    +
    + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
    +

    + Mx. Lorem +

    +
    + +
    + + From b42ed972f9ffd76f3aad6e1861e843a1bd494cd0 Mon Sep 17 00:00:00 2001 From: Hallie Date: Thu, 19 Sep 2019 21:15:50 -0700 Subject: [PATCH 2/3] All sections align fairly close to the fireframe. --- index.html | 21 ++++++++------- styles/style.css | 69 +++++++++++++++++++++++++++++++----------------- 2 files changed, 56 insertions(+), 34 deletions(-) diff --git a/index.html b/index.html index db5c863..cb98c68 100644 --- a/index.html +++ b/index.html @@ -3,8 +3,9 @@ Startrly - - + + +
    @@ -22,7 +23,7 @@
-
+

Startrly

A catchy tagline for a great solution Some Call to Action @@ -39,24 +40,24 @@

Startrly

-
+

Why?

-
    -
  • +
      +
    • Comfortable

      Et quas molestias excepturi sint occaecati cupiditate non providents, ut aut reiciendis voluptatibus maiores.

      • -
    • +
    • Robust

      At vero eos et accusamus et iusto odio dignissimos ducimus qui. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam.

      • -
    • +
    • Convenient

      @@ -132,7 +133,7 @@

      Sponsors

      -
      +

      Support

      • @@ -149,7 +150,7 @@

        Support

      -
      +

      About

      • diff --git a/styles/style.css b/styles/style.css index 1803031..fa8c53a 100644 --- a/styles/style.css +++ b/styles/style.css @@ -2,8 +2,7 @@ body { font-family: Helvetica, sans-serif; background-color: lightgrey; - margin-right: 5%; - margin-left: 5%; + margin: 10px; } ul { @@ -12,7 +11,7 @@ ul { nav ul { display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr 1fr; + grid-template-columns: 1fr 3fr 1fr; grid-template-rows: 10%; font-weight: bold; font-size: 1em; @@ -21,7 +20,8 @@ nav ul { } #try { - grid-column: 4; + grid-column: 2; + text-align: right; } h1 { @@ -35,16 +35,17 @@ sub { margin: 30px; } -.title { +#startrly { display: flex; flex-direction: column; align-items: center; justify-content: space-around; text-transform: capitalize; margin: 30px; + } -.title a { +#startrly a { border: 1px solid black; font-size: 1.75em; text-decoration: none; @@ -60,7 +61,9 @@ sub { justify-content: center; border-top: 1px solid gray; border-bottom: 1px solid gray; - font-family: serif; + /* Google Font: */ + font-family: 'Crimson Text', serif; + padding: 10%; } blockquote::before, blockquote::after { @@ -84,16 +87,30 @@ blockquote { h2 { text-align: center; grid-column: 2; + margin: 30px; } -.why ul { - display: flex; - flex-direction: row; - margin: 10%; +.why { + display: grid; + grid-template-columns: 1f 1fr 1fr; + height: 250px +} + +#comfortable { + grid-column: 1; +} + +#robust { + grid-column: 2; +} + +#convenient { + grid-column: 3; } .why img { - text-align: middle; + float: left; + padding: 5px; } .meet-container { @@ -103,12 +120,10 @@ h2 { .meet-the-team { grid-column: 2; - width: 3fr; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-evenly; - align-items: center; } .meet-the-team li { @@ -125,6 +140,9 @@ h2 { margin: 30px; } +.sponsors { + margin: 50px; +} .sponsors ul { display: flex; flex-direction: row; @@ -134,14 +152,17 @@ h2 { width: 90%; } -.bottom { - display: flex; - flex-direction: row; - text-align: left; - margin: 5% -} + .bottom { + border-top: 1px solid gray; + display: grid; + grid-template-columns: 1fr 1fr 3fr; -.bottom div { - margin: 30px; - display: inline-block; -} + } + + .bottom ul { + padding: 0; + } + + .support { + margin-left: 30%; + } From 92f33413ed2a04808f42de344c34475f9e4a58bc Mon Sep 17 00:00:00 2001 From: Hallie Date: Fri, 20 Sep 2019 06:32:32 -0700 Subject: [PATCH 3/3] Final cleanup and organization. --- index.html | 12 ++++++------ styles/style.css | 49 ++++++++++++++++++++++++++++-------------------- 2 files changed, 35 insertions(+), 26 deletions(-) diff --git a/index.html b/index.html index cb98c68..099780b 100644 --- a/index.html +++ b/index.html @@ -81,27 +81,27 @@

        Why?

        Meet the team

          -
        • +
        • profile for kari kiwi Kari Kiwi CFO
          • -
        • +
        • profile for dan dragon Dan Dragon CMO
          • -
        • +
        • profile for chris caribou Chris Caribou CIO
          • -
        • +
        • profile for charles cheetah Charles Cheetah Board Member, CTO
          • -
        • +
        • profile for dee dugong Dee Dugong Startup Enthusiast @@ -150,7 +150,7 @@

          Support

      -
      +

      About

      • diff --git a/styles/style.css b/styles/style.css index fa8c53a..8e23434 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,3 +1,4 @@ +/* Apply to all */ body { font-family: Helvetica, sans-serif; @@ -5,10 +6,23 @@ body { margin: 10px; } +h1 { + font-size: 3.5em; + margin: 30px; +} + +h2 { + text-align: center; + grid-column: 2; + margin: 30px; +} + ul { list-style: none; } +/* Content */ + nav ul { display: grid; grid-template-columns: 1fr 3fr 1fr; @@ -24,16 +38,6 @@ nav ul { text-align: right; } -h1 { - font-size: 3.5em; - margin: 30px; -} - -sub { - font-size: 2em; - font-weight: bold; - margin: 30px; -} #startrly { display: flex; @@ -42,7 +46,12 @@ sub { justify-content: space-around; text-transform: capitalize; margin: 30px; +} +sub { + font-size: 2em; + font-weight: bold; + margin: 30px; } #startrly a { @@ -54,6 +63,7 @@ sub { border-radius: 10px; } + .quote { display: grid; font-size: 2em; @@ -84,11 +94,6 @@ blockquote { content: "--" } -h2 { - text-align: center; - grid-column: 2; - margin: 30px; -} .why { display: grid; @@ -96,6 +101,11 @@ h2 { height: 250px } +.why img { + float: left; + padding: 5px; +} + #comfortable { grid-column: 1; } @@ -108,10 +118,6 @@ h2 { grid-column: 3; } -.why img { - float: left; - padding: 5px; -} .meet-container { display: grid; @@ -140,9 +146,11 @@ h2 { margin: 30px; } + .sponsors { margin: 50px; } + .sponsors ul { display: flex; flex-direction: row; @@ -152,11 +160,12 @@ h2 { width: 90%; } +/* Footer */ + .bottom { border-top: 1px solid gray; display: grid; grid-template-columns: 1fr 1fr 3fr; - } .bottom ul {