Help with Web Dev project

Question

I am currently taking the course on Web Dev. We are creating a ticketing website for the Eiffel Tower. This a link to my current page: https://code.sololearn.com/W6ByrX2VUymq/?ref=app
At the bottom of the page we are suppose to have the form displaying "Adults" and "Children" labels on one line with their respective numbers directly under each label with the "Buy" button to the right of the form. The instructions say to remove the original <br> tags that put each element on a seperate line and then to add them after the labels so that the numbers fields are on a seperate line. Everytime I end up with the Adults text on top with its number field below it and the Childten text on that same line with its field below the Adults number field. How do I fix this to get whats expected?

Answer 1

Tarik Khalil,

Unfortunately, no. They want the "Adults" and "Children" labels on the same line as each other with their corresponding number fields below them. I tried removing the number fields from under each label in the html file and then putting the labels together, but I am to then create a div for each element (to create three groups) so they can be styled in css using "flex". So, by moving the number field away from its label, that would take it out of the div group.

Answer 2

Do you mean like this :

https://code.sololearn.com/WYPBfc4GSz7u

Answer 3

Okay, I did what they asked and it worked , so far. I put the line breaks after each label and then put each element in a <div class="form-section> (per the instructions). Then in css I added a display: flex to the form and gave the .form-section class a flex: 1. I am now stuck on trying to get the buy button's height to 40px and width to 100%. Here's what I have so far:
https://code.sololearn.com/W6ByrX2VUymq/?ref=app

Answer 4

Your code is already the buy button's height to 40px and width to 100%.
input[type='button']{
background-color: #2493df;
font-weight: bold;
font-size: 16px;
color: white;
border:none;
height: 40px;
width:100%;
}

Answer 5

Tarik Khalil,

Here's what I ended up with:
https://code.sololearn.com/W6ByrX2VUymq/?ref=app

It is not exactly how it looks in the sample pic of what it is suppose look like, but it is close. The margin or padding (unsure which is which) at the bottom of the form looks bigger than the example. I am going to keep poking at it to see if I can get it right. If you have any suggestions of where I am ogf on this, it would be greatly appreciated. Thanks.

Answer 6

Robert Haugland

I want to help you but I don't understand the design you want .
Is there an image or example of a website design that is close to your idea?

Answer 7

Taril Khalil,

I downloaded the image of what the final product is suppose to looke like:
https://drive.google.com/uc?id=1_a3VAOCKeR1ZqqjFcO1yB-qjWbK-lAG6
You can see that what I vame up with is close and I am fine with it. If you can figure out why it isn't just like the sample in the download image, that would be a bonus. Thanks!

Answer 8

https://drive.google.com/uc?id=1_a3VAOCKeR1ZqqjFcO1yB-qjWbK-lAG6

The link does not work

Answer 9

Tarik Khalil,

It worked for me but I think only because I saved it to my G Drive. I thought that would work. I basically copied the page with the pic on it, edited it, and then saved that to my G Drive. I tried copying and then pasting the pic to this post without success. Do you know of a way to get the pic here?

Answer 10

send the pic in my s-k-y-p-e : live:tarikkhalil1988

Answer 11

Robert Haugland Did you manage to get the answer to this? I'm stuck on this one, it's completely lost me!