diff --git a/README.md b/README.md index d17421efd..7191dc973 100644 --- a/README.md +++ b/README.md @@ -32,15 +32,15 @@ Demonstrate your understanding of this week's concepts by answering the followin Edit this document to include your answers after each question. Make sure to leave a blank line above and below your answer so it is clear and easy to read by your project manager -1. If you were to describe semantic HTML to the next cohort of students, what would you say? +1. If you were to describe semantic HTML to the next cohort of students, what would you say? A: Semantic HTML uses specific tags that are named according to the use they were intended to have to make the code readable to others. This way it is a lot simpler to follow the markup and its functionality. -2. Name two big differences between ```display: block;``` and ```display: inline;```. +2. Name two big differences between ```display: block;``` and ```display: inline;```. A: Inline elements only take up the width they need and they do not force a line-break. Block elements use the entire width and force other elements to move either before or after it. -3. What are the 4 areas of the box model? +3. What are the 4 areas of the box model? A: Content - padding - border - margin. -4. While using flexbox, what axis does the following property work on: ```align-items: center```? +4. While using flexbox, what axis does the following property work on: ```align-items: center```? A: Cross Axis. -5. Explain why git is valuable to a team of developers. +5. Explain why git is valuable to a team of developers. A: It allows developers/coders to create repos (copies) of the code they are working on, or help on someone else's project without affecting the master file/code by using a version control system and code comparing features. 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. diff --git a/about.html b/about.html index 9f133e274..4e45595a7 100644 --- a/about.html +++ b/about.html @@ -1,64 +1,93 @@ - + - - + + - Sprint Challenge - About + Sprint Challenge - About - - + + + - - - +
- - About - - Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. - - - strategy - - Strategy - - Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. - - Learn More - - - - strategy - - How We Work - - Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. - - Learn More - - - - strategy - - Places We Work - - Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. - - Learn More - - strategy - - Collaboration - - Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. - - Learn More - - Let's Work Together +
+ + about main banner +
+ +
+

About

+

+ Leverage agile frameworks to provide a robust synopsis for high level + overviews. Iterative approaches to corporate strategy foster + collaborative thinking to further the overall value proposition. + Organically grow the holistic world view of disruptive innovation via + workplace diversity and empowerment. +

+
+ +
+
+ strategy +

Strategy

+

+ Iterative approaches to corporate strategy foster collaborative + thinking to further the overall value proposition. +

+ Learn More +
+
+ working +

How We Work

+

+ Iterative approaches to corporate strategy foster collaborative + thinking to further the overall value proposition. +

+ Learn More +
+
+ office +

Places We Work

+

+ Iterative approaches to corporate strategy foster collaborative + thinking to further the overall value proposition. +

+ Learn More +
+
+ meeting +

Collaboration

+

+ Iterative approaches to corporate strategy foster collaborative + thinking to further the overall value proposition. +

+ Learn More +
+
+ +
+

Let's Work Together

+

+ Leverage agile frameworks to provide a robust synopsis for high level + overviews. Iterative approaches to corporate strategy foster + collaborative thinking to further the overall value proposition. + Organically grow the holistic world view of disruptive innovation via + workplace diversity and empowerment. +

+
- Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. - -
- - \ No newline at end of file + + + + diff --git a/contact.html b/contact.html new file mode 100644 index 000000000..b015d2ea8 --- /dev/null +++ b/contact.html @@ -0,0 +1,81 @@ + + + + + + + Sprint Challenge - About + + + + + + +
+
+ + contact main banner +
+ +
+

Don't Hesitate to Contact Us

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa + similique quis ex alias consequatur harum quae adipisci dolore? Maxime + similique in veniam cumque ea facilis recusandae minus enim sequi + atque. +

+
+ +
+
+

Complete the form below

