1- Title:

• the user wants to see a title.
• the user wants to see the title between 2 trees.

Issues:

- HTML:

• this will be developed on branch 1-Title.
• use header to add a Title .
• use h1 to add a head.
• use image to add 2 trees picture.

navigation HTML

For user story 3:

• the user wants a navigation bar to navigate to (site introduction , site content, extra information).
• there is a navbar under the title with links to the different sections.
• this will be developed on branch 2-navigation bar.
• use nav tag to wrap navigation menu div and links .
• use div tag to contain the links.
• use a tag to add 3 links: intro, content and extras.

navigation CSS

For user story 3:

• the user wants a navigation bar to navigate to (site introduction , site content, extra information).
• there is a navbar under the title with links to the different sections.
• this will be developed on branch 2-navigation.
• use border-style for nav tag to create only bottom border.
• use padding-top 2% for div tag.
• use padding-bottom 2% for div tag.
• use display as flex for div tag.
• use flex-direction as row for div tag.
• use align-content as center for div tag.
• use justify-content as space-around for div tag.

For User Story-5:

• the user wants a footer that contains 3 links to contact: first link will open twitter, second link will open github and the third link will open linkedin
• HTML Tasks:
• One HTML file will be in branch Footer-HTML.
• Use footer tag to wrap the links.
• Use a tag to make 3 links: twitter, github, linkedin.
• CSS Tasks:
• One CSS file will be in branch Footer-CSS.
• use border-style as solid none none none for footer tag to create only top border.
• use padding-top 2% for footer tag.
• use padding-bottom 2% for footer tag.
• use display as flex for footer tag.
• use flex-direction as row for footer tag.
• use align-content as center for footer tag.
• use justify-content as space-around for footer tag.

paragraph HTML

(For user story 4)

• the user wants a paragraph on How trees work, the paragraph contains 4 links: first link will open a diagram, second link will open pdf file and the third link will open a video on youyube.
• the paragraph contains an aside text.
• this will be developed on branch 3-paragraph.
• use p to add a paragraph.
• use ul to make a list that contains the links.
• use a to add the links.
• use aside to write an aside text.

paragraph CSS

(For user story 4)

• the user wants a paragraph on How trees work, the paragraph contains 4 links: first link will open a diagram, second link will open pdf file and the third link will open a video on youyube.

• the paragraph contains an aside text.

• this will be developed on branch 3-paragraph.
  -[ ] use fantasy font.

• use monospace font for aside text.

• use italic style for aside text.

• use right floating for the aside text.

• width for the aside te: 40%

1- Title:

• the user wants to see a title.
• the user wants to see the title between 2 trees.

Issues:

- CSS:

• One css file will be in branch 1-Title.
• Use color as black.
• tett align is center.
• padding from top and bottom is 2%
• width and height for the picture is: 5%
• picture animation bounce
• [ ]