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 2 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
105 changes: 70 additions & 35 deletions about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,53 +12,88 @@
</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.

<header>
<div class=topOfAbout>
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.

This div may not be necessary, as it is the only child of the header tag

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

looks like a typo, but you don't want to end your tag here!

<a href="">Blog</a>
<a href="">Contact</a>
</nav>
</section>
<img src="img\jumbo-about.png" alt="firstImageAbout">
</div>
</header>

<div class="container about-page">
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.

This container could even go up above the header so it contains all of your content

<section class='topAboutPage'>
<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.

this div may not be necessary

<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>
</section>
<div class='strategyImg'>
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.

Same goes for this div - because the image is the only child, there is no need to wrap it in a div

<img src="img/about-plan.png" alt="strategy">
</div>
<section class='StrategySection'>
<div class='StrategyContent'>
<h2>Strategy</h2>

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
<p class="strategyP"> Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.</p>

<button>Learn More</button>
</section>
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.

You are ending your section tag before the div tag, but the div tag is a child of the section tag

</div>

<div>
<img src="img/about-working.png" alt="strategy">
</div>
<div class='howWeWorkContent'>
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.

It may not be necessary to have a section tag inside of a div tag, as the section is the only child

<section class='howWeWorkSection'>
<h2>How We Work</h2>

Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.

Learn More

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

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

<div>
<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.
</div>
<div class='PlacesWeWorkContent'>
<section class='PlacesWeWorkSection'>
<h2>Places We Work</h2>

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

<button>Learn More</button>
</section>
</div>
<div>
<img src="img/about-meeting.png" alt="strategy">
</div>
<div class='CollaborationContent'>
<section class="collaborationSection">
<h2>Collaboration</h2>

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.

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

<button>Learn More</button>
</section>
</div>
<div class='LetsWorkTogetherContent'>
<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>
</div>
<footer>
<nav>
<a href="index.html">Home</a>
Expand Down
18 changes: 18 additions & 0 deletions css/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,24 @@ p {
line-height: 1.4;
}

.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: center;
}


.topNavBar{
display: flex;
flex-direction: row;
justify-content: space-evenly;
}

.firstImageHome{
display: block;
margin: 45%;
padding: 45%;
}
.container {
width: 800px;
margin: 0 auto;
Expand Down
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 src="img\lambda-black.png" alt="Lambda Icon;">
<nav class=topNavHome>
<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