mirror of
https://github.com/neon443/neon443.github.io.git
synced 2026-03-11 07:09:12 +00:00
footer:
sticks to bottom of page vertically centered links links have hovr animation fixed margin/padding issues h5 now slightly bolder 100->200 contentpush smaller apps gap smaller on mbile padding smaller on mobile news bold now removed 3 footers remove .nova
This commit is contained in:
@@ -1,3 +0,0 @@
|
||||
{
|
||||
"workspace.color" : 1
|
||||
}
|
||||
17
index.html
17
index.html
@@ -26,6 +26,7 @@
|
||||
<div class="barItem"><a href="mailto:neons443@outlook.com">Contact</a></div>
|
||||
</div>
|
||||
<div class="contentPush"></div>
|
||||
<div class="content">
|
||||
<h2 class="center">
|
||||
<b>
|
||||
Welcome
|
||||
@@ -74,16 +75,20 @@
|
||||
<span class="label">Sandboxels</span>
|
||||
</a>
|
||||
</div>
|
||||
<h3>News</h3>
|
||||
<h3><b>News</b></h3>
|
||||
<p>The redesign everyone has been waiting for is now here!</p>
|
||||
<div class="footer">
|
||||
</div>
|
||||
<footer>
|
||||
<h5 class="center">Made with </> by neon443</h5>
|
||||
<a href="https://notbyai.fyi">
|
||||
<img class="themednotByAI" src="./images/notByAI.svg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="footer"></div>
|
||||
<div class="footer"></div>
|
||||
<div class="footer"></div>
|
||||
<a class="textLinks" href="https://github.com/neon443/">
|
||||
GitHub Homepage
|
||||
</a>
|
||||
<a class="textLinks" href="https://github.com/neon443/neon443.github.io/issues/new/">
|
||||
Create an Issue
|
||||
</a>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
71
style.css
71
style.css
@@ -37,31 +37,62 @@ a {
|
||||
}
|
||||
body {
|
||||
background-color: #ddd;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 0px 20px;
|
||||
}
|
||||
footer {
|
||||
margin-top: 20px;
|
||||
background-color: #ccc;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
footer .textLinks {
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
footer .textLinks:hover {
|
||||
color: #ff6200;
|
||||
font-weight: 600;
|
||||
}
|
||||
footer * {
|
||||
margin: 5px 0;
|
||||
}
|
||||
p {
|
||||
margin: 10px 0px;
|
||||
font-size: 20px;
|
||||
padding: 0px 20px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
font-weight: 750;
|
||||
padding: 0px 20px;
|
||||
}
|
||||
h2 {
|
||||
margin-top: 10px;
|
||||
font-size: 30px;
|
||||
font-weight: 400;
|
||||
padding: 0px 20px;
|
||||
}
|
||||
h3 {
|
||||
margin-top: 10px;
|
||||
font-size: 25px;
|
||||
font-weight: 400;
|
||||
padding: 0px 20px;
|
||||
}
|
||||
h5 {
|
||||
margin-top: 10px;
|
||||
font-size: 25px;
|
||||
font-weight: 100;
|
||||
padding: 0px 20px;
|
||||
font-weight: 200;
|
||||
}
|
||||
.center {
|
||||
text-align: center;
|
||||
@@ -69,7 +100,7 @@ h5 {
|
||||
/* regular text (body, p, b, h*) styles*/
|
||||
|
||||
.contentPush {
|
||||
height: 65px;
|
||||
height: 40px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
@@ -131,7 +162,7 @@ h5 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Responsive grid */
|
||||
gap: 20px;
|
||||
margin: 20px;
|
||||
margin: 0px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@@ -168,18 +199,6 @@ h5 {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.footer img {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.themednotByAI {
|
||||
content: url("./images/notByAI.svg");
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
* {
|
||||
@@ -189,6 +208,9 @@ h5 {
|
||||
background-color: #222;
|
||||
color: #ddd;
|
||||
}
|
||||
footer {
|
||||
background-color: #111;
|
||||
}
|
||||
.bar {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
@@ -219,4 +241,11 @@ h5 {
|
||||
height: 80px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.content {
|
||||
padding: 0 10px;
|
||||
}
|
||||
.homescreen {
|
||||
gap: 10px;
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user