<nav>
<span class="brand">
<a href="#home">B</a>
</span>
<div class="menu">
<a href="#home" class="active scroll-page"><i class="material-icons">home</i></a><br>
<a href="#about" class="scroll-page"><i class="material-icons">account_circle</i></a><br>
<a href="#skills" class="scroll-page"><i class="material-icons">settings</i></a><br>
<a href="#works" class="scroll-page"><i class="material-icons">work</i></a><br>
<a href="#contact" class="scroll-page"><i class="material-icons">mail</i></a><br>
</div>
<div class="social">
<a href="https://github.com/RidhoBeteer" target="_blank"><i class="devicon-github-plain"></i></a><br>
<a href="http://beteer.wpdevcloud.com" target="_blank"><i class="devicon-wordpress-plain"></i></a><br>
<a href="https://twitter.com/ridhobeteer" target="_blank"><i class="devicon-twitter-plain"></i></a><br>
<a href="https://www.facebook.com/ridho.beteer" target="_blank"><i class="devicon-facebook-plain"></i></a><br>
</div>
</nav>
<section id="home">
<div class="container">
<h1 class="welcome">Hello!<br>I'm Ridho.<br> I <span class="pink">design</span> & <span class="blue">build</span> <br>web application</h1>
<a href="#contact"><button class="scroll-page">Contact Me</button></a>
</div>
</section>
<section id="about">
<div class="container">
<div class="text-container">
<h2 class="blue">Little About Me</h2>
<p>I'm Ridho Ahmad Batubara. An Informatics/Computer Science student at Institut Teknologi Sumatera. I created my first program when i was in junior high school, a cheat injector for a game i'm playing on that time.<br><br> I like to play games on my free time and learn something new.</p>
</div>
</div>
</section>
<section id="skills">
<div class="container">
<div class="text-container">
<h2 class="pink">Skill</h2>
<p>Main area of my expertise is front end development and everything related with this side of web. HTML, CSS, JS. Now, I am currently learning one of the front-end frameworks, Vue.js .</p><br>
</div>
</div>
</section>
<section id="works">
<div class="container">
<h2 class="blue">Portfolio</h2>
<div class="image-container">
<div class="img-display">
<img src="https://raw.githubusercontent.com/RidhoBeteer/SIA-Design/master/screenshot/1.JPG" alt="Sistem Informasi Alumni" class="img-thumbnail">
</div>
</div>
</div>
</section>
<section id="contact">
<div class="container">
<div class="form-container">
<h2 class="pink">Get In Touch</h2>
<form>
<input type="text" placeholder="Name"><br>
<input type="email" placeholder="Email"><br>
<input type="text" placeholder="Subject"><br>
<textarea placeholder="Message"></textarea><br>
<button>Send Message</button>
</form>
</div>
</div>
</section>
html {
font-size: 16px;
}
body {
margin: 0;
padding: 0;
width: 100%;
color: #ccc;
}
.container {
width: 80%;
}
a, a:hover {
text-decoration: none;
color: #64ffda;
}
nav {
position: fixed;
display: block;
width: 60px;
height: 100vh;
background-color: #333;
text-align: center;
}
nav .brand {
font-size: 3rem;
font-weight: 600;
display: block;
background-color: #171717;
}
nav .menu {
display: block;
margin-top: 5rem;
}
nav .menu a {
display: block;
}
nav .menu a, nav .social a {
color: #999;
-webkit-transition: color 320ms ease-in;
-moz-transition: color 320ms ease-in;
-ms-transition: color 320ms ease-in;
-o-transition: color 320ms ease-in;
transition: color 320ms ease-in;
}
nav .menu a:hover, nav .menu a.active, nav .social a:hover {
color: #64ffda;
}
nav .social {
margin-top: 3rem;
}
nav .social a {
display: inline-block;
margin-bottom: 5px;
}
section {
min-height: 100vh;
}
section:nth-child(odd) {
background-color: #373737;
}
section:nth-child(even) {
background-color: #444;
}
.container h2 {
margin-top: 6rem;
font-weight: 800;
font-size: 2.5rem;
}
.welcome {
font-size: 3rem;
font-weight: 800;
color: #fff;
margin-top: 6rem;
}
.pink {
color: #f06292
}
.blue {
color: #64ffda;
}
#home button {
margin-top: 3rem;
width: 150px;
font-size: 1.3rem;
border: 1px solid #64ffda;
border-radius: 5px;
color: #64ffda;
background-color: #444;
-webkit-transition: background 320ms ease-in;
-moz-transition: background 320ms ease-in;
-ms-transition: background 320ms ease-in;
-o-transition: background 320ms ease-in;
transition: background 320ms ease-in;
}
#home button:hover {
background-color: #64ffda;
color: #444;
}
.text-container {
width: 50%;
text-align: justify;
}
#about .text-container {
float: right;
}
.text-container p {
font-size: 1.2rem;
letter-spacing: 1px;
}
#works h2 {
margin-bottom: 2rem;
}
.img-thumbnail {
width: 300px;
height: 200px;
background-color: #fff;
padding: 2px;
border-radius: 2px;
}
.form-container {
width: 50%;
text-align: center;
margin: 0 auto;
margin-top: -1rem;
}
form {
margin-top: 3rem;
}
.form-container input, .form-container textarea, .form-container button {
margin: 0 auto;
display: block;
}
input, textarea {
width: 70%;
border: none;
border-radius: 5px;
padding: .7rem;
background-color: rgba(0,0,0,0.3);
color: #fff;
}
textarea {
height: 120px;
resize: none;
}
form button {
margin-top: 3rem;
width: 150px;
height: 2rem;
font-size: 1rem;
border: 1px solid #f06292;
border-radius: 5px;
color: #f06292;
background-color: #444;
-webkit-transition: background 320ms ease-in;
-moz-transition: background 320ms ease-in;
-ms-transition: background 320ms ease-in;
-o-transition: background 320ms ease-in;
transition: background 320ms ease-in;
}
form button:hover {
background-color: #f06292;
color: #444;
}
$(function() {
$('.scroll-page').on('click', function() {
var offset = 0;
var speed = 800;
var target = $(this.hash);
$('nav .menu a').each(function() {
$(this).removeClass('active');
});
$(this).addClass('active');
$('html, body').animate({
scrollTop: target.offset().top - offset
}, speed, 'swing'); });
});
$(window).scroll(function(event) {
var scrollPos = $(document).scrollTop();
console.log(scrollPos);
$('nav .menu a').each(function() {
var curLink = $(this);
var refElement = $(curLink.attr('href'));
if (refElement.position().top <= scrollPos + 60) {
$('nav .menu a').removeClass('active');
curLink.addClass('active');
} else {
curLink.removeClass('active');
}
});
});
