diff --git a/cursus.html b/cursus.html index 6b80889..b540488 100644 --- a/cursus.html +++ b/cursus.html @@ -5,6 +5,7 @@ + Corentin - - +

CURSUS SCOLAIRE

diff --git a/effect.js b/effect.js new file mode 100644 index 0000000..8c7bdf2 --- /dev/null +++ b/effect.js @@ -0,0 +1,30 @@ +// Get the theme switch checkbox +const themeSwitch = document.getElementById('theme-switch'); + +// Function to set the theme +const setTheme = (isDark) => { + if (isDark) { + document.body.classList.add('dark-mode'); + document.body.classList.remove('light-mode'); + } else { + document.body.classList.add('light-mode'); + document.body.classList.remove('dark-mode'); + } +}; + +// Retrieve the saved theme from localStorage +const savedTheme = localStorage.getItem('theme'); +if (savedTheme) { + const isDark = savedTheme === 'dark'; + themeSwitch.checked = !isDark; // Set the switch position + setTheme(isDark); +} else { + setTheme(true); // Default to dark mode +} + +// Listen for changes on the switch +themeSwitch.addEventListener('change', (e) => { + const isDark = !e.target.checked; // Light mode when checked + setTheme(isDark); + localStorage.setItem('theme', isDark ? 'dark' : 'light'); // Save preference +}); \ No newline at end of file diff --git a/form.html b/form.html new file mode 100644 index 0000000..28367da --- /dev/null +++ b/form.html @@ -0,0 +1,84 @@ + + + + + + Contact Us + + + + + + + + + + + +
+
+

Contact Us

+
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+ + + + diff --git a/form.php b/form.php deleted file mode 100644 index 6d2d527..0000000 --- a/form.php +++ /dev/null @@ -1,52 +0,0 @@ - - - - - Contactez-moi - - - -

Formulaire de Contact

-
- - -

- - - -

- - - -

- - - -

- - - -

- - -
- - - -

- - - -

