Skip to content

David temple #1

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
dstemple7 wants to merge 3 commits into
base: master
Choose a base branch
from
Open

David temple #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fe61b86
updated box colors, linked to about page, and answered questions in t…
May 8, 2020
e2a8bc3
added header logo, nav, and splash image
May 8, 2020
0390010
updated boxes
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
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?

1A: Semantic HTML marks up the content to provide meaning beyond just the content itself.

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

2A: Padding, border, margin, content

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

3A: By default, the flex-direction is row and in that case, align-items works on the vertical or cross axis to the horizontal or main axis.

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

4A: Git is valuable because it saves changes to a codebase over time so you can always reference or if needed revert back to code at a previous point in time. It also allows multiple people to collaborate on the same project simultaneously.

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

5A: Mobile-first design would design content based on the default of how it would be viewed on a mobile screen and then change the style or even the content itself in the event that it was being viewed on a bigger screen, e.g. a tablet or a desktop.

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
Binary file added _Wireframes/mobile.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added _Wireframes/sprint-challenge-ui-home-example.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added _Wireframes/tablet.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Empty file added about.html
View file
Open in desktop
Empty file.
Binary file added assets/mid.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/mini.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
51 changes: 36 additions & 15 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<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">
Expand All @@ -12,6 +12,27 @@
</head>

<body>

<img class="mobile-logo" src="assets/lambda-black.png" alt="Lambda logo">

<div class="container">
<header>
<img class="logo" src="assets/lambda-black.png" alt="Lambda logo">
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="products.html">Products</a>
<a href="blog.html">Blog</a>
<a href="contact.html">Contact</a>
</nav>
</header>

<div class="jumbo">
<img src="assets/jumbo.jpg" alt="Fast highway scene">
</div>

</div>

<div class="container">

<section class="top-content">
Expand All @@ -30,31 +51,31 @@ <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" id="boxa">Box 1</div>
<div class="box" id="boxb">Box 2</div>
<div class="box" id="boxc">Box 3</div>
<div class="box" id="boxd">Box 4</div>
<div class="box" id="boxe">Box 5</div>
<div class="box" id="boxf">Box 6</div>
<div class="box" id="boxg">Box 7</div>
<div class="box" id="boxh">Box 8</div>
<div class="box" id="boxi">Box 9</div>
<div class="box" id="boxj">Box 10</div>
</div>

</section>

<section class="bottom-content">

<div class="text-container">
<div class="text-container" id="bottombox1">
<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">
<div class="text-container" id="bottombox2">
<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">
<div class="text-container" id="bottombox3">
<h2>Moon</h2>
<p>Phasellus id dui id tortor tincidunt efficitur. Proin sed quam sed tellus vestibulum ultrices quis in nunc.</p>
</div>
Expand All @@ -64,7 +85,7 @@ <h2>Moon</h2>
<footer>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="about.html">About</a>
<a href="#">Products</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
Expand Down
180 changes: 165 additions & 15 deletions style/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-size: 62.5rem;
font: inherit;
vertical-align: baseline;
}
Expand Down Expand Up @@ -57,8 +57,8 @@ html, body {
}

h1, h2, h3, h4, h5 {
font-size: 18px;
margin-bottom: 15px;
font-size: 1.8rem;
margin-bottom: 1.5rem;
font-family: 'Rubik', sans-serif;
}

Expand All @@ -71,23 +71,50 @@ p {
margin: 0 auto;
}

header {
display:flex;
justify-content:space-between;
margin-top: 3.5rem;
}

nav {
display: flex;
width:65rem;
justify-content:space-around;
align-items:flex-end;
}

header nav a {
font-size: 1.2rem;
color: black;
text-decoration: none;
}

.splash {
display:flex;
margin-top: 3rem;
margin-bottom: 2rem;
width:100%;
height:auto;
}

.top-content {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
margin-bottom: 20px;
border-bottom: 1px dashed black;
margin-bottom: 2rem;
border-bottom: .1rem dashed black;
}

.top-content .text-container {
width: 48%;
padding: 0 1%;
padding-bottom: 20px;
padding-bottom: 2rem;
}

.middle-content {
margin-bottom: 20px;
border-bottom: 1px dashed black;
margin-bottom: 2rem;
border-bottom: .1rem dashed black;
}

.middle-content h2 {
Expand All @@ -102,19 +129,58 @@ p {
}

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

#boxa{
background:teal;
}

#boxb{
background:gold;
}

#boxc{
background:cadetblue;
}

#boxd{
background:coral;
}

#boxe{
background:crimson;
}

#boxf{
background:forestgreen;
}

#boxg{
background:darkorchid;
}

#boxh{
background:hotpink;
}

#boxi{
background:indigo;
}

#boxj{
background:dodgerblue;
}

.bottom-content {
display: flex;
margin: 0 2% 20px;
margin: 0 2% 2rem;
justify-content: space-around;
}

Expand All @@ -136,11 +202,95 @@ footer nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 2%;
font-size: 14px;
padding: 2rem 2%;
font-size: 1.2rem;
}

footer nav a {
color: white;
text-decoration: none;
}

.mobile-logo{
display:none;
}

#mid{
display:none;
}

#mini{
display:none;
}

@media(max-width:800px){
body{
background-color:pink;
}

.middle-content .boxes .box {
width:20rem;
height:20rem;
margin: 2rem 2.5%;
color: white;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}

#boxa, #boxb, #boxc, #boxd, #boxe, #bodf, #boxg, #boxh, #boxi, #boxj{
display:flex;
flex-wrap: wrap;
}

.top-content .text-container {
width: 100%;
padding: 0 1%;
padding-bottom: 2rem;
flex-wrap:wrap;
word-wrap: break-word;
}
.bottom-content .text-container #bottombox{
display:flex;
flex-direction:row;
width: 100%;
padding: 0 1%;
padding-bottom: 2rem;
flex-wrap:wrap;
}
nav{
display:flex;
flex-direction:column;
align-items:flex-start;
}
.logo{
display:none;
}
.mobile-logo{
display:flex;
}
.container{
width:auto;
}
}

@media(max-width:500px){
body{
background-color:yellow;
}
.boxes {
display:flex;
flex-direction:column;
flex-wrap:wrap;
align-content:center;
}
#bottombox1, #bottombox2, #bottombox3{
width: 100%;
padding: 0 1%;
padding-bottom: 2rem;
flex-wrap:wrap;
word-wrap: break-word;
}

}