A caso by @Sylviapedron - Codewith.it

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

Referenze

<h1>Titolo di intestazione di primo livello
srcsetL'attributo srcset definisce la risorsa grafica tramite URL all'interno del tag <source> contenuto in <picture>
acceptDefinisce e filtra il formato dei file per il tag <input type=file>
formSpecifica a quale form appartiene un elemento.
rowspanDefinisce il numero di righe su cui una cella di una tabella deve estendersi.
<title>Definisce il titolo della pagina web.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Alice nel Paese delle Meraviglie

Orologio analogico

Costruzione di tabella con html5

Arianna è un\'informatica ora

sanchez ximena html 3

borghi d-italia

esercizio informatica 1

SEMI al FUTURO Social Wall

Calcolatrice Pitagora

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>
<!--commento di silvia -->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - CSS only order process steps</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class='progress'>
  <div class='progress_inner'>
    <div class='progress_inner__step'>
      <label for='step-1'>Genesi</label>
    </div>
    <div class='progress_inner__step'>
      <label for='step-2'>La neve</label>
    </div>
    <div class='progress_inner__step'>
      <label for='step-3'>La svolta</label>
    </div>
    <div class='progress_inner__step'>
      <label for='step-4'>Un nuovo inizio</label>
    </div>
    <div class='progress_inner__step'>
      <label for='step-5'>I nostri cardini</label>
    </div>
    <input checked='checked' id='step-1' name='step' type='radio'>
    <input id='step-2' name='step' type='radio'>
    <input id='step-3' name='step' type='radio'>
    <input id='step-4' name='step' type='radio'>
    <input id='step-5' name='step' type='radio'>
    <div class='progress_inner__bar'></div>
    <div class='progress_inner__bar--set'></div>
    <div class='progress_inner__tabs'>
      <div class='tab tab-0'>
        <h1>Genesi</h1>
		<p>All’origine vi furono gli esperimenti dell’uomo che non fermarono il riscaldamento globale...</p>
      </div>
      <div class='tab tab-1'>
        <h1>La neve</h1>
		<p>In pochissimo ci ritrovammo ricoperti dalla neve come in un incubo spielberghiano, da cui temevano di non uscirne mai più...</p>
	  </div>
      <div class='tab tab-2'>
        <h1>La svolta</h1>
		<p>Da allora riuscimmo ad adattarci alla nuova forma di vita creatasi e finalmente all’alba del 2031 vediamo la luce...</p>
      </div>
      <div class='tab tab-3'>
        <h1>Un nuovo inizio</h1>
		<p>Abbiamo creato una società democratica e civile all’interno del nostro mezzo di trasposporto...</p>
      </div>
      <div class='tab tab-4'>
        <h1>I nostri cardini</h1>
		<p>Che tutela e protegge le minoranze ed è in grado di auto-alimenentarsi grazie all’innovazione della scienza.</p>
      </div>
    </div>
</div>
</body>
</html>

@import url("https://fonts.googleapis.com/css?family=Nunito:400,900");
body .progress_inner #step-1:checked + input + input + input + input + div + div + div + div > .box_base, body .progress_inner #step-5:checked + div + div + div + div > .box_base, body .progress_inner #step-4:checked + input + div + div + div + div > .box_base, body .progress_inner #step-3:checked + input + input + div + div + div + div > .box_base, body .progress_inner #step-2:checked + input + input + input + div + div + div + div > .box_base {
  top: 50%;
  left: 0px;
  opacity: 1;
}
body .progress_inner #step-1:checked + input + input + input + input + div + div + div + div > .box_item, body .progress_inner #step-5:checked + div + div + div + div > .box_item, body .progress_inner #step-4:checked + input + div + div + div + div > .box_item, body .progress_inner #step-3:checked + input + input + div + div + div + div > .box_item, body .progress_inner #step-2:checked + input + input + input + div + div + div + div > .box_item {
  top: -30px;
  left: 0px;
  opacity: 0;
}

