mirror of
https://github.com/Fluffy-Bean/Fluffys-website.git
synced 2025-05-29 23:03:14 +00:00
Version 21.07.2021.4
This commit is contained in:
Michal
GitHub
parent
2cd4d002a4
commit
18bd53c4ad
9 changed files with 440 additions and 16 deletions
90
introduction.html
Normal file
90
introduction.html
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
<!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! -->
|
||||
Loading…
Add table
Add a link
Reference in a new issue