Strange Flex But Okay: Tea Cozy Flexbox Project V.2

Or Alternatively: R 2 Tea 2 : This is :tea: you’re looking for.

First of all thanks especially to @adamgaffney96 who gave me some great pointers :point_right: on what would make the humble Flexbox proj. better.

This is what I would like to view as throwing the old kitchen sink :bathtub: at the flexbox proj… Or to make it current: This is my attempt at giving the humble flexbox proj. a code glow up :star:… I figured it would be a good synthesis of putting what CC taught me through the whole CSS unit. Pretty much everything herein was in the units:

  • I added a grid to display the images instead of using Flexbox. The finish is much nicer I think. Though I have a feeling once I do the Flexbox unit there is stuff in there to make it even shinier :star_struck:
  • Media Queries to make the design responsive.
  • A tiny form so that didn’t go to waste.

Things I went outside of the CC environment for :

  • Additional images I got off of the free resource site Pixabay. I searched tea :coffee: and was even able to find some of the images CC gives us: The iconic gray sleeve with jar of tea image,

  • I used the well known check box hack to figure out how to make a check box CSS based Hamburger menu. I would suggest just searching hamburger menu with CSS. Or you know take what you need here.

  • Google has a bunch of wonderful dev. tools don’t get it twisted. That’s where I got the website spoiler for my hamburger menu. But personally I didn’t find their documentation all that actionable so I went off to YouTube to get that sorted. I found this tutorial to figure out why oh why it wasn’t working one little bit.

  • I used the ol’ ascii charts for Wingdings bullets. That was my legit favorite font as a kid.

What I think I could do better in retrospect:

  1. There are few bits of repetitive code I should probably declare variables for… but it also felt like excessive to do one for margins and my little windings bullet points.

  2. I would like to make the locations more small screen friendly and I didn’t know how to style it with media queries. I didn’t know if a vertical scroll was better or just have them side-by each. Because scrolling can get annoying especially if you can just have all the information boom in your face. I don’t know what’s better experience-wise.

  3. I am interested in making this go full Ruby which is why I took up this unit in the first place because I was a little stuck in trouble shooting my past code. I think I would like to make it something like Fortnum & Mason’s site … If you look closely that’s where I got my hours of operation inspo from .

Let me know what you guys think.

4 Likes

The HTML

<head>
  <!--Head Links: Lines 3-11. Set Up of Hamburger Menu,Font, and Title.-->
  <!--Tea Cup for Hamburger Menu -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
  <!--Benne as the Main Font -->
  <link href="https://fonts.googleapis.com/css2?family=Benne&display=swap" rel="stylesheet">
  <!--Link to the CSS --> 
  <link rel="stylesheet" href="style.css" type="text/css"/>
  <!-- Title of Page: The Tea Cozy --> 
  <title> The Tea Cozy </title>  
