diff --git a/README.md b/README.md index dc5314a3a1..379f7cc3c9 100644 --- a/README.md +++ b/README.md @@ -35,17 +35,18 @@ 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? - + It's organized , and easliy read Html code. Not a cluster of un-understandable divs . Having a flow that is easy to grasp, sections, articles , headers, footers. 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```? - + the cross-axis. 4. Explain why git is valuable to a team of developers. - + It makes working on project with others easier, can easily help you debug problems by returning to an older model, and merge request one at a time so you don't completely break the code . 5. Define mobile-first design in your own words. - + starting with the idea that the view-point will mainly be on mobile devices. 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 diff --git a/_rjtemp_mkfile.htm b/_rjtemp_mkfile.htm new file mode 100644 index 0000000000..e2481c1657 --- /dev/null +++ b/_rjtemp_mkfile.htm @@ -0,0 +1,97 @@ + + + + +Preview + + + + +

Sprint Challenge: User Interface and Git

+

Read these instructions carefully. Understand exactly what is expected before starting this Sprint Challenge.

+

This challenge allows you to practice the concepts and techniques learned over the past week and apply them in a concrete project. This Sprint explored User Interface and Git. During this Sprint, you studied semantic HTML, CSS fundamentals, git, and responsive design. In your challenge this week, you will demonstrate proficiency by creating a fully responsive website that has some missing HTML elements as well as CSS specificity problems that need to be solved.

+

This is an individual assessment. All work must be your own. Your challenge score is a measure of your ability to work independently using the material covered through this sprint. You need to demonstrate proficiency in the concepts and objectives introduced and practiced in preceding days.

+

You are not allowed to collaborate during the Sprint Challenge. However, you are encouraged to follow the twenty-minute rule and seek support from your TL if you need direction. Your work reflects your proficiency in user interface and your command of the concepts and techniques in semantic HTML, CSS fundamentals, git, and responsive design.

+
+

You have three hours to complete this challenge. Plan your time accordingly.

+
+

Introduction

+

In this challenge, you build a missing header (navigation and image) on the home page, update some CSS styling on the home page, and make your page responsive for mobile. You will be working with a pre-existing web page, allowing you to get a taste of what it is like to inherit code from someone else, as will regularly happen on the job.

+

In meeting the minimum viable product (MVP) specifications listed below, your web page should look like the solution screen shots of the home page and mobile version.

+

Click here for home page example

+

Click here for tablet example

+

Click here for mobile example

+

Commits

+

Commit your code regularly and meaningfully. This helps both you (in case you ever need to return to old code for any number of reasons) and your team lead.

+

Self-Study Questions

+

Demonstrate your understanding of this week's concepts by answering the following free-form questions.

+

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? +It's organized , and easliy read Html code. Not a cluster of un-understandable divs . Having a flow that is easy to grasp, sections, articles , headers, footers.
    2. +
  2. What are the 4 areas of the box model? +margin , border , padding , content
    3. +
  3. While using flexbox, what axis does the following property work on: align-items: center? +the cross-axis.
    4. +
  4. Explain why git is valuable to a team of developers. +It makes working on project with others easier, can easily help you debug problems by returning to an older model, and merge request one at a time so you don't completely break the code .
    5. +
  5. Define mobile-first design in your own words. +starting with the idea that the view-point will mainly be on mobile devices. +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.
    6. +
+

Instructions

+

Task 1: Project Set Up

+ +

Task 2: Minimum Viable Product

+

Your finished project must include all of the following requirements:

+

Home Page

+

Review the provided design files. Notice the navigation and header images are missing in the starter code.

+ +

You will also notice there are 10 boxes on the home page that need background colors. Use this list below to correctly style each box:

+ +

In your solution, it is essential that you follow best practices and produce clean and professional results. Schedule time to review, refine, and assess your work and perform basic professional polishing including spell-checking and grammar-checking on your work. It is better to submit a challenge that meets MVP than one that attempts too much and does not.

+

Task 3: Stretch Problems

+

After finishing your required elements, you can push your work further. These goals may or may not be things you have learned in this module but they build on the material you just studied. Time allowing, stretch your limits and see if you can deliver on the following optional goals:

+ +

Resources

+

📚Best Practices for Responsive Design

+

🤝W3 Schools - Responsive Design

+

👀 Styling with HTML and CSS

+

Submission format

+

Follow these steps for completing your project.

+ + + + diff --git a/about.html b/about.html new file mode 100644 index 0000000000..04a987a9dc --- /dev/null +++ b/about.html @@ -0,0 +1,59 @@ + + + + + + + test + + +
+
+

My About page

+
+ +
+
+
+
+
+

+ Fun stuff about this site would go here +

+
+
+ An image and some wrapping text will go here +
+
+

+ Information about this topic and maybe statistical graphs +

+
+
+
+
+ +
+
+ + \ No newline at end of file diff --git a/index.html b/index.html index d32d8ad25c..1f232dad58 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,23 @@
- +
+ +
+ +
+
+ space pic +

The Future

