- Je suis un développeur web passionné avec de l'expérience en création de sites web et applications modernes. J'aime créer des expériences utilisateur intuitives et attrayantes.
+Développeur
Web
Card Hover
++ Lorem ipsum dolor sit amet, consectetur adipii + voluptas ten mollitia pariatur odit, ab + minus ratione adipisci accusamus vel est excepturi laboriosam magnam + necessitatibus dignissimos molestias. +
+Développeur
Mobile
Card Hover
++ Lorem ipsum dolor sit amet, consectetur adipii + voluptas ten mollitia pariatur odit, ab + minus ratione adipisci accusamus vel est excepturi laboriosam magnam + necessitatibus dignissimos molestias. +
+Apprenti
Pixel-Artist
Card Hover
++ Lorem ipsum dolor sit amet, consectetur adipii + voluptas ten mollitia pariatur odit, ab + minus ratione adipisci accusamus vel est excepturi laboriosam magnam + necessitatibus dignissimos molestias. +
+Lorem Ipsum
+Lorem Ipsum
+Lorem Ipsum
+Il s'agit d'un projet de deuxième année de l'IUT informatique de Clermont-Ferrand. Il s'agit d'un site-web permettant à des joueurs d'en apprendre un peu plus sur l'art en s'amusant. Il sera composé de plusieurs modes de jeu : + + Plus d'infos +
Description du projet 2.
+ +Description du projet 3.
+ +Welcome on this template html/css project - -
Very simple, some links, some menu... make it your own -… - -
I have nothing more to say - - -
Template made in 2022
-
-
-
-
\ No newline at end of file
diff --git a/logo/BSLogoW.png b/logo/BSLogoW.png
new file mode 100644
index 0000000..f106bbc
Binary files /dev/null and b/logo/BSLogoW.png differ
diff --git a/logo/githubLogoW.png b/logo/githubLogoW.png
new file mode 100644
index 0000000..61f0077
Binary files /dev/null and b/logo/githubLogoW.png differ
diff --git a/logo/linkedinLogoW.png b/logo/linkedinLogoW.png
new file mode 100644
index 0000000..3b347a8
Binary files /dev/null and b/logo/linkedinLogoW.png differ
diff --git a/logo/teamsLogoW.png b/logo/teamsLogoW.png
new file mode 100644
index 0000000..ce1dda1
Binary files /dev/null and b/logo/teamsLogoW.png differ
diff --git a/mycoolstyle.css b/mycoolstyle.css
deleted file mode 100644
index 92d69df..0000000
--- a/mycoolstyle.css
+++ /dev/null
@@ -1,32 +0,0 @@
-body {
- padding-left: 11em;
- font-family: Georgia, 'Georgia', "Times New Roman",
- Times, serif;
- color: darksalmon;
- background-color: rgb(39, 39, 84) }
- ul.navbar {
- list-style-type: none;
- padding: 0;
- margin: 0;
- position: absolute;
- top: 2em;
- left: 1em;
- width: 9em }
- h1 {
- font-family: Helvetica, Geneva, Arial,
- SunSans-Regular, sans-serif }
- ul.navbar li {
- background: white;
- margin: 0.5em 0;
- padding: 0.3em;
- border-right: 1em solid darksalmon }
- ul.navbar a {
- text-decoration: none }
- a:link {
- color: blue }
- a:visited {
- color: darkblue }
- address {
- margin-top: 1em;
- padding-top: 1em;
- border-top: thin dotted }
\ No newline at end of file
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..db7cdf6
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,796 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+html {
+ scroll-behavior: smooth;
+}
+
+:root {
+ --Primary: #581845;
+ --Secondary: #900C3F;
+ --Tertiary: #C70039;
+ --Quaternary: #250F1E;
+}
+
+body {
+ font-family: 'Roboto', sans-serif;
+ line-height: 1.6;
+ background-color: #f4f4f4;
+ color: #333;
+}
+
+.accueil{
+ background-color: #b5d2fc
+}
+
+header {
+ position: relative;
+ width: 100%;
+ height: 100vh;
+ background: url('img/accueil.jpeg') no-repeat center center;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ color: white;
+}
+
+.header-content {
+ position: relative;
+ z-index: 2;
+}
+
+header::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.5);
+ z-index: 1;
+}
+
+header nav ul {
+ list-style: none;
+ display: flex;
+ justify-content: center;
+ margin-bottom: 20px;
+}
+
+header nav ul li {
+ margin: 0 15px;
+}
+
+header nav ul li a {
+ color: #fff;
+ text-decoration: none;
+ font-weight: bold;
+}
+
+/*Title*/
+.nine h1 {
+ text-align:center; font-size:50px; text-transform:uppercase; color:#f2f2f2;
+ font-family:"Playfair Display", serif; font-weight:bold;
+}
+
+.nine h1 span {
+margin-top: 5px;
+ font-size:15px; color:#f2f2f2; word-spacing:1px; font-weight:normal; letter-spacing:2px;
+ text-transform: uppercase; font-family:"Raleway", sans-serif; font-weight:500;
+
+ display: grid;
+ grid-template-columns: 1fr max-content 1fr;
+ grid-template-rows: 27px 5;
+ grid-gap: 20px;
+ align-items: center;
+}
+
+.nine h1 span:after,.nine h1 span:before {
+ content: " ";
+ display: block;
+ border-bottom: 1px solid #ccc;
+ border-top: 1px solid #ccc;
+ height: 5px;
+background-color:#f8f8f8;
+}
+
+
+/* Add a black background color to the top navigation */
+.topnav {
+ background-color: #333;
+ overflow: hidden;
+}
+
+/* Style the links inside the navigation bar */
+.topnav a {
+ float: left;
+ color: #f2f2f2;
+ text-align: center;
+ padding: 14px 16px;
+ text-decoration: none;
+ font-size: 17px;
+}
+
+/* Change the color of links on hover */
+.topnav a:hover {
+ background-color: #ddd;
+ color: black;
+}
+
+/* Add a color to the active/current link */
+.topnav a.active {
+ background-color: #04AA6D;
+ color: white;
+}
+
+/* .header-content {
+ max-width: 600px;
+ margin: 0 auto;
+} */
+
+.section {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 60px 20px;
+ text-align: center;
+
+}
+
+/** Text */
+.mainTitle{
+ background-image: linear-gradient(to left, var(--Secondary), var(--Tertiary));
+ color: transparent;
+ background-clip: text;
+ -webkit-background-clip: text;
+ font-size: 3rem;
+ font-weight: 700;
+ margin-bottom: 1rem;
+}
+
+/** About me*/
+
+.about-deck{
+ display: flex;
+ justify-content: center;
+ gap: 2.5em;
+ margin-top: 2.5em;
+}
+
+.about-card-container {
+ width: 300px;
+ height: 300px;
+ position: relative;
+ border-radius: 10px;
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+ overflow: hidden;
+}
+
+.about-card {
+ width: 100%;
+ height: 100%;
+ border-radius: inherit;
+}
+
+.about-card .about-front-content {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1)
+}
+
+.about-card .about-front-content p {
+ font-size: 32px;
+ font-weight: 700;
+ opacity: 1;
+ /* background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% ); */
+ background: linear-gradient(-45deg, var(--Tertiary) 0%, var(--Primary) 100% );
+ background-clip: text;
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1)
+}
+
+.about-card .about-content {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ gap: 10px;
+ background: linear-gradient(-45deg, var(--Tertiary) 0%, var(--Primary) 100% );
+ color: #e8e8e8;
+ padding: 20px;
+ line-height: 1.5;
+ border-radius: 5px;
+ pointer-events: none;
+ transform: translateY(96%);
+ transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
+}
+
+.about-card .about-content .about-heading {
+ font-size: 32px;
+ font-weight: 700;
+}
+
+.about-card:hover .about-content {
+ transform: translateY(0);
+}
+
+.about-card:hover .about-front-content {
+ transform: translateY(-30%);
+}
+
+.about-card:hover .about-front-content p {
+opacity: 0;
+}
+
+/** Parcour */
+
+#parcour{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 100px 0;
+ /*font-family: Jost;*/
+}
+
+.timeline {
+ width: 80%;
+ height: auto;
+ max-width: 800px;
+ margin: 0 auto;
+ display: flex;
+ flex-direction: column;
+}
+
+.timeline-content {
+ border-radius: 20px;
+ background: linear-gradient(#fefefe, #eeeeee) padding-box,
+ linear-gradient(var(--Tertiary), var(--Secondary)) border-box;
+ border: 2px solid transparent;
+ position: relative;
+ padding: 1.8rem;
+ transition: 0.5s ease-out;
+ overflow: visible;
+}
+
+.timeline-component {
+ margin: 0px 20px 20px 20px;
+}
+
+@media screen and (min-width: 768px) { /* Trop petit écran => sans frise*/
+ .timeline {
+ display: grid;
+ grid-template-columns: 1fr 3px 1fr;
+ }
+ .timeline-middle {
+ position: relative;
+ background-image: linear-gradient(45deg, var(--Tertiary), var(--Secondary));
+ width: 3px;
+ height: 100%;
+ }
+ .main-middle {
+ opacity: 0;
+ }
+ .timeline-circle {
+ position: absolute;
+ top: 0;
+ left: 50%;
+ width: 15px;
+ height: 15px;
+ border-radius: 50%;
+ background-image: linear-gradient(45deg, var(--Tertiary), var(--Secondary));
+ -webkit-transform: translateX(-50%);
+ transform: translateX(-50%);
+ }
+}
+
+/** Project Grid */
+.projects-grid {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 2.5em;
+ align-items: start;
+}
+
+.project-card {
+ width: 500px;
+ height: 254px;
+
+ border-radius: 50px;
+ background: #e0e0e0;
+ box-shadow: 18px 18px 0px #bebebe,
+ -18px -18px 0px #ffffff;
+
+ border-radius: 20px;
+ background: #f5f5f5;
+ border: 2px solid #c3c6ce;
+ position: relative;
+ padding: 1.8rem;
+ transition: 0.5s ease-out;
+ overflow: visible;
+}
+
+.project-card h3 {
+ color: var(--Secondary);
+ margin-bottom: 1em;
+}
+
+.project-card-button {
+ transform: translate(-50%, 125%);
+ width: 60%;
+ border-radius: 1rem;
+ border: none;
+ background-color: var(--Secondary);
+ color: #fff;
+ font-size: 1rem;
+ padding: .5rem 1rem;
+ position: absolute;
+ left: 50%;
+ bottom: 0;
+ opacity: 0;
+ transition: 0.3s ease-out;
+}
+.project-card-details {
+ color: black;
+ height: 100%;
+ gap: .5em;
+ display: grid;
+ place-content: center;
+}
+
+
+/*Hover*/
+.project-card:hover {
+ border-color: var(--Secondary);
+ box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.25);
+}
+
+.project-card:hover .project-card-button {
+ transform: translate(-50%, 50%);
+ opacity: 1;
+}
+
+
+.projects-grid .project-card:nth-child(2n+1):not(:first-child) {
+ grid-column: 1;
+ margin-bottom: -50px;
+ margin-top: -100px;
+}
+
+.projects-grid .project-card:nth-child(2n) {
+ grid-column: 2;
+ margin-top: 100px;
+}
+
+/** card style */
+
+
+/** Alt Links*/
+
+.AltLinks{
+ display: flex;
+ justify-content: center;
+ gap: 1.5em;
+ margin-top: 1em;
+}
+
+.Btn {
+ width: 45px;
+ height: 45px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: none;
+ background-color: transparent;
+ position: relative;
+ /* overflow: hidden; */
+ border-radius: 7px;
+ cursor: pointer;
+ transition: all .3s;
+ z-index: 2;
+}
+
+.imgContainer {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: transparent;
+ backdrop-filter: blur(1px);
+ letter-spacing: 0.8px;
+ border-radius: 10px;
+ transition: all .3s;
+ border: 1px solid rgba(156, 156, 156, 0.466);
+}
+
+.imgIcon {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ border-radius: 7px;
+}
+
+
+.BG {
+ position: absolute;
+ content: "";
+ width: 100%;
+ height: 100%;
+
+ background: var(--Secondary);
+ background: linear-gradient(to left, var(--Secondary), var(--Tertiary));
+ /* background: linear-gradient(-45deg, var(--Tertiary) 0%, var(--Secondary) 100% ); */
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
+ z-index: -1;
+ border-radius: 9px;
+ pointer-events: none;
+ transition: all .3s;
+}
+
+.Btn:hover .BG {
+ transform: rotate(35deg);
+ transform-origin: bottom;
+}
+
+.Btn:hover .imgContainer {
+ background-color: rgba(156, 156, 156, 0.466);
+}
+
+
+/** Form */
+
+.form-container {
+ width: 60%;
+ background: linear-gradient(#fefefe, #eeeeee) padding-box,
+ linear-gradient(300deg, transparent 5%,var(--Tertiary), var(--Secondary)) border-box;
+ border: 2px solid transparent;
+ padding: 32px 24px;
+ font-size: 14px;
+ font-family: inherit;
+ color: white;
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ box-sizing: border-box;
+ border-radius: 16px;
+ position: relative;
+ z-index: 1;
+
+}
+
+
+.form-container .form {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+}
+
+.form-container .form-group {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+}
+
+.form-container .form-group label {
+ display: block;
+ margin-bottom: 5px;
+ color: var(--Quaternary);
+ font-weight: 600;
+ font-size: 12px;
+}
+
+.form-container .form-group input {
+ width: 100%;
+ padding: 12px 16px;
+ border-radius: 8px;
+ color: var(--Quaternary);
+ font-family: inherit;
+ background-color: transparent;
+ border: 1px solid var(--Primary);
+}
+
+.form-container .form-group textarea {
+ width: 100%;
+ padding: 12px 16px;
+ border-radius: 8px;
+ resize: none;
+ color: var(--Quaternary);
+ height: 96px;
+ border: 1px solid var(--Primary);
+ background-color: transparent;
+ font-family: inherit;
+}
+
+.form-container .form-group input::placeholder {
+ opacity: 0.5;
+}
+
+.form-container .form-group input:focus {
+ outline: none;
+ border-color: var(--Secondary);
+}
+
+.form-container .form-group textarea:focus {
+ outline: none;
+ border-color: var(--Secondary);
+}
+
+
+.send-msg {
+ width: 12rem;
+ height: auto;
+ position: relative;
+ display: inline-block;
+ cursor: pointer;
+ outline: none;
+ border: 0;
+ vertical-align: middle;
+ text-decoration: none;
+ background: transparent;
+ padding: 0;
+ font-size: inherit;
+ font-family: inherit;
+}
+
+button.send-msg .circle {
+ transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
+ position: relative;
+ display: block;
+ margin: 0;
+ width: 3rem;
+ height: 3rem;
+ background: var(--Primary);
+ border-radius: 1.625rem;
+}
+
+button.send-msg .circle .icon {
+ transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ margin: auto;
+ background: #fff;
+}
+
+button.send-msg .circle .icon.arrow {
+ transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
+ left: 0.625rem;
+ width: 1.125rem;
+ height: 0.125rem;
+ background: none;
+}
+
+button.send-msg .circle .icon.arrow::before {
+ position: absolute;
+ content: "";
+ top: -0.29rem;
+ right: 0.0625rem;
+ width: 0.625rem;
+ height: 0.625rem;
+ border-top: 0.125rem solid #fff;
+ border-right: 0.125rem solid #fff;
+ transform: rotate(45deg);
+}
+
+button.send-msg .button-text {
+ transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ padding: 0.75rem 0;
+ margin: 0 0 0 1.85rem;
+ color: var(--Quaternary);
+ font-weight: 700;
+ line-height: 1.6;
+ text-align: center;
+ text-transform: uppercase;
+}
+
+button:hover .circle {
+ width: 100%;
+}
+
+button:hover .circle .icon.arrow {
+ background: #fff;
+ transform: translate(1rem, 0);
+}
+
+button:hover .button-text {
+ color: #fff;
+}
+
+/** Inputs */
+.form__group {
+ position: relative;
+ padding: 20px 0 0;
+ width: 100%;
+ max-width: 500px;
+}
+
+.form__field {
+ font-family: inherit;
+ width: 100%;
+ border: none;
+ border-bottom: 2px solid var(--Quaternary);
+ outline: 0;
+ font-size: 17px;
+ color: var(--Quaternary);
+ padding: 7px 0;
+ background: transparent;
+ transition: border-color 0.2s;
+}
+
+.form__field::placeholder {
+ color: transparent;
+}
+
+.form__field:placeholder-shown ~ .form__label {
+ font-size: 17px;
+ cursor: text;
+ top: 20px;
+}
+
+.form__label {
+ position: absolute;
+ top: 0;
+ display: block;
+ transition: 0.2s;
+ font-size: 17px;
+ color: var(--Quaternary);
+ pointer-events: none;
+}
+
+.form__field:focus {
+ padding-bottom: 6px;
+ font-weight: 700;
+ border-width: 3px;
+ border-image: linear-gradient(to right, var(--Primary), var(--Secondary));
+ border-image-slice: 1;
+}
+
+.form__field:focus ~ .form__label {
+ position: absolute;
+ top: 0;
+ display: block;
+ transition: 0.2s;
+ font-size: 17px;
+ color: var(--Primary);
+ font-weight: 700;
+}
+
+/* reset input */
+.form__field:required, .form__field:invalid {
+ box-shadow: none;
+}
+
+
+/** Footer */
+
+footer {
+ background-color: #333;
+ color: #fff;
+ text-align: center;
+ padding: 20px 0;
+ margin-top: 40px;
+}
+
+/* Loader**/
+
+.loader {
+ --path: var(--Primary);
+ --dot: var(--Secondary);
+ --duration: 3s;
+ width: 44px;
+ height: 44px;
+ position: relative;
+}
+
+.loader:before {
+ content: '';
+ width: 6px;
+ height: 6px;
+ border-radius: 50%;
+ position: absolute;
+ display: block;
+ background: var(--dot);
+ top: 37px;
+ left: 19px;
+ transform: translate(-18px, -18px);
+ animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
+}
+
+.loader svg {
+ display: block;
+ width: 100%;
+ height: 100%;
+}
+
+.loader svg rect, .loader svg polygon, .loader svg circle {
+ fill: none;
+ stroke: var(--path);
+ stroke-width: 10px;
+ stroke-linejoin: round;
+ stroke-linecap: round;
+}
+
+.loader svg polygon {
+ stroke-dasharray: 145 76 145 76;
+ stroke-dashoffset: 0;
+ animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
+}
+
+.loader.triangle {
+ width: 48px;
+}
+
+.loader.triangle:before {
+ left: 21px;
+ transform: translate(-10px, -18px);
+ animation: dotTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
+}
+
+@keyframes pathTriangle {
+ 33% {
+ stroke-dashoffset: 74;
+ }
+
+ 66% {
+ stroke-dashoffset: 147;
+ }
+
+ 100% {
+ stroke-dashoffset: 221;
+ }
+}
+
+@keyframes dotTriangle {
+ 33% {
+ transform: translate(0, 0);
+ }
+
+ 66% {
+ transform: translate(10px, -18px);
+ }
+
+ 100% {
+ transform: translate(-10px, -18px);
+ }
+}
+.loader-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(255, 255, 255, 0.8);
+ z-index: 9999;
+}
+.loader {
+ display: inline-block;
+ margin: 0 16px;
+}
+.hidden {
+ display: none;
+}
+