Tea Cozy Project

Amazing- thank you so much for your help!

Hey Kenny, hey everyone!

Thanks for your post, I took a look into your solution and it looks pretty good to me. You should’ve probably used classes instead, because they have a wider use case, especially in the scenario of this project, but you did the semantics pretty well - I didn’t. Might change that in the future, might look better. Might not. Not entirely sure which one is more appreciated by co-dev’s and employers.

I uploaded my solution to GitHub, feel free to check it out!
Click here to view it.

Or just use the direct link: GitHub - gianlucajahn/landing-page-cafe: A little project with a landing project for a tea / cafe shop.

Hey guys,

The section that’s completely throwing me is making the navbar at the top fixed. It seems that Flexbox stops working when I make the header fixed?
I looked this up and apparently that’s true? Is there a way around this that anyone else has discovered?
This is how I created my Navbar, setting out the image on left and the other elements on the right. But this is all removed as soon as I attempt to use ‘position: fixed’

CSS:

.nav-list {
display: flex;
justify-content: flex-end;
align-items: center;
height: 69px;
border-bottom: 1px solid seashell;

}

.nav-item {
list-style: none;

}

.nav-item a {
text-decoration: underline;

}

.nav-item:first-child {
margin-right: auto;
}

.nav-item {
margin-left: 0.5rem;
margin-right: 0.5rem;
}

I’m sure I’m being stupid and there’s some super obvious solution but I can’t see it right now :joy:

Hard to be 100% certain without seeing all of your code. Are you setting the Top, Left and Right values for your fixed element?

I haven’t really done any work in this space for the last 5 years. Flexbox is amazing! So much easier to quickly align elements and make a reasonably responsive site.

Here is my live site

Here is my repo

I wound up removing the list item from the nav, I didn’t realize at first that I needed actually make the UL tag have display: flex. (at least I think)

1 Like

Oh my, my, my! What a FUN project!

I first started it yesterday but got so frustrated and ended up walking away after spending the majority of my day on it. When I returned earlier today with a fresh mind, I copied everything to keep the original just in case then started over from scratch.

Well, I did it!!! SO satisfying. :hugs:
Here it is:

2 Likes

Hi everyone! I’m looking for help, I’ve been trying for 3 days and so far I can’t get the Locations section right, instead of having 3 separate boxes I always end up with one wide box :frowning:

I would appreciate any help, thanks!

HTML:

        <div id="locations">
            <h2>Locations</h2>
            <div class="flex-container">
                <div>
                    <h3>Downtown</h3>
                    <p>384 West 4th St</p>
                    <p>Suite 108</p>
                    <p>Portland, Maine</p>
                </div>
                <div>
                    <h3>East Bayside</h3>
                    <p>3433 Phisherman's Avenue</p>
                    <p>(Northwest Corner)</p>
                    <p>Portland, Maine</p>
                </div>
                <div>
                    <h3>Oakdale</h3>
                    <p>515 Crescent Avenue</p>
                    <p>Second Floor</p>
                    <p>Portland, Maine</p>
                </div>
            </div>
        </div>

CSS:

/*Locations */
#locations {
    width: 90%;
    height: 500px;
    background-image: url("../Images/img-locations-background.jpg");
    background-position: center;
    background-size: cover;
    margin: 100px auto;
    margin-bottom: 10px;
    align-content: center;
}

#locations h2{
    color: seashell;
    background-color: transparent;
    margin-bottom: 15px;
    padding-top: 100px;
}

.flex-container{
    display: flex;
    justify-content: space-evenly;
    margin: 20px;
    padding: 20px;
}

.flex-container > div{
    margin: 20px;
    padding: 20px;
    width: 300px;
    
}

Hi there!

So, when I look at a live version of the code you supplied, the <div>s have space between them. I do notice that your #locations h2 have a background-color set to transparent. Is your .flex-container inheriting a background-color from somewhere that is preventing the gap between your <div>s from displaying? I think I would need to see the entirety of the code otherwise.

Hi! Thank you here is the entire code:

HTML:

<!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">
    <link rel="stylesheet" href="./Resources/CSS/index.css">
    <title>Tea Cozy</title>
