Slide of pages

Report · Jan 25, 2018

Hello everyone, I am new. I ask you a hand and I wanted to know if I can do dreamweaver with page transition. I'll show you a link like that, can you do it?

http://demos.webspeaks.in/backbone-page-transitions/

Report · Jan 25, 2018

If you have a look at the CSS of the page that you referred to, you will find

/**
* Our transition classes
*/
.slideInOut {
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease;
    transition: transform 0.3s ease, opacity 0.3s ease;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
}
.slideInOut.active {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.slideUpDown {
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease;
    transition: transform 0.3s ease, opacity 0.3s ease;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
}
.slideUpDown.active {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
/**
* Our transition classes End
*/

In other words, it is not Dreamweaver that does that, it is coding that does that. Dreamweaver is merely a tool that will help you to produce the code. Having said that, it is best that you learn HTML and CSS first.

Wappler, the only real Dreamweaver alternative.

Report · Jan 25, 2018

In fact I had worked html and css then I stopped long ago for this. Maybe I have the next days to do the HTML and CSS course.

Thanks

Report · Jan 25, 2018

teodoro8590 wrote
Hello everyone, I am new. I ask you a hand and I wanted to know if I can do dreamweaver with page transition. I'll show you a link like that, can you do it?
http://demos.webspeaks.in/backbone-page-transitions/

The demo code below is probably going to be of more help to you as the one you have linked to uses a lot of advanced scripting to get stuff onto the page.

<!DOCTYPE html>

<html>

<head>

<title>jQuery Page Transitions</title>

<style>

body {

margin: 0;

font-family: helvetica, verdana, sans-serif;

}

* {

box-sizing: border-box;

}

.navigation {

display: flex;

justify-content: center;

align-items: center;

position: fixed;

height: 100vh;

width: 100vw;

background-color: #0099ff;

}

.navigation a {

text-decoration: none;

color: #fff;

font-size: 40px;

padding: 0 30px;

}

.close_navItem {

position: absolute;

right: 30px;

top: 20px;

z-index: 100;

font-size: 40px;

color: #fff;

display: none;

}

.home, .profile, .friends {

position: fixed;

height: 100vh;

width: 100vw;

z-index: 10;

right: -100%;

padding: 40px 100px;

}

.home {

background-color: #e6ac00;

}

.profile {

background-color: #00b3b3;

}

.friends {

background-color: #b84dff;

}

.home h2, .profile h2, .friends h2 {

text-align: center;

font-size: 40px;

font-weight: 400;

color: #fff;

}

.home p, .profile p, .friends p {

text-align: center;

line-height: 30px;

}

</style>

</head>

crossorigin="anonymous"></script>

$(document).ready(function(){

// MAIN NAVIGATION

$('.navigation a').css('cursor' , 'pointer').click(function(){

$('.close_navItem').show();

var navItem = $(this).attr('navItem');

$(navItem).css({'right' : '0', 'transition' : '2s'});

});

// CLOSE NAVITEM

$('.close_navItem').css('cursor' , 'pointer').click(function(){

$('.close').css({'right' : '-100%', 'transition' : '1.5s'});

});

</script>

<body>

<a href="#" navItem=".profile">Profile</a>

<a href="#" navItem=".friends">Friends</a>

</nav>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</section>

<h2>Profile</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</section>

<h2>Friends</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</section>

</body>

</html>

Report · Jan 25, 2018

Great. I do not know how to thank you. It was what I wanted. Anyway, I'm preparing to make a site that I have to add the menu and other things. If there are problems and I write here ok? Thanks again.

Thanks again ...

Report · Jan 25, 2018

Sorry.... where I can write my question of mine in the new post but the same topic?

Report · Jan 25, 2018

Come back to the web forum. Open the discussion and click on the Reply link. See screenshot.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Jan 25, 2018

Thank You!!!!

Report · Jan 25, 2018

I fixed some things on the menu and others in the section. There are some problems.

1) In the menu I have set as right but it does not work. Then I can not set for space between words.

2) Then to click each menu works only once, example when I open the HOME PAGE, I clicked INFO, it works well, then I clicked Map works well, but when the page of INFO or MAP or PROGRAM or ... I would like to click back that is HOME PAGE not fuction. Perhaps one of you can explain to me only once, then the rest of the rest I'll take care of it.

3) When I clicked a menu and it works well the transition but it does not cover a DIV where I wrote TEXT TEXT TEXT ... I want it to be covered as a new page.

4) One answer for the code of SECTION can not enlarge height? Why do I have to put more videos or longer text? Because I tried height, I can not.

Anyway I copied the codes I made and I glued here, can you see where I have something wrong?

Thank you...

<!DOCTYPE html>

<html>

<head>

<title>Deaf Cruise 2018</title>

</head>

<body>

<div class="logo">Deaf Cruise 2018</div>

<a href="#" navitem=".mappa">Mappa</a>

<a href="#" navitem=".programma">Programma</a>

<a href="#" navitem=".hotel">Hotel</a>

<a href="#" navitem=".biglietti">Biglietti</a>

<a href="#" navitem=".contatti">Contatti</a>

