Skip to content

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

Anna townsend #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
41c3a5a
I added the image to the top with a header and div and filled in the …
Feb 22, 2019
1cd8eff
I started html in about
Feb 22, 2019
e2a83c6
finished
Feb 23, 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
9 changes: 5 additions & 4 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,16 +32,17 @@ 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?
1. If you were to describe semantic HTML to the next cohort of students, what would you say? Semantic text means any code that is meaningful and necessary.

2. Name two big differences between ```display: block;``` and ```display: inline;```.

Display block allows a width and height and displau inline doesnt respect the top and bottom margins
3. What are the 4 areas of the box model?

Content, Padding, Border, Margin
4. While using flexbox, what axis does the following property work on: ```align-items: center```?
it pushes everything to the center

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

git is super important because it allows different devleopers to work on the same code together and is a place where you can show your work and others are able to fork off of other things and work from them and many people use git in their jobs as coders.
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.

## Project Set Up
Expand Down
102 changes: 63 additions & 39 deletions about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,62 +12,86 @@
</head>

<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
<header>
<div class=topOfAbout>
<section class='topOfAboutPage'>
<img class='logo-img' src="img\lambda-black.png" alt="Lambda Icon;">
<nav class=topNavAbout>
<a href="">Home</a>
<a href="about.html">About</a>
<a href="">Products</a>
<a href="">Blog</a>
<a href="">Contact</a>
</nav>
</section>
</div>
<img class='firstImageAbout' src="img\jumbo-about.png" alt="firstImageAbout">
</header>

<div class="container about-page">
<section class= 'sections'>
<div class='topAboutPageContent'>
<h1>About</h1>
<p class='aboutP'>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>
<div class="mid-section">
<section class='strategySection'>
<img src="img/about-plan.png" alt="strategy">
<h2>Strategy</h2>
<p class="strategyP"> Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.</p>

<button>Learn More</button>
</section>

<section class='howWeWorkSection'>
<img src="img/about-working.png" alt="strategy">

<h2>How We Work</h2>

Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.
<p class='howWeWorkP'>Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.</p>

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.
<button>Learn More</button>
</section>
</div>
<div class="lower-sec">
<section class='PlacesWeWorkSection'>
<img src="img/about-office.png" alt="strategy">
<h2>Places We Work</h2>
<p class='placesWeWorkP'>Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.</p>

Learn More
<button>Learn More</button>
</section>



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

Places We Work
<section class="collaborationSection">
<img src="img/about-meeting.png" alt="strategy">

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

<p class="CollaborationP">Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.</p>

Learn More
<button>Learn More</button>
</section>
</div>

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

Collaboration
<section class="letsWorkTogetherSection">
<h2>Lets Work Together</h2>
<p class='letsWorkTogetherP'>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>

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.

</section>
<footer>
<nav>
<nav class='navBarAboutBottom'>
<a href="index.html">Home</a>
<a href="#">About</a>
<a href="#">Products</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
</nav>
</footer>
</div><!-- container -->
</div><!-- container -->

</body>
</html>
Empty file added css/about.css
View file
Open in desktop
Empty file.
81 changes: 80 additions & 1 deletion css/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,36 @@ h1, h2, h3, h4, h5 {
p {
line-height: 1.4;
}
header{
max-width: 800px;
margin: 0 auto;
}


.topOfHomePage{
display: flex;
Copy link
Copy Markdown
Collaborator

@jheinz1999 jheinz1999 Feb 22, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good job using flex!

flex-direction: row;
justify-content: space-between;
padding: 4%;
align-items: baseline;
}

.logo-img {
width: 30%;
}
.topNavBar{
display: flex;
/* flex-direction: row;*/
justify-content: space-around;
width: 40%;

}

.firstImageHome{
display: block;
margin: 45%;
padding: 35%;
}
.container {
width: 800px;
margin: 0 auto;
Expand All @@ -77,6 +106,7 @@ p {
justify-content: space-evenly;
margin-bottom: 20px;
border-bottom: 1px dashed black;
padding: 3%;
}

.top-content .text-container {
Expand Down Expand Up @@ -143,4 +173,53 @@ footer nav {
footer nav a {
color: white;
text-decoration: none;
}
}
.topOfAboutPage{
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 4%;
align-items: baseline;
}

.topAboutPageContent{
padding-top: 35px;
}

.topNavAbout{
display: flex;
justify-content: space-between;
width: 60%;
}
.mid-section {
display: flex;
width: 100%;
justify-content: space-between;
padding-top: 30px;
}

.strategySection{
width: 45%;
/* padding: 25px; */
}

.howWeWorkSection{
width: 45%;
/* padding: 25px; */
}

.lower-sec{
display: flex;
width: 100%;
justify-content: space-around;
padding-top: 35px;
}

.placesWeWorkSection{
width:45%;
padding: 25px;
}
.collaborationSection{
width: 45%;
padding: 25px;
}
39 changes: 28 additions & 11 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,23 @@
</head>

<body>

<header>
<div class=topOfHome>
<section class='topOfHomePage'>
<img class="logo-img" src="img\lambda-black.png" alt="Lambda Icon;">
<nav class=topNavBar>
<a href="">Home</a>
<a href="about.html">About</a>
<a href=""><Products</a>
<a href="">Blog</a>
<a href="">Contact</a>
</nav>
</section>
<img src="img\jumbo.jpg" alt="firstImageHome">
</div>

</header>
<div class="container">

<section class="top-content">
Expand All @@ -30,16 +47,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" style='background-color: teal;'>Box 1</div>
Copy link
Copy Markdown
Collaborator

@jheinz1999 jheinz1999 Feb 22, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For these boxes, we are actually looking for the use of selectors in your index.css file as opposed to the style property in HTML

<div class="box" style='background-color: gold;'>Box 2</div>
<div class="box" style='background-color: cadetblue;'>Box 3</div>
<div class="box" style='background-color: coral;'>Box 4</div>
<div class="box" style='background-color: crimson;'>Box 5</div>
<div class="box" style='background-color:forestgreen; '>Box 6</div>
<div class="box" style='background-color:darkorchid;'>Box 7</div>
<div class="box" style='background-color: hotpink;'>Box 8</div>
<div class="box" style='background-color: indigo;'>Box 9</div>
<div class="box" style='background-color: dodgerblue;'>Box 10</div>
</div>

</section>
Expand All @@ -64,7 +81,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