Joseph garcia stretch #2
Conversation
| @@ -38,7 +39,7 @@ <h1>Innovation<br> On<br> Demand</h1> | |||
| </section> | |||
|
|
|||
| <!-- Section Line --> | |||
| <div class = "line"> </div> | |||
| <div class = "line"> </div> | |||
There was a problem hiding this comment.
i would avoid using a div to create this effect. you could easily eliminate this "line" div and set a top-border on your "main-content" section. less code is always better.
| @@ -112,7 +112,7 @@ section.services h1 { | |||
| /* Call To Action Selectors (index.html) */ | |||
|
|
|||
| section.cta { | |||
| background-image: url(C:/Users/kingmoc/Documents/git/User-Interface/great-idea-website/img/header-img.png); | |||
| background-image: url("../img/header-img.png"); | |||
There was a problem hiding this comment.
this path should probably be "./img/header-img.png" since it is going to be reading from where the index.html file is located
| @@ -145,11 +145,12 @@ section.cta div h1 { | |||
| /* Main Content Selectors (index.html) */ | |||
|
|
|||
| section.main-content { | |||
| background-image: url("C:/Users/kingmoc/Documents/git/User-Interface/great-idea-website/img/mid-page-accent.jpg"); | |||
| background-image: url("../img/mid-page-accent.jpg"); | |||
There was a problem hiding this comment.
again, this is a small error in this path that is preventing your images from being displayed
There was a problem hiding this comment.
This is interesting in that when I tried running this from the live server - it wouldn't work using only 1 dot. Very interesting.
| @@ -38,7 +39,7 @@ <h1>Innovation<br> On<br> Demand</h1> | |||
| </section> | |||
There was a problem hiding this comment.
probably no need to have a "cta" and "cta-text". one container should be enough for this element.
| border: 1px solid black; | ||
| margin-left: 53px; | ||
| margin-top: 19px; |
There was a problem hiding this comment.
this margin-left and margin-top looks like a hacky way to center the button. this is where flexbox can save the day.
There was a problem hiding this comment.
You're exactly right! I'm getting better with flex in realizing the container - child relationship. Moving forward I shall use flex exclusively.
|
|
||
| div.bottom-content { | ||
| margin-top: 235px; |
There was a problem hiding this comment.
this margin-top would also work under LINE 161 without needing this extra selector
There was a problem hiding this comment.
Man - looking back at that I have no idea why I did that - smh!
| } | ||
| } | ||
|
|
There was a problem hiding this comment.
great job adding in these media queries. we will talk about this stuff at length next week in the responsive design modules.
There was a problem hiding this comment.
I think I added to many of them or something because I talked to another fellow in the program and he told me he only used one @media query ...
Here's some work on the @media queries stretch goals! Any feedback greatly appreciated good sir!