Queues - Anna Barklund- Static-Site#36
Conversation
…ml, main.css and normalize.css. Copied and pasted code into normalize.css. Set up index.html with links to the two css files.
| <header> | ||
| <a href="index.html"> | ||
| <div> | ||
| <h3>amb</h3> |
There was a problem hiding this comment.
element should be on the outside of the tag. It shouldn't need a div around it.
Static SiteWhat We're Looking For
|
Erin007
left a comment
Erin007
left a comment
There was a problem hiding this comment.
Nice job, Anna! Just a few little things to consider. Please let me know if you have any questions! Looks great.
| width: 100%; | ||
| top: 0px; | ||
| /* Marlin */ | ||
| background-color: rgba(82,90,136, 1); |
There was a problem hiding this comment.
If you're not changing opacity (which I see you've done elsewhere) you might opt for hex colors. It's usually not an issue, but some older versions of common browsers and more obscure browsers don't always support rgba.
| text-align: center; | ||
| vertical-align: middle; | ||
| height: 300px; | ||
| line-height: 256px; |
There was a problem hiding this comment.
Tuck away for future... Hard-coded pixel sizes can get tricky if you're trying to make a site responsive. But, for now, on desktop, it's lovely.
| padding: 3%; | ||
| width: 100px; | ||
| height: 100px; | ||
|
|
There was a problem hiding this comment.
Is there a reason you have blank lines in the css for .portfolio_image?
|
|
||
| <nav> | ||
| <ul> | ||
| <li><a href="portfolio.html"> porotfolio </a></li> |
| <p id = "portfolio_text_1"> | ||
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. | ||
| </p> | ||
| <P> |
| @@ -0,0 +1,50 @@ | |||
| <!DOCTYPE html> | |||
| <html> | |||
| <head> | |||
There was a problem hiding this comment.
head and body are within html, check indentation <--- watch out for this on other css files too
| <li><a href="blog.html"> blog </a> </li> | ||
| <li><a href="about.html"> about </a></li> | ||
| <li><a href="#contact"> contact </a> </li> | ||
| </ul> |
There was a problem hiding this comment.
it's a personal preference kind of thing, but maybe consider removing the link to the page the user is currently on from the header? I've seen it both ways just something to think about since you're not reusing the same header.
Also, stash away for the future the idea of partials - with rails etc you'll be able to reuse the same code for html consistent to multiple pages. Instead of repeating it like you do here.
| <h1>amb</h1> | ||
| </section> | ||
|
|
||
| <section class = "index_section1 section1"> |
There was a problem hiding this comment.
index_section1 section1 seems redundant? If you need them both, think about naming specificity.
| </a> | ||
|
|
||
| <a href="about.html"> | ||
| <article class = "index_article"> |
There was a problem hiding this comment.
Instead of using this class multiple times, you could give your main the class of "index" then do something like .index article in your css to target all of the articles on the index page. Same idea for your blog_article class and your portfolio_article class...
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. | ||
| </p> | ||
| </div> | ||
|
|
|
|
||
| .index_article { | ||
| /*position: relative;*/ | ||
| display: inline-block; |
There was a problem hiding this comment.
Looks like display: inline-block is a good candidate for DRYing up your code per Jamie's feedback. How could you apply it to multiple classes rather than repeating?
3 participants
Static Site
Congratulations! You're submitting your assignment!
Comprehension Questions