Skip to content

Commit 6d3f6f8

Browse files
gauthamzzgauthamzz
authored
Merge pull request #146 from OrionStar25/about
Responsive About
2 parents e6783eb + b871dca commit 6d3f6f8

File tree

2 files changed

+65
-15
lines changed

2 files changed

+65
-15
lines changed

‎main/index.html‎

Lines changed: 25 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,13 @@
33
<head>
44
<meta charset="utf-8">
55
<meta http-equiv="x-ua-compatible" content="ie=edge">
6-
<title>HINT v3.0</title>
6+
<title>Hack In The North 3.0 - India's Biggest Student Hackathon</title>
77
<meta name="description" content="">
8-
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
99

1010
<link rel="manifest" href="site.webmanifest">
1111
<link rel="apple-touch-icon" href="icon.png">
12+
<link rel="shortcut icon" href="static/img/logo-color-small.png">
1213
<!-- Place favicon.ico in the root directory -->
1314

1415
<!-- TO DO : Remove unused fonts imports -->
@@ -35,6 +36,7 @@
3536
<span class="icon-bar"></span>
3637
<span class="icon-bar"></span>
3738
<span class="icon-bar"></span>
39+
<span class="icon-bar"></span>
3840
</button>
3941

4042
<!--<a id="nav_home" href="#landing" class="nav-link">
@@ -56,6 +58,9 @@
5658
<li>
5759
<a id="nav_hackers" href="#contact" class="nav-link">CONTACT</a>
5860
</li>
61+
<li>
62+
<a id="nav_hackers" href="https://hackcodeofconduct.org/530-hack_in_the_north_2018" class="nav-link">CODE OF CONDUCT</a>
63+
</li>
5964
<!-- <li>
6065
<a href="404.html" class="nav-link call-to-action">LIVE</a>
6166
</li> -->
@@ -79,7 +84,7 @@ <h3 class="landing-subtitle">March XX-XX, 2018</h3>
7984
<h3 class="landing-subtitle">Indian Institute of Information Technology, Allahabad</h3>
8085
</div>
8186
<div class="row col-md-12 text-center wow fadeIn" data-wow-delay="1s">
82-
<h4>Applications are now open.</h4>
87+
<h4>Applications are open now.</h4>
8388
</div>
8489
<div class="row col-md-12 text-center wow fadeIn" data-wow-delay="1s">
8590
<br>
@@ -88,6 +93,7 @@ <h4>Applications are now open.</h4>
8893
</div>
8994
</div>
9095
</section>
96+
9197
<section id="about" class="fullpage" style="background-image: linear-gradient(330deg, #4C4491 0%, #FD5C63 100%);">
9298
<div class="container-fluid">
9399
<div class="card-panel z-depth-5 wow fadeInUp">
@@ -118,6 +124,7 @@ <h4 class="wow fadeInUp" data-wow-delay="0.4s" style="line-height: 2em;">Hack In
118124
<div class="card-panel z-depth-5">jknksakd</div>
119125
</div>-->
120126
</section>
127+
121128
<section>
122129
<h2 class="timeline__item timeline__item--year">SCHEDULE</h2>
123130
<div class="timeline">
@@ -144,6 +151,7 @@ <h3 class="timeline__title">Repellendus nostrum alias odit.</h2>
144151
</div>
145152
</div>
146153
</section>
154+
147155
<section id="faq" class="fullpage">
148156
<div class="contents">
149157
<h3>FAQ</h3>
@@ -181,16 +189,18 @@ <h3>FAQ</h3>
181189
<div class="box" id="box5">
182190
<div class="box-inner" id="faq5"> Hack In The North is run by students of IIIT Allahabad.</div></div>
183191
</div>
184-
<div class="faqelem wow fadeInUp" data-wow-delay="0.2s">
185-
<div class="question" id="ques6">What should I bring?</div>
186-
<div class="box" id="box6">
187-
<div class="box-inner" id="faq6"> Laptop, Charger and Change of clothes. If you want to hack on Arduino, PI, Oculus Rift or any other hardware we recommend you to bring that too if you have one. You won't need food or drinks; we've got you covered there.</div></div>
188-
</div>
189-
<div class="faqelem wow fadeInUp" data-wow-delay="0.4s">
190-
<div class="question" id="ques7">How to reach IIIT Allahabad?</div>
191-
<div class="box" id="box7">
192-
<div class="box-inner" id="faq7"> Allahabad is well connected to all major cities of India by Train. There is also a domestic airport in Allahabad which have daily serice to Delhi. Varansi International Airport is 3 hour drive from Allahabad while Lucknow International Airport is 5 hour away.</div></div>
192+
<div class="faqelem wow fadeInUp" data-wow-delay="0.2s">
193+
<div class="question" id="ques6">How to reach IIIT Allahabad?</div>
194+
<div class="box" id="box6">
195+
<div class="box-inner" id="faq6"> Allahabad is well connected to all major cities of India by Train. There is also a domestic airport in Allahabad which have daily serice to Delhi. Varansi International Airport is 3 hour drive from Allahabad while Lucknow International Airport is 5 hour away.</div>
193196
</div>
197+
</div>
198+
<div class="faqelem wow fadeInUp" data-wow-delay="0.4s">
199+
<div class="question" id="ques7">What should I bring?</div>
200+
<div class="box" id="box7">
201+
<div class="box-inner" id="faq7"> Laptop, Charger and Change of clothes. If you want to hack on Arduino, PI, Oculus Rift or any other hardware we recommend you to bring that too if you have one. You won't need food or drinks; we've got you covered there.</div></div>
202+
</div>
203+
194204
<div class="faqelem wow fadeInUp" data-wow-delay="0.6s">
195205
<div class="question" id="ques8">New Ques 2?</div>
196206
<div class="box" id="box8">
@@ -223,6 +233,7 @@ <h2>Past Sponsors</h2>
223233
</div>
224234
</div>
225235
</section>
236+
226237
<section class="fullpage">
227238
<iframe frameborder="0" style="border:0;width: 100%;height: 100%;" src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJUUSUaMfKmjkRP0z3MaADDB8&key=AIzaSyCXhxhjqpjf9dQjeC7dwC2wirjEjHvQixE" allowfullscreen></iframe>
228239
</section>
@@ -246,10 +257,11 @@ <h4>Drop us a mail at <strong>[email protected]</strong></h4>
246257
</div>
247258
</div>
248259
</section>
260+
249261
<section id="footer">
250262
<div class="contents text-center row">
251263
<div class="col-md-6 col-md-offset-3 footer-text">
252-
©2017 Hack In The North<br/>
264+
<a style="color: white" href="https://hackcodeofconduct.org/530-hack_in_the_north_2018">Code of Conduct </a>| ©2017 Hack In The North<br/>
253265
All other trademarks and logos ® their respective owners.<br />
254266
Made with ♥ by <a class="footer-team-link" href="#">Team HINT</a></div>
255267
<div class="social wow fadeInUp col-md-3">

