Skip to content

Commit 392d75c

Browse files
ajitzeroajitzero
committed
👾 UI/UX improvements
1 parent 00349b7 commit 392d75c

File tree

5 files changed

+270
-341
lines changed

5 files changed

+270
-341
lines changed

‎index.html‎

Lines changed: 71 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@
7575

7676
<div id="Home" class="container-fluid">
7777
<div class="row">
78-
<div class="intro-content col-sm-10 offset-sm-1 col-md-6 offset-md-3 d-flex justify-content-center align-items-center flex-column">
78+
<div class="intro-content col-sm-10 offset-sm-1 col-md-4 offset-md-1 d-flex justify-content-center align-items-center flex-column">
7979
<div>
8080
<img id="landing-logo" src="./assets/brand/main-logo-sq.png" alt="CSI Logo">
8181
</div>
@@ -91,84 +91,92 @@ <h3>We are a team of students in GITAM that aim to promote coding as being fun,
9191
</p>
9292
</div>
9393
</div>
94+
<div class="intro-content col-sm-10 offset-sm-1 col-md-5 offset-md-1 d-flex justify-content-center align-items-center flex-column">
95+
<h3>You just missed Week #8 🤭</h3>
96+
<br />
97+
<img style="background: #353b32;" class="poster old-pic" src="assets/poster/w8.png" alt="Rookie Hour #2 Poster">
98+
<br />
99+
<h4 class="text-light">But don't fret! We'll be back soon. Check this space later for latest updates!</h4>
100+
</div>
94101
</div>
95102
</div>
103+
</div>
96104

97-
<div id="About" class="container">
98-
<div class="alert alert-success mt-4 text-center" role="alert">
99-
<h2>
100-
Attempt 👉 Practice 👉 Repeat! <br />
101-
<code>/* Infinite loop achieved! 🎉 */</code>
102-
</h2>
105+
<div id="About" class="container">
106+
<div class="alert alert-success mt-4 text-center" role="alert">
107+
<h2>
108+
Attempt 👉 Practice 👉 Repeat! <br />
109+
<code>/* Infinite loop achieved! 🎉 */</code>
110+
</h2>
111+
</div>
112+
<div class="row">
113+
<div class="col-sm-10 offset-sm-1 col-md-5 offset-md-1 col-lg-6 offset-lg-0">
114+
<h2>Mission</h2>
115+
<p>To develop a community of people that <code>💜</code> to <code>code</code> and enhance their knowledge through practice, collaboration and sharing!</p>
116+
117+
<h2>How do we do it?</h2>
118+
<ul>
119+
<li>Challenges are placed in an online interface and must be solved in a specified interval of time.</li>
120+
<li>There are <code>6</code> questions consisting of (usually) <code>2 Easy, 2 Medium &amp; 2 Hard</code> questions. Try our previous questions in the <code><a href="archive" target="blank">Archive</a></code>.</li>
121+
<li>Each question must pass the hidden test cases in addition to the given sample test cases.</li>
122+
<li>Each test case has some predefined weightage as a part of the total score of the question, and these may not be equal.</li>
123+
<li>The attendees are to attempt these questions in one of the labs assigned.</li>
124+
<li>The <code>2</code> highest scorers are given gifts in collaboration with the Head of Department (CSE).</li>
125+
</ul>
103126
</div>
104-
<div class="row">
105-
<div class="col-sm-10 offset-sm-1 col-md-5 offset-md-1 col-lg-6 offset-lg-0">
106-
<h2>Mission</h2>
107-
<p>To develop a community of people that <code>💜</code> to <code>code</code> and enhance their knowledge through practice, collaboration and sharing!</p>
108-
109-
<h2>How do we do it?</h2>
110-
<ul>
111-
<li>Challenges are placed in an online interface and must be solved in a specified interval of time.</li>
112-
<li>There are <code>6</code> questions consisting of (usually) <code>2 Easy, 2 Medium &amp; 2 Hard</code> questions. Try our previous questions in the <code><a href="archive" target="blank">Archive</a></code>.</li>
113-
<li>Each question must pass the hidden test cases in addition to the given sample test cases.</li>
114-
<li>Each test case has some predefined weightage as a part of the total score of the question, and these may not be equal.</li>
115-
<li>The attendees are to attempt these questions in one of the labs assigned.</li>
116-
<li>The <code>2</code> highest scorers are given gifts in collaboration with the Head of Department (CSE).</li>
117-
</ul>
118-
</div>
119127

