Tea Cozy Project - Feedback Welcome

Projects Off-platform Practice Projects
1

Hello everyone!
I finished the Tea Cozy project.
I’m putting it here for review (let me know anything I can improve) or as a reference (maybe to help someone get unstuck).
Feedback is very welcome! Have a nice day :slightly_smiling_face:

The project’s specs page:

1600×2854 290 KB

My GitHub Repository:

Live on GitHub Pages:
https://napetico.github.io/the-cozy-tea/

1 Like
2

Fantastic work! Very impressive!

1 Like
3

Nicely done! 2 things I recommend are change the section class to section id and add them to your hrefs. section class= “locations” will be section id= “locations”. Add them to href, class=“nav-link” href=“#locations”>Locations and you’ll be able to jump to that section.

1 Like
4

Hi kyle_heller!
Thanks for the nice words. I truly appreciate it :blush:
Have a great weekend!

5

Ooh! Excellent recommendation css0451344397 :blush:
That will greatly improve the site. It didn’t cross my mind.
Thanks a lot for the input :pray:t3:
Have a great week!

1 Like
6

Hey everyone! I had to take a 6 week hiatus from this course and just completed (picking up from locations to finish). Please review *the main thing I would like help with would be the location boxes - I was hoping margin-left would solve but to no avail.

(HTML)

The Tea Cozy 
<!--Header-->

<div class="header">

    <div class="logo">
        <img src="./Resources/Images/Logo.png">
    </div>

    <div class="nav">
        <ul>
            <li><a href="#mission">Mission</a></li>
            <li><a href="#featured">Featured</a></li>
            <li><a href="#locations">Locations</a></li>
        </ul>
    </div>

</div>

<!--Mission-->

<div class="mission">

    <div class="bg-img">

    </div>

    <div class="banner">
        <h2>Our Mission</h2>
        <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
    </div>

</div>

<!--Featured-->

<div class="featured">

    <div class="heading">
        <h2>Tea of the Month</h2>
        <h4>What's Steeping at The Tea Cozy?</h4>
    </div>

</div>

<div class="container">
 
    <div class="berry-blitz box img">
      <figure>
        <img src="./Resources/Images/Berry Blitz.jpg">
        <figcaption>Fall Berry Blitz</figcaption>
      </figure>
    </div>
  
    <div class="spiced-rum box img">
        <figure>
            <img src="./Resources/Images/Spiced Rum.jpg">
            <figcaption>Spiced Rum Tea</figcaption>
          </figure>
    </div>
  
    <div class="donut box img">
        <figure>
            <img src="./Resources/Images/Donut.jpg">
            <figcaption>Seasonal Donuts</figcaption>
          </figure>
    </div>
  
    <div class="myrtle-ave box img">
        <figure>
            <img src="./Resources/Images/Myrtle Ave.jpg">
            <figcaption>Myrtle Ave Tea</figcaption>
          </figure>
    </div>
  
    <div class="bedford-bizarre box img">
        <figure>
            <img src="./Resources/Images/Bedford Bizarre.jpg">
            <figcaption>Bedford Bizarre Tea</figcaption>
          </figure>
    </div>
  
  </div>

  <!--Locations-->

  <div class="locations">

    <h2>Locations</h2>

    <div class="locations-boxes">

        <div class="downtown">
            <ul>
                <li>Downtown</li>
                <li>384 West 1st St</li>
                <li>Suite 108</li>
                <li>Portland, Maine</li>
            </ul>
        </div>

        <div class="bayside">
            <ul>
                <li>East Bayside</li>
                <li>3433 Phishermann's Avenue</li>
                <li>(Northwest Corner)</li>
                <li>Portland, Maine</li>
            </ul>
        </div>

        <div class="oakdale">
        <ul>
            <li>Oakdale</li>
            <li>515 Crescent Avenue</li>
            <li>Second Floor</li>
            <li>Portland, Maine</li>
        </ul>
    </div>
    
  </div>

  <div class="base">
  <h2>The Tea Cozy</h2>
  <h5>[email protected]</h5>
  <h5>917-555-8904</h5>
  </div>

<footer>
    <h5>&copy The Tea Cozy 2017</h5>
</footer>

(CSS)

  • {
    box-sizing: border-box;
    }

html {
font-family: ‘Helvetica’;
font-size: 22px;
color: seashell;
background-color: black;
opacity: 0.9;
text-align: center;
}

.header {
height: 69px;
width: 100%;
border-bottom: 1px solid seashell;
position: fixed;
z-index: 20;
display: flex;
justify-content: space-between;
background-color: black;
}

.logo {
height: 50px;
margin-left: 10px;
display: inline-flex;
}

.nav li {
display: inline-flex;
padding: 0 15px;
}

.nav li a {
color: seashell;
}

.mission {
background-image: url(“…/Images/Background.jpg”);
background-position: center;
background-repeat: no-repeat;
height: 700px;
position: relative;
top: 70px;
margin: 0 auto;
}

.banner {
position: relative;
top: 300px;
background-color: black;
width: 1200px;
margin: 0 auto;
}

.featured {
position: relative;
top: 100px;
width: 1000px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
}

.container {
margin: 0 auto;
width: 1500px;
display: flex;
flex-wrap: wrap;
justify-content: center;
position: relative;
top: 50px;
}

.box img {
height: 200px;
width: 300px;
margin: 15px 15px;
text-align: center;
}

.locations {
background-image: url(“…/Images/Locations.jpg”);
background-position: center;
background-repeat: no-repeat;
height: 500px;
margin: 75px auto;
flex-flow: column;
}

.locations h2 {
position: relative;
top: 15px;
}

.locations-boxes {
display: flex;
margin: 40px;
align-content: center;
justify-content: center;
background-color: black;
}

.locations-boxes ul {
list-style: none;
line-height: 40px;
}

.base {
position: relative;
top: 200px;
}

footer {
text-align: left;
margin-left: 20px;
position: relative;
top: 200px;
}

1 Like