Help me with my new website!

[bennyboy]

I'm not sure why'd you'd need 500 lines of code for it, though.

Well, it's more than 200 lines of CSS. And it takes a lot of code to even initialize a good-looking div within Javascript (around 10 lines per div, not counting the CSS formatting). JQuery does help a little, but it's still nothing like working in, let's say, UIKit in Objective-C, where all you need to do to initialize a label is to  pass a few arguments to the constructor.

Maybe if I have time on the weekend I can look at some of your code. Generally, what I would do is have a default div. In JQuery, you would clone it, change the text, and then append it to the right node in the body layout. This is pretty advanced stuff, but if you can gronk it, it will give you almost complete power over the client-side function of the page.

Perhaps the quirkiest problem with JavaScript is that it basically interprets the escape sequences within strings (like '\n' and '\t') as ordinary spaces, and that you need to insert a new element every time you want to make a newline or a tab.

JQuery objects have an inner html property, so you can use '<br/>' if that helps.

My idea is to use this in a div background, and just use css to round the corner for you.

But the problem is: there is no obvious way to make a div shaped like a quarter of an ellipse using CSS. Yes, you can set border-bottom-left-radius in pixels. The width of the div would have to be defined in percentages (as is everything else on my page), so we already have a problem. And even if I were to use some JQuery style injection, there is another problem: you can only specify one radius (for a circle), and not two (for an ellipse). Is it a problem to crop those images into a quarter of a circle in Photoshop and save them as a transparent PNG?

Read this:
https://www.w3schools.com/css/css3_borders.asp

and then this:
https://www.w3schools.com/css/tryit.asp?...er-radius3

In the fiddle screen for the second link, try changing the #rcorners3 div to have something like:
#rcorners3 {
       border-radius: 90% 0 0 0;
       width: 20%;
       height: 300px;
       background-image: url("https://i.imgur.com/3VIMyzi.jpg");
       background-size: 100% 100%;
}

(Click "Run")

If you change the width / height of the div, the border will automatically form a nice 1/4 ellipse for you.  Changing that first 90% value will make it easy to get a nicely-shaped rounded corner i think. (I liked the results with about 90% personally)