Tea Cozy Project CSS

Hi everyone. This is my first post in the forums, so apologies if there are any mistakes/any rules that I haven’t followed.

I’ve started the Full-Stack Software Engineering course. I had zero experience with HTML, CSS, and any other coding before I started. This particular project took me a long time to finish. The reason I picked the display-positioning tag for this topic is because that’s where I struggled the most.

My code is trying to match this wesbite layout: https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-redline.jpg?_gl=1*1tfh9ef*_ga*MjQ5NDUxNzMxOS4xNjYyOTg0MjMy*_ga_3LRZM6TM9L*MTY2NDI3OTIyMy4yMy4xLjE2NjQyNzkyNDMuNDAuMC4w

My main question (as I’m still trying to learn) is what are the mistakes in my code? Are their inefficient examples, or errors that would cause problems for my website’s layout? I realise that in coding this I was trying to get a picture perfect duplication of the above image, so there was a lot of moving elements around until it matched. Please let me know your thoughts. Thank you!

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tea Cozy</title> <link rel="stylesheet" href="./style.css"> </head> <body> <!-- Nav Bar --> <div class="navbar"> <a href=""><img id="logo" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png?_gl=1*8qg4l7*_ga*MjQ5NDUxNzMxOS4xNjYyOTg0MjMy*_ga_3LRZM6TM9L*MTY2NDM2NjIzMS4yNi4xLjE2NjQzNjY1OTMuMTcuMC4w" alt=""></a> <div class="navtext"> <a href="">Mission</a> <a href="">Featured Tea</a> <a href="">Locations</a> </div> </div> <!-- Our Mission --> <div class="missioncontainer"> <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg?_gl=1*8qg4l7*_ga*MjQ5NDUxNzMxOS4xNjYyOTg0MjMy*_ga_3LRZM6TM9L*MTY2NDM2NjIzMS4yNi4xLjE2NjQzNjY1OTMuMTcuMC4w" alt=""> <div class="missiontext"> <h2>Our Mission</h2> <h4>Handpicked, Artisinally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4> </div> </div> <!-- Tea of the Month --> <div class="teacontainer"> <h2>Tea of the Month</h2> <h4>What's Steeping at the Tea Cozy?</h4> <div class="teaimages"> <figure><img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg?_gl=1*1wzxz7g*_ga*MjQ5NDUxNzMxOS4xNjYyOTg0MjMy*_ga_3LRZM6TM9L*MTY2NDM2NjIzMS4yNi4xLjE2NjQzNjY1OTMuMTcuMC4w" alt=""><figcaption>Full Berry Blitz Tea</figcaption></figure> <figure><img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg?_gl=1*1wzxz7g*_ga*MjQ5NDUxNzMxOS4xNjYyOTg0MjMy*_ga_3LRZM6TM9L*MTY2NDM2NjIzMS4yNi4xLjE2NjQzNjY1OTMuMTcuMC4w" alt=""><figcaption>Spiced Rum Tea</figcaption></figure> <figure><img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg?_gl=1*1wzxz7g*_ga*MjQ5NDUxNzMxOS4xNjYyOTg0MjMy*_ga_3LRZM6TM9L*MTY2NDM2NjIzMS4yNi4xLjE2NjQzNjY1OTMuMTcuMC4w" alt=""><figcaption>Seasonal Donuts</figcaption></figure> <figure><img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg?_gl=1*1wzxz7g*_ga*MjQ5NDUxNzMxOS4xNjYyOTg0MjMy*_ga_3LRZM6TM9L*MTY2NDM2NjIzMS4yNi4xLjE2NjQzNjY1OTMuMTcuMC4w" alt=""><figcaption>Myrtle Ave Tea</figcaption></figure> <figure><img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg?_gl=1*17g49ly*_ga*MjQ5NDUxNzMxOS4xNjYyOTg0MjMy*_ga_3LRZM6TM9L*MTY2NDM2NjIzMS4yNi4xLjE2NjQzNjY1OTMuMTcuMC4w" alt=""><figcaption>Bedford Bizarre Tea</figcaption></figure> </div> </div> <!-- Locations --> <div class="locationscontainer"> <div class="imagecontainer"><img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg?_gl=1*17g49ly*_ga*MjQ5NDUxNzMxOS4xNjYyOTg0MjMy*_ga_3LRZM6TM9L*MTY2NDM2NjIzMS4yNi4xLjE2NjQzNjY1OTMuMTcuMC4w" alt=""> <h2 class="locationheading">Locations</h2> <div class="addcontainer"> <div class="downtown address"> <h3>Downtown</h3> <h4>384 West 4th St</h4> <h4>Suite 108</h4> <h4>Portland, Maine</h4> </div> <div class="bayside address"> <h3>East Bayside</h3> <h4>3433 Phisherman's Avenue</h4> <h4>(Northwest Corner)</h4> <h4>Portland, Maine</h4> </div> <div class="oakdale address"> <h3>Oakdale</h3> <h4>515 Crescent Avenue</h4> <h4>Second Floor</h4> <h4>Portland, Maine</h4> </div> </div> <div class="contact"> <h2>The Tea Cozy</h2> <h5>[email protected]</h5> <h5>917-555-8904</h5> </div> </div> </div> <!-- Footer --> <div class="footer"> <h5>copyright The Tea Cozy 2017</h5> </div> </body> </html>
html, body { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: Helvetica, sans-serif; font-size: 22px; color: seashell; background-color: black; opacity: 0.9; text-align: center; } /* Nav Section */ .navbar { height: 69px; border-bottom: 1px solid seashell; display: flex; align-items: center; justify-content: space-between; position: fixed; width: 100%; z-index: 10; background-color: black; } #logo { height: 50px; padding-left: 10px; } .navbar a { text-decoration: none; color: seashell; padding-right: 20px; } /* Mission Section */ .missioncontainer { padding-top: 69px; position: relative; } .missiontext { position: absolute; top: 350px; left: 0; background-color: black; opacity: 0.9; width: 100%; } /* Tea of the Month */ .teacontainer { text-align: center; width: 1000px; margin: auto; padding-top: 50px; } .teaimages { display: flex; flex-wrap: wrap; justify-content: center; } .teaimages img { height: 200px; width: 300px; margin: 0 -30px; padding-bottom: 10px; } /* Locations */ .locationsconatiner { margin: auto; } .locationscontainer img { height: 700px; width: 1200px; } .imagecontainer { position: relative; } .addcontainer { display: flex; position: absolute; top: 125px; gap: 40px; justify-content: center; margin: 0 0 0 16%; } .address { width: 300px; text-align: center; opacity: 1; background-color: black; } .locationheading { position: absolute; top: 50px; left: 45%; } .contact { height: 200px; width: 100%; position: absolute; bottom: 0px; background-color: black; } /* Footer */ .footer { padding-left: 20px; text-align: left; }