Tea Cozy Project

Oh dear, I have not done so well with this project. It still needs work :frowning: I have to say I’ve found this whole flexbox idea quite difficult to grasp - is it just me?!!

Here is my finished project: TeaCozy

Here is the code on github: GitHub - NicolaHearn/teaCozy: Codecademy Tea Cozy Project

and I’m also pasting the html and css below:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="Style.css" />
    
    <title>TeaCozy</title>
</head>
<body>

    <header>
        <img src="img-tea-cozy-logo.webp" height="50px" />
        <nav>
            <ul>
                <a href="#mission"><li>Mission</li></a>
                <a href="#teaOfMonth"><li>Featured Tea</li></a>
                <a href="#locations"><li>Locations</li></a>
            </ul>
        </nav>
    </header>

    <section id="mission">
        <div id="banner">
            <h2>Our Mission</h2>
            
            <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
        </div>
    </section>
    <br />
    <br />

    <section id="teaOfMonth">
        <h2>Tea of the Month</h2>
        <h4>What's Steeping at The Tea Cozy?</h4>
        <div class="imageContainer">
            <figure>
                <img src="img-berryblitz.webp" height="200" width="300" />
                <figcaption><h4>Fall Berry Blitz Tea</h4></figcaption>
            </figure>
            <figure>
                <img src="img-spiced-rum.webp" height="200" width="300" />
                <figcaption><h4>Spiced Rum Tea</h4></figcaption>
            </figure>
            <figure>
                <img src="img-donut.webp" height="200" width="300" />
                <figcaption><h4>Seasonal Donuts</h4></figcaption>
            </figure>
            <figure>
                <img src="img-donut.webp" height="200" width="300" />
                <figcaption><h4>Myrtle Ave Tea</h4></figcaption>
            </figure>
            <figure>
                <img src="img-bedford-bizarre.webp" height="200" width="300" />
                <figcaption><h4>Bedford Bizarre Tea</h4></figcaption>
            </figure>
        </div>
    </section>

    <br />
 
    <section id="locations">
        <h2>Locations</h2>
        <div class="container">
            <div class="locblock">
            <h3>Downtown</h3>
                <p>384 West 4th St</p> 
                <p>Suite 108</p> 
                <p>Portland, Maine</p>
            </div>
            <div class="locblock">
                <h3>East Bayside</h3>
                <p>3433 Phisherman's Avenue</p>
                <p>(Northwest Corner)</p>
                <p>Portland, Maine</p>

            </div>
            <div class="locblock">
                <h3>Oakdale</h3>
                <p>515 Crescent Avenue</p>
                <p>Second Floor</p>
                <p>Portland, Maine</p>
            </div>
         </div>
    </section>
    <br />

    <section id="contact">
        <h2>The Tea Cozy</h2>
        <h5>contact@theteacozy.com</h5>
        <h5>917-555-8904</h5>
    </section>
 
    
    <footer>
     <h4>copyright The Tea Cozy 2017</h4>
 </footer>
    
</body>
</html>

body {
	background-color: black;
	font-family: Helvetica, sans-serif;
	font-size: 22px;
	color: seashell;
	opacity: 0.9;
	text-align: center;
	justify-items: center;
	
}

header {
	height: 69px;
	width:100%;
	border-bottom: 1px solid seashell;
	text-align: left;
	align-items: bottom;
	margin-bottom: 0px
	
	
}

header nav {
	display: flex;
	float: right;
	text-flow: row-reverse;
	align-items: bottom;
	padding-top: 10px;
}

nav ul li {
	display: flex;
	float: right;
	list-style-type: none;
	margin: 0px 10px;
	color: seashell;
	text-decoration: underline;
	flex-flow: row-reverse;
}

header img {
	padding: 10px;
}

#mission {
	display: flex;
	background-image: url("img-mission-background.webp");
	min-width: 1200px;
	height: 700px;
	background-repeat: no-repeat;
	justify-content: center;
	margin: 0px 70px;
	align-items: center;
}

#banner {
	background-color: black;
	height: 140px;
	width: 100%;
	align-items: center;
}

#teaOfMonth {
	text-align: center;
	justify-content: center;
	margin: 0px 70px;
}
.imageContainer {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;

}
figure {
	margin: 15px;
	justify-content: center;
}


#locations {
	
	background-image: url("img-locations-background.webp");
	background-repeat: no-repeat;
	height: 500px;
	justify-content: center;
	margin: 0px 70px;
	padding-top: 50px;
	
}
.container {
	display: inline-flex;
}

.locblock {
	display:flex;
	flex-flow: column wrap;
	width: 300px;
	height: 300px;
	margin: 15px 20px;
	justify-content: center;
	background-color: black;
	align-items: center;
	font-weight: bold;
	
}
#contact {
	display: flex;
	flex-direction: column;
	max-width: 1000px;
	margin: 0 auto;
	width: 75%;
	height: 200px;
	justify-content: center;

}

footer {
	padding:20px;
	display: flex;
	justify-content: left;

}
1 Like