Web-C4C/index.html at main · codewithher/Web-C4C · 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
165
166
167
168
169
170
171
<!DOCTYPE html>
<html>
<!-- Meta Data: Sets up and connects CSS (styling) files to the page -->
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>C4C Website</title>
  <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico">
  <link href="assets/css/global.css" rel="stylesheet" type="text/css" />
  <link href="assets/css/utilities.css" rel="stylesheet" type="text/css" />
  <link href="assets/css/home.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <!-- Header: Title -->
  <header class="flex ai-c">
    <!-- BEGIN - Activity 1: Insert your first name -->
    <a class="logo" href="index.html">[INSERT NAME] Cookie Site</a>
    <!-- END - Activity 1: Insert your name -->
    <div id="opacityLayer"></div>

    <!-- Navigation bar: adds all links to visit -->
    <div id="menu" class="menu-div">
      <nav id="header-nav" class="header-menu-sidebar">
        <ul class="nav-content">
          <li>
            <a class="header-menu-link navigation-btn" href="index.html">
              Home
            </a>
          </li>
          <li>
            <a class="header-menu-link navigation-btn" href="cookies.html">
              Cookie Catalog
            </a>
          </li>
          <li>
            <a class="header-menu-link navigation-btn" href="goals.html">
              My Hall of Awesome Goals
            </a>
          </li>
          <li>

            <!-- BEGIN - Activity 5: Input Your Own Digital Cookie Link -->
            <a class="button" href="https://www.girlscouts.org/en/cookies.html" target="_blank">
            <!-- END - Activity 5: Input Your Own Digital Cookie Link -->

            <!-- Navigation - purchase button -->
              <span class="button-text button-hover-underline">
                Buy Now
              </span>
            </a>
          </li>
        </ul>
      </nav>

      <!-- Navigation: close menu -->
      <button type="button" id="mobile-menu-trigger-close" class="close-btn" alt="Close Menu Button">
        <img class="close-img" src="assets/images/menu-close-btn.svg" alt="Close Menu Button" />
      </button>
    </div>

    <!-- Navigation: open menu -->
    <button type="button" id="mobile-menu-trigger-open" class="open-btn" alt="Open Menu Button">
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </button>
  </header>

  <!-- Promotion Banner -->
  <section class="promo-banner">
    <promo-banner></promo-banner>
  </section>

  <main>
    <!-- Content: Hero Banner - attention grabber for the website -->
    <section class="hero">
      <div class="hero-pic"></div>
      <div class="hero-content flex wrap col jc-sb">
        <div class="flex wrap col ai-fs jc-sb">

          <!-- BEGIN - Activity 2: update text with your cookie pitch -->
          <span class="subheader fb-full">Treat Yourself (CHANGE ME)</span>
          <h1 class="fb-full">Order Cookies (CHANGE ME)</h1>
          <p class="fb-full">
            Satisfy your sweet tooth while supporting the local community via
            a young entrepreneur. (CHANGE ME)
          </p>
          <!-- END - Activity 2: update text with your cookie pitch -->

          <div class="hero-btn-container">

            <!-- BEGIN - Activity 5: Input Your Own Digital Cookie Link -->
            <a class="button" href="https://www.girlscouts.org/en/cookies.html" target="_blank">
              <span class="button-text button-hover-underline">Buy Now</span>
            <!-- END - Activity 5: Input Your Own Digital Cookie Link -->

          </a>
          </div>
        </div>
      </div>
    </section>

    <!-- Content: describes the cookie flavors -->
    <section class="cookie flex ai-c col">
      <div class="home-content flex ai-c jc-se">
        <div class="home-copy flex col">
          <h2 class="white-text">A Delicious Tradition</h2>
          <p class="white-text">
            Starting with just Thin Mints, Adventurefuls, Trefoils, Girl Scout
            Cookies now offer 9 different flavors to choose from!
          </p>
          <a class="button mobile-hide" href="cookies.html">
            <span class="button-text button-hover-underline">
              View Cookie Catalog
            </span>
          </a>
        </div>
        <img class="home-image" src="assets/images/cookies/lbb-thinmints.png" alt="Picture of Thin Mint" />
      </div>
      <a class="button desktop-hide" href="cookies.html">
        <span class="button-text button-hover-underline">
          View Cookie Catalog
        </span>
      </a>
    </section>

    <!-- Content: describes who is selling the cookie -->
    <section class="about-me flex ai-c col">

      <div class="home-content flex ai-c jc-se">
        <!-- BEGIN -  Activity 4: Replace image + update alt text -->
        <img class="home-image"
          src="https://us.123rf.com/450wm/yupiramos/yupiramos1612/yupiramos161202172/66884453-little-scout-character-icon-vector-illustration-design.jpg?ver=6"
          alt="Picture of [INSERT NAME]" />
        <!-- END -  Activity 4: Replace image + update alt text -->
        <div class="home-copy flex col">
          <h2>Your Cookie Saleswoman</h2>
          <!-- BEGIN - Activity 3: Fill information about yourself! Don't input any personal information!! -->
          <p>
            Welcome! <br />
            My name is [INSERT NAME].
          </p>
          <p class="about-me-text">
            This year, my goal is to sell 800 packages of cookies! (CHANGE ME)
          </p>
          <!-- END - Activity 3: Fill information about yourself! Don't input any personal information!! -->

          <a class="button mobile-hide" href="goals.html">
            <span class="button-text button-hover-underline">
              Learn About My Goals
            </span>
          </a>
        </div>
      </div>
      <a class="button desktop-hide" href="goals.html">
        <span class="button-text button-hover-underline">
          Learn About My Goals
        </span>
      </a>
    </section>
  </main>

  <!-- Footer: information on the bottom of the page -->
  <footer>
    <a href="https://codewithher.org/" target="_blank"><img src="assets/images/cwh-logo.svg" alt="CWH Logo" /></a>
  </footer>
</body>
  <!-- Scripts: give the page interactive features -->
  <script src="assets/js/scripts.js"></script>
  <script type="module" src="assets/js/components/promoBanner/promo-banner.js"></script>
</html>