Pippo(2) by @PippoBest321 - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

formmethodDefinisce il metodo di invio dei dati oltre a method
controlsL'attributo controls si usa per visualizzare gli strumenti per la riproduzione dei file audio e video
<object>Incorpora risorse varie nella pagina web.
<select>Usato per creare un menu a tendina.
<thead>Definisce un gruppo di intestazione all'interno di una tabella.
forSpecifica a quale id è associato l'elemento in cui è dichiarato.

Users

Log in to search for users

Explore

Find inspiration

Italiano-Cinema [Container]

pag 4 progetto inf

Compito di merda numero 1

esercizio 1 esame

Prep. Esame pt.4

Campagna in primavera

esercitazione n.1

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html>
  <head>
    <title>Titolo Pagina</title>
    <style></style>
    <script></script>
  </head>
  <body>
     <nav>
        <div id="logo"><img src="https://www.aboutumbriamagazine.it/wp-content/uploads/2017/03/comune-castiglione-del-lago-home-300x164.png"width=40% ></div>

        <label for="drop" class="toggle">Menu</label>
        <input type="checkbox" id="drop" />
            <ul class="menu">
                <li><a href="#">Home</a></li>
                <li>
                    <!-- First Tier Drop Down -->
                    <label for="drop-1" class="toggle">Servizi Online</label>
                    <a href="#">Servizi Online</a>
                    <input type="checkbox" id="drop-1"/>
                    <ul>
                        <li><a href="#">Themes and stuff</a></li>
                        <li><a href="#">Plugins</a></li>
                        <li><a href="#">Tutorials</a></li>
                    </ul> 

                </li>
                <li>

                <!-- First Tier Drop Down -->
                <label for="drop-2" class="toggle">Informazioni</label>
                <a href="#">Informazioni</a>
                <input type="checkbox" id="drop-2"/>
                <ul>
                    <li><a href="#">Resources</a></li>
                    <li><a href="#">Links</a></li>
                    <li>
                       
                    <!-- Second Tier Drop Down -->        
                    <label for="drop-3" class="toggle">Tutorials +</label>
                    <a href="#">Tutorials</a>         
                    <input type="checkbox" id="drop-3"/>

                    <ul>
                        <li><a href="#">HTML/CSS</a></li>
                        <li><a href="#">jQuery</a></li>
                        <li><a href="#">Other</a></li>
                    </ul>
                    </li>
                </ul>
                </li>
                <li><a href="#">Turismo</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
  </body>
</html>

*{ }/* CSS Document */

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Bree+Serif);

body {
  background: white;
  font-size:22px;
  line-height: 32px;
  color: black;
  margin: 0;
  padding: 0;
  word-wrap:break-word !important;
  font-family: 'Open Sans', sans-serif;
  }

h1 {
  font-size: 60px;
  text-align: center;
  color: #FFF;
} 

h3 {
  font-size: 30px;
  line-height: 34px;
  text-align: center;
  color: #FFF;
}

h3 a {
  color: #FFF;
}

a {
  color: #FFF;
}

h1 {
  margin-top: 100px;
  text-align:center;
  font-size:60px;
  line-height: 70px;
  font-family: 'Bree Serif', 'serif';
  }

#container {
  margin: 0 auto;
  max-width: 890px;
}

p {
  text-align: center;
}

.toggle,
[id^=drop] {
  display: none;
}

/* Giving a background-color to the nav container. */
nav { 
  margin:0;
  padding: 0;
  background-color: #1a5698;
}

#logo {
  display: block;
  padding: 0 30px;
  float: left;
  font-size:20px;
  line-height: 60px;
}

/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
  content:"";
  display:table;
  clear:both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
nav ul {
  float: right;
  padding:0;
  margin:0;
  list-style: none;
  position: relative;
  }
  
/* Positioning the navigation items inline */
nav ul li {
  margin: 0px;
  display:inline-block;
  float: left;
  background-color: #1a5698;
  }

/* Styling the links */
nav a {
  display:block;
  padding:14px 20px;  
  color:#FFF;
  font-size:17px;
  text-decoration:none;
}


nav ul li ul li:hover { background: #000000; }

/* Background color change on Hover */
nav a:hover { 
  background-color: #000000; 
}

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {
  display: none;
  position: absolute; 
  /* has to be the same number as the "line-height" of "nav a" */
  top: 60px; 
}
  
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
  display:inherit;
}
  
/* Fisrt Tier Dropdown */
nav ul ul li {
  width:170px;
  float:none;
  display:list-item;
  position: relative;
}

/* Second, Third and more Tiers 
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/
nav ul ul ul li {
  position: relative;
  top:-60px;
  /* has to be the same number as the "width" of "nav ul ul li" */ 
  left:170px; 
}

  
/* Change ' +' in order to change the Dropdown symbol */
li > a:after { content:  ' +'; }
li > a:only-child:after { content: ''; }


/* Media Queries
--------------------------------------------- */

@media all and (max-width : 768px) {

  #logo {
    display: block;
    padding: 0;
    width: 100%;
    text-align: center;
    float: none;
  }

  nav {
    margin: 0;
  }

  /* Hide the navigation menu by default */
  /* Also hide the  */
  .toggle + a,
  .menu {
    display: none;
  }

  /* Stylinf the toggle lable */
  .toggle {
    display: block;
    background-color: #1a5698;
    padding:14px 20px;  
    color:#FFF;
    font-size:17px;
    text-decoration:none;
    border:none;
  }

  .toggle:hover {
    background-color: #000000;
  }

  /* Display Dropdown when clicked on Parent Lable */
  [id^=drop]:checked + ul {
    display: block;
  }

  /* Change menu item's width to 100% */
  nav ul li {
    display: block;
    width: 100%;
    }

  nav ul ul .toggle,
  nav ul ul a {
    padding: 0 40px;
  }

  nav ul ul ul a {
    padding: 0 80px;
  }

  nav a:hover,
  nav ul ul ul a {
    background-color: #000000;
  }
  
  nav ul li ul li .toggle,
  nav ul ul a,
  nav ul ul ul a{
    padding:14px 20px;  
    color:#FFF;
    font-size:17px; 
  }
  
  
  nav ul li ul li .toggle,
  nav ul ul a {
    background-color: #212121; 
  }

  /* Hide Dropdowns by Default */
  nav ul ul {
    float: none;
    position:static;
    color: #ffffff;
    /* has to be the same number as the "line-height" of "nav a" */
  }
    
  /* Hide menus on hover */
  nav ul ul li:hover > ul,
  nav ul li:hover > ul {
    display: none;
  }
    
  /* Fisrt Tier Dropdown */
  nav ul ul li {
    display: block;
    width: 100%;
  }

  nav ul ul ul li {
    position: static;
    /* has to be the same number as the "width" of "nav ul ul li" */ 

  }