Tea Cozy Project Finished, But I Could Improve

Hi. I just finished the Tea Cozy project, and have learned a lot about CSS. However, it took a while, and I know there are things which I might improve. Any suggestions? Thank you.

Here is the code:

HTML...

<!DOCTYPE html>
<html>
    <head>
        <title>Tea Cozy</title>
        <link href="./tea-cozy.css" type="text/css" rel="stylesheet">
    </head>

    <body>
        <header class="header">
            <img class="logo" name="logo" 
            src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-tea-cozy-logo.png">
            <ul class="headerList">
                <li class="mission">Mission</li>
                <li class="featuredTea">Featured Tea</li>
                <li class="locations">Locations</li>
            </ul>
        </header>

        <section class="background">
            <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-mission-background.jpg">
            <div class="missionStatement">
                <h2>Our Mission</h2>
                <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
            </div>
        </section>

        <section class="monthlyTea">
            <div class="monthlyTeas">
            <h2>Tea of the Month</h2>
            <h4>What's Steeping at The Tea Cozy?</h4>
            
            <figure id="berryBlitz">
                <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-berryblitz.jpg">
                <figcaption id="berryBlitzCaption">Fall Berry Blitz Tea</figcaption>
            </figure>
            
            <figure id="spicedRum">
                <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-spiced-rum.jpg">
                <figcaption id="spicedRumCaption">Spiced Rum Tea</figcaption>
            </figure>

            <figure id="seasonalDonuts">
                <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-donut.jpg">
                <figcaption id="seasonalDonutsCaption">Seasonal Donuts</figcaption>
            </figure>

            <figure id="myrtleAve">
                <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-myrtle-ave.jpg">
                <figcaption id="myrtleAveCaption">Myrtle Ave Tea</figcaption>
            </figure>

            <figure id="bedfordBizarre">
                <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-bedford-bizarre.jpg">
                <figcaption id="bedfordBizarreCaption">Bedford Bizarre Tea</figcaption>
            </figure>
            </div>
        </section>

        <section class="locations">
            <div class="teaLocations">
            <h2>Locations</h2>
            
            <figure id="locationsImg">
                <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-locations-background.jpg">
            </figure>

            <div id="downtown">
                <h3>Downtown</h3>
                <p>384 West 4th St</p>
                <p>Suite 108</p>
                <p>Portland, Maine</p>
            </div>

            <div id="eastBayside">
                <h3>East Bayside</h3>
                <p>3433 Phisherman's Avenue</p>
                <p>(Northwest Corner)</p>
                <p>Portland, Maine</p>
            </div>            

            <div id="oakdale">
                <h3>Oakdale</h3>
                <p>515 Crescent Avenue</p>
                <p>Second Floor</p>
                <p>Portland, Maine</p>
            </div>

            </div>
        </section>

        <footer>
            <h2>The Tea Cozy</h2>
            <h5>contact@theteacozy.com</h5>
            <h5>917-555-8904</h5>
            <div class="footer"><h5>copyright The Tea Cozy 2017</h5></div>
        </footer>

    </body>
</html>

CSS…

body {
    font-family: Helvetica;
    font-size: 22px;
    color: seashell;
    background-color: black;
    opacity: 0.9;
    text-align: center;
}

header {
    height: 69px;
    width: 100%;
    border-bottom: 1px solid seashell;
    position: fixed;
    background-color: black;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    align-items: center;
    z-index: 10;
}

.logo {
    display: inline-flex;
    flex-direction: row;
    height: 50px;
}

.headerList {
    text-decoration: underline;
    display: inline-flex;
    list-style-type: none;
    padding-right: 20px;
}

.mission, .featuredTea, .locations {
    display: inline-flex;
    flex-direction: row;
    padding: 10px;
}

.background {
    height: 700px;
    width: 1200px;
    margin: 0 auto;
    position: relative;
    top: 70px;
    z-index: 1;
}

.missionStatement {
    background-color: black;
    position: absolute;
    top: 300px;
    width: 1200px;
    padding-top: 2px;
    padding-bottom: 2px;
}

.monthlyTea {
    display: inline-block;
    position: absolute;
    width: 1000px;
    top: 900px;
}

.monthlyTeas {
    position: relative;
    right: 500px;
}

.monthlyTea img {
    display: inline-flex;
    width: 100%;
    margin: 20px 10px;
}

#berryBlitz, #spicedRum, #seasonalDonuts, #myrtleAve, #bedfordBizarre {
    display: inline-flex;
    flex-flow: row wrap;
    width: 300px;
    height: 200px;
    height: auto;
    margin: 10px;
}

#berryBlitzCaption, #spicedRumCaption, #seasonalDonutsCaption, #myrtleAveCaption, #bedfordBizarreCaption {
    padding: 10px;
    margin: 0 auto;
}

.teaLocations {
    position: absolute;
    top: 1700px;
}

.teaLocations h2 {
    background-color: rgba(0, 0, 0, 0);
    position: relative;
    z-index: 5;
    right: 650px;
    top: 300px;
}

#locationsImg {
    position: relative;
    top: 0px;
    right: 650px;
    height: 500px;
    width: 1200px;
    z-index: 3;
}

#downtown, #eastBayside, #oakdale {
    height: 300px;
    width: 300px;
    background-color: black;
    margin: 15px 20px;
    display: inline-flex;
    justify-content: center;
    flex-direction: column;
    position: relative;
    z-index: 5;
    right: 650px;
    bottom: 250px;
}

#oakdale {
    opacity: 1;
}

footer {
    text-align: center;
    position: relative;
    top: 1850px;
}

.footer {
    text-align: left;
}

Hello @course5306306327 :slightly_smiling_face:!

A suggestion to help you remember things, and maybe the time will shorten it if you practice the skills you learned. Create something of your own of codepen.io using what you know.

I hope this helps =)

3 Likes