Hi guys!
I have quite completed the project, after having spent a lot of time, but there are still some elements I do not like…
- the nav bar is set as fixed and with z-index, the other sectors are relative, but they do not go under the nav bar, do you know why?
- the nav bar is not totally attached to the top of the browser
- I do not understand why “locations” title is backgrounded with black, even if I set up as transparent…
Any idea?
Thank you very much!
<!DOCTYPE html>
<html>
<head>
<title>Tea Cozy</title>
<link href="resources/css/css_tea.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<nav>
<img src="resources/images/img-tea-cozy-logo.png" alt="logo Tea Cozy" id="logo">
<ul class="nav_bar">
<li><a href="#background_title">Mission</a></li>
<li><a href="#content"> Featured Tea</a></li>
<li><a href="#background_locations">Locations</a></li>
</ul>
</nav>
<div id="background_title">
<img src="resources/images/img-mission-background.jpg" alt="background image" id="background_img">
<div class="title">
<h2>Our Mission</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
</div>
</header>
<main>
<section id="content">
<div class="tea_month">
<h2>Tea of the Month</h2>
<h4>What's Steeping at The Tea Cozy?</h4>
</div>
<div class="choice">
<div id="fall_berry">
<img src="resources/images/img-berryblitz.jpg" alt="image berryblitz tea">
<p>Fall Berry Blitz Tea</p>
</div>
<div id="spiced_rum">
<img src="resources/images/img-spiced-rum.jpg" alt="image spiced rum tea">
<p>Spiced Rum Tea</p>
</div>
<div>
<img src="resources/images/img-donut.jpg" alt="image donut">
<p>Seasonal Donuts</p>
</div>
<div>
<img src="resources/images/img-myrtle-ave.jpg" alt="image myrtle ave tea">
<p>Myrtle Ave Tea</p>
</div>
<div>
<img src="resources/images/img-bedford-bizarre.jpg" alt="image beldford tea">
<p>Bedford Bizarre Tea</p>
</div>
</div>
</section>
<section class="locations">
<div id="background_locations">
<div id="title_locations_cont">
<h2 id="title_locations">Locations</h2>
</div>
<div class="locations_list">
<div class="box">
<h3>Downtown</h3>
<p>384 West 4th St</p>
<p>Suite 108</p>
<p>Portland, Maine</p>
</div>
<div class="box">
<h3>East Bayside</h3>
<p>3433 Phisherman's Avenue</p>
<p>(Northwest Corner)</p>
<p>Portland, Maine</p>
</div>
<div class="box">
<h3>Oakdale</h3>
<p>515 Crescent Avenue</p>
<p>Second Floor</p>
<p>Portland, Maine</p>
</div>
</div>
</div>
</section>
<section class="contact">
<div id="contact">
<h2>The Tea Cozy</h2>
<h5>[email protected]</h5>
<p>917-555-8904</p>
</div>
</section>
</main>
<footer>
<p class="footer">copyright The Tea Cozy 2017</p>
</footer>
</body>
</html>
* {
font-family: Helvetica;
font-size: 22px;
color: seashell;
background-color: black;
opacity: 0.9;
text-align: center;
}
h2 {
font-size: 30px;
}
h4 {
font-size: 24px;
}
/* Nav Bar */
header {
width: 100%;
}
nav {
position: fixed;
width: 100%;
height: 69px;
padding: 10px;
border-bottom: 1px solid seashell;
z-index: 10;
margin-top: 0;
}
#logo {
width: auto;
height: 2.27rem;
padding-top: 9.5px;
padding-bottom: 9.5px;
float: left;
}
ul.nav_bar {
display: inline;
float: right;
padding-right: 10px;
margin: auto 10px;
padding-top: 7px;
}
li {
display: inline-block;
float: right;
padding: 10px;
margin: auto 10px;
text-decoration: underline;
}
/* Header */
#background_title {
position: relative;
top: 69px;
display: flex;
width: 100%;
justify-content: center;
align-items: center;
}
#background_img {
opacity: 0.9;
justify-content: center;
align-items: center;
width: 95%;
margin: 0 auto;
}
.title {
position: absolute;
width: 95%;
margin: auto auto;
justify-content: center;
align-items: center;
}
.title h2 {
text-align: center;
}
.title h4 {
text-align: center;
}
/* Content */
#content {
position: relative;
z-index: 0;
margin-top: 100px;
margin-right: auto;
margin-left: auto;
max-width: 80%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.tea_month: {
margin-top: 100px;
max-width: 80%;
display: flex;
justify-content: center;
align-items: center;
}
.tea_month h2 {
text-align: center;
}
.tea_month h4 {
text-align: center;
}
.choice img {
width: 300px;
height: 200px;
margin-bottom: 10px;
margin-left: 20px;
margin-right: 20px;
margin-top: 20px;
}
.choice p {
text-align: center;
justify-content: center;
}
.choice {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
/* Locations */
#background_locations {
width: 95%;
height: 500px;
margin: 40px auto auto auto;
background-image: url('https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-locations-background.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-color: transparent;
padding-top: 200px;
}
#title_locations {
background-color: transparent;
}
.locations_list {
width: 100%;
margin-top: 15px;
display: flex;
justify-content: space-around;
align-items: center;
background-color: transparent;
}
.box {
flex-basis: 300px;
padding: 20px;
box-sizing: border-box;
background-color: black;
}
.footer {
padding-left: 20px;
float: left;
}```