</head>
<body>
    <!-- Header -->
    <header>
        <img id="logo" src="./Resources/Images/img-tea-cozy-logo.png" />
            <nav>
                    <a href="#">Mission</a>
                    <a href="#">Featured Tea</a>
                    <a href="#">Locations</a>
            </nav>
        </div>
    </header>
    <!-- Main Content -->
    <div class="Main Content">
         <!-- Our Mission-->
         <div id="our-mission">
            <container id="mission">
                <h2>Our Mission</h2>
                <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
            </container>
        </div>
        <!-- Tea of the Month-->
        <container id="months">
            <h2>Tea of the Month</h2>
            <h4>What's Steeping at the Tea Cozy</h4>
        </container>
        <div id="teas-of-the-month">
            <container class="box1">
                <img src="./Resources/Images/img-berryblitz.jpg">
                <h4>Fall Berry Blitz Tea</h4>
            </container>
            <container class="box2">
                <img src="./Resources/Images/img-spiced-rum.jpg">
                <h4>Spiced Rum Tea</h4>
            </container>
            <container class="box3">
                <img src="./Resources/Images/img-donut.jpg">
                <h4>Seasonal Donuts</h4>
            </container>
            <container class="box4">
                <img src="./Resources/Images/img-myrtle-ave.jpg">
                <h4>Myrtle Ave Tea</h4>
            </container>
            <container class="box5">
                <img src="./Resources/Images/img-bedford-bizarre.jpg">
                <h4>Bedford Bizarre Tea</h4>
            </container>
        </div>

        <!-- Locations -->
        <div id="locations">
            <h2>Locations</h2>
            <div class="flex-container">
                <div>
                    <h3>Downtown</h3>
                    <p>384 West 4th St</p>
                    <p>Suite 108</p>
                    <p>Portland, Maine</p>
                </div>
                <div>
                    <h3>East Bayside</h3>
                    <p>3433 Phisherman's Avenue</p>
                    <p>(Northwest Corner)</p>
                    <p>Portland, Maine</p>
                </div>
                <div>
                    <h3>Oakdale</h3>
                    <p>515 Crescent Avenue</p>
                    <p>Second Floor</p>
                    <p>Portland, Maine</p>
                </div>
            </div>
        </div>
        <!-- Contact -->
        <div id="contact">
            <h2>The Tea Cozy</h2>
            <h5>[email protected]</h5>
            <h5>917-555-8905</h5>
        </div>
    </div>
    <!-- Footer -->
    <footer>
        <h5>copyright The Tea Cozy 2017</h5>
    </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 */

header {
    position: fixed;
    z-index: 1;
    opacity: 1;
    width: 100%;
    border-bottom: solid 1px seashell;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 69px;
    font-family: helvetica;
    color: seashell !important;
    text-decoration: underline;
    top: 0;
}

header a{
    margin: 10px;
}

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

header nav{
    display: flex;
}

nav li{
    padding-left: 3.5em;
}

nav a{
    vertical-align: bottom;
}

#logo {
    height: 50px;
    margin-left: 10px;
}

/* Main Content */

/* Our Mission */
#our-mission {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 700px;
    width: 90%;
    background-image: url("../Images/img-mission-background.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 69px auto;
}

#mission {
    background-color: black;
    width: 100%;
    padding: 10px;
}

/* Tea of the Month */

#teas-of-the-month {
    display: inline-flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 1000px;
}

#teas-of-the-month h4{
    margin: 10px auto;
}

#teas-of-the-month img {
    max-height: 200px;
    max-width: 300px;
    margin: 10px;
}

/*Locations */
#locations {
    width: 90%;
    height: 500px;
    background-image: url("../Images/img-locations-background.jpg");
    background-position: center;
    background-size: cover;
    margin: 100px auto;
    margin-bottom: 10px;
    align-content: center;
}

#locations h2{
    color: seashell;
    background-color: transparent;
    margin-bottom: 15px;
    padding-top: 100px;
}

.flex-container{
    display: flex;
    justify-content: space-evenly;
    margin: 20px;
    padding: 20px;
}

.flex-container > div{
    margin: 20px;
    padding: 20px;
    width: 300px;
    
}



#contact {
    height: 200 px;
}

#contact h2{
    margin-bottom: 20px;
}

#contact h5{
    margin-bottom: 20px;
}

footer h5 {
    margin-left: 20px;
    margin-bottom: 20px;
    text-align: left;
}

This is my first time using flex and I have to admit I’m so lost :frowning_face:

1 Like

Ah, okay.

This selector is what is causing your problem. * selects all elements. So, with a background-color set to black, it is giving ALL of your elements a background color of black. An easy fix would be to remove the background color from * and put it in html. This, then, would make your webpage’s background color black. In actuality, you could move everything but the margin and padding into your html selector. For example:

* {
    margin: 0;
    padding: 0;
}

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

This then might clear up some confusion you have in other areas. Edit: Sorry, I forgot to mention that the items below were just things I noticed and wanted to mention!

These would not be needed as the color seashell for the webpage is already set. You would only need to set a color if you needed to override the original one.

