<!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" />
<title>Tea Cozy</title>
<link href="/style.css" rel="stylesheet" />
</head>
<body>
<header>
<img src="/imgs/img-tea-cozy-logo.png" alt="logo" class="logo" />
<nav class="navbar">
<ul class="nav_link">
<li>
<a href="#">Mission</a>
</li>
<li>
<a href="#">Featured Tea</a>
</li>
<li>
<a href="#">Locations</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="container">
<img
src="/imgs/img-mission-background.jpg"
alt="Mission"
class="Mission_img"
/>
<div class="mission">
<h2>Our Mission</h2>
<br></br>
<h4>
Handpicked, Artisanally Curated, Free Range, Sustainable, Small
Batch, Fair Trade, Orangic Tea
</h4>
</div>
</div>
<section class="featured_tea">
<div class="container_totm">
<h2>Tea of the Month</h2>
<h4>What's Steeping at Tea Cozy?</h4>
</div>
<div class="figure_container">
<figure class="1">
<img src="/imgs/img-berryblitz.jpg" alt="a cup of tea with berrys">
<figcaption>Fall Berry Blitz Tea</figcaption>
</figure>
<figure class="2">
<img src="/imgs/img-spiced-rum.jpg" alt="a box of tea with top off">
<figcaption>Spiced Rum Tea</figcaption>
</figure>
<figure class="3">
<img src="/imgs/img-donut.jpg" alt="a cup of tea next to a donut">
<figcaption>Seasonal Donuts</figcaption>
</figure>
<figure class="4">
<img src="/imgs/img-myrtle-ave.jpg" alt="cup of tea">
<figcaption>Myrtle Ave Tea</figcaption>
</figure>
<figure class="5">
<img src="/imgs/img-bedford-bizarre.jpg" alt="top view of cup of tea next to sugar">
<figcaption>Bedford Bizarre</figcaption>
</figure>
</div>
</section>
</main>
<footer></footer>
</body>
</html>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: black;
}
body {
font-family: Helvetica, sans-serif;
font-size: 22px;
color: seashell;
opacity: 0.9;
}
/* Nav Section */
header {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 30px 10%;
border-bottom: 1px solid seashell;
position: sticky;
height: 69px;
}
.logo {
margin-right: auto;
height: 50px;
margin-left: 10px;
}
.nav_link {
list-style: none;
}
.nav_link li {
display: inline-block;
padding: 0px 20px;
}
a {
text-decoration: underline;
color: seashell;
}
/* Mission Section */
.container {
display: flex;
position: relative;
text-align: center;
height: 100%;
width: 100%;
justify-content: center;
align-items: center;
}
.mission {
position: absolute;
justify-content: center;
align-items: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 1200px;
padding-top: 12px;
padding-bottom: 12px;
}
/* Tea of the Month Section */
main {
width: 100%;
}
.featured_tea {
width: 100%;
max-width: 1000px;
display: flex;
flex-direction: column;
padding-top: 50px;
justify-content: center;
align-items: center;
}
.container_totm {
display: flex;
flex-direction: column;
justify-content: space-around;
margin-bottom: 2%;
padding-bottom: 20px;
}
.container_totm h2 {
margin: 2% 0;
}
.figure_container {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
justify-content: center;
align-items: center;
}
figure {
overflow: hidden;
margin: 1%;
}
figure img {
width: 300px;
max-width: 100%;
height: 200px;
display: block;
}
figcaption {
margin-top: 3.334%;
text-align: center;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.