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

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

References

<label>Mostrare un testo di etichetta per un elemento di input.
valueValore alfanumerico o booleano contenuto in un elemento
<html>Tag primario di un documento HTML
<meta>Definisce i meta dati di una pagina web.
<pre>Indica una parte di testo preformattato
<h2>Titolo di intestazione di secondo livello

Users

Log in to search for users

Explore

Find inspiration

Tabella base (lezione 10)

velocità scrittura

esempio di captcha

Attività della settimana

Lezione 3/11 pt.2

Corrispondenza tra stringhe

block zoom test

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 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%;
  }

}