-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
143 lines (135 loc) · 9.88 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
<!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">
<title>Periods for Everyone</title>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- Navbar -->
<header class="font-sans text-black text-opacity-50 body-font">
<div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
<a class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-pink-500 rounded-full" viewBox="0 0 24 24">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
</svg>
<span class="ml-3 text-xl">Periods for Everyone</span>
</a>
<nav class="md:mr-auto md:ml-4 md:py-1 md:pl-4 md:border-l md:border-gray-400 flex flex-wrap items-center text-base justify-center">
<a href="index.html" class="mr-5 text-lg hover:text-gray-900">Home</a>
<a href="discordbot.html" class="mr-5 text-lg hover:text-gray-900">MenoBot</a>
<a href="helpme.html" class="mr-5 text-lg hover:text-gray-900">Help me!</a>
<a href="malecorner.html" class="mr-5 text-lg hover:text-gray-900">Male Corner</a>
</nav>
<button class="inline-flex items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0"><a href="contact.html">Help Someone</a>
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-1" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</button>
<button class="inline-flex items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0"><a href="signup.html">Sign up</a>
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-1" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</button>
</div>
</header>
<!-- Main Image -->
<section class="text-gray-600 body-font bg-red-100">
<div class="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
<div class="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
<a class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">Menstruation- A Taboo No More.
</a>
<p class="text-justify mb-8 leading-relaxed">This discussion should be open to all genders, because everyone should be educated on menstruation, not just people who experience it.
This discussion is vital in order to erase misconceptions about menstruation and could help further education throughout the world.</p>
</div>
<div class="lg:max-w-lg lg:w-full md:w-1/2 w-5/6">
<img class="object-cover object-center rounded" alt="hero" src="MainPage.png">
</div>
</div>
</section>
<!-- Middle About -->
<section class="text-gray-600 body-font">
<div class="container mx-auto flex px-5 py-24 items-center justify-center flex-col">
<!-- <img class="lg:w-2/6 md:w-3/6 w-5/6 mb-10 object-cover object-center rounded" alt="hero" src="https://dummyimage.com/720x600"> -->
<div class="text-center lg:w-2/3 w-full">
<h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">About Us</h1>
<h3 class="mb-8 leading-relaxed">We want women to be vocal about Menstruation, We want Men to understand and support the viable perspective about Menstruation. Many men and women never got a real education about menstruation.
They may have been told what it biologically was in biology class in schools, but a lot of real questions go unanswered, and unasked. We believe PERIODS are for EVERYONE as much as it is important for everyone to be socially aware about it. </h3>
<div class="flex justify-center">
<!-- <button class="inline-flex text-white bg-pink-500 border-0 py-2 px-6 focus:outline-none hover:bg-pink-600 rounded text-lg">Start </button> -->
</div>
</div>
</div>
</section>
<!-- Features -->
<section class="text-gray-600 body-font bg-red-100">
<div class="container px-5 py-24 mx-auto">
<div class="text-center mb-20">
<!-- <h1 class="sm:text-3xl text-2xl font-medium title-font text-gray-900 mb-4">Periods for Everyone</h1> -->
<!-- <div class="flex mt-6 justify-center">
<div class="w-16 h-1 rounded-full bg-pink-500 inline-flex"></div>
</div>
</div> -->
<div class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4 md:space-y-0 space-y-6">
<div class="p-4 md:w-1/3 flex flex-col text-center items-center">
<div class="w-20 h-20 inline-flex items-center justify-center rounded-full bg-pink-100 text-pink-500 mb-5 flex-shrink-0">
<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
</div>
<div class="flex-grow">
<h2 class="text-gray-900 text-lg title-font font-medium mb-3">Specialised Discord Bot</h2>
<p class="leading-relaxed text-base">We have a specialised discord bot: MenoBot to spread awareness about Menstruation and break down the existing biases.</p>
<a href="discordbot.html" class="mt-3 text-pink-500 inline-flex items-center" target="_blank">Learn More
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</a>
</div>
</div>
<div class="p-4 md:w-1/3 flex flex-col text-center items-center">
<div class="w-20 h-20 inline-flex items-center justify-center rounded-full bg-pink-100 text-pink-500 mb-5 flex-shrink-0">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10" viewBox="0 0 24 24">
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
</div>
<div class="flex-grow">
<h2 class="text-gray-900 text-lg title-font font-medium mb-3">Male Corner</h2>
<p class="leading-relaxed text-base">We want to know and change a man's perspective about Menstruation and thus we give them the tyre to explore and learn as much any other woman should.</p>
<a href="malecorner.html"class="mt-3 text-pink-500 inline-flex items-center" target="_blank">Learn More
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</a>
</div>
</div>
<div class="p-4 md:w-1/3 flex flex-col text-center items-center">
<div class="w-20 h-20 inline-flex items-center justify-center rounded-full bg-pink-100 text-pink-500 mb-5 flex-shrink-0">
<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11.5V14m0-2.5v-6a1.5 1.5 0 113 0m-3 6a1.5 1.5 0 00-3 0v2a7.5 7.5 0 0015 0v-5a1.5 1.5 0 00-3 0m-6-3V11m0-5.5v-1a1.5 1.5 0 013 0v1m0 0V11m0-5.5a1.5 1.5 0 013 0v3m0 0V11"></path></svg>
</div>
<div class="flex-grow">
<h2 class="text-gray-900 text-lg title-font font-medium mb-3">Help in Need</h2>
<p class="leading-relaxed text-base">We want our community to help and grow, thus we provide a window for people in need to get help from people who want to help. </p>
<a href="helpme.html" class="mt-3 text-pink-500 inline-flex items-center" target="_blank">Learn More
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="text-gray-600 body-font">
<div class="text-center container px-5 py-8 mx-auto flex items-center sm:flex-row flex-col">
<a class="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-pink-500 rounded-full" viewBox="0 0 24 24">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
</svg>
<span class="ml-3 text-xl">Periods for Everyone</span>
</a>
</div>
</footer>
</body>
</html>