fix background

src/app/app.component.scss

@@ -1,6 +1,33 @@
 .background {
-  background-image: url('../../public/background.svg');
-  background-color: #c62d6b;
+  background: rgb(200, 53, 97);
+  background: -moz-linear-gradient(
+    65deg,
+    rgba(200, 53, 97, 1) 1%,
+    rgba(156, 152, 89, 1) 19%,
+    rgba(156, 152, 89, 1) 29%,
+    rgba(181, 122, 71, 1) 43%,
+    rgba(199, 50, 106, 1) 73%,
+    rgba(205, 66, 67, 1) 100%
+  );
+  background: -webkit-linear-gradient(
+    65deg,
+    rgba(200, 53, 97, 1) 1%,
+    rgba(156, 152, 89, 1) 19%,
+    rgba(156, 152, 89, 1) 29%,
+    rgba(181, 122, 71, 1) 43%,
+    rgba(199, 50, 106, 1) 73%,
+    rgba(205, 66, 67, 1) 100%
+  );
+  background: linear-gradient(
+    65deg,
+    rgba(200, 53, 97, 1) 1%,
+    rgba(156, 152, 89, 1) 19%,
+    rgba(156, 152, 89, 1) 29%,
+    rgba(181, 122, 71, 1) 43%,
+    rgba(199, 50, 106, 1) 73%,
+    rgba(205, 66, 67, 1) 100%
+  );
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c83561",endColorstr="#cd4243",GradientType=1);
   background-repeat: no-repeat;
   z-index: -1;
   position: fixed;

src/app/components/login-form/login-form.component.html

@@ -0,0 +1,22 @@
+<main>
+  <form [formGroup]="loginForm">
+    <section>img here</section>
+    <section>
+      <label>
+        Email:
+        <input type="email" formControlName="email" />
+      </label>
+      <br />
+      <label>
+        Mot de passe:
+        <input type="password" formControlName="password" />
+      </label>
+      <label
+        >Se souvenir de moi
+        <input type="checkbox" formControlName="rememberMe" />
+      </label>
+      <br />
+      <button type="submit">Se connecter</button>
+    </section>
+  </form>
+</main>

src/app/components/login-form/login-form.component.scss

@@ -0,0 +1,78 @@
+main {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  border-style: dashed;
+  max-width: 980px;
+  margin: 0 auto;
+  padding: 1rem;
+
+  form {
+    border: 3px solid black;
+    display: flex;
+    padding: 1rem;
+    min-width: 50%;
+    background-color: #f9f9f9;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    flex: 1 1 50%;
+
+    section {
+      border-style: dashed;
+      flex: 1 1 50%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 1rem;
+      margin: 0.5rem;
+
+      label {
+        display: block;
+        margin-bottom: 0.5rem;
+        font-weight: bold;
+        border-style: dashed;
+        width: 100%;
+
+        input {
+          display: block;
+          width: 100%;
+          padding: 0.5rem;
+          border: 1px solid #ccc;
+          border-radius: 5px;
+          margin-top: 0.5rem;
+          flex-shrink: 0;
+        }
+        &:last-of-type {
+          position: relative;
+          input[type='checkbox'] {
+            position: absolute;
+            right: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            margin: 0;
+          }
+        }
+      }
+
+      button {
+        align-self: flex-end;
+        padding: 0.5rem 1rem;
+        border: none;
+        border-radius: 5px;
+        background-color: #007bff;
+        color: white;
+        cursor: pointer;
+        transition: background-color 0.3s;
+        margin-bottom: 3rem;
+
+        &:hover {
+          background-color: #0056b3;
+        }
+      }
+    }
+  }
+}

src/app/components/login-form/login-form.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginFormComponent } from './login-form.component';
+
+describe('LoginFormComponent', () => {
+  let component: LoginFormComponent;
+  let fixture: ComponentFixture<LoginFormComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LoginFormComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(LoginFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/login-form/login-form.component.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { ReactiveFormsModule, FormBuilder, FormControl, FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'app-login-form',
+  standalone: true,
+  imports: [ReactiveFormsModule],
+  templateUrl: './login-form.component.html',
+  styleUrl: './login-form.component.scss',
+})
+export class LoginFormComponent {
+  loginForm: FormGroup;
+  constructor(private fb: FormBuilder) {
+    this.loginForm = this.fb.group({
+      username: new FormControl(''),
+      password: new FormControl(''),
+    });
+  }
+}