Sprint Challenge Initial Push

lambda-school-assignments0 · Jul 27, 2018 · 50693e4 · 50693e4
1 parent f7f6af6
commit 50693e4
Show file tree

Hide file tree

Showing 15 changed files with 446 additions and 2 deletions.
diff --git a/Answers.md b/Answers.md
diff --git a/README.md b/README.md
@@ -1,2 +1,72 @@
-# Sprint-Challenge--User-Interface
-This is the sprint challenge for the User Interface and Git sprint
+# Assessing Your User Interface and Git Learning
+
+* The objective of this challenge is test your knowledge on all of the topics surrounding user interface and git you learned this week.
+
+* Answers to your written questions will be recorded in [Answers.md](Answers.md)
+
+* This is to be worked on alone but you can use outside resources. You can _reference_ any old code you may have and the training kit content, however, please refrain from copying and pasting any of your answers. Try and understand the question and put your responses in your own words. Be as thorough as possible when explaining something.
+
+
+
+## Task 1: Set Up The Project With Git
+
+* [ ] Fork the project into your GitHub user account
+* [ ] Clone the forked project into a directory on your machine
+* [ ] Create a branch called `develop` on your local build
+* [ ] Set your HEAD to your newly created `develop` branch
+* [ ] You are now ready to build this project with your preferred IDE
+
+#### Pro tip: Commit every time you complete a task or feature!
+
+## Task 2: Comprehension Questions
+Answer the following questions to the best of your ability. You can exercise your Googling skills and use training kit.  Open up the [Answers.md](Answers.md) file and record your responses there.
+
+1. If you had to describe semantic HTML to the next cohort of students, what would you say?
+
+2. Describe some differences between ```display: block;``` and ```display: inline;```.
+
+3. What are the 4 areas of the box model?
+
+4. While using flexbox, what axis are you using when you use the property: ```align-items: center```?
+
+5. What is the git command to commit staged changes as well as write a message? 
+
+## Task 3: Home Page
+[Review the provided design file for the home page](design-files/home.png).  Notice the navigation and header images are missing.  
+* [ ] Build the HTML and CSS to create the missing navigation and header.
+* [ ] Link up the `About` navigation item to the [about.html](about.html) page
+
+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:
+* [ ] box1: `teal`
+* [ ] box2: `gold`
+* [ ] box3: `cadetblue`
+* [ ] box4: `coral`
+* [ ] box5: `crimson`
+* [ ] box6: `forestgreen`
+* [ ] box7: `darkorchid`
+* [ ] box8: `hotpink`
+* [ ] box9: `indigo`
+* [ ] box10: `dodgerblue`
+
+## Task 4: About page
+[Review the provided design file for the about page](design-files/about.png). You have been provided the HTML wrapper, footer, and page content for the about page. Create the rest of the missing HTML and CSS to match the design file.
+* [ ] Copy and paste your home page navigation and header into the about page
+* [ ] Update the header image with the about page image
+* [ ] Link the `Home` navigation item back to the `index.html` page.
+* [ ] Build the rest of the about page layout to match the design
+
+## Task 5: Merge & Pull Request
+* [ ] Once you have completed tasks 1-4, push all your commits up to your `develop` branch.  
+* [ ] Switch your HEAD to `master`
+* [ ] Merge the `develop` branch into `master`
+* [ ] Push all your updates up to master
+* [ ] Create a pull request back to the original `fork`
+
+**Congratulations, you completed the sprint challenge!**
+
+## Stretch Goals
+Stretch goals are only available if you complete every task listed above.  **Do not work on them until your pull request is in.**
+* [ ] Build a page of your choosing from the navigation items.  Come up with content and images that fit the theme.  
+* [ ] Introduce CSS animations to your site.
+* [ ] Build the contact page and create a form with several inputs of your choosing
+* [ ] Add responsive breakpoints to your code by using media queries
diff --git a/about.html b/about.html
@@ -0,0 +1,73 @@
+<!doctype html>
+
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+
+  <title>Sprint Challenge - About</title>
+
+  <link href="https://fonts.googleapis.com/css?family=Roboto|Rubik" rel="stylesheet">
+  <link rel="stylesheet" href="css/index.css">
+
+</head>
+
+<body>
+    <div class="container about-page">
+
+    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.
+
+
+    <img src="img/about-plan.png" alt="strategy">
+
+    Strategy
+
+    Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.
+
+    Learn More
+
+
+
+    <img src="img/about-working.png" alt="strategy">
+
+    How We Work
+
+    Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.
+
+    Learn More
+
+
+
+    <img src="img/about-office.png" alt="strategy">
+
+    Places We Work
+
+    Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.
+
+    Learn More
+
+    <img src="img/about-meeting.png" alt="strategy">
+
+    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.
+
+      <footer>
+        <nav>
+          <a href="index.html">Home</a>
+          <a href="#">About</a>
+          <a href="#">Products</a>
+          <a href="#">Blog</a>
+          <a href="#">Contact</a>
+        </nav>
+      </footer>
+    </div><!-- container -->        
+</body>
+</html>
diff --git a/css/index.css b/css/index.css
@@ -0,0 +1,226 @@
+/* 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;
+}
+/* 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;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+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;
+}
+
+.container {
+    width: 800px;
+    margin: 0 auto;
+}
+
+header {
+    width: 100%;
+    display: flex;
+    margin: 20px 0;
+}
+
+header .logo {
+    width: 157px;
+    height: 40px;
+    background: black;
+}
+
+header nav {
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
+    align-items: flex-end;
+}
+
+header nav a {
+    font-size: 14px;
+    text-decoration: none;
+    color: black;
+}
+
+.jumbotron {
+    width: 100%;
+    height: auto;
+    margin: 20px 0;
+}
+
+.top-content {
+    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;  
+}
+
+.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;
+    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;
+}
+
+.bottom-content {
+    display: flex;
+    margin: 0 2% 20px;
+    justify-content: space-around;
+}
+
+.bottom-content .text-container {
+    padding-right: 4%;
+}
+
+.bottom-content .text-container:last-child {
+    padding-right: 0;
+}
+
+.about-page .about-top {
+ display: flex;
+}
+
+.about-page .about-text {
+  width: 350px;
+}
+.about-page .about-intro {
+  padding: 0 20px 20px;
+  border-bottom: 1px dashed black;
+}
+
+.about-page .about-content {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.about-page .about-content .about-box {
+  width: 370px;
+  margin: 30px 15px;
+  border-bottom: 1px dashed black;
+
+}
+
+.about-page .about-content .about-box h2 {
+  margin-top: 10px;
+}
+
+.about-page .about-content .about-box .about-btn {
+  border: 2px solid black;
+  border-radius: 10px;
+  padding: 10px;
+  width: 130px;
+  text-align: center;
+  cursor: pointer;
+  margin: 20px 0;
+}
+
+.about-page .about-content .about-box .about-btn:hover {
+  background: black;
+  color: white;
+}
+
+
+.about-page .about-footer-content {
+  margin-bottom: 20px;
+  padding: 20px;
+}
+
+footer {
+    width: 100%;
+    background: black;
+}
+
+footer nav {
+    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;
+}
diff --git a/design-files/about.png b/design-files/about.png
diff --git a/design-files/home.png b/design-files/home.png
diff --git a/img/about-meeting.png b/img/about-meeting.png
diff --git a/img/about-office.png b/img/about-office.png
diff --git a/img/about-plan.png b/img/about-plan.png
diff --git a/img/about-working.png b/img/about-working.png
diff --git a/img/jumbo-about.png b/img/jumbo-about.png
diff --git a/img/jumbo.jpg b/img/jumbo.jpg
diff --git a/img/lambda-black.png b/img/lambda-black.png
diff --git a/img/pair-program.png b/img/pair-program.png