Posts: 3,004
Threads: 12
Joined: May 2011
18.03.2015, 19:30
(
Last edited by Kaperstone; 10/10/2017 at 04:11 PM.
)
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
Posts: 4,759
Threads: 33
Joined: Dec 2013
Reputation:
0
It looks good, but you should of made the background go all the way down!
Bootstrap :3
Posts: 484
Threads: 19
Joined: Jul 2014
Posts: 3,004
Threads: 12
Joined: May 2011
Quote:
Originally Posted by Parallax
If you're on Chrome, Open Developer, enable Device Mode and check the website under numerous device screenings to check how responsive it is  |
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.
Quote:
Originally Posted by SickAttack
It looks good, but you should of made the background go all the way down!
Bootstrap :3
|
But then the characters would need an ending line, because they're cutten to their knees.
Quote:
Originally Posted by bondowocopz
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/ |
Yes.
Posts: 385
Threads: 10
Joined: Dec 2013
Reputation:
0
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.
Posts: 3,004
Threads: 12
Joined: May 2011
Quote:
Originally Posted by Vince
- Consider using a proper framework.
- HTML lang attribute is not specified.
- meta charset is not specified.
- 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".
- Images do not have alt attributes. This is required.
- <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.
- navigation should use <ul> (unordered list), regardless of placement. Navigation can be put horizontally with CSS.
- 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/ |
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.
Posts: 3,004
Threads: 12
Joined: May 2011
Quote:
Originally Posted by Vince
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.
|
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.
Posts: 3,004
Threads: 12
Joined: May 2011
20.03.2015, 16:28
(
Last edited by Kaperstone; 10/10/2017 at 06:28 PM.
)
Quote:
Originally Posted by Kapersky™
Awesome bro! I love it, and love ya too. |
Thanks !
Posts: 3,004
Threads: 12
Joined: May 2011
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
Posts: 3,004
Threads: 12
Joined: May 2011
Quote:
Originally Posted by Mr.Vince™
It looks Neat..
|
Quote:
Originally Posted by Spydah
Looking neat dayum!
|
thanks
