04-Timeline-Brandi Soucy

[pixiestix826]

• [x] Create a new Issue with these tasks!
• [x] Use the git cli to initialize a new project
• [x] Checkpoint: Created and committed index.html and app.css boilerplate
• [x] Use the hub cli to create a repository called 04-timeline
• [x] Use the git cli to create a branch called develop
• [x] In Github, open a PR from develop into master
• [x] Use CDN to link to Font Awesome
• [x] Create the markup to represent the pictured site
  • [x] Checkpoint: Create markup to represent one item in the timeline
  • [x] Markup: Date
  • [x] Markup: Time
  • [x] Markup: Icon
  • [x] Markup: Title
  • [x] Markup: Description
  • [x] Checkpoint: Duplicate the first item to create multiple items to style
  • [x] Complete: Push index.html
• [x] Add styles for page
  • [x] Checkpoint: Move Date & Time to left of Timeline
  • [x] Checkpoint: Move Icon to Show On Top of Timeline
  • [x] Checkpoint: Style Description and Title
  • [x] Checkpoint: Style Arrow pointing at icon

[pixiestix826]

https://github.com/pixiestix826/04-Timeline/pull/1

[pixiestix826]

still have a few styling issues. will work on triangles and getting my desktop icon to move to center. colors are a little off and background sizes still need a little help.

[pixiestix826]

Although I used nth-of-type on .section .time selectors and .triangle, the colors did not change. I'm not entirely sure why, but I'm wondering if it's because of the way I have my html set up? I'm seeing that my css code is cumbersome.

[rtablada]

@pixiestix826 the .timeline doesn't need to be position: absolute, position: relative would be enough to get the child elements to stay in line.

recipe1/recipe2 should share a class. Either use :nth-of-type(2n) to select even versions or add a BEM-like modifier. Also I think that setting the recipe to position relative may help get the icons more in line.

[pixiestix826]

@rtablada I'm not seeing what you're talking about with recipe1/recipe2. I don't have those defined in my code. I'll make sure all changes and been committed and pushed. I have a class of article, which encapsulates all the articles. I've set .article:nth-of-type(2n) and received the expected results. When I use nth-of-type on .section .time, I don't see the same results(times are not different colors). Additionally, using .triangle::after:nth-of-type(2n) didn't change the color of the triangle.

[rtablada]

@pixiestix826 looks like there were somethings that weren't pushed, let me check now.

[pixiestix826]

I'm thinking it may really be the way I have things grouped. I'm going to rename some of the divs and adjust the css accordingly.

[rtablada]

@pixiestix826 the grouping all looks fine, just need to tweak what element you are listening for nth-of-type on.

As you nest selectors remember what you are looking for the nth-of-type and that the nth-of-type pseudo selector counts where the element exists in it's direct parent not instances on the page.

[rtablada]

@pixiestix826 check on the icon positioning. You may want to use a combination of calc and transform: translate to get it centered on the timeline at different screen sizes.

[pixiestix826]

@rtablada okay, thanks. I'll fix these.

[pixiestix826]

@rtablada omg! I think I finally understand position...specifically relative, absolute and transform translate!! the position on this project is damn near perfect, but I'm still having an issue with the nth-of-type to get the color of the .time and .triangle to change. I did have to tweak the html divs a bit in order to get the positioning to work, but I think I really get it. thanks for your recommendations and help. All changes have been pushed.

[pixiestix826]

@rtablada this is complete and ready for review.

[pixiestix826]

@rtablada ready for review