Tea Cozy Project

Hi everyone!
My name is Martin and I have been learning Web Dev for a few months already, so far I have made it till the Tea Cozy proyect.

To the moderator, sorry I couldn’t find the “tea cozy” project tag.

I have been struggling for a while with this project and I want to share my solution with you.

I feel like I have written a lot of unnesesary code and probably could have done it in a much more simple way, if anyone has some time to take a look at it and give me some notes it will be very apreciated.

I tried to make it responsive and good looking in diferent bowser sizes, check it out.

Some comments / doubts about the project:

  1. I have noticed other people nesting the anchors at the nav in a

      why is this?

    • I tried to use proper semantic on the html but then I used a lot of IDs to target elements on the CSS, instead should I have used “class” to target them?

    • How can I override the opacity 0.9 on the “locations” section for every container in it?

    • When I click on one of the nav links, some times the header steps on the content of the secction. I had to add some padding at the top of each seccion to solve this but then it started to look odd while scrolling, is there any other way to solve this?
      (I also used hard coded units (px) to set the padding height at the top because while using relative units in % the padding started to shrink with the screen width, then I had the same problem again. Any suggestion about this?)

    • Is there any other way to keep the footer visible at the bottom than adding a padding-bottom to the main seccion with the height of the footer?

Thank you for your time,
here is the code:

HTML:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link href="./style.css" type="text/css" rel="stylesheet">

    <title>Tea Cozy</title>

</head>

<body>

    <header>

        <img src='https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-tea-cozy-logo.png' alt="Tea cozy logo">

        <nav>

            <a href="#mission">Mission</a>

            <a href="#featured_tea">Featured Tea</a>

            <a href="#locations">Locations</a>

        </nav>

    </header>

    <main>

        <!---Mission section-->

        <section id="mission">

            <h2>Our mission</h2>

            <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>

        </section>

        <!---Featured tea section-->

        <section id="featured_tea">

            <div class="container-head">

                <h2>Tea of the Month</h2>

                <h4>What's Stepping at The Tea Cozy?</h4>

            </div>

            <div class="figure-container">

                <figure id="1">

                    <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-berryblitz.jpg" alt="A cup of tea with berrys in it.">

                    <figcaption>Fall Berry Blitz Tea</figcaption>

                </figure>

                <figure id="2">

                    <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-spiced-rum.jpg" alt="A box of spiced rum tea which says 'It pays to buy good tea'.">

                    <figcaption>Spiced Rum Tea</figcaption>

                </figure>

                <figure id="3">

                    <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-donut.jpg" alt="A donut with sugar on it.">

                    <figcaption>Seasonal Donuts</figcaption>

                </figure>

                <figure id="4">

                    <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-myrtle-ave.jpg" alt="A cup of myrtle tea viewed fom above">

                    <figcaption>Myrtle Ave Tea</figcaption>

                </figure>

                <figure id="5">

                    <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-bedford-bizarre.jpg" alt="A cup of tea with a pot of sugar at its left">

                    <figcaption>Bedford Bizzarre Tea</figcaption>

              </figure>

            </div>

        </section>

        <!---Locations section-->

        <section id="locations">

            <div class="locations-title">

                <h2>Locations</h2>

            </div>

            <div class="locations-container">

                <div class="adress" id="downtown">

                    <h3>Downtown</h3>

                    <p>384 West 4th St</p>

                    <p>Suite 108</p>

                    <p>Portland, Maine</p>

                </div>

                <div class="adress" id="east_bayside">

                    <h3>East Bayside</h3>

                    <p>3433 Phisherman's Avenue</p> 

                    <p>(Norwest Corner)</p>

                    <p>Portland, Maine</p>

                </div>

                <div class="adress" id="oakdale">

                    <h3>Oakdale</h3>

                    <p>515 Crescent Avenue</p>

                    <p>Second Floor</p>

                    <p>Portland, Maine</p>

                </div>

            </div>

        </section>

        <!---Contact info-->

        <section id="contact">

            <h2>The Tea Cozy</h2>

            <h5>[email protected]</h5>

            <h5>917-555-8904</h5>

        </section>

    </main>

    <footer>

        <p>&copy; The Tea Cozy 2017</p>

    </footer>

</body>

</html>

CSS:

* {
    font-family: Helvetica;
    color: seashell;
    background-color: black;   
    opacity: 0.9;
    text-align: center;

    /*reset of browser's default values*/
    margin: 0;
    padding: 0;
}

html {
    font-size: 22px;
}

