The Tea Cozy Project (CSS)

Hello,
I didn’t find a forum where I could share my solution for ‘The Tea Cozy’ project so I’m uploading it here. I struggled a lot with it and it’s still not perfect so any feedback is welcome !
Also I hope my code will help others struggling there !

I include both html and CSS codes.

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Tea Cozy</title>
</head>
<link rel="stylesheet" type="text/css" href="./resources/style.CSS">
<body>


<!-- NAVIGATION -->

	<header>
		<div class="nav-container">
		  <img class= 'logo'src="./resources/images/img-tea-cozy-logo.webp">
		    <ul>
			   <li><a href="#mission">Mission</a></li>
			   <li><a href="#store">Featured Tea</a></li>
			   <li><a href="#locations">Locations</a></li>
		    </ul>
		</div>
	</header>

	<main>

<!-- MISION -->

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

	  </section>

<!-- TEA OF THE MONTH -->

		<section id="tea-month">
			<div>
				<h2 class="tea">Tea of the month</h2>
			      <h4>What's Steeping at The Tea Cozy?</h4>
			</div>

		  	<div class="tea-img">
		  	  <div>
		  		<img src="./resources/images/img-berryblitz.webp" alt="Fall Berry Blitz Tea">
		  		<figcaption>Fall Berry Blitz Tea</figcaption>
		  	  </div>
		  	  <div>
		  		<img src="./resources/images/img-spiced-rum.webp" alt="Spiced Rum Tea">
		  		<figcaption>Spiced Rum Tea</figcaption>
		  	  </div>
		  	  <div>
		  		<img src="./resources/images/img-donut.webp" alt="Seasonal Donuts">
		  		<figcaption>Seasonal Donuts</figcaption>
		  	  </div>
		  	  <div>
		  		<img src="./resources/images/img-myrtle-ave.webp" alt="Myrtle Ave Tea">
		  		<figcaption>Myrtle Ave Tea</figcaption>
		  	  </div>
		  	  <div>
		  		<img src="./resources/images/img-bedford-bizarre.webp" alt="Bedford Bizarre Tea">
		  		<figcaption>Bedford Bizarre Tea</figcaption>
		  	  </div>
		  	</div>		  	
		</section>

<!--LOCATIONS-->

		<section id="locations">
			<div class="locations-background">
				<h2>Locations</h2>	
			  	<div class="address">
				  	<h3>Downtown</h3>
				  	<p>384 West 4th St</p>
				  	<p>Suite 108</p>
				  	<p>Portland, Maine</p>
				  </div>
				  <div class="address">
				  	<h3>East Bayside</h3>
				  	<p>3433 Phisherman's Avenue</p>
				  	<p>(Northwest Corner)</p>
				  	<p>Portland, Maine</p>
				  </div>
				  <div class="address">
				  	<h3>Oakdale</h3>
				  	<p>515 Crescent Avenue</p>
				  	<p>Second Floor</p>
				  	<p>Portland, Maine</p>
				  </div>
			</div>
		</section>
    </main>

<!--FOOTER-->

	<footer>
		<div class="contact">
			<h2>The Tea Cozy</h2>
			<h5>contact@theteacozy.com</h5>
			<p>917-555-8904</p>
		</div>
		<div class="copyright">
		<p>copyright The Tea Cozy 2017</p>
	    </div>
	</footer>

</body>
</html>
body {
  background-color: black;
  font-family: Helvetica, sans-serif;
  font-size: 22px;
  color: seashell;
  text-align: center;
}


/*NAVIGATION*/

.nav-container {
  position: fixed;
  border-bottom: 1px solid seashell;
  height: 69px;
  width: 100%;
  z-index: 1;
  display: flex;
  justify-content: center;
}

.logo {
	margin-left: 10px;
	margin-top: 10px;
	height: 50px;
}

ul {
	display: flex;
  flex-grow: 1;
  justify-content: flex-end;
  list-style-type: none;

 }

ul li {
	padding: 0 15px;

}

a {
	color: seashell;
}

a:hover {
	color: black;
	background-color: seashell;
	border-radius: 40%;
	padding: 0 15px;
	text-decoration: none;
}

main {
	padding-top: 69px;
}

/*MISION*/

#mission-container {
	display: flex;
	flex-wrap: wrap;
	flex: 2 1 100%;
	align-content: center;
	justify-content: center;
}

.mission-background {
	flex-shrink: 2;
	height: 700px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	background-size: cover;
	width: 1200px;
	background-image: url(https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg);

}

.mission {
	flex: 2 1 1200px;
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: black;
	width: 1200px;
	height: 100px;
	padding: 10px;
}

#mission-container h2 {
  margin-bottom: 0;
}


/*Tea of the Month*/

.tea-img {
	width: 1000px;
	display: inline-flex;
	justify-content: center;
	flex-wrap: wrap;
}

.tea-img img {
	height: 200px;
	width: 300px;
	padding: 15px 15px 10PX 15px;
}

#tea-month h2 {
	margin-top: 69px;
}

/*Locations*/

#locations {
	display: inline-flex;
	justify-content: center;
 }

.locations-background {
	background-image: url(https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg);
	background-size: cover;
	height: 500px;
	width: 1200px;
	margin-top: 69px;
}

.locations-background h2 {
	margin-bottom: 0;
	padding-bottom: 0;
	padding-top: 50px;
}

.address {
	display: inline-flex;
	background-color: black;
	width: 300px;
	height: 300px;
	opacity: 1;
	flex-direction: column;
	margin: 15px 20px;
	flex-shrink: 3;
}

/* FOOTER */

.contact {
	height: 200px;
}

.copyright {
	text-align: left;
	padding-left: 20px;
	margin-left: 0;
}

Given that the images are all in a figure element with a figcaption, consider setting all the alternate text to empty.

 alt=""

Don’t remove the attribute, just empty it. We should not have repetition in the alternate text. Screen readers will read both and irritate the user.

1 Like

What a great tip, thank you so much, didn’t even think about it !

1 Like