Jonas_Jones/Website-v1
1
0
Fork 0
mirror of https://github.com/JonasunderscoreJones/Website-v1.git synced 2025-10-25 11:39:18 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions
Website-v1/index.html
J-onasJones 7ac442aeff
Update index.html
2021-11-07 17:33:39 +01:00

335 lines
15 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html>
<title>Jonas_Jones - Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
<!--<link rel="stylesheet" href="css/main2.css">-->
<link rel="stylesheet" href="css/font-lato.css">
<link rel="stylesheet" href="css/font-montserat.css">
<link rel="stylesheet" href="css/font-roboto.css">
<link rel="stylesheet" href="css/custom.css">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;}
body, html {
height: 100%;
color: #777;
line-height: 1.8;
}
/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3 {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* First image (Logo. Full height) */
.bgimg-1 {
background-image: url('src/fnk5elzskdiy.png');
min-height: 100%;
}
/* Second image (Portfolio) */
.bgimg-2 {
background-image: url("src/mup4yhdqjgm31.png");
min-height: 400px;
}
/* Third image (Contact) */
.bgimg-3 {
background-image: url("src/make-screenshots-of-your-minecraft-builds-with-shaders.png");
min-height: 400px;
}
.w3-wide {letter-spacing: 10px;}
.w3-hover-opacity {cursor: pointer;}
/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1600px) {
.bgimg-1, .bgimg-2, .bgimg-3 {
background-attachment: scroll;
min-height: 400px;
}
}
</style>
<nav class="w3-sidebar w3-bar-block w3-custom1 w3-collapse w3-top" style="z-index:3;width: 250px; background-color: #10335C;" id="mySidebar">
<div class="w3-container w3-display-container w3-padding-16">
<img src="src/logo_icon.png">
</div>
<div class="w3-padding-64 w3-large w3-text-grey" style="font-weight:bold">
<a href="#" class="w3-bar-item w3-button">Shirts</a>
<a href="#" class="w3-bar-item w3-button">Dresses</a>
<a onclick="myAccFunc()" href="javascript:void(0)" class="w3-button w3-block w3-custom1 w3-left-align" id="myBtn">
Jeans <i class="fa fa-caret-down"></i>
</a>
<div id="demoAcc" class="w3-bar-block w3-hide w3-padding-large w3-medium" style="background-color: #10335C;">
<a href="#" class="w3-bar-item w3-button" style="background-color: #10335C;"><i class="fa fa-caret-right w3-margin-right"></i>Skinny</a>
<a href="#" class="w3-bar-item w3-button">Relaxed</a>
<a href="#" class="w3-bar-item w3-button">Bootcut</a>
<a href="#" class="w3-bar-item w3-button">Straight</a>
</div>
<a href="#" class="w3-bar-item w3-button">Jackets</a>
<a href="#" class="w3-bar-item w3-button">Gymwear</a>
<a href="#" class="w3-bar-item w3-button">Blazers</a>
<a href="#" class="w3-bar-item w3-button">Shoes</a>
</div>
<a href="#footer" class="w3-bar-item w3-button w3-padding">Contact</a>
<a href="javascript:void(0)" class="w3-bar-item w3-button w3-padding" onclick="document.getElementById('newsletter').style.display='block'">Newsletter</a>
<a href="#footer" class="w3-bar-item w3-button w3-padding">Subscribe</a>
</nav>
<body>
<a href="#top" id="myBtn" title="Go to top">Return to Top<img src="src/arrow_up_icon.png" width="30px"></a>
<!-- Navbar (sit on top) -->
<div class="w3-top custom2 top" style="padding-left: 250px;">
<div class="w3-bar" id="myNavbar">
<i class="fa fa-bars"></i>
</a>
<a href="#home" class="w3-bar-item w3-button">HOME</a>
<a href="#about" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-user"></i> ABOUT</a>
<a href="#portfolio" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-th"></i> LINKS</a>
<a href="#contact" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-envelope"></i> CONTACT</a>
<a href="#" class="w3-bar-item w3-button w3-hide-small w3-right w3-hover-red">
</a>
</div>
<!-- Navbar on small screens -->
<div id="navDemo" class="w3-bar-block w3-custom1 w3-hide w3-hide-large w3-hide-medium" style="padding-left: 250px;">
<a href="#about" class="w3-bar-item w3-button" onclick="toggleFunction()">ABOUT</a>
<a href="#portfolio" class="w3-bar-item w3-button" onclick="toggleFunction()">PORTFOLIO</a>
<a href="#contact" class="w3-bar-item w3-button" onclick="toggleFunction()">CONTACT</a>
<a href="#" class="w3-bar-item w3-button">SEARCH</a>
</div>
</div>
<!-- First Parallax Image with Logo Text -->
<div class="bgimg-1 w3-display-container w3-opacity-min" id="home" style="padding-left: 250px;">
<div class="w3-display-middle" style="white-space:nowrap;">
<img src="src/logo_large.png">
</div>
</div>
<!-- Container (About Section) -->
<div class="w3-content w3-container w3-padding-64" id="about" style="padding-left: 250px;">
<h3 class="w3-center">ABOUT ME</h3>
<p class="w3-center"><em></em></p>
<p>Imagine what I could be like. I'll give you a hint: I'm not a robot.</p>
<div class="w3-row">
<div class="w3-col m6 w3-center w3-padding-large">
<p><b><i class="fa fa-user w3-margin-right"></i>My Stuff I guess</b></p><br>
<img src="/w3images/avatar_hat.jpg" class="w3-round w3-image w3-opacity w3-hover-opacity-off" alt="Photo of Me" width="500" height="333">
</div>
<!-- Hide this text on small devices -->
<div class="w3-col m6 w3-hide-small w3-padding-large">
<p>I guess here is the place to put stuff I've done so far.
I have a Youtube Channel where I upload stuff concerning Hermitcraft as well as a some tutorials on technical stuff about Minecraft such as FabricMC mods and stuff. If you want to know stuff like how to make your Minecraft server host a website or how to link your Minecraft server chat with Discord or you're interested in the famous ARG of Docm77 and Rendog of hermitcraft Season 8 then you should really check out my channel, otherwhise do it too.
I guess I have started modding with Fabric and managed to add items and a button to the main menu in les than 48h so if you want me to code your mod just contact me, I have a whole bunch of experience.
You know how to have the need of a custom server console for your Minecraft server that you host at home? No? well I guess thats just me, I had to write a massive program to be able to operate all my Minecraft servers in a single window just to loose it all after accidentally uninstalling a package that managed my Ethernet port so that I couldn't access the Raspberry PI's files or ssh terminal.
Datapacks and command blok creations are also something I enjoy creating but that's less exciting than loosing all my code right? man, programming is such a pain in the ass but I love it.
Ig that's it.
</p>
</div>
</div>
<p class="w3-large w3-center w3-padding-16">Im really good at:</p>
<p class="w3-wide"><i class="fa fa-camera"></i>Copying code</p>
<div class="w3-light-grey">
<div class="w3-container w3-padding-small w3-dark-grey w3-center" style="width:100%">100%</div>
</div>
</div>
<div class="w3-row w3-center w3-dark-grey w3-padding-16" style="padding-left: 250px;">
<div class="w3-quarter w3-section">
<span class="w3-xlarge">48h+</span><br>
hours until I got my first Minecraft mod working
</div>
<div class="w3-quarter w3-section">
<span class="w3-xlarge">55k+</span><br>
Complains about Microsoft taking over Minecraft and being bad at programming
</div>
<div class="w3-quarter w3-section">
<span class="w3-xlarge">1+</span><br>
Happy Clients I coded mods for (my brother)
</div>
<div class="w3-quarter w3-section">
<span class="w3-xlarge">300+</span><br>
Days Playtime in Minecraft
</div>
</div>
<!-- Second Parallax Image with Portfolio Text -->
<div class="bgimg-2 w3-display-container w3-opacity-min" style="padding-left: 250px;">
<div class="w3-display-middle">
<span class="w3-xxlarge w3-text-white w3-wide">Links</span>
</div>
</div>
<!-- Container (Portfolio Section) -->
<div class="w3-content w3-container w3-padding-64" id="portfolio" style="padding-left: 250px;">
<h3 class="w3-center">MY WORK</h3>
<p class="w3-center"><em>I guess thats what I've done:</em></p><br>
<!-- Responsive Grid. Four columns on tablets, laptops and desktops. Will stack on mobile devices/small screens (100% width) -->
<div class="w3-row-padding w3-center">
<div class="w3-col m3">
<img src="/w3images/p1.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="The mist over the mountains">
</div>
<div class="w3-col m3">
<img src="/w3images/p2.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Coffee beans">
</div>
<div class="w3-col m3">
<img src="/w3images/p3.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Bear closeup">
</div>
<div class="w3-col m3">
<img src="/w3images/p4.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Quiet ocean">
</div>
</div>
<div class="w3-row-padding w3-center w3-section">
<div class="w3-col m3">
<img src="/w3images/p5.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="The mist">
</div>
<div class="w3-col m3">
<img src="/w3images/p6.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="My beloved typewriter">
</div>
<div class="w3-col m3">
<img src="/w3images/p7.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Empty ghost train">
</div>
<div class="w3-col m3">
<img src="/w3images/p8.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Sailing">
</div>
<button class="w3-button w3-padding-large w3-light-grey" style="margin-top:64px">LOAD MORE</button>
</div>
</div>
<!-- Modal for full size images on click-->
<div id="modal01" class="w3-modal w3-black" onclick="this.style.display='none'" style="padding-left: 250px;">
<span class="w3-button w3-large w3-black w3-display-topright" title="Close Modal Image"><i class="fa fa-remove"></i></span>
<div class="w3-modal-content w3-animate-zoom w3-center w3-transparent w3-padding-64">
<img id="img01" class="w3-image">
<p id="caption" class="w3-opacity w3-large"></p>
</div>
</div>
<!-- Third Parallax Image with Portfolio Text -->
<div class="bgimg-3 w3-display-container w3-opacity-min" style="padding-left: 250px;">
<div class="w3-display-middle">
<span class="w3-xxlarge w3-text-white w3-wide">CONTACT</span>
</div>
</div>
<!-- Container (Contact Section) -->
<div class="w3-content w3-container w3-padding-64" id="contact" style="padding-left: 250px;">
<h3 class="w3-center">I guess those are the ways You can contact me:</h3>
<p class="w3-center"><em>Give me your sub or follow</em></p>
<div class="w3-row-padding w3-margin-bottom">
<div class="w3-quarter quarter">
<div class="w3-container custom1 w3-padding-16">
<div class="w3-left"><i class="fa fa-comment w3-xxxlarge"></i></div>
<div class="w3-right">
<h3>Youtube</h3>
</div>
<div class="w3-clear"></div>
<a href="https://youtube.com/c/JonasJonesJonasJones" id="myBtn1" title="My YouTube channel" class="myBtn1">YouTube</a>
</div>
</div>
<div class="w3-quarter">
<div class="w3-container custom1 w3-padding-16">
<div class="w3-left"><i class="fa fa-eye w3-xxxlarge"></i></div>
<div class="w3-right">
<h3>Github</h3>
</div>
<div class="w3-clear"></div>
<a href="https://github.com/J-onasJones/" id="myBtn1" title="My Github profile" class="myBtn1">Github</a>
</div>
</div>
<div class="w3-quarter">
<div class="w3-container custom1 w3-padding-16">
<div class="w3-left"><i class="fa fa-share-alt w3-xxxlarge"></i></div>
<div class="w3-right">
<h3>Discord</h3>
</div>
<div class="w3-clear"></div>
<a href="https://discord.gg/V2EsuUVmWh" id="myBtn1" title="My Github profile" class="myBtn1">Github</a>
</div>
</div>
<div class="w3-quarter">
<div class="w3-container custom1 w3-text-white w3-padding-16">
<div class="w3-left"><i class="fa fa-users w3-xxxlarge"></i></div>
<div class="w3-right">
<h3>Instagram</h3>
</div>
<div class="w3-clear"></div>
<a href="https://www.instagram.com/_jonas_jones_/" id="myBtn1" title="My Github profile" class="myBtn1">Instagram</a>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="w3-center w3-black w3-padding-64 w3-opacity w3-hover-opacity-off" style="padding-left: 250px;">
<a href="#home" class="w3-button w3-light-grey"><i class="fa fa-arrow-up w3-margin-right"></i>To the top</a>
<div class="w3-xlarge w3-section">
<i class="fa fa-facebook-official w3-hover-opacity"></i>
<i class="fa fa-instagram w3-hover-opacity"></i>
<i class="fa fa-snapchat w3-hover-opacity"></i>
<i class="fa fa-pinterest-p w3-hover-opacity"></i>
<i class="fa fa-twitter w3-hover-opacity"></i>
<i class="fa fa-linkedin w3-hover-opacity"></i>
</div>
<p>Jonas_Jones - Website powered by Github I guess? - <a href="https://youtube.com/c/JonasJonesJonasJones">YOUTUBE</a></p>
</footer>
<script>
// Modal Image Gallery
function onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
var captionText = document.getElementById("caption");
captionText.innerHTML = element.alt;
}
// Used to toggle the menu on small screens when clicking on the menu button
function toggleFunction() {
var x = document.getElementById("navDemo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
// Accordion
function myAccFunc() {
var x = document.getElementById("demoAcc");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
// Click on the "Jeans" link on page load to open the accordion for demo purposes
document.getElementById("myBtn").click();
// Open and close sidebar
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
document.getElementById("myOverlay").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
document.getElementById("myOverlay").style.display = "none";
}
var mybutton = document.getElementById("myBtn");
</script>
</body>
</html>
Reference in a new issue View git blame Copy permalink