Tea_Cozy/index.html at master · Doe85/Tea_Cozy · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Tea Cozy</title>
    <link rel="stylesheet" type="text/css" href=".\CSS\index.css">
  </head>
  <body>

<!-- Section - Header -->
  <header>
    <div class="logo">
      <img src=".\CSS\Resources\logo.png" alt="Logo">
    </div>
    <nav>
      <a href="#main"><span>Mission</span></a>
      <a href="#section2"><span>Featured Tea</span></a>
      <a href="#section3"><span>Location</span></a>
    </nav>
  </header>

<!-- Section Main Start -->
  <div id="main" class="flex-container">

<!-- Section - Section1 -->
    <div id="section1" class="flex-container">
      <div id="image_large_text">
        <h2>Our Mission</h2>
        <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
      </div>
    </div>


<!-- Section - Section2 -->
    <div id="section2" class="flex-container">

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

      <div id="stories" class="flex-container">

        <div class="stories flex-container">
          <img src="./CSS/Resources/berry_tea.jpg" alt="Berry Tea">
          <span>Fall Berry Blitz Tea</span>
        </div>

        <div class="stories flex-container">
          <img src=".\CSS\Resources\tree_box.jpg" alt="Spiced Rum Tea">
          <span>Spiced Rum Tea</span>
        </div>

        <div class="stories flex-container">
          <img src=".\CSS\Resources\cake.jpg" alt="Donuts">
          <span>Seasonal Donuts</span>
        </div>

        <div class="stories flex-container">
          <img src=".\CSS\Resources\tea_cup_above.jpg" alt="Myrtle Ave Tea">
          <span>Myrtle Ave Tea</span>
        </div>

        <div class="stories flex-container">
          <img src=".\CSS\Resources\bedford-bizarre.jpg" alt="Bedford Bizarre Tea">
          <span>Bedford Bizarre Tea</span>
        </div>

      </div>

      </div>

<!-- Section - Section3 -->
      <div id="section3" class="flex-container">

          <div id="locationsheader">
            <h2>Locations</h2>
          </div>

          <div id="locationsbody" class="flex-container">

            <div id="downtown">
              <h3>Downtown</h3>
              <p>384 West 4th St</p>
              <p>Suite 108</p>
              <p>Portland, Maine</p>
            </div>

            <div id="bayside">
              <h3>East Bayside</h3>
              <p>3433 Phisherman's Avenue</p>
              <p>(Northwest Corner)</p>
              <p>Portland, Maine</p>
            </div>

            <div id="oakdale">
              <h3>Oakdale</h3>
              <p>515 Crescent Avenue</p>
              <p>Second Floor</p>
              <p>Portland, Maine</p>
            </div>
          </div>
      </div>

<!-- Section - Contact -->
      <div id="contact" class="flex-container">
        <div class="contactinfo">
          <h2>The Tea Cozy</h2>
          <h5>contact@theteacozy.com</h5>
          <h5>917-555-8904</h5>
        </div>
      </div>

<!-- Section - Footer -->
      <footer>
        <h5>&copy The Tea Cozy 2018</h5>
      </footer>
    </div>
  </body>
</html>