</nav>

</div>

TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT

</div>

<p>PROVA HOME PAGE PROVA HOME PAGE PROVA HOME PAGE</p>

</section>

<p>PROVA INFO PROVA INFO PROVA INFO</p>

</section>

<h2>MAPPA</h2>

<p>PROVA MAPPA PROVA MAPPA PROVA MAPPA</p>

</section>

<h2>PROGRAMMA</h2>

<p>PROVA PROGRAMMA PROVA PROGRAMMA PROVA PROGRAMMA</p>

</section>

<h2>HOTEL</h2>

<p>PROVA HOTEL PROVA HOTEL PROVA HOTEL</p>

</section>

<h2>BIGLIETTI</h2>

<p>PROVA BIGLIETTI PROVA BIGLIETTI PROVA BIGLIETTI</p>

</section>

<h2>CONTATTI</h2>

<p>PROVA CONTATTI PROVA CONTATTI PROVA CONTATTI</p>

</section>

</body>

</html>

@charset "UTF-8";

body {

font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;

margin: 0px;

background-color:#FF0000;

}

* {

box-sizing: border-box;

}

.header {

background-color: #FF9900;

margin: 0px;

height: 50px;

width: 100%;

position: absolute;

}

.logo {

font-family: "Comic Sans MS", cursive;

font-size: 28px;

color: #FFFFFF;

margin: 0px;

float: left;

height: 50px;

width: 20%;

font-style: oblique;

border: solid 2px #000000;

}

.close_navitem {

font-size: 40px;

color: #FFFFFF;

display: none;

position: absolute;

z-index: 100;

right: 30px;

top: 20px;

}

.navigation {

display: flex;

border: solid 2px #000000;

width: 70%;

float: right;

text-align: center;

padding-top: 20px;

}

.navigation a {

font-size: 18px;

color: #FFFFFF;

text-decoration: none;

}

.home,

.info,

.mappa,

.programma,

.hotel,

.biglietti,

.contatti {

position:fixed;

height: 100%;

width: 100%;

z-index: 10;

right: -100%;

padding: 40px 100px;

}

.home {

background-color: #00FF00;

padding-top: 100px;

background-position: 30px;

}

.info {

background-color: #FF0000;

}

.mappa {

background-color: #FF6600;

}

.programma {

background-color: #FF00FF;

}

.hotel {

background-color: #3366FF;

}

.biglietti {

background-color: #990000;

}

.contatti {

background-color: #00FFFF;

}

.onepage {

font-family: "Courier New", Courier, monospace;

font-size: 24px;

padding-top: 50px;

}

section {

margin-top: 50px;

height: 1000px;

}

// JavaScript Document

