This is my first portfolio project. It is a CSS Flexbox project for Tea Cozy! It’s always challenging to tackle a new project, especially when it’s the first portfolio. Despite the difficulties I faced, I am happy with the results. Sharing my work is a great way to get feedback and grow as a developer, so I hope you give some useful comments and reviews.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex CSS - Tea Cozy</title>
<link rel="stylesheet" href="flex.css">
</head>
<body>
<header>
<div class="header">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png" alt="logo" class="logo">
</div>
<ul class="nav-list">
<li>Mission</li>
<li>Featured Tea</li>
<li>Locations</li>
</ul>
</header>
<main>
<div class="mission">
<h2>Our Mission</h2>
<h4> Handpicked, Artisanally Currated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
<div class="intro">
<h2>Tea of the Month</h2>
<h4>What's Steeping at The Tea Cozy?</h4>
<ul class="items">
<li><img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg" alt="Fall Berry Blitz Tea" title="Fall Berry Blitz Tea"><figcaption>Fall Berry Blitz Tea</figcaption></li>
<li><img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg" alt="Spiced Rum Tea" title="Spiced Rum Tea"><figcaption>Spiced Rum Tea</figcaption></li>
<li><img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg" alt="Seasonal Donuts" title="Seasonal Donuts"><figcaption>Seasonal Donuts</figcaption></li>
<li><img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg" alt="Myrtle Ave Tea" title="Myrtle Ave Tea"><figcaption>Myrtle Ave Tea</figcaption></li>
<li><img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg" alt="Bedford Bizarre Tea" title="Bedford Bizarre Tea"><figcaption>Bedford Bizarre Tea</figcaption></li>
</ul>
</div>
<div class="locations">
<h2>Locations</h2>
<ul class="location">
<li class="details-location">
<ul>
<li><h3>Downtown</h3></li>
<li>384 West 4th St</li>
<li>Suite 108</li>
<li>Portland, Maine</li>
</ul>
</li>
<li class="details-location">
<ul>
<li><h3>East Bayside</h3></li>
<li>3433 Phisherman's Avenue</li>
<li>(Northwest Corner)</li>
<li>Portland, Maine</li>
</ul>
</li>
<li class="details-location">
<ul>
<li><h3>Oakdale</h3></li>
<li>515 Crescent Avenue</li>
<li>Second Floor</li>
<li>Portland, Maine</li>
</ul>
</li>
</ul>
</div>
<div class="contact">
<h2>The Tea Cozy</h2>
<h5>[email protected]</h5>
<p>917-555-8904</p>
</div>
<footer>
<h5>copywright The Tea Cozy 2017</h5>
</footer>
</main>
</body>
</html>
* {
font-family: Helvetica, sans-serif;
color: seashell;
background-color: black;
opacity: 0.9;
text-align: center;
box-sizing: border-box;
}
h3 {
margin: 0 auto;
}
p {
font-size: 22px;
}
/* Header section */
header {
width: auto;
min-height: 69px;
border-bottom: 1px solid seashell;
text-decoration: underline;
z-index: 1;
display: inline-flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: 100%;
min-width: 280px;
}
.header {
text-align: left;
}
ul.nav-list {
display: inline-flex;
justify-content: space-between;
}
.nav-list li+li {
padding-left: 10px;
}
img.logo {
display: inline-flex;
position: relative;
height: 50px;
}
main {
position: relative;
top: 70px;
}
li {
list-style: none;
}
/* mission section */
.mission {
background-image: url(https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg);
background-size: cover;
background-position: center;
height: 700px;
min-width: 280px;
max-width: 1200px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
}
.mission h2,
.mission h4 {
margin: 0;
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
}
/* intro section*/
.intro {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 50px;
}
.items li img {
height: 200px;
min-width: 280px;
margin: 10px 10px;
}
ul.items {
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.intro h2,
.intro h4 {
margin: 10px auto;
}
/* location section*/
.locations {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 500px;
min-width: 280px;
max-width: 1200px;
background-image: url(https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg);
background-position: center;
background-size: cover;
margin-left: auto;
margin-right: auto;
}
.locations h2 {
margin-bottom: 0;
background-color: unset;
}
.location {
display: inline-flex;
flex-wrap: wrap;
background-color: unset;
justify-content: center;
margin-top: 15px;
opacity: 1;
margin-left: auto;
margin-right: auto;
padding: 0;
}
.details-location {
max-width: 300px;
margin-left: 20px;
margin-right: 20px;
display: flex;
justify-content: center;
margin-bottom: 20px;
opacity: 1;
}
.details-location ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
/* width: 300px; */
height: 300px;
padding-left: 0;
}
.details-location ul li {
width: 100%;
}
/* footer section */
footer h5 {
text-align: left;
padding-left: 20px;
padding-bottom: 20px;
}
