Been working through the HTML/CSS training for a few days, having a lot of fun with this! I was initially a bit confused on how elements could be edited in both HTML and CSS at the same time, but I’m starting to figure out how to define an element in one sheet so that it can be adjusted in another. My website is all about ramen 🙂 Today I just adjusted the first tab (which won’t actually be the landing page once I’m finished) and “floated” the images so that the text wraps around them on either the left or the right. In order to change the “float” impact on different images, I had to create a class for each one in HTML:
Once the class was created for each image, I could reference that class in CSS to add the float tool. I floated the first and last images right, and the middle image left:
Aaaand here’s the result of that:
I’m probably going to play around with this a bit more to make sure the different sections are evenly spaced.
I also animated my hyperlinks for the different tabs on the page. Essentially the color fades from left to right, and the underline appears from the center:
Looks pretty simple but here’s all the code that went into doing that lol:
Have a lot of cool ideas for this site so hopefully those will start coming together soon 😀