$(document).ready(function(){

// MAIN NAVIGATION

$('.navigation a').css('cursor' , 'pointer').click(function(){

$('.close_navItem').show();

var navItem = $(this).attr('navItem');

$(navItem).css({'right' : '0', 'transition' : '1s'});

});

// CLOSE NAVITEM

$('.close_navItem').css('cursor' , 'pointer').click(function(){

$('.close').css({'right' : '-100%', 'transition' : '1.5s'});

});

thank you...

Report · Jan 26, 2018

Here is the new code. Explanation is below the code.

<!DOCTYPE html>

<html>

<head>

<title>Deaf Cruise 2018</title>

<style>

body {

font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;

margin: 0px;

background-color:#FF0000;

}

* {

box-sizing: border-box;

}

.header {

background-color: #FF9900;

margin: 0px;

height: 50px;

width: 100%;

position: absolute;

}

.logo {

font-family: "Comic Sans MS", cursive;

font-size: 28px;

color: #FFFFFF;

margin: 0px;

float: left;

height: 50px;

width: 20%;

font-style: oblique;

border: solid 2px #000000;

}

.navigation {

display: flex;

justify-content: flex-end;

border: solid 2px #000000;

width: 70%;

float: right;

text-align: center;

padding-top: 20px;

}

.navigation a {

font-size: 18px;

color: #FFFFFF;

text-decoration: none;

padding: 0 15px;

}

.onepage {

position: fixed;

height: 100vh;

width: 100wv;

font-family: "Courier New", Courier, monospace;

font-size: 24px;

}

.home,

.info,

.mappa,

.programma,

.hotel,

.biglietti,

.contatti {

position:fixed;

height: 100%;

width: 100%;

z-index: 10;

right: -100%;

padding: 40px 100px;

}

.home {

background-color: #00FF00;

padding-top: 100px;

background-position: 30px;

}

.info {

background-color: #FF0000;

}

.mappa {

background-color: #FF6600;

}

.programma {

background-color: #FF00FF;

}

.hotel {

background-color: #3366FF;

}

.biglietti {

background-color: #990000;

}

.contatti {

background-color: #00FFFF;

}

section {

margin-top: 50px;

height: 1000px;

}

</style>

</head>

$(document).ready(function(){

// MAIN NAVIGATION

$('.navigation a').css('cursor' , 'pointer').click(function(){

$('.close').css({'right' : '-100%', 'transition' : '1.5s'});

var navItem = $(this).attr('navItem');

$(navItem).css({'right' : '0', 'transition' : '1s'});

});

// CLOSE ALL PANELS

$('.logo').css('cursor' , 'pointer').click(function(){

$('.close').css({'right' : '-100%', 'transition' : '1.5s'});

});

</script>

<body>

<div class="logo">Deaf Cruise 2018</div>

<a href="#" navitem=".mappa">Mappa</a>

<a href="#" navitem=".programma">Programma</a>

<a href="#" navitem=".hotel">Hotel</a>

<a href="#" navitem=".biglietti">Biglietti</a>

<a href="#" navitem=".contatti">Contatti</a>

</nav>

</div>

TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT

</div>

<p>PROVA HOME PAGE PROVA HOME PAGE PROVA HOME PAGE</p>

</section>

<p>PROVA INFO PROVA INFO PROVA INFO</p>

</section>

<h2>MAPPA</h2>

<p>PROVA MAPPA PROVA MAPPA PROVA MAPPA</p>

</section>

<h2>PROGRAMMA</h2>

<p>PROVA PROGRAMMA PROVA PROGRAMMA PROVA PROGRAMMA</p>

</section>

<h2>HOTEL</h2>

<p>PROVA HOTEL PROVA HOTEL PROVA HOTEL</p>

</section>

<h2>BIGLIETTI</h2>

<p>PROVA BIGLIETTI PROVA BIGLIETTI PROVA BIGLIETTI</p>

</section>

<h2>CONTATTI</h2>

<p>PROVA CONTATTI PROVA CONTATTI PROVA CONTATTI</p>

</section>

</body>

</html>

EXPLANATION

The onepage <div> now wraps the <header></header> container.

Header code is here.

</header>

</div>

The .onepage css has been set to position: fixed; height: 100vh; and width: 100vw; Position fixed takes it out of the normal html workflow so the other panels can sit over the top of it. Without setting its position the .onepage panel just pushed the other panels down.

.onepage {

position: fixed;

height: 100vh;

width: 100wv;

font-family: "Courier New", Courier, monospace;

font-size: 24px;

}

As you are not using the 'close' navigation/panel X item and jquery the function and <div> has been removed and the panels now close by moving the line of jquery below, to the 'navigation a' jquery function:

$('.close').css({'right' : '-100%', 'transition' : '1.5s'});

All panels are closed when the logo is clicked on which is evoked by the below jquery:

// CLOSE ALL PANELS

$('.logo').css('cursor' , 'pointer').click(function(){

$('.close').css({'right' : '-100%', 'transition' : '1.5s'});

});

To set the menu items to the right the line justify-content: flex-end; has been added to the naviagtion css:

.navigation {

display: flex;

justify-content: flex-end;

border: solid 2px #000000;

width: 70%;

float: right;

text-align: center;

padding-top: 20px;

}

Report · Jan 26, 2018

Excellent explanation.

One thing is missing to set height of the <section> I can not, I have already written height: 1000px; then I wrote longer text and did not scroll down. It always stops on the screen. Why?

Then I forgot to ask you something for the transition effects where can I change? On JavaScript or CSS?

Then you can select one of the menus with different transition, example MAP comes from the right with transition and TICKETS comes from below with transition? So where do I have to write? On JavaScript or CSS?

Report · Jan 26, 2018

teodoro8590 wrote
Excellent explanation.
One thing is missing to set height of the <section> I can not, I have already written height: 1000px; then I wrote longer text and did not scroll down. It always stops on the screen. Why?

Try changing:

position: fixed; to position: absolute;

height: 100%; to min-height: 100%;

and add

top: 0;

Like this:

.home,

.info,

.mappa,

.programma,

.hotel,

.biglietti,

.contatti {

position: absolute;

min-height: 100%;

top: 0;

width: 100%;

z-index: 10;

right: -100%;

padding: 40px 100px;

}

Report · Jan 26, 2018

It is perfect and works well. But have is one problem thing, you can try with keyboard to go right and he is scroll, it's not nice. Can not you lock up?

How come you did not answer my other two questions of:

- Then I forgot to ask you something for the transition effects where can I change? On JavaScript or CSS?

- Then you can select one of the menus with different transition, example MAP comes from the right with transition and TICKETS comes from below with transition? So where do I have to write? On JavaScript or CSS?

Is it difficult to explain here or can not you explain it here? Or maybe you did not understand my two questions?

I really thank you for everything you did. 🙂

Report · Jan 26, 2018

teodoro8590 wrote
It is perfect and works well. But have is one problem thing, you can try with keyboard to go right and he is scroll, it's not nice. Can not you lock up?

Add the below to the 'body' css:

overflow-x: hidden;

teodoro8590 wrote
It is perfect and works well. But have is one problem thing, you can try with keyboard to go right and he is scroll, it's not nice. Can not you lock up?
How come you did not answer my other two questions of:

I did not answer because it becomes very complex, more than I could explain in the forum. If you want panels sliding from optional directions you would have to write css and jquery/javascript to position, transition and animate each panel, or group of panels.

Having said that I dont believe its a good idea anyway as users dont want to be confused with a lot of movement from several directions, its not a juggling circus act you are providing, its a way of accessing information in a user friendly way without causing a migraine

Report · Jan 27, 2018

osgood_
I did not answer because it becomes very complex, more than I could explain in the forum. If you want panels sliding from optional directions you would have to write css and jquery/javascript to position, transition and animate each panel, or group of panels.
Having said that I dont believe its a good idea anyway as users dont want to be confused with a lot of movement from several directions, its not a juggling circus act you are providing, its a way of accessing information in a user friendly way without causing a migraine

I understand, you're right. I only asked you to know where I can change. So you confirm that you need to change JSCRIPT, JQUERY and CSS, right?

osgood_ ha scritto
teodoro8590 wrote
It is perfect and works well. But have is one problem thing, you can try with keyboard to go right and he is scroll, it's not nice. Can not you lock up?
Add the below to the 'body' css:
overflow-x: hidden;

There's one problem because I added HIDDEN as you said and it works well. But there is a problem that I can not scroll down :-(.

Report · Jan 28, 2018

I assume you mean your initial page doesn't scroll down?

Change the 'onepage' css to as below:

.onepage {

position: absolute;

top: 0;

height: 100vh;

width: 100wv;

font-family: "Courier New", Courier, monospace;

font-size: 24px;

}

Also relocate the header <div> to be outside (above) the 'onepage' <div>

Then change the 'header' css to as below, otherwise when the panels scroll you will have no way of getting back to the original navigation without reloading the page.

.header {

background-color: #FF9900;

margin: 0px;

height: 50px;

width: 100%;

position: fixed;

z-index: 2000;

}

Unfortunately all your panels will be as long as the longest panel of information as that is what the browser sees and gets its min-depth from that. This will cause issues on pages that are short as the default color background will show when you scroll down, so you will have to change that.

You will need to amend the jQuery script like below, hiding the 'onepage' panel when a navigation item is clicked and adding the appropriate background panel color to the 'body' tag - (.home and .mappa are shown below).

$(document).ready(function(){

// MAIN NAVIGATION

$('.navigation a').css('cursor' , 'pointer').click(function(){

$('.onepage').hide();

$('.close').css({'right' : '-100%', 'transition' : '1.5s'});

var navItem = $(this).attr('navItem');

$(navItem).css({'right' : '0', 'transition' : '1s'});

if(navItem === ".home") {

$('body').css('background-color' , '#00FF00');

}

else if (navItem === ".mappa") {

$('body').css('background-color' , '#FF6600');
}

});

// CLOSE ALL PANELS

$('.logo').css('cursor' , 'pointer').click(function(){

$('.onepage').show();

$('body').css('background-color' , '#FF0000');

$('.close').css({'right' : '-100%', 'transition' : '1.5s'});

});

</script>

Report · Jan 29, 2018

osgood_ ha scritto
I assume you mean your initial page doesn't scroll down?

Yes....

osgood_ ha scritto
I assume you mean your initial page doesn't scroll down?
Change the 'onepage' css to as below:
.onepage {
position: absolute;
top: 0;
height: 100vh;
width: 100wv;
font-family: "Courier New", Courier, monospace;
font-size: 24px;
}
Also relocate the header <div> to be outside (above) the 'onepage' <div>
Then change the 'header' css to as below, otherwise when the panels scroll you will have no way of getting back to the original navigation without reloading the page.
.header {
background-color: #FF9900;
margin: 0px;
height: 50px;
width: 100%;
position: fixed;
z-index: 2000;
}

Doesn't change anything ... page doesn't scroll down 😞

osgood_ ha scritto
Unfortunately all your panels will be as long as the longest panel of information as that is what the browser sees and gets its min-depth from that. This will cause issues on pages that are short as the default color background will show when you scroll down, so you will have to change that.
You will need to amend the jQuery script like below, hiding the 'onepage' panel when a navigation item is clicked and adding the appropriate background panel color to the 'body' tag - (.home and .mappa are shown below).
<script>
$(document).ready(function(){
// MAIN NAVIGATION
$('.navigation a').css('cursor' , 'pointer').click(function(){
$('.onepage').hide();
$('.close').css({'right' : '-100%', 'transition' : '1.5s'});
var navItem = $(this).attr('navItem');
$(navItem).css({'right' : '0', 'transition' : '1s'});
if(navItem === ".home") {
$('body').css('background-color' , '#00FF00');
}
else if (navItem === ".mappa") {
$('body').css('background-color' , '#FF6600');
}

});
// CLOSE ALL PANELS
$('.logo').css('cursor' , 'pointer').click(function(){
$('.onepage').show();
$('body').css('background-color' , '#FF0000');
$('.close').css({'right' : '-100%', 'transition' : '1.5s'});
});
});
</script>

That topic I have to try later because I changed some things in CSS so I have to fix JQuery what you wrote then I'll let you know ok?

If in case the problem never persists then I send you the code here to make you understand better ok?

THANK YOU...

Report · Jan 29, 2018

teodoro8590 wrote
osgood_ ha scritto
I assume you mean your initial page doesn't scroll down?
Yes....

If it doesnt work then you have it set up wrong.........use the code below:

<!DOCTYPE html>

<html>

<head>

<title>Deaf Cruise 2018</title>

<style>

body {

font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;

margin: 0px;

overflow-x: hidden;

background-color: #FF0000;

}

* {

box-sizing: border-box;

}

.header {

background-color: #FF9900;

margin: 0px;

height: 50px;

width: 100%;

position: fixed;

z-index: 2000;

}

.logo {

font-family: "Comic Sans MS", cursive;

font-size: 28px;

color: #FFFFFF;

margin: 0px;

float: left;

height: 50px;

width: 20%;

font-style: oblique;

border: solid 2px #000000;

}

.navigation {

display: flex;

justify-content: flex-end;

border: solid 2px #000000;

width: 70%;

float: right;

text-align: center;

padding-top: 20px;

}

.navigation a {

font-size: 18px;

color: #FFFFFF;

text-decoration: none;

padding: 0 15px;

}

.onepage {

position: absolute;

top: 0;

height: 100vh;

width: 100wv;

font-family: "Courier New", Courier, monospace;

font-size: 24px;

}

.home,

.info,

.mappa,

.programma,

.hotel,

.biglietti,

.contatti {

position: absolute;

min-height: 100%;

top: 0;

width: 100%;

z-index: 10;

right: -100%;

padding: 40px 100px;

}

.home {

background-color: #00FF00;

padding-top: 100px;

background-position: 30px;

}

.info {

background-color: pink;

}

.mappa {

background-color: #FF6600;

}

.programma {

background-color: #FF00FF;

}

.hotel {

background-color: #3366FF;

}

.biglietti {

background-color: #990000;

}

.contatti {

background-color: #00FFFF;

}

</style>

</head>

$(document).ready(function(){

// MAIN NAVIGATION

$('.navigation a').css('cursor' , 'pointer').click(function(){

$('.onepage').hide();

$('.close').css({'right' : '-100%', 'transition' : '1.5s'});

var navItem = $(this).attr('navItem');

$(navItem).css({'right' : '0', 'transition' : '1s'});

if(navItem === ".mappa") {

$('body').css('background-color' , '#FF6600');

}

else if (navItem === ".home") {

$('body').css('background-color' , '#00FF00');

}

});

// CLOSE ALL PANELS

$('.logo').css('cursor' , 'pointer').click(function(){

$('.onepage').show();

$('body').css('background-color' , '#FF0000');

$('.close').css({'right' : '-100%', 'transition' : '1.5s'});

});

</script>

<body>

<div class="logo">Deaf Cruise 2018</div>

<a href="#" navitem=".mappa">Mappa</a>

<a href="#" navitem=".programma">Programma</a>

<a href="#" navitem=".hotel">Hotel</a>

<a href="#" navitem=".biglietti">Biglietti</a>

<a href="#" navitem=".contatti">Contatti</a>

</nav>

</div>

</div>

<p>PROVA HOME PAGE PROVA HOME PAGE PROVA HOME PAGE</p>

</section>

<p>PROVA INFO PROVA INFO PROVA INFO</p>

</section>

<h2>MAPPA</h2>

<p>PROVA MAPPA PROVA MAPPA PROVA MAPPA</p>

</section>

<h2>PROGRAMMA</h2>

<p>PROVA PROGRAMMA PROVA PROGRAMMA PROVA PROGRAMMA</p>

</section>

<h2>HOTEL</h2>

<p>PROVA HOTEL PROVA HOTEL PROVA HOTEL</p>

</section>

<h2>BIGLIETTI</h2>

<p>PROVA BIGLIETTI PROVA BIGLIETTI PROVA BIGLIETTI</p>

</section>

<h2>CONTATTI</h2>

<p>PROVA CONTATTI PROVA CONTATTI PROVA CONTATTI</p>

</section>

</body>

</html>

Report · Jan 29, 2018

osgood_ ha scritto
I assume you mean your initial page doesn't scroll down?
Change the 'onepage' css to as below:
.onepage {
position: absolute;
top: 0;
height: 100vh;
width: 100wv;
font-family: "Courier New", Courier, monospace;
font-size: 24px;
}
Also relocate the header <div> to be outside (above) the 'onepage' <div>
Then change the 'header' css to as below, otherwise when the panels scroll you will have no way of getting back to the original navigation without reloading the page.
.header {
background-color: #FF9900;
margin: 0px;
height: 50px;
width: 100%;
position: fixed;
z-index: 2000;
}
Unfortunately all your panels will be as long as the longest panel of information as that is what the browser sees and gets its min-depth from that. This will cause issues on pages that are short as the default color background will show when you scroll down, so you will have to change that.

Here I am, I solved the problems. Because I have not seen well for overflow-x: hidden; because I had set without -x ... Excuse me so much.

osgood_ ha scritto
You will need to amend the jQuery script like below, hiding the 'onepage' panel when a navigation item is clicked and adding the appropriate background panel color to the 'body' tag - (.home and .mappa are shown below).
<script>
$(document).ready(function(){
// MAIN NAVIGATION
$('.navigation a').css('cursor' , 'pointer').click(function(){
$('.onepage').hide();
$('.close').css({'right' : '-100%', 'transition' : '1.5s'});
var navItem = $(this).attr('navItem');
$(navItem).css({'right' : '0', 'transition' : '1s'});
if(navItem === ".home") {
$('body').css('background-color' , '#00FF00');
}
else if (navItem === ".mappa") {
$('body').css('background-color' , '#FF6600');
}

});
// CLOSE ALL PANELS
$('.logo').css('cursor' , 'pointer').click(function(){
$('.onepage').show();
$('body').css('background-color' , '#FF0000');
$('.close').css({'right' : '-100%', 'transition' : '1.5s'});
});
});
</script>

Then for JQuery concerns you've changed, it's perfect. Then I changed every menu with colors so you do not see for the initial page, perfect. A question if you can start the home page with green color? I would like to open immediately on HOME with color of green? Because I tried to open on web and page appears the color of white. I wanted directly on HOME with color of green, is it possible?

Report · Jan 30, 2018

teodoro8590 wrote
I would like to open immediately on HOME with color of green? Because I tried to open on web and page appears the color of white. I wanted directly on HOME with color of green, is it possible?

You can start on 'Home':

<!DOCTYPE html>

<html>

<head>

<title>Deaf Cruise 2018</title>

<style>

body {

font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;

margin: 0px;

overflow-x: hidden;

background-color: green;

}

* {

box-sizing: border-box;

}

.header {

background-color: #FF9900;

margin: 0px;

height: 50px;

width: 100%;

position: fixed;

z-index: 2000;

}

.logo {

font-family: "Comic Sans MS", cursive;

font-size: 28px;

color: #FFFFFF;

margin: 0px;

float: left;

height: 50px;

width: 20%;

font-style: oblique;

border: solid 2px #000000;

}

.navigation {

display: flex;

justify-content: flex-end;

border: solid 2px #000000;

width: 70%;

float: right;

text-align: center;

padding-top: 20px;

}

.navigation a {

font-size: 18px;

color: #FFFFFF;

text-decoration: none;

padding: 0 15px;

}

.home {

position: absolute;

top: 0;

height: 100vh;

width: 100%;

padding: 40px 100px;

}

.info,

.mappa,

.programma,

.hotel,

.biglietti,

.contatti {

position: absolute;

min-height: 100%;

top: 0;

width: 100%;

z-index: 10;

right: -100%;

padding: 40px 100px;

}

.home {

background-color: green;

}

.info {

background-color: pink;

}

.mappa {

background-color: #FF6600;

}

.programma {

background-color: #FF00FF;

}

.hotel {

background-color: #3366FF;

}

.biglietti {

background-color: #990000;

}

.contatti {

background-color: #00FFFF;

}

</style>

</head>

$(document).ready(function(){

// MAIN NAVIGATION

$('.navigation a').css('cursor' , 'pointer').click(function(){

$('.close').css({'right' : '-100%', 'transition' : '1.5s'});

var navItem = $(this).attr('navItem');

if(navItem === ".home") {

$('.home').show();

$('body').css('background-color' , 'green');

}

else {

$('.home').hide();

$(navItem).css({'right' : '0', 'transition' : '1s'});

if(navItem === ".info") {

$('body').css('background-color' , '#ffc0cb');

}

else if(navItem === ".mappa") {

$('body').css('background-color' , '#FF6600');

}

else if(navItem === ".programma") {

$('body').css('background-color' , '#ff00ff');

}

else if(navItem === ".hotel") {

$('body').css('background-color' , '#3366ff');

}

else if(navItem === ".biglietti") {

$('body').css('background-color' , '#990000');

}

else if(navItem === ".contatti") {

$('body').css('background-color' , '#00FFFF');

}

});

// CLOSE ALL PANELS

$('.logo').css('cursor' , 'pointer').click(function(){

$('body').css('background-color' , 'green');

$('.home').show();

$('.close').css({'right' : '-100%', 'transition' : '1.5s'});

});

</script>

<body>

<div class="logo">Deaf Cruise 2018</div>

<a href="#" navitem=".mappa">Mappa</a>

<a href="#" navitem=".programma">Programma</a>

<a href="#" navitem=".hotel">Hotel</a>

<a href="#" navitem=".biglietti">Biglietti</a>

<a href="#" navitem=".contatti">Contatti</a>

</nav>

</div>

</div>

</section>

<h2>MAPPA</h2>

<p>PROVA MAPPA PROVA MAPPA PROVA MAPPA</p>

</section>

<h2>PROGRAMMA</h2>

<p>PROVA PROGRAMMA PROVA PROGRAMMA PROVA PROGRAMMA</p>

</section>

<h2>HOTEL</h2>

<p>PROVA HOTEL PROVA HOTEL PROVA HOTEL</p>

</section>

<h2>BIGLIETTI</h2>

<p>PROVA BIGLIETTI PROVA BIGLIETTI PROVA BIGLIETTI</p>

</section>

<h2>CONTATTI</h2>

<p>PROVA CONTATTI PROVA CONTATTI PROVA CONTATTI</p>

</section>

</body>

</html>

Report · Jan 30, 2018

osgood_ ha scritto
teodoro8590   wrote
I would like to open immediately on HOME with color of green? Because I tried to open on web and page appears the color of white. I wanted directly on HOME with color of green, is it possible?
You can start on 'Home':
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Deaf Cruise 2018</title>
<style>
body {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
margin: 0px;
overflow-x: hidden;
background-color: green;
}
* {
box-sizing: border-box;
}
.header {
background-color: #FF9900;
margin: 0px;
height: 50px;
width: 100%;
position: fixed;
z-index: 2000;
}
.logo {
font-family: "Comic Sans MS", cursive;
font-size: 28px;
color: #FFFFFF;
margin: 0px;
float: left;
height: 50px;
width: 20%;
font-style: oblique;
border: solid 2px #000000;
}
.navigation {
display: flex;
justify-content: flex-end;
border: solid 2px #000000;
width: 70%;
float: right;
text-align: center;
padding-top: 20px;
}
.navigation a {
font-size: 18px;
color: #FFFFFF;
text-decoration: none;
padding: 0 15px;
}
.home {
position: absolute;
top: 0;
height: 100vh;
width: 100%;
padding: 40px 100px;
}
.info,
.mappa,
.programma,
.hotel,
.biglietti,
.contatti {
position: absolute;
min-height: 100%;
top: 0;
width: 100%;
z-index: 10;
right: -100%;
padding: 40px 100px;
}
.home {
background-color: green;
}
.info {
background-color: pink;
}
.mappa {
background-color: #FF6600;
}
.programma {
background-color: #FF00FF;
}
.hotel {
background-color: #3366FF;
}
.biglietti {
background-color: #990000;
}
.contatti {
background-color: #00FFFF;
}
</style>
</head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
// MAIN NAVIGATION
$('.navigation a').css('cursor' , 'pointer').click(function(){
$('.close').css({'right' : '-100%', 'transition' : '1.5s'});
var navItem = $(this).attr('navItem');
if(navItem === ".home") {
$('.home').show();
$('body').css('background-color' , 'green');
}
else {
$('.home').hide();
$(navItem).css({'right' : '0', 'transition' : '1s'});
if(navItem === ".info") {
$('body').css('background-color' , '#ffc0cb');
}
else if(navItem === ".mappa") {
$('body').css('background-color' , '#FF6600');
}
else if(navItem === ".programma") {
$('body').css('background-color' , '#ff00ff');
}
else if(navItem === ".hotel") {
$('body').css('background-color' , '#3366ff');
}
else if(navItem === ".biglietti") {
$('body').css('background-color' , '#990000');
}
else if(navItem === ".contatti") {
$('body').css('background-color' , '#00FFFF');
}
}
});
// CLOSE ALL PANELS
$('.logo').css('cursor' , 'pointer').click(function(){
$('body').css('background-color' , 'green');
$('.home').show();
$('.close').css({'right' : '-100%', 'transition' : '1.5s'});
});
});
</script>
<body>
<div class="header">
<div class="logo">Deaf Cruise 2018</div>
<nav class="navigation">
<a href="#" navitem=".home">Home</a>
<a href="#" navitem=".info">Info</a>
<a href="#" navitem=".mappa">Mappa</a>
<a href="#" navitem=".programma">Programma</a>
<a href="#" navitem=".hotel">Hotel</a>
<a href="#" navitem=".biglietti">Biglietti</a>
<a href="#" navitem=".contatti">Contatti</a>
</nav>
</div>

<div class="home">
<h2>HOME</h2>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
</div>

<section class="info close">
<h2>INFO</h2>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
</section>

<section class="mappa close">
<h2>MAPPA</h2>
    <p>PROVA MAPPA PROVA MAPPA PROVA MAPPA</p>
</section>
<section class="programma close">
<h2>PROGRAMMA</h2>
    <p>PROVA PROGRAMMA PROVA PROGRAMMA PROVA PROGRAMMA</p>
</section>
<section class="hotel close">
<h2>HOTEL</h2>
    <p>PROVA HOTEL PROVA HOTEL PROVA HOTEL</p>
</section>
<section class="biglietti close">
<h2>BIGLIETTI</h2>
    <p>PROVA BIGLIETTI PROVA BIGLIETTI PROVA BIGLIETTI</p>
</section>
<section class="contatti close">
<h2>CONTATTI</h2>
    <p>PROVA CONTATTI PROVA CONTATTI PROVA CONTATTI</p>
</section>
</body>
</html>

Ok thanks, as soon as I can and I have to try. Anyway I want to ask a simple question about setting up on tablets and smartphones, is it enough just on CSS? Or should I also do Jquery?

Report · Feb 04, 2018

osgood_ ha scritto
teodoro8590   wrote
I would like to open immediately on HOME with color of green? Because I tried to open on web and page appears the color of white. I wanted directly on HOME with color of green, is it possible?
You can start on 'Home':
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Deaf Cruise 2018</title>
<style>
body {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
margin: 0px;
overflow-x: hidden;
background-color: green;
}
* {
box-sizing: border-box;
}
.header {
background-color: #FF9900;
margin: 0px;
height: 50px;
width: 100%;
position: fixed;
z-index: 2000;
}
.logo {
font-family: "Comic Sans MS", cursive;
font-size: 28px;
color: #FFFFFF;
margin: 0px;
float: left;
height: 50px;
width: 20%;
font-style: oblique;
border: solid 2px #000000;
}
.navigation {
display: flex;
justify-content: flex-end;
border: solid 2px #000000;
width: 70%;
float: right;
text-align: center;
padding-top: 20px;
}
.navigation a {
font-size: 18px;
color: #FFFFFF;
text-decoration: none;
padding: 0 15px;
}
.home {
position: absolute;
top: 0;
height: 100vh;
width: 100%;
padding: 40px 100px;
}
.info,
.mappa,
.programma,
.hotel,
.biglietti,
.contatti {
position: absolute;
min-height: 100%;
top: 0;
width: 100%;
z-index: 10;
right: -100%;
padding: 40px 100px;
}
.home {
background-color: green;
}
.info {
background-color: pink;
}
.mappa {
background-color: #FF6600;
}
.programma {
background-color: #FF00FF;
}
.hotel {
background-color: #3366FF;
}
.biglietti {
background-color: #990000;
}
.contatti {
background-color: #00FFFF;
}
</style>
</head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
// MAIN NAVIGATION
$('.navigation a').css('cursor' , 'pointer').click(function(){
$('.close').css({'right' : '-100%', 'transition' : '1.5s'});
var navItem = $(this).attr('navItem');
if(navItem === ".home") {
$('.home').show();
$('body').css('background-color' , 'green');
}
else {
$('.home').hide();
$(navItem).css({'right' : '0', 'transition' : '1s'});
if(navItem === ".info") {
$('body').css('background-color' , '#ffc0cb');
}
else if(navItem === ".mappa") {
$('body').css('background-color' , '#FF6600');
}
else if(navItem === ".programma") {
$('body').css('background-color' , '#ff00ff');
}
else if(navItem === ".hotel") {
$('body').css('background-color' , '#3366ff');
}
else if(navItem === ".biglietti") {
$('body').css('background-color' , '#990000');
}
else if(navItem === ".contatti") {
$('body').css('background-color' , '#00FFFF');
}
}
});
// CLOSE ALL PANELS
$('.logo').css('cursor' , 'pointer').click(function(){
$('body').css('background-color' , 'green');
$('.home').show();
$('.close').css({'right' : '-100%', 'transition' : '1.5s'});
});
});
</script>
<body>
<div class="header">
<div class="logo">Deaf Cruise 2018</div>
<nav class="navigation">
<a href="#" navitem=".home">Home</a>
<a href="#" navitem=".info">Info</a>
<a href="#" navitem=".mappa">Mappa</a>
<a href="#" navitem=".programma">Programma</a>
<a href="#" navitem=".hotel">Hotel</a>
<a href="#" navitem=".biglietti">Biglietti</a>
<a href="#" navitem=".contatti">Contatti</a>
</nav>
</div>

<div class="home">
<h2>HOME</h2>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
</div>

<section class="info close">
<h2>INFO</h2>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
</section>

<section class="mappa close">
<h2>MAPPA</h2>
    <p>PROVA MAPPA PROVA MAPPA PROVA MAPPA</p>
</section>
<section class="programma close">
<h2>PROGRAMMA</h2>
    <p>PROVA PROGRAMMA PROVA PROGRAMMA PROVA PROGRAMMA</p>
</section>
<section class="hotel close">
<h2>HOTEL</h2>
    <p>PROVA HOTEL PROVA HOTEL PROVA HOTEL</p>
</section>
<section class="biglietti close">
<h2>BIGLIETTI</h2>
    <p>PROVA BIGLIETTI PROVA BIGLIETTI PROVA BIGLIETTI</p>
</section>
<section class="contatti close">
<h2>CONTATTI</h2>
    <p>PROVA CONTATTI PROVA CONTATTI PROVA CONTATTI</p>
</section>
</body>
</html>

Hi, here I am. To start the home page as I wanted, it works perfectly what you did. It's great. However, when it is ready and I put link here. :-). I really thank you. 🙂

Report · Feb 05, 2018

teodoro8590 wrote
Hi, here I am. To start the home page as I wanted, it works perfectly what you did. It's great. However, when it is ready and I put link here. :-). I really thank you. 🙂

No problem. If you need any more help please start another thread. This one is getting a bit long given the amount of code being posted. I think we have arrived at a situation where your key questions have been answered.

Report · Feb 05, 2018

osgood_ ha scritto

No problem. If you need any more help please start another thread. This one is getting a bit long given the amount of code being posted. I think we have arrived at a situation where your key questions have been answered.

Yes, you're right, however I think the subject is finished. If I need another topic and make a new post ok?

Thank you...

Report · Jan 30, 2018

I want to ask a simple question about setting up on tablets and smartphones, is it enough just on CSS? Or should I also do Jquery?

Adobe Community

Slide of pages

1 Correct answer