diff options
| -rw-r--r-- | img/guitar_rotate2.gif | bin | 0 -> 5238 bytes | |||
| -rw-r--r-- | img/w800.png | bin | 906651 -> 843292 bytes | |||
| -rw-r--r-- | index.html | 8 | ||||
| -rw-r--r-- | style.css | 42 |
4 files changed, 40 insertions, 10 deletions
diff --git a/img/guitar_rotate2.gif b/img/guitar_rotate2.gif Binary files differnew file mode 100644 index 0000000..f9507b7 --- /dev/null +++ b/img/guitar_rotate2.gif diff --git a/img/w800.png b/img/w800.png Binary files differindex 63306e7..a3df694 100644 --- a/img/w800.png +++ b/img/w800.png @@ -10,7 +10,7 @@ <link rel="icon" type="favicon/ico" href="img/mii.ico"> </head> <body class="index"> - <p style="position: absolute; top:50%; left: 50%; text-align: center; transform: rotate(-45deg);">Trop d'ordre sur cette page...</p> + <p style="position: absolute; top:50%; left: 15%; text-align: center; transform: rotate(-45deg);">Trop d'ordre sur cette page...</p> <a style="position: absolute; top : 20%; left: 25%"href="https://tamanotchi.world/8103c"> <img src="https://tamanotchi.world/i2/8103" alt="It's tamaNOTchi! Click to feed!"> </a> @@ -25,17 +25,17 @@ <a href="en/index.html" class="language">🤮🇬🇧</a> <div class="links"> <a href="main.html" class="link"> - <img src=img/aboutme.png width=60% /> + <img class="linkimg1" src=img/aboutme.png width=60% /> <span>Qui suis-je ?</span> </a> </div> <div class="links"> <a href="info.html" class="link"> - <img src="https://www.your3dsource.com/images/laptopB.gif"> + <img class="linkimg2" src="https://www.your3dsource.com/images/laptopB.gif" width="60%"> <span>Informatique</span> </a> <a href="musique.html" class="link"> - <img src=img/music.png width=60% /> + <img class="linkimg3" src=img/music.png width=60% /> <span>Musique</span> </a> </div> @@ -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; |