</head>

  <!-- Header: Lines 14-37. Setting up links for navigation and small-screen Hamburger -->
  <header>
  <!--Menu Wrapper-->
    <div class="cozy">
      <nav id="menunav" class="menunav">
      <!-- Setting up Tea Cup for Hamburger Menu-->
        <label for="teacup"><span class="material-icons-outlined" id="cup-head">
    emoji_food_beverage
    </span></label>
        <input type="checkbox" id="teacup"/>
     
      <!-- Tea Cozy Logo and Navigation Links -->
        <div id="hamitems" class="navitems">
          <div class="logo">
           <img class="logo" src='https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png' alt="Our cozy logo. Written in cursive for that extra level of refinement our tea would love.">
          </div>
          <a href="#the-mission">Mission</a>
          <a href="#the-tea">Featured</a>
          <a href="#tea-time">Hours</a>
          <a href="#the-places">Locations</a>
          <a href="#holler">Contact</a>
      </div>
     
      </nav>
    </div>
  </header>

  <!--Main Section of The Cozy-->
  <main>

    <!--Link for Navigation Menu-->
      <a href="" id="the-mission"></a>
    
    <!--Mission Statement: Lines 47-54-->     
      <section class ="mission">
        <div class="goals">
          <div class="maine">
          <h2>Our Mission:</h2>
          <h4> To provide you the best selection of handpicked, artisanally curated, sustainable, small-Batch organic teas in Maine.</h4>
          <div>  
        </div>
      </section>

  <!--Link for Navigation Menu -->
    <a href="" id="the-tea"></a>
  
  <!--Tea of the Month: Lines 59-102-->
    <section class = "featured">
    
  <!--What's Steeping?:Header--> 
    <div class="steeping">
      <h2>Tea of the Month</h2>
      <h4>Join our Tea of the Month club and find out what's steeping at the Tea Cozy</h4>
    <div>
  
  <!--Featured Tea Flavors--> 
    <!--Grid Wrapper-->
    <div class="flavors">
      <!--Grid item class: tea. Grid items are the Tea Flavors-->    
      <div class="tea-a">
        <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg" alt="A steaming cup of our berry bliz tea with whole cranberries">
        <figcaption class="caption">Fall Berry Blitz Tea</figcaption>
        <h4 class="description">Fall Berry Blitz Tea. Guaranteed to keep you berry warm this fall. Blend of cranberry and raspberry flavors.</h4>
      </div>
      <div class="tea-b">
        <img src ="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg" alt="A box with loose tea scattered with it pays to buy good tea. We couldn't agree more">
        <figcaption class="caption">Spiced Rum</figcaption>
        <h4 class="description">Spiced Rum Tea. All the warming spices of rum, none of the hangover. Notes of cinnamon and clove.</h4>
      </div>
      <div class="tea-c">
        <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg" alt="Tea steeping in a white bone china cup. You don't get fancier than that.">
        <figcaption class="caption">Myrtle Ave. Tea </figcaption>
        <h4 class="description">Myrtle Ave. Tea for a minty fresh and fancy afternoon high tea delight.</h4>
      </div>
      <div class="tea-d">
        <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg" alt="A curious cup of red tea sits on a bold saucer. Don't forget a pinch of sugar.">
        <figcaption class="caption">Bedford Bizzare Tea</figcaption>
        <h4 class="description">Bedford Bizzare Tea. A mysterious blend of citrus and black tea. For the curious.</h4>
      </div>
      <div class="tea-e">
        <img src="https://cdn.pixabay.com/photo/2017/08/07/10/00/tea-2602165_960_720.jpg" alt="Our prettiest brew by far with rose with hints of apple.">
        <figcaption class="caption">Apple Orchard Rose Tea </figcaption>
        <h4 class="description">White Tea with notes of rose and apple. Share with the apple of your eyes and it will surely make your afternoon rosey.</h4>
      <div class="tea-f">
        <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg" alt="A thick donut with just the right amount of icing sugar awaits you here.Pumpkin Spice and everything nice.">
        <figcaption class="caption">Seasonal donuts. Made Fresh Daily.</figcaption>
        <h4 class="description">Sure the convention might be coffee. But nothing goes better with our tea than our seasonal donuts.</h4>
      </div>
    </div>
  </section>

<!--Link for Navigation Menu -->
<a href ="" id="tea-time"></a>

<!--Hours of Operation Info: Lines 108-123-->
  <section class= "hours">
    <div class="brew">
      <h2>Tea Time :</h2>
      <h4>Reconnect with yourself or others. Either way, we're here to serve you a good brew. Our hours of operation are standard across our 3 locations.</h4>
    </div>

<!--Opening Times-->
    <div class="hours">
      <h3>Tea-Times : </h3>
      <ul class="times">
        <li> 12pm - 6:30pm <strong>Monday-Thursday</strong></li>
        <li> <strong>Friday</strong> 11:30am - 7pm</li>
        <li> <strong>Saturday</strong> 11:30  7:30pm</li>
        <li> <strong>Sunday</strong> 11:30 - 6pm</li>
      </ul>
    </div>

