front
This commit is contained in:
DarkMax31
parent
549d419bbf
commit
d56d17724a
7 changed files with 179 additions and 21 deletions
|
|
@ -0,0 +1,21 @@
|
|||
|
||||
.footer-gris {
|
||||
background-color: #2c2c2c; /* Gris foncé personnalisé */
|
||||
}
|
||||
|
||||
.flag-bar {
|
||||
height: 6px; /* épaisseur du trait */
|
||||
width: 100%; /* toute la largeur */
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
#0055a4 0%, /* bleu */
|
||||
#0055a4 33.33%, /* 1/3 */
|
||||
#fff 33.33%, /* blanc */
|
||||
#fff 66.66%, /* 2/3 */
|
||||
#ef4135 66.66%, /* rouge */
|
||||
#ef4135 100%
|
||||
);
|
||||
margin-bottom: 8px;
|
||||
border-radius: 3px; /* optionnel, pour arrondir les bords */
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<footer class="bg-primary text-white py-3">
|
||||
<footer class="footer-gris text-white py-3">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-4 d-flex align-items-center text-start">
|
||||
|
|
@ -54,5 +54,6 @@
|
|||
<a routerLink="/contact" class="text-white me-3">Nous contacter</a>
|
||||
<a routerLink="/blogs" class="text-white me-3">Presse</a>
|
||||
</div>
|
||||
<div class="flag-bar" title="France"></div>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
.navbar {
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-weight: 700;
|
||||
font-size: 1.4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar-brand img {
|
||||
height: 30px;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-link:hover,
|
||||
.active-link {
|
||||
color: #ffcc00 !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
[routerLinkActiveOptions]="{ exact: isHomeActiveBool() }"
|
||||
[class.active-link]="isHomeActive()"
|
||||
>
|
||||
Match
|
||||
Matchs
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
|
|
|
|||
|
|
@ -0,0 +1,101 @@
|
|||
body {
|
||||
margin: 0;
|
||||
font-family: 'Segoe UI', sans-serif;
|
||||
background: linear-gradient(to bottom, #235d4f, #63b48c);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
width: 500px;
|
||||
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.login-header {
|
||||
background: url('https://www.lejdd.fr/lmnr/var/jdd/public/media/image/2022/07/19/12/escrime-comment-les-francais-apprivoisent-leurs-armes.jpg?VersionId=Mw31AogdDUwVLuCaVdxMozm9kito7TTP') no-repeat center/cover;
|
||||
text-align: center;
|
||||
padding: 2rem 1rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.login-header h2 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.login-header p {
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.login-form h3 {
|
||||
text-align: center;
|
||||
color: #235d4f;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #235d4f;
|
||||
border-radius: 30px;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.input-group .icon {
|
||||
color: white;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.input-group input {
|
||||
border: none;
|
||||
background: none;
|
||||
color: white;
|
||||
width: 100%;
|
||||
font-size: 1rem;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.options {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.85rem;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.options a {
|
||||
color: #235d4f;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
background-color: #235d4f;
|
||||
color: white;
|
||||
padding: 0.6rem;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.login-btn:hover {
|
||||
background-color: #1b4b3d;
|
||||
}
|
||||
|
|
@ -1,18 +1,28 @@
|
|||
<form (ngSubmit)="onSubmit()">
|
||||
<input
|
||||
type="email"
|
||||
[(ngModel)]="email"
|
||||
name="email"
|
||||
placeholder="Email"
|
||||
required
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
[(ngModel)]="password"
|
||||
name="password"
|
||||
placeholder="Mot de passe"
|
||||
required
|
||||
/>
|
||||
<button type="submit">Connexion</button>
|
||||
<div *ngIf="errorMessage">{{ errorMessage }}</div>
|
||||
<div class="login-container">
|
||||
<div class="login-card">
|
||||
<div class="login-header">
|
||||
<h2>Bienvenue sur le site</h2>
|
||||
<p>Suivez les matchs d'escrime en direct, de n'importe où !</p>
|
||||
</div>
|
||||
<form (ngSubmit)="onSubmit()" class="login-form">
|
||||
<h3>Connexion au compte</h3>
|
||||
|
||||
<div class="input-group">
|
||||
<span class="icon">👤</span>
|
||||
<input type="email" name="email" [(ngModel)]="email" placeholder="Nom utilisateur" required />
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<span class="icon">🔒</span>
|
||||
<input type="password" name="password" [(ngModel)]="password" placeholder="Mot de passe" required />
|
||||
</div>
|
||||
|
||||
<div class="options">
|
||||
<label><input type="checkbox" /> Se souvenir</label>
|
||||
<a href="#">Mot de passe oublié ?</a>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="login-btn">Connexion</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<p>home works!</p>
|
||||
<p>HELLO !</p>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue