Tea Cozy Challenge - Feedback?

Took me forever to do this project and it looks good on my computer VSC but of course isn’t displaying properly in github.

Tea Cozy Cafe - Link to the github pages and the code in github is:

`

<!DOCTYPE html>
<html>
<head>
    <title>Tea Cozy Cafe</title>
    <link rel="stylesheet" href="mhopkins92.github.io/teacozy2/index.css"/>
</head>
<body>
    <!--Header with Logo and Links-->
    <DIV class="header">
    <img class="logo" src="./img-tea-cozy-logo.png"/>
        <div class="links">
            <a class="link" href="#">Mission</a>
            <a class="link" href="#">Featured Tea</a>
            <a class="link" href="#"> Locations</a>
         </div>
    </DIV>
    <!--Banner Section-->
    <div class="banner">
        <div class="overlaytext">
             <h2>Our Mission</h2>
             <h4>Handpicked, Artisinally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
        </div>
        <img src="./styleguide/img-mission-background.jpeg" rel="background"/>
    </div>
    <!--Tea of the Month Section-->
         <h2>Tea of the Month</h2>
        <h4>What's Steeping at The Tea Cozy?</h4>
    <div class="featuredtea">
        <figure>
             <img class="TOTM" src="./styleguide/img-berryblitz.jpeg"/>
            <figcaption>Fall Berry Blitz Tea</figcaption>
        </figure>
        <figure>
            <img class="TOTM" src="./styleguide/img-spiced-rum.jpeg"/>
            <figcaption>Spiced Rum Tea</figcaption>
        </figure>
        <figure>
            <img class="TOTM" src="./styleguide/img-donut.jpeg"/>
            <figcaption>Seasonal Donuts</figcaption>
        </figure>
        <figure>
            <img class="TOTM" src="./styleguide/img-myrtle-ave.jpeg"/>
            <figcaption>Myrtle Avenue Tea</figcaption>
        </figure>
        <figure>
            <img class="TOTM" src="./styleguide/img-mission-background.jpeg"/> 
            <figcaption>Bedford Bizarre Tea</figcaption>
        </figure>
    </div>
    <!--Locations Section-->
    <h3>Locations</h3>
    <div class="locations-container">
    <div class="locations">
        <div class="locationbox">
            <h4>Downtown</h4>
            <p>384 West 4th St</p>
            <p>Suite 108</p>
            <p>Portland, Maine</p>
        </div>
        <div class="locationbox">
            <h3>East Bayside</h3>
            <p>3433 Phisherman's Avenue</p>
            <p>(Northwest Corner)</p>
            <p>Portland, Maine</p>
        </div>
        <div class="locationbox">
            <h3>Oakdale</h3>
            <p>515 Crescent Avenue</p>
            <p>Second Floor</p>
            <p>Portland, Maine</p>
        </div>
        </div>
    </div>
    <div class="footer">
        <h2>The Tea Cozy</h2>
        <h5>contact@theteacozy.com</h5>
        <h5>917-555-8904</h5>
        <h5 id="copyright">copyright The Tea Cozy 2017</h5>
    </div>
</body>
</html> `
`html {
    font-size: 16px;
    box-sizing: border-box;
}
body {
  font-family: Helvetica;
  font-size: 22px;
   color: seashell;
   background-color: black;
    opacity: 0.9;
    text-align: center;
}
h2, 
h4, 
h3, 
h5 {
    text-align: center;
    display: block;
}
.header {
    display: inline; 
    background-color: black;
    position: fixed;
    top: 0px;
    left: 10px;
    height: 69 px;
    border-bottom: 1px solid seashell;
    width: 100%;
}
.logo {
    max-height: 50px;
    display: flex;
    float: left;
    padding: 10px;
}
.links{
    word-spacing: 0.3em;
    float: right;
    margin: auto 1rem auto auto;
}
.link {
    font-family: Helvetica;
    font-size: 22px;
   color: seashell;
}
.banner img {
    z-index: 1;
    display: flex;
    height: 700px;
    position: relative;
    margin: auto; 
    justify-self: center;
    padding-top: 69px;
}
.overlaytext {
    position: absolute;
    background: black;
    width: 100%;
    bottom: 50%;
    align-content: center;
    word-spacing: 0.3em;
    z-index: 9;
}
.featuredtea {
    display: flex;
    justify-content: center;
    flex-direction: row;
   flex-wrap: wrap;
}
figcaption {
    text-align: center;
}
.TOTM {
    max-height: 200px;
    max-width: 300px;
    align-content: center;
}
.locations-container{ 
    background-image: url("./img-locations-background.jpeg"); 
    background-repeat: no-repeat;
    background-size: cover;
    height: 500px;
    width: 90%;
    display: flex;
    margin: auto;
    justify-content: center;
    flex-direction: column;
    }
   
.locations {
    display: flex;
      justify-content: center;
      flex-direction: row;
      column-gap: 40px;
      height: 500px;
      padding-top: 125px;
      
}

.locations .locationbox {
    width: 300px;
    margin-top: 15px;
    margin-bottom: auto;
    border: 1px solid seashell;
    background-color: black;
    text-align: center;
    display: inline-flex;
    position:relative;
    flex-direction: column;
    background: rgba (0, 0, 0, 0.25);
}
.locations p{
    color: white;
}
.footer {
    height: 200px;
    display: block;
}
.footer #copyright {
    float: left;
} `

Would love to know why it isn’t connecting the CSS in github and if there’s any way I should change/simplify the code!

I believe the issue is that your file path is wrong. All you need is index.css, not the entire webpage link.

1 Like

Yes! Thanks so much for the response. That’s the. file path I started with which didn’t work so I tried all sorts of iterations (the entire link was just my latest attempt which got me close but then I tried to fix the an image in another part of the code and it stopped working again.).

1 Like

You’re very welcome! Is it fixed then?

1 Like

Unfortunately not =[ I switched the file path back again but no luck

From what I see in Github, the issue is still your file path. All you need is index.css, not ./teacozy2/index.css.

1 Like

You’re the best for continuing to help me figure this out. Thanks so much. Yeah I tried just index.css and /index.css and ./index.css and it’s the same outcome.

OO HOL UP. You fixed it, now it’s just the images I’m having an issue with but I’m too scared to change anything lest it go back to the way it was xD

Okay then, I can help with that.

Again, it’s a file path issue. You’d fix this the same way as the CSS issue, by just using the file name (and nothing else) when calling the file.

1 Like

Yepppp you saved my project (and my sanity.) Thank you so much again!!!

Haha you’re welcome, glad I could help! Happy coding! :grinning: