added friends section template

This commit is contained in:
elh 2024-06-17 20:10:27 -04:00
parent e769979948
commit 1a3a0ca680
8 changed files with 49 additions and 12 deletions

BIN
public/vee.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 180 KiB

View file

@ -1,8 +1,7 @@
---
import Button from "../components/navbutton.svelte"
const pageTitle= Astro.props
---
<a active=
<div class="nav-links">
<Button class="navbutton">
<a href="/">Home</a>

View file

@ -0,0 +1,13 @@
---
---
<section id="Friends">
<h2>Friends Sites!</h2>
<div>
<form action="https://google.com">
<button class="fbutton">
<img class="buttonimg" title="test" src="/public/vee.png">
</button>
</form>
</a>
</div>
</section>

View file

@ -6,6 +6,7 @@
</script>
<button on:click
on:mouseover
on:focus
on:mouseenter
on:mouseleave
{...buttonProps}>
@ -16,4 +17,5 @@
.navbutton {
}
.fri
</style>

View file

View file

@ -1,7 +1,13 @@
---
import Layout from "../layouts/Sitelayout.astro";
import Friends from "../components/friends.astro"
import Socials from "../components/socials.astro"
const pageTitle="home";
---
<Layout pageTitle={pageTitle}>
<h1>uwu</h1>
<h2> Hi, I'm Stellaluna!</h2>
<body>
<Socials />
<Friends />
</body>
</Layout>

View file

@ -1,6 +1,9 @@
@import url('https://fonts.cdnfonts.com/css/ocr-a-std');
html {
background-color: #f1f5f9;
font-family: sans-serif;
background-color: darkorchid;
font-style: normal;
font-weight: 400;
}
body {
@ -13,6 +16,8 @@ html {
* {
box-sizing: border-box;
font-family: 'OCR A Std', sans-serif;
}
h1 {
@ -21,7 +26,7 @@ html {
}
footer {
text-align: center;
background-color: rgba(127,2,177, 0.50);
background-color: orange;
padding: 0.02rem;
}
@ -69,10 +74,22 @@ html {
}
.navbutton {
border-radius: 30%;
background: darkorchid;
background: orange;
border-width: 3px;
}
.navbutton a:hover, a:active
.navbutton:hover, .navbutton:active
{
background-color: lightpink;
background-color: darkorange;
border-radius: 30%;
}
.fbutton {
border-radius: 100px;
border-width: 0px;
}
.buttonimg {
width: 50px;
margin-top: -5px;
margin-right: -5px;
margin-left: -5px;
margin-bottom: -8px;
border-radius: 50%;}