mirror of
https://github.com/Fluffy-Bean/Fluffys-website.git
synced 2025-05-14 07:42:15 +00:00
90 lines
5.5 KiB
HTML
90 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en"> <!-- This site is in english! -->
|
|
<head>
|
|
<!-- Did not know all websites needed this -->
|
|
<meta charset="utf-8"> <!-- Help show text correctly! -->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Still don't know what this does -->
|
|
<meta name="description" content="Fluffy Bean's website"> <!-- Used to help search engins -->
|
|
<meta content="Fluffy Bean" name="author"> <!-- I have made this site!!!! -->
|
|
<title>Awwwoooooo!</title> <!-- Title -->
|
|
<link rel="shortcut icon" type="image/jpg" href="images/fluffy1.png"/> <!-- Favicon -->
|
|
<link rel="stylesheet" href="style.css"> <!-- Le CSS code :3 -->
|
|
<!-- Googly fonts to make site pretty! :3 -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Rubik&display=swap" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200;400&display=swap" rel="stylesheet">
|
|
</head>
|
|
<!-- Neck -->
|
|
<body>
|
|
|
|
<!-- The epic text at the top of the site! Remind to Fluffy, sites should only have a single (like me lol) h1 -->
|
|
<header>
|
|
<h1>Fluffy's amazing website!
|
|
<img src="images/fluffy1.png" alt="Poorly drawn image of Fluffy Bean" class="header_image">
|
|
</h1>
|
|
</header>
|
|
|
|
<!-- The cool buttons at the top of the site! -->
|
|
<div id="navigation_row_top">
|
|
<a href="introduction.html" id="navigation_button"> Insert boring stuff here </a> <!-- Introduction -->
|
|
<a href="about.html" id="navigation_button"> About this smelly </a> <!-- About -->
|
|
<a href="pictures.html" id="navigation_button"> Pictures! </a> <!-- Pictures! -->
|
|
<a href="more.html" id="navigation_button"> Even more! </a> <!-- More -->
|
|
<a href="social.html" id="navigation_button"> My social media! </a> <!-- Social Media -->
|
|
<a href="php_test.html" id="navigation_button"> PHP test </a>
|
|
</div>
|
|
|
|
<!-- Welcome to this horrible horrible site -->
|
|
<div id="introduction_to_fluffy">
|
|
<h2> Introduction </h2>
|
|
<div id="introduction_text">
|
|
<p id="space_below">Welcome to my boring site! This is a test of my programming skills on HTML and CSS! The resources I used to make this website where the following</p>
|
|
<!-- Cool button website -->
|
|
<p>A site I used to get the cool button design was from
|
|
<img src="images/flat_arrow_icon.png" class="small_icons">
|
|
<a href="https://fdossena.com/?p=html5cool/buttons/i.frag" target="_blank">here</a>!
|
|
</p>
|
|
<!-- Youtube tutorial -->
|
|
<p>The YouTube tutorial I used to learn most of the HTML and CSS from
|
|
<img src="images/flat_arrow_icon.png" class="small_icons">
|
|
<a href="https://www.youtube.com/watch?v=qz0aGYrrlhU" target="_blank">*click me*</a>
|
|
</p>
|
|
<!-- Fonts and icons -->
|
|
<p>Google site I used to get a bunch of icons and fonts from
|
|
<img src="images/flat_arrow_icon.png" class="small_icons">
|
|
<a href="https://fonts.google.com/icons" target="_blank">Icons</a>
|
|
and
|
|
<a href="https://fonts.google.com/" target="_blank">Fonts</a>
|
|
</p>
|
|
<!-- Codepen -->
|
|
<p>Codepen! I used this to get some ideas for some parts of the website
|
|
<img src="images/flat_arrow_icon.png" class="small_icons">
|
|
<a href="https://codepen.io/" target="_blank">Special Text you can click</a>
|
|
</p>
|
|
<!-- CSS Grid video -->
|
|
<p>I used this video to attempt to scale the site correctly to phones, sorta worked x3
|
|
<img src="images/flat_arrow_icon.png" class="small_icons"> <a href="https://codepen.io/" target="_blank">I'm on the grid! AAAAAA</a>
|
|
</p>
|
|
<!-- Page I used to learn how to hide images when the screen is too small! -->
|
|
<p>Page I used to learn how to hide images when the screen is too small!
|
|
<img src="images/flat_arrow_icon.png" class="small_icons"> <a href="https://www.thesitewizard.com/css/hide-images-on-mobile-website.shtml" target="_blank">I won't disappear!</a>
|
|
</p>
|
|
<!-- Thank you Jeetix for being super cool as always! -->
|
|
<p>And thank you
|
|
<span id="impotant_creature">Jeetix</span>
|
|
for suggesting to try this in the first place, I'm having a lot of fun learning HTML and CSS! And thank you for keeping the site up and running!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- The button to take you back to the top of the site -->
|
|
<footer>
|
|
<def>
|
|
<!-- Forgive me for the mess below -->
|
|
<a href="#" id="navigation_button"> I'm a top and I'm scared of bottoming... take me back <img src="images/up_arrow.png" class="small_icons"> </a>
|
|
</def>
|
|
<p id="footer_text">Site kept online by <span id="impotant_creature">Jeetix</span> • Made by <span id="fluffy_color">Fluffy Bean</span> • Version 21.07.2021.4</p>
|
|
</footer>
|
|
|
|
</body>
|
|
</html>
|
|
<!-- Site is over! Go home! -->
|