Skip to content

Commit be7490e

Browse files
aswanthkoleriaswanthkoleri
committed
add diversity section
1 parent 38cc6d9 commit be7490e

1 file changed

Lines changed: 255 additions & 1 deletion

File tree

‎index.html‎

Lines changed: 255 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,202 @@
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 :900px;
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 :700px;
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 : 550px;
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 : 50%;
59+
float: left;
60+
height: 100%;
61+
62+
}
63+
#diversity-desktop #one .content {
64+
width : 50%;
65+
float : right;
66+
height: 100%;
67+
}
68+
#diversity-desktop #one #image img {
69+
width: 100%;
70+
height: auto;
71+
padding : 50px;
72+
padding-top : 130px;
73+
padding-bottom: 130px;
74+
}
75+
#diversity-desktop #one .content #data{
76+
font-size : 20px;
77+
text-align: justify;
78+
width : 100%;
79+
height: auto;
80+
padding : 50px;
81+
padding-top : 130px;
82+
padding-bottom: 130px;
83+
}
84+
#diversity-desktop #three #image {
85+
width : 50%;
86+
float: left;
87+
height: 100%;
88+
89+
}
90+
#diversity-desktop #three .content {
91+
width : 50%;
92+
float : right;
93+
height: 100%;
94+
}
95+
#diversity-desktop #three #image img {
96+
width: 100%;
97+
height: auto;
98+
padding : 50px;
99+
padding-top : 130px;
100+
padding-bottom: 130px;
101+
}
102+
#diversity-desktop #three .content #data{
103+
font-size : 20px;
104+
text-align: justify;
105+
width : 100%;
106+
height: 100%;
107+
padding : 50px;
108+
padding-top : 130px;
109+
padding-bottom: 130px;
110+
}
111+
#diversity-desktop #two #image {
112+
width : 50%;
113+
float: right;
114+
height: 100%;
115+
116+
}
117+
#diversity-desktop #two .content {
118+
width : 50%;
119+
float : left;
120+
height: 100%;
121+
}
122+
#diversity-desktop #two #image img {
123+
width: 100%;
124+
height: auto;
125+
padding : 50px;
126+
padding-top : 60px;
127+
padding-bottom: 60px;
128+
}
129+
#diversity-desktop #two .content #data{
130+
font-size : 20px;
131+
color : white;
132+
text-align: justify;
133+
width : 100%;
134+
height: 100%;
135+
padding : 50px;
136+
padding-top : 60px;
137+
padding-bottom: 60px;
138+
}
139+
#diversity-desktop #one .foo {
140+
position: absolute;
141+
142+
143+
}
144+
#diversity-desktop #one .foo #heading {
145+
font-size: 50px;
146+
padding : 20px;
147+
margin-left: 40%;
148+
}
149+
#diversity-desktop .foo1 {
150+
height: 150px;
151+
152+
}
153+
#diversity-desktop .foo2 {
154+
height: 750px;
155+
}
156+
#diversity-desktop .foo1 #heading {
157+
158+
padding : 80px;
159+
}
160+
#diversity-desktop .foo1 h1 {
161+
font-size: 80px;
162+
}
163+
164+
/* Diversity section for mobile */
165+
@media only screen and (max-width: 1023px) {
166+
#diversity-mobile {
167+
display: block;
168+
}
169+
#diversity-desktop {
170+
display: none;
171+
}
172+
#diversity-mobile #one {
173+
position: relative;
174+
175+
width :100%;
176+
}
177+
#diversity-mobile #two {
178+
position: relative;
179+
color :white;
180+
background: linear-gradient(330deg, #4C4491 0%, #FD5C63 100%);
181+
width :100%;
182+
}
183+
#diversity-mobile #three {
184+
position: relative;
185+
186+
width :100%;
187+
}
188+
#diversity-mobile #one #image {
189+
width :100%;
190+
}
191+
#diversity-mobile img {
192+
width :100%;
193+
padding :30px;
194+
}
195+
#diversity-mobile #data {
196+
padding :30px;
197+
}
198+
#diversity-mobile #two #image {
199+
width :100%;
200+
}
201+
#diversity-mobile #three #image {
202+
width :100%;
203+
}
204+
205+
206+
}
207+
@media only screen and (min-width: 1024px) and (max-width: 1134px){
208+
#diversity-desktop #one {
209+
height : 1000px;
210+
}
211+
#diversity-desktop #two {
212+
height: 690px;
213+
}
214+
#diversity-desktop #three {
215+
height: 800px;
216+
}
217+
}
218+
</style>
23219
<body>
24220
<!--[if lte IE 9]>
25221
<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>
@@ -212,6 +408,64 @@ <h3>FAQ</h3>
212408
</div>
213409
</div>
214410
</section>
411+
<section id="diversity-desktop">
412+
<div id="one">
413+
<div class="foo1">
414+
<div id="heading">
415+
<center><h1>Diversity section</h1></center>
416+
</div>
417+
</div>
418+
<div class="foo2">
419+
<div id="image">
420+
<img src="static/img/hint.jpg">
421+
</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>
423+
</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>
424+
--> </div>
425+
<div id="two">
426+
<div id="image">
427+
<img src="static/img/hint.jpg">
428+
</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>
430+
</div>
431+
<div id="three">
432+
<div id="image">
433+
<img src="static/img/hint.jpg">
434+
</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>
436+
<!-- <div class="content"><center><h1>Content</h1></center></div> -->
437+
</div>
438+
</section>
439+
<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>
453+
</div>
454+
<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+
460+
</div>
461+
<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+
467+
</div>
468+
</section>
215469
<section id="sponsors">
216470

217471
<!-- desktop -->

0 commit comments

Comments
 (0)