From 914b30308f05d5db515038c3448eb6bf945f9d9b Mon Sep 17 00:00:00 2001 From: remyJ710 Date: Fri, 15 May 2020 21:45:47 -0400 Subject: [PATCH 1/7] answered questions 1-5 --- README.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/README.md b/README.md index dc5314a3a1..97e632a5c2 100644 --- a/README.md +++ b/README.md @@ -36,14 +36,24 @@ Edit this document to include your answers after each question. Make sure to lea 1. If you were to describe semantic HTML to the next cohort of students, what would you say? +That semantic Html gives meaning to the web page. It creates a hierarchy to the page making it easier to read. + 2. What are the 4 areas of the box model? +The 4 areas of a box model are the margin, border, padding, and finally content. + 3. While using flexbox, what axis does the following property work on: ```align-items: center```? +The axis that the algin-items: center effects is the cross-axis. + 4. Explain why git is valuable to a team of developers. +Git is valuable to teams of developers because, new code changes can be easily commited, version branches can be effortlessly compared and merged. and make it so a team can all work on the same code at the same time. + 5. Define mobile-first design in your own words. +Mobile-first means that the web-page was designed to work amazaing on mobile devices first instead of a computer web page. + You are expected to be able to answer all these questions. Your responses contribute to your Sprint Challenge grade. Skipping this section *will* prevent you from passing this challenge. ## Instructions From d5f77b0d71aff642f361ab8346e93d3dd5b8b613 Mon Sep 17 00:00:00 2001 From: remyJ710 Date: Fri, 15 May 2020 22:21:25 -0400 Subject: [PATCH 2/7] checking to see if pushing it will change the webpage --- index.html | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/index.html b/index.html index d32d8ad25c..100fe60ca1 100644 --- a/index.html +++ b/index.html @@ -6,13 +6,38 @@ Sprint Challenge - Home + +
+
+ + + +
From 977ceb10e4ea488d6b1765cf5577ca347c11c69f Mon Sep 17 00:00:00 2001 From: remyJ710 Date: Fri, 15 May 2020 22:31:59 -0400 Subject: [PATCH 3/7] made the about.html file --- about.html | 0 index.html | 4 ++-- 2 files changed, 2 insertions(+), 2 deletions(-) create mode 100644 about.html diff --git a/about.html b/about.html new file mode 100644 index 0000000000..e69de29bb2 diff --git a/index.html b/index.html index 100fe60ca1..a8f1e1f691 100644 --- a/index.html +++ b/index.html @@ -6,11 +6,11 @@ Sprint Challenge - Home - + - + From 800f4616a45d834f66d6e07aad6a4aeb35d9053c Mon Sep 17 00:00:00 2001 From: remyJ710 Date: Fri, 15 May 2020 23:35:29 -0400 Subject: [PATCH 4/7] css color change --- about.html | 12 ++++++++++++ index.html | 11 ++++++----- style/index.css | 10 +++++----- 3 files changed, 23 insertions(+), 10 deletions(-) diff --git a/about.html b/about.html index e69de29bb2..401681f417 100644 --- a/about.html +++ b/about.html @@ -0,0 +1,12 @@ + + + + + Sprint Challenge - Home + + + + + + + diff --git a/index.html b/index.html index a8f1e1f691..4ce78a930a 100644 --- a/index.html +++ b/index.html @@ -3,14 +3,15 @@ - + + Sprint Challenge - Home - + @@ -23,7 +24,7 @@ Home
  • - About + About
  • Products @@ -55,8 +56,8 @@

    The Past

    Why Did It Have To Be Boxes...

    -
    Box 1
    -
    Box 2
    +
    Box 1
    +
    Box 2
    Box 3
    Box 4
    Box 5
    diff --git a/style/index.css b/style/index.css index ae29d6ceee..f29b60c9ca 100644 --- a/style/index.css +++ b/style/index.css @@ -29,7 +29,7 @@ footer, header, hgroup, menu, nav, section { display: block; } body { - line-height: 1; + line-height: 6; } ol, ul { list-style: none; @@ -87,7 +87,7 @@ p { .middle-content { margin-bottom: 20px; - border-bottom: 1px dashed black; + border-bottom: 1px dashed rgb(50, 10, 95); } .middle-content h2 { @@ -106,7 +106,7 @@ p { height: 100px; background: black; margin: 20px 2.5%; - color: white; + color: rgb(8, 112, 90); display: flex; align-items: center; justify-content: center; @@ -128,7 +128,7 @@ p { footer { width: 100%; - background: black; + background: rgb(34, 34, 34); } footer nav { @@ -141,6 +141,6 @@ footer nav { } footer nav a { - color: white; + color: rgb(0, 0, 0); text-decoration: none; } \ No newline at end of file From 35a05b9465bd73c13d0a4b30b8e30666f3c1b502 Mon Sep 17 00:00:00 2001 From: remyJ710 Date: Sat, 16 May 2020 00:17:51 -0400 Subject: [PATCH 5/7] working on nav in css --- about.html | 23 +++++++++++++++++++++++ index.html | 2 +- style/index.css | 14 +++++++++++++- 3 files changed, 37 insertions(+), 2 deletions(-) diff --git a/about.html b/about.html index 401681f417..f318993402 100644 --- a/about.html +++ b/about.html @@ -10,3 +10,26 @@ + +
    +
    + + \ No newline at end of file diff --git a/index.html b/index.html index 4ce78a930a..bf48a30787 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - + Sprint Challenge - Home diff --git a/style/index.css b/style/index.css index f29b60c9ca..10fce7c21c 100644 --- a/style/index.css +++ b/style/index.css @@ -69,6 +69,10 @@ p { .container { width: 800px; margin: 0 auto; + flex-direction: column; + justify-content: space-evenly; + align-items: baseline; + align-content: stretch; } .top-content { @@ -143,4 +147,12 @@ footer nav { footer nav a { color: rgb(0, 0, 0); text-decoration: none; -} \ No newline at end of file +} +.navLnk { + color: coral; +li { + display: flex; + justify-content: space-evenly; + align-items: baseline +} + From 8b018a8582801aed908dadcdbdedfbd6bcfdc68f Mon Sep 17 00:00:00 2001 From: remyJ710 Date: Mon, 18 May 2020 01:10:02 -0400 Subject: [PATCH 6/7] desktop view --- index.html | 32 ++++++----- style/index.css | 147 ++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 158 insertions(+), 21 deletions(-) diff --git a/index.html b/index.html index bf48a30787..edcaf531db 100644 --- a/index.html +++ b/index.html @@ -37,7 +37,9 @@
    • +
    +
    @@ -56,16 +58,16 @@

    The Past

    Why Did It Have To Be Boxes...

    -
    Box 1
    -
    Box 2
    -
    Box 3
    -
    Box 4
    -
    Box 5
    -
    Box 6
    -
    Box 7
    -
    Box 8
    -
    Box 9
    -
    Box 10
    +
    Box 1
    +
    Box 2
    +
    Box 3
    +
    Box 4
    +
    Box 5
    +
    Box 6
    +
    Box 7
    +
    Box 8
    +
    Box 9
    +
    Box 10
    @@ -89,11 +91,11 @@

    Moon

    diff --git a/style/index.css b/style/index.css index 10fce7c21c..76226d0fc3 100644 --- a/style/index.css +++ b/style/index.css @@ -110,7 +110,7 @@ p { height: 100px; background: black; margin: 20px 2.5%; - color: rgb(8, 112, 90); + color: white; display: flex; align-items: center; justify-content: center; @@ -149,10 +149,145 @@ footer nav a { text-decoration: none; } .navLnk { - color: coral; -li { + justify-content: space-evenly; + display: inline-block; + flex-direction: row; +} +.navLnk li { + justify-content: space-evenly; + display: inline-block; + flex-direction: row; + padding: 30px; +} +.jumbo { + width: 100px; + height: 150px; + object-fit: none; + object-position: 5px 10%; +} +.top-content { + justify-content: space-evenly; + display: inline-flex; +} +.text-container { + width: 200px; + height: 300px; + object-fit: none; + object-position: 5px 10%; +} +.box-one { + width: 12.5%; + height: 100px; + margin: 20px 2.5%; + color: white; + background-color: rgba(12, 151, 121, 0.89); + display: flex; + align-items: center; + justify-content: center; +} +.box-two { + width: 12.5%; + height: 100px; + background: rgb(255, 241, 45); + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} +.box-three { + width: 12.5%; + height: 100px; + background: rgba(68, 165, 152, 0.801); + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} +.box-four { + width: 12.5%; + height: 100px; + background: rgb(238, 160, 58); + margin: 20px 2.5%; + color: white; display: flex; + align-items: center; + justify-content: center; +} +.box-five { + width: 12.5%; + height: 100px; + background: rgb(255, 0, 0); + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} +.box-six { + width: 12.5%; + height: 100px; + background: rgb(1, 223, 38); + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} +.box-seven { + width: 12.5%; + height: 100px; + background: rgb(178, 0, 223); + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} +.box-eight { + width: 12.5%; + height: 100px; + background: rgb(255, 0, 242); + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} +.box-nine { + width: 12.5%; + height: 100px; + background: rgb(57, 0, 95); + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} +.box-ten { + width: 12.5%; + height: 100px; + background: rgb(0, 217, 255); + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} +footer { + width: 100%; + background: rgb(34, 34, 34); +} +footer nav { + width: 50%; + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px 2%; + font-size: 14px; +} +footer nav a { + color: white; justify-content: space-evenly; - align-items: baseline -} - +} \ No newline at end of file From a4c19627501ef9e5fd0307cd529936cabead173c Mon Sep 17 00:00:00 2001 From: remyJ710 Date: Mon, 18 May 2020 02:57:42 -0400 Subject: [PATCH 7/7] started media tag for phone --- about.html | 44 +++++++++++++++++++++++++++++++++++++++++++- index.html | 2 +- style/index.css | 25 ++++++++++++++++--------- 3 files changed, 60 insertions(+), 11 deletions(-) diff --git a/about.html b/about.html index f318993402..9c1f10bb0f 100644 --- a/about.html +++ b/about.html @@ -32,4 +32,46 @@ Contact - \ No newline at end of file + +
    + +
    + +
    +
    +

    The Future

    +

    Proin sed quam sed tellus vestibulum ultrices quis in nunc. Phasellus id dui id tortor tincidunt efficitur. Proin faucibus imperdiet erat, non varius lacus. Maecenas non nisl id turpis egestas tincidunt. Nam condimentum venenatis magna eget finibus.

    +
    +
    +

    The Past

    +

    Proin sed quam sed tellus vestibulum ultrices quis in nunc. Phasellus id dui id tortor tincidunt efficitur. Proin faucibus imperdiet erat, non varius lacus. Maecenas non nisl id turpis egestas tincidunt. Nam condimentum venenatis magna eget finibus.

    +
    +
    +
    + +
    +

    That's

    +

    Phasellus id dui id tortor tincidunt efficitur. Proin sed quam sed tellus vestibulum ultrices quis in nunc.

    +
    +
    +

    No

    +

    Phasellus id dui id tortor tincidunt efficitur. Proin sed quam sed tellus vestibulum ultrices quis in nunc.

    +
    +
    +

    Moon

    +

    Phasellus id dui id tortor tincidunt efficitur. Proin sed quam sed tellus vestibulum ultrices quis in nunc.

    +
    + +
    + +
    + + diff --git a/index.html b/index.html index edcaf531db..ccb692af4a 100644 --- a/index.html +++ b/index.html @@ -21,7 +21,7 @@