Sea Turtles - Nina G. #102
Conversation
|
|
||
| <body> | ||
| <main> | ||
| <div id="intro"> |
There was a problem hiding this comment.
Instead of a div you can use a section tag here. You will see divs being used but sometimes there is a better alternative to use that is more semantic html. Here is a resource for that https://www.freecodecamp.org/news/semantic-html-alternatives-to-using-divs/
| <nav> | ||
| <form action="./pages/about.html"> | ||
| <button type="submit">learn more about me</button> | ||
| </form><br> |
There was a problem hiding this comment.
instead of using the br tag you could add styling to your forms/buttons using the display property and give it a block value. Here is an example https://codepen.io/tgoslee1/pen/zYRWVGq
| <p id="quote"><q>I want to look back on my career and be proud of the | ||
| work, and be proud that I tried everything.</q> — Jon Stewart</p> |
There was a problem hiding this comment.
for quotes you can use the block quote tags or a few other tags. Here is a link to a few different ones you can try https://www.w3schools.com/html/html_quotation_elements.asp
| </ul> | ||
| </nav> | ||
| </header> | ||
| <div id="about"> |
| <a href="https://github.com/anacapamu/odin-landing_page">GitHub</a> / | ||
| <a href="https://anacapamu.github.io/odin-landing_page/">Demo</a> |
There was a problem hiding this comment.
for links you can use the target attribute to open the links in a new tab
| <a href="https://github.com/anacapamu/odin-landing_page">GitHub</a> / | |
| <a href="https://anacapamu.github.io/odin-landing_page/">Demo</a> | |
| <a href="https://github.com/anacapamu/odin-landing_page" target="_blank">GitHub</a> / | |
| <a href="https://anacapamu.github.io/odin-landing_page/" target="_blank" >Demo</a> |
| </div> | ||
| </main> | ||
|
|
||
| <footer> |
There was a problem hiding this comment.
I would add a way to get back to the other pages from this page
| @@ -0,0 +1,51 @@ | |||
| body { | |||
| @@ -0,0 +1,58 @@ | |||
| body { | |||
| color: #e0c389; | ||
| } | ||
|
|
||
| main { |
There was a problem hiding this comment.
on your portfolio page your footer is overlapping your content. One way to fix this is by adding a height to your main tag. I tested it with height: 500px; and it worked. You can play around with the height value to get your desired look.
| @@ -0,0 +1,28 @@ | |||
| body { | |||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> |
There was a problem hiding this comment.
make sure to move your index.html file into your pages directory
Personal Portfolio Site
Congratulations! You're submitting your assignment!
Comprehension Questions