I’m working on the Tea Cozy project and I’m stuck on a couple questions.
-
I cannot get the Logo and the Anchor elements to separate in the header section. In my mind I put the anchor elements into a div and then I tried to separate the logo from that div containing the anchors. So I tried making them flex items and using space between.
-
The next section with the Mission statement over a background image has been giving me trouble. I cannot get the background image to stay centered on screen when resizing the window. When I resize the window it zooms into the bottom left corner of the background image, rather than zoom into the center of it.
-
I’ve also had trouble with the h2 and h4 in the mission statement. I cannot get the h4 text to wrap underneath when resizing.
-
The next section with the pictures of the tea I feel like I did correctly. The following section with the Locations behaved the same way and were wrapping around one another until I added the background image. What would be the correct way to do this section? Also, the same issues as the background image in the mission portion.
Thank you in advance for any help! I appreciate it!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./Resources/index.css" rel="stylesheet">
<title>Tea Cozy</title>
</head>
<header>
<img src="./Resources/img-tea-cozy-logo.png" class="logo">
<div class="nav">
<a href="#" class="button">Mission</a>
<a href="#" class="button">Featured Tea</a>
<a href="#" class="button">Locations</a>
</div>
</header>
<body>
<div class="master">
<div class="mission">
<div class="banner">
<h2>Our Mission</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
</div>
<div class="featured_banner">
<h2>Tea of the Month</h2>
<h4>What's Steeping at The Tea Cozy?</h4>
</div>
<div class="featured">
<div class="tea_types"><img src="./Resources/img-berryblitz.jpg" class="tea_pic"><h4>Fall Berry Blitz</h4></div>
<div class="tea_types"><img src="./Resources/img-spiced-rum.jpg" class="tea_pic"><h4>Spiced Rum Tea</h4></div>
<div class="tea_types"><img src="./Resources/img-donut.jpg" class="tea_pic"><h4>Seasonal Donuts</h4></div>
<div class="tea_types"><img src="./Resources/img-myrtle-ave.jpg" class="tea_pic"><h4>Myrtle Ave Tea</h4></div>
<div class="tea_types"><img src="./Resources/img-bedford-bizarre.jpg" class="tea_pic"><h4>Bedford Bizzare Tea</h4></div>
</div>
<div class="location_master">
<div class="locations_banner">
<h2>Locations</h2>
</div>
<div class="locations">
<div class="specific_location"><h3>Downtown</h3><p>384 West 4th St</p><p>Suite 108</p><p>Portland, Maine</p></div>
<div class="specific_location"><h3>East Bayside</h3><p>3433 Phisherman's Avenue</p><p>(Northwest Corner)</p><p>Portland, Maine</p></div>
<div class="specific_location"><h3>Oakdale</h3><p>515 Crescent Avenue</p><p>Second Floor</p><p>Portland, Maine</p></div>
</div>
</div>
<div class="contact">
<h2>The Tea Cozy</h2>
<h5>[email protected]</h5>
<h5>917-555-8904</h5>
</div>
</div>
</body>
<footer>
<h5>copyright The Tea Cozy 2017</h5>
</footer>
</html>
html {
font-family: Helvetica;
font-size: 22px;
color: seashell;
background-color: black;
opacity: 0.9;
}
.master {
text-align: center;
}
h2 {
font-size: 30px;
}
h4 {
font-size: 20px;
}
header {
display: inline-flex;
position: fixed;
align-items: center;
width: 100%;
height: 69px;
border-bottom: 1px solid seashell;
background-color: black;
z-index: 10;
padding: 0 10;
top: 0;
left: 0;
}
.logo {
height: 50px;
}
a {
font-family: helvetica;
color: seashell
}
.mission {
background-image: url(../Resources/img-mission-background.jpg);
width: 1200px;
height: 700px;
display: flex;
align-items: center;
}
.banner {
width: 100%;
background-color: black;
z-index: 1;
min-height: 100px;
}
.featured {
display: inline-flex;
flex-wrap: wrap;
justify-content: space-around;
}
.tea_types {
margin: 10px;
}
.tea_types h4 {
margin-top: 10px;
}
.tea_pic {
width: 300px;
height: 200px;
}
.locations {
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
}
.locations_banner {
display: flex;
}
.specific_location {
width: 300px;
height: 300px;
background-color: black;
margin: 20px;
display: inline-flex;
flex-direction: column;
}
.location_master {
display: flex;
justify-content: center;
background-image: url(../Resources/img-locations-background.jpg);
background-size: 100% 100%;
width: 1200px;
height: 500px;
}