<!--Link for Navigation Menu -->
 <a href ="" id="the-places"></a>

<!--Location Section: Lines 129-172--->
 <section class="places">
<!--Locations Wrapper and Header -->
  <div class="location">
    <h2><strong>Locations: </strong></h2>
 <!--Grid-->   
  <div class ="address">
    <div class ="spot">    
        <h3><strong>Downtown</strong></h3>
        <h4>384 West 4th Street</h4>
        <h4>Suite 108</h4>
        <h4> 917-555-8904 </h4>
        <h4> Portland, Maine </h4>
      </div>
    
      <div class ="spot">
        <h3><strong>East Bayside</strong></h3>
        <h4> 3433 Phisherman's Avenue</h4>
        <h4> North West Corner</h4>
        <h4> 917-555-8904 </h4>
        <h4> Portland, Maine </h4>
      </div>
    
      <div class ="spot">
        <h3><strong>Oakdale</strong></h3>
        <h4> 515 Crescent Avenue<h4>
        <h4> Second Floor</h4>
        <h4> 917-555-8904 </h4>
        <h4> Portland, Maine </h4>
      </div> 

    </div>
   </div>
    
    <!--Event Info-->
    <div class="events">
      <h4>To make a booking for a larger event at any one of our cozy locations, please call or email us.</h4>
      <ul class ="call">
        <li><h4> 917-555-8094</h4></li>
      </ul>
      <ul class ="mail">  
        <li><h4> contact@theteacozy.com</h4></li>
      </ul> 
    </div> 
</section>
    
<!--Link for Navigation Menu -->
 <a href="" id="holler"></a>

<!--Newsletter sign-up , and General Contact Information: Lines 182-204-->
 <section class="details">
  <!--Contact Section Header-->
    <div class="contact">
      <h2>Contact and Newsletter:</h2>
    </div>
  <!--Newsletter-->  
    <div class="newsletter">
      <h4>Want to know all the cozy little details? Sign up for our monthly newsletter. We'll serve you all the piping hot tea.</h4>
      <form>
        <input type="email" name="email" placeholder="thetea@theteacozy.com"/>
        <button type="submit" class="news" href="/">Sign Up</button>
      </form>
    </div>
    <!--General Contact Information-->
    <div class="info">
      <h4>Want to talk? Contact The Tea Cozy here: </h4>
      <ul class ="call">
        <li><h4> 917-555-8094</h4></li>
      </ul>
      <ul class ="mail">  
        <li><h4> contact@theteacozy.com</h4></li>
      </ul> 
    </div> 
  </section> 
</main>

<!--Copyright Information: Lines 208-213-->
<footer>
  <div class="copyright">
    <h5> &copy; Copyright The Tea Cozy 2021</h5>
  </div>     
</footer>

</body>
</html>
  

The CSS

/*Browser Reset*/
*{
  margin: 0;
  padding: 0;
}

/*Global Styles */
/*Sets up Google's Benne as the font for the Document as well as size and line height. */
html {
  font-family: "Benne","Helvetica", Arial, sans-serif;
  font-size:22px;
  line-height: normal;
}

body { 
  background-color: black;
  color:seashell;
  opacity: 0.9;
}

/*Header Styles: Lines 23-113. Class is for large screen. Id is for Hamburger Menu. Media Request:Line 70 */

/*Menu Stuck to Top */
.cozy {
  position: fixed;
  top: 0;
  z-index:3;
}

/* For Bigger Screens*/
/* Header Wrapper */
.menunav {
  width: 55.5rem;
  background: #000;
  border-bottom: 1px solid seashell;
  height: 70px;
}
/* Horizontal Menu Style */
/*Tea Cozy Logo*/
.logo {
  height:50px;
  width:8.5rem;
  margin-left: 10px;
  padding-top: 5px;
  padding-right: 5px;
}
/*Navigation Links */
.navitems {
  display:flex;
}
.navitems a {
  flex-grow: 1;
  flex-basis: 0;
  padding: 10px;
  color: #ffc200;
  text-decoration: none;
  text-align: center;
}
.navitems a:hover { 
  opacity:0.6; 
}

