Tea Cozy Project solution?

Hi everyone!
My name is Martin and I have been learning Web Dev for a few months already, so far I have made it till the Tea Cozy proyect.

To the moderator, sorry I couldn’t find the “tea cozy” project tag.

I have been struggling for a while with this project and I want to share my solution with you.

I feel like I have written a lot of unnesesary code and probably could have done it in a much more simple way, if anyone has some time to take a look at it and give me some notes it will be very apreciated.

I tried to make it responsive and good looking in diferent bowser sizes, check it out.

Some comments / doubts about the project:

  1. I have noticed other people nesting the anchors at the nav in a

      why is this?
  2. I tried to use proper semantic on the html but then I used a lot of IDs to target elements on the CSS, instead should I have used “class” to target them?

  3. How can I override the opacity 0.9 on the “locations” section for every container in it?

  4. When I click on one of the nav links, some times the header steps on the content of the secction. I had to add some padding at the top of each seccion to solve this but then it started to look odd while scrolling, is there any other way to solve this?
    (I also used hard coded units (px) to set the padding height at the top because while using relative units in % the padding started to shrink with the screen width, then I had the same problem again. Any suggestion about this?)

  5. Is there any other way to keep the footer visible at the bottom than adding a padding-bottom to the main seccion with the height of the footer?

Thank you for your time,
here is the code:

HTML:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link href="./style.css" type="text/css" rel="stylesheet">

    <title>Tea Cozy</title>

</head>

<body>

    <header>

        <img src='https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-tea-cozy-logo.png' alt="Tea cozy logo">

        <nav>

            <a href="#mission">Mission</a>

            <a href="#featured_tea">Featured Tea</a>

            <a href="#locations">Locations</a>

        </nav>

    </header>

    <main>

        <!---Mission section-->

        <section id="mission">

            <h2>Our mission</h2>

            <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>

        </section>

        <!---Featured tea section-->

        <section id="featured_tea">

            <div class="container-head">

                <h2>Tea of the Month</h2>

                <h4>What's Stepping at The Tea Cozy?</h4>

            </div>

            <div class="figure-container">

                <figure id="1">

                    <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-berryblitz.jpg" alt="A cup of tea with berrys in it.">

                    <figcaption>Fall Berry Blitz Tea</figcaption>

                </figure>

                <figure id="2">

                    <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-spiced-rum.jpg" alt="A box of spiced rum tea which says 'It pays to buy good tea'.">

                    <figcaption>Spiced Rum Tea</figcaption>

                </figure>

                <figure id="3">

                    <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-donut.jpg" alt="A donut with sugar on it.">

                    <figcaption>Seasonal Donuts</figcaption>

                </figure>

                <figure id="4">

                    <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-myrtle-ave.jpg" alt="A cup of myrtle tea viewed fom above">

                    <figcaption>Myrtle Ave Tea</figcaption>

                </figure>

                <figure id="5">

                    <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-bedford-bizarre.jpg" alt="A cup of tea with a pot of sugar at its left">

                    <figcaption>Bedford Bizzarre Tea</figcaption>

              </figure>

            </div>

        </section>

        <!---Locations section-->

        <section id="locations">

            <div class="locations-title">

                <h2>Locations</h2>

            </div>

            <div class="locations-container">

                <div class="adress" id="downtown">

                    <h3>Downtown</h3>

                    <p>384 West 4th St</p>

                    <p>Suite 108</p>

                    <p>Portland, Maine</p>

                </div>

                <div class="adress" id="east_bayside">

                    <h3>East Bayside</h3>

                    <p>3433 Phisherman's Avenue</p> 

                    <p>(Norwest Corner)</p>

                    <p>Portland, Maine</p>

                </div>

                <div class="adress" id="oakdale">

                    <h3>Oakdale</h3>

                    <p>515 Crescent Avenue</p>

                    <p>Second Floor</p>

                    <p>Portland, Maine</p>

                </div>

            </div>

        </section>

        <!---Contact info-->

        <section id="contact">

            <h2>The Tea Cozy</h2>

            <h5>contact@theteacozy.com</h5>

            <h5>917-555-8904</h5>

        </section>

    </main>

    <footer>

        <p>&copy; The Tea Cozy 2017</p>

    </footer>

