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>[email protected]</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!