Tea Cozy Project

Hello! I struggled a bit with this but thanks to some youtube and digging around have got it - EXCEPT I seem to be doing something wrong as cannot get my “Locations” title sat correctly top center above the address boxes? I’ve tried all sorts without luck so any suggestions welcomed! :slight_smile:

<!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">

    <title>Tea Cozy</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <div id="header">

        <img class="logo" src="img-tea-cozy-logo.webp">

        <nav>

            <ul>

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

                <a href="#featuredtea"><li>Featured Tea</li></a>

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

            </ul>

        </nav>

    </div>

    <div id="content"></div>

<div id="mission"></div>

    <div class="missioncontainer">

        <div class="mission">

        <h2>Our Mission</h2>

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

        </div>

    </div>

</div>

<div id="featuredtea">

    <h2>Tea of the Month</h2>

    <h3>What's steeping at The Tea Cozy?</h3>

</div>

   

<div class="trendcontainer">

    <div class="trend">

        <img src="img-berryblitz.webp">

        <h4>Fall Berry Blitz Tea</h4>

    </div>

    <div class="trend">

        <img src="img-spiced-rum.webp">

        <h4>Spiced Rum Tea</h4>

    </div>

    <div class="trend">

        <img src="img-donut.webp">

        <h4>Seasonal Donuts</h4>

    </div>

    <div class="trend">

        <img src="img-myrtle-ave.webp">

        <h4>Myrtle Avenue Tea</h4>

    </div>

    <div class="trend">

        <img src="img-bedford-bizarre.webp">

        <h4>Bedford Bizarre Tea</h4>

    </div>

<div class="loc-container">

    <div id="locations" class="loctext">

        <h3>Locations</h3>

    </div>

   

        <div class="loc">

            <h3>Downtown</h3>

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

            <p>Suite 108</p>

            <p>Portland, Maine</p>  

        </div>

        <div class="loc">

            <h3>East Bayside</h3>

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

            <p>(Northwest Corner)</p>

            <p>Portland, Maine</p>

        </div>

        <div class="loc">

            <h3>Oakdale</h3>

            <p>515 Crescent Avenue</p>

            <p>Second Floor</p>

            <p>Portland, Maine</p>  

        </div>

</div>

        <div class="contact">

            <h2>The Tea Cozy</h2>

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

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

          </div>

</div>

<footer class="footer">

    <div class="copyright">

        <h5>copyright The Tea Cozy 2017</h5>

    </div>

</footer>

<div id=content></div>

</body>

</html>

body {

font-family:helvetica;

color:seashell;

background-color:black;

opacity:0.9;

text-align: center;

box-sizing: border-box;
}

#header {

    width:100%;

    height:69px;

    border-bottom: 1px solid seashell;

    background-color: black;

    position: sticky;  

    top: 0;

    z-index: 2;

   

    }

}

#content {

    position:relative;

scroll-padding-top: 69px;

}

.logo {

    height:50px;

    padding:left-10px;

    float:left;

}

nav li {

    display:block;

    float:right;

    padding:10px;

    margin: 0 auto;

}

.missioncontainer {

    height: 700px;

    max-width: 1200px;

    background-image: url(img-mission-background.webp);

    background-repeat: no-repeat;

    background-position: center;

    margin: 40px auto 40px auto;

    display: flex;

}

.mission {

    background-color: black;

    opacity:0.8;

    margin:auto;

    width: 100%;

}

.trendcontainer {

display:inline-flex;

max-width:1000px;

height:auto;

flex-wrap:wrap;

align-items: center;

justify-content: center;

}

.trend img {

    height: 200px;

    width: 300px;

    padding: 10px;

}

.loc-container {

    display: flex;

    background-image: url(img-locations-background.webp);

    background-repeat: no-repeat;

    height:500px;

    width:1200px;

    margin:auto;

    align-items: center;

    justify-content:space-evenly;

 

}

.loc {

    width:300px;

    height:300px;

    background-color:black;

    margin:15px 40px;

   

}

.loctext {

    display: inside;

}

.contact {

    height:200px;

}

Hey Matty,
I wanted to look where the problem is however my first problem was that there is css-code in your html which has no representation in the css code you gave us:

<div id="locations" class="loctext">

        <h3>Locations</h3>

    </div>

But there’s no #locations in your css code…

Furthermore it would make things easier if you could upload everything on github :wink:

1 Like

Hey Chris,
Thanks for replying - I took another look and managed to solve it by adding a further Div so the H3 was sat outside (rather than inside) the flexbox which I think was the issue. I’m still getting to grips with Github and hopefully I’ve set up correctly!

https://github.com/matty-b1/Tea-Cozy

Good to hear that you managed to solve it on your own! Unfortunately, the link doesn’t work…