/* header section */

header {
    width: 100%;
    height: 69px;
    border-bottom: 1px solid seashell;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    z-index: 1;
    opacity: 1;
}

header a { 
    margin: 10px;
}

header img {
    height: 50px;
    margin-left: 10px;
}

/*main content*/

main {
    position: relative;
    top: 70px;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 66px;
}

/*mission section*/

#mission {
    width: 90%;
    max-height: 700px;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    flex: 1 1200px;
    background-image: url("https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-mission-background.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#mission h2,
#mission h4 {
    width: 100%;
    padding: 0.5%;
}

/*Featured tea section*/

#featured_tea {
    width: 75%;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    padding-top: 70px;
}

.container-head {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 2%;    
}

.container-head h2 {
    margin: 2% 0;
}

.figure-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: center;
}

figure {
    width: 300px;
    height: 67%;
    overflow: hidden;
    margin: 1%;
}

figure img {
    max-width: 100%;
    height: auto;
    display: block;
}

figcaption {
    margin-top: 3.334%;
}

/*locations section*/

#locations {
    width: 90%;
    max-height: 500px;
    max-width: 1200px;
    padding-top: 5%;
    margin-top: 5%;
    display: flex;
    flex-flow: column;
    justify-content: left;
    align-items: center;
    flex: 1 1200px;
    background-image: url("https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-locations-background.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.locations-title {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: transparent;
}

.locations-title h2 {
    background-color: transparent;
}

.locations-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
    background-color: transparent;
    flex-wrap: wrap;
    opacity: 1; 
}

.adress{
    margin: 20px;
    display: flex;
    flex-basis: 300px;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    opacity: 1;       
}

.adress h3 {
    padding: 5% 0;
    width: 100%;
}

.adress p {
    padding: 7.5% 0;
    width: 100%;
}

/*contact info section*/

#contact {
    height: 200px;
    margin: 0 auto;
    width: 75%;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
}

#contact h2 {
    margin: 1% auto;
}

#contact h5 {
    margin: 2.9% auto;
}

/*footer*/

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

@media only screen and (max-width:1133px) {

    /*makes locations section higher*/
    #locations {
        max-height: 700px;
        padding-top: 70px;
    }
}

@media only screen and (max-width:755px) {

    main {
        top: 107px;
    }

    /*aligns header in columns*/
    header {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
    }

    nav {
        display: flex;
        flex-direction: row;
    }

    header img {
        height: 50px;
        margin-top: 10px;
    }

    #mission {
        width: 90%;
        max-height: 500px;
    }

    #featured_tea {
        width: 100%;
        padding-top: 14.17%;
    }

    #locations {
        width: 90%;
        padding-top: 14.17%;
        max-height: 1000px;
    }

    #contact {
        height: 150px;
    }

    footer {
        position: relative;
        top: 40px;
    }
}

@media only screen and (max-width:425px) {
    main {
        top: 47px;
        padding-bottom: 0;
    }
    /*removes headers logo*/
    header img {
        display: none;
    }

    #mission {
        width: 95%;
    }

    #mission h4 {
        font-size: 0.85rem;
    }

    #featured_tea {
        padding-top: 46px;
    }

    #featured_tea h4 {
        font-size: 0.95rem;
    }

    figure {
        width: 95%;
        margin: none;
    }

    #locations {
        width: 95%;
        max-height: 900px;
        background-position: right;
    }

    .adress p {
        padding: 5% 0;
    }

    footer {
        padding: 3%;
    }

    footer p {
        font-size: 0.9rem;
    }
}

@media only screen and (max-width:320px) {

    main {
        top: 109px;
    }

    nav {
        flex-direction: column;
    }
    
    header a{
        margin: 5px;
    }

    #featured_tea {
        padding-top: 110px;
    }

    #locations {
        margin-top: 55px;
        padding-top: 55px;
    }

    #locations h2 {
        padding-bottom: 20px;
    }

    #contact h2 {
        padding-top: 20px;
    }

    footer {
        top: 109px;
    }
}
9 Likes

I’ve also been surprised at how difficult this project was as well. Not sure I can answer any of your questions but interested to see other people’s solutions so thanks for sharing!

1 Like

Currently on this guy too!! I am in a struggle with the featured tea section with weird wraps and what not I know I’m close to solving it. But trying to answer these questions lets see:

  1. Sorry I don’t quite get your wording do you mean inside the Nav people are using li with nested links? Is that what you mean? I just looked at other websites and I noticed it was a convention and I figured well these folks are getting paid (hopefully) to do this so I’m just going to copy the convention. I also need to read back and figure out how to set up the nav. menu to refer to parts of the site. I think that might be also partially what you’re asking??

  2. I’ve been making sections and using class on the section with dividers around the other elements