body .progress_inner #step-2:checked + input + input + input + div + div + div + div > .box_lid, body .progress_inner #step-5:checked + div + div + div + div > .box_lid, body .progress_inner #step-4:checked + input + div + div + div + div > .box_lid {
  top: -20px;
  left: 0px;
  opacity: 0;
}
body .progress_inner #step-2:checked + input + input + input + div + div + div + div > .box_item, body .progress_inner #step-5:checked + div + div + div + div > .box_item, body .progress_inner #step-4:checked + input + div + div + div + div > .box_item {
  top: -10px;
  left: 0px;
  opacity: 1;
}

body .progress_inner #step-3:checked + input + input + div + div + div + div > .box_item, body .progress_inner #step-5:checked + div + div + div + div > .box_item, body .progress_inner #step-4:checked + input + div + div + div + div > .box_item {
  top: 10px;
  left: 0px;
  opacity: 1;
}
body .progress_inner #step-3:checked + input + input + div + div + div + div > .box_lid, body .progress_inner #step-5:checked + div + div + div + div > .box_lid, body .progress_inner #step-4:checked + input + div + div + div + div > .box_lid {
  top: -1px;
  left: 0px;
  opacity: 1;
}
body .progress_inner #step-3:checked + input + input + div + div + div + div > .box_ribbon, body .progress_inner #step-5:checked + div + div + div + div > .box_ribbon, body .progress_inner #step-4:checked + input + div + div + div + div > .box_ribbon {
  top: 70%;
  left: 0px;
  opacity: 0;
}
body .progress_inner #step-3:checked + input + input + div + div + div + div > .box_bow, body .progress_inner #step-5:checked + div + div + div + div > .box_bow, body .progress_inner #step-4:checked + input + div + div + div + div > .box_bow {
  top: 0px;
  left: 0px;
  opacity: 0;
}

body .progress_inner #step-4:checked + input + div + div + div + div > .box_ribbon, body .progress_inner #step-5:checked + div + div + div + div > .box_ribbon {
  top: 50%;
  left: 0px;
  opacity: 1;
}
body .progress_inner #step-4:checked + input + div + div + div + div > .box_bow, body .progress_inner #step-5:checked + div + div + div + div > .box_bow {
  top: -10px;
  left: 0px;
  opacity: 1;
}

body .progress_inner #step-5:checked + div + div + div + div > .box_tag {
  top: 10px;
  left: 20px;
  opacity: 1;
}
body .progress_inner #step-5:checked + div + div + div + div > .box_string {
  top: 10px;
  left: 20px;
  opacity: 1;
}

* {
  box-sizing: border-box;
}

body .progress_inner__status .box_string, body .progress_inner__status .box_tag, body .progress_inner__status .box_bow__right, body .progress_inner__status .box_bow__left, body .progress_inner__status .box_bow, body .progress_inner__status .box_ribbon, body .progress_inner__status .box_item, body .progress_inner__status .box_base, body .progress_inner, body .progress_inner__step:before {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  margin: auto;
}

