<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<header id="home">
<div class="home-content">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-md-offset-3">
<div class="home-semicircle-outer">
<div class="home-semicircle-inner">
</div><!-- /.home-semicircle-inner -->
<div id="home-semicircle-pointer"></div>
<nav>
<ul class="cl-effect-15">
<li class="first-position"><a href="#" data-hover="On">On</a></li>
<li class="second-position"><a href="#" data-hover="Webdesign">Webdesign</a></li>
<li class="third-position"><a href="#" data-hover="Wordpress Dev">Wordpress Dev</a></li>
<li class="fourth-position"><a href="#" data-hover="Front End">Front End</a></li>
<li class="fifth-position"><a href="#" data-hover="Off">Off</a></li>
</ul>
</nav>
</div><!-- /.home-semicircle-outer -->
<div class="home-logo">
<h1><a href="http://miukimiu.com">Miuki Miu</a></h1>
</div>
</div><!-- /-col-xs-12 col-md-12-->
</div><!-- /-row-->
</div><!-- /.container -->
<div class="home-info-outer">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="home-info">
<div class="home-info-block on">
<h1>Yeah! Nice to meet you</h1>
<h2>I'm just a friendly girl who loves to create beautiful websites!</h2>
</div>
<div class="home-info-block we">
<h1>Webdesign</h1>
<h2>I'm just a friendly girl who loves to create beautiful websites!</h2>
</div>
<div class="home-info-block wd">
<h1>Wordpress Development</h1>
<h2>I'm just a friendly girl who loves to create beautiful websites!</h2>
</div>
<div class="home-info-block fe">
<h1>Front-end</h1>
<h2>Css, html and jQuery! </h2>
</div>
<div class="home-info-block off">
<h1>When I'm offline</h1>
<h2>I love to produce electronic music, take photos, travel, go out with my friends and be happy! !</h2>
</div>
</div>
</div><!-- /-col-xs-12 col-md-12-->
</div><!-- /-row-->
</div><!-- /.container -->
</div><!-- home-info-outer -->
</div><!-- /.home-content -->
</header><!-- /#home **************************************** -->
/***************
****************
** Variables ***
****************
****************/
/*********
**********
** Fonts
**********
**********/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
@import url(https://fonts.googleapis.com/css?family=Allura|Open+Sans);
.title {
font-family: 'Fjalla One', sans-serif;
}
/**************
***************
**** #main ****
***************
***************/
body {
background: #fff;
color: #B2B2B2;
}
#main-content #services,
#main-content #work,
#main-content #blog,
#main-content #about,
#main-content #contacts {
padding: 20px 0;
}
.divider {
display: block;
width: 35px;
height: 3px;
margin: 10px auto 20px;
background-color: #74D9D0;
}
.headline {
color: #999;
font-size: 16px;
line-height: 25px;
font-weight: 100;
text-align: center;
}
/**************
***************
**** #home ****
***************
***************/
#home {
background: url(http://miukimiu.com/dummy/patterns/diamond_upholstery.png) repeat;
display: block;
color: #fff;
}
#home h2 {
color: #fff;
}
#home .home-logo {
padding: 20px 0;
z-index: 999;
width: 177px;
height: 81px;
position: absolute;
top: 135px;
left: 50%;
margin-left: -88.5px;
}
#home .home-logo h1 a {
font-family: "Allura", cursive;
font-size: 50px;
display: block;
color: #fff;
}
#home .home-logo h1 a:hover {
opacity: 0.8;
text-decoration: none;
}
#home .home-content h1 {
text-align: center;
padding-bottom: 10px;
}
#home .home-content h2 {
font: 20px/1 "Open Sans", sans-serif;
text-transform: uppercase;
border-top: 1px solid #fff;
text-align: center;
padding-top: 20px;
width: 50%;
left: 25%;
position: relative;
}
.home-semicircle-outer {
position: relative;
background-color: rgba(255, 255, 255, 0.5);
height: 250px;
width: 500px;
display: block;
-moz-border-radius: 500px 500px 0 0;
-webkit-border-radius: 500px;
border-radius: 500px 500px 0 0;
z-index: 1;
margin-top: 20px;
left: 50%;
margin-left: -250px;
/* box-shadow: inset 0 3px 10px rgba(0, 0, 0, .1), 0 2px 20px rgba(255, 255, 255, 0.2);*/
}
.home-semicircle-inner {
background-color: #74D9D0;
height: 125px;
width: 250px;
display: block;
-moz-border-radius: 125px 125px 0 0;
-webkit-border-radius: 125px 125px 0 0;
border-radius: 125px 125px 0 0;
position: absolute;
left: 50%;
margin-left: -125px;
margin-top: 125px;
z-index: 3;
}
#home-semicircle-pointer {
width: 160px;
border-bottom: 20px solid #74D9D0;
position: absolute;
left: 50%;
top: 50%;
margin-left: -160px;
margin-top: 130px;
z-index: 2;
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
/* Home info */
.home-info-outer {
background: #74D9D0;
position: relative;
top: 0px;
z-index: 5;
}
.home-info {
padding: 20px 0;
min-height: 180px;
}
.home-info-block {
display: none;
}
#home nav ul {
list-style: none;
text-align: center;
margin: 0;
}
#home li a:hover,
#home li.active a {
text-decoration: none;
}
#home nav a {
font: 400 18px/1 "Open Sans", sans-serif;
text-transform: uppercase;
color: #74D9D0;
}
#home nav ul li {
display: inline-block;
}
#home .first-position {
position: relative;
left: -15px;
top: 180px;
}
.first-rotation {
-moz-transform: rotate(26deg);
-ms-transform: rotate(26deg);
-webkit-transform: rotate(26deg);
transform: rotate(26deg);
}
#home .second-position {
position: relative;
left: -40px;
top: 115px;
}
.second-rotation {
-moz-transform: rotate(40deg);
-ms-transform: rotate(40deg);
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
#home .third-position {
position: relative;
left: -10px;
top: 60px;
}
.third-rotation {
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#home .fourth-position {
position: relative;
left: 0px;
top: 115px;
}
.fourth-rotation {
-moz-transform: rotate(128deg);
-ms-transform: rotate(128deg);
-webkit-transform: rotate(128deg);
transform: rotate(128deg);
}
#home .fifth-position {
position: relative;
left: -20px;
top: 180px;
}
.fifth-rotation {
-moz-transform: rotate(156deg);
-ms-transform: rotate(156deg);
-webkit-transform: rotate(156deg);
transform: rotate(156deg);
}
.ease-rotation {
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
jQuery( document ).ready(function( $ ) {
$('.on').show(2000);
//when document loads goes from off to on
$("#home-semicircle-pointer").addClass('first-rotation ');
$( ".first-position" ).click(function(e) {
$("#home-semicircle-pointer").removeClass().addClass('first-rotation ease-rotation');
$('.home-info-block').hide();
$('.on').show(2000);
});
$( ".second-position" ).click(function() {
$("#home-semicircle-pointer").removeClass().addClass('second-rotation ease-rotation');
$('.home-info-block').hide();
$('.we').show(2000);
});
$( ".third-position" ).click(function() {
$("#home-semicircle-pointer").removeClass().addClass('third-rotation ease-rotation');
$('.home-info-block').hide();
$('.wd').show(2000);
});
$( ".fourth-position" ).click(function() {
$("#home-semicircle-pointer").removeClass().addClass('fourth-rotation ease-rotation');
$('.home-info-block').hide();
$('.fe').show(2000);
});
$( ".fifth-position" ).click(function() {
$("#home-semicircle-pointer").removeClass().addClass('fifth-rotation ease-rotation');
$('.home-info-block').hide();
$('.off').show(2000);
});
});//Closes Doc Ready
