Kathalin's Project #46
Conversation
There was a problem hiding this comment.
🌈Your site is starting to look very nice! 😀. Remember to mind the indentation so that your code looks always neat, clear and organized. I see in your comment that you still have to work on the remaining links, but navigation your site, the one to instagram works ok.
Don't forget to erase any files: images, comments etc. that you don't need in your code once you are done.
On a next step it would be a good idea to add some media queries so that your site is responsive and looks beautiful on every screen size. You can read a little bit more about this on this link. Don't forget to start designing always from mobile display, as it's nowadays everybody's first choice.Good job so far! ✨✨
| @@ -1,21 +1,44 @@ | |||
| <!DOCTYPE html> | |||
| <html> | |||
| <html lang="en"> | |||
| <head> | |||
There was a problem hiding this comment.
Hi! Nice to meet you! I'm Estefanía and I'll be taking a look at your code today. 👋😀
| <ul> | ||
| <li><a href="#">/art work</a></li> | ||
| <li><a href="#">/tattoo art</a></li> | ||
| <li><a href="#">/about</a></li> | ||
| <li><a href="https://instagram.com/jessy.vagabunda?utm_medium=copy_link">/insta</a></li> | ||
| </ul> |
There was a problem hiding this comment.
Be careful with indentation here. 🔍 The rule to follow is that if there's a new block, then you indent one more level. At Technigo, we use 2 spaces for indentation. The list's closing tag should be in line with its opening tag. 🙂
| <div class="grey-box"> | ||
| <h2>somewhere between paper an skin</h2> | ||
| <style> | ||
| img { | ||
| max: fullscreen; | ||
| height: auto; | ||
| } | ||
| </style> | ||
| </div> |
There was a problem hiding this comment.
Mmhh, looks like the styling for this image is broken or something is missing because the editor doesn't acknowledge the property "fullscreen". Also: maybe it would be a good idea to place all of your styling in the css file? 🙂
|
|
||
| body { | ||
| background-color: lightblue; | ||
| .receipt { font-family: Courier, "Lucida Console", monospace } |
There was a problem hiding this comment.
Your code will look neater if you write it like this:
.receipt {
font-family: Courier, "Lucida Console", monospace;
}
And don't forget the semicolons at the end of css statements. ✔️
| list-style-type: none; | ||
| display: grid; | ||
| grid-template-columns: repeat(4, 1fr); | ||
| grid-auto-rows: auto; |
| nav ul li a:hover, nav ul li a:focus { | ||
| color: black; | ||
| background-color: white; | ||
| font-weight: bold; | ||
| } |
There was a problem hiding this comment.
Cool hover effect on that nav menu.
i am trying to create a website for a friend who wants to start her own business in tattooing. For this I have created a menu bar, a small image gallery (unfortunately did not have more pictures) and have made the menu clickable, but is linked for now only on instagram