imk/About
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mobile responsive, extra info

Browse Source
This commit is contained in:
Imk 2025-01-31 11:35:03 +01:00
parent 2b2620676e
commit c6d94729a8
2 changed files with 24 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
css/style.css
View File

@ -1,10 +1,11 @@
body{ body{
background-image: url("../assets/background.png"); background-image: url("../assets/background.png");
background-attachment: fixed;
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
margin-top: .5vh; margin-top: .5vh;
background-size: 250vh 200vh; background-size: 200%;
background-repeat: no-repeat; background-repeat: no-repeat;
font-family: Zilla; font-family: Zilla;
font-style: normal; font-style: normal;
@ -38,7 +39,7 @@ body{
stroke-dasharray: 1000; stroke-dasharray: 1000;
display: block; display: block;
stroke-dashoffset: 1000; stroke-dashoffset: 1000;
height: 40em; height: 100%;
margin-left: auto; margin-left: auto;
margin-top: auto; margin-top: auto;
margin-bottom: auto; margin-bottom: auto;
@ -51,10 +52,12 @@ body{
.flexbox { .flexbox {
display: flex; display: flex;
align-items: flex-start;
width: 100%; width: 100%;
} }
.flexboxf { .flexboxf {
max-width: 50vw; max-width: 30vw;
width:10vw;
display: flex; display: flex;
align-items: stretch; align-items: stretch;
justify-content: center; justify-content: center;
@ -75,8 +78,9 @@ body{
padding: 2vh; padding: 2vh;
border-radius: 5vh; border-radius: 5vh;
box-shadow: .4em .4em .4em .1em rgba(255, 255, 255, 255); box-shadow: .4em .4em .4em .1em rgba(255, 255, 255, 255);
margin-left: auto; /*margin-left: auto;
margin-right: 3em; margin-right: 3em;*/
margin-right: 1%;
overflow: hidden; overflow: hidden;
overflow-y: hidden; overflow-y: hidden;
font-size: 1em; font-size: 1em;
@ -86,7 +90,7 @@ body{
.boxer{ .boxer{
position: sticky; position: sticky;
/*min-width: 20%;*/ /*min-width: 20%;*/
max-width: 20vw; max-width: 40vw;
color: #FFF; color: #FFF;
background: #000; background: #000;
/*outline: #FFF groove .5vh;*/ /*outline: #FFF groove .5vh;*/
@ -106,7 +110,9 @@ body{
overflow:hidden; overflow:hidden;
animation: sc 4s cubic-bezier(0.9, 0, 0.81, 0.53) forwards; animation: sc 4s cubic-bezier(0.9, 0, 0.81, 0.53) forwards;
} }
.cpar{
font-size: 2vw;
}
@keyframes sc{ @keyframes sc{
100%{ 100%{
overflow:visible; overflow:visible;
@ -118,12 +124,13 @@ body{
background: #000; background: #000;
outline: #FFF groove .5vh; outline: #FFF groove .5vh;
margin-top:5vh; margin-top:5vh;
width: 30em; width: 50%;
padding: 2vh; padding: 2vh;
border-radius: 5vh; border-radius: 5vh;
box-shadow: .4em .4em .4em .1em rgba(255, 255, 255, 255); box-shadow: .4em .4em .4em .1em rgba(255, 255, 255, 255);
margin-right: auto; /*margin-right: auto;
margin-left: 3em; margin-left: 3em;*/
margin-left: 1%;
overflow: hidden; overflow: hidden;
overflow-y: hidden; overflow-y: hidden;
font-size: 1em; font-size: 1em;
@ -144,7 +151,7 @@ body{
} }
.sociall{ .sociall{
width: 9vh; width: 9vh;
height: 9vh;
} }
@keyframes dw{ @keyframes dw{

11
index.html
View File

@ -5,7 +5,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title></title> <title></title>
<link href="css/style.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet">
</head> </head>
<body> <body>
<div class="ldiv"><svg class="logo" viewBox="0 0 2625 945" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:square;stroke-miterlimit:1.5;"> <div class="ldiv"><svg class="logo" viewBox="0 0 2625 945" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:square;stroke-miterlimit:1.5;">
@ -27,13 +26,15 @@
</g> </g>
</g> </g>
</svg></div> </svg></div>
<div class="flexbox"> <div class="flexbox" style="justify-content:center;">
<div class="links" style="display:flexbox;justify-content:center;align-items:center;"><div class = "title"></div><img src="assets/imk.png" width="75%" style="display:block; margin-left:auto; margin-right: auto;"/></div> <div class="links" style="display:flexbox;justify-content:center;align-items:center;"><div class = "title"></div><img src="assets/imk.png" width="75%" style="display:block; margin-left:auto; margin-right: auto;"/></div>
<div class="dontformatthis"> <div class="dontformatthis">
<div class="about" id="ct"><div class = "title">ABOUT ME :3</div> <div class="paragraph">Hailo welcome to my site! I'm IMK!</div></div><div class="flexbox" style="margin-left: 1em; margin-right: 10em;"><div class="boxer">Any pronouns!!</div><div class="boxer">Unlabeled (AMAB)</div><div class="boxer">I like boys</div><div class="boxer">what if we all die and it absolutely sucks</div></div> <div class="about" id="ct"><div class = "title">ABOUT ME :3</div> <div class="paragraph">Hailo welcome to my site! I'm IMK!</div></div><div class="flexbox" style="margin-left: 2vw; margin-right: 10vw; width:70%; align-items:start; font-size:2vw;"><div class="boxer">Any pronouns!!</div><div class="boxer">Unlabeled (AMAB)</div><div class="boxer">I like boys</div><div class="boxer">what if we all die and it absolutely sucks</div></div>
<div class="about" id="cpar">I have multiple hobbies like <ul><li>programming - Rust, Gdscript, Python, C# (and html and css if you count it)</li> <li>Art - I mainly do pixel art though I do regular graphics from time to time</li><li>3D - I can model, rig, texture</li><li>Music - I make various genres, my main inspiration is frums and camellia, currently using fl studio, but migrating to reaper</li></ul></div> <div class="about" id="cpar">I have multiple hobbies like <ul><li>programming - Rust, Gdscript, Python, C# (and html and css if you count it)</li> <li>Art - I mainly do pixel art though I do regular graphics from time to time</li><li>3D - I can model, rig, texture</li><li>Music - I make various genres, my main inspiration is frums and camellia, currently using fl studio, but migrating to reaper</li></ul></div>
<div class="about">I tend to make stupid jokes and I'm an anxious autistic mess :3</div>
<div class="about"><div class="title" style="text-align:center;">SOCIALS BELOW</div></div>
</div>
</div> </div>
</div> <div class="flexbox" style="margin-top:5vh;width:fill;justify-content:space-around;margin-bottom:2vh;"><a href="https://youtube.com/@imkjet"><div class="social"><img class="sociall" src="assets/yt.svg"></div></a><a href="https://bsky.app/profile/theboykisser.com"><div class="social"><img class="sociall" src="assets/bs.svg"></div></a><a href="https://open.spotify.com/artist/2IialdWlH9wMBeSEw0cpRq?si=OETC9aRMT7G0O1xCQGf3aQ"><div class="social"><img class="sociall" src="assets/sp.svg"></div></a> <a href="https://discord.com/users/539535619081240596"><div class="social"><img class="sociall" src="assets/dc.svg"></div></a></div>
<div class="flexbox" style="margin-left:10vh; margin-right: 10vh;margin-top:10vh;width:fill;justify-content:space-around;"><a href="https://youtube.com/@imkjet"><div class="social"><img class="sociall" src="assets/yt.svg"></div></a><a href="https://bsky.app/profile/theboykisser.com"><div class="social"><img class="sociall" src="assets/bs.svg"></div></a><a href="https://open.spotify.com/artist/2IialdWlH9wMBeSEw0cpRq?si=OETC9aRMT7G0O1xCQGf3aQ"><div class="social"><img class="sociall" src="assets/sp.svg"></div></a> <a href="https://discord.com/users/539535619081240596"><div class="social"><img class="sociall" src="assets/dc.svg"></div></a></div>
</body> </body>
</html> </html>