Websites/liljudd-website
1
0
Fork 0
Code Issues Pull requests Projects Releases 3 Packages Wiki Activity

feat: finished with html (pretty much) started with css

Browse source
This commit is contained in:
moonleay 2023-10-18 20:34:15 +02:00
parent 212d3a25a5
commit 2f112edb29
12 changed files with 141 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

106
app/util/wrapping_objects.module.css
View file

@ -14,12 +14,106 @@
max-height: initial;
}
.gpl3Logo {
max-width: initial;
max-height: initial;
width: 100px
.footer {
align-items: center;
margin: 100px 1px auto auto;
background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(5px);
bottom: 0;
width: 100%;
padding: 5px;
}
.fong {
font-family: "Splatoon", sans-serif;
.footerIcon {
display: block;
text-align: center;
}
.footerImage {
max-width: initial;
max-height: initial;
width: 48px;
margin: 0 auto;
}
.footerNotice {
margin: 0 auto;
text-align: center;
font-size: 0.75rem;
}
.footerTable {
margin: 10px 50px;
display: flex;
justify-content: center;
}
.table {
align-items: center;
width: 100%;
}
.table th {
padding: 4px 7px;
text-decoration: underline;
}
.table td {
padding: 4px 7px;
}
.table a {
position: relative;
color: #ffffff;
text-decoration: none;
}
.table a:hover {
color: #ffffff;
}
.table a::before {
content: "";
position: absolute;
display: block;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #ffffff;
transform: scaleX(0);
transition: transform 0.3s ease;
}
.table a:hover::before {
transform: scaleX(1);
}
@media (min-width: 768px) {
.footer {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
column-gap: 5px;
margin: 0 auto;
}
.footerIcon {
grid-column: span 1;
justify-self: center;
}
.footerTable {
grid-column: span 3;
}
.footerNotice {
grid-column: span 4;
}
}
.contentDiv {
display: flex;
}

41
app/util/wrapping_objects.tsx
View file

@ -1,13 +1,11 @@
import styles from "./wrapping_objects.module.css"
export function NavBar(){
return(
<nav className={styles.navMenu}>
<img className={styles.logo} src={"https://static.moonleay.net/img/lilJuddWeb/logos/logox256.png"} alt={"The Bots Logo"}/>
<a href={"/"} target={"_self"}>li'l Judd</a>
<ul>
<li>
<a href={"/"} target={"_self"}>Home</a>
</li>
<li>
<a href={"/features"} target={"_self"}>Features</a>
</li>
@ -20,19 +18,27 @@ export function NavBar(){
<li>
<a href={"/about"} target={"_self"}>About</a>
</li>
<li>
<a href={"https://discord.com/api/oauth2/authorize?client_id=1024410658973941862&permissions=8&scope=bot"}
target={"_blank"}>Invite to your Discord Server</a>
</li>
</ul>
<a href={"https://discord.com/api/oauth2/authorize?client_id=1024410658973941862&permissions=8&scope=bot"} target={"_blank"}>Invite to your Discord Server</a>
</nav>
)
}
export function Footer() {
return (
<footer>
<img src={"https://static.moonleay.net/img/lilJuddWeb/lilJudd.png"} alt={"A cute Image of lil Judd <3"}/>
<div>
<table>
<thead>
<>
<footer className={styles.footer}>
<div className={styles.footerIcon}>
<img className={styles.footerImage} src={"https://static.moonleay.net/img/lilJuddWeb/lilJudd.png"}
alt={"A cute Image of lil Judd <3"}/>
<p>li'l Judd</p>
</div>
<div className={styles.footerTable}>
<table className={styles.table}>
<thead>
<tr>
<th>
<p className={styles.fong}>Navigation</p>
@ -47,8 +53,8 @@ export function Footer() {
<p>Legal</p>
</th>
</tr>
</thead>
<tbody>
</thead>
<tbody>
<tr>
<td>
<a href={"/"} target={"_self"}>Home</a>
@ -110,11 +116,14 @@ export function Footer() {
<a href={"/about"} target={"_self"}>About</a>
</td>
</tr>
</tbody>
</table>
</div>
<Notice/>
</footer>
</tbody>
</table>
</div>
<div className={styles.footerNotice}>
<Notice/>
</div>
</footer>
</>
)
}