diff options
| -rw-r--r-- | en/index.html | 29 | ||||
| -rw-r--r-- | fonts/tintin_talking.ttf | bin | 0 -> 51500 bytes | |||
| -rw-r--r-- | img/aboutme.png | bin | 112934 -> 462187 bytes | |||
| -rw-r--r-- | img/music.png | bin | 0 -> 3101074 bytes | |||
| -rw-r--r-- | img/wp.gif | bin | 0 -> 4027407 bytes | |||
| -rw-r--r-- | index.html | 17 | ||||
| -rw-r--r-- | moa.html | 13 | ||||
| -rw-r--r-- | style.css | 37 |
8 files changed, 87 insertions, 9 deletions
diff --git a/en/index.html b/en/index.html new file mode 100644 index 0000000..bddf2c4 --- /dev/null +++ b/en/index.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="fr"> + <head> + <title>Marcellus</title> + <meta content="text/html; charset=utf-8" http-equiv="content-type" /> + <link rel="stylesheet" type="text/css" href="../style.css" /> + </head> + <body> + <h1>Marcellus</h1> + <a href="../index.html" class="language">🇫🇷</a> + <div class="links"> + <a href="me.html" class="link"> + <img src=../img/aboutme.png width=60% /> + <span>Who am I ?</span> + </a> + </div> + <div class="links"> + <a href="#" class="link"> + + <span>IT</span> + </a> + <a href="#" class="link"> + <img src=../img/music.png width=60% /> + <span>Music</span> + </a> + </div> + </body> +</html> + diff --git a/fonts/tintin_talking.ttf b/fonts/tintin_talking.ttf Binary files differnew file mode 100644 index 0000000..270d3f8 --- /dev/null +++ b/fonts/tintin_talking.ttf diff --git a/img/aboutme.png b/img/aboutme.png Binary files differindex 32f3ccc..2847924 100644 --- a/img/aboutme.png +++ b/img/aboutme.png diff --git a/img/music.png b/img/music.png Binary files differnew file mode 100644 index 0000000..7b857da --- /dev/null +++ b/img/music.png diff --git a/img/wp.gif b/img/wp.gif Binary files differnew file mode 100644 index 0000000..aa3c7fd --- /dev/null +++ b/img/wp.gif @@ -7,13 +7,22 @@ </head> <body> <h1>Marcellus</h1> + <a href="en/index.html" class="language">🤮🇬🇧</a> <div class="links"> - <a href="#" class="link"> - <img src=img/aboutme.png /> + <a href="moa.html" class="link"> + <img src=img/aboutme.png width=60% /> <span>Qui suis-je ?</span> </a> - <a href="#" class="link">Informatique</a> - <a href="#" class="link">Musique</a> + </div> + <div class="links"> + <a href="#" class="link"> + + <span>Informatique</span> + </a> + <a href="#" class="link"> + <img src=img/music.png width=60% /> + <span>Musique</span> + </a> </div> </body> </html> diff --git a/moa.html b/moa.html new file mode 100644 index 0000000..7b5ce54 --- /dev/null +++ b/moa.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> + <head> + <title>Marcellus</title> + <link rel="stylesheet" type="text/css" href="style.css" /> + </head> + <body> + Marcellus est mon pseudo, pour raisons évidentes je ne donnerai pas mon vrai prénom... hem <br> + D'habitude, je suis pas spécialement doué pour parler de moi, mais bon, j'ai envie de faire l'effort pour une fois. Je suis étudiant en informatique à l'EPITA, musicien depuis l'enfance, grand frère, euuuh c'est tout (je crois). J'ai eu l'idée de faire ce petit site/blog perso en regardant les projets (et notamment le site) d'un ami de l'école, <a href="https://ratakor.com">Ratakor</a>, qui m'a appris pas mal de trucs sur l'utilisation des systèmes libres et open source. C'est un peu mon mentor, même si on est de la même promo. + J'espère que vous aurez plaisir à faire le tour de mon site, et bonne journée!<br> + <a href=index.html>Retour</a> + </body> +</html> @@ -1,8 +1,17 @@ body{ + background-image:url(img/wp.gif); + background-size:cover; text-align:center; font-family:Cousine; } +.language{ + text-decoration:none; + position: absolute; + right:5px; + top: 0; +} + .links{ display: grid; justify-content: center; @@ -12,19 +21,37 @@ body{ .link{ display: flex; flex-direction: column; - justify-content: center; - align-items: center; + justify-content:center; + align-items:center; width: 265px; height: 215px; margin: 10px; - background-color: rgba(23, 23, 23, 0.55); - border-radius: 10px; - border: 2px solid #bd93f9; + background-color: rgba(220, 237, 200, 0.55); border: 3px solid skyblue; border-radius: 2%; } +a{ + text-decoration: none; + color: inherit; +} + +.link:hover { + opacity: 0.6; +} +.link span{ + font-family:tintin; + font-size:1.5em; + position: relative; + top: 3%; +} + @font-face{ font-family:Cousine; src:url(./fonts/CousineNerdFont-Regular.ttf); } + +@font-face{ + font-family:tintin; + src:url(./fonts/tintin_talking.ttf); +} |
