Comunicare sul Web [Template CSS] by @marco_ballarin - Codewith.it

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

Referenze

_parentApre collegamenti ipertestuali nell'elemento genitore
actionDetermina la pagina di destinazione a cui verranno inviati i dati di un form HTML
hreflangConsente di dichiarare la lingua del documento collegato.
crossoriginGestisce richieste tra documenti provenienti da origini differenti.
<!doctype>Dichiara la versione del linguaggio di sviluppo della pagina
<canvas>Tag per disegnare grafica dinamica su pagine web.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

TravelEscape - Esplora il Mondo co

DEMO: Hi-Lo Game

esercitazione 1

Esercitazione n. 3

Heads Or Tails Random Tally 2

La storia dell\\\\

Gesù nostro signore(2)

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="author" content="Marco Ballarin">
  <meta name="description" content="Simple HTML5 Page layout template with header, footer, sidebar etc.">
  <meta name="keywords" content="HTML5, Layout, Template">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive HTML5 Page Layout Template</title>
</head>

<body>
  <header>
    <div id="logo"><img src="https://html5-templates.com/logo.png">HTML5 Layout</div>
    <nav>
      <ul>
        <li><a href="/">Home</a>
        <li><a href="https://html-css-js.com/">HTML</a>
        <li><a href="https://html-css-js.com/css/code/">CSS</a>
        <li><a href="https://htmlcheatsheet.com/js/">JS</a>
      </ul>
    </nav>
  </header>
  <section>
    <strong>Demonstration of a simple page layout using HTML5 tags: header, nav, section, main, article, aside, footer, address.</strong>
  </section>
  <section id="pageContent">
    <main role="main">
      <article>
        <h2>Stet facilis ius te</h2>
        <p>Lorem ipsum dolor sit amet, nonumes voluptatum mel ea, cu case ceteros cum. Novum commodo malorum vix ut.
          Dolores consequuntur in ius, sale electram dissentiunt quo te. Cu duo omnes invidunt, eos eu mucius fabellas.
          Stet facilis ius te, quando voluptatibus eos in. Ad vix mundi alterum, integre urbanitas intellegam vix in.
        </p>
      </article>
      <article>
        <h2>Illud mollis moderatius</h2>
        <p>Eum facete intellegat ei, ut mazim melius usu. Has elit simul primis ne, regione minimum id cum. Sea deleniti
          dissentiet ea. Illud mollis moderatius ut per, at qui ubique populo. Eum ad cibo legimus, vim ei quidam
          fastidii.</p>
      </article>
      <article>
        <h2>Ex ignota epicurei quo</h2>
        <p>Quo debet vivendo ex. Qui ut admodum senserit partiendo. Id adipiscing disputando eam, sea id magna pertinax
          concludaturque. Ex ignota epicurei quo, his ex doctus delenit fabellas, erat timeam cotidieque sit in. Vel eu
          soleat voluptatibus, cum cu exerci mediocritatem. Malis legere at per, has brute putant animal et, in consul
          utamur usu.</p>
      </article>
      <article id="last">
        <h2>His at autem inani volutpat</h2>
        <p>Te has amet modo perfecto, te eum mucius conclusionemque, mel te erat deterruisset. Duo ceteros phaedrum id,
          ornatus postulant in sea. His at autem inani volutpat. Tollit possit in pri, platonem persecuti ad vix, vel
          nisl albucius gloriatur no.</p>
      </article>
    </main>
    <aside>
      <div>Sidebar 1</div>
      <div>Sidebar 2</div>
      <div>Sidebar 3</div>
    </aside>
  </section>
  <footer>
    <p>&copy; You can copy, edit and publish this template but please leave a link to our website | <a
        href="https://html5-templates.com/" target="_blank" rel="nofollow">HTML5 Templates</a></p>
    <address>
      Contact: <a href="mailto:me@example.com">Mail me</a>
    </address>
  </footer>

</body>

</html>

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr, address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
  font-family: arial;
}

h1 {
  font-size: 25px;
}

h2 {
  font-size: 21px;
}

h3 {
  font-size: 18px;
}

h4 {
  font-size: 16px;
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
  display: block;
}

nav ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,blockquote:after,q:before,q:after {
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title],dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

input,select {
  vertical-align: middle;
}

body,
html {
  background-color: #FFF;
}

header {
  background: #AEC6CF;
  padding: 20px 30px;
  max-width: 940px;
  margin: auto;
}

nav {
  display: inline-block;
}

nav ul li a {
  background: #EEE;
  padding: 2px 10px;
  font-size: 20px;
  text-decoration: none;
  font-weight: bold;
  color: #444;
  border-radius: 10px;
}

nav ul li a:hover {
  background: #FFF;
}

nav ul li {
  display: inline-block;
  margin: 10px;
}

nav ul {
  list-style: none;
}

#pageContent {
  max-width: 1000px;
  margin: auto;
  border: none;
}

main {
  float: left;
  width: 60%;
}

aside {
  float: right;
  width: 30%;
}

article {
  border-bottom: 2px dotted #999;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

#last {
  border-bottom: none;
  padding-bottom: 0px;
  margin-bottom: 20px;
}

article h2 {
  font-weight: normal;
  margin-bottom: 12px;
}

footer {
  background: #AEC6CF;
  max-width: 1000px;
  margin: auto;
  clear: both;
  text-align: right;
}

footer p {
  padding: 20px;
}

address {
  padding: 10px 20px 30px 10px;
}

aside>div {
  margin: 10px auto;
  background: #AEC6CF;
  min-height: 100px;
}

#logo {
  display: inline-block;
  vertical-align: middle;
  font-size: 30px;
  margin-right: 75px;
  color: #FFF;
}

#logo img {
  width: 50px;
  vertical-align: middle;
  margin-right: 10px;
}

body>section {
  max-width: 1000px;
  margin: auto;
  padding: 30px 0px;
  border-bottom: 1px solid #999;
  color: #333;
}

@media screen and (max-width: 1000px) {
  body>section {
    padding: 30px 20px;
  }
}

@media screen and (max-width: 600px) {
  main {
    float: none;
    width: 100%;
  }

  aside {
    float: none;
    width: 100%;
  }

}