body .progress_inner__bar--set, body .progress_inner__bar {
  height: 6px;
  left: 10%;
  background: repeating-linear-gradient(45deg, #1ea4ec, #1ea4ec 4px, #1f8bc5 4px, #1f8bc5 10px);
  transition: width 800ms cubic-bezier(0.915, 0.015, 0.3, 1.005);
  border-radius: 6px;
  width: 0;
  position: relative;
  z-index: -1;
}

body .progress_inner__step:before {
  width: 30px;
  height: 30px;
  color: #70afd0;
  background: white;
  line-height: 30px;
  border: 3px solid #a6cde2;
  font-size: 12px;
  top: 3px;
  border-radius: 100%;
  transition: all 0.4s;
  cursor: pointer;
  pointer-events: none;
}

body .progress_inner__step {
  width: 20%;
  font-size: 14px;
  padding: 0 10px;
  transition: all 0.4s;
  float: left;
  text-align: center;
  position: relative;
}
body .progress_inner__step label {
  padding-top: 50px;
  top: -20px;
  display: block;
  position: relative;
  cursor: pointer;
}
body .progress_inner__step:hover {
  color: white;
}
body .progress_inner__step:hover:before {
  color: white;
  background: #1ea4ec;
}

body {
  font-family: "Nunito", sans-serif;
  background: #a6cde2;
  color: #2e6c8e;
  text-align: center;
  font-weight: 900;
}
body .progress_inner {
  height: 200px;
  width: 700px;
}
body .progress_inner #step-5:checked + div {
  width: 80%;
}
body .progress_inner #step-5:checked + div + div + div > .tab:nth-of-type(5) {
  opacity: 1;
  top: 0;
}
body .progress_inner #step-5:checked + div + div + div + div {
  right: 10%;
}
body .progress_inner #step-4:checked + input + div {
  width: 60%;
}
body .progress_inner #step-4:checked + input + div + div + div > .tab:nth-of-type(4) {
  opacity: 1;
  top: 0;
}
body .progress_inner #step-4:checked + input + div + div + div + div {
  right: 30%;
}
body .progress_inner #step-3:checked + input + input + div {
  width: 40%;
}
body .progress_inner #step-3:checked + input + input + div + div + div > .tab:nth-of-type(3) {
  opacity: 1;
  top: 0;
}
body .progress_inner #step-3:checked + input + input + div + div + div + div {
  right: 50%;
}
body .progress_inner #step-2:checked + input + input + input + div {
  width: 20%;
}
body .progress_inner #step-2:checked + input + input + input + div + div + div > .tab:nth-of-type(2) {
  opacity: 1;
  top: 0;
}
body .progress_inner #step-2:checked + input + input + input + div + div + div + div {
  right: 70%;
}
body .progress_inner #step-1:checked + input + input + input + input + div {
  width: 0%;
}
body .progress_inner #step-1:checked + input + input + input + input + div + div + div > .tab:nth-of-type(1) {
  opacity: 1;
  top: 0;
}
body .progress_inner #step-1:checked + input + input + input + input + div + div + div + div {
  right: 90%;
}
body .progress_inner__step:nth-of-type(1):before {
  content: url(Icone/book2.png);
}
body .progress_inner__step:nth-of-type(2):before {
  content: url(Icone/snow.png);
}
body .progress_inner__step:nth-of-type(3):before {
  content: url(Icone/svolta.png);
}
body .progress_inner__step:nth-of-type(4):before {
  content: url(Icone/gruppo2.png);
}
body .progress_inner__step:nth-of-type(5):before {
  content: url(Icone/v.png);
}
body .progress_inner__bar--set {
  width: 80%;
  top: -6px;
  background: #70afd0;
  position: relative;
  z-index: -2;
}
body .progress_inner__tabs .tab {
  opacity: 0;
  position: absolute;
  top: 40px;
  text-align: center;
  margin-top: 80px;
  box-shadow: 0px 2px 1px #80b7d5;
  padding: 30px;
  background: white;
  border-radius: 10px;
  transition: all 0.2s;
}

body .progress_inner__tabs .tab h1 {
  margin: 0;
}
body .progress_inner__tabs .tab p {
  font-weight: 400;
  opacity: 0.8;
}
body .progress_inner__status {
  width: 40px;
  height: 40px;
  top: -80px;
  transition: right 800ms cubic-bezier(0.915, 0.015, 0.3, 1.005);
  transform: translateX(50%);
  position: absolute;
}
body .progress_inner__status div {
  opacity: 0;
  transition: all 600ms cubic-bezier(0.915, 0.015, 0.3, 1.005);
  transition-delay: 300ms;
}
body .progress_inner__status div {
  position: absolute;
}
body .progress_inner__status .box_base {
  background: repeating-linear-gradient(45deg, #986c5d, #986c5d 2px, #775144 2px, #775144 4px);
  width: 36px;
  height: 40px;
  z-index: 1;
  border-radius: 1px;
}

body .progress_inner input[type=radio] {
  display: none;
}