diff --git a/css/Nunito-Bold.ttf b/css/Nunito-Bold.ttf new file mode 100644 index 0000000..f41ef20 Binary files /dev/null and b/css/Nunito-Bold.ttf differ diff --git a/css/Nunito-BoldItalic.ttf b/css/Nunito-BoldItalic.ttf new file mode 100644 index 0000000..8f2d05a Binary files /dev/null and b/css/Nunito-BoldItalic.ttf differ diff --git a/css/Nunito-Italic.ttf b/css/Nunito-Italic.ttf new file mode 100644 index 0000000..3d21302 Binary files /dev/null and b/css/Nunito-Italic.ttf differ diff --git a/css/Nunito-Regular.ttf b/css/Nunito-Regular.ttf new file mode 100644 index 0000000..1f03818 Binary files /dev/null and b/css/Nunito-Regular.ttf differ diff --git a/css/old.css b/css/old.css new file mode 100644 index 0000000..38d179b --- /dev/null +++ b/css/old.css @@ -0,0 +1,55 @@ +/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your + HTML content. To learn how to do something, just try searching Google for questions like + "how to change link color." */ + +body { + /* background-color: white; */ + color: white; + font-family: Verdana; + background-image: url("../img/backdrop_02.gif"); +} +a:link{ + color: #CCFF00; +} +a:hover{ + color: #50BFE6; +} +a:visited{ + color: #FF00CC; +} +a:active{ + color: #FFFF66; +} +#container{ + margin: 0 auto; + width: 800px; + position: relative; +} +#content{ + /* background-color: #0e2c5e; */ + /* background-image: url("../img/carpet.png"); */ + width: 800px; + /* text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; */ +} +.sectionHeading { + width: 800px; + height: 25px; + background-image: url("../img/bluetexture.gif"); + background-color: #50BFE6; + text-align: center; + font-weight: bolder; + margin-top: 50px; + padding-top: 5px; + position:absolute; + left: 50%; + transform: translate(-50%); + /* color: green; */ +} + +.section { + padding-top: 50px; +} + +DEL{ + text-decoration: line-through; +} diff --git a/css/scrollbar.css b/css/scrollbar.css new file mode 100644 index 0000000..fc3bfb1 --- /dev/null +++ b/css/scrollbar.css @@ -0,0 +1,38 @@ +/* Inspiration taken from cameronsworld.net, a great site. I made the scrollbar buttons myself. You can use this on your site. */ +::-webkit-scrollbar { + width: 15px; + height: 15px; + background-color: #000; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACAQMAAABIeJ9nAAAABlBMVEX////AwMCU81DAAAAADElEQVQIHWNoYHAAAAHEAMEKQ169AAAAAElFTkSuQmCC); + background-size: 2px; + } + ::-webkit-scrollbar-track { + } + ::-webkit-scrollbar-thumb { + background-color: silver; + border-left: ridge 2px #fff; + border-top: ridge 2px #fff; + border-right: ridge 2px grey; + border-bottom: ridge 2px grey; + } + ::-webkit-scrollbar-thumb:active { + background-color: #d0d0d0; + } + ::-webkit-scrollbar-button { + background-color: darkgrey; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAPBAMAAABKPLFCAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAIVBMVEUAAACGhILr6ulbWlqop6ddXV0hISHk4+MAAABubm3///8cDMtbAAAAAXRSTlMAQObYZgAAAAFiS0dECmjQ9FYAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfgChMNNQqYsOkJAAAAfElEQVQY02MQhAABQRTAABVlEFICA0EIpYjGpZ60CUTaGcoNQpVWTodIlxmBuaqtEGl3JXUnED+sCCKtngqWNptmBJY2KwKqF1RS7YTZPSMIyFVOV08GSytnJith6lYpUiqB2B0RhM1uuMtVsbucusGCTZoRJYpgACoqCABTOTzVZ8THeQAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxNi0xMC0xOVQxNTo1MToyOCswMjowMPJE7xwAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTYtMTAtMTlUMTU6NTE6MjgrMDI6MDCDGVegAAAAAElFTkSuQmCC); + width: 15px; + height: 15px; + } + ::-webkit-scrollbar-button:vertical:start { + background-position: -45px 0; + } + ::-webkit-scrollbar-button:vertical:end { + background-position: 0 0; + } + ::-webkit-scrollbar-button:horizontal:start { + background-position: -15px 0; + } + ::-webkit-scrollbar-button:horizontal:end { + background-position: -30px 0; + } \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..689f3d1 --- /dev/null +++ b/css/style.css @@ -0,0 +1,265 @@ +/* user styles */ + + /* styles are what change the color and sizes of stuff on your site. */ + + /* these are variables that are being used in the code + these tended to confuse some people, so I only kept + the images as variables */ + + :root { + --header-image: url('https://sadhost.neocities.org/images/layouts/wp.jpeg'); + --body-bg-image: url('../img/background.jpg'); + + /* colors */ + --content: #43256E; + } + + /* if you have the URL of a font, you can set it below */ + /* feel free to delete this if it's not your vibe */ + + /* this seems like a lot for just one font and I would have to agree +but I wanted to include an example of how to include a custom font. +If you download a font file you can upload it onto your Neocities +and then link it! Many fonts have separate files for each style +(bold, italic, etc. T_T) which is why there are so many! + +*/ + + @font-face { + font-family: Nunito; + src: url('Nunito-Regular.ttf'); + } + + @font-face { + font-family: Nunito; + src: url('Nunito-Bold.ttf'); + font-weight: bold; + } + + @font-face { + font-family: Nunito; + src: url('Nunito-Italic.ttf'); + font-style: italic; + } + + @font-face { + font-family: Nunito; + src: url('Nunito-BoldItalic.ttf'); + font-style: italic; + font-weight: bold; + } + + body { + font-family: 'Nunito', sans-serif; + margin: 0; + background-color: #08031A; + color: #fceaff; + background-image: var(--body-bg-image); + } + + * { + box-sizing: border-box; + } + + /* below this line is CSS for the layout */ + + #container { + max-width: 900px; + margin: 0 auto; + } + + /* the area below is for all links on your page +EXCEPT for the navigation */ + #container a { + color: #ED64F5; + font-weight: bold; + /* if you want to remove the underline +you can add a line below here that says: +text-decoration:none; */ + } + + #header { + width: 100%; + background-color: #5e4e8c; + /* header color here! */ + height: 150px; + /* this is only for a background image! */ + /* if you want to put images IN the header, +you can add them directly to the element! */ + background-image: var(--header-image); + background-size: 100%; + } + + /* navigation section!! */ + #navbar { + height: 40px; + background-color: #13092D; + /* navbar color */ + width: 100%; + } + + #navbar ul { + display: flex; + padding: 0; + margin: 0; + list-style-type: none; + justify-content: space-evenly; + } + + #navbar li { + padding-top: 10px; + } + + /* navigation links*/ + #navbar li a { + color: #ED64F5; + /* navbar text color */ + font-weight: 800; + text-decoration: none; + /* this removes the underline */ + } + + /* navigation link when a link is hovered over */ + #navbar li a:hover { + color: #a49cba; + text-decoration: underline; + } + + #flex { + display: flex; + } + + /* this colors BOTH sidebars +if you want to style them separately, +create styles for #leftSidebar and #rightSidebar */ + aside { + background-color: #241445; + width: 200px; + padding: 20px; + font-size: smaller; + /* this makes the sidebar text slightly smaller */ + } + + + /* this is the color of the main content area, +between the sidebars! */ + main { + background-color: #43256E; + flex: 1; + padding: 20px; + order: 2; + } + + /* what's this "order" stuff about?? +allow me to explain! +if you're using both sidebars, the "order" value +tells the CSS the order in which to display them. +left sidebar is 1, content is 2, and right sidebar is 3! */ + + */ #leftSidebar { + order: 1; + } + + #rightSidebar { + order: 3; + } + + footer { + background-color: #13092D; + /* background color for footer */ + width: 100%; + height: 80px; + padding: 10px; + text-align: center; + /* this centers the footer text */ + } + + h1, + h2, + h3 { + color: #ED64F5; + } + + h1 { + font-size: 25px; + } + + strong { + /* this styles bold text */ + color: #ED64F5; + } + + /* this is just a cool box, it's the darker colored one */ + .box { + background-color: #13092D; + border: 1px solid #ED64F5; + padding: 10px; + } + + /* CSS for extras */ + + #topBar { + width: 100%; + height: 30px; + padding: 10px; + font-size: smaller; + background-color: #13092D; + } + + + /* BELOW THIS POINT IS MEDIA QUERY */ + + /* so you wanna change the width of your page? +by default, the container width is 900px. +in order to keep things responsive, take your new height, +and then subtrack it by 100. use this new number as the +"max-width" value below +*/ + + @media only screen and (max-width: 800px) { + #flex { + flex-wrap: wrap; + } + + aside { + width: 100%; + } + + /* the order of the items is adjusted here for responsiveness! +since the sidebars would be too small on a mobile device. +feel free to play around with the order! +*/ + main { + order: 1; + } + + #leftSidebar { + order: 2; + } + + #rightSidebar { + order: 3; + } + + #navbar ul { + flex-wrap: wrap; + } + } + + /* Custom Things */ + li.new { + list-style-image: url("../img/new.gif"); + list-style-type: square; + } + ul.nobull { + list-style-type: none; + } + .bamboo { + background-image: url("../img/bamboo_bar_brown.jpg"); + width: 75%; + height: 7px; + background-repeat: repeat-x; + position: absolute; + left: 50%; + transform: translate(-50%); + } \ No newline at end of file diff --git a/img/1200X400.gif b/img/1200X400.gif new file mode 100644 index 0000000..41393a1 Binary files /dev/null and b/img/1200X400.gif differ diff --git a/img/32X32.gif b/img/32X32.gif new file mode 100644 index 0000000..dec6d17 Binary files /dev/null and b/img/32X32.gif differ diff --git a/img/35X35.gif b/img/35X35.gif new file mode 100644 index 0000000..eb7da71 Binary files /dev/null and b/img/35X35.gif differ diff --git a/img/600X300.gif b/img/600X300.gif new file mode 100644 index 0000000..e278bdf Binary files /dev/null and b/img/600X300.gif differ diff --git a/img/88x31blank.gif b/img/88x31blank.gif new file mode 100644 index 0000000..f499bca Binary files /dev/null and b/img/88x31blank.gif differ diff --git a/img/anlucasbutton.gif b/img/anlucasbutton.gif new file mode 100644 index 0000000..e27093d Binary files /dev/null and b/img/anlucasbutton.gif differ diff --git a/img/backdrop_02.gif b/img/backdrop_02.gif new file mode 100644 index 0000000..3966cc6 Binary files /dev/null and b/img/backdrop_02.gif differ diff --git a/img/background.jpg b/img/background.jpg new file mode 100644 index 0000000..e923913 Binary files /dev/null and b/img/background.jpg differ diff --git a/img/bamboo_bar_brown.jpg b/img/bamboo_bar_brown.jpg new file mode 100644 index 0000000..86398d1 Binary files /dev/null and b/img/bamboo_bar_brown.jpg differ diff --git a/img/bluebutton.gif b/img/bluebutton.gif new file mode 100644 index 0000000..a063975 Binary files /dev/null and b/img/bluebutton.gif differ diff --git a/img/bluetexture.gif b/img/bluetexture.gif new file mode 100644 index 0000000..78cd165 Binary files /dev/null and b/img/bluetexture.gif differ diff --git a/img/carpet.png b/img/carpet.png new file mode 100644 index 0000000..ce019e9 Binary files /dev/null and b/img/carpet.png differ diff --git a/img/discord.gif b/img/discord.gif new file mode 100644 index 0000000..8b8b457 Binary files /dev/null and b/img/discord.gif differ diff --git a/img/email-icon.gif b/img/email-icon.gif new file mode 100644 index 0000000..2139e09 Binary files /dev/null and b/img/email-icon.gif differ diff --git a/img/firefox2.gif b/img/firefox2.gif new file mode 100644 index 0000000..14a24df Binary files /dev/null and b/img/firefox2.gif differ diff --git a/img/got_html.gif b/img/got_html.gif new file mode 100644 index 0000000..f713730 Binary files /dev/null and b/img/got_html.gif differ diff --git a/img/hello-my-name-is.png b/img/hello-my-name-is.png new file mode 100644 index 0000000..120993a Binary files /dev/null and b/img/hello-my-name-is.png differ diff --git a/img/humanstxt-isolated-blank.gif b/img/humanstxt-isolated-blank.gif new file mode 100644 index 0000000..8a0445b Binary files /dev/null and b/img/humanstxt-isolated-blank.gif differ diff --git a/img/humanstxt-transparent-color.png b/img/humanstxt-transparent-color.png new file mode 100644 index 0000000..a684fea Binary files /dev/null and b/img/humanstxt-transparent-color.png differ diff --git a/img/mastodon.gif b/img/mastodon.gif new file mode 100644 index 0000000..76d9c0e Binary files /dev/null and b/img/mastodon.gif differ diff --git a/img/neocities_button.gif b/img/neocities_button.gif new file mode 100644 index 0000000..4030bbb Binary files /dev/null and b/img/neocities_button.gif differ diff --git a/img/new.gif b/img/new.gif new file mode 100644 index 0000000..6ecde6d Binary files /dev/null and b/img/new.gif differ diff --git a/img/nonbinary.png b/img/nonbinary.png new file mode 100644 index 0000000..6657be6 Binary files /dev/null and b/img/nonbinary.png differ diff --git a/img/starrynight_bg.gif b/img/starrynight_bg.gif new file mode 100644 index 0000000..0b7a52a Binary files /dev/null and b/img/starrynight_bg.gif differ diff --git a/img/starsbg.gif b/img/starsbg.gif new file mode 100644 index 0000000..2ea7a4d Binary files /dev/null and b/img/starsbg.gif differ diff --git a/img/steam.gif b/img/steam.gif new file mode 100644 index 0000000..1f4fe29 Binary files /dev/null and b/img/steam.gif differ diff --git a/img/vscbutton.gif b/img/vscbutton.gif new file mode 100644 index 0000000..8a4cad2 Binary files /dev/null and b/img/vscbutton.gif differ diff --git a/img/worldwideweb_badge.gif b/img/worldwideweb_badge.gif new file mode 100644 index 0000000..873436c Binary files /dev/null and b/img/worldwideweb_badge.gif differ diff --git a/index-template.html b/index-template.html new file mode 100644 index 0000000..68eda08 --- /dev/null +++ b/index-template.html @@ -0,0 +1,79 @@ + + + + + + + + + + [[*pagetitle]] + + + + + + + +
+
+ + +
+ +
+ + + +
+ [[*pageContent]] +
+ +
+ + +
+ + + \ No newline at end of file