I honestly don’t know if im smart enough to continue this course, I am completely stumped and feel so out of my depth. I am trying to make it so the images are as displayed in the example photo, 3 on first row, 2 on second row. As well as centering the banner into the middle of the image but it just isnt happening. I have spent a week on this project and I am completely clueless and I just dont know if im not smart enough. Can someone please look at my code.
<head>
<title>Tea Cozy</title>
<link rel ="stylesheet" href ="Resources/index.css">
</head>
<a href="lol"><div class="topnav">
<span><a class="active">Mission</a></span>
<span><a href="Featured">Featured Tea</a></span>
<span><a href="Locations">Locations</a></span>
<section class ="mission">
Our Mission
Handpicked, Artisinally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea
Tea of the month
What's Steeping at the Tea Cozy
<div class id ="gallery">
<div class = item>
<figure><img src ="images/berryblitz.jpg"> </figure> <figcaption>Berry Blitz</figcaption></figure>
<figure><img src = "images/SpicedRum.jpg" ></figure> <figcaption>Spiced Rum</figcaption></figure>
<figure><img src = "images/Donut.jpg" ></figure> <figcaption>Donut</figcaption></figure>
<figure><img src = "images/MyrtleAve.jpg" ></figure><figcaption>Myrtlye Ave Tea</figcaption></figure>
<figure><img src = "images/bedfordbizarre.jpg" ></figure><figcaption>Bedford Bizzare</figcaption></figure>
Locations
<div class ="adress-container">
<h3> Downtown</h3>
<h4>384 West st</h4>
<h4>Portland, Maine</h4>
<div class="adress-container">
<h3>3433 Phisherman's Avenue</h3>
<h4>(Northwest Corner)</h4>
<h4>Portland, Maine</h4>
</div>
<div class="adress-container">
<h3> 515 Crescent Avenue</h6>
<h4>Second Floor</h4>
<h4> Portland, Maine</h4>
</div>
The Tea Cozy
[email protected]
917-555-8904
<footer> copyright The Tea Cozy 2017</footer>
</body>
</html>
CSS Section
body{
background-color: black;
font-family: Helvetica, sans-serif;
font-size: 22px;
color: seashell;
opacity: 0.9;
}
.header{
position: fixed;
border-bottom: 1px solid seashell;
font-family: Helvetica;
width: 100%;
height: 69px;
display: flex;
align-items: center;
margin: 0 0 0 10px;
padding: 0px;
justify-content: space-between;
border: 1px solid seashell;
background-color: black;
top:0;
z-index: 2;
}
header a{
margin: 10px;
flex-direction: row-reverse;
}
a:hover{
opacity: 0.5;
}
.topnav {
width: 90%;
text-align: right;
margin-right: 15px;
flex-wrap: wrap;
}
a {
color: seashell;
margin: 10px;
}
section.mission
{
margin-left: 10%;
flex-direction: column;
height: 700px;
width: 1200px;
display: flex;
background: url;
background-image: url(../images/background.jpg);
margin: 0 auto
}
#mission img {
width: 90%;
}
.statement{
width: 1200px;
background-color: black;
text-align: center;
flex-direction: column;
flex-wrap: wrap;
}
.lower{
}
section.teamonth{
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
align-content: space-around;
}
#gallery{
margin: 50px;
padding-top: 50px;
display: flex;
text-align: center;
flex-direction: row;
width: 1000px;
margin: 5% 5%;
display: inline-flex;
}
figure{
max-width:1000px;
display:inline-flex;
flex-wrap:wrap;
align-content:center;
justify-content: center;
}
figure img{
height: 200px;
width: 300px;
align-items: center;
display: inline-flex;
}
#coffee .img{
display: flex;
flex-wrap: wrap;
justify-content: center;
max-width: 300px;
max-height: 200px;
margin: 20px;
}
.title .mid{
text-align: center;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
.main{
display: flex;
justify-content: center;
align-items: flex-end;
}
.title2 {
text-align: center;
display: flex;
justify-content: center;
align-items:
}
#lower{
font-family: Helvetica;
font-size: 22px;
color: seashell;
background-color: black;
opacity: 0.9;
width: 1000px;
margin: auto;
}
.select{
display: flex;
}