Hey all, I just finished the tea Cozy project and I’m a bit proud because I struggled quite a bit with positioning the Mission headers and navbar header, after that it didn’t take long to finish. There are still a few things I’m not 100% happy with but can’t seen to figure out without messing up the positioning as a whole I was hoping to find some help with.
-
The Mission background image doesn’t show w/o the padding set to 25%. I wasn’t able to figure out another way to let the section show/start below the navigation-header.
-
When I click on the navigation links it drops the page below where I want them to land (below the location and TOM h2’s. I think this might have something to do with the padding problem above, but I’m not sure.
*The h2 and h4 headers in the MissionPicture section look good at my laptop but when I open google devs and view the page in mobile there’s a thin line between the h4 and h2 elements. Positioning this is one of the two things that took me the longest and I have no clue how to fix the mobile view.
- Last problem/question: is there a way to get some spacing on the right side of the UL / navigation (with or w/o changing space-between)? When I add margin or padding on the right of the ul tag the location link drops to a line below)
If there are other improvements I could make next to these things also feel free to give your advice.
This is my HTML file:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel=stylesheet href="TeaCozy.css">
</head>
<body>
<header>
<figure><img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png" alt="TeaCozy logo"> </figure>
<nav>
<ul>
<li><a href="#MissionPicture">Mission</a></li>
<li><a href="#TOM">Featured Tea</a></li>
<li><a href="#locations">Locations</a></li>
</ul>
</nav>
</header>
<section class ="MissionPicture" id="MissionPicture">
<h2> Our Mission</h2>
<h4> Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea
</h4>
</section>
<!-- Tea of the Month section-->
<h2 id="TOM">Tea of the Month</h2>
<h4>What's steeping at The Tea Cozy?</h4>
<section class ="TOM">
<figure>
<img src="img-berryblitz.jpg">
<figcaption> Fall Berry Blitz Tea </figcaption>
</figure>
<figure>
<img src="img-spiced-rum.webp">
<figcaption> Spiced Rum Tea</figcaption>
</figure>
<figure>
<img src="img-donut.webp">
<figcaption>Seasonal Doughnuts </figcaption>
</figure>
<figure>
<img src="img-myrtle-ave.webp">
<figcaption> Myrlte Ave Tea</figcaption>
</figure>
<figure>
<img src="img-bedford-bizarre.jpg">
<figcaption>Bedford Bizarre Tea </figcaption>
</figure>
</section>
<section class="LocationsBG">
<h2 id="locations">Locations</h2>
<section class="Locations">
<address>
<h3>Downtown</h3>
384 West 4th St <br aria-hidden="true">
Suite 108 <br aria-hidden="true">
Portland Maine
</address>
<address>
<h3>East Bayside</h3>
3433 Phisherman's Avenue <br aria-hidden="true">
(Northwest Corner) <br aria-hidden="true">
Portland Maine
</address>
<address>
<h3>Oakdale</h3>
515 Crescent Avenue <br aria-hidden="true">
Second Floor <br aria-hidden="true">
Portland, Maine
</address>
</section>
</section>
<footer>
<h1> The Tea Cozy</h1>
<h5>contact@theteacozy.com</h5>
<h5>917 - 555 - 8904</h5>
</footer>
<h6>© copyright the Tea Cozy project </h6>
</body>
</html>
And this is my CSS file:
html, body, a, href {
background-color: black;
color: seashell;
margin: 0;
}
header {
display: inline-flex;
position: fixed;
width: 100%;
height: auto;
align-items: center;
border-bottom: 2px seashell solid;
font-size: normal;
z-index: 2;
background-color: black;
justify-content: space-between;
}
img {
height: inherit;
width: auto;
}
li {
display: inline-flex;
}
section.MissionPicture {
background-image: url("img-mission-background.jpg");
background-repeat: none;
background-position: center;
background-size: cover;
width: 100%;
height: 40%;
padding: 25% 0%;
display: flex;
flex-direction: column;
}
h2, h4 {
background-color: black;
color: seashell;
text-align: center;
margin: 0;
}
h2 {
padding-top: 2%;
}
h4 {
padding-bottom: 2%;
}
section.TOM {
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
}
section img{
max-height: 200px;
}
figcaption {
text-align: center;
}
section.LocationsBG {
background-image: url("img-locations-background.webp");
justify-self: center;
}
section.Locations{
display: flex;
justify-content: space-around;
color: seashell !important;
padding: 5% 0;
}
address {
background-color: black;
padding: 0 2% 2% 2%;
max-width: 300px;
text-align: center;
}
#locations {
color: black;
text-align: center;
background-color: rgba(255, 255, 255, 0);
}
footer {
max-height: 200px;
width: 100%;
text-align: center;
}
)