The completed code version of the project

Hello. I have enrolled in “Build a Website with HTML, CSS and Github pages”. Now I am in the “7. Advanced CSS: Flexbox and CSS Transitions”. However, I have got in stuck in the “Tea Cozy” project. Can we share with me the completed code version of this project? Because I can’t find mistakes in which I did.


Since the code you are asking for is a project, no one can give you the “correct” code; there isn’t one. If there are no mistakes that you can find, and your project displays, then you have done it.

If not, please share your code with us so we can help you. :grinning:

I can’t fix this. Nav-menus are not seen, size of banner image is not right :roll_eyes:

    <!--Header section-->
        <nav class="navbar">
            <div class="logo">
                <img src="./resources/image/img-tea-cozy-logo.webp" alt="logo" height="50px">
            <ul class="nav-list">
                <li class="list-items">Mission</li>
                <li class="list-items">Featured Tea</li>
                <li class="list-items">Location</li>

<div id="banner">
  <div class="image-container">
    <div class="inner-container">
        <h2>Our mission</h2>
        <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
header .content {
    position: fixed;

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-left: 10px;

.nav-list {
    list-style-type: none;
    position: relative;
    float: right;


.nav-list .list-items {
    display: inline-block;
    text-decoration: underline;

#banner .image-container {
    background-image: url(../image/img-mission-background.webp);
    background-size: cover;
    height: 700px;
    width: 1200px;
    background-repeat: no-repeat;
    position: relative;


If you don’t mind, may I have all of your code, not just the snippet? From looking at it, I’m still not sure what the issue is.