Need help with some frontend

How do I center the ‘Welcome’ H1, make the email and password fields bigger, separate the login and register buttons and add a background image to this?
image.png

you’ll need to provide the code for that UI – it’s impossible to say just by looking at the image since that can be built in many different ways

Oh sorry I will send the code

Code for the LoginView class

@PageTitle("Login Page")
@Route("login")
@CssImport("./styles/login-view.css")
public class LoginView extends Div {

    public LoginView(AuthService authService) {
        setId("login-view");
        var email = new EmailField("Email");
        var password = new PasswordField("Password");

        

        add(
                new H1("Welcome"),
                new VerticalLayout(email,password),
                new Button("Login", event -> {
                    try {
                        authService.authenticate(email.getValue(), password.getValue());
                        UI.getCurrent().navigate("home");
                    } catch (AuthService.AuthException e) {
                        Notification.show("Wrong credentials.");
                    }
                }),
                new RouterLink(" Register", RegisterView.class)
        );
    }

}```

Code for the css I copied from the lumo designer from demo.vaadin

#login-view {
    display: inline-block;
    margin-left: 45%;
    margin-right: 50%;
    margin-top: 5%;
}

:host {
  [theme~="dark"] {
    --lumo-shade-5pct: rgba(4, 113, 113, 0.05);
    --lumo-shade-10pct: rgba(4, 113, 113, 0.1);
    --lumo-shade-20pct: rgba(4, 113, 113, 0.2);
    --lumo-shade-30pct: rgba(4, 113, 113, 0.3);
    --lumo-shade-40pct: rgba(4, 113, 113, 0.4);
    --lumo-shade-50pct: rgba(4, 113, 113, 0.5);
    --lumo-shade-60pct: rgba(4, 113, 113, 0.6);
    --lumo-shade-70pct: rgba(4, 113, 113, 0.7);
    --lumo-shade-80pct: rgba(4, 113, 113, 0.8);
    --lumo-shade-90pct: rgba(4, 113, 113, 0.9);
    --lumo-primary-text-color: rgb(5, 235, 235);
    --lumo-primary-color-50pct: rgba(5, 235, 235, 0.5);
    --lumo-primary-color-10pct: rgba(5, 235, 235, 0.1);
    --lumo-error-text-color: rgb(231, 24, 24);
    --lumo-error-color-50pct: rgba(231, 24, 24, 0.5);
    --lumo-error-color-10pct: rgba(231, 24, 24, 0.1);
    --lumo-success-text-color: rgb(62, 229, 170);
    --lumo-success-color-50pct: rgba(62, 229, 170, 0.5);
    --lumo-success-color-10pct: rgba(62, 229, 170, 0.1);
    --lumo-shade: hsl(180, 93%, 23%);
    --lumo-primary-color: hsl(180, 96%, 47%);
    --lumo-error-color: hsl(0, 81%, 50%);
    --lumo-success-color: hsl(159, 76%, 57%);
    --lumo-success-contrast-color: hsl(159, 29%, 10%);
    --lumo-base-color: hsl(231, 58%, 8%);
    --lumo-tint-5pct: rgba(123, 167, 224, 0.05);
    --lumo-tint-10pct: rgba(123, 167, 224, 0.1);
    --lumo-tint-20pct: rgba(123, 167, 224, 0.2);
    --lumo-tint-30pct: rgba(123, 167, 224, 0.3);
    --lumo-tint-40pct: rgba(123, 167, 224, 0.4);
    --lumo-tint-50pct: rgba(123, 167, 224, 0.5);
    --lumo-tint-60pct: rgba(123, 167, 224, 0.6);
    --lumo-tint-70pct: rgba(123, 167, 224, 0.7);
    --lumo-tint-80pct: rgba(123, 167, 224, 0.8);
    --lumo-tint-90pct: rgba(123, 167, 224, 0.9);
    --lumo-tint: hsl(214, 62%, 68%);
  }
}

html {
  --lumo-font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
  --lumo-border-radius: 0.75em;
}```

Also how do I add a background images to my webpages?

ok, so first of all, assuming you’re not very familiar with css, it’s probably better to use VerticalLayout and HorizontalLayout for layouting, instead of Div, since they have APIs for spacing, padding, and alignment. See docs here https://vaadin.com/docs/latest/components/basic-layouts and Java API reference here https://vaadin.com/api/platform/23.2.8/com/vaadin/flow/component/orderedlayout/VerticalLayout.html and here https://vaadin.com/api/platform/23.2.8/com/vaadin/flow/component/orderedlayout/HorizontalLayout.html

hint: setAlignItems sets alignment along the main axis of the layout (i.e. vertically for VerticalLayout, and vice versa), while setJustifyContentMode sets the cross axis alignment (i.e. horizontal alignment for VerticalLayout)

Making things bigger is generally done with a combination of Sizing properties https://vaadin.com/docs/latest/styling/lumo/design-tokens/size-space and Typography properties (font size) https://vaadin.com/docs/latest/styling/lumo/design-tokens/typography
Here’s a page explaining how to use style properties https://vaadin.com/docs/latest/styling/lumo/design-tokens/styling-using-design-tokens

adding a background to an element needs to be done with CSS: apply a classname to the element and then write CSS to apply the image, e.g.

.layout-with-bg {
  background-image: url('path-to-image');
}```

also, re layouts, there are APIs for setting spacing and padding on/off. In your example the VerticalLayout has padding by default, which is why the fields are inset from the left a bit, but you can disable that.

i will apply this thanks a ton!!