+
+ + + + + + +
+
+ +
+ +
+
+ + +
+ + + diff --git a/css/index.css b/css/index.css index ae29d6cee..48cbc3cad 100644 --- a/css/index.css +++ b/css/index.css @@ -1,146 +1,377 @@ -/* 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; +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; +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; } body { - line-height: 1; + line-height: 1; } -ol, ul { - list-style: none; +ol, +ul { + list-style: none; } -blockquote, q { - quotes: none; +blockquote, +q { + quotes: none; } -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; } table { - border-collapse: collapse; - border-spacing: 0; + border-collapse: collapse; + border-spacing: 0; } * { - box-sizing: border-box; + box-sizing: border-box; } -html, body { - height: 100%; - font-family: 'Roboto', sans-serif; +html, +body { + height: 100%; + font-family: "Roboto", sans-serif; } -h1, h2, h3, h4, h5 { - font-size: 18px; - margin-bottom: 15px; - font-family: 'Rubik', sans-serif; +h1, +h2, +h3, +h4, +h5 { + font-size: 18px; + margin-bottom: 15px; + font-family: "Rubik", sans-serif; } p { - line-height: 1.4; + line-height: 1.4; } .container { - width: 800px; - margin: 0 auto; + width: 800px; + margin: 0 auto; +} + +header { + margin: 35px 0 25px 0; +} + +nav { + display: flex; + align-items: flex-end; + height: 40px; + margin-bottom: 40px; +} + +.logo { + padding-right: 10px; +} + +nav a { + margin: 0 40px; + text-transform: capitalize; + color: #000; + text-decoration: none; + transition: all 0.4s; +} + +nav a:hover, +.current { + color: red; + text-decoration: underline; +} + +nav a:hover { + transform: scale(1.3); } .top-content { - display: flex; - flex-wrap: wrap; - justify-content: space-evenly; - margin-bottom: 20px; - border-bottom: 1px dashed black; + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + margin-bottom: 20px; + border-bottom: 1px dashed black; } .top-content .text-container { - width: 48%; - padding: 0 1%; - padding-bottom: 20px; + width: 48%; + padding: 0 1%; + padding-bottom: 20px; } .middle-content { - margin-bottom: 20px; - border-bottom: 1px dashed black; + margin-bottom: 20px; + border-bottom: 1px dashed black; } .middle-content h2 { - padding: 0 2%; - margin-bottom: 0; + padding: 0 2%; + margin-bottom: 0; } .middle-content .boxes { - display: flex; - flex-wrap: wrap; - justify-content: space-evenly; + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; } .middle-content .boxes .box { - width: 12.5%; - height: 100px; - background: black; - margin: 20px 2.5%; - color: white; - display: flex; - align-items: center; - justify-content: center; + width: 12.5%; + height: 100px; + background: black; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + +/* Boxes color order */ + +.boxes .box:nth-of-type(1) { + background: teal; +} + +.boxes .box:nth-of-type(2) { + background: gold; +} + +.boxes .box:nth-of-type(3) { + background: cadetblue; +} + +.boxes .box:nth-of-type(4) { + background: coral; +} + +.boxes .box:nth-of-type(5) { + background: crimson; +} + +.boxes .box:nth-of-type(6) { + background: forestgreen; +} + +.boxes .box:nth-of-type(7) { + background: darkorchid; +} + +.boxes .box:nth-of-type(8) { + background: hotpink; +} + +.boxes .box:nth-of-type(9) { + background: indigo; +} + +.boxes .box:nth-of-type(10) { + background: dodgerblue; } .bottom-content { - display: flex; - margin: 0 2% 20px; - justify-content: space-around; + display: flex; + margin: 0 2% 20px; + justify-content: space-around; } .bottom-content .text-container { - padding-right: 4%; + padding-right: 4%; } .bottom-content .text-container:last-child { - padding-right: 0; + padding-right: 0; +} + +.full { + padding: 20px; + border-bottom: 1px dashed #000; + /* margin-bottom: 15px; */ +} + +.full.last { + border-bottom: none; + margin-top: 20px; +} + +.half { + display: flex; + flex-wrap: wrap; +} + +.half article { + width: calc(50% - 40px); + margin: 20px; + padding-bottom: 20px; + border-bottom: 1px dashed #000; +} + +.half article img { + margin-bottom: 15px; + min-width: 100%; +} + +.learn, +form input[type="submit"] { + border-radius: 10px; + border: 2px solid #000; + margin-top: 20px; + padding: 10px 20px; + display: block; + width: 130px; + color: #000; + text-decoration: none; + text-transform: capitalize; +} + +.learn:hover, +form input[type="submit"]:hover { + background-color: #000; + color: #fff; + cursor: pointer; +} + +section form { + margin: 20px 0; +} + +form input, +form textarea { + width: 100%; + padding: 15px 20px; + margin: 5px 0; + text-transform: capitalize; +} + +form textarea { + border: 1px solid #ccc; +} + +form input::placeholder, +form textarea::placeholder { + font-size: 16px; + color: #ccc; } footer { - width: 100%; - background: black; + width: 100%; + background: black; } footer nav { - width: 60%; - display: flex; - justify-content: space-between; - align-items: center; - padding: 20px 2%; - font-size: 14px; + width: 60%; + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px 2%; + font-size: 14px; } footer nav a { - color: white; - text-decoration: none; -} \ No newline at end of file + color: white; + text-decoration: none; +} diff --git a/index.html b/index.html index c6405aef7..2a46641e7 100644 --- a/index.html +++ b/index.html @@ -1,75 +1,104 @@ - + - - + + - Sprint Challenge - Home + Sprint Challenge - Home - - + + + - - - +
- -
-
-

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.

-
-
- -
- -

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
-
- -
+
+ + homepage main banner +
+ +
+
+

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. +

+
+
+ +
+

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
+
+
-
-

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.

-
+
+
+

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. +

+
+
-
- - -
- - \ No newline at end of file + + + + +