Tea Cozy project

So I have completed the Tea Cozy project and it gave me quite some practice (had to redo my css after deleting it by accident when I was done!). There are two things however I couldn’t get quite right and I would like some input on this. You find the codes below my questions and a live version on this github page.

I have a fixed navigation bar, but when I press one of the links and it jumps to that location on the page there is a part covered by the fixed navigation bar. You can best see this when clicking on featured tea. Thea of the Month (the title of the part jumped to) is “behind” the nav bar. I would like to have it under the nav bar. How can I do that?

Second question is about the Tea of the Month section. The two tea’s on the second row (myrtle and bedford aren’t aligned nicely as shown in the example (the room between them is too large). What can I do to change that since I’m using flexbox?

Thanks in advance! :smiley:

<!DOCTYPE html>
<html>
    <head>
        <title>The Tea Cozy</title>
        <link rel="stylesheet" href="./stylesheet.css" type="text/css"/>
    </head>
    <body>
        <nav>
            <img src="./Images/img-tea-cozy-logo.png" class="imglogo" alt="Tea Cozy logo">
            <section class="navlinks">
                <a href="#mission">Mission</a>
                <a href="#featured">Featured tea</a>
                <a href="#place">Locations</a>
            </section>
        </nav>
        <header>
            <section class="header_text" id="mission">
                <h2>Our Mission</h2>
                <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
            </section>
        </header>
        <main>
            <section class="teamonth" id="featured">
                <h2>Tea of the Month</h2>
                <h4>What's sleeping at the Tea Cozy?</h4>
                <section class="teaimg">
                    <section class="berry">
                        <img src="./Images/img-berryblitz.jpg" class="berry_img" alt="Berry blitz tea">
                        <p>Fall Berry Blitz tTea</p>
                    </section>
                    <section class="spiced">
                        <img src="./Images/img-spiced-rum.jpg" class="spiced_img" alt="Spiced rum">
                        <p>Spiced Rum Tea</p>
                    </section>
                    <section class="donut">
                        <img src="./Images/img-donut.jpg" class="donut_img" alt="Donut">
                        <p>Seasonal Donut</p>
                    </section>
                    <section class="myrtle">
                        <img src="./Images/img-myrtle-ave.jpg" class="myrtle_img" alt="Mytrle Ave tea">
                        <p>Myrtle Ave Tea</p>
                    </section>
                    <section class="bedford">
                        <img src="./Images/img-bedford-bizarre.jpg" class="bedford_img" alt="Bedford Bizarre Tea">
                        <p>Bedford Bizarre Tea</p>
                    </section>
                </section>
            </section>
            <section class="location" id="place">
                    <h2>Locations</h2>
                    <section class="adres">
                        <section class="downtown">
                            <h3>Downtown</h3>
                            <p>384 West 4th St</p>
                            <p>Suite 108</p>
                            <p>Portland, Maine</p>
                        </section>
                        <section class="east">
                            <h3>East Bayside</h3>
                            <p>3433 Phisherman's Avenue</p>
                            <p>(Northwest Corner)</p>
                            <p>Portland, Maine</p>
                        </section>
                        <section class="oakdale">
                            <h3>Oakdale</h3>
                            <p>515 Crescent Avenue</p>
                            <p>Second Floor</p>
                            <p>Portland, Maine</p>
                        </section>
                    </section>
            </section>
        </main>
        <footer>
            <section class="contact">
                <h2>The Tea Cozy</h2>
                <h5>[email protected]</h5>
                <p>917-555-8904</p>
            </section> 
            <section class="copyright">
                <p>copyright The Tea Cozy 2017</p>
            </section>
        </footer>
    </body>
</html>
* {
    font-family: helvetica;
    font-size: 22px;
    color: seashell;
    opacity: 0.9;
    text-align: center;
}

body {
    background-color: black;
}

nav {
    background-color: transparent;
    height: 69px;
    border-bottom: 1px solid seashell;
    position: fixed;
    top: 0; 
    width: 100%;
    overflow: hidden;
    z-index: 2;
}

.navlinks {
    float: right;
    padding-top: 16px;
}

.navlinks a {
    padding: 16px;
}

.imglogo {
    float: left;
    height: 50px;
    margin-left: 10px;
    margin-top: 10px;
}

header {
    background-image: url(./Images/img-mission-background.jpg);
    height: 700px;
    width: 1200px;
    margin: auto;
    margin-top: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header_text {
    background-color: black;
    width: 1200px;
}

.teamonth {
    width: 1000px;
    margin: auto;
}

.teaimg {
    display: flex;
    justify-content: space-around;
    align-content: space-between;
    flex-wrap: wrap;
}

.berry_img,
.spiced_img,
.donut_img,
.myrtle_img,
.bedford_img {
    height: 200px;
    width: 300px;
    margin-bottom: 10px;
}

.location {
    background-image: url(./Images/img-locations-background.jpg);
    height: 500px;
    width: 1200px;
    margin: auto;
}

.location h2 {
    padding-top: 150px;
}

.adres {
    display: flex;
    justify-content: center;
    margin-top: 15px;
    opacity: 1;
}

.downtown,
.east,
.oakdale {
    background-color: black;
    width: 300px;
}

.downtown,
.east {
    margin-right: 40px;
}

.contact {
    height: 200px;
}

.copyright{
    float: left;
    margin-left: 20px;
}

Hi there,

Starting with your nav–

For your header, you have id="mission" on the section rather than the header.
On your featured tea section, if you include padding-top to the CSS (anything equal to or greater than 50px) you’ll get the results you desire.

As for the spacing of your featured tea–I think you can figure this out with a little assistance.
You want them centered, but with an equal amount of space between each of the smaller boxes. Think of the other ways we can create space between elements.

Looks good! I like the fixed header with no attached background color. Mine came out a bit different -many many lines of css because I didn’t know what I was doing. To answer one of your questions, I ended up making two separate divisions for the first three and second two teas. The difference being:
justify-content:space-between and justify-content:space-around. I set the container sizes to be what what required and then on the second line I gave the image panels a margin of 20px.
Your code is very concise. Congratulations! You must have a really good understanding.

You can check mine out here: Tea Cozy by Jess

Thank you, I worked out the spacing! As for the padding-top: it works, but that also creates a space between tea of the month and the section above, even when the nav bar is not in that position. Maybe this part comes later, but I would think it more elegant when a fixed nav bar moves the elements down so it “nests” itself between the elements. Is that possible?

Thanks for the compliments. I made the nav bar transparent so it was better to see what I meant with my first question. But as I look at it, I think I like it as a design concept.

I’ll go see yours. :slight_smile:

If you want some feedback on it, you can make a topic, tag me, and I’ll be happy to provide some. :slight_smile:

1 Like

As the nav is fixed, it’s removed from the flow of the webpage, so unless there’s some JS way to do that—and then make it fixed again when the user scrolls? I don’t know. But, most (if not all) webpages utilize white space in their design—so having that gap isn’t too awful.

It certainly isn’t awful, it’s actually very nice. I may want things that aren’t possible. Or maybe I’ll find out in time. Thank you for your input. :smiley:

Hi. My name is Nii Ayite. I also did this project
Link: Tea Cozy