HTML > CSS > GO! -A CSS Battle open to SSN & SNU students

Replicate the given design using HTML&CSS in under 60 minutes and win cash prize pool of 3K INR. NOTE: Students from SSN and SNU college can only participate in this. Courtesy of MOTORQ

Sep 25, 2022, 12:30 – 2:00 PM



Key Themes

UI / UXWeb

About this event

>You will be given 60mins to replicate the design given below

{{ will insert the link later }}

>Follow these steps to implement the given design:

(You will be evaluated only when you follow these steps)

1) Create a directory named “<name>_<register number>”

Eg: vigneshbalaji_205001126

2) Create two files inside that directory



     — index.html

     — style.css

3) Download the following .zip file and extract it in the main directory.

{{ will insert the link later }}



      — assets

      — index.html

      — style.css

Note: If you are using a JS framework, you do not need to follow the above structure.

Just make sure the topmost directory is named in the given format and that you

include a readme.txt on how to run your app.

4) Start implementing the design keeping the following rules in mind:

i) You can use the inline or embedded CSS as well, however, using the external CSS is recommended.

ii) No CSS frameworks are allowed.(for example, tailwind, bootstrap, etc)

iii) You are allowed to refer to documents or the internet in general.(yeah, you can google stuff XD)

iv) Your submission will not be considered if submitted past the deadline.(We are so strict about this)

5) After implementing convert/compress the main directory into a .zip file

Eg: —vigneshbalaji_205001126 —> (or .gz)

6) Upload the .zip file in the following google form:

{{ will insert the link later }}

> Judging criteria and Prizes

1) Do not worry if you cannot implement it fully, the prizes will be given considering the relative


2) Prize money distribution is as follows:

Rank 1: 1500 Rupees

Rank 2: 1000 Rupees

Rank 3: 500 Rupees

3) The judging points in the decreasing order of priority are as follows:

i) Number of elements included.

ii) Styling–Positioning of the elements.

iii) Styling–Appearance of the elements.

a) Size

b) Blending

c) Color

iv) Transition and animation of the elements.

v) Responsiveness of the window.

vi) Google form submitted time.


  • Charumathi P


    GDSC Lead

  • Sanjjit S


Contact Us