simponic/simponic.xyz
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

make styles better

Browse Source
This commit is contained in:
Elizabeth Hunt 2024-04-23 17:26:31 -07:00
parent 1b45ca7370
commit 4d3936dbe0
Signed by: simponic
GPG Key ID: 2909B9A7FF6213EE
2 changed files with 80 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
css/styles.css
View File

@ -1,12 +1,12 @@
body { body {
margin: 0; margin: 0;
background-color: #ab6f94; background-color: #ab6f94;
font-family: 'Trebuchet MS', sans-serif; font-family: "Trebuchet MS", sans-serif;
} }
.top-container { .top-container {
text-align: center; text-align: center;
height: 100vh; height: 100vh;
padding: 24px; padding: 24px;
} }
@ -14,7 +14,10 @@ body {
width: 100%; width: 100%;
border-radius: 50%; border-radius: 50%;
max-width: 40vh; max-width: 40vh;
box-shadow:0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); max-height: 40vh;
box-shadow:
0 10px 16px 0 rgba(0, 0, 0, 0.2),
0 6px 20px 0 rgba(0, 0, 0, 0.19);
} }
.projects-grid { .projects-grid {
@ -31,9 +34,11 @@ body {
color: black; color: black;
border-radius: 8px; border-radius: 8px;
flex: 1; flex: 1;
background-color: #74b05a; background-color: #7ac2aa;
display: flex; display: flex;
box-shadow:0 8px 12px 0 rgba(0,0,0,0.2),0 6px 12px 0 rgba(0,0,0,0.17); box-shadow:
0 8px 12px 0 rgba(0, 0, 0, 0.2),
0 6px 12px 0 rgba(0, 0, 0, 0.17);
min-width: 300px; min-width: 300px;
transition: transform 250ms; transition: transform 250ms;
padding: 12px; padding: 12px;
@ -41,7 +46,7 @@ body {
} }
.project:hover { .project:hover {
background-color: #609c46; background-color: #6dad98;
transform: translateY(-8px); transform: translateY(-8px);
cursor: pointer; cursor: pointer;
} }
@ -62,3 +67,47 @@ body {
flex-direction: column; flex-direction: column;
text-align: left; text-align: left;
} }
.about {
margin-left: auto;
margin-right: auto;
flex: 1;
background-color: var(--background-color-2);
border: 1px solid var(--border-color);
padding: 10px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
gap: 20px;
max-width: 600px;
line-break: anywhere;
}
.about-text {
flex: 4;
text-align: left;
}
.avatar {
flex: 2;
}
@media (max-width: 500px) {
.projects-grid {
padding: 12px;
}
.project {
min-width: 200px;
}
.project-logo-container {
font-size: 3rem;
}
.about {
flex-direction: column;
gap: 12px;
}
}

44
index.html
View File

@ -18,25 +18,31 @@
</head> </head>
<body> <body>
<div class="top-container animate__animated animate__fadeIn"> <div class="top-container animate__animated animate__fadeIn">
<img src="images/profile.png" class="profile-picture" /> <div class="about">
<h3> <div class="avatar">
👋 hello, im simponic! <img src="images/profile.png" class="profile-picture" />
<br /> </div>
❤️ i like math, cooking, running, and penguins. <div class="about-text">
<br /> <p>
⛓️ <a href="https://www.linkedin.com/in/simponic/">linkedin</a>. 👋 hello, im simponic!
<br /> <br />
📷 <a href="https://www.instagram.com/simponic03/">instagram</a>. ❤️ i like math, cooking, running, and penguins.
<br /> <br />
🔥 <a href="https://hatecomputers.club">hatecomputers.club</a>. ⛓️ <a href="https://www.linkedin.com/in/simponic/">linkedin</a>.
<br /> <br />
✉️ <a href="mailto:elizabeth@simponic.xyz">elizabeth@simponic.xyz</a>. 📷 <a href="https://www.instagram.com/simponic03/">instagram</a>.
<br /> <br />
📖 this page hosts strictly static content! play around if you'd like :D 🔥 <a href="https://hatecomputers.club">hatecomputers.club</a>.
<br /> <br />
🐙 my gitea is at ✉️ <a href="mailto:elizabeth@simponic.xyz">elizabeth@simponic.xyz</a>.
<a href="https://git.simponic.xyz/simponic">/simponic</a>. <br />
</h3> 📖 this page hosts fun stuff! play around if you'd like
<br />
🐙 my gitea is at
<a href="https://git.simponic.xyz/simponic">/simponic</a>.
</p>
</div>
</div>
<div class="projects-grid"> <div class="projects-grid">
<a class="project" href="/euler-golf/"> <a class="project" href="/euler-golf/">
<div class="project-logo-container"> <div class="project-logo-container">