--- /dev/null
+<?php
+$mainClass = "login";
+?><!DOCTYPE html>
+<html lang="fr">
+<head>
+ <meta charset="UTF-8">
+ <title>EIF - Unibail Rodamco Westfield</title>
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/tippy.min.css" integrity="sha512-HbPh+j4V7pXprvQMt2dtmK/zCEsUeZWYXRln4sOwmoyHPQAPqy/k9lIquKUyKNpNbDGAY06UdiDHcEkBc72yCQ==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
+ <link rel="stylesheet" href="style/style.css">
+</head>
+<body>
+<?php include "inc/svg-sprite.php" ?>
+<main <?php echo isset($mainClass) ? 'class="' . $mainClass . '"' : '' ?>>
+ <form method="post" action="login.php">
+ <div class="logo" data-icon="logo-EIF"></div>
+ <label><span>Adresse email ou identifiant</span><input type="text" name="username"></label>
+ <label><span>Mot de passe</span><input type="password" name="password"><a href="#">Oublié ?</a></label>
+ <div class="captcha"><img src="placeholders/captcha.png" /></div>
+ <a href="#" class="submit">Connexion</a>
+ <footer>© EIF Expertise & Innovation 2023</footer>
+ </form>
+
+ <?php include "inc/foot.php" ?>
html, body, main
min-height: 100%
+ height: 100%
body
background-color: $background-color
-.submit, input[type="text"], input[type="search"], select, textarea
+.submit, input[type="text"], input[type="search"], input[type="password"], select, textarea
height: 50px
padding: 15px
border: 0
--- /dev/null
+main.login
+ background-image: url("../images/login-background.jpg")
+ background-size: cover
+ background-position: 50% 50%
+ height: 100%
+ min-height: 100%
+ padding: 0
+ min-width: auto
+ display: flex
+ align-items: center
+ justify-content: center
+
+ form
+ min-width: 500px
+ width: 500px
+ max-width: 100%
+ margin: 0 auto
+ border-radius: 8px
+ background-color: #fff
+ padding: 50px
+
+ @include media-x-small
+ width: 100%
+ min-width: auto
+ height: 100%
+
+ input
+ background-color: $background-color
+ width: 100%
+
+ label
+ display: block
+ margin: 50px 0
+ position: relative
+
+ a
+ position: absolute
+ right: 12px
+ top: 17px
+
+ .logo
+ width: 98px
+ height: auto
+ margin: 0 auto 50px
+
+ .submit
+ width: 100%
+ text-align: center
+ font-size: 17px
+ padding: 25px
+ height: 70px
+ margin: 50px 0
+
+ footer
+ color: $light-color
+ font-size: 12px
+ text-align: center
@mixin media-small
@media screen and (max-width: $breakpoint-small)
+ &
+ @content
+
+@mixin media-x-small
+ @media screen and (max-width: $breakpoint-x-small)
&
@content
\ No newline at end of file
// Responsive breakpoints
$breakpoint-medium: 1300px
-$breakpoint-small: 900px
\ No newline at end of file
+$breakpoint-small: 900px
+$breakpoint-x-small: 600px
\ No newline at end of file
@import "inc/_switch"
@import "inc/_tags"
@import "inc/_dialogs"
-@import "inc/_msie"
+@import "inc/_login"
+@import "inc/_msie"
\ No newline at end of file