From ee6ab37902a38fa1288a23b523c547ea7e01719c Mon Sep 17 00:00:00 2001 From: Martial Simon Date: Tue, 23 Jan 2024 15:28:58 +0200 Subject: meta: updated front page look --- img/guitar_rotate2.gif | Bin 0 -> 5238 bytes img/w800.png | Bin 906651 -> 843292 bytes index.html | 8 ++++---- style.css | 42 ++++++++++++++++++++++++++++++++++++------ 4 files changed, 40 insertions(+), 10 deletions(-) create mode 100644 img/guitar_rotate2.gif diff --git a/img/guitar_rotate2.gif b/img/guitar_rotate2.gif new file mode 100644 index 0000000..f9507b7 Binary files /dev/null and b/img/guitar_rotate2.gif differ diff --git a/img/w800.png b/img/w800.png index 63306e7..a3df694 100644 Binary files a/img/w800.png and b/img/w800.png differ diff --git a/index.html b/index.html index 29961c3..15fee0e 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@ -

Trop d'ordre sur cette page...

@@ -25,17 +25,17 @@ 🤮🇬🇧

Qui suis-je ?

Informatique -

Musique

diff --git a/style.css b/style.css index f4b6443..1cbbd60 100644 --- a/style.css +++ b/style.css @@ -42,14 +42,14 @@ br{ flex-direction: column; justify-content:center; align-items:center; - width: 265px; + width: 215px; height: 215px; margin: 10px; background-color: rgba(220, 237, 200, 0.55); - /*border: 3px solid skyblue;*/ - border-radius: 2%; - transition-property: opacity, box-shadow; - transition-duration: 0.3s, 0.6s; + /* border: 8px solid skyblue; */ + border-radius: 50%; + transition-property: opacity, box-shadow, transform; + transition-duration: 0.3s, 0.6s, 0.8s; /*animation-name: spin; animation-duration: 2s; animation-iteration-count: infinite; @@ -70,14 +70,34 @@ a.text-link::after{ } .link:hover { - opacity: 0.6; + opacity: 0.75; box-shadow: 4px 4px chartreuse, -4px -4px chartreuse, -4px 4px chartreuse, 4px -4px chartreuse; + transform: scale(109%); /*animation-name: heylisten; animation-duration: 1.5s; animation-timing-function: linear; animation-iteration-count: infinite;*/ } +.linkimg1:hover { + content: url(img/mii.png); +} + +.linkimg2:hover { + content: url(img/ds.gif); +} + +.linkimg3:hover { + content: url(img/w800.png); +} + +.link img:hover { + animation-name: shakey; + animation-duration: 0.4s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; +} + .link span{ font-family:tintin; font-size:1.5em; @@ -200,6 +220,16 @@ marquee{ transform:rotate(359deg); } } + +@keyframes shakey { + 25% { + transform: translateX(-5px) rotate(-5deg); + } + 75% { + transform: translateX(5px) rotate(5deg); + } +} + @keyframes foot-anim{ 0%{ color: #84008c; -- cgit v1.2.3