Tea Cozy project - need help with my code

Hello community,

It is one of the first times I write here, and that’s because I feel so dumb!
I actually need some help with understanding my code.

Do you remember the Tea Cozy off-platform project?
Well, I’m on it since days, and I can’t get any better than the following:

HTML:

<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 href="C:\Users\Federica\OneDrive\Desktop\CODING\Projects\TeaCozy\style.css" type="text/css" rel="stylesheet" >
<header>

    <img src="Img\img-tea-cozy-logo.png" alt="logo_teacozy" class="logo">

    <ul class="breadcrumbs">

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

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

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

    </ul>

</header>



<main>

    <div class="mission" id="mission">

        <h2 class="missiontitle">Our Mission</h2>

        <h4 class="missiontitle">Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>

    </div>

    <div class="featuredTea" id="featuredTea">

        <p>Tea of the Month</p>

        <p>What's Steeping at The Tea Cozy?</p>

        <img src="Img\img-berryblitz.jpg">

        <figcaption>Fall Berry Blitz Tea</figcaption>            

        <img src="Img\img-spiced-rum.jpg">

        <figcaption>Spiced Rum Tea</figcaption>

        <img src="Img\img-donut.jpg">

        <figcaption>Seasonal Donut</figcaption>

        <img src="Img\img-myrtle-ave.jpg">

        <figcaption>Myrtle Ave Tea</figcaption>

        <img src="Img\img-bedford-bizarre.jpg">

        <figcaption>Bedford Bizarre Tea</figcaption>

    </div>

    <div class="locations">

        <h2>Locations</h4>

        <article>

            <h4>Downtown</h4>

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

            <p>Suite 108</p>

            <p>Portland, Maine</p>

        </article>

        <article>

            <h4>East Bayside</h4>

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

            <p>(Northwest Corner)</p>

            <p>Portland, Maine</p>

        </article>

        <article>

            <h4>Oakdale</h4>

            <p>515 Crescent Avenue</p>

            <p>Second Floor</p>

            <p>Portland, Maine</p>

        </article>

    </div>

</main>

<footer>

    <h2>The Tea Cozy</h2>

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

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

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

</footer>

AND CSS:

  • {

    font-family: Helvetica;

    font-size: 22px;

    color: seashell;

    background-color: black;

    opacity: 0.9;

    text-align: center;

}

/Header section/

.logo {

height: 50px;

margin: 10px;

}

header {

display: flex;

justify-content: space-between;

height: 69px;

border-bottom: 1px solid seashell;

}

.breadcrumbs {

display: flex;

align-items: right;

}

.breadcrumbs li {

padding: 5px;

list-style: none;

}

/Main section/

/mission/

.mission {

background-image: url(https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-mission-background.jpg);

background-size: 100%;

background-repeat: no-repeat;

height: 700px;

width: 1200px;

display: flex;

align-items: center;

flex-wrap: wrap;

padding: 5px;

}

/featured tea/

.featuredTea img {

width: 300px;

height: 200px;  

margin: 10px;

display: flexbox;

flex-wrap: wrap;

justify-content: space-around;

}

/Locations/

article {

height:300px;

width: 300px;

padding: 10px;

opacity: 1;

background-color: black;

display: inline-block;

align-items: center;

flex-wrap: wrap;

text-align: center;

}

.locations {

background-image: url('Img/img-locations-background.jpg');

height: 500px;

width: 1100px;

}

/Footer/

footer p {

text-align: left;

}

It’s fine if you just tell me I’m not able to, but I’m also brand new to coding and website styling and I’m really keen on learning.

Please, I’ll be more than glad to get some help :slight_smile:

Thank you,

Federica

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.