Hello-
I’m trying to finish up this project and have run into a few issues I cannot seem to find a solution to. I would greatly appreciate being pointed in the right direction or any help some one could provide.
The issues;
fixed-Header-I can’t seem to get the nav items to list horizontally and not vertically. I was able to get them listed on the far right side at one point…
fixed-Mission Statement- the black background for the text. even using z index to try and get it to show up isn’t working.
-Locations-the location card themselves will not space out to show the individual boxes. they either bunch in the middle or bunch on the left side on top of each other.
Please let me know if you think its a ruleset in another section messing with these or something else I can try.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styelsheet\style.css">
<title>The Tea Cozy</title>
</head>
<body>
<header>
<div class="logo">
<img src="styelsheet\img-tea-cozy-logo.png" alt="Tea Cosy logo" height="50px">
</div>
<div class="nav">
<ul>
<li>Mission</li>
<li>Featured Tea</li>
<li>Locations</li>
</ul>
</div>
</header>
<section class="mission">
<div class="mission-card">
<h2>Our Mission</h2>
<h4> Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade,Organic Tea</h4>
</div>
</section>
<section class="tom">
<div class="tea-title">
<h2><strong>Tea of the Month</strong></h2>
<h4>Whats Steeping at The Tea Cozy?</h4>
</div>
<div class="tea-images">
<div class="img1">
<figure><img src="styelsheet\img-berryblitz.jpg" width="300px" height="200px"/><figcaption>Fall Berry Blitz Tea</figcaption></figure>
</div>
<div class="img2">
<figure><img src="styelsheet\img-spiced-rum.jpg" width="300px" height="200px"/><figcaption>Spiced Rum Tea</figcaption></figure>
</div>
<div class="img3">
<figure><img src="styelsheet\img-donut.jpg" width="300px" height="200px"/><figcaption>Seasonal Donuts</figcaption></figure>
</div>
<div class="img4">
<figure><img src="styelsheet\img-myrtle-ave.jpg" width="300px" height="200px"/><figcaption>Myrtle Ave Tea</figcaption></figure>
</div>
<div class="img5">
<figure><img src="styelsheet\img-bedford-bizarre.jpg" width="300px" height="200px"/><figcaption>Bedford Bizarre Tea</figcaption></figure>
</div>
</div>
</section>
<section class="location">
<div class="title">
<h2><strong>Locations</strong></h2>
</div>
<div class="location-cards">
<div class="specifics">
<h3>Downtown</h3>
<p>384 West 4th St</p>
<p>Suite 108</p>
<p>Portland, Maine</p>
</div>
<div class="specifics">
<h3>East Bayside</h3>
<p>3433 Phisherman's Avenue</p>
<p>(Northwest Corner)</p>
<p>Portland, Maine</p>
</div>
<div class="specifics">
<h3>Oakdale</h3>
<p>515 Crescent Avenue</p>
<p>Second Floor</p>
<p>Portland, Maine</p>
</div>
</div>
</section>
<section class="contact">
<div>
<h2><strong>The Tea Cozy</strong></h2>
<h5>[email protected]</h5>
<h5>917-555-8904</h5>
</div>
</section>
</body>
<footer>
<p class="copy">copyright The Tea Cozy 2017</p>
</footer>
</html>
body {
font-family: Helvetica, snas-serif;
font-size: 22px;
color: seashell;
background-color: black;
opacity: 0.9;
box-sizing: border-box;
display: block;
}
/* Navigation bar */
header {
height: 69px;
width: 100%;
display: inline-flex;
align-items: center;
position: fixed;
border-bottom: 1px solid seashell;
background-color: black;
}
.logo {
float: left;
margin: 10px;
}
.nav {
margin: 10px;
justify-content: flex-end;
text-decoration: underline;
}
/*mission Statement */
.mission {
text-align: center;
background-image: url(https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg?_gl=1*1w0ivgi*_ga*NzM5MDg1ODkyLjE2NDc1MzQyNzk.*_ga_3LRZM6TM9L*MTY2MzYzNjkxNC4zMC4wLjE2NjM2MzY5MTQuNjAuMC4w);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
max-width: 1200px;
height: 700px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
}
.missiion-card {
width: 100%;
height: auto;
background-color: black;
}
/*Tea of the Month -DONT TOUCH DONE!!!! */
.tom {
display: inline-flex;
width: 100%;
margin: 10px auto;
align-items: center;
justify-content: center;
flex-direction: column;
}
.tea-title {
display: inline-flex;
flex-direction: column;
text-align: center;
margin-top: 50px;
}
.tea-images {
display: inline-flex;
justify-content: center;
flex-wrap: wrap;
}
.img1,
.img2,
.img3,
.img4,
.img5 {
text-align: center;
}
/* Locations */
.location {
display: inline-flex;
height: 500px;
width: 100%;
background-image: url(https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg?_gl=1*1w0ivgi*_ga*NzM5MDg1ODkyLjE2NDc1MzQyNzk.*_ga_3LRZM6TM9L*MTY2MzYzNjkxNC4zMC4wLjE2NjM2MzY5MTQuNjAuMC4w);
background-size: cover;
flex-direction: column;
justify-content: center;
align-items: center;
}
.title {
display: inline-flex;
margin-bottom: 15px;
}
.location-cards {
display: inline-flex;
margin: 40px;
width: 300px;
height: 300px;
background-color: black;
}
.specifics {
text-align: center;
}
/* Contact Info */
.contact {
text-align: center;
height: 200px;
}
/* footer */
.copy {
justify-content: flex-start;
margin: 20px;
}
