Hello guys,
I have just completed the project listed in the title. But I can’t help but get the feeling I just botched my way through it. I used any trick I could think of to get everything into position and looking how it should but I have no idea how to tweak the position of various flex box containers accurately or measure the amount of pixels as needed between each container.
I have included the spec-sheet for the project and my sloppy code (both html and css). I am open to all the criticism you have.
Thanks!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta lang="eng">
<meta name="description" content="Tea Cozy. Free range, fair trade and organic tea.">
<meta name="keywords" content="Tea, Cozy, Free Range, Fair Trade, Organic, Steeping, Donut">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tea Cozy</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<!---------------------------------------------------------------------------------->
<header class="header">
<div class="tealogo">
<img src="resources/images/img-tea-cozy-logo.png" alt="Tea Cozy Logo">
</div>
<div class="headerlist">
<h4>Mission</h4>
<h4>Featured Tea</h4>
<h4>Locations</h4>
</div>
</header>
<!---------------------------------------------------------------------------------->
<main>
<div class="missioncontainer">
<div class="missiontext">
<h2>Our Mission</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
</div>
<div class="teamonth">
<div class="teamonthtext">
<h2>Tea of the Month</h2>
<h4>What's Steeping at The Tea Cozy?</h4>
</div>
<div class="teamonthcontainer">
<div class="imgcontainer1"><img src="resources/images/img-berryblitz.jpg" alt="Image of Fall Berry Blitz Tea"></div>
<div class="imgcontainer2"><img src="resources/images/img-spiced-rum.jpg" alt="Image of Spiced Rum Tea"></div>
<div class="imgcontainer3"><img src="resources/images/img-donut.jpg" alt="Image of Seasonal Donut"></div>
<div class="imgcontainer4"><img src="resources/images/img-myrtle-ave.jpg" alt="Image of Myrtle Ave Tea"></div>
<div class="imgcontainer5"><img src="resources/images/img-bedford-bizarre.jpg" alt="Image of Bedford Bizarre Tea"></div>
</div>
</div>
<div class="locations">
<div class="locationstext">
<h2>Locations</h2>
</div>
<div class="locationscontainer">
<div class="downtowncontainer">
<h3>Downtown</h3>
<p>384 West 4th St</p>
<p>Suite 108</p>
<p>Portland, Maine</p>
</div>
<div class="baysidecontainer">
<h3>East Bayside</h3>
<p>3433 Phisherman's Avenue</p>
<p>(Northwest Corner)</p>
<p>Portland, Maine</p>
</div>
<div class="oakdalecontainer">
<h3>Oakdale</h3>
<p>515 Crescent Avenue</p>
<p>Second Floor</p>
<p>Portland, Maine</p>
</div>
</div>
<div class="teacozycontact">
<h2>The Tea Cozy</h2>
<h5>[email protected]</h5>
<h5>917-555-8904</h5>
</div>
</div>
</main>
<!---------------------------------------------------------------------------------->
<footer class="footer">
<div class="copyright">
<h5>copyright The Tea Cozy 2017</h5>
</div>
</footer>
<!---------------------------------------------------------------------------------->
</body>
</html>
html {
font-size: 18px;
}
* {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 22px;
color: seashell;
background-color: black;
opacity: 0.9;
text-align: center;
}
.header {
display: flex;
position: fixed;
padding-top: 9px;
padding-bottom: 9px;
background: black;
width: 100%;
height: 69px;
z-index: 2;
border-bottom: 1px solid seashell;
justify-content: space-between;
align-items: center;
margin-top: -0.35em;
}
.tealogo img {
display: flex;
position: relative;
padding-top: 9px;
padding-left: 10px;
height: 50px;
width: 167px;
}
.headerlist {
display: flex;
width: 450px;
height: 69px;
flex-flow: row;
align-items: center;
justify-content: space-between;
padding-top: 9px;
padding-right: 10px;
text-decoration: underline;
font-weight: lighter;
padding-right: 1.5rem;
}
.missioncontainer {
display: flex;
position: relative;
justify-content: center;
align-items: center;
background-image: url(resources/images/img-mission-background.jpg);
background-repeat: no-repeat;
background-position-x: center;
background-size: 1200px 700px;
height: 700px;
width: 100%;
}
.missiontext {
background: black;
display: flex;
flex-flow: column;
padding: 5px 5px;
position: absolute;
width: 1200px;
height: 140px;
align-content: center;
justify-content: space-around;
margin: 0 auto;
}
.teamonth {
display: flex;
position: relative;
flex-direction: column;
width: 100%;
height: 700px;
top: 100px;
align-items: center;
justify-content: space-evenly;
}
.teamonthtext {
background: black;
display: flex;
flex-flow: column;
padding: 5px 5px;
position: relative;
justify-content: space-around;
align-content: center;
width: 1000px;
height: 140px;
}
.teamonthcontainer {
display: flex;
position: relative;
align-content: center;
justify-content: space-evenly;
width: 1000px;
height: 600px;
}
.imgcontainer1 {
display: flex;
position: relative;
width: 200px;
height: 200px;
}
.imgcontainer1 img {
display: flex;
position: relative;
width: 200px;
height: 200px;
left: 150px;
}
.imgcontainer2 {
display: flex;
position: relative;
width: 200px;
height: 200px;
}
.imgcontainer2 img {
display: flex;
position: relative;
width: 200px;
height: 200px;
left: 200px;
}
.imgcontainer3 {
display: flex;
position: relative;
width: 200px;
height: 200px;
}
.imgcontainer3 img {
display: flex;
position: relative;
width: 200px;
height: 200px;
left: 250px;
}
.imgcontainer4 {
display: flex;
position: relative;
width: 200px;
height: 200px;
top: 300px;
right: 300px;
}
.imgcontainer4 img {
display: flex;
position: relative;
width: 200px;
height: 200px;
}
.imgcontainer5 {
display: flex;
position: relative;
width: 200px;
height: 200px;
top: 300px;
right: 250px;
}
.imgcontainer5 img {
display: flex;
position: relative;
width: 200px;
height: 200px;
}
.locations {
display: flex;
position: relative;
flex-flow: column;
justify-content: center;
align-items: center;
background-image: url(resources/images/img-locations-background.jpg);
background-position-y: 10em;
background-repeat: no-repeat;
background-position-x: center;
background-size: 1200px 800px;
height: 800px;
width: 100%;
top: 200px;
}
.locationstext {
display: flex;
position: relative;
top: 6em;
}
.locationscontainer {
display: flex;
position: relative;
flex-flow: row;
justify-content: space-evenly;
align-items: center;
height: 300px;
width: 1000px;
top: 8em;
}
.downtowncontainer {
display: flex;
flex-direction: column;
background: black;
width: 300px;
height: 300px;
align-items: center;
justify-content: space-evenly;
}
.baysidecontainer {
display: flex;
flex-direction: column;
background: black;
width: 300px;
height: 300px;
align-items: center;
justify-content: space-evenly;
}
.oakdalecontainer {
display: flex;
flex-direction: column;
background: black;
width: 300px;
height: 300px;
align-items: center;
justify-content: space-evenly;
}
.teacozycontact {
background: black;
display: flex;
flex-flow: column;
position: relative;
width: 100%;
height: 200px;
justify-content: space-between;
align-items: center;
top: 19em;
}
.footer {
display: flex;
position: relative;
height: 50px;
width: 1000px;
top: 25em;
left: 20px;
}
