So Im making my best friend (which is a girl) a website. I'm not a pro at it so please don't roast me. I am self taught and still learning. A few opinion and ideas would hurt ? K:

It might look better just find one big picture to use instead of tiling a bunch of smaller pictures. Additionally a lot of websites do not play music but if this is special for a friend then it makes sense. Also the buttons on the side look like they would need some css the layout however looks nice and it's awesome that your doing this for her. Take what I said as a suggestion If you don't agree don't do it, it's your website and in the end you should always do what you want to do

@Axis just to add on to this, if this website is going to be public, i suggest putting code to stop people from stealing your source code. You can find tons by just googling.

@d3xt0r welcome to devRant!

@String as long as you work on html,css & jquery you can't just prevent people to take your code.
But I don't think anyone would do that

@rehman why would they do it at all

@redstonetehnik idk why string said that

I totally appreciate this, because you're developing by your own imagination and not copying any idea or using any templates. (I know using template is not bad). And cheers! She gonna love it.

You should look into bootstrap, it will allow you to easily style the site.

@mongod welcome to devRant!

@rehman said it because people have used parts of my source code for their own personal use without asking. Just giving advice.

I'm also learning om my own
Keep up the work and learn by doing

Looking great, miles better than my first websites for sure.

Well done for resisting the urge to include thousands of 3rd party plugins. That is a skill that will get your a long way because it shows you want to learn how things work.

Keep us posted and we are all here to help if you need us.

Thanks everyone for the feedback and by any chance do any of you guys know how to make flashing color text on JavaScript or css3? I sorta want to put happy birthday in the center of the page and make them flash color. I also want to make a canvas card looking 3d model and have her flip through pages as she listen to her favorite songs.

Submit your website here http://brutalistwebsites.com

Add a bit of flair to the font to make it pop, and make sure the color contrasts well with the background

Dont use br in the title to leave blank space, you can have great surprises on different screens (e.g hers) use a margin or a padding instead.. and as I saw on a comment above, rework the links at the bottom, need some css, also if you Know some JavaScript, use some jquery to add some easy animations (jquery so you don't bother too much)

Do never tile a background image, stretching works but not on mobile devices 😄 try to work out a fixed layout and put text over solid backgrounds, as they read alot better...

Then drop shadows till you die and ship it 😃

I couldn't find a gif of a butterfly big enough for th3 back ground but I did change the links and made them transparent. Now I want the dotted line to flash with different colo4.

@karma how can I fix it? Is it
background-repeat: no-repeat; ?

@d3xt0r ouch I almost -- that post, but hey, why would karma not help you 😄

Try this here approach https://css-tricks.com/perfect-full... or learn the basics behind it and incorporate that, hard to say where you applied that image 😃

And enjoy! I could point to other solutions if this does not work

Add bootstrap. Will help make it look a little more modern.

Buy her flowers..

Am I the only one who cringes whenever reading a rant || !rant that starts with "so I am making this website/app/script/program for a friend..."?

Great start

You should get some inspirations on modern websites though especially with bootstrap since its heavily in use

www.styleguides.io
www.wrapbootstrap.com

www.pexels.com for images

Get to see how those guys designed

Wtf don't you like your girlfriend?

Don't forget the popups

@String stop people from stealing your front end source code.... My gosh. It's almost like the client doesn't actually need the source code to display the website in the first place....

@MicroNibble I think you might have misunderstood me. I'm not cringing from the post itself, but for the implications... Usually is "working for free for ungrateful results"!

.flash-text { /*class*/
animation-name: flash; /*animation name*/
animation-duration: 1s;/*how long animation runs*/
animation-iteration-count: 10;/*times the animation will run*/
}

@keyframes flash { /*animation*/
0% { /*start with these atributes*/
color: rgb(0,0,0);
}
100%{/*finalize with these attributes*/
color: rgb(255,255,255);
}
}

/*You can rename 100% to 50% then add 100% with the attributes specified in 0% for something smoother*/

@aan27 cute?