sd/site
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

did you know? <div>

Browse source
This commit is contained in:
Ruben 2023-11-03 17:50:44 -05:00
commit b31739cbb9
No known key found for this signature in database
2 changed files with 40 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

18
index.html
View file

@ -17,17 +17,27 @@
<div class="pixel-corners--wrapper">
<div class="pfp"> <img src="/home/ruben/signal-2023-10-26-124534_002.gif" alt="my profile picture, which is most likely a grey yoshi"> </div>
</div>
<h1>hey, i'm ruben.</h1>
<h2>welcome to my site.</h2>
<div class="intro-text">
<h1>hey, i'm ruben.</h1>
<h2>welcome to my site.</h2>
</div>
</div>
</div>
<div class="pixel-corners">
<div class="about-me">
<p>i'm your "average" 17 year old gay foss enjoyer.</p>
<div class="socials">
<h2>~/socials</h2>
</div>
</div>
<div class="pixel-corners">
<article class="about-me">
<h1>~/about-me</h1>
<p>i'm your "average" 17 year old gay foss enjoyer.</p>
</article>
</div>
</div>

33
style.css
View file

@ -65,7 +65,7 @@ html {
}
.pixel-corners {
border: 4px solid transparent;
margin-bottom: 40px;
margin-bottom: 30px;
}
.pixel-corners--wrapper {
width: fit-content;
@ -214,13 +214,13 @@ html {
.main {
width: 100%;
max-width: 80%;
max-width: 60%;
position: absolute;
top: 20%;
transform: translate(11%, -15%);
transform: translate(31%, -15%);
}
.intro-box, .about-me {
.intro-box, .socials, .about-me {
position: relative;
display: flex;
justify-content: space-evenly;
@ -229,13 +229,32 @@ html {
}
.pfp {
width: 200px;
height: 200px;
width: 150px;
height: 150px;
}
.intro-text {
flex-direction: column;
text-align: center;
transform: translateY(4%)
}
.socials {
position: relative;
flex-direction: column;
}
/* -- shirnk cards if screen is small -- */
@media screen and (max-width: 600px) {
.main {
width: 100%;
max-width: 90%;
transform: translate(4%, -15%);
}
}
h1 {
color: var(--header);
text-align: center;
font-size: 32px;
text-shadow: 0px 0px 14px var(--accent-1);
}