-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathgoals.html
131 lines (116 loc) · 4.81 KB
/
goals.html
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
<!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>Goals Page</title>
<link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico">
<link href="assets/css/goals.css" rel="stylesheet" type="text/css" />
<link href="assets/css/global.css" rel="stylesheet" type="text/css" />
<link href="assets/css/utilities.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>
<main>
<!-- Promo Banner: reminds readers that there are promoted cookies on sale -->
<section class="promo-banner">
<promo-banner></promo-banner>
</section>
<!-- Content: Title -->
<section class="hero">
<h1>Hall of Awesome Goals</h1>
</section>
<!-- BEGIN - Activity 6: Goals -->
<!-- Content: Sales initiative -->
<section class="sales-initiative container">
<h2 class="white-text">Sales Initiative</h2>
<p class="white-text">
With your support, my troop will be able to: (UPDATE ME)
</p>
<!-- END - Activity 6: Goals -->
<!-- Content: circle badge images -->
<div class="badges-container flex ai-c jc-sb">
<img class="badge" src="assets/images/goals/badge1.svg" alt="Picture of Badge 1" />
<img class="badge" src="assets/images/goals/badge2.svg" alt="Picture of Badge 2" />
<img class="badge" src="assets/images/goals/badge3.svg" alt="Picture of Badge 3" />
</div>
<div class="shop-now-btn">
<a class="button" href="cookies.html">
<span class="button-text button-hover-underline">Shop Now</span>
</a>
</section>
<!-- What i learned -->
<section class="learning container">
<h2 class="white-text">What I Learned</h2>
<!-- BEGIN - Activity 6: Goals -->
<p class="white-text">
Through this experience, I acquired these skills: (UPDATE ME)
</p>
<!-- END - Activity 6: Goals -->
<!-- Content: pentagon badge images -->
<div class="badges-container flex wrap ai-c jc-se">
<img class="badge" src="assets/images/goals/learning_badge1.svg" alt="Picture of Learning Badge 1" />
<img class="badge" src="assets/images/goals/learning_badge2.svg" alt="Picture of Learning Badge 2" />
<img class="badge" src="assets/images/goals/learning_badge3.svg" alt="Picture of Learning Badge 3" />
<img class="badge" src="assets/images/goals/learning_badge4.svg" alt="Picture of Learning Badge 3" />
</div>
</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>