Would also not be needed as the background-color for the page is black. The only thing you would need to set a background color for (other than HTML) would be your .flex-container > div selector. (And you also wouldn’t need to put background-color: transparent on your h2)

Do not stress yourself over learning flex for the first time! What I have found to be the most helpful to me is using Chrome Dev tools. That way I can mess around with the CSS without messing up my source files. Another useful tool I use is the extension Live Server in Visual Studio Code. It allows you to see updates to your live site as you save them.

2 Likes

Thank you soooooo much!!! :smiling_face_with_three_hearts:

1 Like

Throwing in my solution as well! I’m pretty darn excited about getting this working - it’s my first Flexbox site that worked well!

Code: GitHub - laurierauch/theteacozy
See it live: Tea Cozy

1 Like

I found this super useful thankyou!

1 Like

Hi everyone,

Here’s my version of the Tea Cozy Project.

Live Page: The Tea Cozy
Source Code: GitHub - Merthynz/Tea-Cozy

I had a problem with the positioning. Whenever I put the header/nav bar to fixed, I’m unable to put the other sections in place. I have to use “top” for each section to do the trick. Though I was able to come close to the design spec as much as I can, I would like to know how to properly code it using the proper positioning. I appreciate any comments or suggestions.

Hi merthynz,

By making the position of your <div>s absolute, you’re removing them from the flow of the document–which is giving you more work when positioning them further. I ask that you go back to your code and remove the styled position from all of your <div>s and try slapping “top: 0;” into the style of your header. You may find positioning your elements much easier then.

Hi kirativewd,

You’re right!

Thank you so much! :smiling_face_with_three_hearts:

1 Like

Good day to everyone here, Tea Cozy’s Slayer.

I want to jump into this and add my own version.

Live Page: anrizald’s Tea Cozy
Source Code: Github - Anrizald/TeaCozy

Reading all others submission and the replies, I too had used lot of time to fix the layout positioning of the Tea of the Month section. Using my newly found bravery to ask on forums such as CodeCademy’s forum and Stack Overflow, I finally fixed it and got help.
That being said, I recommend to be more proactive in forums so we can learn from other source and other platforms.

Feel free to use mine as a references if needed be.
Also, feel free to add comments or suggestions.

Cheers to all!

Ngl, this project was a bit frustrating bc of the Locations section, but I’m glad that I ended up figuring it out

Live site: Tea Cozy

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Tea Cozy</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <img class="logo" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png?_gl=1*ijvqvi*_ga*MzM4MDYwMTUyLjE2NTA3Mzc4ODM.*_ga_3LRZM6TM9L*MTY2MTQwMzU3Ni4yNDEuMS4xNjYxNDAzOTg3LjE5LjAuMA.." alt="Tea Cozy logo">
        <ul>
            <li><a href="#mission">Mission</a></li>
            <li><a href="#featured">Featured Tea</a></li>
            <li><a href="#locations">Locations</a></li>
        </ul>
    </header>
    <main>
        <div id="mission">
            <div>
                <h2>Our Mission</h2>
                <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
            </div>
        </div>
        <h2 id="featured">Tea of the Month</h2>
        <h4>What's Steeping at The Tea Cozy?</h4>
        <div class="tea-images">
            <div class="tea-image">
                <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg?_gl=1*1jhph5l*_ga*MzM4MDYwMTUyLjE2NTA3Mzc4ODM.*_ga_3LRZM6TM9L*MTY2MTQwNTk5MS4yNDIuMS4xNjYxNDA3MzI1LjQyLjAuMA.." alt="Fall Berry Blitz Tea">
                <h4>Fall Berry Blitz Tea</h4>
            </div>
            <div class="tea-image">
                <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg?_gl=1*1c2byha*_ga*MzM4MDYwMTUyLjE2NTA3Mzc4ODM.*_ga_3LRZM6TM9L*MTY2MTQwNTk5MS4yNDIuMS4xNjYxNDA3MzI1LjQyLjAuMA.." alt="Spiced Rum Tea">
                <h4>Spiced Rum Tea</h4>
            </div>
            <div class="tea-image">
                <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg?_gl=1*1c2byha*_ga*MzM4MDYwMTUyLjE2NTA3Mzc4ODM.*_ga_3LRZM6TM9L*MTY2MTQwNTk5MS4yNDIuMS4xNjYxNDA3MzI1LjQyLjAuMA.." alt="Seasonal Donuts">
                <h4>Seasonal Donuts</h4>
            </div>
            <div class="tea-image">
                <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg?_gl=1*r7nh62*_ga*MzM4MDYwMTUyLjE2NTA3Mzc4ODM.*_ga_3LRZM6TM9L*MTY2MTQwNTk5MS4yNDIuMS4xNjYxNDA3MzI1LjQyLjAuMA.." alt="Myrtle Ave Tea">
                <h4>Myrtle Ave Tea</h4>
            </div>
            <div class="tea-image">
                <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg?_gl=1*r7nh62*_ga*MzM4MDYwMTUyLjE2NTA3Mzc4ODM.*_ga_3LRZM6TM9L*MTY2MTQwNTk5MS4yNDIuMS4xNjYxNDA3MzI1LjQyLjAuMA.." alt="Bedford Bizarre Tea">
                <h4>Bedford Bizarre Tea</h4>
            </div>
        </div>
        <div id="locations">
            <h2>Locations</h2>
            <div class="locs">
                <div class="location">
                    <h3>Downtown</h3>
                    <p>384 West 4th St</p>
                    <p>Suite 108</p>
                    <p>Portland, Maine</p>
                </div>
                <div class="location">
                    <h3>East Bayside</h3>
                    <p>3433 Phisherman's Avenue</p>
                    <p>(Northwest Corner)</p>
                    <p>Portland, Maine</p>
                </div>
                <div class="location">
                    <h3>Oakdale</h3>
                    <p>515 Crescent Avenue</p>
                    <p>Second Floor</p>
                    <p>Portland, Maine</p>
                </div>
            </div>
        </div>
        <div class="last">
            <h2>The Tea Cozy</h2>
            <h5>[email protected]</h5>
            <h5>917-555-8904</h5>
        </div>
        <h5>copyright The Tea Cozy 2017</h5>
    </main>
    
