astolfo/astolfo.org
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

merge into: astolfo:master
Branches Tags
astolfo:master
astolfo:better-branch
...
pull from: astolfo:better-branch
Branches Tags
astolfo:master
astolfo:better-branch
Sign in to create a new pull request.

6 commits
master ... better-bra

Author SHA1 Message Date
Better nya
35298f6fd9 Added images to store.html (you can fix the alignment cause i have no idea) 2025-05-25 15:40:17 +10:00
Better nya
8eba539daf fix image not showing 2025-05-25 02:40:07 +10:00
causalhonk
31fbe13613 broke everything 
revert Segregated all files
 2025-05-25 02:36:01 +10:00
Better nya
4fd4b19011 Segregated all files 2025-05-25 02:32:42 +10:00
Better nya
e4fc566f43 segregated images 2025-05-25 02:29:39 +10:00
Better nya
897659d39f Add other pages, Customized store.html and created styles.css 2025-05-25 02:27:22 +10:00
11 changed files with 233 additions and 125 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/about.html Normal file
View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 Boilerplate</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Page Title</h1>
<script src="scripts.js"></script>
</body>
</html>

BIN
src/astolfo.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 22 KiB

16
src/blog.html Normal file
View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 Boilerplate</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Page Title</h1>
<script src="scripts.js"></script>
</body>
</html>

BIN
src/bussyair.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 13 KiB

129
src/index.html
View file

@ -3,14 +3,15 @@
<html lang="en-AU"> <html lang="en-AU">
<head> <head>
<title>astolfo.org</title> <title>astolfo.org</title>
<link rel="stylesheet" href="styles.css">
</head> </head>
<body> <body>
<header> <header>
<ul> <ul>
<li><a class="header-links" href="/store">store</a></li> <li><a class="header-links" href="./store.html">store</a></li>
<li><a class="header-links" href="/blog">blog</a></li> <li><a class="header-links" href="./blog.html">blog</a></li>
<li><a class="header-links" href="/services">services</a></li> <li><a class="header-links" href="./services.html">services</a></li>
<li><a class="header-links" href="/about">about</a></li> <li><a class="header-links" href="./about.html">about</a></li>
</ul> </ul>
</header> </header>
@ -43,123 +44,3 @@
</footer> </footer>
</body> </body>
</html> </html>
<style>
:root {
--text: black;
--accent: #ff69b4;
--accent2: #FA7DBC;
--background: #fba0e3;
--rounding: 8em;
}
body {
padding: 0px;
margin: auto;
height: 100vh;
background-image: url("background.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
}
header {
margin: 1em;
padding: 0.5em;
padding-left: 0.5em;
padding-right: 3em;
border-radius: var(--rounding);
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
background-color: var(--background);
width: fit-content;
}
header ul {
list-style-type: none;
}
header li{
display: inline;
}
.header-links {
transition-duration: 0.3s;
padding: 0.3em;
display: inline-block;
border-radius: var(--rounding);
text-decoration: none;
color: var(--text);
}
.header-links:hover {
background-color: var(--accent);
scale: 250%;
transform: translateY(-5px) rotate(-7deg);
margin-left: 2em;
margin-right: 2em;
}
footer {
color: var(--text);
background-color: var(--background);
display: flex;
margin: 0px;
padding: 30px;
border-top-right-radius: var(--rounding);
border-top-left-radius: var(--rounding);
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
footer * {
padding-left: 30px;
}
#landing-inner {
border-radius: var(--rounding);
background-color: var(--background);
width: 80vw;
margin: auto;
box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
}
#float-header {
text-align: center;
font-size: 12vw;
align-content: center;
}
#float-header span {
display: inline-block;
animation: float 3s ease-in-out infinite;
color: var(--accent2);
-webkit-text-stroke: 0.01em var(--text);
padding: 0px;
margin-left: -0.2em;
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
}
@media (max-width: 1000px) {
footer {
flex-direction: column;
}
footer marquee {
width: auto !important;
}
}
</style>

BIN
src/pillow.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 369 KiB

BIN
src/plush.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 13 KiB

16
src/services.html Normal file
View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 Boilerplate</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Page Title</h1>
<script src="scripts.js"></script>
</body>
</html>

BIN
src/sheets.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 365 KiB

39
src/store.html Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>store.astolfo.org</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body style="background-color:rgb(231, 151, 207);">
<h1>Astolfo Store</h1>
<p>
<img src="astolfo.webp" alt="Astolfo" class="center">
</p>
<p style="text-align:center;">Only the finest goods!</p>
<script src="scripts.js"></script>
<div class="row">
<div class="column">
<img src="bussyair.webp" alt="Bussy Air" style="width:100%">
</div>
<div class="column">
<img src="pillow.webp" alt="Body Pillow" style="width:100%">
</div>
<div class="column">
<img src="plush.webp" alt="Plush" style="width:100%">
</div>
<div class="column">
<img src="sheets.webp" alt="Bed Sheets" style="width:75%">
</div>
</div>
<p> Bussy Air</p>
</body>
</html>
<style>
h1 {text-align: center;}
</style>

140
src/styles.css Normal file
View file

@ -0,0 +1,140 @@
:root {
--text: black;
--accent: #ff69b4;
--accent2: #FA7DBC;
--background: #fba0e3;
--rounding: 8em;
}
body {
padding: 0px;
margin: auto;
height: 100vh;
background-image: url("background.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
font-family: 'Trebuchet MS', sans-serif;
}
header {
margin: 1em;
padding: 0.5em;
padding-left: 0.5em;
padding-right: 3em;
border-radius: var(--rounding);
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
background-color: var(--background);
width: fit-content;
}
header ul {
list-style-type: none;
}
header li{
display: inline;
}
.header-links {
transition-duration: 0.3s;
padding: 0.3em;
display: inline-block;
border-radius: var(--rounding);
text-decoration: none;
color: var(--text);
}
.header-links:hover {
background-color: var(--accent);
scale: 250%;
transform: translateY(-5px) rotate(-7deg);
margin-left: 2em;
margin-right: 2em;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
float: left;
width: 25%;
padding: 5px;
}
/* Clear floats after image containers */
.row::after {
content: "";
clear: both;
display: table;
}
footer {
color: var(--text);
background-color: var(--background);
display: flex;
margin: 0px;
padding: 30px;
border-top-right-radius: var(--rounding);
border-top-left-radius: var(--rounding);
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
footer * {
padding-left: 30px;
}
#landing-inner {
border-radius: var(--rounding);
background-color: var(--background);
width: 80vw;
margin: auto;
box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
}
#float-header {
text-align: center;
font-size: 12vw;
align-content: center;
}
#float-header span {
display: inline-block;
animation: float 3s ease-in-out infinite;
color: var(--accent2);
-webkit-text-stroke: 0.01em var(--text);
padding: 0px;
margin-left: -0.2em;
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
}
@media (max-width: 1000px) {
footer {
flex-direction: column;
}
footer marquee {
width: auto !important;
}
}