Skip to content

Instantly share code, notes, and snippets.

@Youngestdev

Youngestdev/bored.markdown

Created April 20, 2018 00:03
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Youngestdev/8ce976e90b4833a546b4d024fd06cdce to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Youngestdev/8ce976e90b4833a546b4d024fd06cdce to your computer and use it in GitHub Desktop.
Download ZIP
Bored
Raw
index.html
<body>
<header>
<b>Abdul</b>
<nav align="right">
<a href="#" class="links" onClick="openLink(event, 'home')">Home</a>
<a href="#about" onclick="openLink(event, 'about')" class="links">About</a>
<a href="#contact" class="links" onClick="openLink(event, 'contact')">Contact</a>
</nav>
</header>
<hr />
<div id="home" class="">
<h1>Hi, I'm Abdul.</h1>
<p>I'm a 15 year old software developer made in <b>Kaduna</b> but currently lives in <b>Lagos, Nigeria.</b> Check out my works on <b><a href="https://github.com/Youngestdev">Github.</a></b> <br>
</b>
</div>
<div id="about" class="content">
<h2>About Me </h2>
I'm Abdul, that curious boy that loves to learn. I'm an undergraduate aspiring for a university currently. I love to eat, farm in my garden, listen to music, watch anime(s) and co.
<p>Talking of me being a web developer. I've been in the game for long but as lazy as I am, I have only few works to show notwithstanding, I'm a passionate lover of open source - i mentor at Google summer of code.</p>
<nav align="right">
<a href="#home"><b class="fas fa-chevron-circle-up">Top</b></a>
</nav>
<h4>Interests ? yeah i do have.</h4>
<p>As a young vibrant guy, i love pokenosing into web/programming related stuff. I'm a <strong>lazy</strong> fan of <>AI/ML/NL</b>. I also love to write, cook, hack and advocate tech to non-techies.</p>
</div>
<div id="contact" class="content">
<h3>Contact</h3>
Well, it's odd to visit the contact section and not find the contact form. Arghhh...
<p>
To contact me, just mail me at <b>laisibizness@gmail.com</b>
</p>
</div>
<nav id="footer" align="center">
<a href="https://github.com/Youngestdev"><b class="fab fa-github">Github </b></a>
<a href="https://facebook.com/kvng.laisi"><b class="fab fa-facebook-f">Facebook </b></a>
<a href="https://twitter.com/kvng_zeez"><b class="fab fa-twitter">Twitter </b></a>
<a href="https://medium.com/@kvng_zeez"><b class="fab fa-medium">Medium</b></a>
</nav>
</body>
Raw
script.js
function openLink(evt, link) {
let i, content, links;
content = document.getElementsByClassName("content");
for (i = 0; i < content.length; i++) {
content[i].style.display = "none";
}
links = document.getElementsByClassName("links");
for (i = 0; i < links.length; i++) {
links[i].className = links[i].className.replace(" active", "");
}
document.getElementById(link).style.display = "block";
evt.currentTarget.className += " active";
}
Raw
style.css
@import url(https://fonts.googleapis.com/css?family=Pacifico);
@import url(https://fonts.googleapis.com/css?family=Gamja+Flower);
body {
background-image: linear-gradient(85deg, orange, brown);
font-family: 'Gamja flower';
font-size: 20px;
}
nav {
font-family: 'sans-serif';
font-size: 13px;
word-spacing: 5px;
}
a {
color: black;
font-family: 'Gamja flower';
font-size: 20px;
}
b {
font-family: 'Gamja flower';
font-size: 20px;
}
hr {
border-color: transparent;
}
#home, #about, #contact {
font-size: 30px;
}
.links {
margin: 0;
border: 0;
}
.content {
display: none;
}
footer {
bottom: 0;
}
#footer {
position: relative;
bottom: 0;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.1.0/font-awesome-animation.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment