Tea Cozy Project CSS

Hello There!
Here is my finished project, it took me a few days to complete it.
Live: Tea Cozy
Github: GitHub - soniavargas/Tea-Cozy-Shop

Took me a full day, and a couple of rewrites, but its done, a lot of trial and error,
live Tea Cozy
code GitHub - thatbeefy/teacozy

looks pretty similar to the few others i checked out,
any code suggestions are welcome.

thanks

1 Like

both code and result are pretty similar to what i ended up with, looks good!

Having the same issue since one month me whole work is stopped due to this problem, please let me know the possible solution. download mini militia

1 Like

you will soon get the solution

Hello everyone,just completed my Tea Cozy Project.
I’ll really appreciate your criticism and feedbacks

Hey! I’m new to the forum and want to share the result of my Tea Cozy project.
This is the GitHub repository https://github.com/AdrianBarco/TeaCozyProject
and this is the live page https://adrianbarco.github.io/TeaCozyProject/

Hi all!

Here are my results for the Tea Cozy project. I found this to be trickier than it looked. Would love feedback, if anyone has any!
Git hub
Live link

Hello all! This took some time but I’m happy with it. If someone could review my Locations section I’d appreciate it. The height of the div is giving negative space before the copyright at the very end.

<!DOCTYPE html>

<html>

    <head>
        <link rel="stylesheet" type="text/css" href="index.css">
        <title>Tea Cozy</title>
    </head>

    <body>

        <header>
            <img class="logo" src="/images/img-tea-cozy-logo.png">
            <div class="nav">
                <p>Mission</p>
                <p>Featured Tea</p>
                <p>Locations</p>
            </div>
        </header>

        <div class="mission-container">
            <img class="mission" src="/images/img-mission-background.jpg">
            <div class="mission-text">
                <h2 class="mission-1">Our Mission</h2>
                <h4 class="mission-1">Handpicked, Artisanly Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
            </div>
        </div>

        <h2 class="steep1">Tea of the Month</h2>
        <h4 class="steep1">What's Steeping at The Tea Cozy?</h4>

        <div class="tea-month">
            <div class="berryblitz">
                <img class="tea-pic" src="/images/img-berryblitz.jpg">
                <h4>Fall Berry Blitz</h4>
            </div>
            <div class="spicedrum">
                <img class="tea-pic" src="/images/img-spiced-rum.jpg">
                <h4>Spiced Rum Tea</h4>
            </div>
            <div class="donut">
                <img class="tea-pic" src="/images/img-donut.jpg">
                <h4>Seasonal Donuts</h4>
            </div>
            <div class="Myrtle">
                <img class="tea-pic" src="/images/img-myrtle-ave.jpg">
                <h4>Myrtle Ave Tea</h4>
            </div>
            <div class="Bedford">
                <img class="tea-pic" src="/images/img-bedford-bizarre.jpg">
                <h4>Bedford Bizarre Tea</h4>
            </div>
        </div>


        <div class="TeaLocation">

            <div class="LocationTitle">

                <img class="LocImage" src="/images/img-locations-background.jpg">
            </div>

            <div class="LocationContainer">
                <h2>Locations</h2>

                <div class="LocationCard">
                    <h3>Downtown</h3>
                    <h4>384 West 4th St</h4>
                    <h4>Suite 108</h4>
                    <h4>Portland, Maine</h4>
                </div>

                <div class="LocationCard">
                    <h3>East Bayside</h3>
                    <h4>3433 Phisherman's Avenue</h4>
                    <h4>(Northwest Corner)</h4>
                    <h4>Portland, Maine</h4>
                </div>

                <div class="LocationCard">
                    <h3>Oakdale</h3>
                    <h4>515 Crescent Avenue</h4>
                    <h4>Second Floor</h4>
                    <h4>Portland, Maine</h4>
                </div>

            </div>

        </div>

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

    </body>

    <footer>
      <h5>copyright The Tea Cozy 2022</h5>
    </footer>

</html>

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

header {
    max-height: 69px;
    border-bottom: 1px solid seashell;
    display: fixed;
}

.logo {
    display: flex;
    height: 50px;
    padding: 10px;
}

div.nav {
    color: seashell;
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    height: 50px;
    padding: 10px;
    text-decoration: underline;
}

p {
    padding: 10px;
}


.mission {
    position: relative;
    width: 1200px;
    height: 700px;
    opacity: 0.9;
}

div.mission-container {
    position: relative;

}

.mission-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: black;
    background-repeat: repeat;
    width: 100%;

}

h2.mission-1, h4.mission-1 {
    padding: 1px;
    margin: 1px;
}

.tea-month {
    display: flex;
    width: 1000px;
    margin: auto;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-evenly;
    text-align: center;
}

.tea-pic {
    height: 200px;
    width: 300px;
    padding: 10px;
}

.berryblitz h4, .spicedrum h4, .donut h4, .Myrtle h4, .Bedford h4 {
    margin-top: 10px;
}

.TeaLocation {
    width: 1000px;
    height: auto;
    display: flex;
    margin: auto;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-evenly;
    text-align: center;
}

.LocImage {
    position: relative;
  
}

.LocationCard {
    width: 300px;
    background-color: black;
    display: inline-block;
    opacity: 1;
    margin-right: 20px;
    padding-top: 15px;
    
}

.LocationContainer {
    position: relative;
    bottom: 600px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;

}

.Contact {
    position: relative;
    height: 200px;
    width: auto;
    bottom: 380px;
}

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

Hey i am new to this forum, also facing this same issue from many days, i reached this forum in search of solution if anyone have please let me know. fb reels download

This Tea Cozy task has taken several days to finish! I cherished the test of making the whole site just from a photograph. Kindly look at my code and site. squishmallow cow

Really struggled with this one and am still not particularly happy with it.

Any feedback would be greatly appreciated:

https://charlieh94.github.io/TeaCozy/

It seems generally ok on computer browser - though not as responsive as I’d hoped (some sections not shrinking etc and I can’t work out how to get this consistently),

On mobile it’s not very good - some sections aligning left and I don’t understand why - also similar issue with responsiveness as the pc browser.

Here’s my effort at this one:

Not completely happy with it, but not too bad. For some reason my Locations background image doesn’t appear to be the same size as the design, and I’m not sure what’s happening there. Struggling to center the Location squares within the background image too.

Any advice or help would be appreciated.

Hello!

https://abnera.github.io/Tea-cozy/

He terminado, pero se puede seguir mejorando, cualquier sugerencia será aceptada. :slightly_smiling_face:

It took me a bit more than previous projects. Thanks to @alisajad01 for the help with padding after scrolling, content was hidden on the navbar when clicking the nav buttons, here’s the final version:

https://fjosue4.github.io/codecademy/project4-flexbox/

1 Like

It looks great dude.

1 Like