Skip to content

finished project #1304

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 1 commit into
base: master
Choose a base branch
from
Open

finished project #1304

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
11 changes: 10 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,14 +35,23 @@ 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?
Semantic HTML is HTML that has meaning so that when others look at your code it is easier understood. It also helps certain screen reading programs to better read your webpage. ex. would be things like <header> or <footer> elements.

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

The Content Edge, Padding Edge, Border Edge and Margin Edge.

3. While using flexbox, what axis does the following property work on: ```align-items: center```?
The verticle axis.

4. Explain why git is valuable to a team of developers.
There are a couple of reasons Git is great for a team of developers.
1) Git allows you a "time-machine" of sorts by allowing you to go back to previous versions of your build.
2) Git allows you to build many different parts of a project at the same time while having a project lead able to look at all changes being made and either giving them the okay or sending back for further work.
3) Git allows you to track your progress through commits that add details on your work.

5. Define mobile-first design in your own words.
Mobile-first design is where you build your project to be able to display on mobile devices as that is where a lot of people view websites. It allows you to remove any useless decoration that would hinder the access to mobile users and make your site more user friendly.


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.

Expand Down
85 changes: 85 additions & 0 deletions about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
<!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="style/index.css">

</head>

<body>
<div class="container">
<nav>
<a href="index.html">
<img src="./assets/lambda-black.png"></img>
</a>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="index.html">Products</a>
<a href="index.html">Blog</a>
<a href="index.html">Contact</a>
</nav>

<section class="top-content">
<div class="text-container">
<h2>The Future</h2>
<p>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.</p>
</div>
<div class="text-container">
<h2>The Past</h2>
<p>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.</p>
</div>
</section>

<section class="middle-content">

<h2>Why Did It Have To Be Boxes...</h2>

<div class="boxes">
<div class="boxOne">Box 1</div>
<div class="boxTwo">Box 2</div>
<div class="boxThree">Box 3</div>
<div class="boxFour">Box 4</div>
<div class="boxFive">Box 5</div>
<div class="boxSix">Box 6</div>
<div class="boxSeven">Box 7</div>
<div class="boxEight">Box 8</div>
<div class="boxNine">Box 9</div>
<div class="boxTen">Box 10</div>
</div>

</section>

<section class="bottom-content">

<div class="text-container">
<h2>That's</h2>
<p>Phasellus id dui id tortor tincidunt efficitur. Proin sed quam sed tellus vestibulum ultrices quis in nunc.</p>
</div>
<div class="text-container">
<h2>No</h2>
<p>Phasellus id dui id tortor tincidunt efficitur. Proin sed quam sed tellus vestibulum ultrices quis in nunc.</p>
</div>
<div class="text-container">
<h2>Moon</h2>
<p>Phasellus id dui id tortor tincidunt efficitur. Proin sed quam sed tellus vestibulum ultrices quis in nunc.</p>
</div>

</section>

<footer>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="index.html">Products</a>
<a href="index.html">Blog</a>
<a href="index.html">Contact</a>
</nav>
</footer>
</div><!-- container -->
</body>
</html>
41 changes: 25 additions & 16 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,17 @@

<body>
<div class="container">
<nav class="topNav">
<img class="lambdaLogo" src="./assets/lambda-black.png"></img>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="index.html">Products</a>
<a href="index.html">Blog</a>
<a href="index.html">Contact</a>
</nav>

<section class="top-content">
<img class="topImage" src="./assets/jumbo.jpg"></img>
<div class="text-container">
<h2>The Future</h2>
<p>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.</p>
Expand All @@ -30,16 +39,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="boxOne">Box 1</div>
<div class="boxTwo">Box 2</div>
<div class="boxThree">Box 3</div>
<div class="boxFour">Box 4</div>
<div class="boxFive">Box 5</div>
<div class="boxSix">Box 6</div>
<div class="boxSeven">Box 7</div>
<div class="boxEight">Box 8</div>
<div class="boxNine">Box 9</div>
<div class="boxTen">Box 10</div>
</div>

</section>
Expand All @@ -62,12 +71,12 @@ <h2>Moon</h2>
</section>

<footer>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Products</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
<nav class="bottomNav">
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="index.html">Products</a>
<a href="index.html">Blog</a>
<a href="index.html">Contact</a>
</nav>
</footer>
</div><!-- container -->
Expand Down
133 changes: 127 additions & 6 deletions style/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ p {
.top-content .text-container {
width: 48%;
padding: 0 1%;
padding-bottom: 20px;
padding-bottom: 20px;
}

.middle-content {
Expand All @@ -101,10 +101,9 @@ p {
justify-content: space-evenly;
}

.middle-content .boxes .box {
.middle-content .boxes .boxOne, .boxTwo, .boxThree, .boxFour, .boxFive, .boxSix, .boxSeven, .boxEight, .boxNine, .boxTen {
width: 12.5%;
height: 100px;
background: black;
margin: 20px 2.5%;
color: white;
display: flex;
Expand All @@ -128,7 +127,7 @@ p {

footer {
width: 100%;
background: black;
background-color: black;
}

footer nav {
Expand All @@ -140,7 +139,129 @@ footer nav {
font-size: 14px;
}

footer nav a {
.topNav a {
text-decoration: none;
padding-top: 3%;
color: black;
}

.bottomNav a{
color: white;
text-decoration: none;
}
margin-left: 20%;
}

.container nav {
display: flex;
flex-direction: row;
justify-content: space-between;
}

.topImage {
padding: 3% 0;
background-size: cover;
}

.lambdaLogo {
padding-top: 1%;
}

.boxOne {
background-color: teal;
}

.boxTwo {
background-color: gold;
}

.boxThree {
background-color: cadetblue;
}

.boxFour {
background-color: coral;
}

.boxFive {
background-color: crimson;
}

.boxSix {
background-color: forestgreen;
}

.boxSeven {
background-color: darkorchid;
}

.boxEight {
background-color: hotpink;
}

.boxNine {
background-color: indigo;
}

.boxTen {
background-color: dodgerblue;
}

@media (max-width: 800px) {
.container {
width: 100%;
overflow: hidden;
}
.middle-content .boxes .boxOne, .boxTwo, .boxThree, .boxFour, .boxFive, .boxSix, .boxSeven, .boxEight, .boxNine, .boxTen {
height: 0;
width: 0;
padding: 20%;
white-space: nowrap;
}
.bottomNav a{
margin-left: 18%;
}
.top-content {
flex-direction: column;
padding-left: 0%;
margin-left: 0%;
width: 100%;
}

.top-content .text-container {
width: 100%;
}
}

@media (max-width: 500px) {
.middle-content .boxes .boxOne, .boxTwo, .boxThree, .boxFour, .boxFive, .boxSix, .boxSeven, .boxEight, .boxNine, .boxTen {
height: 0;
width: 0;
padding: 40%;
white-space: nowrap;
}
.container nav {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
font-size: 25px;
}
.bottomNav a{
margin-left: 68%;
margin-top: 2%;
}
.topNav a {
margin-top: 2%;
}

.bottom-content {
flex-direction: column;
justify-content: center;
}

.lambdaLogo {
background-size: cover;
padding-top: 5%;
margin: 0 25%;
}
}