{html} but I added spaces because codebytes doesn’t support it /and to show you what I mean:

< section class=“featured”>
< div class= “tea”>
< p>whatevs< /p>
< /div>
< /section>

css:
. featured {
}
.tea {
}
.tea p {
}

that way I can make my css shorter and more readable…

  1. you should be able to override by just setting the opacity to whatever you want or if you want more control remove it from your global styles at the beginning?? Yeah I know its not the red line brief but I’m not strictly following it either. Like the Nav styles I implemented don’t have the underline cause most links now don’t look like that…They sort of just look cool and floaty. I also nixed the one px the border. I added a different google font ect… I’m making this project my own

  2. My guess is you probably shouldn’t have to hard code the px… I know it whomps but you might have to fiddle with the css or reorg the html to get it to working the way you want.

  3. I’m not sure what you mean but if you want to make the footer visible maybe remove it from the flow of the document with fixed ?? I’m not sure what you mean. The footer should just be there hanging out so long as you set it up in your html. I’ve noticed it just contains the copyright in most. I added the contact section there. I might change that but sorry I can’t give you a better answer than that.

Not sure I was helpful. But I know writing through these things you can figure out stuff. I’ll post mine when it’s done which will at least maybe make my thoughts clearer than just plain ol’ English.

Also couldn’t find “tea cozy” tag for this project on forum. I want to share my solution for this. Actually don’t know how bad is it, but still want to share.

1 Like

Hi everyone. Not so easy project for me. Can somebody check if it is correct way to solve this project?

1 Like

Hi Everyone,
It was quite hard for me too.
I worked around 5 days in raw, a total of 25 hours for this website.
Im quite afraid, because, its a simple website. I was interesting just in developing the desing as similar as the redline as posible.
The github link is GitHub - ismaponto/cozyTea

I would loveif anyone can tell me about the structure in the html and the css, if you think if it is too hard to read!
I am into doing it back for someone more!
Thanks everyone!
Gretings.

1 Like

Hi, I am publishing here the result of my learning experience. I’d love to get feed back. Also. Thanks to all contributors, I learned a lot reading comments from here, watching youtube and other web pages…

https://cipriancm.github.io/CAstudy-teacozy/

1 Like

This was very difficult for me too but have come up with this. The only issue I can see is that the background image doesn’t look the same as the spec sheet. Also in the location section, the boxes don’t flex when decreasing the size of the browser. Everything else seems fine!

HTML:

<!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 rel="stylesheet" href="style.css" type="text/css"/>
    </head>
    <header>
    <img class="logo" src="images/img-tea-cozy-logo.webp" alt="logo">
        <nav>
            <ul class="nav-links">
                <li class=""><a href="#">Mission</a></li>
                <li class=""><a href="#">Featured Tea</a></li>
                <li class=""><a href="#">Locations</a></li>
            </ul>
        </nav>
    </header>
    <body>
        <div class="container" id="mission">
            <div class=mission-wrapper>
                <h2>Our Mission</h2>
                <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
            </div>
        </div>
        <section class="container" id="totm">
            <div class="gallery-wrapper">
            <h2>Tea of the Month</h2>
            <h4>What's Steeping at the Tea Cozy?</h4>
                <div class="img-gallery">
                    <div class="img-item">
                        <img src="images/img-berryblitz.webp" alt="">
                        <h4>Fall Berry Blitz Tea</h4>
                    </div>
                    <div class="img-item">
                        <img src="images/img-spiced-rum.webp" alt="">
                        <h4>Spiced Rum Tea</h4>
                    </div>
                    <div class="img-item">
                        <img src="images/img-donut.webp" alt="">
                        <h4>Seasonal Donuts</h4>
                    </div>
                    <div class="img-item">
                        <img src="images/img-myrtle-ave.webp" alt="">
                        <h4>Myrtle Ave Tea</h4>
                    </div>
                    <div class="img-item"><img src="images/img-bedford-bizarre.webp" alt="">
                        <h4>Bedford Bizarre Tea</h4>
                    </div>
                </div>
            </div>
        </section>
        <section class="container" id="location">
            <div class="location-wrapper">
                <h2>Locations</h2>
                <div class=wrapper-box>
                    <div class=container-box>
                        <h3>Downtown</h3>
                        <h5>384 West 4th Street</h5>
                        <h5>Suite 108</h5>
                        <h5>Portland, Maine</h5>
                    </div>
                    <div class=container-box>
                        <h3>East Bayside</h3>
                        <h5>3433 Phisherman's Avenue</h5>
                        <h5>Northwest Corner</h5>
                        <h5>Portland, Maine</h5>
                    </div>
                    <div class=container-box>
                        <h3>Oakdale</h3>
                        <h5>515 Crescent Avenue</h5>
                        <h5>Second Floor</h5>
                        <h5>Portland, Maine</h5>
                    </div>
                </div>
            </div>
        </section>
        <section class="container" id="contact">
            <div class="contact-wrapper">
                <h2>The Tea Cozy</h2>
                <h5>[email protected]</h5>
                <h5>917-555-8904</h5>
            </div>
        </section>
        <footer>
            <h5>copyright the tea cozy 2017</h5>
        </footer>
    </body>
