Skip to content
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

David wilford #1319

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

David wilford #1319

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
914b303
answered questions 1-5
remyJ710 May 16, 2020
d5f77b0
checking to see if pushing it will change the webpage
remyJ710 May 16, 2020
977ceb1
made the about.html file
remyJ710 May 16, 2020
800f461
css color change
remyJ710 May 16, 2020
35a05b9
working on nav in css
remyJ710 May 16, 2020
8b018a8
desktop view
remyJ710 May 18, 2020
a4c1962
started media tag for phone
remyJ710 May 18, 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
10 changes: 10 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,14 +36,24 @@ 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?

That semantic Html gives meaning to the web page. It creates a hierarchy to the page making it easier to read.

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

The 4 areas of a box model are the margin, border, padding, and finally content.

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

The axis that the algin-items: center effects is the cross-axis.

4. Explain why git is valuable to a team of developers.

Git is valuable to teams of developers because, new code changes can be easily commited, version branches can be effortlessly compared and merged. and make it so a team can all work on the same code at the same time.

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

Mobile-first means that the web-page was designed to work amazaing on mobile devices first instead of a computer web page.

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
Expand Down
77 changes: 77 additions & 0 deletions about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
<html lang="en">
<head>
<meta charset="utf-8">

<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 href= "C:\lambda-sprint\Sprint-Challenge--User-Interface\style\index.css" rel = "stylesheet" type = "text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<div class="container">
<header>
<img src= "C:\lambda-sprint\Sprint-Challenge--User-Interface\assets\lambda-black.png" alt= "">
<nav class= "navLnk">
<ul>
<li>
<a href= "#">Home</a>
</li>
<li>
<a href= "about.html">About</a>
</li>
<li>
<a href= "#">Products</a>
</li>
<li>
<a href= "#">Blog</a>
</li>
<li>
<a href= "#">Contact</a>
</li>
</ul>
</nav>
<div class= "jumbo">
<img src= "C:\lambda-sprint\Sprint-Challenge--User-Interface\assets\jumbo.jpg" alt= "">
</div>
</header>
<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="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="products.html">Products</a>
<a href="blogs.html">Blog</a>
<a href="contat.html">Contact</a>
</nav>
</footer>
</div>
</body>
</html>
60 changes: 44 additions & 16 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,44 @@
<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 href= "C:\lambda-sprint\Sprint-Challenge--User-Interface\style\index.css" rel = "stylesheet" type = "text/css">

</head>

<body>
<div class="container">
<header>
<img src= "C:\lambda-sprint\Sprint-Challenge--User-Interface\assets\lambda-black.png" alt= "">
<nav class= "navLnk">
<ul>
<li>
<a href= "index.html">Home</a>
</li>
<li>
<a href= "about.html">About</a>
</li>
<li>
<a href= "#">Products</a>
</li>
<li>
<a href= "#">Blog</a>
</li>
<li>
<a href= "#">Contact</a>
</li>
</ul>
</nav>
<div class= "jumbo">
<img src= "C:\lambda-sprint\Sprint-Challenge--User-Interface\assets\jumbo.jpg" alt= "">
</div>
</header>

<section class="top-content">
<div class="text-container">
Expand All @@ -30,16 +58,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="box-one">Box 1</div>
<div class="box-two">Box 2</div>
<div class="box-three">Box 3</div>
<div class="box-four">Box 4</div>
<div class="box-five">Box 5</div>
<div class="box-six">Box 6</div>
<div class="box-seven">Box 7</div>
<div class="box-eight">Box 8</div>
<div class="box-nine">Box 9</div>
<div class="box-ten">Box 10</div>
</div>

</section>
Expand All @@ -63,11 +91,11 @@ <h2>Moon</h2>

<footer>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Products</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="products.html">Products</a>
<a href="blogs.html">Blog</a>
<a href="contat.html">Contact</a>
</nav>
</footer>
</div><!-- container -->
Expand Down
162 changes: 158 additions & 4 deletions style/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
line-height: 6;
}
ol, ul {
list-style: none;
Expand Down Expand Up @@ -69,6 +69,10 @@ p {
.container {
width: 800px;
margin: 0 auto;
flex-direction: column;
justify-content: space-evenly;
align-items: baseline;
align-content: stretch;
}

.top-content {
Expand All @@ -87,7 +91,7 @@ p {

.middle-content {
margin-bottom: 20px;
border-bottom: 1px dashed black;
border-bottom: 1px dashed rgb(50, 10, 95);
}

.middle-content h2 {
Expand Down Expand Up @@ -128,7 +132,7 @@ p {

footer {
width: 100%;
background: black;
background: rgb(34, 34, 34);
}

footer nav {
Expand All @@ -141,6 +145,156 @@ footer nav {
}

footer nav a {
color: white;
color: rgb(0, 0, 0);
text-decoration: none;
}
.navLnk {
justify-content: space-evenly;
display: inline-block;
flex-direction: row;
}
.navLnk li {
justify-content: space-evenly;
display: inline-block;
flex-direction: row;
padding: 30px;
}
.jumbo {
width: 100px;
height: 150px;
object-fit: none;
object-position: 5px 10%;
}
.top-content {
justify-content: space-evenly;
display: inline-flex;
}
.text-container {
width: 200px;
height: 300px;
object-fit: none;
object-position: 5px 10%;
}
.box-one {
width: 12.5%;
height: 100px;
margin: 20px 2.5%;
color: white;
background-color: rgba(12, 151, 121, 0.89);
display: flex;
align-items: center;
justify-content: center;
}
.box-two {
width: 12.5%;
height: 100px;
background: rgb(255, 241, 45);
margin: 20px 2.5%;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.box-three {
width: 12.5%;
height: 100px;
background: teal;
margin: 20px 2.5%;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.box-four {
width: 12.5%;
height: 100px;
background: gold;
margin: 20px 2.5%;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.box-five {
width: 12.5%;
height: 100px;
background: crimson;
margin: 20px 2.5%;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.box-six {
width: 12.5%;
height: 100px;
background: forestgreen;
margin: 20px 2.5%;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.box-seven {
width: 12.5%;
height: 100px;
background: darkorchid;
margin: 20px 2.5%;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.box-eight {
width: 12.5%;
height: 100px;
background: hotpink;
margin: 20px 2.5%;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.box-nine {
width: 12.5%;
height: 100px;
background: indigo;
margin: 20px 2.5%;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.box-ten {
width: 12.5%;
height: 100px;
background: dodgerblue;
margin: 20px 2.5%;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
footer {
width: 100%;
background: black;
}
footer nav {
width: 50%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 2%;
font-size: 14px;
background: black;
}
footer nav a {
color: white;
justify-content: space-evenly;
background: black;
}
@media(max-width: 600px) {
body {
display: block;
}
}