[Tool/Web/Other] Whitespirit website - Printable Version

+- SA-MP Forums Archive (https://sampforum.blast.hk)
+-- Forum: SA-MP Scripting and Plugins (https://sampforum.blast.hk/forumdisplay.php?fid=8)
+--- Forum: Filterscripts (https://sampforum.blast.hk/forumdisplay.php?fid=17)
+---- Forum: Tools and Files (https://sampforum.blast.hk/forumdisplay.php?fid=82)
+---- Thread: [Tool/Web/Other] Whitespirit website (/showthread.php?tid=568026)

---

Whitespirit website - Kaperstone - 18.03.2015

Hello,

Nothing much to explain, this is a one page-ready, responsive and pretty text empty website.
I called it WhiteSpirit because of its bright look.
EDIT: forgot to say, I made it simple so it would be easy to understand the code for people who aren't yet familiar with HTML and CSS (or for these who are just nab), so the files aren't minified.

You can find a live-demo here:
http://kaperstone.github.io/whitespirit/

There is no Javascript or PHP used, this is only HTML and CSS.


You can download the website files from here
https://github.com/Kaperstone/whitespirit/releases

---

Re: Whitespirit website - JeaSon - 18.03.2015

great i love it

---

Re: Whitespirit website - Parallax - 19.03.2015

If you're on Chrome, Open Developer, enable Device Mode and check the website under numerous device screenings to check how responsive it is

---

Re: Whitespirit website - SickAttack - 19.03.2015

It looks good, but you should of made the background go all the way down!

Bootstrap :3

---

Respuesta: Whitespirit website - fabianlamas33 - 19.03.2015

It looks good.

---

Re: Whitespirit website - X337 - 19.03.2015

This is nice for website front page, i wanna use it.
Thanks for sharing Kaperstone
It's better when it's responsive.
Are you programmer of webpage too?
http://cnrsf.ml/

---

Re: Whitespirit website - Kaperstone - 19.03.2015

Okay, rechecked, the problem was that I focus on other devices screen rather than on PC.
on smaller screens it was intented to be left like this.

Because it didn't really ruin the design and it still kept looking just fine.

What took my attention was that on PC, smaller screens were able to move around because of the two characters on the right side.

Hopefully fixed now.

But then the characters would need an ending line, because they're cutten to their knees.

Yes.

---

AW: Whitespirit website - Madretsma - 19.03.2015

Looks pretty good, will discuss with my server-management whether to use this or not
Regards,

Madretsma

---

Re: Whitespirit website - Smileys - 19.03.2015

Didnt know you can release HTML templates here.

Might make and release one myself too, it'll most likely include php and js/jquery though, makes it much sweeter :3

OT: nice job, I like the design, although on my phone the images are too small compared to the text.

---

Re: Whitespirit website - Vince - 19.03.2015

1. Consider using a proper framework.
2. HTML lang attribute is not specified.
3. meta charset is not specified.
4. Responsiveness is only so and so and text overlaps the images as the viewport gets smaller. Some stuff even goes off screen entirely. Smaller viewports should have the main menu hidden under what's know as a "hamburger-icon".
5. Images do not have alt attributes. This is required.
6. <font> is obsolete and inline styles are a huge no-no. The HTML source should not contain any styles. All styling is to be done via CSS.
7. navigation should use <ul> (unordered list), regardless of placement. Navigation can be put horizontally with CSS.
8. Text should not be put in uppercase in the HTML source. This can be styled with CSS.

Conclusion: visual aspect is one thing, but if your code is crap it won't do you much good and it can severely impact the page rank in search engines.

Useful:
http://validator.w3.org
http://validator.w3.org/nu (document outline)
https://jigsaw.w3.org/css-validator/

---

Re: Whitespirit website - Kaperstone - 20.03.2015

I don't use frameworks, frameworks slow down the code processing and I don't like it.
Fixed the code on github, about the menu on even smaller ports will add right after I come back from school.


P.S. didn't upload yet the code to the demo website.

---

Re: Whitespirit website - Vince - 20.03.2015

Don't expect to work as a frontend developer, then. You don't have to use a heavy weight like Bootstrap, you can also use something simple like Unsemantic. The only thing you need is a very simple 23 kilobyte (even less if minified) CSS file (unsemantic-unsemantic-grid-responsive-tablet-no-ie7.css). Then add a few classes to your HTML page and you're done. CSS files are usually cached by the browser so there is hardly any performance impact.

---

Re: Whitespirit website - Kaperstone - 20.03.2015

I actually like the backend rather than the frontend, not good at desinging either.

What will the frameworks benefit me anyway, which I can't do by myself ?

EDIT: Except grid, not a place for me and it messes my brain up rather than giving any benefit.
Positioning an element at 20% of the screen or 200px doesn't help me much.
I see it only as a table which is being resized as the screen gets smaller, not something hard to do by myself with media querys and one or two divs, just a slow down of the website files, more pain remembering and a headache in my opinion.

---

Re: Whitespirit website - Kapersky™ - 20.03.2015

Awesome bro! I love it, and love ya too.

---

Re: Whitespirit website - KayJ - 20.03.2015

If you love the work marry with work

---

Re: Whitespirit website - Kaperstone - 20.03.2015

Thanks !

---

Re: Whitespirit website - Kaperstone - 10.10.2017

Finally, after 2 years, I've updated this with a few animations and better responsiveness.

Replaced the demo with a live one provided by GitHub

---

Re: Whitespirit website - Mr.Vince™ - 10.10.2017

It looks Neat..

---

Re: Whitespirit website - Spydah - 11.10.2017

Looking neat dayum!

---

Re: Whitespirit website - Kaperstone - 12.10.2017

thanks

---