‎main/static/css/cards.css‎

Lines changed: 40 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
11
.box{
22
border: 3px solid #fff;
33
}
4+
45
.box-inner{
56
padding: 20px;
67
}
8+
79
.fullpage{
810
height: 90vh;
911
}
12+
1013
#about {
1114
text-align: justify;
1215
}
16+
1317
.card-panel {
1418
-webkit-transition: -webkit-box-shadow .25s;
1519
transition: -webkit-box-shadow .25s;
@@ -19,29 +23,52 @@
1923
margin: 15vh auto 2rem auto;
2024
border-radius: 5px;
2125
background-color: #fff;
22-
width: 50%;
26+
width: 60%;
27+
height: 50%;
2328
position: relative;
2429
}
30+
2531
.card-panel:hover{
2632
-webkit-box-shadow: 0 26px 34px 4px rgba(0, 0, 0, 0.44), 0 16px 40px 10px rgba(0, 0, 0, 0.42), 0 12px 14px -10px rgba(0, 0, 0, 0.4);
2733
box-shadow: 0 26px 34px 4px rgba(0, 0, 0, 0.44), 0 16px 40px 10px rgba(0, 0, 0, 0.42), 0 12px 14px -10px rgba(0, 0, 0, 0.4);
2834
}
29-
@media (max-width: 600px){
35+
36+
@media (max-width: 500px){
37+
.card-panel{
38+
width: 100%;
39+
height: 70vh;
40+
}
41+
.card-panel h4{
42+
font-size: 4vw;
43+
}
44+
}
45+
@media (max-width: 1250px){
3046
.card-panel{
3147
width: 100%;
48+
height: 70vh;
49+
}
50+
.card-panel h4{
51+
font-size: 2vw;
3252
}
3353
}
54+
3455
.z-depth-5 {
3556
-webkit-box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
3657
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
3758
}
59+
60+
#faq h3 {
61+
margin-top: 0;
62+
}
63+
3864
/*timeline*/
3965
.timeline {
4066
position: relative;
4167
padding: 1rem;
4268
margin: 0 auto;
4369
max-width: 1300px;
4470
}
71+
4572
.timeline:before {
4673
content: '';
4774
position: absolute;
@@ -50,11 +77,13 @@
5077
right: 40px;
5178
top: 0;
5279
}
80+
5381
.timeline:after {
5482
content: "";
5583
display: table;
5684
clear: both;
5785
}
86+
5887
@media screen and (min-width: 700px) {
5988
.timeline {
6089
padding: 2rem;
@@ -74,10 +103,12 @@
74103
margin: 1rem 3rem 1rem 1rem;
75104
clear: both;
76105
}
106+
77107
.timeline__item:after, .timeline__item:before {
78108
content: '';
79109
position: absolute;
80110
}
111+
81112
.timeline__item:before {
82113
right: -10px;
83114
top: calc(50% - 5px);
@@ -86,17 +117,20 @@
86117
border-width: 10px;
87118
transform: rotate(45deg);
88119
}
120+
89121
@media screen and (min-width: 700px) {
90122
.timeline__item {
91123
width: 44%;
92124
margin: 1rem;
93125
}
126+
94127
.timeline__item:nth-of-type(2n) {
95128
float: right;
96129
margin: 1rem;
97130
border-image: linear-gradient(to right, hotpink 0%, skyblue 100%);
98131
border-image-slice: 1;
99132
}
133+
100134
.timeline__item:nth-of-type(2n):before {
101135
right: auto;
102136
left: -10px;
@@ -114,19 +148,23 @@
114148
padding: .5rem 1rem 1rem;
115149
background-color: #fff;
116150
}
151+
117152
.timeline__item--year:before {
118153
display: none;
119154
}
155+
120156
@media screen and (min-width: 700px) {
121157
.timeline__item--year {
122158
text-align: center;
123159
margin: 0 auto;
124160
}
161+
125162
.timeline__item--year:nth-of-type(2n) {
126163
float: none;
127164
margin: 0 auto;
128165
border-image: none;
129166
}
167+
130168
.timeline__item--year:nth-of-type(2n):before {
131169
display: none;
132170
}

0 commit comments

Comments
 (0)