</html>

CSS:

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    background-color: black;
    font-family: Helvetica, sans-serif;
    font-size: 22px;
    opacity: .9;
    color:seashell;
}

a {
    color:seashell;
}

h2 {
    text-align: center;
    font-size: 32px;
}

h3 {
    font-size: 26px;
    text-align: center;
}

h4 {
    text-align: center;
}

h5 {
    font-size: 20px;
    text-align: center;
}

header {
    display: flex;
    border-bottom: 1px solid seashell;
    height: 69px;
    justify-content: space-between;
    align-items: center;
    
}

.logo {
    height: 50px;
    width: auto;
    margin-left: 10px;
}
    
.nav-links  {
    list-style: none;
    display: inline-flex;
}

li {
    padding: 0px 15px;
}

.container  {
    margin: auto;
}

#mission {
    height: 700px;
    width: 1200px;
    background-image: url("images/img-mission-background.webp");
    display: flex;
    align-items: center;
    margin-bottom: 80px;
}

.mission-wrapper h2, .mission-wrapper h4 {
    padding: 0.6rem;
}

.mission-wrapper {
    width: 100%;
    background-color: black;
}

#totm {
    max-width: 1000px;
    height: auto;
    margin-bottom: 80px;

}

.img-gallery {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
}

.gallery-wrapper h2, .gallery-wrapper h4{
    padding-bottom: 1rem;
}

.img-item img {
    width: 300px;
    height: 200px;
    margin: 10px;
}

#location {
    height: 500px;
    width: 1200px;
    background-position: center;
    background-image: url("images/img-locations-background.webp");
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}

.location-wrapper h2 {
    padding-bottom: 15px;
}

.location-wrapper h5 {
    font-weight: 400;
}

.wrapper-box {
    display: flex;
    justify-content: space-between;
}

.container-box {
    margin: auto;
    max-width: 1050px;
    background-color: black;
    opacity: 1;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-around;
    width: 300px;
    height: 300px;
    padding: 10px;
    margin: 20px;
}

.contact-wrapper {
    height: 200px;
}

#contact {
    margin-bottom: 30px;
}

#contact h2 {
    margin-top: 12px;
}

#contact h5 {
    font-size: 18px;
    padding-top: 40px;
}

footer h5 {
    padding-left: 20px;
    padding-bottom: 50px;
    text-align: left;
}
2 Likes

Check out my solution live: https://ahman502.github.io/The-Tea-Cozy/
or check out my GitHub (https://github.com/ahman502/The-Tea-Cozy) for the source code. Hope you guys like it! :slight_smile:

5 Likes

I found breaking the tea cozy down into sections made it a lot easier for me. As an example starting at the top Logo/Nav Section:

HTML for Navbar:

<!--navbar/logo -->
<nav class="navbar">
    <div class="container nav-container">
        <img src="img-tea-cozy-logo.webp" alt="tea cozy logo" id="logo">
        <div id="nav-link-container">
            <a href="#" class="nav-link">Mission</a>
            <a href="#" class="nav-link">Featured Tea</a>
            <a href="#" class="nav-link">Locations</a>
        </div>
    </div>
</nav>

CSS For Navbar

/* navbar/logo */
nav {
    border-bottom: 1px solid seashell;
    height: 69px;
    position:sticky;
    top: 0;
    background-color: black;
    opacity: 75%
} 

.nav-container {
    justify-content: space-between;
    align-items: center;
}


#nav-link-container {
    display: flex;
    justify-content: space-between;
    align-content: center;
    margin-top: 10px;
}

