Skip to content

Commit 6dd6b97

Browse files
mubarismubaris
authored
Merge pull request #229 from aswanthkoleri/master
Add diversity section
2 parents acebc14 + 42daff7 commit 6dd6b97

5 files changed

Lines changed: 272 additions & 2 deletions

File tree

‎index.html‎

Lines changed: 271 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!doctype html>
1+
<!doctype html>
22
<html class="no-js" lang="">
33
<head>
44
<meta charset="utf-8">
@@ -20,6 +20,208 @@
2020
<link href="static/css/hover-min.css" rel="stylesheet" media="all">
2121
<link rel="stylesheet" type="text/css" href="static/css/cards.css">
2222
</head>
23+
<style>
24+
/* Diversity section for desktop */
25+
#diversity-mobile{
26+
display: none;
27+
}
28+
#diversity-desktop{
29+
background: rgb(117, 68, 145);
30+
}
31+
32+
#diversity-desktop #one {
33+
position: relative;
34+
height :550px;
35+
width :100%;
36+
background: rgb(255, 255, 255);
37+
-webkit-clip-path: polygon(0 0, 100% 15%, 100% 85%, 0 100%);
38+
clip-path: polygon(0 0, 100% 15%, 100% 85%, 0 100%);
39+
}
40+
#diversity-desktop #three{
41+
position: relative;
42+
height :450px;
43+
width :100%;
44+
background: rgb(255, 255, 255);
45+
-webkit-clip-path: polygon(0 0, 100% 15%, 100% 85%, 0 100%);
46+
clip-path: polygon(0 0, 100% 15%, 100% 85%, 0 100%);
47+
}
48+
#diversity-desktop #two{
49+
position: relative;
50+
height : 300px;
51+
width : 100%;
52+
background: rgb(117, 68, 145);
53+
-webkit-clip-path: polygon(0 0%, 100% 0, 100% 100%, 0 100%);
54+
clip-path: polygon(0 0%, 100% 0, 100% 100%, 0 100%);
55+
}
56+
57+
#diversity-desktop #one #image {
58+
width : 35%;
59+
float: left;
60+
height: 100%;
61+
62+
}
63+
#diversity-desktop #one .content {
64+
width : 65%;
65+
float : right;
66+
height: 100%;
67+
}
68+
#diversity-desktop #one #image img {
69+
width: 100%;
70+
height: auto;
71+
padding : 60px;
72+
padding-top : 30px;
73+
padding-bottom: 130px;
74+
75+
}
76+
#diversity-desktop #one .content #data{
77+
font-size : 20px;
78+
text-align: justify;
79+
width : 100%;
80+
height: auto;
81+
82+
padding-right : 50px;
83+
padding-top : 110px;
84+
padding-bottom: 130px;
85+
}
86+
#diversity-desktop #three #image {
87+
width : 35%;
88+
float: left;
89+
height: 100%;
90+
91+
}
92+
#diversity-desktop #three .content {
93+
width : 65%;
94+
float : right;
95+
height: 100%;
96+
}
97+
#diversity-desktop #three #image img {
98+
width: 100%;
99+
height: auto;
100+
padding :60px;
101+
padding-top : 80px;
102+
padding-bottom: 100px;
103+
}
104+
#diversity-desktop #three .content #data{
105+
font-size : 20px;
106+
text-align: justify;
107+
width : 100%;
108+
height: 100%;
109+
padding-right : 50px;
110+
padding-top : 130px;
111+
padding-bottom: 130px;
112+
}
113+
#diversity-desktop #two #image {
114+
width : 35%;
115+
float: right;
116+
height: 100%;
117+
118+
}
119+
#diversity-desktop #two .content {
120+
width : 65%;
121+
float : left;
122+
height: 100%;
123+
}
124+
#diversity-desktop #two #image img {
125+
width: 100%;
126+
height: auto;
127+
padding : 70px;
128+
padding-top : 0px;
129+
padding-bottom: 0px;
130+
}
131+
#diversity-desktop #two .content #data{
132+
font-size : 20px;
133+
color : white;
134+
text-align: justify;
135+
width : 100%;
136+
height: 100%;
137+
padding-left : 50px;
138+
padding-top : 60px;
139+
padding-bottom: 60px;
140+
}
141+
#diversity-desktop #one .foo {
142+
position: absolute;
143+
144+
145+
}
146+
#diversity-desktop #one .foo #heading {
147+
font-size: 50px;
148+
149+
padding : 20px;
150+
margin-left: 40%;
151+
}
152+
#diversity-desktop .foo1 {
153+
height: 150px;
154+
155+
}
156+
#diversity-desktop .foo2 {
157+
height: 400px;
158+
}
159+
#diversity-desktop .foo1 #heading {
160+
161+
padding : 60px;
162+
}
163+
#diversity-desktop .foo1 h1 {
164+
font-size: 3.5em;
165+
}
166+
167+
/* Diversity section for mobile */
168+
@media only screen and (max-width: 1023px) {
169+
#diversity-mobile {
170+
display: block;
171+
}
172+
#diversity-desktop {
173+
display: none;
174+
}
175+
#diversity-mobile #one {
176+
position: relative;
177+
width :100%;
178+
}
179+
#diversity-mobile #two {
180+
position: relative;
181+
color :white;
182+
background: linear-gradient(330deg, #4C4491 0%, #FD5C63 100%);
183+
width :100%;
184+
}
185+
#diversity-mobile #three {
186+
position: relative;
187+
188+
width :100%;
189+
}
190+
#diversity-mobile #one #image {
191+
width :100%;
192+
}
193+
#diversity-mobile img {
194+
width :100%;
195+
padding :30px;
196+
}
197+
#diversity-mobile #data {
198+
padding :30px;
199+
text-align: justify;
200+
}
201+
#diversity-mobile #two #image {
202+
width :100%;
203+
}
204+
#diversity-mobile #three #image {
205+
width :100%;
206+
}
207+
208+
209+
}
210+
@media only screen and (min-width: 1024px) and (max-width: 1134px){
211+
#diversity-desktop #one #image img {
212+
padding-top :110px;
213+
padding-bottom: 0px;
214+
}
215+
#diversity-desktop #two #image img {
216+
padding-top :60px;
217+
padding-bottom: 0px;
218+
}
219+
#diversity-desktop #three #image img {
220+
padding-top :130px;
221+
padding-bottom: 0px;
222+
}
223+
}
224+
</style>
23225
<body>
24226
<!--[if lte IE 9]>
25227
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
@@ -148,6 +350,73 @@ <h3 class="timeline__title">18th Mar 5:00 PM :- Prize Distribution & Feedback Se
148350
</div>
149351
</div>
150352
</section>
353+
<section id="diversity-desktop">
354+
<div id="one">
355+
<div class="foo1">
356+
<div id="heading">
357+
<center><h1>CELEBRATING DIVERSITY</h1></center>
358+
</div>
359+
</div>
360+
<div class="foo2">
361+
<div id="image">
362+
<img src="static/img/div1.jpg">
363+
</div>
364+
<div class="content"> <div id="data"> At Hack In The North, we create an environment that brings developers together irrespective of their gender, race, sexual orientation, socioeconomic background or ethnicity. Ever since its inception, Hack In The North has been extremely devoted to the cause of celebrating diversity among its participants. Over the years, we have strived to make sure that women get a chance to showcase their experience with all fairness - HINT 2.0 had a direct entry to any and all girls’ teams and individual entries.
365+
</div></div>
366+
</div> <!-- <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis est maximus, egestas arcu sit amet, consequat arcu. Vestibulum malesuada neque id sapien ullamcorper rhoncus. Maecenas sollicitudin ante et nibh dapibus eleifend. Cras condimentum vulputate augue vitae gravida. Phasellus volutpat, nisl et dictum posuere, nulla arcu feugiat magna, a volutpat tellus libero sed orci. Vivamus vitae hendrerit eros. Aliquam diam purus, viverra in aliquam vel, pharetra a lorem. Mauris maximus suscipit interdum. Donec mattis magna ut tortor sodales posuere. Fusce convallis sagittis efficitur. Aliquam malesuada turpis quis enim pulvinar, eget mattis sem vulputate. Duis varius sit amet quam sit amet aliquam. Maecenas fermentum lorem odio, eu vestibulum libero gravida sed. Nulla facilisi.div>
367+
--> </div>
368+
<div id="two">
369+
<div id="image">
370+
<img src="static/img/div2.jpg">
371+
</div>
372+
<div class="content"> <div id="data"> In HINT 2.0, the best performing girls’ team received special prizes and swags from our side as a token of appreciation for their remarkable efforts. Continuing this tradition, this year, we plan on going a step further and introduce contests especially for female developers so as to promote their interests, and the larger cause of equality and diversity.
373+
</div></div>
374+
</div>
375+
<div id="three">
376+
<div id="image">
377+
<img src="static/img/div3.jpg">
378+
</div>
379+
<div class="content"> <div id="data">As a part of promotions for Hack In The North 3.0, IIITAHacks 2.0 was conducted on October 28-29, 2017 aiming to increase girl participation and encourage the hackathon culture among the student body at IIIT Allahabad and nearby colleges like Motilal Nehru National Institute of Technology, Allahabad. It was a resounding success, with many more girls’ teams having participated as a result.
380+
For HINT 3.0, we will be considering all teams equally on merit - as we always have. However, we promise that the participation will have equal representation from all demographics - making sure women have considerable representation in this edition of HINT as well.
381+
382+
</div></div>
383+
<!-- <div class="content"><center><h1>Content</h1></center></div> -->
384+
</div>
385+
386+
</section>
387+
<section id="diversity-mobile">
388+
<div id="one">
389+
<div class="foo1">
390+
<div id="heading">
391+
<center><h1>CELEBRATING DIVERSITY</h1></center>
392+
</div>
393+
</div>
394+
<div class="foo2">
395+
<div id="image">
396+
<img src="static/img/div1.jpg">
397+
</div>
398+
<div class="content"> <div id="data"> At Hack In The North, we create an environment that brings developers together irrespective of their gender, race, sexual orientation, socioeconomic background or ethnicity. Ever since its inception, Hack In The North has been extremely devoted to the cause of celebrating diversity among its participants. Over the years, we have strived to make sure that women get a chance to showcase their experience with all fairness - HINT 2.0 had a direct entry to any and all girls’ teams and individual entries.
399+
</div></div>
400+
</div> <!-- <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis est maximus, egestas arcu sit amet, consequat arcu. Vestibulum malesuada neque id sapien ullamcorper rhoncus. Maecenas sollicitudin ante et nibh dapibus eleifend. Cras condimentum vulputate augue vitae gravida. Phasellus volutpat, nisl et dictum posuere, nulla arcu feugiat magna, a volutpat tellus libero sed orci. Vivamus vitae hendrerit eros. Aliquam diam purus, viverra in aliquam vel, pharetra a lorem. Mauris maximus suscipit interdum. Donec mattis magna ut tortor sodales posuere. Fusce convallis sagittis efficitur. Aliquam malesuada turpis quis enim pulvinar, eget mattis sem vulputate. Duis varius sit amet quam sit amet aliquam. Maecenas fermentum lorem odio, eu vestibulum libero gravida sed. Nulla facilisi.div>
401+
--> </div>
402+
<div id="two">
403+
<div id="image">
404+
<img src="static/img/div2.jpg">
405+
</div>
406+
<div class="content"> <div id="data"> In HINT 2.0, the best performing girls’ team received special prizes and swags from our side as a token of appreciation for their remarkable efforts. Continuing this tradition, this year, we plan on going a step further and introduce contests especially for female developers so as to promote their interests, and the larger cause of equality and diversity.
407+
</div></div>
408+
</div>
409+
<div id="three">
410+
<div id="image">
411+
<img src="static/img/div3.jpg">
412+
</div>
413+
<div class="content"> <div id="data">As a part of promotions for Hack In The North 3.0, IIITAHacks 2.0 was conducted on October 28-29, 2017 aiming to increase girl participation and encourage the hackathon culture among the student body at IIIT Allahabad and nearby colleges like Motilal Nehru National Institute of Technology, Allahabad. It was a resounding success, with many more girls’ teams having participated as a result.
414+
For HINT 3.0, we will be considering all teams equally on merit - as we always have. However, we promise that the participation will have equal representation from all demographics - making sure women have considerable representation in this edition of HINT as well.
415+
416+
</div></div>
417+
<!-- <div class="content"><center><h1>Content</h1></center></div> -->
418+
</div>
419+
</section>
151420

