Skip to content

Commit 86b7491

Browse files
aswanthkoleriaswanthkoleri
committed
fix diversity section
1 parent bf189c3 commit 86b7491

1 file changed

Lines changed: 66 additions & 56 deletions

File tree

‎index.html‎

Lines changed: 66 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -31,108 +31,109 @@
3131

3232
#diversity-desktop #one {
3333
position: relative;
34-
height :900px;
34+
height :550px;
3535
width :100%;
3636
background: rgb(255, 255, 255);
3737
-webkit-clip-path: polygon(0 0, 100% 15%, 100% 85%, 0 100%);
3838
clip-path: polygon(0 0, 100% 15%, 100% 85%, 0 100%);
3939
}
4040
#diversity-desktop #three{
4141
position: relative;
42-
height :700px;
42+
height :400px;
4343
width :100%;
4444
background: rgb(255, 255, 255);
4545
-webkit-clip-path: polygon(0 0, 100% 15%, 100% 85%, 0 100%);
4646
clip-path: polygon(0 0, 100% 15%, 100% 85%, 0 100%);
4747
}
4848
#diversity-desktop #two{
4949
position: relative;
50-
height : 550px;
50+
height : 300px;
5151
width : 100%;
5252
background: rgb(117, 68, 145);
5353
-webkit-clip-path: polygon(0 0%, 100% 0, 100% 100%, 0 100%);
5454
clip-path: polygon(0 0%, 100% 0, 100% 100%, 0 100%);
5555
}
5656

5757
#diversity-desktop #one #image {
58-
width : 50%;
58+
width : 35%;
5959
float: left;
6060
height: 100%;
6161

6262
}
6363
#diversity-desktop #one .content {
64-
width : 50%;
64+
width : 65%;
6565
float : right;
6666
height: 100%;
6767
}
6868
#diversity-desktop #one #image img {
6969
width: 100%;
7070
height: auto;
71-
padding : 50px;
72-
padding-top : 130px;
71+
padding : 60px;
72+
padding-top : 50px;
7373
padding-bottom: 130px;
7474
}
7575
#diversity-desktop #one .content #data{
7676
font-size : 20px;
7777
text-align: justify;
7878
width : 100%;
7979
height: auto;
80-
padding : 50px;
81-
padding-top : 130px;
80+
81+
padding-right : 50px;
82+
padding-top : 110px;
8283
padding-bottom: 130px;
8384
}
8485
#diversity-desktop #three #image {
85-
width : 50%;
86+
width : 35%;
8687
float: left;
8788
height: 100%;
8889

8990
}
9091
#diversity-desktop #three .content {
91-
width : 50%;
92+
width : 65%;
9293
float : right;
9394
height: 100%;
9495
}
9596
#diversity-desktop #three #image img {
9697
width: 100%;
9798
height: auto;
98-
padding : 50px;
99-
padding-top : 130px;
99+
padding :60px;
100+
padding-top : 50px;
100101
padding-bottom: 130px;
101102
}
102103
#diversity-desktop #three .content #data{
103104
font-size : 20px;
104105
text-align: justify;
105106
width : 100%;
106107
height: 100%;
107-
padding : 50px;
108+
padding-right : 50px;
108109
padding-top : 130px;
109110
padding-bottom: 130px;
110111
}
111112
#diversity-desktop #two #image {
112-
width : 50%;
113+
width : 35%;
113114
float: right;
114115
height: 100%;
115116

116117
}
117118
#diversity-desktop #two .content {
118-
width : 50%;
119+
width : 65%;
119120
float : left;
120121
height: 100%;
121122
}
122123
#diversity-desktop #two #image img {
123124
width: 100%;
124125
height: auto;
125-
padding : 50px;
126-
padding-top : 60px;
127-
padding-bottom: 60px;
126+
padding : 70px;
127+
padding-top : 0px;
128+
padding-bottom: 0px;
128129
}
129130
#diversity-desktop #two .content #data{
130131
font-size : 20px;
131132
color : white;
132133
text-align: justify;
133134
width : 100%;
134135
height: 100%;
135-
padding : 50px;
136+
padding-left : 50px;
136137
padding-top : 60px;
137138
padding-bottom: 60px;
138139
}
@@ -142,7 +143,8 @@
142143

143144
}
144145
#diversity-desktop #one .foo #heading {
145-
font-size: 50px;
146+
font-size: 50px;
147+
146148
padding : 20px;
147149
margin-left: 40%;
148150
}
@@ -151,11 +153,11 @@
151153

152154
}
153155
#diversity-desktop .foo2 {
154-
height: 750px;
156+
height: 400px;
155157
}
156158
#diversity-desktop .foo1 #heading {
157159

158-
padding : 80px;
160+
padding : 60px;
159161
}
160162
#diversity-desktop .foo1 h1 {
161163
font-size: 80px;
@@ -205,14 +207,17 @@
205207

