-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
157 lines (143 loc) · 6.47 KB
/
index.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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Speak With Kindness</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
<!-- CSS Stylesheets -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/72719c2573.js" crossorigin="anonymous"></script>
<!-- Bootstrap Scripts -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</head>
<body>
<!-- Title Section -->
<section id="title">
<div class="container-fluid">
<!-- Navigation Bar -->
<nav class="navbar navbar-light navbar-expand-md">
<a class="navbar-brand" href="#title">
<img class="logo-image" src="images/word-red.png" alt="logo-image">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbars" aria-controls="navbars" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbars">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#about">who we are</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#blog">blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">contact</a>
</li>
</ul>
</div>
</nav>
<!-- Header Section -->
<div class="header">
<img class="header-image" src="images/title.png" alt="header-image">
</div>
</div>
</section>
<!-- About Section -->
<section id="about">
<div class="container-fluid">
<div class="row about-row">
<div class="col-md-4 about-box">
<div class="head">
<p>who we are</p>
</div>
<div class="body">
<p>We aim to create a space for <span class="head">you</span> to start talking about casual racism present in Singapore. Yes, it exists</p>
</div>
</div>
<div class="col-md-4 about-box">
<div class="head">
<p>why?</p>
</div>
<div class="body">
<p>Most Singaporeans avoid discussing the topic of <span class="head">racism</span>. Regardless of whether it's due to the fear of being called racists themselves or plain denial, we believe in the significance of having the conversation.</p>
</div>
</div>
<div class="col-md-4 about-box">
<div class="head">
<p>how?</p>
</div>
<div class="body">
<p>Through blog posts and statistics, we hope to <span class="head">spread awareness</span> about casual racism and improve the current situation in Singapore.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Blog Section -->
<section id="blog">
<div class="">
<p class="blog-title">blog</p>
<p class="desc">check out our blog <u><a href="">here</a></u> to see all of our posts!</p>
</div>
<div class="posts">
<div class="row blog-row">
<div class="col-md-6">
<img class="post-image" src="images/post1.png" alt="post1-image">
</div>
<div class="col-md-6 blog-text">
<p>Race is not something that we can change. A person shouldn't feel at fault for being the race that they are. A quick off-hand comment about someone's skin could lead to a number of negative mental health outcomes. What's a joke to you, isn't a joke to them.</p>
<u><a href="">read more...</a></u>
</div>
</div>
<div class="row blog-row change-order">
<div class="col-md-6 blog-text">
<p>We introduce you the first step in making a change. Casual racism is something we shouldn't be taking lightly. Often times, we don't even realize the impact of our words. So, we're calling for a change. It's time to #SpeakWithKindness.</p>
<u><a href="">read more...</a></u>
</div>
<div class="col-md-6">
<img class="post-image" src="images/post2.png" alt="post2-image">
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact">
<div class="row">
<div class="col-md-6 address contact-box">
<div class="desc contact-form">
<p class="contact-title">contact us</p><br>
<a href="mailto: amelialwx@mail.com" class="head"><p>swksg@gmail.com</p></a><br>
<p>Speak With Kindness Singapore</p>
<p>20 Clementi Ave 1</p>
<p>Singapore 129957</p>
</div>
</div>
<div class="col-md-6 contact-form contact-box">
<form action="mailto: amelialwx@gmail.com" method="post" enctype="text/plain">
<label>full name:</label><br />
<input type="text" name="yourName" size="40" value=""><br>
<label>email:</label><br>
<input type="email" name="yourEmail" size="40" value=""><br>
<label>subject:</label><br>
<input type="email" name="yourEmail" size="40" value=""><br>
<label>message:</label><br>
<textarea name="yourMessage" rows="10" cols="40"></textarea><br>
<a href="mailto: amelialwx@gmail.com" class="contactButton">submit</a>
</form>
</div>
</div>
</section>
<!-- Footer Section -->
<section id="footer">
<a href="https://www.facebook.com"><i class="fab social fa-facebook"></i></a>
<a href="https://www.instagram.com"><i class="fab social fa-instagram"></i></a>
<a href="mailto: amelialwx@gmail.com"><i class="fas social fa-envelope"></i></a>
<p>© Speak With Kindness 2019</p>
</section>
</body>
</html>