🔨 Pages de base & Login

This commit is contained in:
Loris BALOCCHI 2024-05-28 15:40:57 +02:00
parent 2f9952ef12
commit c2b4bb4e9d
10 changed files with 676 additions and 0 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 MiB

34
base.html Normal file
View File

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles/main.css" />
<link rel="stylesheet" href="styles/header.css" />
<link rel="stylesheet" href="styles/footer.css" />
<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="https://tickets.paris2024.org/obj/media/FR-Paris2024/specialLogos/favicons/favicon-32x32.png"
/>
<script
src="https://kit.fontawesome.com/f16a36bad3.js"
crossorigin="anonymous"
></script>
<title>Jeux Olympiques - Paris 2024</title>
</head>
<body>
<?php include ('views/header.php'); ?>
<!-- code de la page ici -->
<?php include ('views/footer.php'); ?>
</body>
</html>

28
events/index.php Normal file
View File

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles/main.css" />
<link rel="stylesheet" href="styles/header.css" />
<link rel="stylesheet" href="styles/footer.css" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<link rel="icon" type="image/png" sizes="32x32"
href="https://tickets.paris2024.org/obj/media/FR-Paris2024/specialLogos/favicons/favicon-32x32.png" />
<title>Évènements | Jeux Olympiques - Paris 2024</title>
</head>
<body>
<?php include ('../views/header.php'); ?>
<!-- code de la page ici -->
<h1>Évènements</h1>
<?php include ('../views/footer.php'); ?>
<script src="https://kit.fontawesome.com/f16a36bad3.js" crossorigin="anonymous"></script>
</body>
</html>

28
index.php Normal file
View File

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles/main.css" />
<link rel="stylesheet" href="styles/header.css" />
<link rel="stylesheet" href="styles/footer.css" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<link rel="icon" type="image/png" sizes="32x32"
href="https://tickets.paris2024.org/obj/media/FR-Paris2024/specialLogos/favicons/favicon-32x32.png" />
<title>Accueil |Jeux Olympiques - Paris 2024</title>
</head>
<body>
<?php include ('views/header.php'); ?>
<!-- code de la page ici -->
<h1>Accueil</h1>
<?php include ('views/footer.php'); ?>
<script src="https://kit.fontawesome.com/f16a36bad3.js" crossorigin="anonymous"></script>
</body>
</html>

51
login/index.php Normal file
View File

@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles/main.css" />
<link rel="stylesheet" href="styles/header.css" />
<link rel="stylesheet" href="styles/footer.css" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<link rel="icon" type="image/png" sizes="32x32"
href="https://tickets.paris2024.org/obj/media/FR-Paris2024/specialLogos/favicons/favicon-32x32.png" />
<title>Connexion | Jeux Olympiques - Paris 2024</title>
<script src="https://kit.fontawesome.com/f16a36bad3.js" crossorigin="anonymous"></script>
</head>
<body>
<?php include ('../views/header.php'); ?>
<div class="login-container">
<img src="https://cdn-icons-png.flaticon.com/512/4139/4139948.png" alt="Avatar">
<h2>Connexion à votre compte</h2>
<p>Connectez-vous afin d'accéder à l'entièreté du site.</p>
<form>
<div class="form-group">
<label for="email">Adresse mail</label>
<input type="email" id="email" name="email" placeholder="ex : username@example.com" required
placeholder=" ">
</div>
<div class="form-group">
<label for="password">Mot de passe</label>
<input type="password" id="password" name="password" required placeholder=" ">
</div>
<!-- <div class="form-group remember-me">
<input type="checkbox" id="remember-me" name="remember-me">
<label for="remember-me">Se souvenir de moi</label>
</div> -->
<div class="form-group forgot-password">
<!-- <a href="#">Mot de passe oublié ?</a>-->
</div>
<button type="submit" class="submit-button"><i class="fas fa-sign-in-alt"></i> Connexion</i></button>
</form>
<p class="no-account">Vous n'avez pas de compte ? <a href="#">Créez un compte pour commencer !</a></p>
</div>
<?php include ('../views/footer.php'); ?>
</body>
</html>

143
styles/footer.css Normal file
View File