</body>
</html>


CSS

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px;
    color: seashell;
    background-color: black;
    opacity: 0.9;
    padding: 0;
    margin: 0;
}

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

.logo {
    height: 50px;
    margin-left: 10px;
}

ul {
    list-style: none;
    display: flex;

}

li a {
    color: seashell;
    margin-right: 10px;
}

#mission {
    display: flex;
    background-image: url(https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg?_gl=1*1yrz6jm*_ga*MzM4MDYwMTUyLjE2NTA3Mzc4ODM.*_ga_3LRZM6TM9L*MTY2MTQ5Mzk4NS4yNDQuMS4xNjYxNDk0MDIxLjI0LjAuMA..);
    background-size: cover;
    margin: 0 auto;
    margin-top: 70px;
    height: 700px;
    width: 1200px;
    justify-content: center;
    align-items: center;
}

#mission div {
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
}

#mission div h2 {
    margin-bottom: 0;
}

#featured {
    text-align: center;
    margin-top: 100px;
}

h4 {
    text-align: center;
}

.tea-image img{
    height: 200px;
    width: 300px;
}

.tea-image h4 {
    margin-top: 10px;
}

.tea-image {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.tea-images {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    width: 1000px;
    margin: 0 auto;
}

#locations {
    background-image: url(https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg?_gl=1*1axl918*_ga*MzM4MDYwMTUyLjE2NTA3Mzc4ODM.*_ga_3LRZM6TM9L*MTY2MTQ5Mzk4NS4yNDQuMS4xNjYxNDk0MDIxLjI0LjAuMA..);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 500px;
    width: 1200px;
    margin: 100px auto 0;
}

#locations h2 {
    text-align: center;
    padding-top: 50px;
    margin-bottom: 25px;
}
.locs {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 50px;
}

.location {
    background-color: black;
    opacity: 1;
    width: 300px;
    text-align: center;
    margin: 0 20px;
    flex-direction: column;
    justify-content: space-around;
}

.location p {
    margin: 50px auto;
}

.last {
    text-align: center;
    height: 200px;
}

h5 {
    padding-left: 20px;
}

Feel free to leave any feedback!

Just finished this project and I also found it really difficult! Here’s my solution, I’d really appreciate any feedback. I noticed when resizing the browser only the header, our mission, and footer sections would shrink to fit the screen size but the rest of the page doesn’t. I’m not sure why, so if anyone has any suggestions on how to change it please let me know :smiley:

Github: https://github.com/SaraMajeed/SaraMajeed.github.io/tree/main/TeaCozy

Live Page: https://saramajeed.github.io/TeaCozy/

I tried it so. I think my code is good, I also add a little of animation effects (on hover).
But, if anyone know how i can make some element with opacity 0.9 and other with 1. Because I just can put all the body or html (or root) but not only specific element on opacity 0.9 or 1.

Thank you

https://www.codecademy.com/workspaces/6318781a2777783982019d97