@@ -30,16 +46,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
diff --git a/style/index.css b/style/index.css index ae29d6ceee..e192babf21 100644 --- a/style/index.css +++ b/style/index.css @@ -1,3 +1,241 @@ + +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; +} + + +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; +} + +p { + line-height: 1.4; +} +img{ + width:auto; + max-width:100%; + height:auto; + } +.container { + width: 800px; + margin: 0 auto; + + width:auto; + max-width:100%; + height:auto; +} + +.top-content { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + margin-bottom: 20px; + border-bottom: 1px dashed black; +} + +.top-content .text-container { + width: 80%; + padding: 0 1%; + padding-bottom: 20px; +} + +.middle-content { + margin-bottom: 20px; + border-bottom: 1px dashed black; +} + +.middle-content h2 { + padding: 0 2%; + margin-bottom: 0; +} + +.middle-content .boxes { + display: flex; + flex-wrap: wrap; + flex-direction:column; + justify-content: space-evenly; + align-items:center; +} + +.middle-content .boxes .box { + width: 20.5%; + height: 100px; + background: black; + margin: 20px 2.5%; + color: white; + display: flex; + flex-wrap:wrap; + align-items: center; + justify-content: center; +} + +.bottom-content { + display: flex; + flex-direction:column; + margin: 0 2% 20px; + justify-content: space-between; +} + +.bottom-content .text-container { + padding-right: 4%; + +} + +.bottom-content .text-container:last-child { + padding-right: 0; + +} +footer { + width: 100%; + background: black; + overflow-x:hidden; +} + +footer nav { + width: 60%; + display: flex; + flex-direction:column; + align-items:center; + justify-content: space-around; + flex-wrap:wrap; + padding: 20px 2%; + font-size: 14px; +} + +footer nav a { + color: white; + text-decoration: none; +} +.main-nav{ + display:block; +} +a{ + text-decoration:none; +} +.main-header li{ + margin-top:15px; + font-weight:bold; + text-decoration:none; + list-style:none; + color:black; + display:block; + text-align:center; + +} +.picture{ + height:auto; + width:96vw; + +.main-container{ + width:100%; + height:100%; + background:url(https://media.gettyimages.com/videos/abstract-high-tech-background-texture-video-id925324512?s=640x640)no-repeat center center fixed; + -webkit-background-size:cover; + -moz-background-size:cover; + -o-background-size:cover; + background-size:cover; + color:white; + font-family: 'Muli', sans-serif; +} +.main-header2{ + background-color:dodgerblue; + margin:20px; + padding:30px; + text-align:center; + display:block; + background:url("https://www.publicdomainpictures.net/pictures/70000/nahled/stars-in-the-night-sky.jpg"); + animation:space-vroom 10s linear infinite; + color:white; +} +h1{ + font-size:4rem; +} +@keyframes space-vroom{ + 0%{ + background-position:0% 0%; + } + 50%{ + background-position:20% 10%; + } + 100%{ + background-position:30% 30%; + } +} +a{ + text-decoration:none; +} +.main-nav2{ + display:flex; + flex-direction:row; + justify-content:space-between; + align-items:right; + flex-wrap:wrap; + color:rgba(255,255,255,0.7) +} +.main-nav2 li { + color: white; +} +.main-nav2 a{ + text-decoration:none; +} +} + +@media(max-width:600px){ + footer nav a { + margin-left:50%; + margin-bottom:5px; +} +} +@media(min-width:600px){ + + /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) @@ -98,6 +336,8 @@ p { .middle-content .boxes { display: flex; flex-wrap: wrap; + flex-direction:row; + align-items:stretch; justify-content: space-evenly; } @@ -114,12 +354,13 @@ p { .bottom-content { display: flex; + flex-direction:row; margin: 0 2% 20px; justify-content: space-around; } .bottom-content .text-container { - padding-right: 4%; + margin: 0 2% 20px; } .bottom-content .text-container:last-child { @@ -134,6 +375,7 @@ footer { footer nav { width: 60%; display: flex; + flex-direction:row; justify-content: space-between; align-items: center; padding: 20px 2%; @@ -143,4 +385,97 @@ footer nav { footer nav a { color: white; text-decoration: none; +} +.main-nav{ + display:flex; + flex-direction:row; + justify-content:space-between; + align-items:flex-end; + flex-wrap:wrap; +} +a{ + text-decoration:none; +} +.main-header li{ + margin-top:15px; + font-weight:bold; + text-decoration:none; + list-style:none; + color:black; + display:inline-block; + +} +.picture { + margin-top:30px; + margin-bottom:10px; + animation: 4s slide-up; + height:auto; + width:auto; +} + +@keyframes slide-up { + from { + margin-top: 100%; + height: 300%; + } + + to { + margin-top: 30px; + height: 100%; + } + +} + +.main-container{ + width:100%; + height:100%; + background:url(https://media.gettyimages.com/videos/abstract-high-tech-background-texture-video-id925324512?s=640x640)no-repeat center center fixed; + -webkit-background-size:cover; + -moz-background-size:cover; + -o-background-size:cover; + background-size:cover; + color:white; + font-family: 'Muli', sans-serif; +} +.main-header2{ + background-color:dodgerblue; + margin:20px; + padding:30px; + text-align:center; + display:block; + background:url("https://www.publicdomainpictures.net/pictures/70000/nahled/stars-in-the-night-sky.jpg"); + animation:space-vroom 10s linear infinite; + color:white; +} +h1{ + font-size:4rem; +} +@keyframes space-vroom{ + 0%{ + background-position:0% 0%; + } + 50%{ + background-position:20% 10%; + } + 100%{ + background-position:30% 30%; + } +} +a{ + text-decoration:none; +} +.main-nav2{ + display:flex; + flex-direction:row; + justify-content:space-between; + align-items:right; + flex-wrap:wrap; + color:rgba(255,255,255,0.7) +} +.main-nav2 li { + color: white; +} +.main-nav2 a{ + text-decoration:none; +} } \ No newline at end of file diff --git a/test.css b/test.css new file mode 100644 index 0000000000..9f5e09e032 --- /dev/null +++ b/test.css @@ -0,0 +1,283 @@ +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; +} + + +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; +} + +p { + line-height: 1.4; +} +img{ + width:auto; + max-width:100%; + height:auto; + } +.container { + width: 800px; + margin: 0 auto; + + width:auto; + max-width:100%; + height:auto; +} + +.top-content { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + margin-bottom: 20px; + border-bottom: 1px dashed black; +} + +.top-content .text-container { + width: 80%; + padding: 0 1%; + padding-bottom: 20px; +} + +.middle-content { + margin-bottom: 20px; + border-bottom: 1px dashed black; +} + +.middle-content h2 { + padding: 0 2%; + margin-bottom: 0; +} + +.middle-content .boxes { + display: flex; + flex-wrap: wrap; + flex-direction:column; + justify-content: space-evenly; + align-items:center; +} + +.middle-content .boxes .box { + width: 20.5%; + height: 100px; + background: black; + margin: 20px 2.5%; + color: white; + display: flex; + flex-wrap:wrap; + align-items: center; + justify-content: center; +} + +.bottom-content { + display: flex; + flex-wrap:wrap; + margin: 0 2% 20px; + justify-content: space-around; +} + +.bottom-content .text-container { + padding-right: 4%; +} + +.bottom-content .text-container:last-child { + padding-right: 0; +} + +footer { + width: 100%; + background: black; + overflow-x:hidden; +} + +footer nav { + width: 60%; + display: flex; + justify-content: space-between; + flex-wrap:wrap; + align-items: center; + padding: 20px 2%; + font-size: 14px; +} + +footer nav a { + color: white; + text-decoration: none; +} +.main-nav{ + display:block; +} +a{ + text-decoration:none; +} +.main-header li{ + margin-top:15px; + font-weight:bold; + text-decoration:none; + list-style:none; + color:black; + display:block; + text-align:center; + +} +.picture{ + height:auto; + width:100vw; +} + +@media(min-width:600px){ + + +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +@@ -98,6 +275,8 @@ p {*/ +.middle-content .boxes { + display: flex; + flex-wrap: wrap; + flex-direction:row; + align-items:stretch; + justify-content: space-evenly; +} + +@@ -143,4 +322,95 @@ footer nav { +footer nav a { + color: white; + text-decoration: none; +} +.main-nav{ + display:flex; + flex-direction:row; + justify-content:space-between; + align-items:flex-end; + flex-wrap:wrap; +} +a{ + text-decoration:none; +} +.main-header li{ + margin-top:15px; + font-weight:bold; + text-decoration:none; + list-style:none; + color:black; + display:inline-block; + +} +.picture { + margin-top:30px; + margin-bottom:10px; + animation: 4s slide-up; +} + +@keyframes slide-up { + from { + margin-top: 100%; + height: 300%; + } + + to { + margin-top: 30px; + height: 100%; + } + +} + +.main-container{ + width:100%; + height:100%; + background:url(https://media.gettyimages.com/videos/abstract-high-tech-background-texture-video-id925324512?s=640x640)no-repeat center center fixed; + -webkit-background-size:cover; + -moz-background-size:cover; + -o-background-size:cover; + background-size:cover; + color:white; + font-family: 'Muli', sans-serif; +} +.main-header2{ + background-color:dodgerblue; + margin:20px; + padding:30px; + text-align:center; + display:block; + background:url("https://www.publicdomainpictures.net/pictures/70000/nahled/stars-in-the-night-sky.jpg"); + animation:space-vroom 10s linear infinite; + color:white; +} +h1{ + font-size:4rem; +} +@keyframes space-vroom{ + 0%{ + background-position:0% 0%; + } + 50%{ + background-position:20% 10%; + } + 100%{ + background-position:30% 30%; + } +} +a{ + text-decoration:none; +} +.main-nav2{ + display:flex; + flex-direction:row; + justify-content:space-between; + align-items:right; + flex-wrap:wrap; + color:rgba(255,255,255,0.7) +} +.main-nav2 li { + color: white; +} +.main-nav2 a{ + text-decoration:none; +}