diff --git a/README.md b/README.md index dc5314a3a1..0d4c12c5fc 100644 --- a/README.md +++ b/README.md @@ -36,26 +36,36 @@ 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? +It is a recommended standard way of creating the base structure of web pages + 2. What are the 4 areas of the box model? +margin border padding content + 3. While using flexbox, what axis does the following property work on: ```align-items: center```? +cross axis + 4. Explain why git is valuable to a team of developers. +it maintains configuration continuity and change management + 5. Define mobile-first design in your own words. +Mobile first means developed for devices that are not desktop machines especially phones. + 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 ### Task 1: Project Set Up -- [ ] Create a forked copy of this project -- [ ] Add your team lead as collaborator on Github -- [ ] Clone your OWN version of the repository (Not Lambda's by mistake!) -- [ ] Create a new branch: git checkout -b ``. -- [ ] Implement the project on your newly created `` branch, committing changes regularly -- [ ] Push commits: git push origin `` +- [ x] Create a forked copy of this project +- [ x] Add your team lead as collaborator on Github +- [ x] Clone your OWN version of the repository (Not Lambda's by mistake!) +- [ x] Create a new branch: git checkout -b ``. +- [x ] Implement the project on your newly created `` branch, committing changes regularly +- [ x] Push commits: git push origin `` ### Task 2: Minimum Viable Product diff --git a/about.html b/about.html new file mode 100644 index 0000000000..d1446a5626 --- /dev/null +++ b/about.html @@ -0,0 +1,19 @@ + + + + + + + Sprint Challenge - About + + + + + + + + + +

About

+ + \ No newline at end of file diff --git a/index.html b/index.html index d32d8ad25c..65f919a3ce 100644 --- a/index.html +++ b/index.html @@ -8,11 +8,29 @@ - + + +
+
+
+
+ +
+
+ + looks like a fast moving empty tron road at dusk +
@@ -22,7 +40,7 @@

The Future

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.

-
+
@@ -30,16 +48,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
@@ -61,7 +79,7 @@

Moon

-
+ diff --git a/products.html b/products.html new file mode 100644 index 0000000000..a2d3acfcce --- /dev/null +++ b/products.html @@ -0,0 +1,24 @@ + + + + + + + Sprint Challenge - About + + + + + + + + + +

Products

+ +

+Hey guys buy some of this stuff +

+ + + \ No newline at end of file diff --git a/style/index.css b/style/index.css index ae29d6ceee..83a2a53cb7 100644 --- a/style/index.css +++ b/style/index.css @@ -1,6 +1,8 @@ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) + This is a comment from Michael + Anothe comment to test the commit */ html, body, div, span, applet, object, iframe, @@ -47,9 +49,7 @@ table { border-spacing: 0; } -* { - box-sizing: border-box; -} + html, body { height: 100%; @@ -143,4 +143,107 @@ footer nav { footer nav a { color: white; text-decoration: none; -} \ No newline at end of file +} + +header div nav + { + + display: flex; + justify-content: space-around; + padding: 20px 2%; + font-size: 14px; + + + } + a + { + text-decoration: none; + } +.jumboimg + { + margin-bottom: 2em; + } + .lambdaimg + { + margin-bottom: 2em; + } + + + + @media screen and (max-width: 500px) { + .jumboimg +{ + width: 50%; + height: auto; + } + } + @media screen and (max-width: 500px) { + .center1 + { + display: flex; + flex-direction: column; + + } + } + @media screen and (max-width: 500px) { + .lambdaimg + { + width: 50%; + + } + } + + + @media screen and (max-width: 500px) { + .top-content + { + display: flex; + flex-direction: column; + flex-basis: 100%; + flex: 1; + } + } + @media (max-width: 500px) { + .middle-content .boxes + { + + flex-direction: column; + + justify-content: center; + + } + } + @media screen and (max-width: 500px) { + .bottom-content + { + display: flex; + flex-direction: column; + flex-basis: 100%; + flex: 1; + } + } + + @media screen and (max-width: 500px) { + .footer1 nav + { + display: flex; + flex-direction: column; + + } + } + h1 { + font-size: 3em; + text-align: center; + -webkit-transition: all .5s ease; + -moz-transition: all .5s ease; + transition: all .5s ease; + } + + h1:hover { font-size: 2em; color: red; } + + @media screen and (max-width: 1000px){ + h1 { + font-size: 2em; + color: red; + } + }