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