maggie/meow
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #3 from meqativ/main

Browse source 
make buttons scale from center
This commit is contained in:
maggster165 2024-01-17 21:23:51 +01:00 committed by GitHub
commit 261a187f78
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 73 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
index.html
View file

@ -17,10 +17,16 @@
<body> <body>
<img class="pfp" src="https://adu.shiggy.fun/v1/330299657458679821/avatar" alt="maggie" width="128" title="maggie"/> <img class="pfp" src="https://adu.shiggy.fun/v1/330299657458679821/avatar" alt="maggie" width="128" title="maggie"/>
<div class="top"> <div class="top">
<h1>Hi! I'm Maggie!</h1> <h1>Hi! I'm Maggie!</h1>
<p>Welcome to my website!</p> <p>Welcome to my website!</p>
<a href="https://discord.com/users/330299657458679821"><img class="logo" src="catpdiscord.png" width="32" title="maggie.pi"/></a> <div class="buttons">
<a href="https://github.com/maggster165"><img class="logo2" src="catpgh.png" title="maggster165" width="32"/></a> <a class="btn" href="https://discord.com/users/330299657458679821">
<img class="logo" src="catpdiscord.png" width="32" title="maggie.pi">
</a>
<a class="btn" href="https://github.com/maggster165">
<img class="logo2" src="catpgh.png" width="32" title="maggster165">
</a>
</div>
</div> </div>
<div class="aboutbox"> <div class="aboutbox">
<h3>About Me</h3> <h3>About Me</h3>

125
style.css
View file

@ -1,75 +1,76 @@
body{ body {
background-color: #24273a; background-color: #24273a;
color: #cad3f5; color: #cad3f5;
font-family: 'Open Sans'; font-family: 'Open Sans';
}
.top {
display: inline-block;
margin-left: 10rem;
}
h1 {
margin-left: 1rem;
}
.pfp {
border-radius: 50%;
padding: 1rem;
float: none;
transition: 0.3s;
position: absolute
} }
.top{ .pfp:hover {
display: inline-block; scale: 125%;
transition: 0.3s;
margin-left: 10rem;
} }
h1{ p {
margin-left: 1rem; margin-left: 1rem;
} }
h3 {
.pfp{ margin-top: 4rem;
border-radius: 50%;
padding: 1rem;
float: none;
transition: 0.3s;
position: absolute
} }
.pfp:hover{ .logo,
scale: 125%; .logo2 {
transition: 0.3s; width: 2rem;
float: left;
position: relative;
transition: 0.3s;
} }
p{ .logo:hover,
margin-left: 1rem; .logo2:hover {
background-color: #b7bdf8;
padding: 5px;
scale: 125%;
border-radius: 10px;
transition: 0.3s;
} }
h3{ .logo:hover {
margin-top: 4rem; content: url(catpdiscordhover.png);
} }
.logo{ .logo2:hover {
top: rem; content: url(catpghover.png);
margin-left: 1rem;
float: left;
position: relative;
transition: 0.3s;
} }
.logo2{ h4 {
margin-left: 2rem; margin-left: 1rem;
position: relative;
float: none;
transition: 0.3s;
} }
.logo:hover{ .aboutbox {
background-color: #b7bdf8; margin-left: 2rem;
padding: 5px;
scale: 125%;
border-radius: 10px;
transition: 0.3s;
content: url(catpdiscordhover.png);
} }
.logo2:hover{ a:link {
background-color: #b7bdf8; color: #c6a0f6;
padding: 5px;
scale: 125%;
border-radius: 10px;
transition: 0.3s;
content: url(catpghover.png);
}
h4{
margin-left: 1rem;
}
.aboutbox{
margin-left: 2rem;
}
a:link{
color: #c6a0f6;
} }
a:visited { a:visited {
color: #b7bdf8; color: #b7bdf8;
} }
.buttons {
margin-left: 1rem;
height: 4rem;
display:flex;
justify-content: flex-start;
align-items: center;
}
.buttons .btn {
width: 3rem;
display: flex;
justify-content: center;
}