@ -0,0 +1,143 @@
.site-footer {
background-color: #26272b;
padding: 45px 0 20px;
font-size: 15px;
line-height: 24px;
color: #737373;
opacity: 0.97;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
}
.site-footer hr {
border-top-color: #bbb;
opacity: 0.5;
}
.site-footer hr.small {
margin: 20px 0;
}
.site-footer h6 {
color: #fff;
font-size: 16px;
text-transform: uppercase;
margin-top: 5px;
letter-spacing: 2px;
}
.site-footer a {
color: #737373;
}
.site-footer a:hover {
color: #3366cc;
text-decoration: none;
}
.footer-links {
padding-left: 0;
list-style: none;
transition: all 0.5s;
}
.footer-links li {
display: block;
transition: all 0.5s;
}
.footer-links a {
color: #737373;
}
.footer-links a:active,
.footer-links a:focus,
.footer-links a:hover {
color: #00c6a7;
text-decoration: none;
transition: all 0.5s;
}
.footer-links.inline li {
display: inline-block;
}
.site-footer .social-icons {
text-align: right;
}
.site-footer .social-icons a {
width: 40px;
height: 40px;
line-height: 40px;
margin-left: 6px;
margin-right: 0;
border-radius: 100%;
background-color: #33353d;
}
.copyright-text {
margin: 0;
}
@media (max-width: 991px) {
.site-footer [class^="col-"] {
margin-bottom: 30px;
}
}
@media (max-width: 767px) {
.site-footer {
padding-bottom: 0;
}
.site-footer .copyright-text,
.site-footer .social-icons {
text-align: center;
}
}
.social-icons {
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.social-icons li {
display: inline-block;
margin-bottom: 4px;
}
.social-icons li.title {
margin-right: 15px;
text-transform: uppercase;
color: #96a2b2;
font-weight: 700;
font-size: 13px;
}
.social-icons a {
background-color: #eceeef;
color: #818a91;
font-size: 16px;
display: inline-block;
line-height: 44px;
width: 44px;
height: 44px;
text-align: center;
margin-right: 8px;
border-radius: 100%;
-webkit-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.social-icons a:active,
.social-icons a:focus,
.social-icons a:hover {
color: #fff;
background-color: #29aafe;
}
.social-icons.size-sm a {
line-height: 34px;
height: 34px;
width: 34px;
font-size: 14px;
}
.social-icons a.facebook:hover {
background-color: #3b5998;
}
.social-icons a.twitter:hover {
background-color: #00aced;
}
.social-icons a.linkedin:hover {
background-color: #007bb6;
}
.social-icons a.dribbble:hover {
background-color: #ea4c89;
}
@media (max-width: 767px) {
.social-icons li.title {
display: block;
margin-right: 0;
font-weight: 600;
}
}

170
styles/header.css Normal file
View File

@ -0,0 +1,170 @@
.menu-container {
opacity: 0.97;
position: relative;
display: flex;
align-items: center;
margin-bottom: 20px;
background: #232323;
color: #cdcdcd;
padding: 20px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
box-sizing: border-box;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
}
.menu-logo {
line-height: 0;
margin: 0 20px;
}
.menu-logo img {
max-height: 50px;
max-width: 100px;
flex-shrink: 0;
}
.menu-container a {
text-decoration: none;
color: #232323;
transition: color 0.3s ease;
}
.menu-container a:hover {
color: #00c6a7;
}
.menu-container input {
display: block;
width: 35px;
height: 25px;
margin: 0;
position: absolute;
cursor: pointer;
opacity: 0; /* hide this */
z-index: 2; /* and place it over the hamburger */
-webkit-touch-callout: none;
}
/* Burger menu */
.menu-container span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
}
.menu-container span:first-child {
transform-origin: 0% 0%;
}
.menu-container span:nth-child(3) {
transform-origin: 0% 100%;
}
.menu-container input:checked ~ span {
opacity: 1;
transform: rotate(45deg) translate(3px, -1px);
background: #232323;
}
.menu-container input:checked ~ span:nth-child(4) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
.menu-container input:checked ~ span:nth-child(3) {
transform: rotate(-45deg) translate(-5px, 11px);
}
.menu ul {
list-style: none;
}
.menu li {
padding: 15px 0;
font-size: 22px;
}
/* mobile styles */
@media only screen and (max-width: 767px) {
.menu-container {
flex-direction: column;
align-items: flex-end;
}
.menu-logo {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.menu-logo img {
max-height: 30px;
}
.menu {
position: absolute;
box-sizing: border-box;
width: 300px;
right: -300px;
top: 0;
margin: -20px;
padding: 75px 50px 50px;
background: #cdcdcd;
-webkit-font-smoothing: antialiased;
/* to stop flickering of text in safari */
transform-origin: 0% 0%;
transform: translateX(0%);
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}
.menu-container input:checked ~ .menu {
transform: translateX(-100%);
}
}
/* desktop styles */
@media only screen and (min-width: 768px) {
.menu-container {
width: 100%;
}
.menu-container a {
color: #cdcdcd;
}
.menu-container input {
display: none;
}
/* Burger menu */
.menu-container span {
display: none;
}
.menu {
position: relative;
width: 100%;
display: flex;
justify-content: space-between;
}
.menu ul {
display: flex;
padding: 0;
}
.menu li {
padding: 0 20px;
}
}

140
styles/main.css Normal file
View File

@ -0,0 +1,140 @@
* {
outline: none;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-image: url("../assets/images/background.jpg");
/* backdrop-filter: blur(5px); */
background-size: cover;
overflow-x: hidden;
font-family: Sans-Serif;
margin: 0;
}
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: -1;
}
.login-container {
background: #232323;
align-items: center;
opacity: 1;
padding: 3rem;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
width: 100%;
text-align: center;
max-width: fit-content;
margin-inline: auto;
margin-block: 5em;
}
.login-container img {
width: 146px;
margin-bottom: 1rem;
}
.login-container h2 {
font-weight: 700;
color: white;
}
.login-container p {
margin-bottom: 1.5rem;
color: #8e8c8c;
size: 10px;
}
.form-group {
margin-bottom: 1rem;
text-align: left;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
color: #b1aeae;
}
.form-group input {
width: 100%;
padding: 0.5rem;
border: 1px solid #121216;
border-radius: 5px;
background-color: #34353a;
color: #fffe;
transition: all 0.3s ease;
}
.form-group input:focus,
.form-group input:not(:placeholder-shown) {
border-color: #007bff;
}
.remember-me {
display: flex;
align-items: center;
}
.remember-me input {
margin-right: 0.5rem;
}
.no-account {
font-size: 0.8rem;
margin-top: 0.25rem;
}
.forgot-password {
text-align: right;
font-size: 0.8rem;
}
.forgot-password a {
color: #007bff;
text-decoration: none;
}
.forgot-password a:hover {
text-decoration: underline;
}
.submit-button {
width: 100%;
padding: 0.75rem;
border: none;
background-color: #f4b400;
color: white;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
border-radius: 5px;
transition: all 0.3s ease;
margin-top: 25px;
}
button:hover {
background-color: #f4a400;
}
.sign-up {
margin-top: 1rem;
color: #666;
}
.sign-up a {
color: #007bff;
text-decoration: none;
}
.sign-up a:hover {
text-decoration: underline;
}

52
views/footer.php Normal file
View File

@ -0,0 +1,52 @@
<!-- Site footer -->
<footer class="site-footer">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6">
<h6>à propos</h6>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo consequatur illum,
officiis nisi porro minus voluptates impedit unde perspiciatis commodi? Mollitia dolores dolore
deserunt. Numquam officia ex vitae, ipsum veritatis atque recusandae accusantium consequatur
dolorum.</p>
</div>
<div class="col-xs-6 col-md-3">
<h6>Catégories</h6>
<ul class="footer-links">
<li><a href="../">Accueil</a></li>
<li><a href="../events">Évènements</a></li>
<li><a href="http://scanfcode.com/category/back-end-development/">PHP</a></li>
<li><a href="http://scanfcode.com/category/java-programming-language/">Java</a></li>
</ul>
</div>
<div class="col-xs-6 col-md-3">
<h6>Liens rapides</h6>
<ul class="footer-links">
<li><a href="http://scanfcode.com/about/">About Us</a></li>
<li><a href="http://scanfcode.com/privacy-policy/">Privacy Policy</a></li>
<li><a href="http://scanfcode.com/sitemap/">Sitemap</a></li>
</ul>
</div>
</div>
<hr>
</div>
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-6 col-xs-12">
<p class="copyright-text">Copyright &copy; 2024
<a href="#">Juliette & Loris</a>.
</p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<ul class="social-icons">
<li><a class="facebook" href="#"><i class="fa fa-facebook"></i></a></li>
<li><a class="twitter" href="#"><i class="fa fa-twitter"></i></a></li>
<li><a class="dribbble" href="#"><i class="fa fa-dribbble"></i></a></li>
<li><a class="linkedin" href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
</footer>

30
views/header.php Normal file
View File

@ -0,0 +1,30 @@
<nav class="menu-container">
<!-- burger menu -->
<input type="checkbox" aria-label="Toggle menu" />
<span></span>
<span></span>
<span></span>
<!-- logo -->
<a href="../" class="menu-logo">
<img src="https://i.imgur.com/RkmSo9Q.png" alt="Jeux Olympiques - Paris 2024" />
</a>
<!-- menu items -->
<div class="menu">
<ul>
<li>
<a href="/events">
Évènements
</a>
</li>
</ul>
<ul>
<li>
<a href="/login">
Connexion
</a>
</li>
</ul>
</div>
</nav>