coffeeroasters/about.html at main · Joelynn94/coffeeroasters · 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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon-32x32.png">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;700&family=Fraunces:wght@900&display=swap"
    rel="stylesheet">
  <link rel="stylesheet" href="./css/styles.min.css">
  <title>About | Coffeeroasters subscription site</title>
</head>

<body>

  <header>
    <nav class="nav">
      <div class="container">
        <div class="nav__logo">
          <a href="#">
            <img src="./assets/shared/desktop/logo.svg" alt="image of coffeeroasters logo">
          </a>
        </div>
        <a class="nav__mobile-btn" href="#" aria-label="Open mobile menu">
          <img id="toggleBtnImg" src="./assets/shared/mobile/icon-hamburger.svg" alt="open mobile menu bars">
        </a>
        <div class="nav__mobile-menu close">
          <ul class="nav__list">
            <li class="nav__item"><a class="nav__link" href="index.html">Home</a></li>
            <li class="nav__item"><a class="nav__link" href="about.html">About us</a></li>
            <li class="nav__item"><a class="nav__link" href="plan.html">Create your plan</a></li>
          </ul>
        </div>

        <div class="nav__menu">
          <ul class="nav__list">
            <li class="nav__item"><a class="nav__link" href="index.html">Home</a></li>
            <li class="nav__item"><a class="nav__link" href="about.html">About us</a></li>
            <li class="nav__item"><a class="nav__link" href="plan.html">Create your plan</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </header>

  <div class="container">
    <section class="banner" id="aboutBanner">
      <div class="banner__inner">
        <h1>About Us</h1>
        <p> Coffeeroasters began its journey of exotic discovery in 1999, highlighting stories ofcoffee from around the world. We have since been dedicated to bring the perfect cup - from bean to brew - in every shipment.
        </p>
      </div>
    </section>
  </div>

  <main>
    <div class="container">

      <section class="commitment">
        <picture>
          <source media="(min-width: 992px)" srcset="assets/about/desktop/image-commitment.jpg">
          <source media="(min-width: 768px)" srcset="assets/about/tablet/image-commitment.jpg">
          <img src="assets/about/mobile/image-commitment.jpg" alt="image of a worker making coffee" />
        </picture>
        <div class="commitment__details">
          <h3>Our commitment</h3>
          <p> We’re built on a simple mission and a commitment to doing good along the way. We want to make it easy for you to discover and brew the world’s best coffee at home. It all starts at the source. To locate the specific lots we want to purchase, we travel nearly 60 days a year trying to understand the challenges and opportunities in each of these places. We collaborate with exceptional coffee growers and empower a global community of farmers through with well above fair-trade benchmarks. We also offer training, support farm community initiatives, and invest in coffee plant science. Curating only the finest blends, we roast each lot to highlight tasting profiles distinctive to their native growing region.</p>
        </div>
      </section>

      <section class="quality">
        <picture>
          <source media="(min-width: 992px)" srcset="./assets/about/desktop/image-quality.jpg">
          <source media="(min-width: 768px)" srcset="./assets/about/tablet/image-quality.jpg">
          <img src="./assets/about/mobile/image-quality.jpg" alt="image of a worker making coffee" />
        </picture>
        <div class="quality__details">
          <h3>Uncompromising quality</h3>
          <p>Although we work with growers who pay close attention to all stages of harvest and processing, we employ, on our end, a rigorous quality control program to avoid over-roasting or baking the coffee dry. Every bag of coffee is tagged with a roast date and batch number. Our goal is to roast consistent, user-friendly coffee, so that brewing is easy and enjoyable.</p>
        </div>
      </section>

      <section class="locations">
        <h4>Our headquarters</h4>

        <div class="locations__all-locations">

          <div class="locations__location">
            <img src="./assets/about/desktop/illustration-uk.svg" alt="image illustration of the United Kingdom">
            <h3>United Kingdom</h3>
            <address>
              68 Asfordby Rd<br />
              Alcaston<br />
              SY6 1YA<br />
              +44 1241 918425<br />
            </address>
          </div>

          <div class="locations__location">
            <img src="./assets/about/desktop/illustration-canada.svg" alt="image illustration of Canada">
            <h3>Canada</h3>
            <address>
              1528 Eglinton Avenue<br />
              Toronto<br />
              Ontario M4P 1A6<br />
              +1 416 485 2997<br />
            </address>
          </div>

          <div class="locations__location">
            <img src="./assets/about/desktop/illustration-australia.svg" alt="image illustration of Australia">
            <h3>Australia</h3>
            <address>
              36 Swanston Street<br />
              Kewell<br />
              Victoria<br />
              +61 4 9928 3629<br />
            </address>
          </div>

        </div>
      </section>

    </div>
  </main>

  <div class="container">
    <footer class="footer">
      <div class="footer__logo">
        <a href="#">
          <img src="./assets/shared/desktop/logo-white.svg" alt="">
        </a>
      </div>
      <ul class="footer__list">
        <li class="footer__item"><a class="footer__link" href="index.html">Home</a></li>
        <li class="footer__item"><a class="footer__link" href="about.html">About us</a></li>
        <li class="footer__item"><a class="footer__link" href="plan.html">Create your plan</a></li>
      </ul>
      <ul class="footer__social">
        <li>
          <a href="index.html">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="#FEFCF7" d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116c.73 0 1.323-.593 1.323-1.325V1.325C24 .593 23.407 0 22.675 0z"/></svg>
          </a>
        </li>
        <li>
          <a href="index.html">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="20"><path fill="#FEFCF7" d="M24 2.557a9.83 9.83 0 01-2.828.775A4.932 4.932 0 0023.337.608a9.864 9.864 0 01-3.127 1.195A4.916 4.916 0 0016.616.248c-3.179 0-5.515 2.966-4.797 6.045A13.978 13.978 0 011.671 1.149a4.93 4.93 0 001.523 6.574 4.903 4.903 0 01-2.229-.616c-.054 2.281 1.581 4.415 3.949 4.89a4.935 4.935 0 01-2.224.084 4.928 4.928 0 004.6 3.419A9.9 9.9 0 010 17.54a13.94 13.94 0 007.548 2.212c9.142 0 14.307-7.721 13.995-14.646A10.025 10.025 0 0024 2.557z"/></svg>
          </a>
        </li>
        <li>
          <a href="index.html">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="#FEFCF7" d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
          </a>
        </li>
      </ul>
    </footer>
  </div>

  <script src="./main.js"></script>
</body>

</html>