Learning to Code (Need frontend help)

[pomduh]

I've recently began starting learning HTML and CSS and currently working on my first practice site. My friend (Nevit) gave me this mockup from his old idea for the Usercord profile page to replicate and I'm having some issues creating it. I know it's simple but I'm just starting to learn and wondering if someone could code this for me so I can use the code to help me figure some things out I'm having trouble on.

More active on discord: FoGz_Pup#4713

Thanks,
FoGz

 

[Zyger]

What problems are you having with it exactly?

You can use border-radius for the curved edges

 

[pomduh]

well to start off you can do this:

1.Create a div element that will hold everything (the main box)
2.Give it a border and set a background color
3.Curve the border by using border radius

4.Put a div in the top of the box and make it purple and contain all the info you need
5.Make a second div, and make it darker purple and have the links that you need
6.Add the text box's, etc. to the main div

I wont make you this, because the best way for you to learn is by doing, so I advice you to look up certain properties and learn the hard way so its really locked into your memory. There are more than 1 way to do things. Heres another method:

1.Create 3 seperate divs, 1 for each layer of the thing, and style them accordingly (here are the divs: )

2.make them all line up

What problems are you having with it exactly?

You can use border-radius for the curved edges

Yes I have done about half of it but I'm having trouble mostly moving elements and boxes and their sizing. If you add me on discord FoGz_Pup#4713 I can send you what I have so far and what I need help with.

 

[pomduh]

far