Created
June 28, 2013 10:54
-
-
Save darkyen/5883895 to your computer and use it in GitHub Desktop.
A CodePen by Abhishek Hingnikar.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400' rel='stylesheet' type='text/css'> | |
<nav id="main-nav"> | |
</nav> | |
<div id="main-map" class="map-container"></div> | |
<div id="campaign" class="widget accordion"> | |
<div class="page"> | |
<header>Project X</header> | |
<div class="content"> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laboriosam voluptatem distinctio adipisci suscipit recusandae ullam odio ab eum beatae ut deserunt hic fuga neque accusamus fugit voluptates culpa! Aperiam.</p> | |
</div> | |
</div> | |
<div class="page"> | |
<header>Join the fight</header> | |
<div class="content"> | |
<form> | |
<textarea placeholder="I believe a free projectX can change lifes because ..."></textarea> | |
<div id="pos-options"> | |
<input placeholder="I am from" class="search" type="text" /> | |
</div> | |
<button type="submit">Share voice!</button> | |
</form> | |
</div> | |
</div> | |
<div class="page"> | |
<header>Share</header> | |
<div class="content"> | |
<p> Share the word, every voice counts!</p> | |
<input type="text" readonly="readonly" value="http://bit.ly/wiki234"/> | |
<div id="social-links"> | |
<a href="#"> | |
<span class="icon-facebook"></span> | |
</a> | |
<a href="#"> | |
<span class="icon-twitter"></span> | |
</a> | |
<a href="#"> | |
<span class="icon-google-plus"></span> | |
</a> | |
<a href="#"> | |
<span class="icon-adn"></span> | |
</a> | |
</div> | |
</div> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// A lot of CSS sugar is inloved in this | |
// Perhaps a gracefull degrading version is what we need | |
function GMapsInit(){ | |
var mapOptions = { | |
center: new google.maps.LatLng(-34.397, 150.644), | |
zoom: 3, | |
disableDefaultUI:true, | |
mapTypeId: google.maps.MapTypeId.TERRAIN | |
}; | |
var map = new google.maps.Map(document.getElementById("main-map"), | |
mapOptions); | |
} | |
function Accordion(index,root){ | |
if( !(this instanceof Accordion)){ | |
return new Accordion(index,root); | |
} | |
var accordion = this; | |
function handleClick(){ | |
accordion.active && accordion.active.removeClass("active"); | |
accordion.active = $(this).parent(".page"); | |
accordion.active.addClass("active"); | |
} | |
this.active = null; | |
this.$root = $(root); | |
this.pages = this.$root.children(".page"); | |
this.pages.each(function(index,element){ | |
$(element).on("click","header",handleClick); | |
}); | |
} | |
$(".accordion").each(Accordion); | |
GMapsInit(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Custom rule remove if u want */ | |
.widget{ | |
width:320px; | |
margin:0px auto; | |
} | |
/* End of custom rule */ | |
body,html{ | |
background:#ddd; | |
} | |
body{ | |
font-family:'Ubuntu',sans-serif; | |
color:#343434; | |
font-weight:300; | |
line-height:150%; | |
font-size:1.1em; | |
margin:0px auto; | |
} | |
.widget .gutter{ | |
position:absolute; | |
top:0px; | |
left:0px; | |
width:100%; | |
height:100%; | |
} | |
.widget{ | |
box-sizing:border-box; | |
display:inline-block; | |
margin:2em 1em; | |
position:absolute; | |
right:0px; | |
background:#fff; | |
box-shadow:0px 0px 0px 4px #ccc; | |
} | |
.widget.accordion{ | |
overflow:hidden; | |
} | |
.widget header{ | |
cursor:pointer; | |
padding:0.5em; | |
background:#3498DB; | |
line-height:150%; | |
font-size:150%; | |
color:#eee; | |
transition:background 400ms; | |
font-weight:400; | |
} | |
.widget header.active,.widget .active header{ | |
background:#2980b9; | |
} | |
.widget header:hover{ | |
background:#44A5EC; | |
} | |
.widget header:active{ | |
background:#2F88C8; | |
} | |
.widget .content{ | |
padding:0.6em; | |
} | |
.widget .page{ | |
position:relative; | |
} | |
.page header span{ | |
float:right; | |
line-height:1.4em; | |
} | |
.page .content{ | |
max-height:0px; | |
box-sizing:border-box; | |
height:auto; | |
padding:0.0em 0.6em; | |
overflow:hidden; | |
transition:all 400ms; | |
} | |
.page.active .content{ | |
padding:0.6em; | |
height:auto; | |
} | |
.content > p{ | |
text-align:justify; | |
} | |
.content input,.content button,.content textarea{ | |
font-family:'Ubuntu',sans-serif; | |
box-sizing:border-box; | |
font-size:1.2em; | |
display:block; | |
width:100%; | |
padding:0.4em; | |
color:#333; | |
margin:0.4em 0px; | |
border:1px solid #888; | |
} | |
.content input:hover,.content button:hover,.content textarea:hover{ | |
border-color:#000; | |
outline:0; | |
} | |
.content input:focus,.content button:active,.content textarea:focus{ | |
border-color:#2F88C8; | |
outline:0; | |
} | |
.content textarea{ | |
resize:vertical; | |
} | |
#campaign{ | |
bottom:0px; | |
height:auto; | |
} | |
#campaign .page.active .content{ | |
max-height:14em; | |
} | |
#social-links{ | |
font-size:150%; | |
} | |
#social-links a{ | |
color:#545454; | |
font-size:1.4em; | |
line-height:2.4em; | |
text-decoration:none; | |
float:left; | |
width:25%; | |
text-align:center; | |
} | |
#social-links a:hover{ | |
color:#000; | |
} | |
#main-map{ | |
position:absolute; | |
height:100%; | |
width:100%; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment