| Current Path : /home/h/a/p/happyrenas/old/happy-and-pay.fr/js/fullpage/pure javascript (Alpha)/ |
Linux webd005.cluster105.gra.hosting.ovh.net 5.15.206-ovh-vps-grsec-zfs-classid #1 SMP Fri May 15 02:41:25 UTC 2026 x86_64 |
| Current File : /home/h/a/p/happyrenas/old/happy-and-pay.fr/js/fullpage/pure javascript (Alpha)/demo.html |
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>fullPage.js - Pure Javascript version</title>
<meta name="author" content="Alvaro Trigo Lopez" />
<meta name="description" content="fullPage plugin by Alvaro Trigo. Pure javascript version of full screen slider." />
<meta name="keywords" content="fullpage,jquery,alvaro,trigo,plugin,fullscren,screen,full,iphone5,apple,pure,javascript,slider,hijacking" />
<meta name="Resource-type" content="Document" />
<link rel="stylesheet" type="text/css" href="javascript.fullPage.css" />
<style>
/* Reset CSS
* --------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
a{
text-decoration:none;
}
table {
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-weight: normal;
font-style: normal;
}
strong{
font-weight: bold;
}
ol,ul {
list-style: none;
margin:0;
padding:0;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
margin:0;
padding:0;
color:#444;
}
q:before,q:after {
content:'';
}
abbr,acronym { border: 0;
}
/* Custom CSS
* --------------------------------------- */
body{
font-family: arial,helvetica;
color: #F2F2F2;
}
h1{
font-size: 6em;
}
p{
font-size: 2em;
}
.content{
position: relative;
top: 50%;
transform: translateY(-50%);
text-align: center;
}
/* Section 1
* --------------------------------------- */
#section0{
background-color: #BFDA00;
}
#section0 h1{
color: #444;
}
#section0 p{
color: #333;
opacity: 0.4;
}
/* Section 2
* --------------------------------------- */
#section1{
background-color: #2EBE21;
}
#section1 h1{
color: #fff;
}
#section1 p{
opacity: 0.8;
}
/* Section 3
* --------------------------------------- */
#section2{
background-color: #2C3E50;
}
#section2 h1{
color: #F2F2F2;
}
#section2 p{
opacity: 0.6;
}
</style>
</head>
<body>
<div id="fullpage">
<div class="section " id="section0">
<div class="content">
<h1>fullPage.js</h1>
<p>Javascript only version</p>
</div>
</div>
<div class="section" id="section1">
<div class="slide" id="slide1">
<div class="content">
<h1>No need for jQuery</h1>
<p>
5 Kb gzipped!!
</p>
<p>
Improve the loading time of your site!
</p>
</div>
</div>
<div class="slide" id="slide2">
<div class="content">
<h1>Slides too!</h1>
</div>
</div>
<div class="slide" id="slide2">
<div class="content">
<h1>More slides!</h1>
</div>
</div>
</div>
<div class="section" id="section2">
<div class="content">
<h1>Compatible</h1>
<p>IE 8+ support.</p>
</div>
</div>
</div>
<script type="text/javascript" src="javascript.fullPage.js"></script>
<script type="text/javascript">
fullpage.initialize('#fullpage', {
anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
menu: '#menu',
css3:true
});
</script>
</body>
</html>