/* Hiding The Tea Cup */
#menunav label, #teacup {
  display: none; 
}

/* Smaller Screen Teacup Hamburger Menu*/
/*Media Request Styles */
@media screen and (max-width: 768px) {
  .menunav{
    border-bottom:none;
    background: #ffc200;
    width:5rem;
  }
  
  /*Hide Logo */
  .logo {
    display: none;
  }
   
  /* Vertical Style Menu */
  #hamitems a {
    box-sizing: border-box;
    display: block;
    width: 100%;
    border-top: 1px solid black;
    background: black;
  }
  /* Show the Tea Cup Icon */
  #menunav label { 
    display: inline-block; 
    color: black;
    background: #ffc200;
    font-style: normal;
    font-size: 1.5em;
    padding: 10px;
    height:50px;
  }
  
  #hamitems:hover{
    background:black;
  }

  /* Click to Toggle the Menu */
  #hamitems { 
    display: none; 
  }
 
  #menunav input:checked ~ #hamitems {   
    display: block; 
  }
}

/* Mission Statement Styles: Lines 114-147.Media Request: Line 133*/ 
.goals {
  height: 700px;
  width:100%;
  background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg");
  background-position: center;
  background-repeat: no-repeat;
  align-content:center;
}

.maine {
  background-color:black;
  opacity: 1;
  text-align:center;
  position: relative;
  top: 300px;
}

@media screen and (max-width:768px) {
  .mission {
    height:20rem;
    width:100%;
    background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg");
    background-position: center;
    background-repeat: no-repeat;
    align-content:center;
}
  .maine {
    width: 100%;
    background-color:black;
    text-align:center;
 }  
}

/*Tea of the Month Styles: Lines 151-232. Media Request: Line 196*/
/*Header*/
.steeping{
  margin-top:35px;
  margin-left:10px;
}
/*How the Tea Flavors are displayed.*/
.flavors {
  display: grid;
  grid-template-columns: repeat(3,350px);
  grid-template-rows: repeat(2, 350px);
  grid-gap: 60px;
  margin-top: 44px;
  justify-items: center;
  justify-content: center;
  align-items: stretch;
  align-content: center;
  grid-auto-rows: 500px;
  grid-auto-flow:  column;
}
/*Text Styles for the teas of the month: Lines 170-193*/
.caption {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.3px;
  text-align: center;
  color: #ffc200;
  padding: 4px;
}

img {
  width: 100%;
  height: 250px;
  padding:5px;
}

.description {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.29;
  letter-spacing: 0.1px;
  text-align: justify;
  color: seashell;
  padding: 10px;
}

/*Vertical Scroll for Smaller Screens */
@media screen and (max-width:768px) {
  .steeping {
    margin-top:14rem;
    margin-left:10px;
  }
  
  .flavors {
    display: grid;
    grid-template-columns: 350px;
    grid-gap: 75px;
    justify-items: center;
    justify-content: center;
    align-items: stretch;
    align-content: center;
    grid-auto-rows: 350px;
    grid-auto-flow:  row;
  }

  .caption {
   font-size: 25px;
   font-weight: 900;
   letter-spacing: 0.3px;
   text-align: center;
   color: #ffc200;
   padding: 2px;
}

 .description {
   font-size: 20px;
   font-weight: 500;
   line-height: 1.29;
   letter-spacing: 0.1px;
   text-align: justify;
   color: seashell;
   padding: 10px;
 }
}

/*Hours of Operation Styles: Lines 234- 263. Media Request: Line 260.*/
.brew{
  margin-top: 5.5rem;
  margin-left:10px;
}

.hours h3{
  margin-top:25px;
  margin-left:10px;
}

