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

<textarea>Area di testo libero espandibile per form HTML
<html>Tag primario di un documento HTML
Inserisce un commento nel codice
targetDetermina il comportamento di un collegamento ipertestuale alla sua apertura
<!doctype>Dichiara la versione del linguaggio di sviluppo della pagina
classDefinisce una o più classi per elemento

Users

Log in to search for users

Explore

Find inspiration

tabella delle matricole

Array of Colors

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

}