Skip to content

saving update #1300

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

saving update #1300

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a9ae683
saving update
May 8, 2020
e6e08f6
Final changes of the sprint
May 8, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 31 additions & 18 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,26 +36,39 @@ 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 the way we structure our website using meaningful tags that help other programmers and internet readers to understand
what we are trying to accomplish with our layout

2. What are the 4 areas of the box model?

Content, padding, border, margin

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 allows for mulitple people to be working on the same code at the same time and
easily merge their work into one master document

5. Define mobile-first design in your own words.

Mobile first design is making your webpage so that it is first and foremost mobile user friendly,
as opposed to building it desktop friendly first.

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 `<firstName-lastName>`.
- [ ] Implement the project on your newly created `<firstName-lastName>` branch, committing changes regularly
- [ ] Push commits: git push origin `<firstName-lastName>`
- [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 `<firstName-lastName>`.
- [x] Implement the project on your newly created `<firstName-lastName>` branch, committing changes regularly
- [x] Push commits: git push origin `<firstName-lastName>`

### Task 2: Minimum Viable Product

Expand All @@ -65,23 +78,23 @@ Your finished project must include all of the following requirements:

[Review the provided design files](/design). Notice the navigation and header images are missing in the starter code.

* [ ] Build the HTML and CSS to create the missing navigation and header
* [ ] Link the `About` navigation item to an about.html page (you'll also need to create `about.html`)
* [x] Build the HTML and CSS to create the missing navigation and header
* [x] Link the `About` navigation item to an about.html page (you'll also need to create `about.html`)
* [ ] Make your design responsive such that it is accessible on mobile(500px) and tablet(800 px) and matches the [mobile](design/mobile.png) wireframe
* Add responsive breakpoints to your code by using media queries

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`
* [x] box1: `teal`
* [x] box2: `gold`
* [x] box3: `cadetblue`
* [x] box4: `coral`
* [x] box5: `crimson`
* [x] box6: `forestgreen`
* [x] box7: `darkorchid`
* [x] box8: `hotpink`
* [x] box9: `indigo`
* [x] box10: `dodgerblue`

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.

Expand Down
12 changes: 12 additions & 0 deletions about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Page</title>
<link href="style/index.css" rel="stylesheet" type="text/css">
</head>
<body>

</body>
</html>
38 changes: 25 additions & 13 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,29 @@
<html lang="en">
<head>
<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sprint Challenge - Home</title>

<link href="https://fonts.googleapis.com/css?family=Roboto|Rubik" rel="stylesheet">
<link rel="stylesheet" href="style/index.css">
<link rel="stylesheet" href="style/index.css" type="text/css">

</head>

<body>
<div class="container">

<section >
<div class="header">
<img src="assets/lambda-black.png">
<a href="index">Home</a>
<a href="about.html">About</a>
<a>Products</a>
<a>Blog</a>
<a>Contact</a>
</div>
<div class="imgContainer">
<img src="assets/jumbo.jpg">
</div>
</section>
<section class="top-content">
<div class="text-container">
<h2>The Future</h2>
Expand All @@ -30,16 +42,16 @@ <h2>The Past</h2>
<h2>Why Did It Have To Be Boxes...</h2>

<div class="boxes">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
<div class="box">Box 5</div>
<div class="box">Box 6</div>
<div class="box">Box 7</div>
<div class="box">Box 8</div>
<div class="box">Box 9</div>
<div class="box">Box 10</div>
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
<div class="box3">Box 3</div>
<div class="box4">Box 4</div>
<div class="box5">Box 5</div>
<div class="box6">Box 6</div>
<div class="box7">Box 7</div>
<div class="box8">Box 8</div>
<div class="box9">Box 9</div>
<div class="box10">Box 10</div>
</div>

</section>
Expand Down
194 changes: 192 additions & 2 deletions style/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}

body {
line-height: 1;
}
Expand Down Expand Up @@ -69,6 +70,23 @@ p {
.container {
width: 800px;
margin: 0 auto;
align-items: center;
justify-content: space-evenly;

}

.header{
display:flex;
align-items: center;
justify-content: space-between;
margin:5%;
}

.imgContainer{
margin: 3%;
display:flex;
align-items: center;
justify-content: space-between;
}

.top-content {
Expand Down Expand Up @@ -101,17 +119,116 @@ p {
justify-content: space-evenly;
}

.middle-content .boxes .box {
.middle-content .boxes .box1 {
width: 12.5%;
height: 100px;
background: black;
background:teal;
margin: 20px 2.5%;
color: white;
display: flex;
align-items: center;
justify-content: center;
}

.middle-content .boxes .box2 {
width: 12.5%;
height: 100px;
background: gold;
margin: 20px 2.5%;
color: white;
display: flex;
align-items: center;
justify-content: center;
}

.middle-content .boxes .box3 {
width: 12.5%;
height: 100px;
background: cadetblue;
margin: 20px 2.5%;
color: white;
display: flex;
align-items: center;
justify-content: center;
}

.middle-content .boxes .box4 {
width: 12.5%;
height: 100px;
background: coral;
margin: 20px 2.5%;
color: white;
display: flex;
align-items: center;
justify-content: center;
}

.middle-content .boxes .box5 {
width: 12.5%;
height: 100px;
background: crimson;
margin: 20px 2.5%;
color: white;
display: flex;
align-items: center;
justify-content: center;
}


.middle-content .boxes .box6 {
width: 12.5%;
height: 100px;
background: forestgreen;
margin: 20px 2.5%;
color: white;
display: flex;
align-items: center;
justify-content: center;
}

.middle-content .boxes .box7 {
width: 12.5%;
height: 100px;
background: darkorchid;
margin: 20px 2.5%;
color: white;
display: flex;
align-items: center;
justify-content: center;
}

.middle-content .boxes .box8 {
width: 12.5%;
height: 100px;
background: hotpink;
margin: 20px 2.5%;
color: white;
display: flex;
align-items: center;
justify-content: center;
}

.middle-content .boxes .box9 {
width: 12.5%;
height: 100px;
background: indigo;
margin: 20px 2.5%;
color: white;
display: flex;
align-items: center;
justify-content: center;
}

.middle-content .boxes .box10 {
width: 12.5%;
height: 100px;
background: dodgerblue;
margin: 20px 2.5%;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.bottom-content {
display: flex;
margin: 0 2% 20px;
Expand Down Expand Up @@ -143,4 +260,77 @@ footer nav {
footer nav a {
color: white;
text-decoration: none;
}


@media (max-width: 500px){

.container, .header, .top-content, .boxes, .bottom-content, .text-container, .middle-content{
flex-wrap: wrap;
flex-direction: column;

}

nav{
flex-wrap: wrap;
flex-direction: column;
align-items: center;
text-align: center;
padding:2%;
}
.imgContainer{
width: 10%;
height: auto;
}

.middle-content, .boxes, .header, .top-content, .bottom-content, .container, .text-container{
align-items: center;

}

.middle-content, .header, .top-content, .bottom-content, .text-container{
max-width: 80%;
}
.middle-content h2{
justify-content: center;
text-align: center;
}
.text-container{
padding:2%;
}

p{
flex-wrap: wrap;
}

}

@media (max-width: 800px){
.top-content, .text-container{
flex-flow: column wrap;
}

.box1, .box2, .box3, .box4,.box5, .box6, .box7, .box8, .box9, .box10 {
max-width: 30%;;
flex: 60%;
flex-wrap: wrap;
}
.boxes{
display:flex;
}

.bottom-content{
flex-wrap: wrap;
display:flex;
max-width: 50%;;


}

.header{
justify-content: space-evenly;
max-width: 80%;
}


}