- - - - -
- - diff --git a/images.html b/images.html index 5d1c0e3..f3d3b88 100644 --- a/images.html +++ b/images.html @@ -30,7 +30,12 @@
  • Formulaire
  • + + diff --git a/img/faced.jpg b/img/faced.jpg new file mode 100644 index 0000000..01d5b30 Binary files /dev/null and b/img/faced.jpg differ diff --git a/index.html b/index.html index 5ead86d..1ddb7d2 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ + Corentin +

    Caillot Corentin

    - profil -
    - + profil + + +

    Qui suis-je ?

    diff --git a/planning.html b/planning.html index 6e9c4ae..496ddfe 100644 --- a/planning.html +++ b/planning.html @@ -4,6 +4,7 @@ + Corentin diff --git a/style.css b/style.css index 16c174b..111c4ea 100644 --- a/style.css +++ b/style.css @@ -16,17 +16,30 @@ aside { float: right; width: 20%; height: 400px; - border: 2px black solid; + } + +#profile { + border-radius : 50%; + overflow: hidden; /* Ensures content fits the circular shape */ + width: 350px; /* Set a fixed width */ + height: 350px; /* Set the height equal to the width */ + object-fit: cover; /* Ensures the image scales correctly within the circle */ + border: 3px solid #fff; /* Dark line around the profile */ +} + + + + table, td, th { border: solid; border-collapse: collapse; } -body { +body.dark-mode { font-family: Arial, sans-serif; background-color: #323438; margin: 0; @@ -34,6 +47,188 @@ body { color: #f1f1f1; } +/* Light Mode Styles */ +body.light-mode { + background-color: #fcf0fa; /* Soft white background */ + color: #333333; /* Dark gray text for better readability */ + font-family: Arial, sans-serif; +} + +/* Light mode headings */ +body.light-mode h1, +body.light-mode h2:not(.exclude), +body.light-mode h3:not(.exclude) { + color: #222222; /* Slightly darker headings */ +} + +body.light-mode p { + color: #444444; +} + +/* Light mode navbar */ +body.light-mode .navbar { + background: linear-gradient(135deg, #e0eaff, #d1eaff); /* Light blue gradient */ + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */ +} + +body.light-mode .navbar-list a { + color: #0056b3; /* Deep blue for links */ +} + +body.light-mode .navbar-list a:hover { + background-color: #f1f5ff; /* Pale blue hover */ + color: #004080; /* Darker blue */ +} + +/* Dropdown content for light mode */ +body.light-mode .dropdown-content { + background-color: #ffffff; /* Clean white */ + border: 1px solid #dcdcdc; /* Subtle border */ +} + +body.light-mode .dropdown-content a { + color: #0056b3; +} + +body.light-mode .dropdown-content a:hover { + background-color: #f1f5ff; + color: #004080; +} + +/* Light mode for gallery */ +body.light-mode .gallery a { + border-color: #e0e0e0; +} + +body.light-mode .gallery a:hover { + border-color: #004080; /* Highlight border */ +} + +body.light-mode .gallery img { + border: 2px solid #e0eaff; +} + +/* Light mode table */ +body.light-mode table, +body.light-mode td, +body.light-mode th { + border: 1px solid #dcdcdc; + color: #333333; + background-color: #ffffff; +} + +/* Light mode timeline */ +body.light-mode .timeline::after { + background-color: #cccccc; +} + +body.light-mode .container::after { + background-color: #ffffff; + border-color: #ffc107; /* Golden circles */ +} + +body.light-mode .content { + background-color: #ffffff; + color: #333333; + box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); +} + +/* Light mode switch styling */ +body.light-mode .slider { + --background: #cce4ff; /* Light blue slider */ + background-color: var(--background); +} + +body.light-mode .slider:before { + box-shadow: inset 8px -4px 0px 0px #ffe066; /* Light yellow shadow */ + background: var(--background); +} + +body.light-mode input:checked + .slider { + background-color: #99d4ff; /* Slightly darker blue */ +} + +body.light-mode input:checked + .slider:before { + box-shadow: inset 15px -4px 0px 15px #ffc107; /* Golden shadow when active */ +} + +/* Footer Light mode */ +body.light-mode footer { + background-color: #f1f1f1; + color: #333333; + border-top: 1px solid #dcdcdc; + text-align: center; + padding: 10px; +} + +body.light-mode #profile { + border-radius: 50%; + /* Keeps the element circular */ + overflow: hidden; /* Ensures content fits the circular shape */ + width: 350px; /* Set a fixed width */ + height: 350px; /* Set the height equal to the width */ + object-fit: cover; /* Ensures the image scales correctly within the circle */ + border: 3px solid #333333; /* Dark line around the profile */ +} + +body.light-mode .example-2 .icon-content a { + position: relative; + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; + width: 50px; + height: 50px; + border-radius: 50%; + color: #fff; + background-color: #444; + transition: all 0.3s ease-in-out; +} + + +/* Light Mode Contact Form */ +body.light-mode .bg-gray-800 { + background-color: #f9f9f9; /* Light gray background */ + color: #333333; /* Dark gray text */ +} + +body.light-mode .bg-gray-700 { + background-color: #e6e6e6; /* Light input fields */ +} + +body.light-mode .text-white { + color: #333333; /* Dark text for labels and headings */ +} + +body.light-mode .focus\:ring-yellow-300:focus { + --tw-ring-color: #ffd966; /* Light yellow focus ring */ +} + +body.light-mode .w-full.bg-yellow-300 { + background-color: #ffeb99; /* Lighter yellow button */ + color: #444444; /* Darker text */ +} + +body.light-mode .w-full.bg-yellow-300:hover { + background-color: #ffdd66; /* Slightly darker hover effect */ +} + +body.light-mode .timeline::after { + background-color: #d1d1d1; /* Light gray vertical line */ +} +body.light-mode .content{ + background-color: #4444; +} + +body.light-mode .left::before { + border-color: transparent transparent transparent #cccccc; /* Light gray for left triangle */ +} + +body.light-mode .right::before { + border-color: transparent #cccccc transparent transparent; /* Light gray for right triangle */ +} + + h1, h2:not(.exclude), h3:not(.exclude) { color: #ffffff; } @@ -322,18 +517,7 @@ figcaption { } /* The circles on the timeline */ - .container::after { - content: ''; - position: absolute; - width: 25px; - height: 25px; - right: -17px; - background-color: white; - border: 4px solid #FF9F55; - top: 15px; - border-radius: 50%; - z-index: 1; - } + /* Place the container to the left */ .left { @@ -430,4 +614,166 @@ figcaption { #planning{ font-family: 'Roboto', Arial, sans-serif; -} \ No newline at end of file +} + + + +/********************************************************************************/ +/* Dark mode switch */ + + +/* The switch - the box around the slider */ +.switch { + font-size: 17px; + position: relative; + display: inline-block; + width: 3.5em; + height: 2em; +} + +/* Hide default HTML checkbox */ +.switch input { + opacity: 0; + width: 0; + height: 0; +} + +/* The slider */ +.slider { + --background: #28096b; + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: var(--background); + transition: .5s; + border-radius: 30px; +} + +.slider:before { + position: absolute; + content: ""; + height: 1.4em; + width: 1.4em; + border-radius: 50%; + left: 10%; + bottom: 15%; + box-shadow: inset 8px -4px 0px 0px #fff000; + background: var(--background); + transition: .5s; +} + +input:checked + .slider { + background-color: #522ba7; +} + +input:checked + .slider:before { + transform: translateX(100%); + box-shadow: inset 15px -4px 0px 15px #fff000; +} + + + +/*******************************************************************************/ +/* Social networks icons */ + + +ul { + list-style: none; +} + +.example-2 { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} +.example-2 .icon-content { + margin: 0 10px; + position: relative; + padding: 0.5rem; +} +.example-2 .icon-content .tooltip { + position: absolute; + top: 100%; + right: 110%; + transform: translateY(200%); + color: #fff; + padding: 6px 10px; + border-radius: 5px; + opacity: 0; + visibility: hidden; + font-size: 14px; + transition: all 0.3s ease; +} +.example-2 .icon-content:hover .tooltip { + opacity: 1; + visibility: visible; + top: -50px; +} +.example-2 .icon-content a { + position: relative; + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; + width: 50px; + height: 50px; + border-radius: 50%; + color: #444; + background-color: #fff; + transition: all 0.3s ease-in-out; +} +.example-2 .icon-content a:hover { + box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 12%); +} +.example-2 .icon-content a svg { + position: relative; + z-index: 1; + width: 30px; + height: 30px; +} +.example-2 .icon-content a:hover { + color: white; +} +.example-2 .icon-content a .filled { + position: absolute; + top: auto; + bottom: 0; + left: 0; + width: 100%; + height: 0; + background-color: #000; + transition: all 0.3s ease-in-out; +} +.example-2 .icon-content a:hover .filled { + height: 100%; +} + +.example-2 .icon-content a[data-social="linkedin"] .filled, +.example-2 .icon-content a[data-social="linkedin"] ~ .tooltip { + background-color: #0274b3; +} + +.example-2 .icon-content a[data-social="github"] .filled, +.example-2 .icon-content a[data-social="github"] ~ .tooltip { + background-color: #24262a; +} +.example-2 .icon-content a[data-social="instagram"] .filled, +.example-2 .icon-content a[data-social="instagram"] ~ .tooltip { + background: linear-gradient( + 45deg, + #405de6, + #5b51db, + #b33ab4, + #c135b4, + #e1306c, + #fd1f1f + ); +} +.example-2 .icon-content a[data-social="youtube"] .filled, +.example-2 .icon-content a[data-social="youtube"] ~ .tooltip { + background-color: #ff0000; +}