120-
<div class="col-sm-10 offset-sm-1 col-md-5 offset-md-0 col-lg-6">
121-
<h2>Where is this event organised?</h2>
122-
<p>🖥️ The event itself is organised in the labs of the Department of CSE, however the specific details of the room numbers will be provided within <code>2-3 days</code> of organising the contest.</p>
128+
<div class="col-sm-10 offset-sm-1 col-md-5 offset-md-0 col-lg-6">
129+
<h2>Where is this event organised?</h2>
130+
<p>🖥️ The event itself is organised in the labs of the Department of CSE, however the specific details of the room numbers will be provided within <code>2-3 days</code> of organising the contest.</p>
123131

124-
<h2>How do you find out more?</h2>
125-
<p>📌 Information will be sent to you via text or through your AMC &amp; Class Representative. We also put up information on various notice boards throughout ICT building and the G-Notice board.</p>
132+
<h2>How do you find out more?</h2>
133+
<p>📌 Information will be sent to you via text or through your AMC &amp; Class Representative. We also put up information on various notice boards throughout ICT building and the G-Notice board.</p>
126134

127-
<h2>Where can I start practicing?</h2>
128-
<p>🎲 There are several online resources where you can get started: <code><a href="https://www.hackerrank.com/" target="blank">HackerRank</a>, <a href="https://www.hackerearth.com/" target="blank">HackerEarth</a>, <a href="https://www.geeksforgeeks.org/" target="blank">GeeksforGeeks</a>, <a href="https://www.codechef.com/" target="blank">CodeChef</a>, <a href="http://codeforces.com/" target="blank">Codeforces</a>, <a href="https://www.spoj.com/" target="blank">SPOJ</a> &amp; <a href="https://www.topcoder.com/" target="blank">TopCoder</a></code></p>
129-
</div>
135+
<h2>Where can I start practicing?</h2>
136+
<p>🎲 There are several online resources where you can get started: <code><a href="https://www.hackerrank.com/" target="blank">HackerRank</a>, <a href="https://www.hackerearth.com/" target="blank">HackerEarth</a>, <a href="https://www.geeksforgeeks.org/" target="blank">GeeksforGeeks</a>, <a href="https://www.codechef.com/" target="blank">CodeChef</a>, <a href="http://codeforces.com/" target="blank">Codeforces</a>, <a href="https://www.spoj.com/" target="blank">SPOJ</a> &amp; <a href="https://www.topcoder.com/" target="blank">TopCoder</a></code></p>
130137
</div>
131138
</div>
132-
<div id="suggestion-grid" class="container">
133-
<div class="row">
134-
<div class="col-10 offset-1">
135-
<a href="schedule">
136-
<div class="suggestion-card" style="color: #FFF; background: rgba(72, 38, 155, 0.7)">
137-
<h3>🗓️ Schedule</h3>
138-
<h5>Save the date</h5>
139-
</div>
140-
</a>
141-
<a href="archive">
142-
<div class="suggestion-card">
143-
<h3>📚 Archive</h3>
144-
<h5>Previous Questions</h5>
145-
</div>
146-
</a>
147-
<a href="leaderboard">
148-
<div class="suggestion-card">
149-
<h3>🏆 Leaderboard</h3>
150-
<h5>Hall of Fame</h5>
151-
</div>
152-
</a>
153-
</div>
139+
</div>
140+
<div id="suggestion-grid" class="container">
141+
<div class="row">
142+
<div class="col-10 offset-1">
143+
<a href="schedule">
144+
<div class="suggestion-card">
145+
<h3>🗓️ Schedule</h3>
146+
<h5>Save the date</h5>
147+
</div>
148+
</a>
149+
<a href="archive">
150+
<div class="suggestion-card primary-card">
151+
<h3>📚 Archive</h3>
152+
<h5>Previous Questions</h5>
153+
</div>
154+
</a>
155+
<a href="leaderboard">
156+
<div class="suggestion-card">
157+
<h3>🏆 Leaderboard</h3>
158+
<h5>Hall of Fame</h5>
159+
</div>
160+
</a>
154161
</div>
155162
</div>
156163
</div>
164+
</div>
157165

158-
<footer id="End-Game" class="container-fluid">
159-
<div class="container">
160-
<div class="row">
161-
<div class="col-sm-10 offset-sm-1 col-md-10 offset-md-1 col-lg-10 offset-lg-1">
162-
<h2>Questions? We'd be happy to help! <a href="contact" class="btn">Contact Us</a></h2>
163-
</div>
166+
<footer id="End-Game" class="container-fluid">
167+
<div class="container">
168+
<div class="row">
169+
<div class="col-sm-10 offset-sm-1 col-md-10 offset-md-1 col-lg-10 offset-lg-1">
170+
<h2>Questions? We'd be happy to help! <a href="contact" class="btn">Contact Us</a></h2>
164171
</div>
165172
</div>
166-
</footer>
173+
</div>
174+
</footer>
167175

