Tea Cozy Project - My Solution

Get Help CSS
,
#1

Hey everyone! Not really a question, just looking to share my solution for the Tea Cozy Project. Might not be perfect (I couldn’t get the bottom border to work but I’m happy with where I got). Code isn’t clean, I’ll just leave it here if anyone feels like giving me some tips :smiley:

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


</head>
<body>
<header><img src="img-tea-cozy-logo.png">
    <div><h1>
        Mission
    </h1>><h1>
        Featured Tea
    </h1><h1>
        Locations
    </h1></div>
</header>


<main><div class="mission"> <div class="center"><h2>Our Mission</h2>
    <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4></div>
</div>

<div class="month">
    <div class="center"><h2>Tea of the Month</h2><h4>What's Steeping at The Tea Cozy?</h4></div>
    <div class="imgtxt"><img src="img-berryblitz.jpg"><h4>Fall Berry Blitz</h4></div>
    <div class="imgtxt"><img src="img-spiced-rum.jpg"><h4>Spiced Rum Tea</h4></div>
    <div class="imgtxt"><img src="img-donut.jpg"><h4>Seasonal Donuts</h4></div>
    <div class="imgtxt"><img src="img-myrtle-ave.jpg"><h4>Myrtle Ave Tea</h4></div>
    <div class="imgtxt"><img src="img-bedford-bizarre.jpg"><h4>Bedford Bizarre Tea</h4></div>
</div>
<div>
    <div class="locations"> <div id="locate"><h2>Locations</h2></div>
        <div class="black"><h2>Downtown</h2><h4>384 West 4th St</h4><h4>Suite 108</h4><h4>Portland, Maine</h4></div>
        <div class="black"><h2>East Bayside</h2><h4>3433 Phisherman's Avenue</h4><h4>(Northwest Corner)</h4><h4>Portland, Maine</h4></div>
        <div class="black"><h2>Oakdale</h2><h4>515 Crescent Avenue</h4><h4>Second Floor</h4><h4>Portland, Maine</h4></div>
        </div>
    </div>
</div>

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

<footer><h3>copyright The Tea Cozy 2017</h3></footer>

</body>
</html>

html {
    display: flex;
    justify-content: center;
    background-color: black;
    font-family: Helvetica;
    font-size: 22px;
    opacity: 0.9;
    color: seashell;
}
body {
    justify-content: center;
}

header {
    display: inline-flex;
    height: 70px;
    box-sizing: border-box;
    margin-bottom: 1px solid seashell;
    width: 100%;
    justify-content: space-between;
    background-color: black;
}

header img {
    height: 50px;
    padding: 10px;
}

header h1 {
    display: inline-flex;
    text-decoration: underline;
    padding: 0px 5px;
    font-size: 1rem;
}

main {
    
}
.mission {
    display: flex;
    background-image: url("img-mission-background.jpg");
    height: 700px;
    width: 1200px;
    flex-flow: column wrap;
    align-items: center;
    align-content: center;
}

.center {
    align-items: center;
    background-color: black;
    text-align: center;
    margin: auto;
    width: 100%;
}

.center h2, .center h3, .center h4, .center h5 {
    margin: 20px 0px;
    font-weight: 700;
}

.month {
    margin:auto;
display: flex;
width: 1000px;
flex-flow: row wrap;
justify-content: space-evenly;
}
.month img {
    height: 200px;
    width: 300px;
}

.imgtxt {
    display: flex;
    flex-flow: column;
    align-items: center;
    width: 300px;
}

.locations {
    display: flex;
    background-image: url("img-locations-background.jpg");
    height: 700px;
    width: 1200px;
    flex-flow: row-reverse wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    display: inline-flex;
}

#locate {
    width: 1000px;
    display: flex;
align-items: center;
justify-content: center;
}

#locate h2 {
    display: flex;
    align-content: center;
    align-items: center;
}

.locations h3, .locations h4 {
    align-items: center;
    text-align: center;
}
.black {
    display: flex;
    background-color: black;
    align-content: center;
    align-items: center;
    flex-flow: column;
    margin: 15px 20px;
    width: 300px;
}

.cozy {
    padding-bottom: 20px;
}

footer h3 {
    padding: 20px;
}
2 Likes
#2

Hey there. Hope I am not too late on this haha. I just checked in to see if I could screen my work against something and came across this. It seems you are to make the sections clickable (links) up top where “Mission” “Featured Tea” and “Location” is. I did the same, and here’s what I did to make it a link that you can navigate to…

Blockquote

    <img src="insert img source file here">

    <div>

        <h1>

            <span><a href="#mission" style="color:#D3D3D3">Mission </a></span>

        </h1> 

        <h1>

            <span><a href="#featuredtea" style="color:#D3D3D3"> Featured Tea </a></span>

        </h1>

        <h1>

            <span><a href="#location" style="color:#D3D3D3"> Locations</a></span>

    </div>

</header>

Blockquote

Apart from that, I think it looks way neat. And I am not sure what you meant by what you couldn’t do with the footer, but it looks fine. If you mean that it’s big, just resize it in CSS using the font-size: small or something.

:slight_smile:

2 Likes
#3

Not late at all! I’m still around here :smiley:

1 Like
#4

There we go. Yeah, I think the header is fine too. What was your question about the header? I couldn’t understand that. Just the text sizing?

#5

Since it has been some time I did this challenge, I think that I had some issues with setting the border of the body! I remember that I had a ton of issues with the body, fitting all those divs haahaha
Either that or the footer and I used the wrong terms :smiley: I’ll check the project tomorrow to see if I can remember.

#6

Hi

Thanks for posting your code - it was really helpful :smiley:.

By the way I think the border issue was because you used margin-bottom instead of border-bottom in the header tag.