diff --git a/assets/images/background.jpg b/assets/images/background.jpg new file mode 100644 index 0000000..13211de Binary files /dev/null and b/assets/images/background.jpg differ diff --git a/base.html b/base.html new file mode 100644 index 0000000..183c28d --- /dev/null +++ b/base.html @@ -0,0 +1,34 @@ + + + + + + + + + + + + + Jeux Olympiques - Paris 2024 + + + + + + + + + + diff --git a/events/index.php b/events/index.php new file mode 100644 index 0000000..7d0c270 --- /dev/null +++ b/events/index.php @@ -0,0 +1,28 @@ + + + + + + + + + + + + + Évènements | Jeux Olympiques - Paris 2024 + + + + + + +

Évènements

+ + + + + + + \ No newline at end of file diff --git a/index.php b/index.php new file mode 100644 index 0000000..82d9e4d --- /dev/null +++ b/index.php @@ -0,0 +1,28 @@ + + + + + + + + + + + + + Accueil |Jeux Olympiques - Paris 2024 + + + + + + +

Accueil

+ + + + + + + \ No newline at end of file diff --git a/login/index.php b/login/index.php new file mode 100644 index 0000000..c82d397 --- /dev/null +++ b/login/index.php @@ -0,0 +1,51 @@ + + + + + + + + + + + + + Connexion | Jeux Olympiques - Paris 2024 + + + + + + +
+ Avatar +

Connexion à votre compte

+

Connectez-vous afin d'accéder à l'entièreté du site.

+
+
+ + +
+
+ + +
+ +
+ +
+ +
+

Vous n'avez pas de compte ? Créez un compte pour commencer !

+
+ + + + + + \ No newline at end of file diff --git a/styles/footer.css b/styles/footer.css new file mode 100644 index 0000000..7151780 --- /dev/null +++ b/styles/footer.css @@ -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; + } +} diff --git a/styles/header.css b/styles/header.css new file mode 100644 index 0000000..f5d5434 --- /dev/null +++ b/styles/header.css @@ -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; + } +} diff --git a/styles/main.css b/styles/main.css new file mode 100644 index 0000000..5a404f1 --- /dev/null +++ b/styles/main.css @@ -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; +} diff --git a/views/footer.php b/views/footer.php new file mode 100644 index 0000000..ce41535 --- /dev/null +++ b/views/footer.php @@ -0,0 +1,52 @@ + + \ No newline at end of file diff --git a/views/header.php b/views/header.php new file mode 100644 index 0000000..5563f5f --- /dev/null +++ b/views/header.php @@ -0,0 +1,30 @@ + \ No newline at end of file