Skip to content

Lane herring #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
llpookyll wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Lane herring #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4996c74
all semantic html and most of the rest of the html
llpookyll Dec 14, 2019
ae0e0e7
finished
llpookyll Dec 14, 2019
b5706a0
answered questons and colored in boxes
llpookyll Dec 14, 2019
d16fc63
k now im done
llpookyll Dec 14, 2019
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
5 changes: 5 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,14 +33,19 @@ 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 tags that are specific like section, header, body, footer, while un semantic would be like divs

2. Name two big differences between ```display: block;``` and ```display: inline;```.
display block lets you set a width and height on the element and the margins and paddings are respected

3. What are the 4 areas of the box model?
Margin Border Padding Content

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

5. Explain why git is valuable to a team of developers.
allows many devs from different areas to collaberate on a single product

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
114 changes: 68 additions & 46 deletions about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,56 +13,78 @@

<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.

<nav>
<img src="img/lambda-black.png">
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="#">Products</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
</nav>

<section class="top-about-content">
<img src="img/jumbo-about.png" class="banna">

<div class="top-about-text">
<h2>About</h2>

<p>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.</p>
</div>
</section><!--closes top about content section-->

<section class="about-middle-content">
<div class="about-boxes">
<img src="img/about-plan.png" alt="strategy">

<h2>Strategy</h2>

<p>Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.</p><br>

<button>Learn More</button><br>
</div>

<div class="about-boxes">
<img src="img/about-working.png" alt="strategy">

<h2>How We Work</h2>

<p>Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.</p><br>

<button>Learn More</button><br>
</div>

<div class="about-boxes">
<img src="img/about-office.png" alt="strategy">

<h2>Places We Work</h2>

<p>Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.</p><br>

<button>Learn More</button><br>
</div>

<div class="about-boxes">
<img src="img/about-meeting.png" alt="strategy">

<h2>Collaboration</h2>

<p>Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.</p><br>

<button>Learn More</button><br>
</div>
</section><!--closes about middle content section-->

<section class="about-bottom-content">
<h2>Let's Work Together</h2>

<p>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.</p>
</section><!--closes about bottom content section-->

<footer>
<nav>
<a href="index.html">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
101 changes: 101 additions & 0 deletions css/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,16 @@ p {
margin: 0 auto;
}

nav {
margin-top: 4%;
}

nav a {
margin: auto 4.5%;
text-decoration: none;
color: black;
}

.top-content {
display: flex;
flex-wrap: wrap;
Expand All @@ -79,6 +89,26 @@ p {
border-bottom: 1px dashed black;
}

.top-about-content {
margin-bottom: 4%;
}

.top-about-content img {
margin: 4% auto;
}

.top-about-text {
margin-left: 2%;
}

.banna {
width: 100%;
}

.top-content img {
margin: 4% auto;
}

.top-content .text-container {
width: 48%;
padding: 0 1%;
Expand All @@ -90,6 +120,15 @@ p {
border-bottom: 1px dashed black;
}

.about-middle-content {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin: 4% 0;
/* padding: 4% 0; */
border-top: 1px dashed black;
}

.middle-content h2 {
padding: 0 2%;
margin-bottom: 0;
Expand All @@ -101,6 +140,46 @@ p {
justify-content: space-evenly;
}

#b1 {
background: teal;
}

#b2 {
background: gold;
}

#b3 {
background: cadetblue;
}

#b4 {
background: coral;
}

#b5 {
background: crimson;
}

#b6 {
background: forestgreen;
}

#b7 {
background: darkorchid;
}

#b8 {
background: hotpink;
}

#b9 {
background: indigo;
}

#b10 {
background: dodgerblue;
}

.middle-content .boxes .box {
width: 12.5%;
height: 100px;
Expand All @@ -112,12 +191,34 @@ p {
justify-content: center;
}

.about-boxes {
width: 46%;
display: flex;
flex-direction: column;
border-bottom: 1px dashed black;
padding-top: 4%;
margin-bottom: 4%;
}

.about-boxes button {
width: 33%;
font-size: 18px;
background: white;
border-radius: 8px;
padding: 1.5% 3.5%;
border: 2px solid black;
}

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

.about-bottom-content {
margin: auto 2%;
}

.bottom-content .text-container {
padding-right: 4%;
}
Expand Down
34 changes: 22 additions & 12 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,18 @@

<body>
<div class="container">

<nav>
<img src="img/lambda-black.png">
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="#">Products</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
</nav>

<section class="top-content">
<img src="img/jumbo.jpg" class="banna">
<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 +40,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" id ="b1">Box 1</div>
<div class="box" id ="b2">Box 2</div>
<div class="box" id ="b3">Box 3</div>
<div class="box" id ="b4">Box 4</div>
<div class="box" id ="b5">Box 5</div>
<div class="box" id ="b6">Box 6</div>
<div class="box" id ="b7">Box 7</div>
<div class="box" id ="b8">Box 8</div>
<div class="box" id ="b9">Box 9</div>
<div class="box" id ="b10">Box 10</div>
</div>

</section>
Expand All @@ -63,8 +73,8 @@ <h2>Moon</h2>

<footer>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="#">Products</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
Expand Down