summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorMartial Simon <msimon_fr@hotmail.com>2023-06-16 16:38:52 +0200
committerMartial Simon <msimon_fr@hotmail.com>2023-06-16 16:38:52 +0200
commit9137cfd95b09c7d113e745f04e06d0e66ca64b6d (patch)
tree40fe29599c3cd557ef1f4fa379b3c6da559ceb70
parentee187af3dafc9be535ccde26badbdd9ce63a607a (diff)
feat: index.html à peu près pleine, texte dans moa.html
-rw-r--r--en/index.html29
-rw-r--r--fonts/tintin_talking.ttfbin0 -> 51500 bytes
-rw-r--r--img/aboutme.pngbin112934 -> 462187 bytes
-rw-r--r--img/music.pngbin0 -> 3101074 bytes
-rw-r--r--img/wp.gifbin0 -> 4027407 bytes
-rw-r--r--index.html17
-rw-r--r--moa.html13
-rw-r--r--style.css37
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
new file mode 100644
index 0000000..270d3f8
--- /dev/null
+++ b/fonts/tintin_talking.ttf
Binary files differ
diff --git a/img/aboutme.png b/img/aboutme.png
index 32f3ccc..2847924 100644
--- a/img/aboutme.png
+++ b/img/aboutme.png
Binary files differ
diff --git a/img/music.png b/img/music.png
new file mode 100644
index 0000000..7b857da
--- /dev/null
+++ b/img/music.png
Binary files differ
diff --git a/img/wp.gif b/img/wp.gif
new file mode 100644
index 0000000..aa3c7fd
--- /dev/null
+++ b/img/wp.gif
Binary files differ
diff --git a/index.html b/index.html
index 1bfdf74..af2652a 100644
--- a/index.html
+++ b/index.html
@@ -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>
diff --git a/style.css b/style.css
index 451b2bc..0cb9c6f 100644
--- a/style.css
+++ b/style.css
@@ -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);
+}