206208
}
207209
@media only screen and (min-width: 1024px) and (max-width: 1134px){
208-
#diversity-desktop #one {
209-
height : 1000px;
210+
#diversity-desktop #one #image img {
211+
padding-top :130px;
212+
padding-bottom: 0px;
210213
}
211-
#diversity-desktop #two {
212-
height: 690px;
214+
#diversity-desktop #two #image img {
215+
padding-top :60px;
216+
padding-bottom: 0px;
213217
}
214-
#diversity-desktop #three {
215-
height: 800px;
218+
#diversity-desktop #three #image img {
219+
padding-top :130px;
220+
padding-bottom: 0px;
216221
}
217222
}
218223
</style>
@@ -412,58 +417,63 @@ <h3>FAQ</h3>
412417
<div id="one">
413418
<div class="foo1">
414419
<div id="heading">
415-
<center><h1>Diversity section</h1></center>
420+
<center><h1>Celebrating diversity</h1></center>
416421
</div>
417422
</div>
418423
<div class="foo2">
419424
<div id="image">
420425
<img src="static/img/hint.jpg">
421426
</div>
422-
<div class="content"> <div id="data"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mae onsectetur adipi onsectetur adipiscing elit. Maescing elit. Maecenas quis est maximus, consectetur adipiscing elit. Maecenas quis est maximus, consectetur adipiscing elit. Maecenas quis est maximus, consectetur adipiscing elit. Maecenas quis est maximus, 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 di 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 </div></div>
427+
<div class="content"> <div id="data"> 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.
428+
</div></div>
423429
</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>
424430
--> </div>
425431
<div id="two">
426432
<div id="image">
427433
<img src="static/img/hint.jpg">
428434
</div>
429-
<div class="content"> <div id="data"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mae onsectetur adipi onsectetur adipiscing elit. Maescing elit. Maecenas quis est maximus, consectetur adipiscing elit. Maecenas quis est maximus, consectetur adipiscing elit. Maecenas quis est maximus, consectetur adipiscing elit. Maecenas quis est maximus, 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 di 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 </div></div>
435+
<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.
436+
</div></div>
430437
</div>
431438
<div id="three">
432439
<div id="image">
433440
<img src="static/img/hint.jpg">
434441
</div>
435-
<div class="content"> <div id="data"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mae onsectetur adipi onsectetur adipiscing elit. Maescing elit. Maecenas quis est maximus, consectetur adipiscing elit. Maecenas quis est maximus, consectetur adipiscing elit. Maecenas quis est maximus, consectetur adipiscing elit. Maecenas quis est maximus, 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 di 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 </div></div>
442+
<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.
443+
</div></div>
436444
<!-- <div class="content"><center><h1>Content</h1></center></div> -->
437445
</div>
446+
438447
</section>
439448
<section id="diversity-mobile">
440-
<div id="one">
441-
<div id="one">
442-
<div class="foo1">
443-
<div id="heading">
444-
<center><h1>Diversity section</h1></center>
445-
</div>
446-
</div>
447-
<div class="foo2">
448-
<div id="image">
449-
<img src="static/img/hint.jpg">
450-
</div>
451-
<div class="content"> <div id="data"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mae onsectetur adipi onsectetur adipiscing elit. Maescing elit. Maecenas quis est maximus, consectetur adipiscing elit. Maecenas quis est maximus, consectetur adipiscing elit. Maecenas quis est maximus, consectetur adipiscing elit. Maecenas quis est maximus, 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 di 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 </div></div>
452-
</div>
449+
<div id="one">
450+
<div class="foo1">
451+
<div id="heading">
452+
<center><h1><u>Celebrating diversity</u>x</h1></center>
453+
</div>
453454
</div>
455+
<div class="foo2">
456+
<div id="image">
457+
<img src="static/img/hint.jpg">
458+
</div>
459+
<div class="content"> <div id="data"> 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.
460+
</div></div>
461+
</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>
462+
--> </div>
454463
<div id="two">
455-
<div id="image">
456-
<img src="static/img/hint.jpg">
457-
</div>
458-
<div class="content"> <div id="data"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mae onsectetur adipi onsectetur adipiscing elit. Maescing elit. Maecenas quis est maximus, consectetur adipiscing elit. Maecenas quis est maximus, consectetur adipiscing elit. Maecenas quis est maximus, consectetur adipiscing elit. Maecenas quis est maximus, 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 di 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 </div></div>
459-
464+
<div id="image">
465+
<img src="static/img/hint.jpg">
466+
</div>
467+
<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.
468+
</div></div>
460469
</div>
461470
<div id="three">
462-
<div id="image">
463-
<img src="static/img/hint.jpg">
464-
</div>
465-
<div class="content"> <div id="data"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mae onsectetur adipi onsectetur adipiscing elit. Maescing elit. Maecenas quis est maximus, consectetur adipiscing elit. Maecenas quis est maximus, consectetur adipiscing elit. Maecenas quis est maximus, consectetur adipiscing elit. Maecenas quis est maximus, 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 di 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 </div></div>
466-
471+
<div id="image">
472+
<img src="static/img/hint.jpg">
473+
</div>
474+
<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.
475+
</div></div>
476+
<!-- <div class="content"><center><h1>Content</h1></center></div> -->
467477
</div>
468478
</section>
469479
<section id="sponsors">

0 commit comments

Comments
 (0)