Refactoring the Website: Card design

[Aniket-Mishra]

Use branch: refactoring-the-website

The design of the cards in projects needs to be changed.

[Ryuno-Ki]

Hi @Aniket-Mishra,

what part of the projects need change? Are you referring to the following?

codezoned.com/index.html

Lines 439 to 499 in 053350e

	<section id="sec-about" class="sec-about pt-5 pb-5">
	<div class="row justify-content-center text-center" style="">
	<div class="col-md-4 col-lg-8 animated bounceInLeft" id="animate2">
	<h3 class="display-5" style="font-family: quicksand; word-spacing: ; color: #272727;">Some of our Opensource projects:</h3>
	<br>
	<div class="row">
	<div class="col s12 m12">
	<div class="card darken-1" style="background-color: white; min-height: 240px;">
	<div class="card-content white-text">
	<span class="card-title" style="color: black;"><strong>ScriptsDump</strong> </span>
	<p style="color: #777777">ScriptsDump is a complete repository of all kind of scripts we and you can think of.</p>
	</div>
	<div class="card-action">
	<a href="https://github.com/codezoned/ScriptsDump"><div class='button -regular center' style="background-color: #2196F3; color: white;" id="hoverbtn">Check it out!</div></a>
	</div>
	</div>
	</div>
	<div class="col s12 m12">
	<div class="card darken-1" style="background-color: white; min-height: 240px;">
	<div class="card-content white-text">
	<span class="card-title" style="color: black;"><strong>RIG</strong></span>
	<p style="color: #777777">RIG (Randomized ID Generator) is an app to generate IDs and badges for any event or meetup!</p>
	</div>
	<div class="card-action">
	<a href="https://github.com/codezoned/rig"><div class='button -regular center hoverbtn' style="background-color: #2196F3; color: white;">Check it out!</div></a>
	</div>
	</div>
	</div>
	<div class="col s12 m12">
	<div class="card darken-1" style="background-color: white; min-height: 240px;">
	<div class="card-content white-text">
	<span class="card-title" style="color: black;"><strong>BlogCast</strong> </span>
	<p style="color: #777777">BlogCast is a 100% Opensource blogging App/Platform.</p>
	</div><br>
	<div class="card-action">
	<a href="https://github.com/codezoned/BlogCast"><div class='button -regular center hoverbtn' style="background-color: #2196F3; color: white;">Check it out!</div></a>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	<div style="width: 100%; text-align: center;">
	<a href="https://github.com/codezoned/"><h5 style="color: darkgray;" href=>And many more...</a></h5>
	</div><br><br>
	<div style="width: 100%; text-align: center;">
	<span style="font-size: 22px;">Wanna Partner with us? Sponsor us? Or talk to us?</span><br>
	<span style="font-size: 22px;"><b><a href = "mailto: [email protected]">Contact us at [email protected]</a><b></span>
	</div>
	</section>

What shall happen instead?

This issue was assigned to @sureshmangs. Does that mean it's no longer up for grabs?
CSS Layout Card pattern is one way to work on it.

[sureshmangs]

@Ryuno-Ki Yeah, you can work on it.

[Ryuno-Ki]

Cool.

What do you need? Do you have a picture or something I can work towards, too?
(Ala „make it like this”).

What is the objection of the cards? I want to understand the problem before I work towards a solution :-)

[Ryuno-Ki]

So I took a closer look into the current setup and discovered, that you use materialize.css Cards at the moment.

However, issues like Dogfalo/materialize#2089 didn't receive an update and I couldn't find another documentation about how to do that within the framework.

So I applied a trick I learned by Chris Coyier and went with CSS Grid.

It looked like this:

With my change, it will become:

(Tested in Firefox and Chromium, since I'm using Sabayon Linux).

Is it what you want? Do you need some additional adjustments? (e.g. colours)
The cards are responsive and wrap if there isn't enough space. They're equal height with aligned call-to-action buttons.

I'm going to open a PR now. We can iterate there, if you have further wishes. Cool with you?

[Ryuno-Ki]

I've noted, that the branch shall branch off off refactoring-the-website, so I had to rebase my changed based on that one.

There, you're already using a .card-container, so I only needed to add some small tweaks.

[Aniket-Mishra]

Hey @Ryuno-Ki , I'd made the issue because the original website has way too many redundant libraries and is written poorly. I was thinking of rebuilding the whole website without the code. I'd used materialize.css and a bunch of jQuery plugins, which I now realize were not needed.
In essence the website needs to look the same with some minor changes like animations.
Thank you for the contributions, they are appreciated! <3

[Ryuno-Ki]

I see.

Can you scribble some ideas on a napkin and upload a photo of it?
Doesn't need to be high fidelity.

I'd add some HTML comments to ease the job of what element a closing tag belongs to in a subsequent PR.
Perhaps as part of another issue?

What would be needed to resolve this one? You already have the projects with card pattern now.