168-
<!-- Bootstrap core JavaScript -->
169-
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
170-
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
171-
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
176+
<!-- Bootstrap core JavaScript -->
177+
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
178+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
179+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
172180

173181
</body>
174182
</html>

‎sass/base.sass‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
@import url('https://fonts.googleapis.com/css?family=Lato|Playfair+Display')
1+
@import url('https://fonts.googleapis.com/css?family=Lato|Rubik:500&display=swap')
22

33
// Fonts
4-
$serif: 'Playfair Display', serif
5-
$sans-serif: 'Lato Light', Helvetica, Arial, sans-serif
4+
$serif: 'Rubik', 'Segou UI', serif
5+
$sans-serif: 'Lato Light', -apple-system,BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', sans-serif
66

77
// Colors
88
$primary-dark: rgb(18, 0, 45)
@@ -20,13 +20,6 @@ $bp-lg: "min-width: 992px"
2020
$bp-xl: "min-width: 1200px"
2121

2222
// @media( #{$bp-sm})
23-
// code here
24-
2523
// @media( #{$bp-md})
26-
// code here
27-
2824
// @media( #{$bp-lg})
29-
// code here
30-
3125
// @media( #{$bp-xl})
32-
// code here

‎sass/style.sass‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -98,8 +98,8 @@ h1, h2, h3, h4, h5, h6
9898
#End-Game
9999
background-color: #000
100100
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='30' viewBox='0 0 1000 120'%3E%3Cg fill='none' stroke='%23222' stroke-width='10' %3E%3Cpath d='M-500 75c0 0 125-30 250-30S0 75 0 75s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 45c0 0 125-30 250-30S0 45 0 45s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 105c0 0 125-30 250-30S0 105 0 105s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 15c0 0 125-30 250-30S0 15 0 15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500-15c0 0 125-30 250-30S0-15 0-15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 135c0 0 125-30 250-30S0 135 0 135s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3C/g%3E%3C/svg%3E")
101-
padding-bottom: 4rem
102-
padding-top: 4rem
101+
padding-bottom: 12rem
102+
padding-top: 12rem
103103
h2
104104
color: $off-light
105105
display: block
@@ -108,7 +108,7 @@ h1, h2, h3, h4, h5, h6
108108
.btn
109109
background: $primary-light
110110
border-radius: 5px
111-
box-shadow: 0 0 100px rgba($off-light, 0.5)
111+
box-shadow: 0 0 100px 20px rgba($off-light, 0.5)
112112
color: $primary-dark
113113
font-size: 1.4rem
114114
margin: 1rem auto 0
@@ -152,6 +152,13 @@ h1, h2, h3, h4, h5, h6
152152
margin: 1rem auto
153153
width: 100%
154154

155+
.primary-card
156+
color: #FFF
157+
background: rgba(72, 38, 155, 0.8)
158+
transform: scale(1.05)
159+
&:hover
160+
background: rgba(72, 38, 155, 0.7)
161+
155162
#Archive, #Leaderboard, #Schedule, #Contact
156163
margin-top: 9rem
157164
h1
@@ -198,6 +205,10 @@ h1, h2, h3, h4, h5, h6
198205
overflow: hidden
199206
transition: all .3s ease-in-out
200207
width: 100%
208+
&.old-pic
209+
filter: grayscale(1)
210+
&:hover
211+
filter: grayscale(0)
201212
@media( #{$bp-md})
202213
border-radius: .5rem
203214

‎schedule.html‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -77,11 +77,8 @@
7777
<div class="row">
7878
<div class="col-10 offset-1">
7979
<h1>Schedule</h1>
80-
<h3 class="text-md-center">
80+
<p class="lead text-md-center">
8181
<u>Up next:</u> Code Hackathon Week #9 is expected to take place in a few weeks.
82-
<!--
83-
<a href="https://bit.ly/w8-coh" class="btn btn-success" target="_blank">Register Now!</a>
84-
-->
8582
</h3>
8683
</div>
8784
</div>
@@ -96,7 +93,7 @@ <h3 class="text-md-center">
9693
<div id="suggestion-grid" class="container">
9794
<div class="row">
9895
<div class="col-10 offset-1">
99-
<h3>While you're waiting for the next events, check our previous problems:</h3>
96+
<h5 class="text-md-center">While you're waiting for the next events, check our previous problems:</h5>
10097
<a href="archive">
10198
<div id="suggest-one" class="suggestion-card">
10299
<h3>📚 Archive</h3>

0 commit comments

Comments
 (0)