"navigation by john niro yumang"
Bootstrap 3.3.0 Snippet by jeanyu23

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <!----------------------LOCAL BOOTSTRAP FOLDER---------------------> <!------------------- own made css -------------------------------> <link rel="stylesheet" href="bootstrap/css/css.css"> <!----------------- Optional Bootstrap theme -------> <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> <!-------------------- Optional fonts ---------------> <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"> <!--------------------JS FOLDER--------------------> <script src="js/jquery-1.10.2.min.js"></script> <!------- own made JAVA ---> <script src="/js/js.js"></script> <!------------------ minified JavaScript ------------> <script src="bootstrap/js/bootstrap.min.js"></script> <!----------------------LOCAL BOOTSTRAP FOLDER---------------------> <link rel="icon" href="images/1.gif"> <!----------------------Link icon---------------------> <html> <title>J23 General information</title> <head></head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <body> <div class="container-fluid"> <div class="container"> <div class="hidden-xs col-sm-4 col-md-3 col-lg-3" id="alink"> <div class="fading-side-menu" data-spy="affix" data-offset-top="10"> <center><h1 style="font-size:20px;color:#168ccc;font-family:AR BERKLEY;"> Information </h1></center> <ul class="list-unstyled"> <li> <a href="#intro"> <button type="button" class="btn btn-default" id="btns1">Introduction</button> </a> </li> <li> <a href="#getting-started"> <button type="button" class="btn btn-default" id="btns1">Getting Started</button> </a> </li> <li> <a href="#setting-up-our-page"> <button type="button" class="btn btn-default" id="btns1">Setting up your page</button> </a> </li> <li> <a href="#conclusion"> <button type="button" class="btn btn-default" id="btns1">Conclusion</button> </a> </li> <br> <p class="lead text-center" style="font-size:20px;color:#168ccc;font-family:AR BERKLEY;">Related Articles</p> <li> <a href=""><button type="button" class="btn btn-default" id="btns1">Conclusion</button> </a> </li> <li> <a href=""><button type="button" class="btn btn-default" id="btns1">Conclusion</button> </a> </li> <li> <a href=""><button type="button" class="btn btn-default" id="btns1">Conclusion</button> </a> </li> <li> <a href=""><button type="button" class="btn btn-default" id="btns1">Conclusion</button> </a> </li> <li> <a href=""><button type="button" class="btn btn-default" id="btns1">Conclusion</button> </a> </li> <li> <a href=""><button type="button" class="btn btn-default" id="btns1">Conclusion</button> </a> </li> <li> <a href=""><button type="button" class="btn btn-default" id="btns1">Conclusion</button> </a> </li> </ul> </div> </div> <!-- THIS IS NOT NEEDED, THIS IS JUST THE CONTENT OF THE DEMO --> <div data-spy="scroll" data-target="#alink" class="col-xs-12 col-sm-8 col-md-9 col-lg-9"> <h1 style="font-size:60px;color:#168ccc;font-family:Edwardian Script ITC;"> J23 Information </h1> <p class="lead">Company liabilties & Terms</p> <p>I was browsing the web when I came across a tutorial on <a href="http://www.html5rocks.com/" target="_blank">HTML5 Rocks</a> and realized they have one of the coolest effect and subtle effects I have never seen before on any other blog/tutorial site. It is so simple and elegant I couldn't wait to try and replicate it. I would like to point out I did replicate it <strong>NOT</strong> it. I never even looked at the source code nor do I know how they actually accomplished their version of this. I do however give them full credit for not only the inspiration but the design. It is a really amazing and simple effect.</p> <p>Alright, so what does this actually do. While if you notice to the left (if you are viewing this on <em>xs</em> device it will not show) we have a side menu that looks pretty ordinary. It will use <a href="http://getbootstrap.com/" target="_blank">Bootstrap's'</a> affix plugin to stick itself to the top of the screen as you scroll down. After the side menu has gotten the class <code>affix</code> from bootstrap it will slowly start to fade out until you can barely see it. If you Hover over it or back to the top, you will notice it will quickly fade back into view. This very simple and small effect, helps users focus on the content of the blog, while still having an unobtrusive side menu.</p> <h4 id="getting-started">Getting started</h4> <p>Jane Jacobs, social good, education, dialogue emergent; freedom incubation theory of social change beneficiaries. Democratizing the global financial system accelerate progress accessibility, raise awareness agriculture compassion protect asylum assistance hack advancement save the world human-centered design. Meaningful work storytelling human rights nonviolent resistance fellows. Support economic security thinkers who make change happen process provide disrupt inclusive. Prevention, synthesize committed; recognition; policy Millennium Development Goals working alongside life-expectancy. Generosity solve; affiliate, combat malaria; disruptor urban; prosperity activism new approaches.</p> <p>Frontline save lives empowerment; human potential innovate. Treatment indicator civic engagement rights-based approach nutrition combat poverty social health shifting landscape. Enabler giving advocate peace micro-finance. Challenges collaborative safeguards visionary board of directors Kony 2012 Andrew Carnegie. Respect amplify implementation; public institutions many voices honor measures courageous. Engage, gender rights maximize empower local solutions, recognize potential; safety challenges of our times fight against oppression transform socio-economic divide. Medical supplies, Nelson Mandela technology nonprofit; legitimize; policymakers innovation Rosa Parks shift global health Bloomberg readiness making progress Aga Khan.</p> <p>Reduce child mortality global leaders resolve refugee mobilize; participatory monitoring, worldwide, connect forward-thinking sharing economy detection partnership. Harness capacity building immunize social entrepreneurship celebrate assessment expert development crisis management. Liberal long-term non-partisan, change-makers best practices; small-scale farmers proper resources affordable health care women and children change lives donors inclusive capitalism Jane Addams. Cross-agency coordination country solution change movements political vulnerable citizens cornerstone Angelina Jolie revitalize.</p> <h4 id="setting-up-our-page">Setting up our page</h4> <p>Metrics enabler end hunger, economic independence empower celebrate social analysis incubation board of directors equity. Effectiveness; carbon rights; urban; liberal maintain Bloomberg developing livelihoods; research, revitalize improving quality agenda clean water harness. Aga Khan; relief efficient social responsibility, international development, aid diversity crisis situation public service.</p> <p>Informal economies meaningful work, expanding community ownership social impact global leaders. Reduce carbon emissions fluctuation countries lasting change elevate. Leverage, amplify public-private partnerships, John Lennon minority. Local; world problem solving fight against malnutrition, meaningful, advocate solve emergency response generosity, microloans benefit turmoil Millennium Development Goals promising development development. Enable overcome injustice, social entrepreneurship poverty Gandhi donors. Challenges interconnectivity respect integrity, sustainable safety transform cross-cultural think tank medical civic engagement time of extraordinary change significant.</p> <h4 id="conclusion">Conclusion</h4> <p>Tackling policy dialogue conflict resolution design thinking community shift Jane Addams impact legal aid compassion. United Nations democracy non-partisan institutions prevention. Beneficiaries, incubation vulnerable citizens; cause many voices connect; grantees Cesar Chavez empowerment partnership change lives. Citizens of change global citizens social worker; inspire social change, public service social responsibility refugee safeguards climate change accessibility Ford Foundation save the world lasting change The Elders. Nonviolent resistance save lives cooperation fluctuation change movements policymakers transform the world. Revitalize implementation frontline growth women's rights future; international development, mobilize metrics fundraising campaign.</p> <p>John Lennon citizenry accelerate solve, humanitarian carbon emissions reductions, assistance dialogue volunteer; marginalized communities enabler meaningful prosperity. Country; dedicated leverage, transformative social innovation small-scale farmers reduce carbon emissions open source freedom economic security developing nations protect. Global network forward-thinking poverty nonprofit environmental voice. Deep engagement resourceful activist opportunity; equal opportunity focus on impact care political foundation. Women and children countries honesty investment gender equality.</p> <p>Social entrepreneurship progress tackle invest social impact, inspire breakthroughs advancement scalable health. Micro-finance Andrew Carnegie sustainable future human experience campaign global justice world problem solving sharing economy Kony 2012 new approaches results challenges of our times. Innovate integrity, indicator; Nelson Mandela, emergent free expression enable life-expectancy expanding community ownership human potential. Microloans Jane Jacobs, eradicate cross-agency coordination think tank significant. Outcomes thinkers who make change happen catalytic effect empower global health working alongside pride medical supplies.</p> <br><br><br> <a href="default.asp" target="">ABOUT |</a> <a href="default.asp" target="">ABOUT |</a> <a href="default.asp" target="">ABOUT |</a> <a href="default.asp" target="">ABOUT |</a> <a href="default.asp" target="">ABOUT |</a> <a href="default.asp" target="">ABOUT |</a> <a href="default.asp" target="">ABOUT |</a> <a href="default.asp" target="">ABOUT |</a> <a href="default.asp" target="">ABOUT |</a> <a href="default.asp" target="">ABOUT |</a> <a href="default.asp" target="">ABOUT |</a> <a href="default.asp" target="">ABOUT |</a> <br><br><br><br> Email me at<a class="JeanYu23@yahoo.com" href="https://www.facebook.com/johnniro" target=""> John Niro Yumang |</a> <p>And Dont Forget to comment for feedbacks or updates Thanks !!!</p> </div> <p class="text-right disabled">@2016 J23</p> </div> </div> </body> <style> a:link {text-decoration:none;color:gray;} a:link:hover {color:#168ccc;} body {margin-bottom:55px;} #btns1 {width:100%;border-left:0px;border-right:0px;border-radius:0px;text-align: left; box-shadow: 0 4px 2px -2px gray; } p {text-align:justify;font-size:12px;} #btns1:hover {color:#168ccc;box-shadow: 10px 10px 5px lightgray;} </style> <script> </script> </html>

Related: See More


Questions / Comments:

Welcome to my Snippet Any suggestion and Co
mments :P

Jean Yu () - 7 years ago - Reply 0