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

dirnameInvia informazioni sulla direzione di scrittura da un elemento input
<nav>Definisce un menu di navigazione
sizeDetermina le dimensioni dell'elemento in base al valore contenuto
<table>Tag primario per la creazione di tabelle
_parentApre collegamenti ipertestuali nell'elemento genitore
maxlengthDetermina il numero massimo di caratteri consentiti in un elemento input

Users

Log in to search for users

Explore

Find inspiration

Laus Informatica srl - Negozio eBay

HOTEL STELLA MARIS

cambio parola al click

associazioni e. movimenti

project-freecodecamp.org

esercizio indice di un libro

La magica storia di Peter Pan Laur

Esercizio fatto benissimo

Festava Live - Bootstrap 5 CSS Tem

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

}