</body>

</html>

CSS:

* {
    font-family: Helvetica;
    color: seashell;
    background-color: black;   
    opacity: 0.9;
    text-align: center;

    /*reset of browser's default values*/
    margin: 0;
    padding: 0;
}

html {
    font-size: 22px;
}

/* header section */

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

header a { 
    margin: 10px;
}

header img {
    height: 50px;
    margin-left: 10px;
}

/*main content*/

main {
    position: relative;
    top: 70px;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 66px;
}

/*mission section*/

#mission {
    width: 90%;
    max-height: 700px;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    flex: 1 1200px;
    background-image: url("https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-mission-background.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#mission h2,
#mission h4 {
    width: 100%;
    padding: 0.5%;
}

/*Featured tea section*/

#featured_tea {
    width: 75%;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    padding-top: 70px;
}

.container-head {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 2%;    
}

.container-head h2 {
    margin: 2% 0;
}

.figure-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: center;
}

figure {
    width: 300px;
    height: 67%;
    overflow: hidden;
    margin: 1%;
}

figure img {
    max-width: 100%;
    height: auto;
    display: block;
}

figcaption {
    margin-top: 3.334%;
}

/*locations section*/

#locations {
    width: 90%;
    max-height: 500px;
    max-width: 1200px;
    padding-top: 5%;
    margin-top: 5%;
    display: flex;
    flex-flow: column;
    justify-content: left;
    align-items: center;
    flex: 1 1200px;
    background-image: url("https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-locations-background.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.locations-title {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: transparent;
}

.locations-title h2 {
    background-color: transparent;
}

.locations-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
    background-color: transparent;
    flex-wrap: wrap;
    opacity: 1; 
}

.adress{
    margin: 20px;
    display: flex;
    flex-basis: 300px;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    opacity: 1;       
}

.adress h3 {
    padding: 5% 0;
    width: 100%;
}

.adress p {
    padding: 7.5% 0;
    width: 100%;
}

/*contact info section*/

#contact {
    height: 200px;
    margin: 0 auto;
    width: 75%;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
}

#contact h2 {
    margin: 1% auto;
}

#contact h5 {
    margin: 2.9% auto;
}

/*footer*/

footer {
    padding: 20px;
    display: flex;
    justify-content: left;
}

@media only screen and (max-width:1133px) {

    /*makes locations section higher*/
    #locations {
        max-height: 700px;
        padding-top: 70px;
    }
}

@media only screen and (max-width:755px) {

    main {
        top: 107px;
    }

    /*aligns header in columns*/
    header {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
    }

    nav {
        display: flex;
        flex-direction: row;
    }

    header img {
        height: 50px;
        margin-top: 10px;
    }

    #mission {
        width: 90%;
        max-height: 500px;
    }

    #featured_tea {
        width: 100%;
        padding-top: 14.17%;
    }

    #locations {
        width: 90%;
        padding-top: 14.17%;
        max-height: 1000px;
    }

    #contact {
        height: 150px;
    }

    footer {
        position: relative;
        top: 40px;
    }
}

@media only screen and (max-width:425px) {
    main {
        top: 47px;
        padding-bottom: 0;
    }
    /*removes headers logo*/
    header img {
        display: none;
    }

    #mission {
        width: 95%;
    }

    #mission h4 {
        font-size: 0.85rem;
    }

    #featured_tea {
        padding-top: 46px;
    }

    #featured_tea h4 {
        font-size: 0.95rem;
    }

    figure {
        width: 95%;
        margin: none;
    }

    #locations {
        width: 95%;
        max-height: 900px;
        background-position: right;
    }

    .adress p {
        padding: 5% 0;
    }

    footer {
        padding: 3%;
    }

    footer p {
        font-size: 0.9rem;
    }
}

@media only screen and (max-width:320px) {

    main {
        top: 109px;
    }

    nav {
        flex-direction: column;
    }
    
    header a{
        margin: 5px;
    }

    #featured_tea {
        padding-top: 110px;
    }

    #locations {
        margin-top: 55px;
        padding-top: 55px;
    }

    #locations h2 {
        padding-bottom: 20px;
    }

    #contact h2 {
        padding-top: 20px;
    }

    footer {
        top: 109px;
    }
}