In the bottom right corner of the CodePen example, there should be a button that says Fork. Click it. This will make a copy of the code that you can save to your CodePen account.
While anyone can edit or fork a CodePen, you can’t save and share your work without creating a CodePen account. It’s easy and free. The button to do this is in the upper right corner of the CodePen window.
Looks great!!! HTML looks fantastic - you are missing the final </table> but it otherwise looks perfect. Don't worry too much about the spacing and such. You have the right idea, which is what counts. Great work!
🌈🌈🌈🦄🦄🦄 Looks great! You've spelled the HTML class="pegusus" but the CSS class is .pegasus 😁 For the font, you'll need to make a link to it somehow. So glad you like the ponies!!! 🌈🌈🌈🦄🦄🦄
My attempt is definitely not as close as I'd like, but I didn't want to look at the solution too much. I was unable to get the rounded borders just right on the <tfoot>, and my spacing was a little off, probably an issue with my margins.
Also, I tried to use the names of colors for the backgrounds or I would have spent way too long looking at hex color codes, lol. I had no idea there were so many colors that you can use just by calling their name!
Oh, and I did not end up <col> or <colgroup> because I felt like this information was organized by row rather than column.
🌈🌈🌈🦄🦄🦄 Your HTML looks great -- <col>/<colgroup> wasn't required.
TIP -- get yourself Colorzilla: https://www.colorzilla.com/ -- free browser tool for Firefox and Chrome. Works like the eyedropper in Photoshop and similar programs, except it will pick the hex codes out of websites and images on the web 😁
Rounded corners on one side -- you're almost there!
border-radius: 10px; -- rounds corners on all 4 sides
border-radius: 0 0 10px 10px; -- rounds corners on the bottom 2 corners only
border-radius: 10px 10px 0 0; -- rounds corners on the top only
https://codepen.io/romola/pen/Rwpddrb?editors=1100
I did use the solution for a few things but there are some slight differences probably because I didn't set all margins.
Looks great!!! HTML looks fantastic - you are missing the final </table> but it otherwise looks perfect. Don't worry too much about the spacing and such. You have the right idea, which is what counts. Great work!
https://codepen.io/kajal-28/pen/eYveWQb
🌈🌈🌈🦄🦄🦄 Hooray for ponies! You used Comic Sans, which is just fine. Great work! 🌈🌈🌈🦄🦄🦄
https://codepen.io/kldickenson/pen/xxqxmmE
🌈🌈🌈🦄🦄🦄 Ponies look great -- no surprise there! Thanks for sharing!
https://codepen.io/kelsey-van-ert/pen/eYgxajp?editors=1100
1. YAAAAASS for the old school My Little Pony's content!!!!!!🦄
2. I am not sure whey the font isn't showing up or why the pegasus is not purple but I am kinda sleepy so I may figure it out in the morning. Cheers!
🌈🌈🌈🦄🦄🦄 Looks great! You've spelled the HTML class="pegusus" but the CSS class is .pegasus 😁 For the font, you'll need to make a link to it somehow. So glad you like the ponies!!! 🌈🌈🌈🦄🦄🦄
https://codepen.io/jarchaff/pen/OJWdaKM?editors=1100
My attempt is definitely not as close as I'd like, but I didn't want to look at the solution too much. I was unable to get the rounded borders just right on the <tfoot>, and my spacing was a little off, probably an issue with my margins.
Also, I tried to use the names of colors for the backgrounds or I would have spent way too long looking at hex color codes, lol. I had no idea there were so many colors that you can use just by calling their name!
Oh, and I did not end up <col> or <colgroup> because I felt like this information was organized by row rather than column.
🌈🌈🌈🦄🦄🦄 Your HTML looks great -- <col>/<colgroup> wasn't required.
TIP -- get yourself Colorzilla: https://www.colorzilla.com/ -- free browser tool for Firefox and Chrome. Works like the eyedropper in Photoshop and similar programs, except it will pick the hex codes out of websites and images on the web 😁
Rounded corners on one side -- you're almost there!
border-radius: 10px; -- rounds corners on all 4 sides
border-radius: 0 0 10px 10px; -- rounds corners on the bottom 2 corners only
border-radius: 10px 10px 0 0; -- rounds corners on the top only
🌈🌈🌈🦄🦄🦄🌈🌈🌈🦄🦄🦄 great job!!!
🌈🌈🌈🦄🦄🦄 Fantastic job as always 😁