Highlighted

Slide of pages

Community Beginner ,
Jan 25, 2018

Copy link to clipboard

Copied

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/

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>

<!-- end header -->

<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>

<!-- end home -->

<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>

<!-- end info -->

<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>

Views

687

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Slide of pages

Community Beginner ,
Jan 25, 2018

Copy link to clipboard

Copied

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/

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>

<!-- end header -->

<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>

<!-- end home -->

<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>

<!-- end info -->

<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>

Views

688

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 25, 2018 0
Adobe Community Professional ,
Jan 25, 2018

Copy link to clipboard

Copied

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.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 25, 2018 1
Community Beginner ,
Jan 25, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 25, 2018 0
LEGEND ,
Jan 25, 2018

Copy link to clipboard

Copied

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>

<meta charset="UTF-8">

<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>

<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_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>

<div class="close_navItem">&times;</div>

<nav class="navigation">

<a href="#" navItem=".home">Home</a>

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

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

</nav>

<!-- end navigation -->

<section class="home close">

<h2>Home</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>

<!--  end home -->

<section class="profile close">

<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>

<!--  end profile -->

<section class="friends close">

<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>

<!--  end friends -->

</body>

</html>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 25, 2018 1
Community Beginner ,
Jan 25, 2018

Copy link to clipboard

Copied

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 ...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 25, 2018 0
Community Beginner ,
Jan 25, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 25, 2018 0
Adobe Community Professional ,
Jan 25, 2018

Copy link to clipboard

Copied

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

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 25, 2018 1
Community Beginner ,
Jan 25, 2018

Copy link to clipboard

Copied

Thank You!!!!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 25, 2018 0
Community Beginner ,
Jan 25, 2018

Copy link to clipboard

Copied

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>

<meta charset="UTF-8">

<title>Deaf Cruise 2018</title>

<link href="css/style.css" rel="stylesheet" type="text/css">

</head>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<script type="text/javascript" title="Menu" src="js/main.js"></script>

<body>

<div class="header">

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

  <div class="close_navitem"></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="onepage">

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>

<section class="home close">

<h2>HOME</h2>

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

</section>

<section class="info close">

<h2>INFO</h2>

    <p>PROVA INFO PROVA INFO PROVA 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>

@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...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 25, 2018 0
LEGEND ,
Jan 26, 2018

Copy link to clipboard

Copied

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

<!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;

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>

<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');

$(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="onepage">

<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>

<!-- end header -->

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>

<!-- end onepage -->

<section class="home close">

<h2>HOME</h2>

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

</section>

<section class="info close">

<h2>INFO</h2>

    <p>PROVA INFO PROVA INFO PROVA 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>

EXPLANATION

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

<div class="onepage">

<header>

Header code is here.

</header>

</div>

<!-- end onepage -->

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;

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 26, 2018 1
Community Beginner ,
Jan 26, 2018

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 26, 2018 0
LEGEND ,
Jan 26, 2018

Copy link to clipboard

Copied

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;

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 26, 2018 1
Community Beginner ,
Jan 26, 2018

Copy link to clipboard

Copied

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. 🙂

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 26, 2018 0
LEGEND ,
Jan 26, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 26, 2018 0
Community Beginner ,
Jan 27, 2018

Copy link to clipboard

Copied

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 :-(.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 27, 2018 0
LEGEND ,
Jan 28, 2018

Copy link to clipboard

Copied

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).

<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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 28, 2018 0
Community Beginner ,
Jan 29, 2018

Copy link to clipboard

Copied

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...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 29, 2018 0
LEGEND ,
Jan 29, 2018

Copy link to clipboard

Copied

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>

<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: #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>

<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(){

$('.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="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>

<!-- end header -->

<div class="onepage">

<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

</div>

<!-- end onepage -->

<section class="home close">

<h2>HOME</h2>

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

</section>

<section class="info close">

<h2>INFO</h2>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<p>PROVA INFO PROVA INFO PROVA 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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 29, 2018 1
Community Beginner ,
Jan 29, 2018

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 29, 2018 0
LEGEND ,
Jan 30, 2018

Copy link to clipboard

Copied

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>

<!-- end header -->

<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>

<!-- end home -->

<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>

<!-- end info -->

<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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 30, 2018 0
Community Beginner ,
Jan 30, 2018

Copy link to clipboard

Copied

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>

<!-- end header -->

<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>

<!-- end home -->

<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>

<!-- end info -->

<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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 30, 2018 0
Community Beginner ,
Feb 04, 2018

Copy link to clipboard

Copied

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>

<!-- end header -->

<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>

<!-- end home -->

<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>

<!-- end info -->

<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. 🙂

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 04, 2018 0
LEGEND ,
Feb 05, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 05, 2018 0
Community Beginner ,
Feb 05, 2018

Copy link to clipboard

Copied

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...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 05, 2018 0
Community Beginner ,
Jan 30, 2018

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 30, 2018 0