From 976c45d02235057dcf94e50e5fdd8c7fb72d867d Mon Sep 17 00:00:00 2001 From: cocaillot Date: Wed, 18 Dec 2024 14:28:45 +0100 Subject: [PATCH] add dark and light mode --- cursus.html | 10 +- effect.js | 30 ++++ form.html | 84 +++++++++++ form.php | 52 ------- images.html | 5 + img/faced.jpg | Bin 0 -> 10631 bytes index.html | 117 ++++++++++++++-- planning.html | 5 + style.css | 376 ++++++++++++++++++++++++++++++++++++++++++++++++-- 9 files changed, 600 insertions(+), 79 deletions(-) create mode 100644 effect.js create mode 100644 form.html delete mode 100644 form.php create mode 100644 img/faced.jpg 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 0000000000000000000000000000000000000000..01d5b302e061420ecd2d1dbeb53d241aabdeb951 GIT binary patch literal 10631 zcmb_>2T&AE*Y1#m1t>=8k-tv=|VLDJUjrvXZc4%C;sySa86< z`Tx+~`Z!+(ZfgKoeDFW$|8F8PSGQo;tZKnURhXn-v!`E)PqOVWrKV$uae5!?|!?YKNGdUt3j6)7U21 z#n{5vQd7${-OV>VIw3K^&?&n#E4Cy!E+OV0CwPp^%v@|-5FQ>#jG2~M%>Og~AOTuZ zJbS!20z6&-pB9gR7Vi%VV7tAEc(?fX{BK)4d;&ru;#-|G4S-M(# z7w~BD=|DULYV;<&lInqfumHtBYFYwXKm|B`ZSuqAY@tv>`p(aatI1)@o8ic`eQLx4 z^^U@LpI=n!3GF^RdQzAR)@HcWJpXz9eo)y?@VgZKyhD2pP&&0XH$b|-{J%rWz(B3b2^Xgw_b4Zaaw^FYBwkG{)V+dKGrBy z3xyJ(Pf|PRHAw~w+Z@g|z_YA3f;3oT7}lfZJS^)oZ5A#ts{vFxozwbhIVy#Yy~TPy zDCw7L=_M`Z;H#2O;Z;UX^`?e#X{%CeAO`cKxnia$mv+^Ubnbey286xi;ns@sYwPNb^kq8m!?IIvt#CCg;)?%SvF|K zFGk<~37tB%WMT{=^|+?zl3rghA4ForEV3LZxz_qVHmf>020a>+$Ek6V)i9ZzcqyQZ z^!^T_I9${I#;W}M&U=3ePDo^tWFgn^5&I)P8Pr4cmSFGaHRt-QmvAJk2#?;L1nrQ2 zBGw@31T9l`-$=PgKm9Cu0Bsxi4x=>v13+UYuG~vq+z7a{B$T$VC~*{JOjx7Ldk$5Q z^m6W#;6i~%+W-kV7bEjb_Qb^?JG6aZMty$FC1@Z);w*_e*mu)cdNQE$>1iGgE3vuHdMEHnuZIJc_o`NWURu8O`(mxCh`u!G-BiCjL*)jms`I$Ze9)S;+VOMs2wWD2?ueh=%$wv5LFzQ=WMWm3>=b-|_rBy+)`tmkW zf6J4KGqGrN*|6@=MqvK#m-*!>FlQzU#g_>98WC&Yv!&JCebzkVAnhc`m1C2bS$(?p z;R-8`Jkxlzwhf~E!amRcMqnQsf215-^X=}nBEsNN|HZS{(1Z5=aSdNs?;QN)DIS&} zj$6KnIRZ15Q*Z96QkR7$9;lVJXGtU)){`BTi>q}JA}0_S^yzsj#0^UIrN zFw(mXeR@mSr+5L!aylr)Ld9pG1G85i@1QCrJqQ|{VvfLZ4*=l4=Ev&%1&}Q z=CoWqS^}M-Wi1YC(AzrUd#* zZ=gc+Ax5`lVUZY=5&ia^bAvsUC&Mk-gb8kvA19*zTVs(<>0Lv9oG6ZD#32_AJOM5K zEE+r2hDY&QmYx6|J5tk0DXtYx2EETE-o;EJSRT^_C4#z4Mhz?Pf*$_}%l-g;`O~l0 z!)FT9_qU*UO)X;mjN<0CS%GDo(SX=v74uN{Uqa|JCSMe z9DGJ)%k!J8QV*X|mQ^@KuPKX&Pq?gWx@dS^tsjD%W2yX=<95UA?|mR6Vdg?~4)62s z+A#wWH~57#E$t8^O;NWwB)=`($#bcX3owwG#$Y3v}kNka`iu`I`&7XGs zwB3tX$wo&Sm41M!-B)PUs-@P1!;7WDhn!<;hVpHgA$Skq0G^Bh zZ1s^gPKT{*WD<^fxp$6kH5Rm>zuy$CR>0u!!`t4xzZP1h{=?O6cNJNn>$Nz5kPcD^ zy$j09f}q?YHYHOWX|hH>@g|CGNE+MZ6P6hi@d6yf+tjyV#;Yb_=+ZJpPs zvE8my#$Hpw<;S}Y${eDDeO)UD0*1r$H=`eyPCxW=S3B+m`MBG2Y;3OT zcT*bll8%v?v1b2FKa_?*%NUccKe%-lIGN`>Y;#dB>tg;jm-ucd^I)f{YxNzIov&7V zsB~crI?A|~6v$MZL%KOpN+_D|`hT>Za$$Fq5qPu{>N!$ocq$yUZR6YUC3ts=b(`I{ zD-|N}EfRX)2M+7TJ8+IjTn|TzO^s0G1+L4D zw3@Fa^u^3+R3sCsX*wy&mhXMk75R)aH~lDE`JUNYGA%r>_5_cRA@@&S&A zgInk?QgXR!yoo?{Jj%aFso~WDgM>VH;&(e1zmT1x^;q!H7^AXhir>F>J?pp=auv^= zM)(InJadp8|40Qb!mQ2khgCi|-h0$Ix3^EBx;C!_`16Ofnh9@PrNdR{_)o|;6jHcl z6V?Z@gc#R&S%^9<&!fnVuw5jrj!u0n?zw33w{F^pUVDJXKxgiI|I8IIo`39_1v5sL@&__?1aN+-C-l1j zs{|A?8CIfqXNq&_YXw&Yxyl;Y$y_Y&XTuZSYgv}Gd+$o_*VCzW8>MS@jt)b|5+9$J zdAd7=H#_4$5C7YB&GVjmCI?x*x8M-CQG7^UkP}@Ip&H#v+W>O=kf1GCNH`60B@7a@ zbhUhiBAZ>&F&(oG6-B)=h`bYoT5Ef3S8i4MBXK8sHq(idD| zm3F4^gCi7q_P%aVV`Xw@sPz#*q+U6I*f?JG+K@oX7V;LG>`)h+A3lf|*k{wUYnuE^ zmYeH6BQq>wktOrhJbwr_O3X0z_rv^#fz}|V; zvEq*eU3#0h3IfKA!py={i=wIMMlX6gpE;em+8tBc_SHyGqHs+Q+Zm;mNpxS=-9veI z1iQ)3SMv=1i7#QpFQZsWD;qw|YpFIK9?EyRTWV^k56^Xd;c9x=Z~}t0y=L9gdSE+e z%T)O_7rn$%E!#U16(qe4t9ybdhdO6PBQ5$$0^?=ucXfnYo3%dn%`CO{QD;=z1z(Ad zuhl(@^k^hboU^Yi)ZrILpmhnb2I(b@88hiFejf#|EPPyvV%pVIF3KnrG+ph7%~yrw zr+>*+%F#QHUJ&#q?=?AkVp?eM-hdU$^7AG`>Ex6e;Il2C*wdq`b^0i=y0d0c_&agE z<6^Kv*%i^Zn(|EPSOc-{Z$n2c`>f_mK#YMTYplpny8E;)L|<5v(sE)3=bOe0Zr*2M;)~TXe34qHN|x$SMeil7>uW1F zr6E)8oPADb?(gb|dLt>>-a`DP!TTaStF`O>3!U4Y7T>TZOdjs)AKqJjN%uy&(RX_S z)5ENwel+)Xl1vc#4n`_X<)sSCjh8JlnQYO#8%RgK6kgOOGny4Gf=_k9Jwo2`oUMHA zBJ1Jb&hG=`gw)Dqv^Vqfl(hh0qP^G)fa20AR@bd8F%u>a|DKPR7(Lg z23_%~8dYCasik|Fd(6;AiZU7FBw%i!j*`ey@1Ka5%)E>ElvevrNmE9f0JS-lpSJ>D z9A9omF$i_ZpOl_{8!x)f_g>ZEpLO1&ZCOrTVuHS^O{@|+l0bjQI7V&GN495o?}}*; z1VD7;+bqndcjCr=LFWnp#vSX4a@&eJCvIzj;Itr&5!lvWFN2O%%47xMnqiZI9ru@d z6LmQEo3*UH7!y6$b+1~HcEhEOm4%myV?J;hBB4j}rd)X|7@fSQ&VC{~wilJPaz=Dy zlHX+QkMomAnQ~8_#`znWKqb-@j zv~OD`@yf=Uz8sN2Kjge5fXG1g>G6gSY3Q0QUhm8KCw>nn$M2K5MaRtHo5j8~%6P{> z^s!TR0F{*QQ|Oi(DczR*pd+0!p3r|sO;ir|xaBd^23~$TKNSReW_AZ`TvFG?t~Ztb z#cA-PN&9UYG^bbcd%n&7ey3fs*&D_D%l!P~kkk~nx9h{ysNJ|8K039Uu$y~@)+1d< zDSLs}Dncwp?d2DDUKc9+H|-(08WcW^A)n>iV)|7Y+eHRuhVSOm&pz;Co}#yN2hDaK z38_sBAgd`YMpgyp^zG4Tt+|%_#_F_V96Y4tG|5$TOHC`%ymFj_QHglOZ5L(4%U+R4 z%x7j}^Gsauh`roN&sH048n^Sq3#{lu#u_7I%nj`9{hJ5hUvoCFntR%GKB1>7!{F?> zd!DSI#nuw0(0W+E4Bp3mB^fr-T!PK2hv(NlZkW=T-}+SaNR0ZAI74Lr0+rKCW*Z9E%h7LwhA2RPuV)-?2b61m^ocX71I^>f|ru%xY_{ z`vt8q3~!AuPAzYj&yw(3xs$(FGMa6-9w6DtK$>S_Z!suMa7f}+#^FW$-V|RN`VD&K zdn_2;C)wTo-l;B*f9v8tAk)68_te1f)WEJ0W!}H0t7`eS@ZQ@8UZb0oMV>7xDCYb3 z>wZLsCnywAshr4+WgwPF-!YfO|Lx>%`jce~MYa70=-pScRDND97LUKm{Rfz-a5Vm= z6x5Vt$p4At#)H)bb!Ww3UerNPRNq?0NI>L*d{c95jm|f6@9!l+WbO#B;=u-wu5Vk7bEqh=HWK>c!NVp`~`4eS^ZR<2qk)8R=*mTo57zaq)R!PKjI<| z?)O=yIfoI`Na=rWHigWI=q^%5gXvmdZ5U+1RZmnWhpk2Thm z=$E80gH=z8Ep8dVh8Su3*9gNUkx#OK6#@O5>b6gSsiXj~CEZ zISmSfVA*LZ`-dl3zVFKGX_028hrX(ZwCt4ILl&L#KMOOie`Rt}EGm2|W)xNGJmkTC z^P*$<)sKA~gdgu&yY{BeW>KeQh>+nAU~a5PD{7kU8b?@IaC3<6;!4S;z)Izyph2Jz zf_!Ps>BGG$47DdKN0QZYJQls%UQ8}Ez;19Cahu{JBdlPJy36?PC4IjM9o|4eM`%jV>;vb@Qe$a(H%W( zI=QU!y)Bozl{F}C_NmBBhh$}}>Pr?jX-B&EDbc@X$Lk$kgf6n#LOg3GaqS+v%$;0_<^NiW$Fiq*c3>tVN(I}F6aLTSK$jJ4FJ zHh-yl7_2<0g5^JL%IbI6joq0q-`FgcgZ{R^Xr+rhFB`AKzK-a4sDHL*Ox*Eq%@H(UV;eF!leHD{bSZDxv|%DD{q<6k#f&gS zNnuMzbU`rag?&B6tkGaF&O`XXwwZlBUxZ$)BVaeX!CE1{2vNp&17!C@&Q9 z&>0KFEwXNs=3@Dd$U_+@c*w=xKjQ(?r)cBD3Se|l;WQd9*Ce4p0HhTbUyS!Np77Z{ z!K=*RDx8Am^3B7{95V$4-*ISn!_!K8=Gwhi-Jw+cU$*RGP3&#omEG>(yc;#mj#wj! znA-Pb^*&sx8#b#P7s8G@&rnG$dw*>QxL#xa67^(S~ zLG8me1HFkH(>r2C8|cchy~WpvPnnCR=3)&Ha>a*%>=rHiN* zI*ziA<6Hfe2q&}gxOe^Q%!=nG?>;4M{Z+*JF=JA^@$2TG%aa^I_$2bO#Hjwb@+erH zYDbl6GZNg+TZH#wzp^k|&V2h!@I3v^-ePq&Rco@~79WqX+H>UjaN-Zol-+Jhq)H&#&`Ni=I7j~ihX3U*vShKe{>h4Qn&K=5~G^O+=AQ*2egiIRA;@pwFyRH5RAN5{w0y|gN%K}9mF_aB7k3WD-$mzF&KDHIRFL8Ax z3gtn!FWX_}!o-ER$o-U!Ie&51X7AQzkAT+KxR4O&?hDOHvKMog6@ylMiMF})@2;H5 zqbhK3?&uj6vXuRZ8hc_^Fu^Y1EDq*Cu$CA2c|fK__Bz&7z^hk_PqgdQt_Kt)JQJQh z#{_ZI;%y{iCeEc515_kou#rL;WPCa@z=G7k$$tHIW_3nG^c_0pKyPjSOgyq2x8N{btg6aDcSeE?@%YfmgTlDqM-){(z*E&SEp5|Z(D$@PYqBTo z&Ta#~-w>}PlqBaxF0*x6Uv864Z6f$YvYhS!2VP#MZyv2bIScRr&6>bzL^^*K#5z(h zks`A#Cv*kw^!g8bldU3pW8c(toS;;A9 z&!EkT#*KH$V#Dva0mh7=nI@lKrYGF^{RaDqR^EITZ1h@_hPRuwON_S_^OCBytU_K9 z{}Njsd?~z&8dWi5IV~7na&3Jqs_*)eGG>;%iSiC?3bnvh6-rr8POdKj+ESQKwAqbl zQ_&7Gdd>IrMv!OrWopVs=(Pzmv*w3pt{tL`lGxfA-}#$t2kR}Q`H z;9O4At%<1_Y=k2exYi*00|Y!9Smx>me|8d7c6b?hjFTst`Qh#kMw`_lSmHjTDIh`# z+TWAy(E+!IDXDStJ#yi!3Em_DFayzs`LknWz@WD9on)u6O{jMdHJVQY%HMJ(!R{D` z38#Dhc@U@GG2;CRl8^JkXR7P2Iy_N4`OJ^^%pviF+YCdS=1zp10LhS48PhaGZL?ie{2d%ilCW*3N`@>UMG2;L z0NtHtSOt)jmqinqzLyBdiCujV#D6fjJ9UI+j7e|_iS?Ix)woFfku8NbWF@V=IoaWQ zR~&QarbDnvXl-w5*?;2G#Lt)a9y# z+QIx|=~;nc@wK#C+;TW#_SrO2bCDhV_-%E7olZ1r93-dopy?<3L}s&`2CVwk>Mf_qH{K!%kJClRM@e&I{^(&6i}U zZQa$b`^o z{rKU`VxLF{dft^raw5Opv=0z~zQrkUP?d8^+#61q`2%2ZBi8!tJ}&1RZ>O)WQJwzW z2kt!2I#{?P+uicZ?VJ)*@kU?quc?0b2xl7JGo`wao^l&)4GaHm7!X@Ef0HSYET|&@ zE1t$kNN!*E)^_3?v|WueZH5a)-C!9r+pOdJJ=--N;v(hPX9_KYBHpF;Wv3; zcNQq#xOhe->krM?>OFjuqkFrmwbcGMoKCs$XSn#2k>|~_r&_;w-2 zCf=))lryY0iP5|5eLL`dvhDdlzz5u$YbnC=wR3O}pR8fibl5Q;AIB)f-Nh#W0$rW$ zu9nT-LHb$ zod&qdfi@$4>s)q5AGqbfstJ=bMjrVzEJ$1QUJ5M3qDNBFit|l1pZHbEBd^1tAMUpq U&(k}>W&&K*%zfl#&VN4rFWGGwnE(I) literal 0 HcmV?d00001 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; +}