ci-Project1/index.html at main · BobWritesCode/ci-Project1 · 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
<!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">
    <meta name="description" content="Why you should be choosing popcorn as a snack">
    <meta name="keywords" content="Popcorn, Snack, Health eating">
    <link rel="stylesheet" href="assets/css/style.css" type="text/css">
    <link rel="icon" type="image/x-icon" href="favicon.ico?v=2">
    <title>Why Choose Popcorn?</title>
  </head>
  <body>
    <!-- Sticky Nav bar-->
    <div class="fix-nav">
      <div>
        <nav class="sticky-menu menus menu-font">
          <ul>
            <li class="animation-line-sticky"><a href="index.html" class="active">Home</a></li>
            <li class="animation-line-sticky"><a href="make.html">Make</a></li>
            <li class="animation-line-sticky"><a href="gallery.html">Gallery</a></li>
            <li class="animation-line-sticky"><a href="contact.html">Contact Us</a></li>
          </ul>
        </nav>
      </div>
    </div>
    <!-- Collapsible Nav bar -->
    <div class="fix-nav">
      <div>
        <nav class="collapsible-menu menus menu-font">
          <input type="checkbox" id="menu">
          <label for="menu">Menu</label>
          <div class="menu-content">
            <ul>
              <li class="active"><a href="index.html">Home</a></li>
              <li class="animation-line-collapsible"><a href="make.html">Make</a></li>
              <li class="animation-line-collapsible"><a href="gallery.html">Gallery</a></li>
              <li class="animation-line-collapsible"><a href="contact.html">Contact Us</a></li>
            </ul>
          </div>
        </nav>
      </div>
    </div>
    <div style="font-size: 0;" class="main-header-div">
      <img src="assets/images/lady-and-dog.webp" alt="Lady and her dog watching TV while she is eating popcorn." style="width:90%; max-width: 985px;">
      <header class="main">
        <h1>Why choose Popcorn?</h1>
        <p>Popcorn is awesome you should have some!</p>
      </header>
    </div>
    <div class="page-container">
      <ul id="home-quick-links">
        <li class="animation-line-white-bg"><a href="#quick-link-calories">Calories</a></li>
        <li class="animation-line-white-bg"><a href="#quick-link-ease">Ease</a></li>
        <li class="animation-line-white-bg"><a href="#quick-link-price">Price</a></li>
        <li class="animation-line-white-bg"><a href="#quick-link-occasions">Occasions</a></li>
        <li class="animation-line-white-bg"><a href="#quick-link-customise">Customise</a></li>
        <li class="animation-line-white-bg"><a href="#quick-link-history">History</a></li>
      </ul>
      <div id="why-all">
        <section>
          <span class="quick-link-scroll" id="quick-link-calories"></span>
          <img src="assets/images/popcorn-hands.webp" alt="Two hands offering popcorn.">
          <div>
            <h2>Calories</h2>
            <p>Only 61 calories in 2 cups of popcorn! Time to make a switch and live healthier!</p>
            <div class="button">
              <a href="gallery.html" >See some pictures...</a>
            </div>
          </div>
        </section>
        <section>
          <span class="quick-link-scroll" id="quick-link-ease"></span>
          <img src="assets/images/three-girls-sofa.webp" alt="Three smiling girls socialising on a sofa.">
          <div>
            <h2>Ease</h2>
            <p>You can make popcorn in just 6 easy steps. It's so easy we even made a guide!</p>
            <div class="button">
              <a href="make.html" >How to make...</a>
            </div>
          </div>
        </section>
        <section>
          <span class="quick-link-scroll" id="quick-link-price"></span>
          <img src="assets/images/boy-eating-popcorn.webp" alt="Young boy sat on sofa eating popcorn from a bowl.">
          <div>
            <h2>Price</h2>
            <p>Trust us when we say, you can buy ALOT of popcorn for less than £5.</p>
            <div class="button">
              <a href="gallery.html" >See some pictures...</a>
            </div>
          </div>
        </section>
        <section>
          <span class="quick-link-scroll" id="quick-link-occasions"></span>
          <img src="assets/images/popcorn-picnic.webp" alt="Several boxes of popcorn on a table outside on a sunny day.">
          <div>
            <h2>Occasions</h2>
            <p>Ideal for all occasions, including movie nights, weddings, picnics and more!</p>
            <div class="button">
              <a href="make.html" >How to make...</a>
            </div>
          </div>
        </section>
        <section>
          <span class="quick-link-scroll" id="quick-link-customise"></span>
          <img src="assets/images/popcorn-pink.webp" alt="Close up of pink coloured popcorn.">
          <div>
            <h2>Customise</h2>
            <p>You can add some many flavours to your popcorn. Google it, we love Thai Curry! </p>
            <div class="button">
              <a href="gallery.html" >See some pictures...</a>
            </div>
          </div>
        </section>
        <section>
          <span class="quick-link-scroll" id="quick-link-history"></span>
          <img src="assets/images/popcorn-two-girls.webp" alt="Two girls on a bed, sharing popcorn and looking at a laptop.">
          <div>
            <h2>History</h2>
            <p>Fossil evidence from Peru suggests that corn was popped as early as 4,700 BC.</p>
            <div class="button">
              <a href="make.html" >How to make...</a>
            </div>
          </div>
        </section>
      </div>
    </div>
    <div class="back-to-top">
      <a href="#top" class="dark-bg-text animation-line-sticky">Jump to top of page <i class="fa-solid fa-angle-up"></i></a>
    </div>
    <footer>
      <div class="footer-contact">
        <p><strong>Why Choose Popcorn</strong></p>
        <address>
          Kernal Lane, Poptown, PO9 C00<br>
          <a class="animation-line-sticky" href="mailto:donotemail@whychoosepopcorn.com">DoNotEmail@WhyChoosePopcorn.com</a>
        </address>
      </div>
      <ul>
        <li><a href="https://www.linkedin.com/in/warwickhart/" target="_blank" rel="noopener noreferrer" aria-label="Link to Warwick Hart's LinkedIn profile (opens in new tab)" class="dark-bg-text animation-line-sticky">Connect with me on LinkedIn <i class="fa-brands fa-linkedin"></i></a></li>
        <li><a href="https://github.com/BobWritesCode" target="_blank" rel="noopener noreferrer" aria-label="Link to Warwick Hart's GitHub profile (opens in new tab)" class="dark-bg-text animation-line-sticky">See all my projects at GitHub <i class="fa-brands fa-github"></i></a></li>
      </ul>
      <hr>
      <div>
        Copyright © 2022 Why Choose Popcorn
      </div>
    </footer>
    <script src="https://kit.fontawesome.com/3f3c2144d6.js" crossorigin="anonymous"></script>
  </body>
</html>