.times {
    list-style:none;
    margin-left:35px;
  }
/*Underlines the Bolded Text*/
.times strong{
  text-decoration: underline;
}
/*Makes the heart-shaped leaf Bullet*/ 
.times li::before {
  content:"\2767";
  font-size:20px;
  }

@media screen and (max-width:768px) {
    .brew{
      margin-top:25.5rem;
    }
  }

/*Location Styles: Lines 268-339. */
/*Location Wrapper*/
.location {
  margin-top:35px;
  height:650px;
  width: 100%;
  background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size:cover;
}
/*Location Header*/
.location h2 {
  color: black;
  padding:3.5rem;
  font-size: 2rem;
  text-align:center;
  position: center;
}
/*The adress squares styles: Lines 286-312.*/
.address{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap:10px;
  justify-items: center;
  justify-content: center;
  align-items: stretch;
  align-content: center;
}

.spot{
  background-color:black;
  width:9.5rem;
  height:auto;
  padding: 4px;
}

.spot h3{
  padding: 6px;
  text-align:center;
}

.spot h4{
  padding:3px;
  text-align:center;
  line-height:32px;
}
/*Event Subsection Styles*/
.events {
  padding-top: 25px;
  margin-left: 20px;
}

/*Makes the Phone Bullet*/
.call {
  list-style:none;
  margin-left:35px;
}

.call li ::before {
  content:"\260e";
  font-size: 20px;  
}

/*Makes the Envelope Bullet*/
.mail {
  list-style:none;
  margin-left:35px;
}

.mail li ::before {
  content:"\1F582";
  font-size: 20px;   
}

/*Contact and Newsletter Section: Lines 342-424*/
/*Contact Info Header*/
.contact{
  padding-top:45px;
  margin-left:10px;
}

/*Newsletter Styles and Form Styles*/
/*Newletter Header*/
.newsletter{
  padding-top: 5px;
  margin-left:10px;
}

/*Newsletter Email Form Styles. Lines: 355-387*/
/*Text Box Styles. Lines:356-373*/
input { 
  padding: 4px;
  margin: 5px;
  outline: none;
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #666;
  line-height: 22px;
  margin-bottom: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
  }
 
input:hover{
   border: 1px solid transparent;
   box-shadow: 0 0 8px 0  #ffc200;
   color: #ffc200;
} 
/*Submit Button Styles. Lines:375-394*/
 button {
   width: 150px;
   border: none;
   border-radius: 5px; 
   background:  #ffc200;
   font-family: "Benne", Arial;
   font-size: 20px;
   color: seashell;
   cursor: pointer;
}

 button:hover {
  background:  #ffa500;
}

.info {
  padding-top: 20px;
  margin-left: 10px
}

/*Contact Information Subsection Styles: Lines 398-424*/
/*Makes the Phone Bullet*/
.call {
  list-style:none;
  margin-left:35px;
}

.call li ::before {
  content:"\260e";
  font-size: 20px;  
}

/*Makes the Envelope Bullet*/
.mail {
  list-style:none;
  margin-left:35px;
}

.mail li ::before {
  content:"\1F582";
  font-size: 20px;   
}

/*Footer Styles: Lines */
.copyright{
margin-top:20px;
padding:5px;
float: right;
}

What it looks like rendered:

Full Size

Hamburger Menu

Some Responsiveness

Oh and p.s That’s another thing I was curious about … How big to make the hamburger menu. IDK. :upside_down_face:

Looks great and kudos on the extras! Is there a link to the actual site? Sorry if I’m missing it, good stuff either way!

1 Like

That would be a very strong point :muscle: I didn’t deploy it anywhere other than here. That might be a good solid next step. My goal was to just code it better than my first round. I guess deploying to my GitHub might be a good other implementation step.

Wow! Looks great! Nice improvements!

1 Like

Oh :partying_face: thanks this is literally the first thing I’m reading today so you made my day thanks !!

1 Like