Awesome job! everything looks good, just a couple suggestions on visual formatting!

good point! will have to go back and add this to mine :)

these headings should be below/after the placeholder images according to example image.

noticed that your list is in reverse order when viewed in browser. I also had this problem when floating right. Place your list items contact, portfolio, services, home to have them show as in the example image.

I'm assuming this is old code/old versions of your CSS. I would take this out as GitHub preserves your old versions as long as you're doing frequent commits.

you could just call button like you did body or header, since all buttons are getting the same styles.

love your colour choices! super fun and creative, but still easy to read and breaks up content really well!

refering to above comment: so here you would still have your vertical margins stated, but you would also declare horizontal margins as auto.

went back into claire's videos, from Box Model video she talks about centring content. the section on spacing is around 18 minutes in. Essentially you set the width of content in pixels and set horizontal margins to auto.

might wrap this in a header tag to indicate its your title section

missing its closing tag

I like that you've exemplified that in your site by using very colour in a very logical way

might take the img out of the paragraph, not sure if it's correct/good structure to have it inside

missing a closing p ag here

great opportunity for a list here!

might make this a heading? it feels more like a subtitle than a paragraph

Looks great!

tuesday? no day listed on this item

you don't need the span tags here, the inline style can be applied directly to the h2 element (same with the p element) another option to get the same effect would be to give them both a class="color-white" and apply the style in CSS ex. .color-white{ color: white; }

I would recommend using a p or heading tag (maybe even article?) here, I don't think div is the best option for this

not sure what's going on with the padding (or if the padding is the issue) but, your image is running almost right into your border on the right-hand side.

you've got a selector just hanging out all alone here. Is there a reason or just forgotten about?

for any classes nested within classes, you don't need to call/declare the parent class. If you want the styles applied to .bottom-group you don't need .card-three

we picked the same lion image lol!

overall awesome job! these look great!

consider doing a return setting each span on a new indented line to make readability easier and make it clearer the spans are nested inside the p

I had to google this to get my dots working. worked out that each empty span needed to be declared as the the class. (not the group they're inside of) then in CSS apply the styles to the dot class. This will give each dot the same style

This took me forever to get! ended up reducing the top/bottom margins where needed to 0px to get them as close as possible.

Looks great! Maybe add a bit more padding to the text, as it feels a bit tight to the side of the card?

there's no need to call cardthree first, you can just call comment. If you want to apply to both classes use a comma in between.

I did this by making the bottom margins for the question 0px and the top margin for the answer 0px.

I think it worked pretty well

is there a reason you have two background colour declarations?

that's what I got to work too! don't know how else to achieve it

lol me too! I wasn't a fan of the greyscale look

don't forget to round corners on the card with border-radius. :)

for the border declarations it can be shortened by using shorthand: border-top: 3px solid hsl(...); this gives all the info in one line of code

overall site looks great! just a few touchups and everything should be running perfectly! Feel free to shoot me a message on slack if any of my comments don't make sense!

something is overriding this on your contact page for hours of operation list. Not sure where/why but the list dots are still showing.

best way to tell CSS where background-image is located is by using url (ex. background-image: url("images/topknot.jpg"); ) also remember to place image sources/urls in quotes

This isn't working due to an issue in your index file. Your class "topknotimage" is on an empty div element. If you want it to apply to the image/logo you need to EITHER: wrap the image/logo in the div (ex. div class="topknotimage", img src="...", /div) OR apply the class directly to the image (ex. img class="topknotimage" img src="..." )

would put this at the top before any other styles, as this applies to the whole website

same as above comment. make sure you use selectors otherwise this formatting goes nowhere.

this isn't applied to anything since you don't have a selector. Example is you wanted this on all body text you could say: body{...}

love the use of and id here, might suggest using a name that tells what is in the element it represents. It makes reading the CSS easier.

I like that you've applies these to break up the long lines of text. Maybe update with our new box-model knowledge to create the same effect? Not necessary but maybe a fun exercise.

for this I might have just made the phone number the hyperlink, the "click here" throws off the flow when reading it, but the code itself is great!

All looks good! Only suggestion would be to indent your list items within the unordered list, just for readability. One of the formatting extensions SHOULD be able to do that for you.

I would say the div isn't needed here, you can apply the id="selector" to the h2 directly.

might be because you've closed your h2 before your div. remember opens and closes should mirror eachother. ex) h2, div, content, /div, /h2

not sure why you've got these div and p tags here with no content inside?

not sure you need the span tag here, I think the h3 would have been enough to separate it from the rest.

make sure to close your p tag before your div or you will have issues.

I love that you were able to get a background image onto the header section! Looks so great!

Ah, I see you've set the width here. I left a comment on the declaration for this image asking for a width dec, please disregard said comment lol.

Do you have any footer list items? I couldn't see any, if none are used I would remove this extra code.

same with this comment, place next to (or otherwise near) the code it refers to.

I would place this comment next to the code you're referencing. Right now it's hard to tell what this goes to.

Looks great! comments are super helpful to understand your thoughts/decisions!

I like this stylistic choice!

Add a width declaration to the here like the hairpins team photo?

I love that you included a photo of your cat! He's very cute :)

would recomend dropping this end tag to the line below, just to make it easier to see the end tag as

is a block level element.

here I think you should include structural element to indicate this is the header/title of the page. (like how you used <section> later on)

great that you've included a description of the image, but would be helpful to have a more detailed description. For example is it a lake, a mountain range? what kind of nature image is this?