search

IIITKalyaniFOSC / iiitkalyanifosc.github.io

Website for IIIT Kalyani Free and Open Source Community
https://iiitkalyanifosc.github.io/
1 stars 16 forks source link

Added projects.html #17

Closed abhishekti7 closed 6 years ago

abhishekti7 commented 6 years ago

creates a projects.html page with image gallery sort of representation. Page is fully responsive and makes use of CSS Grids. https://zeus0789.github.io/iiitkalyanifosc.github.io/

anubhavp28 commented 6 years ago

@zeus0789 Saw your work, great as usual, but I need to discuss something with regarding the design of the website. Look how your projects page looks on my laptop : screenshot from 2018-05-12 16-12-05

Your project,html occupies all the horizontal space given to it (you must have used width: 100%) but that causes a problem with screens that have high resolution (like my laptop and with ultra wide monitors), the website ends up looking bad (specially the text). So most websites (such as github.com, facebook.com) scale their content horizontal till a threshold is met, thereafter they don't scale horizontally(only vertically).

Look : screenshot from 2018-05-12 16-23-11_new Look at that red region, if wanted facebook.com could have scaled horizontally, but it didn't because of the same reason

Here is github.com (same) : screenshot from 2018-05-12 16-23-24

Here is our website: screenshot from 2018-05-12 16-23-37

I designed it the same way, on every page (index.html) there is one contentdiv and all the content of the page must go under that div. Use content div as the body tag of html. 

<div id="content">
    ....
</div>

Also project.html provides basic functionality, but shouldn't it look better? I mean add few colors (mostly different shades of gray :laughing:), make it look appealing!