#logo {
    height: 50px;
    width: auto;
    margin-left: 10px;
    margin-top: 10px;
}

.nav-link {
    margin-right: 15px;
    color: seashell;
    padding: 5px;
    
}

.nav-link:hover {
    color: white;
    text-decoration: underline overline;
}

I worked through each section in this manner making it easier to visualize what I wanted to create for each section to replicate the template. Here is the link to the finish project:
Tea Cozy

and my code

I would like to work on making it more responsive but I will have to change the containers that have a fixed size.

3 Likes

Well done to you @kennyx0r

It would be nice to see the actual website along with the html and css code files.

Link to The Tea Cozy website (first attempt):

https://c-o-d-e.github.io/tea-cozy/

Link to the code:

I would really appreciate a review of my attempt. I tried my best to stick to the project specification as mentioned in the project brief/redline. I used flexbox heavily wherever possible and I haven’t yet accounted for tablet and mobile device. I might come back to this project after learning media queries and JavaScript DOM to manipulate the site.

Fee free to ask me for your code reviews.

5 Likes

great solution, just one small point: the locations flex items get “squished” as the page gets smaller. This could be fixed with flex-wrap and some adjustments to how these are displayed relative to the title.

1 Like

Live site: Tea Cozy

Code: GitHub - evansendra/tea-cozy-cc

5 Likes

Thanks so much for taking your precious time out to provide some feedback. I will update the locations items in due time. You have a good transition from a desktop to mobile screen so well done to you. Perhaps, you could a teeny weeny margin to the left of the footer and it would look even better. All the best with the rest of the module.

Thank you too! I agree the footer needs some breathing room :slight_smile: Best of luck

Perhaps this helps a little bit. This is a flexbox task, so, you should be able to accomplish everything with flexbox.

It kinda requires visual thinking. You need to look at the design spec and really visualize how those elements might be organized as boxes and how they might be nested and aligned. Spend more time thinking, don’t try to start coding right away.

Navigation
Choose the correct alignment along the main axis - the one where with two elements these elements would be as far as possible from each other.

Mission
Centering should be easy. Just need to make sure that the mission text occupies the entire width of the parent container.

Gallery
You actually don’t need to put the headings inside the flexbox. They can be outside but still inside the parent container that has also the background image. I’m actually not sure why this works, but it does.

Locations
This is pretty difficult to figure out. Until you remember that you can organize flex items both into rows and columns. And you can nest one inside the other.

5 Likes

Hi Everyone,
Just finished up the Tea Cozy project and wondered if anyone could please check it out for me and let me know what I could fix to make it better.
Thanks a mil

1 Like

Wow you are all amazing! This took me a good few days to complete and was a big challenge. I still have some issues with my solution if anyone has any suggestions- thank you!!

my solution: GitHub - marthaeason/Tea-Cozy: Tea Cozy CodeAcademy challenge
Live: Tea Cozy

My biggest issue:
I really want the text of the hero to wrap! Any ideas on how I can accomplish this?

html:

 <div class="hero container">
      <div class="hero-child">
        <div>
          <h2>Our Mission</h2>
          <h4>
            Handpicked, Artisanally Curated, Free Range, Sustainable, Small
            Batch, Fair Traid, Organic Tea
          </h4>
        </div>
      </div>
    </div>

CSS

/*  HERO  */

.hero {
  background-image: url("images/img-mission-background.webp");
  background-size: cover;
  min-width: 1350px;
  min-height: 700px;
  display: flex;
  align-items: center;
  margin-top: 69px;
  flex-wrap: wrap;
}

.hero-child {
  background-color: black;
  min-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
}

Thank you all amazing front in Devers!

2 Likes

Hello! Here is my solution to the Tea Cozy project!

:tada: Link to Live Site

:sparkles: Link to GitHub Repo

Feedback is most welcome; I think my main issue is that I don’t know what I don’t know - I’m sure my code is littered with things that don’t need to be there and could just generally be more concise?

Thanks!

A couple changes to your .hero and .hero-child should do the trick. I tested it out in codepen and it looks like it worked out.

.hero {
  background: no-repeat url("https://raw.githubusercontent.com/marthaeason/Tea-Cozy/main/images/img-mission-background.webp");
  background-color: black;
  background-position: center;
  width: 100%;
  min-height: 700px;
  display: flex;
  align-content: center;
  justify-content: center;
  margin-top: 69px;
  flex-wrap: wrap;
}

.hero-child {
  background-color: black;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
}
1 Like