152421
<section id="faq" style="height: auto;">
153422
<div style="background: rgba(0,0,0,0.5);">
@@ -212,6 +481,7 @@ <h3>FAQ</h3>
212481
</div>
213482
</div>
214483
</section>
484+
215485
<section id="sponsors">
216486

217487
<!-- desktop -->

‎static/css/main.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ li{padding-top:30px;padding-left:35px;padding-right:35px;font-size:14px;letter-s
5252
#about h1,
5353
#about h2,
5454
#about h3{font-family:'Open Sans', serif;;}
55-
#faq{background-image:url(../img/faqtry.jpg);background-size:cover;background-repeat:no-repeat;color:#fff;margin-bottom:10vh;}
55+
#faq{background-image:url(../img/faqtry.jpg);background-size:cover;background-repeat:no-repeat;color:#fff;}
5656
#faq .contents{padding:50px 10%;text-align:center;font-size:20px;}
5757
#faq h3{text-align:center;font-size:3em;text-transform:uppercase;letter-spacing:.03em;margin-bottom:30px;}
5858
#faq .faqcolumn{width:45%;display:inline-block;margin:0px 1%;vertical-align:top;}

‎static/img/div1.jpg‎

109 KB
Loading

‎static/img/div2.jpg‎

107 KB
Loading

‎static/img/div3.jpg‎

115 KB
Loading

0 commit comments

Comments
 (0)