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

9
index.html
View File

@ -5,7 +5,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="css/style.css" rel="stylesheet">
</head>
<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;">
@ -27,13 +26,15 @@
</g>
</g>
</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="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">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 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>
<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>
</body>
</html>