Skip to content

Maria Ulfa #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mariaulfa33 wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Maria Ulfa #5

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f065fbb
submit
mariaulfa33 Feb 9, 2019
5755989
submit
mariaulfa33 Feb 9, 2019
809e385
submit
mariaulfa33 Feb 9, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
229 changes: 229 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,229 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css" />
<style>

.has-bg-img { background: url('https://media.gadventures.com/media-server/cache/8b/de/8bde1bddee2e7a26208ba8cb3dd17021.jpg')center center; background-size:cover; }
</style>
<title>Maria Ulfa</title>
</head>
<body >
<section class="hero is-success is-fullheight has-bg-img" >
<!-- Hero content: will be in the middle -->
<div class="hero-body">
<div class="container has-text-centered">
<h1 class="title" id="title">
Hi,
</h1>
<h2 class="subtitle" id = "subtitle">
these are a few of my favorite things
</h2>
</div>
</div>

<!-- Hero footer: will stick at the bottom -->
<div class="hero-foot">
<nav class="tabs is-centered">
<div class="container">
<ul>
<li class="is-active" id="text-overview"><a href="#overview">Overview</a></li>
</ul>
</div>
</nav>
</div>
</section>
<section class="hero is-success is-fullheight has-background-black" id="overview" >
<div class="hero-body">
<div class="container has-image-centered">
<figure class="image is-128x128" id="profpict">
<img class="is-rounded" src="https://media.istockphoto.com/vectors/young-arabic-business-woman-wearing-hijab-vector-id917649844?k=6&m=917649844&s=612x612&w=0&h=RAPAEE5f-MOITXD_dY5KLVcFa4d2MhrFo0dM2vh6M2Y=" alt="https://media.istockphoto.com/vectors/young-arabic-business-woman-wearing-hijab-vector-id917649844?k=6&m=917649844&s=612x612&w=0&h=RAPAEE5f-MOITXD_dY5KLVcFa4d2MhrFo0dM2vh6M2Y=">
</figure>
<h1 class="title">
Maria Ulfa
</h1>
<h2 class="subtitle">
saya suka menggambar
</h2>
<div class="content" id = "kotak" >
<div class="columns">
<div class="column is-narrow ">
<div class="box has-background-danger" style="width: 200px;">
<p class="title is-5">Background</p>
<p class="subtitle"></p>
</div>
</div>
<div class="column">
<div class="box">
<p class="subtitle has-text-black">in 2018, I graduated as a city planner and started into programming. Joined hacktiv8 is a big pleasure for me because it's like found my missing link.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hero-foot">
<nav class="tabs is-centered">
<div class="container">
<ul>
<li class="is-active"><a href="#overview">Other</a></li>
</ul>
</div>
</nav>
</div>
</section>

<section class="hero is-success is-fullheight has-background-black">
<div class="hero-body">
<div class="content" >
<!--start content other (Social media)-->
<div class="columns">

<div class="column is-narrow">
<div class="box has-background-danger" style="width: 200px;">
<p class="title is-5">See me On Github</p>
<p class="subtitle"></p>
<br>
</div>
</div>

<div class="column">
<div class="box">
<div class="card-image">
<figure class="image is-4by3">
<img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
</figure>
</div>
<div class="card-content">
<div class="content">
see me on github! <a>@mariaulfa33</a>
<br>

</div>
</div>
</div>
</div>

<div class="column">
<div class="box">
<div class="card-image">
<figure class="image is-4by3">
<img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
</figure>
</div>
<div class="card-content">
<div class="content">
see me on github! <a>@mariaulfa33</a>
<br>

</div>
</div>
</div>
</div>

<div class="column">
<div class="box">
<div class="card-image">
<figure class="image is-4by3">
<img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
</figure>
</div>
<div class="card-content">
<div class="content">
see me on github! <a>@mariaulfa33</a>
<br>

</div>
</div>
</div>
</div>

<div class="column">
<div class="box">
<div class="card-image">
<figure class="image is-4by3">
<img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
</figure>
</div>
<div class="card-content">
<div class="content">
see me on github! <a>@mariaulfa33</a>
<br>

</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--END content other (Social media)-->
<div class="hero-foot">
<nav class="tabs is-centered">
<div class="container">
<ul>
<li class="is-active">@2019</li>
</ul>
</div>
</nav>
</div>
</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script>
var expandSequence = expand()
var $animation_elements = $('#kotak')
var $window = $(window);

TweenMax.to($("#title"), 3, {
ease: Elastic.easeOut.config(2, 0.6),
y: -40
})
TweenMax.to($("#subtitle"), 3, {
ease: Elastic.easeOut.config(50, 0.6),
y: -20
})

function check_if_in_view() {
var window_height = $window.height();
var window_top_position = $window.scrollTop();
var window_bottom_position = (window_top_position + window_height);

$.each($animation_elements, function() {
var $element = $(this);
var element_height = $element.outerHeight();
var element_top_position = $element.offset().top;
var element_bottom_position = (element_top_position + element_height);

if ((element_bottom_position >= window_top_position || element_bottom_position-10 >= window_top_position ) &&(element_top_position <= window_bottom_position || element_top_position-10 <= window_bottom_position)) {
expandSequence.restart()
} else {

}
})
}

function expand() {
var tl = new TimelineLite()
tl.to($("#profpict"), 0.5, {
rotation:360, transformOrigin:"left 10%"
})
.to($("#kotak"), 3, {
ease: Elastic.easeOut.config(5, 0.3),
y: -10
})
return tl
}

$window.on('scroll', check_if_in_view);
$window.trigger('scroll')



</script>
</body>
</html>