-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfeedback.html
137 lines (133 loc) · 4.86 KB
/
feedback.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
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Green Globe - Feedback</title>
<!-- link Vue CDN -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- link font wesome icons -->
<script
src="https://kit.fontawesome.com/1ca395b51b.js"
crossorigin="anonymous"
></script>
<!-- link external css -->
<link rel="stylesheet" href="./style/style.css" />
<link rel="stylesheet" href="./style/navbar.css" />
<link rel="stylesheet" href="./style/footer.css" />
<link rel="stylesheet" href="./style/main_carousel.css" />
<link rel="stylesheet" href="./style/feedback.css" />
</head>
<body>
<!-- nav bar -->
<nav-bar :nav-items="navItems"></nav-bar>
<!-- solution section -->
<div class="main-carousel-container">
<div class="overlaid-text">
<h1><span>Gr</span>een<br /><span>Gl</span>obe Join</h1>
<h2>the Conversation - Let Your Voice Be Heard</h2>
<p>
Share your thoughts, ideas, and feedback on water pollution in the
Urban Wetland Park. Together, we can make a difference and work
towards a cleaner, healthier environment for all.
</p>
<a href="#" class="btn-learn-more"
>Take Action<i class="fa-solid fa-arrow-right"></i
></a>
</div>
</div>
<!-- get in tuch -->
<div class="get-in-tuch container section">
<h2 class="sub-t">Get in Touch!</h2>
<h3>Contact Us</h3>
<div class="content">
<form action="">
<h3>Need Support !</h3>
<p>Contact us for a quote. help to join the them.</p>
<input type="text" placeholder="Your Name" />
<input type="email" placeholder="Your E-Mail" />
<input type="text" placeholder="Your Subject" />
<textarea
name=""
id=""
rows="4"
placeholder="Type your massage here..."
></textarea>
<div class="btn">
<a href="#" class="btn-more"
>Send Masssage<i class="fa-solid fa-arrow-right"></i
></a>
</div>
</form>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d26647.185951230604!2d79.88740030307703!3d6.875276764036689!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ae25a1600dfb6e1%3A0x2807f5b09154ef7d!2sPagoda%2C%20Nugegoda%2C%20Sri%20Lanka!5e0!3m2!1sen!2ssg!4v1714486401269!5m2!1sen!2ssg"
width="600"
height="450"
style="border: 0"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
></iframe>
</div>
</div>
<!-- comment area -->
<div class="comment-section container section">
<h2 class="sub-title">Yor Feedback</h2>
<div class="wrapper">
<div class="comment-wrapper">
<div
class="comment-container"
v-for="{name, email, comment, like, reply} in feedbacks"
>
<div class="comment-box">
<div class="top">
<img src="./assets/user.png" width="100" alt="" />
<div class="name">
<p class="user-name">{{ name }}</p>
<p class="email">{{email}}</p>
</div>
</div>
<div class="comment">
<p>{{comment}}</p>
</div>
<div class="bottom">
<div><span>{{ like }}</span>Likes</div>
<div><span>{{ reply }}</span>Reply</div>
</div>
</div>
</div>
</div>
<div class="get-in-tuch" style="margin: 0">
<div class="content">
<form action="">
<h3 class="comment-title">
Share Your Voice, Shape The Narrative
</h3>
<p>
Share your thoughts, feedback, or questions about water
pollution in the Urban Wetland Park. Your input helps us improve
and take meaningful action!
</p>
<input type="text" placeholder="User Name" id="name" />
<input type="email" placeholder="E-Mail" id="email" />
<textarea
name="comment"
id="comment"
rows="4"
placeholder="Type your comment here..."
></textarea>
<div class="btn">
<a href="" class="btn-more" @click.prevent="addComment()"
>Send Masssage<i class="fa-solid fa-arrow-left"></i
></a>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- footer -->
<footer-vue :nav-items="navItems"></footer-vue>
<script src="./js/app.js"></script>
</body>
</html>