Help with offsite project

hello, i am doing the tea cozy project: https://www.codecademy.com/paths/fscj-22-web-development-foundations/tracks/fscj-22-making-a-website-responsive/modules/wdcp-22-layout-with-flexbox-8a62abed-21fe-442a-8d4d-2b84f3d4ee3a/projects/tea-cozy

I am no where near the actual design my spacing and margins are all off can someone help?

PS: i am new to posting here. thank you for any help!

Hi, and welcome!

Thanks for linking to the exercise, that’s really useful. Could you post the code you have written so far, and perhaps a screenshot to show us exactly what the issues are? Don’t forget to post code inside of the ‘Preformatted text’ option, which is in the toolbar above, under the symbol </>.

Cheers :slight_smile:

å<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="./Resources/css/style.css">
        <Title>Tea Cozy</Title>
    </head>
    <nav>
        <img class="logo" src="./Resources/img-tea-cozy-logo.png">
        <ul style="list-style: none;">
            <li>Mission</li>
            <li>Featured Tea</li>
            <li>Locations</li>
        </ul>
    </nav>
    <body>
        <div class="banner">
            <div class="bannertext">
    <h2>Our Mission</h2>
    <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
        </div>
        </div>  
    <div class="tea">
        <h2>Tea of the Month</h2>
        <h4>What's Steeping at The Tea Cozy?</h4>
    </div>
         
    </body>
    <footer>
        <h2>The Tea Cozy</h2>
        <h5>[email protected]</h5>
        <h5>917-555-8904</h5>
        <p class="copyright">copyright The Tea Cozy 2017</p>
    </footer>
</html>

----
body{
background-color: black;
font-family: helvetica, sans-serif;
font-size: 22px;
color: seashell;
opacity: 0.9;
text-align: center;
}

nav{
    text-align: right;
    border-bottom: 1px solid seashell;
    max-height: 69px;
    
}

ul li{
    display: inline;
    text-decoration: underline;
    
}

.copyright {
    text-align: left;
    margin-left: 20px;
}

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

.banner {
    width: 1200px;
    height: 700px;
    text-align: center;
    opacity: 0.9;
    display: flex;
    background-color: black;    
    background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg");
}

.bannertext {
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
    flex-flow: column;
    flex-grow: 2;
}

Hi Serraphus,

thank you for your help1

i am currently working on the nav and banner area. it is not looking like the sample.

Do you have any suggestions?

Hey!

That looks awesome, well done so far. I have a few suggestions, here they are [warning: spoilers below!]:

Make your nav section a flex container and push the logo to the left and the links to the right using justify-content:

nav {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid seashell;
    max-height: 69px;
}

Your banner section is a flex container, so you can specify the position of it’s child element with a few extra lines of code. Add these lines to banner, in order to center the bannertext section horizontally and vertically:

 .banner {
    display: flex;
    align-items: center;
    justify-content: center;
}

Also add a margin to properly center your banner section horizontally like so:

.banner {
    margin: auto;
}

Remove your old bannertext style section, as it’s no longer required, and replace with this to ensure you are complying with the design spec:

.bannertext {
    background-color: black;
    width: 100%;
}

I think that’s everything I would change so far. There are probably lots of ways to achieve this look, but that’s how would I do it. I hope this was helpful.

Should get something that looks like this:

Happy coding :slight_smile: